/* Flatpickr inherits the active Bootstrap 5 light or dark theme variables. */
.flatpickr-positioning-context {
  position: relative;
}

.flatpickr-calendar {
  background: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  -webkit-box-shadow: var(--bs-box-shadow);
  box-shadow: var(--bs-box-shadow);
  color: var(--bs-body-color);
}

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: var(--bs-border-color);
}

.flatpickr-calendar.arrowTop:after {
  border-bottom-color: var(--bs-body-bg);
}

.flatpickr-calendar.arrowBottom:before {
  border-top-color: var(--bs-border-color);
}

.flatpickr-calendar.arrowBottom:after {
  border-top-color: var(--bs-body-bg);
}

/* Header and navigation controls. */
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  fill: var(--bs-body-color);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--bs-body-color);
  fill: var(--bs-body-color);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--bs-primary);
  fill: var(--bs-primary);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  color: var(--bs-secondary-color);
  fill: var(--bs-secondary-color);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-month,
.flatpickr-current-month input.cur-year {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  color-scheme: inherit;
}

.flatpickr-current-month .flatpickr-monthDropdown-month {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.flatpickr-current-month .flatpickr-monthDropdown-month:checked {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

.flatpickr-current-month span.cur-month:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--bs-tertiary-bg);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active,
.flatpickr-current-month input.cur-year:focus,
.flatpickr-current-month input.cur-year:active {
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
  outline: 0;
}

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.flatpickr-calendar .numInputWrapper span {
  border-color: var(--bs-border-color);
}

.flatpickr-calendar .numInputWrapper:hover,
.flatpickr-calendar .numInputWrapper span:hover {
  background: var(--bs-tertiary-bg);
}

.flatpickr-calendar .numInputWrapper span:active {
  background: var(--bs-secondary-bg);
}

.flatpickr-calendar .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--bs-body-color);
}

.flatpickr-calendar .numInputWrapper span.arrowDown:after {
  border-top-color: var(--bs-body-color);
}

.flatpickr-calendar .numInputWrapper span svg path {
  fill: var(--bs-body-color);
}

/* Calendar days and range states. */
.flatpickr-innerContainer {
  background: var(--bs-body-bg);
}

.flatpickr-day {
  color: var(--bs-body-color);
}

.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.nextMonthDay:focus {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  outline: 0;
}

.flatpickr-day:focus-visible {
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.flatpickr-day.today {
  border-color: var(--bs-primary);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white);
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-bg-subtle);
  -webkit-box-shadow: -5px 0 0 var(--bs-primary-bg-subtle), 5px 0 0 var(--bs-primary-bg-subtle);
  box-shadow: -5px 0 0 var(--bs-primary-bg-subtle), 5px 0 0 var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.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 {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  -webkit-box-shadow: none;
  box-shadow: none;
  color: var(--bs-white);
}

.flatpickr-day.selected:focus-visible,
.flatpickr-day.startRange:focus-visible,
.flatpickr-day.endRange:focus-visible {
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  -webkit-box-shadow: -10px 0 0 var(--bs-primary);
  box-shadow: -10px 0 0 var(--bs-primary);
}

.flatpickr-day.week.selected {
  -webkit-box-shadow: -5px 0 0 var(--bs-primary), 5px 0 0 var(--bs-primary);
  box-shadow: -5px 0 0 var(--bs-primary), 5px 0 0 var(--bs-primary);
}

.flatpickr-day.prevMonthDay:not(.inRange):not(.selected):not(.startRange):not(.endRange),
.flatpickr-day.nextMonthDay:not(.inRange):not(.selected):not(.startRange):not(.endRange),
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  background: transparent;
  border-color: transparent;
  color: var(--bs-secondary-color);
}

.flatpickr-weekwrapper .flatpickr-weeks,
.flatpickr-days .dayContainer + .dayContainer {
  -webkit-box-shadow: 1px 0 0 var(--bs-border-color);
  box-shadow: 1px 0 0 var(--bs-border-color);
}

.flatpickr-weekwrapper .flatpickr-weekday,
.flatpickr-weekwrapper .flatpickr-week {
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n + 2) .flatpickr-day.inRange:nth-child(7n + 1) {
  -webkit-box-shadow: -2px 0 0 var(--bs-primary-bg-subtle), 5px 0 0 var(--bs-primary-bg-subtle);
  box-shadow: -2px 0 0 var(--bs-primary-bg-subtle), 5px 0 0 var(--bs-primary-bg-subtle);
}

/* Time controls. */
.flatpickr-calendar.hasTime .flatpickr-time {
  background: var(--bs-body-bg);
  border-top-color: var(--bs-border-color);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator {
  color: var(--bs-body-color);
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.flatpickr-time .numInputWrapper:hover,
.flatpickr-time .numInputWrapper span:hover {
  background: var(--bs-tertiary-bg);
}

.flatpickr-time .numInputWrapper span {
  border-color: var(--bs-border-color);
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--bs-body-color);
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--bs-body-color);
}

.flatpickr-time input:focus {
  box-shadow: inset 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
  outline: 0;
}