:root {
  --ss-cms-datepicker-accent: #f64747;
  --ss-cms-datepicker-selected: #4f99ff;
}

.field.date .form-control[readonly].flatpickr-alt-input,
.field.datetime .form-control[readonly].flatpickr-alt-input,
.field.time .form-control[readonly].flatpickr-alt-input {
  background-color: white;
  cursor: pointer;
}

.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:hover {
  color: var(--ss-cms-datepicker-accent);
}

.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months .flatpickr-prev-month:hover svg {
  fill: var(--ss-cms-datepicker-accent);
}

.flatpickr-day.today {
  border-color: var(--ss-cms-datepicker-accent);
}

.flatpickr-day.today:focus,
.flatpickr-day.today:hover {
  border-color: var(--ss-cms-datepicker-accent);
  background: var(--ss-cms-datepicker-accent);
  color: #fff;
}

span.flatpickr-day.today:not(.selected),
span.flatpickr-day.prevMonthDay.today:not(.selected),
span.flatpickr-day.nextMonthDay.today:not(.selected) {
  border-bottom-color: var(--ss-cms-datepicker-accent);
}

span.flatpickr-day.today:not(.selected):hover,
span.flatpickr-day.prevMonthDay.today:not(.selected):hover,
span.flatpickr-day.nextMonthDay.today:not(.selected):hover {
  border: 1px solid var(--ss-cms-datepicker-accent);
}

.flatpickr-day.selected,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.endRange:focus,
.flatpickr-day.endRange:hover {
  background: var(--ss-cms-datepicker-selected);
  border-color: var(--ss-cms-datepicker-selected);
  color: #fff;
}

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

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

span.flatpickr-day.startRange,
span.flatpickr-day.endRange,
span.flatpickr-day.prevMonthDay.startRange,
span.flatpickr-day.prevMonthDay.endRange,
span.flatpickr-day.nextMonthDay.startRange,
span.flatpickr-day.nextMonthDay.endRange {
  border-color: var(--ss-cms-datepicker-selected);
}