@import "variables.css";

.row, .calenderheader, .calenderfooter {
  max-width: 900px;
  margin: 0 auto;
}
.calenderheader {
  text-align: center;
}
#calendartable {
  width: 100%;
  max-width: 900px;
}
#calendartable th {
  text-align: center;
}
@media only screen and (max-width: 600px) {
  th span.full {display: none;}
  th span.short {display: inline-block;}
}
@media only screen and (min-width: 600px) {
  th span.full {display: inline-block;}
  th span.short {display: none;}
}
#calendartable td {
  width: 100px;
  height: 80px;
  text-align: center;
  line-height: 80px !important;
  font-size: 1.5em;
  overflow: hidden;
  position: relative;
}
#calendartable td {
  font-family: monospace;
}
.available {
  background-color: var(--light_sea);
  color: white;
  cursor: pointer;
}
.available_available {
  background: linear-gradient(148deg, var(--light_sea) 49%, #eee 2px, var(--light_sea) 50%);
  color: white;
  cursor: pointer;
}
.blocked {
  background-color: var(--dark_sand);
  color: white;
}
.blocked_blocked {
  background: linear-gradient(148deg, var(--dark_sand) 49%, #eee 2px, var(--dark_sand) 50%);
  color: white;
}
.available_blocked {
  background: linear-gradient(148deg, var(--light_sea) 50%, var(--dark_sand) 50%);
  color: white;
  cursor: pointer;
}
.blocked_available {
  background: linear-gradient(148deg, var(--dark_sand) 50%, var(--light_sea) 50%);
  color: white;
}
.not_bookable {
  background-color: #eee;
}
.nextday, .prevday {
  opacity: 0.6;
}
.selected_period {
  background: var(--dark_sea);
}
.blocked_available.selected_period {
  background: linear-gradient(148deg, var(--dark_sand) 50%, var(--dark_sea) 50%);
}
.blocked_available.post_selected_period {
  background: linear-gradient(148deg, var(--dark_sand) 49%, #eee 2px, var(--dark_sea) 50%);
}
.available_blocked.selected_period {
  background: linear-gradient(148deg, var(--dark_sea) 50%, var(--dark_sand) 50%);
  color: white;
}
.available_blocked.pre_selected_period {
  background: linear-gradient(148deg, var(--dark_sea) 49%, #eee 2px, var(--dark_sand) 50%);
}
.available_blocked .half_day {
  cursor: initial;
}
.blocked_available .half_day {
  cursor: pointer;
}
.pre_selected_period {
  background: linear-gradient(148deg, var(--dark_sea) 49%, #eee 2px, var(--light_sea) 50%);
}
.post_selected_period {
  background: linear-gradient(148deg, var(--light_sea) 49%, #eee 2px, var(--dark_sea) 50%);
}
.half_day {
  position: absolute;
  width: 150px;
  height: 75px;
  background: transparent;
  transform: rotate(-32deg);
  margin-top: -46px;
  margin-left: 7px;
}