/* ==========================================================================
   Home page
   ========================================================================== */

.checkin
  min-height: 850px
  display: inline-block
  +respond-to-width(900)
    min-height: auto
    padding-bottom: 0

  h2
    margin: 0

  .course-attributes
    width: auto
    margin-bottom: 60px
    p
      +inline-flex(center, center)
      margin-right: 45px

      svg
        margin-right: 5px

        > g
          > g, use
            fill: #04D682

  input#certificate_number
    display: block
    font-size: 0.8rem
    line-height: 1.1
    padding: 10px
    &:focus
      outline: none

    +placeholder
      opacity: 0.5

  .checkin-result
    width: 90%
    font-size: 1.5rem
    line-height: 1.6
    opacity: 0
    transition: opacity 1s
    &.show
      opacity: 1
    &.success
      color: #095d0d
    &.failed
      color: #9a0303



.sidebar
  &.students
    +respond-to-width(900)
      background-color: transparent
      position: relative
      width: 100%
      height: auto
      display: block
      transform: translate3d(0, 0, 0)
      box-shadow: none
    h1
      padding: 0 14%
      +respond-to-width-beyond(1800)
        padding: 0 50px

      +respond-to-width(900)
        position: relative
        word-break: normal
        font-size: 1.6rem
        width: auto
        margin: 0
        text-align: left
        padding: 0

      span.icon
        +respond-to-width(900)
          display: none

    h2
      padding: 0 14%

      +respond-to-width(900)
        padding: 0

    ul
      margin-bottom: 30px
      max-height: 240px

      +respond-to-width(900)
        max-height: none
        height: auto
        margin-left: 30px
        border-left: 0

      li
        padding: 25px 50px

        &:first-of-type,
        &:last-of-type
          border-bottom: 0.5px solid $ctaBackground

        p
          color: $semiBlack
          font-weight: 600
          margin-bottom: 1.5em

          &.value
            font-weight: normal
            color: $gray
            margin-bottom: 0.375em

      &#presentUsers
        li
          position: relative
          color: $green
          &:before
            content: '\2713'
            position: absolute
            left: 18px
            font-size: 2rem
            top: 0.4rem
            transform: rotate(-5deg)

      &#subscribedUsers
        li
          position: relative
          &:before
            content: '?'
            position: absolute
            left: 18px
            font-size: 2rem
            top: 0.4rem