#content.devise
  background: #333C44 image-url("devices/login-bg.jpg") no-repeat center center / cover !important
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  overflow: auto
  white-space: nowrap
  text-align: center
  font-family: "Verdana", SansSerif
  font-weight: normal
  &:before
    height: 100%
    display: inline-block
    vertical-align: middle
    content: ''

.devise-box
  display: inline-block
  white-space: normal
  vertical-align: middle
  text-align: left
  background: #fff
  +box-shadow(0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19))
  min-width: 400px

  .white-box
    background: #ffffff
    padding: 25px
    margin-bottom: 15px

    form
      #error_explanation
        margin-bottom: 25px
        h2
          font-size: 16px
          color: #EF5350
        ul
          font-size: 14px
          padding-left: 25px
          color: #EF5350

      h2.title
        height: 40px
        color: #333C44
        width: 100%
        font-size: 18px

      .form-group
        display: block
        margin: 10px 0px
        &::before
          display: table
          content: " "
        &::after
          clear: both
          display: table
          content: " "

        .form-control
          background-image: linear-gradient(#9675ce, #9675ce), linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13))
          border: 0 none
          +border-radius(0)
          +box-shadow(none)
          background-color: rgba(0, 0, 0, 0)
          background-position: center bottom, center calc(99%)
          background-repeat: no-repeat
          background-size: 0 2px, 100% 1px
          background-color: #ffffff
          color: #565656
          height: 38px
          width: 100%
          padding: 7px 12px
          +transition(all 300ms linear 0s)
          display: block
          font-size: 14px
          line-height: 1.42857143
          +transition(border-color ease-in-out .15s,box-shadow ease-in-out .15s)
          input
            width: 100%

        .link-to-recover
          float: right
          padding-right: 10px
          a
            +transition(color ease-in-out .15s)
            color: #333C44
            &:hover
              color: #EF5350

        .link-to-recover.center
          float: none
          margin: 0 auto
          text-align: center

        .checkbox-primary
          min-height: 27px
          padding-left: 10px
          float: left
          position: relative
          display: block
          input
            cursor: pointer
            opacity: 1
            z-index: 1
            outline: none !important
            line-height: normal
          label
            display: inline-block
            padding-left: 5px
            position: relative
            min-height: 20px
            margin-bottom: 0
            font-weight: 400
            cursor: pointer
            max-width: 100%
            color: #333C44
            +transition(color ease-in-out .15s)
          &:hover
            label
              color: #EF5350

      .actions
        input
          position: relative
          cursor: pointer
          display: inline-block
          overflow: hidden
          background: #EF5350
          border: 1px solid #EF5350
          color: #fff
          text-transform: uppercase
          text-align: center
          width: 100%
          padding: 10px 16px
          font-size: 18px
          line-height: 1.3333333
          +transition(all ease-in-out .15s)
          &:hover
            background: rgba(#ee5350, 0.8)
            border: 1px solid rgba(#ee5350, 0.8)


      .form-group.links
        margin-top: 25px

.devise-box .white-box form .form-group .form-control
  padding: 0
  input
    position: relative
    margin: 0
    border: 0px
    border-bottom: 1px solid #ccc
    +transition(all 0.3s)
    &:focus
      border-bottom: 1px solid #3c6085

.devise-box .white-box form .form-group .checkbox-primary
  min-height: auto

.devise-box .white-box form .form-group .checkbox-primary label
  padding-left: 0px
  input
    margin: 0px
    margin-right: 5px
    display: inline-block
    vertical-align: middle