.filtering-container {
    top: 0;
    z-index: 10;
    position: sticky;
    padding: .5rem 2rem 1.2rem;
    background-color: var(--limseo-white);
    /* fade */
    --fade-range: 1rem;
    --header-start: 0%;
    --footer-stop: 100%;
    --header-top: transparent var(--header-start);
    --header-bottom: black var(--header-start);
    --footer-top: black calc(var(--footer-stop) - var(--fade-range));
    --footer-bottom: transparent var(--footer-stop);
    mask-image: linear-gradient( to bottom, var(--header-top), var(--header-bottom), var(--footer-top), var(--footer-bottom) );
    /* special contant */
    --font-reduced-size: .8rem;
}
    .filtering-container > * {
        margin-bottom: .3rem;
    }

    .filtering-container > *,
    .filtering-container > .filtering > * {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .3rem;
    }

    /* 1st row */
    .filtering-container > .filtering {}

        .filtering-container > .filtering > .mainFilter {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: .3rem;
        }

            .filtering-container > .filtering > .mainFilter > .searchbar {
                width: fit-content;
                box-sizing: border-box;
                /* flex */
                display: flex;
                align-items: center;
                justify-content: space-between;
                /* border */
                border-style: solid;
                border-radius: var(--border-radius);
                border-width: var(--border-thickness);
                border-color: var(--light-gray);
            }

                .filtering-container > .filtering > .mainFilter > .searchbar > input {
                    flex-grow: 1;
                    width: 11rem;
                    box-sizing: border-box;
                    font-size: 1rem;
                    padding-inline: .5rem;
                    background-color: transparent;
                    /* border */
                    border-style: none;
                    box-sizing: border-box;
                    outline: none;
                }

                .filtering-container > .filtering > .mainFilter > .searchbar > button {
                    padding-inline: .5rem;
                }

            .filtering-container > .filtering > .mainFilter > button {
                padding-left: .4rem;
                padding-right: .7rem;
                gap: .3rem
            }

        .filtering-container > .filtering > .navigator {
            margin-left: auto;
        }

            .filtering-container > .filtering > .navigator > label.counter {
                margin-right: .5rem;
                align-self: center;
                font-size: var(--font-reduced-size);
            }

            .filtering-container > .filtering > .navigator > button.lms-btn {
                padding-inline: .5rem;
            }

            .filtering-container > .filtering > .navigator > .page-selector {
                width: 8rem;
                gap: .3rem;
            }


    /* 2nd row */
    .filtering-container > .active-filters > .filter-tag {
        font-size: var(--font-reduced-size);
        border: var(--border);
        border-radius: var(--border-radius);
        padding-left: .5rem;
    }

        .filtering-container > .active-filters > .filter-tag > input[type="text"] {
            border: none;
            outline: none;
            border-bottom: var(--border);
            width: 4rem;
        }
        .filtering-container > .active-filters > .filter-tag > button.lms-btn {
            padding-inline: .5rem;
        }

dialog#filters {
    overflow: visible;
    font-size: 1.2rem;
}

    dialog#filters > .modal-main > form > * { margin-top: 1.5rem; }
    dialog#filters > .modal-main > form > .pseudo-table {
        display: flex;
        flex-direction: column;
    }

        dialog#filters > .modal-main > form > .pseudo-table > * {
            display: flex;
            justify-content: space-between;
            margin-bottom: .75rem;
            gap: 1rem
        }

    dialog#filters > .modal-main > form input[type="search"],
    dialog#filters > .modal-main > form select {
        /* flex-grow: 1; */ /* not table-like */
        width: 11rem; /* table-like */
        border: none;
        outline: none;
        border-bottom: var(--border);
        font-size: 1.2rem;
    }
        dialog#filters > .modal-main > form select > option:first-child {
            font-style: italic;
            color: var(--heavy-gray);
        }
        dialog#filters > .modal-main > form select > option:nth-child(even) { background-color: var(--superlight-gray); }
    dialog#filters > .modal-main > form fieldset { width: 11rem; }

    dialog#filters > .modal-main > form > .close-form {
        padding-top: .75rem;
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
    }

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(1px);
}








.combobox-container {
    position: relative;
    display: inline-block;
}
    .combobox-container > .dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 12rem;
        overflow-y: auto;
        border: var(--border);
        border-top: none;
        z-index: 100;
        background-color: var(--limseo-white);
    }
        .combobox-container > .dropdown.hide-dropdown { display: none; }
        .combobox-container > .dropdown > .listElement { padding-block: .2rem; }

            .combobox-container > .dropdown > .listElement:nth-child(even) { background-color: var(--light-gray); }
            .combobox-container > .dropdown > .listElement:hover { background-color: var(--limseo-superlight-lblue); }
            .combobox-container > .dropdown > .listElement.no-result { font-style: italic; }
            .combobox-container > .dropdown > .listElement.hide-listElement { display: none; }
            .combobox-container > .dropdown > .listElement.reset {
                background-color: var(--limseo-white);
                position: sticky;
                top: 0;
            }