/*
Custom style for the jMeeoCalendar plugin
default class assigned to the container are:
.jmeeo-calendar-wrapper --> assigned to the div that wrap the input field and the calendar
.jmeeo-calendar-container --> assigned to the calendar container
*/

.jmeeo-calendar-wrapper .flatpickr-input {
  background-color: var(--bg-color-2) !important;
  border-color: var(--bg-color-3);
  color: var(--main-text-color) !important;
}

.jmeeo-calendar-container{
  background: var(--bg-color-2);
  border: 1px solid var(--bg-color-3);
  border-radius: .25rem;
  box-shadow: unset !important;
  -webkit-box-shadow: unset !important;
}

.jmeeo-calendar-container .flatpickr-day {
  color: var(--main-text-color);
  transition: var(--portal-transition);
}

.jmeeo-calendar-container .flatpickr-day:hover {
  background-color: var(--bg-color-3);
  border-color: var(--bg-color-4);
}

.jmeeo-calendar-container .flatpickr-day.today {
  background-color: var(--bg-color-4);
  border-color: var(--bg-color-4);
  color: var(--main-text-color);
}

.jmeeo-calendar-container .flatpickr-day.prevMonthDay {
  color: var(--secondary-text-color);
}

.jmeeo-calendar-container .flatpickr-day.prevMonthDay:hover {
  background: var(--bg-color-3);
  border-color: var(--bg-color-2);
  color: var(--secondary-text-color);
}

.jmeeo-calendar-container .flatpickr-day.nextMonthDay {
  color: var(--secondary-text-color);
}

.jmeeo-calendar-container .flatpickr-day.nextMonthDay:hover {
  background: var(--bg-color-3);
  border-color: var(--bg-color-2);
  color: var(--secondary-text-color);
}

.jmeeo-calendar-container .flatpickr-day.selected {
  background: var(--portal-accent-color);
  color: var(--portal-accent-text-color);
  border-color: var(--portal-accent-hover-color);
}

.jmeeo-calendar-container .flatpickr-day.selected:hover{
  background: var(--portal-accent-hover-color);
  border-color: var(--portal-accent-hover-color);
}


.jmeeo-calendar-container .flatpickr-day.startRange,
.jmeeo-calendar-container .flatpickr-day.startRange:hover,
.jmeeo-calendar-container .flatpickr-day.endRange,
.jmeeo-calendar-container .flatpickr-day.endRange:hover,
.jmeeo-calendar-container .flatpickr-day.inRange {
  background: var(--portal-accent-color);
  color: var(--portal-accent-text-color);
  border-color: var(--portal-accent-color);
}

.jmeeo-calendar-container .flatpickr-day.inRange {
  -webkit-box-shadow: -5px 0 0 var(--portal-accent-color), 5px 0 0 var(--portal-accent-color) !important;
  box-shadow: -5px 0 0 var(--portal-accent-color), 5px 0 0 var(--portal-accent-color)  !important;
}

.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(--portal-accent-color);
    box-shadow: -10px 0 0 var(--portal-accent-color);
}

.jmeeo-calendar-container .flatpickr-day.inRange:hover {
  color: var(--main-text-color);
}

.jmeeo-calendar-container .flatpickr-day.flatpickr-disabled {
  opacity: 0.3;
}

.jmeeo-calendar-container .flatpickr-months .flatpickr-month {
  color: var(--main-text-color);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background-color: var(--bg-color-3);
  color: var(--main-text-color);
}

.jmeeo-calendar-container .flatpickr-months .flatpickr-prev-month,
.jmeeo-calendar-container .flatpickr-months .flatpickr-next-month {
  color: var(--main-text-color) !important;
  fill: var(--main-text-color) !important;
}

.jmeeo-calendar-container .flatpickr-weekday {
  color: var(--main-text-color);
}