#safeguard-lean-overlay
  position: fixed
  z-index: 100
  top: 0px
  left: 0px
  height: 100%
  width: 100%
  background: #000
  opacity: 0.5

.hidden_field
  display: none

.safeguard-form .form
  font-family: 'Open Sans',sans-serif
  font-size: 15px
  position: fixed
  z-index: 11000
  left: 50%
  width: 400px
  margin-left: -223px
  top: 50%
  border: 1px solid rgba(71, 71, 71, 1)
  font-weight: normal
  padding: 10px 10px 10px
  border-radius: 8px
  box-shadow: 0px 0px 150px rgba(0, 0, 0, 0.5)
  background: #348eda
  margin-top: -180px
  overflow: hidden

.safeguard-form-button
  width: auto !important
  cursor: pointer !important
  display: inline-block
  text-align: center
  font-size: 15px
  padding: 0 30px
  border: 1px solid rgba(0, 0, 0, 0.33)
  color: #fff
  margin-right: 0px
  box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.33)
  font-weight: 300
  border-radius: 4px
  height: auto
  background: rgba(16, 87, 177, 0.7)
  position: relative
  top: 2px
  text-transform: uppercase
  font-weight: bold
  height: 63px
  &:hover
    background: rgba(16, 87, 177, 1)

.token-serial_number
  font-size: 18px
  font-weight: bold
  color: #fff

.safeguard-form form div
  position: relative
  float: left
  padding: 5px

.token-types
  width: 90%
  float: none !important
  overflow: hidden
  top: 5px
  margin: 0 auto
  input
    position: absolute
    margin-left: -19px
    margin-top: 6px

.safeguard-form form
  div
    &.token-types div
      width: 50%
      padding: 11px 10px !important
      margin: 0
      text-align: center
      background: rgba(0, 0, 0, 0.67)
      box-sizing: border-box
      color: #fff
      font-size: 13px
      cursor: pointer
      &.token-type
        &.normal
          float: left
          border-radius: 5px 0px 0px 5px
          border-right: 1px solid rgba(0, 0, 0, 0.44)
          &.checked
            background: rgba(0, 0, 0, 0.8)
            box-shadow: inset -4px 0px 4px rgba(0, 0, 0, 0.25)
        &.smartphone
          float: right
          border-radius: 0px 5px 5px 0px
          &.checked
            background: rgba(0, 0, 0, 0.8)
            box-shadow: inset 4px 0px 4px rgba(0, 0, 0, 0.25)
    &.token-code
      background: url("/assets/token.svg") no-repeat center
      width: 54%
      height: 97px
      background-size: 200px
      margin-top: -16px
      margin-bottom: 8px
    &.token-message:before
      content: ''
      position: absolute
      width: 450px
      height: 500px
      background: rgba(255, 255, 255, 1)
      left: -25px
      top: 40px
      /* border: 1px solid rgba(0, 0, 0, 0.38);
      border-left: none
      border-right: none
  .token-message
    position: relative
    float: left
    text-align: center
    position: absolute
    width: 98%
    background: rgba(52, 142, 218, 0.72)
    top: 10px
    font-size: 15px
    line-height: 11px
    padding: 10px 0 29px
    color: rgba(0, 0, 0, 0.8)

.safeguard-form-input
  width: 100px
  outline: none
  height: 35px
  text-align: center
  font-family: sans-serif
  padding: 2px 6px 2px 6px
  color: #555
  border-radius: 4px
  background: rgba(0, 0, 0, 0)
  font-size: 17px
  position: absolute
  top: 39px
  left: 103px
  border: none

.logo-safeguard
  background: url("#{APP_CONFIG[" server_url "]}/assets/blue-logo.svg") no-repeat 0px 0px
  position: relative
  float: left
  height: 75px
  width: 100%
  text-align: center
  background-size: 30px