/* === Filter Dropdown Styles === */

/* Dropdown button highlight when active */
.filter-option-list:has(input:checked) button {
    background-color: #81D5C5 !important;
}

/* Outer dropdown container */
.filter-option-list .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: visible;
    min-width: max-content;
    white-space: nowrap;
    padding: 0.5rem;
}

/* Tree structure */
.dropdown-tree {
    padding-left: 1rem;
    white-space: nowrap;
}

    .dropdown-tree li {
        margin: 0.25rem 0;
    }

/* Tree toggle */
.tree-toggle {
    width: 1rem;
    display: inline-block;
    text-align: center;
    user-select: none;
    cursor: pointer;
}

/* Filter item row  */
.filter-option-list-item {
    
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    cursor: pointer;
    margin-left:5px;
}

/* Nested trees should not scroll independently */
.nested-tree {
    overflow: visible;
    max-height: none;
}

.filter-option-list .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: visible;
    min-width: max-content;
    white-space: nowrap;
    padding: 0 5px 0 0;
    position: relative; /* Needed for sticky search */
    min-width: 150px;
}

    /* Make the <li> containing search stick to the top */
.dropdown-search {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
    padding: 0.5rem;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
}

.typeahead-filter {
    width: 100%;
    padding: 0.25rem 0.5rem;
    margin: 0;
    box-sizing: border-box;
    width: calc(100% - 30px);
}


/* Selected filter chip style */
.simple-chip-filter {
    background-color: #8578B6;
    color: white;
    border-radius: 5px;
    font-size: 12px;
    padding: 3px 6px;
    margin: 3px;
    display: inline-block;
}
    .simple-chip-filter.ban-list-type {
        background-color: #b23b8e;
    }


    .ban-filter {
        cursor: pointer;
        font-size: 26px;
    }
.check-with-ban {
    display: none;
}
.check-with-ban:checked + .ban-checked {
    color: red;
}