#calendar-wrapper {
  width: 100%;
  display: grid;
  grid-template-rows: 2.5em 1fr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  font-size: inherit;
  padding-top: 1em;
  padding-bottom: 1em;
}

#calendar-wrapper header {
  text-align: center;
  grid-row: 1/2;
  font-size: 2em;
  box-sizing: inherit;
}

#calendar-wrapper header h4 {
  padding: 0;
  margin: 0;
}

#calendar {
  /* display: grid;
  grid-template-columns: 1fr 4em;
  grid-template-rows: 3em 1fr; */
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

#calendar #calendar-days,
#calendar #calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  padding: 0 1em;
  box-sizing: inherit;
  margin: 0;
}

#calendar #calendar-days {
  justify-items: center;
  grid-row: 1/2;
  grid-column: 1/2;
}

#calendar #calendar-grid {
  grid-template-rows: repeat(6, 1fr);
  justify-items: flex-start;
  grid-row: 2/-1;
  grid-column: 1/2;
  width: 100%;
}

#calendar #calendar-grid > time {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0.4em;
  padding: 0.5em 0.2em;
  width: 90%;
  background-color: rgba(108, 108, 108, 0.02);
  border-radius: 3px;
  border: 2px solid transparent;
  transition: box-shadow 200ms, border 100ms;
  box-shadow: 1px 1px rgba(0, 0, 0, 0);
  box-sizing: inherit;
}

#calendar #calendar-grid time.selected,
#calendar #calendar-grid time.selected:focus {
  outline: none;
  border: 2px solid #5f6ae8;
  background-color: rgba(95, 106, 232, 0.25);
  box-sizing: inherit;
}

#calendar #calendar-grid time.disabled,
#calendar #calendar-grid time.disabled:focus {
  outline: none;
  border: 2px solid transparent;
  box-sizing: inherit;
  cursor: not-allowed;
  background-color: rgba(30, 39, 51, 0.2);
  box-shadow: 1px 1px rgba(0, 0, 0, 0);
}

#calendar #calendar-grid > *:hover {
  border: 2px solid rgba(72, 72, 72, 0.5);
  box-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  box-sizing: inherit;
}

#calendar #navigation-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* grid-row: 2/-1;
  grid-column: 2/-1; */
  box-sizing: inherit;
  /* padding: 1em 0 3.5em; */
  /* margin: 0; */
  margin-bottom: 1em;
}

#calendar #navigation-wrapper button {
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 2em;
  width: 1.6em;
  box-sizing: inherit;
  padding: 0.1em;
  margin: 0;
}

#calendar #navigation-wrapper button:hover {
  opacity: 0.75;
}

#calendar #navigation-wrapper button svg {
  margin: 0 auto;
  padding: 0;
  width: 60%;
  height: 1.2em;
  display: block;
  box-sizing: inherit;
}

#calendar #navigation-wrapper button:first-of-type {
  transform: rotate(90deg);
}

#calendar #navigation-wrapper button:last-of-type {
  transform: rotate(270deg);
}