﻿div.mobile-center {
  text-align: center;
}

div.login {
  /*margin: 40px 0px 200px 0px;*/
  font-size: 18px;
  display: inline-block;
  text-align: center;
  width: 100%;
  background-color: #FFFFFF;
}

label.switch {
  margin-left: 0px;
}

span.chksml label {
  font-size: 12px;
}

div.error, span.error {
  font-weight: bold;
  color: #CC0000;
  text-align: center;
  padding: 4px;
}

div.resetpwd {
  margin-top: 18px;
  font-size: 12px;
  margin-left: 15px;
  text-align: left;
}

div.login-box {
  /* Size & position */
  margin: 60px auto 30px auto;
  width: 300px;
  padding: 10px;
  position: relative; /* For the submit button positioning */
  /* Styles */
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255,255,255,1), inset 0 -3px 2px rgba(0,0,0,0.25);
  border-radius: 5px;
  background: linear-gradient(#eeefef, #ffffff 10%);
}

  div.login-box .field {
    position: relative; /* For the icon positioning */
  }

    div.login-box .field i {
      /* Size and position */
      left: 0px;
      top: 0px;
      position: absolute;
      height: 36px;
      width: 36px;
      /* Line */
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
      /* Styles */
      color: #777777;
      text-align: center;
      line-height: 42px;
      transition: all 0.3s ease-out;
      pointer-events: none;
    }

  div.login-box input[type=text],
  div.login-box input[type=password] {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    /* Size and position */
    width: 220px;
    padding: 10px 18px 10px 45px;
    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    transition: color 0.3s ease-out;
  }

  div.login-box input[type=text] {
    margin-bottom: 0px;
  }

    div.login-box input[type=text]:hover ~ i,
    div.login-box input[type=password]:hover ~ i {
      color: #52cfeb;
    }

    div.login-box input[type=text]:focus ~ i,
    div.login-box input[type=password]:focus ~ i {
      color: #42A2BC;
    }

    div.login-box input[type=text]:focus,
    div.login-box input[type=password]:focus,
    div.login-box .submit-button:focus {
      outline: none;
    }

div.login-box div.submit {
  float: right;
  margin-right: 5px;
  z-index: 2;
  /* Styles */
  background: #FFFFFF;
}

div.login-box div.submit input {
  padding: 5px 20px 5px 20px;
  height: 30px;
  background-color: #e8f0fe;
  background: #E8F0FE;
  color: #333333;
  border: 1px solid #777777;
  border-radius: 5px;
}

div.login-box div.submit input:hover {
  background-color: #DDDDDD;
}

div.remember {
  text-align: left;
  margin-left: 15px;
}
