.flatpickr-calendar {
    background-color: var(--tw-light-active);
    box-shadow: 1px 0 0 var(--tw-gray-300), -1px 0 0 var(--tw-gray-300), 0 1px 0 var(--tw-gray-300), 0 -1px 0 var(--tw-gray-300), 0 1px 1px var(--tw-gray-300);
}

.flatpickr-months .flatpickr-month {
    color: var(--tw-gray-700);
}

span.flatpickr-weekday {
    color: var(--tw-gray-700);
}

.flatpickr-day.selected {
    background: var(--tw-primary);
    border-color: var(--tw-primary);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    color: var(--tw-gray-300);
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--tw-gray-700);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--tw-gray-700);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--tw-gray-700);
}

.flatpickr-months .flatpickr-next-month:hover {
    color: var(--tw-gray-300);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--tw-gray-400);

}

.flatpickr-day {
    color: var(--tw-gray-500);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: var(--tw-light-active);
}