ScryNewPickTimes {
  display: grid
  grid-template-columns: auto 350px 1fr
  grid-template-rows: auto auto
  grid-column-gap: 1rem
  grid-row-gap: 0

  div.ScryDayPicker {}

  div.time-picker {
    grid-row: 1 / 3
    grid-column: 2

    /* max-width: 350px */
    color: #fff
    background: hsla(0, 0%, 100%, .3)
    border-radius: var(--br)

    display: grid
    grid-template-rows: auto 1fr auto
    align-items: start

    label {
      font-size: .7rem
      letter-spacing: 1px
      font-weight: 600
      text-transform: uppercase

      margin: var(--boundary) var(--boundary) calc(var(--boundary) / 2) var(--boundary)
    }

    div.timezone {
      padding: var(--boundary)
      border-top: hsla(0, 0%, 100%, .5) 1px dashed

      label {}

      div.zone {
        margin-top: .3rem

        font-weight: 600
        display: flex
        align-items: center

        span {
          margin-left: .5rem
          font-weight: initial
          font-size: .8rem
        }
      }
    }
  }

  div.time-picker-pristine {
    grid-row: 1 / 3
    grid-column: 2

    color: #fff
    max-width: 350px

    display: grid
    grid-gap: .5rem
    justify-content: center
    justify-items: center
    align-content: center

    label {
      font-size: .8rem
      letter-spacing: 1px
      font-weight: 600
      text-transform: uppercase
    }
    div.instruction {
    }
  }

  div.actions {
    grid-row: 3 / 4
    grid-column: 1 / 3
    justify-self: stretch

    margin-top: 2rem

    display: flex
    justify-content: space-between
  }
}