#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

  &: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
  webkit-box-shadow:  0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
  -moz-box-shadow:  0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
  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
          box-shadow: none
          color: #565656
          height: 38px
          width: 100%
          padding: 7px 12px
          transition: all 300ms linear 0s
          display: block
          font-size: 14px
          line-height: 1.42857143
          -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s
          -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
          transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
          input
            width: 100%
            height: 100%

        .link-to-recover
          float: right
          padding-right: 10px
          a
            -webkit-transition: color ease-in-out .15s
            -o-transition: color ease-in-out .15s
            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
            -webkit-transition: color ease-in-out .15s
            -o-transition: color ease-in-out .15s
            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
          -webkit-transition: all ease-in-out .15s
          -o-transition: all ease-in-out .15s
          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