:root {
    --free-color: #d4d4d4;
    --busy-color: #ff5733;
}

.calendar {
    width: min(100%, 400px);
    text-align: center;
    font-family: Arial;
    font-size: 100%;
}
.calendar .week-days b,
.calendar .days button {
    font-size: 100%;
    display: inline-block;
    width: calc(100% / 7);
    padding-top: calc(100% / 23);
    padding-bottom: calc(100% / 23);
    border: none;
    pointer-events: none;
    font-weight: bold;
}
.calendar .days button {
    background-color: var(--free-color);
    font-size: 120%;
}
.calendar .days .disabled {
    opacity: 0.4
}
.calendar .days .busy {
    background-color: var(--busy-color)
}
.calendar .days .start {
    background-image: linear-gradient(to top left, var(--busy-color) 50%, var(--free-color) 50%);
}
.calendar .days .end {
    background-image: linear-gradient(to top left, var(--free-color) 50%, var(--busy-color) 50%);
}
.calendar .legend {
    font-size: 80%;
}
.calendar .legend button {
    display: inline-block;
    width: 3vw;
    height: 3vw;
    border: none;
    pointer-events: none;
}
.calendar .legend span {
    vertical-align: middle;
}
.calendar .legend .available {
    background-color: var(--free-color);
}
.calendar .legend .unavailable {
    background-color: var(--busy-color);
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.arrow:hover {
    opacity: 0.5
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}