.btn-filter {
    position: relative;
    border: 1px solid #dce7f1;
    height: 38px;
    min-width: 100px;
    padding-left: 2.25rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--bs-secondary);
    transition: all 0.2s ease-in-out;
}

.btn-filter i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary);
    transition: color 0.2s ease-in-out;
}

.btn-filter:hover {
    border-color: #dce7f1;
}

.btn-filter:hover i {
}

.btn-filter:focus,
.btn-filter:active,
.btn-filter.show,
.btn-filter[aria-expanded="true"] {
    border-color: #9fc6ad;
    box-shadow: 0 0 0 0.25rem rgba(63, 140, 90, 0.25);
}

.btn-filter:focus i,
.btn-filter:active i,
.btn-filter.show i,
.btn-filter[aria-expanded="true"] i {
}

html[data-bs-theme="dark"] .btn-filter {
    color: #adb5bd;
    position: relative;
    border: 1px solid #35354f;
    height: 38px;
    min-width: 100px;
    padding-left: 2.25rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

html[data-bs-theme="dark"] .btn-filter i {
    color: #adb5bd;
}

html[data-bs-theme="dark"] .btn-filter:hover {
    border-color: #4e4e6e;
    background-color: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] .btn-filter:focus,
html[data-bs-theme="dark"] .btn-filter:active,
html[data-bs-theme="dark"] .btn-filter.show,
html[data-bs-theme="dark"] .btn-filter[aria-expanded="true"] {
    border-color: #4b4b68;
    box-shadow: 0 0 0 0.25rem rgba(63, 140, 90, 0.25);
}