/* Disable all Flatpickr animations */
.flatpickr-calendar * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    font-family: "Metropolis Regular";
}

.flatpickr-current-month {
    font-size: 18px;
}

/* Dark Mode Styles */
.dark .flatpickr-calendar {
    background: #0b0d0c;
    box-shadow: 1px 0 0 #333, -1px 0 0 #333, 0 1px 0 #333, 0 -1px 0 #333,
        0 3px 13px rgba(0, 0, 0, 0.08);
}

.dark .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #333;
}

.dark .flatpickr-calendar.arrowTop:after {
    border-bottom-color: #0b0d0c;
}

.dark .flatpickr-calendar.arrowBottom:before {
    border-top-color: #333;
}

.dark .flatpickr-calendar.arrowBottom:after {
    border-top-color: #0b0d0c;
}

.dark .flatpickr-month,
.dark .flatpickr-current-month,
.dark .flatpickr-weekday,
.dark span.flatpickr-weekday,
.dark .flatpickr-day,
.dark .flatpickr-weekdays,
.dark .flatpickr-current-month input.cur-year,
.dark .flatpickr-year-select {
    color: #fff;
    fill: #fff;
}

.dark .flatpickr-year-select option {
    background-color: #0b0d0c;
    color: #fff;
}

.dark .flatpickr-months .flatpickr-prev-month,
.dark .flatpickr-months .flatpickr-next-month {
    color: #fff;
    fill: #fff;
}

.dark .flatpickr-months .flatpickr-prev-month:hover svg,
.dark .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #fff;
}

.dark .flatpickr-months .flatpickr-prev-month svg,
.dark .flatpickr-months .flatpickr-next-month svg {
    fill: #fff;
}

.dark .flatpickr-day.inRange,
.dark .flatpickr-day.prevMonthDay.inRange,
.dark .flatpickr-day.nextMonthDay.inRange,
.dark .flatpickr-day.today.inRange,
.dark .flatpickr-day.prevMonthDay.today.inRange,
.dark .flatpickr-day.nextMonthDay.today.inRange,
.dark .flatpickr-day:hover,
.dark .flatpickr-day.prevMonthDay:hover,
.dark .flatpickr-day.nextMonthDay:hover,
.dark .flatpickr-day:focus,
.dark .flatpickr-day.prevMonthDay:focus,
.dark .flatpickr-day.nextMonthDay:focus {
    background: #333;
    border-color: #333;
}

.dark .flatpickr-day.inRange {
    box-shadow: -5px 0 0 #333, 5px 0 0 #333;
}

.dark .flatpickr-day:hover,
.dark .flatpickr-day.prevMonthDay:hover,
.dark .flatpickr-day.nextMonthDay:hover,
.dark .flatpickr-day:focus,
.dark .flatpickr-day.prevMonthDay:focus,
.dark .flatpickr-day.nextMonthDay:focus {
    background: #333;
    border-color: #333;
    color: #fff;
}

.dark .numInputWrapper span.arrowUp:after {
    border-bottom-color: #fff;
}

.dark .numInputWrapper span.arrowDown:after {
    border-top-color: #fff;
}