.filter-wrapper {
    background-color: var(--color-light-gray);
}

.filter-items {
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.filter-wrapper label {
    color: var(--color-shadow-gray);
}

.btn-filter {
    border-radius: unset;
    background-color: var(--color-light-gray);
    border-color: var(--color-light-gray);
    color: var(--color-shadow-gray);
    text-transform: uppercase;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-width: 7.5rem;
    height: 100%;
    font-size: var(--13px);
    font-weight: bold;

    &:hover {
        background-color: var(--color-light-gray);
        border-color: var(--color-light-gray);
        color: var(--color-shadow-gray);
    }

    &:disabled,
    &.disabled {
        background-color: var(--color-light-gray);
        border-color: var(--color-light-gray);
        opacity: 0.65;
        cursor: not-allowed;
    }

    &:active,
    &:focus,
    &.active,
    .show > .btn-filter.dropdown-toggle {
        background-color: var(--color-light-gray) !important;
        border-color: var(--color-light-gray) !important;
        box-shadow: none;
        color: var(--color-shadow-gray);
    }
}

.btn-filter:before {
    content: "\f107";
    font-family: var(--font-awesome);
    font-weight: bold;
    display: inline-block;
    font-size: var(--13px);
}

.btn-filter.collapsed:before {
    content: "\f105";
}

.filter-item {
    display: flex;
    flex-direction: column;
}

.filter-item .bootstrap-select {
    width: 185px !important;
}