/* Input field */
.flatpickr-js {
    background-color: var(--color-white) !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    font-weight: 300 !important;
    border-radius: 0.75rem !important;

    &::placeholder {
        color: var(--color-gray-dark) !important;
    }
}

/* Optional: Style the calendar popup to look more like BS5 */
.flatpickr-calendar {
    border: none !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: 0.75rem !important;
}

/* Style the selected date and range */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay,
.flatpickr-monthSelect-month.selected, .flatpickr-monthSelect-month.startRange, .flatpickr-monthSelect-month.endRange {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}