.onboard-overlay

  .center-bg
    height: 95%
    width: 100%
    max-width: 800px
    margin: 0 auto
    box-sizing: border-box
    background: linear-gradient(to bottom, rgba(#000, 0.2), rgba(#000, 0.0))
    text-align: center

  .logo
    margin: 35px 0 30px
    width: 100%
    position: relative
    left: -5px

    img
      width: 185px
      // height: 59.23px
      transform: none

  h1, h2
    font-size: 30px
    color: #fff
    font-weight: 200
    display: inline-block
    position: relative
    z-index: 2
    line-height: 150%

    em
      color: $light-orange

    small
      color: rgba(#fff, 0.4)

  h1
    background: #2b2b2b
    padding: 0px 30px

  p
    font-size: 18px
    color: #fff
    line-height: 170%
    margin: 30px auto
    width: 100%
    max-width: 450px
    font-weight: 200

    strong
      font-weight: 600

    &.small
      font-size: 16px
      line-height: 150%
      margin: 20px auto

    &.msg-reset-account
      font-size: 14px
      font-family: $default-font
      opacity: 0.9
      a
        color: $lighter-blue


  .divider
    height: 1px
    width: 100%
    position: absolute
    top: 137px
    background: #000
    box-shadow: 0px 1px 1px rgba(#fff, 0.2)

  .onboard-app-form
    p
      max-width: 475px
      strong
        font-weight: 400
        color: $lighter-blue

  .onboard-app-form .app-form
    width: 90%
    margin: 15px auto 0
    max-width: 350px

    input
      margin-bottom: 15px
      font-size: 14px

    button
      max-width: 150px
      font-size: 16px

    .import-opts label
      color: #fff
      background: rgba(#fff, 0.05)
      margin-bottom: 20px

      > strong
        font-size: 17px

      > input, > strong
        position: relative
        top: 8px

      &.selected
        background: rgba($dark-blue, 0.4)
        > strong
          color: #fff

  .onboard-app-importer
    .tab-bar
      background: rgba(#000, 0.2)
      > span
        color: #fff
        background: rgba(#fff, 0.08)
        border-bottom: 1px solid rgba(#000, 0.8)

        > small
          color: $light-blue

        &.selected
          background: $darker-blue
          > small
            color: lighten($light-blue, 10%)

    button.secondary
      border: 1px solid rgba(#fff, 0.3)

  .select-candidates
    width: 55%
    margin: 40px auto 40px auto
    background: #fff
    max-height: 275px
    overflow: auto

    > div
      +clearfix
      position: relative
      box-sizing: border-box
      padding: 15px

      label
        font-size: 16px
        font-family: $condensed-font
        position: absolute
        display: inline-block
        top: 50%
        left: 15px
        transform: translateY(-50%)

      img.remove
        opacity: 0.2
        width: 25px
        position: absolute
        top: 50%
        transform: translateY(-50%)
        left: 17.5px
        cursor: pointer
        &:hover
          opacity: 0.5


      button
        float: right

      &:not(:last-of-type)
        border-bottom: 1px solid hsl(0,0,90)

      &.odd
        background: hsl(0,0,97)

    &.account-candidates
      > div label
        left: 60px

  .secondary-button
    display: block
    margin: 0 auto 20px
    border: 1px solid rgba(#fff, 0.25)
    background: none
    width: 250px
    height: 55px
    font-size: 18.5px
    font-family: $condensed-font
    font-weight: 100
    text-transform: none
    color: rgba(#fff, 0.9)
    padding-top: 17px

    &:hover
      border: 1px solid rgba(#fff, 0.7)

    label, img
      display: inline-block
      position: relative

    label
      float: right

    img
      float: left
      width: 30px
      top: -3px

    &.create-org, &.add-account
      img
        width: 24px
        left: 2px

  .v2-upgrade-status
    .loader
      margin-bottom: 40px

    button.cancel
      margin-right: 10px
      color: rgba(#fff, 0.9)
      background: rgba(#fff, 0.2)

      &:hover
        color: #fff
        background: rgba(#fff, 0.4)

  .v2-upgraded-org
    p em
      color: $light-orange
      font-style: normal
      font-weight: 600


