// wraps whole screen content
.login-wrapper {
  width:100%;
  height:100%;
  position:relative;
  min-height:588px;
}

// wraps the background image and login box
#login {
  position:absolute;
  left:50%;
  top:50%;
  font-family: @fontFamily !important;
  width:824px;
  height:534px;
  background-image:url('@{imagePath}/backgroundMan.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:left center;
  margin:-223px 0 0 -405px; 
}

#login .login-box {
  float:right;
  width:495px;
  min-height:325px;
  padding:30px;
  margin: 70px 0;
  border-radius: 5px;
  background:@contentBackground;
  box-shadow: 1px 5px 10px 0px rgba(11, 19, 42, 0.10);;

  // custom form measurements and styles
  form .control-group label {
    font-size:16px;
    padding-top:12px;
  }

  .control-label {
    width:125px;
  }
  .controls {
    margin-left:145px;
    margin-right:53px;
  }

  input[type="text"],
  input[type="password"] {
      height:32px;
      width:260px;
      padding:4px 16px;
      font-size:18px;
      -webkit-box-shadow: none;
      -moz-box-shadow:   none;
      box-shadow:       none;
  }
  
  .two-fa  {
    .control-label {
      width: 150px;
      display: inline-flex;
    }
    input {
      width: 257px;
    }
  }

  form {
    margin: 4px 0;
  }
  &.reset-password {
    .control-label {
      width: 105px;
    }
   .controls {
      margin-left: 139px;
      margin-right: 61px;
    }
  }
}

#login .login-box .checkbox,
#login .login-box .forgot {
  font-size:14px;
  padding-left:0;
  input[type=checkbox] {
    margin:3px 10px 0 0;
  }
}