ScryShow {
  color: hsla(0, 0%, 20%, 1)
  font-family: sans-serif, sans, arial
  padding: 2rem
  background: hsla(0, 0%, 100%, 0.6)

  border-radius: 5px

  display: grid
  justify-content: start

  h1 {
    font-size: 1.2rem
    margin: 0
  }

  div.closes-at {
    color: hsla(0, 0%, 30%, 1)
    margin: 1rem 0
  }

  div.ScryShowResults {
    margin-bottom: 1rem
  }

  div.actions {
    display: flex
    justify-content: flex-end
  }
}

ScryShowResults {
  background: #fff

  overflow-x: auto

  display: grid
  grid-gap: 1px
  justify-content: start
  justify-items: stretch
  align-items: center

  div { padding: 5px }

  div.ScryShowTime {
    padding: 10px
  }

  div.name {
    font-size: 14px
    font-weight: 600
    padding-left: 10px

    display: flex
    justify-content: space-between
    align-items: center

    i {
      margin: 0 .5rem
      cursor: pointer
    }
  }

  div.position {
    color: #fff
    font-size: 20px
    text-align: center
    -yes {
      background: hsla(172, 60%, 70%, 1)
    }
    -no {
      background: hsla(312, 60%, 70%, 1)
      align-self: stretch
    }
    -edit {
      color: hsla(312, 60%, 70%, 1)
      font-wight: 600
      cursor: pointer
      align-self: stretch
    }
  }
}

ScryShowTime {
  display: grid
  justify-content: center
  justify-items: center

  div.month {
    color: hsla(0, 0%, 30%, 1)
    font-size: 16px
  }
  div.date {
    font-size: 26px
    font-weight: 600
  }
  div.day {
    color: hsla(0, 0%, 30%, 1)
    font-size: 12px
    font-weight: 600
    text-transform: uppercase
    letter-spacing: 1px
  }
  div.time {
    font-size: 16px

    margin-top: 1rem
  }
}