.time-tile-light {
  /*
    Base appearance of each time tile.

    These tiles are positioned by CSS Grid. The JavaScript sets --time-row
    because each generated tile needs a different row.
  */
  display: flex;
  grid-column: 1;
  grid-row: var(--time-row) / span 1;
  z-index: 2;
  align-items: center;
  margin-right: auto;
  width: var(--time-tile-w);
  padding: 0 8px;
  background: lightblue;
  border-radius: var(--radius);
  color: var(--tile-text);
  box-shadow: var(--shadow);
  font-weight: 600;
  white-space: nowrap;
}

.time-availability-message {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
  align-self: center;
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  color: #7a271a;
  font-size: 13px;
  font-weight: 700;
}