#twelve-days {
  user-select: none;

  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;

  background-color: #b3e7a3;
  color: #666;

  .within-window {
    color: black;
  }
  margin: auto;
  width: fit-content;

  display: grid;
  > * {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  #labels {
    display: grid;
    grid-template-rows: repeat(14, auto);
    grid-template-columns: repeat(3, auto);

    > * {
      box-sizing: border-box;
      height: 38px;
      border: 1px solid #aaa;
      padding: 0.5rem;
      text-align: center;
    }
    > *.day-ordinal {
      width: 4rem;
    }
    > *.gift-kind {
      width: 10rem;
    }
    > *.gift-index {
      width: 2rem;
    }
  }

  #sliders {
    --12d-slider-colour: #ad1705;
    color: white;
    position: relative;
    > * {
        cursor: grab;
        touch-action: none;
      &.dragging { cursor: grabbing; }
      position: absolute;
      display: grid;
      margin-left: -3rem;
      margin-right: -1rem;
      transition: top 0.2s ease-in-out;
      .intro-wrapper {
        display: grid;
        place-items: center start;
        .intro {
          margin: 0px 0px 3px 0.5rem;
        }
      }
    }
    > * > * {
      margin: 0px;
      height: 35px;
      background-color: var(--12d-slider-colour);
    }
    > * > .window {
      border-width: 6px;
      border-style: solid;
      box-sizing: border-box;
      background-color: transparent;
      border-color: var(--12d-slider-colour);
    }
    > #choose-day {
      grid-template-columns: 3rem 4rem 13rem;

      > .two-lines {
        p {
          margin: 0px;
        }
      }
    }
    > #choose-kind {
      grid-template-columns: 7rem 10rem 3rem;
    }
    > #choose-which {
      grid-template-columns: 17rem 2rem 1rem;
    }
  }
}