:root {
  --dp-border-radius: 0;
  --dp-cell-border-radius: 0;
  --dp-font-family: 'Verdana', sans-serif;
  --dp-font-size: 1.4rem;
  --dp-menu-padding: 0;
  --dp-cell-padding: 5px;
  --dp-cell-size: 40px;
  --dp-button-icon-height: 30px;
  --dp-month-year-row-button-size: 30px;
}

.dp__theme_light {
  --dp-background-color: var(--blue-light);
  --dp-text-color: var(--color-primary);
  --dp-hover-color: var(--blue-light);
  --dp-hover-text-color: var(--color-primary);
  --dp-hover-icon-color: var(--color-primary);
  --dp-primary-color: var(--color-primary);
  --dp-primary-disabled-color: var(--blue-light);
  --dp-primary-text-color: var(--white);
  --dp-secondary-color: var(--color-primary);
  --dp-border-color: var(--blue-light);
  --dp-menu-border-color: var(--blue-light);
  --dp-disabled-color: var(--blue-light);
  --dp-icon-color: var(--color-primary);
  --dp-disabled-color-text: var(--blue-light);
}

#reservation-calendar {
  margin-top: 20px;
}

#reservation-calendar .dp__main > div:nth-child(1) {
  display: none;
}

#reservation-calendar .dp__main > div {
  width: 100%;
}

#reservation-calendar .dp__main .dp--header-wrap {
  padding: 5px 0;
}

#reservation-calendar .dp__main .dp__month_year_select {
  font-weight: 700;
}

#reservation-calendar .dp__main .dp__pointer {
  border: 0;
}

#reservation-calendar .dp__main .dp__cell_disabled {
  background-color: transparent;
  opacity: 0.5;
}

#reservation-calendar .dp__main .dp__marker_line.occupancy__green {
  background-color: var(--green);
}

#reservation-calendar .dp__main .dp__marker_line.occupancy__yellow {
  background-color: var(--orange);
}

#reservation-calendar .dp__main .dp__marker_line.occupancy__red {
  background-color: var(--red);
}

#reservation-calendar .tp__main {
  column-gap: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 10px;
  margin-top: 10px;
}

#reservation-calendar .tp__main .tp__item {
  text-align: center;
  padding: 10px 10px 5px 10px;
  background-color: var(--blue-light);
  cursor: pointer;
  border-bottom: 5px solid var(--blue-light);
}

#reservation-calendar .tp__main .tp__item.occupancy__green {
  border-bottom: 5px solid var(--green);
}

#reservation-calendar .tp__main .tp__item.occupancy__yellow {
  border-bottom: 5px solid var(--orange);
}

#reservation-calendar .tp__main .tp__item.occupancy__red {
  border-bottom: 5px solid var(--red);
}

#reservation-calendar .tp__main .tp__item.active {
  background-color: var(--color-primary);
  color: var(--white);
}

#reservation-calendar .dp__inner_nav_disabled {
  display: none;
}