.will-calendar-filter-container {
  display: flex;
  justify-content: center;
  user-select: none;
}

/* Calendar overrides */
.will-calendar-filter-container .rdp {
  margin: 0;
}

.will-calendar-filter-container .DayPicker {
  font-size: 25px;
}

.will-calendar-filter-container .rdp-month {
  position: relative;
}

.will-calendar-filter-container .rdp-month.rdp-caption_start {
  padding-left: 70px;
}

.will-calendar-filter-container .rdp-month.rdp-caption_end {
  padding-right: 70px;
}

.will-calendar-filter-container .rdp-month .rdp-nav {
  border: 1px solid var(--will-primary);
  border-radius: 50%;
}

.will-calendar-filter-container .rdp-month .rdp-nav svg {
  color: var(--will-primary);
}

.will-calendar-filter-container .rdp-month .rdp-caption {
  position: initial;
}

.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,
.will-calendar-filter-container .rdp-table .rdp-head {
  opacity: 0.6;
}

.will-calendar-filter-container .rdp-table {
  border-collapse: separate;
  border-spacing: 0px 2px;
}

.will-calendar-filter-container
  .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
  background-color: var(--will-primary);
  opacity: 1;
  color: var(--will-white);
}

.will-calendar-filter-container .my-today:not(.rdp-day_selected) {
  font-weight: 700;
  opacity: 1;
  color: var(--will-primary);
}

.will-calendar-filter-container .rdp-cell {
  position: relative;
}

.will-calendar-filter-container .rdp-cell button {
  font-weight: 500;
}

.will-calendar-filter-container .rdp-cell button.booked {
  font-weight: 400;
  cursor: not-allowed;
}

.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {
  color: var(--will-transparent-black);
  opacity: 1;
}

@media (max-width: 960px) {
  .will-calendar-filter-container .rdp-month .rdp-nav {
    border: none;
    border-radius: initial;
  }

  .will-calendar-filter-container .rdp-month.rdp-caption_start {
    padding-left: 10px;
  }

  .will-calendar-filter-container .rdp-month.rdp-caption_end {
    padding-right: 10px;
  }
}

/* Tooltips */
.will-root .will-calendar-filter-container .will-calendar-tooltip,
.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-overlapping-date,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-check-out-only,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-check-in-only {
  position: absolute;
  top: -42px;
  transform: translateX(calc(-50% + 20px));
  display: none;
  white-space: nowrap;
  z-index: 2;
}

.will-root .will-calendar-filter-container .will-calendar-tooltip > div,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-check-out
  > div,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-overlapping-date
  > div,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-check-out-only
  > div,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-check-in-only
  > div {
  background-color: white;
  position: relative;
  padding: 5px 10px;
  border: 1px solid var(--will-primary);
  border-radius: 5px;
}

.will-root .will-calendar-filter-container .will-calendar-tooltip::before,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-check-out::before,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-overlapping-date::before,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-check-out-only::before,
.will-root
  .will-calendar-filter-container
  .will-calendar-tooltip-check-in-only::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid var(--will-primary);
  position: absolute;
  bottom: -4px;
  left: calc(50% - 5.555px);
  rotate: 45deg;
  z-index: 0;
  background-color: var(--will-white);
}

.will-root
  .will-calendar-filter-container
  .rdp-cell:hover
  .will-calendar-tooltip,
.will-root
  .will-calendar-filter-container
  .rdp-cell:hover
  .will-calendar-tooltip-check-out,
.will-root
  .will-calendar-filter-container
  .rdp-cell:hover
  .will-calendar-tooltip-overlapping-date,
.will-root
  .will-calendar-filter-container
  .rdp-cell:hover
  .will-calendar-tooltip-check-out-only,
.will-root
  .will-calendar-filter-container
  .rdp-cell:hover
  .will-calendar-tooltip-check-in-only {
  display: block;
}

/* Loading spinner */

.will-root .will-calendar-filter-container .rdp-months {
  position: relative;
}

.will-root .will-calendar-filter-container .will-calendar-spinner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--will-white-transparent);
  z-index: 3;
  display: none;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}

/* No active selection */

.will-root .will-calendar-filter-container .no-active-selection-start,
.will-root .will-calendar-filter-container .no-active-selection-mid,
.will-root .will-calendar-filter-container .no-active-selection-end {
  position: initial;
}

.will-root .will-calendar-filter-container .no-active-selection-start::before,
.will-root .will-calendar-filter-container .no-active-selection-mid::before,
.will-root .will-calendar-filter-container .no-active-selection-end::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--will-light-grey);
  box-sizing: border-box;
}

.will-root .will-calendar-filter-container .no-active-selection-start::before {
  border-right: none;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.will-root .will-calendar-filter-container .no-active-selection-mid::before {
  border-right: none;
  border-left: none;
}

.will-root .will-calendar-filter-container .no-active-selection-end::before {
  border-left: none;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.will-root
  .will-calendar-filter-container
  .rdp-day_selected.rdp-day_range_middle.checkout-option {
  background-color: var(--will-primary-lightest);
  color: inherit;
}

/* Overlapping date */

.will-root .will-calendar-filter-container .overlapping-date {
  user-select: none;
  pointer-events: none;
}

.will-root .will-calendar-filter-container .overlapping-date:hover {
  cursor: not-allowed;
}

@media (max-width: 600px) {
  /* Tooltips */
  .will-root .will-calendar-filter-container .will-calendar-tooltip,
  .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,
  .will-root
    .will-calendar-filter-container
    .will-calendar-tooltip-overlapping-date,
  .will-root
    .will-calendar-filter-container
    .will-calendar-tooltip-check-out-only,
  .will-root
    .will-calendar-filter-container
    .will-calendar-tooltip-check-in-only {
    top: -70px;
    white-space: wrap;
    max-width: 120px;
  }
}