html {
    --fnd-filter-color: var(--fnd-surface-1);
    --fnd-filter-border-color: var(--fnd-surface-1);
    --fnd-filter-border-focus-color: var(--fnd-text-color);
}

.filter-selector {
    width: 180px !important;
    font-size: .775rem !important;
    font-weight: 400 !important;
    line-height: 1.5rem !important;
    text-transform: capitalize;
    padding: 6px 12px;
}
.filter-selector .ss-single {
    font-weight: 600;
}

.filter-month {
    min-width: 180px !important;
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter-month-text {
    font-size: .775rem !important;
    font-weight: 600 !important;
    line-height: 1.5rem !important;
    text-transform: capitalize;
    padding: 6px 0;
}
.filter-month-button {
    width: auto !important;
    font-size: .775rem !important;
    font-weight: 300;
    line-height: 1.5rem !important;
    box-shadow: none !important;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.filter-full-date {
    width: 150px !important;
    font-size: .775rem !important;
    font-weight: 600 !important;
    line-height: 1.5rem !important;
    text-transform: capitalize;
    padding: 6px 12px;
}

.filter-search {
    width: 180px !important;
    font-size: .775rem !important;
    line-height: 1.5rem !important;
    font-weight: 600;
    padding: 6px 12px;
}
.filter-search::placeholder {
    font-weight: 400;
}



.filter-search,
.filter-full-date,
.filter-month-button,
.filter-month,
.filter-selector {
    background-color: var(--fnd-filter-color);
    border: 1px solid var(--fnd-filter-border-color);
    border-radius: var(--shape-xl);
    color: var(--fnd-text-color);
}