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.about {
    font-size: 14px
    font-weight: 600
    padding: 0 8px 0 5px

    display: grid
    grid-template-columns: auto 1fr auto
    grid-gap: 7px
    align-content: center
    align-items: center

    a { height: 30px }
    (img) {
      height: 30px
      width: 30px
    }

    i {
      justify-self: flex-end
      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 {
      text-align: initial
      justify-self: center
      color: hsla(312, 60%, 70%, 1)
      cursor: pointer
      width: 20px
    }
  }

  div.participants {
    color: hsla(0, 0%, 50%, 1)
    font-weight: 600
  }
  div.count {
    color: hsla(0, 0%, 50%, 1)
    font-weight: 600
    text-align: center
  }
}

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
  }
}