/* Scss Document - variables */
body {
  background-color: #23A0CE;
  font-family: 'Open Sans', sans-serif;
}

.login {
  width: 500px;
  margin: 100px auto;
  padding: 40px;
}

.loginLogo {
  width: 355px;
  margin: 0 auto;
}

.loginForm {
  width: 300px;
  margin: 20px auto 0;
  padding: 25px;
  color: #4E4E4E;
  background-color: #FFFFFF;
  border-radius: 10px;
}

.loginFormField {
  margin-top: 5px;
  width: 100%;
  margin-bottom: 20px;
}

#username, #password, #tempPassword, #confirmPassword, #newPassword, #repeatNewPassword, #email, #newPassword, #newPassword2 {
  width: 100%;
  height: 35px;
  font-size: 19px;
  padding: 10px;
}

.loginFormButton {
  text-align: right;
}

#loginButton {
  padding: 10px 20px;
  font-size: 12px;
  border: none;
  border-radius: 10px;
  color: #FFFFFF;
  background: #327FC2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #327FC2 0%, #232258 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #327FC2), color-stop(100%, #232258));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #327FC2 0%, #232258 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #327FC2 0%, #232258 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #327FC2 0%, #232258 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #327FC2 0%, #232258 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$lightBlue', endColorstr='$darkBlue',GradientType=0 );
  /* IE6-9 */
}

.loginFormFooter {
  width: 270px;
  margin: 20px auto 0;
  color: #7B7B7B;
  text-decoration: none;
  font-size: 12px;
}
.loginFormFooter a {
  color: #262353;
  text-decoration: none;
}

.messageLogin {
  color: red;
  font-size: 12px;
  margin-bottom: 15px;
}

.passwordReset {
  width: 100%;
  margin: 20px auto 0;
  padding: 25px;
  color: #4E4E4E;
  background-color: #FFFFFF;
  text-align: center;
}

.FollowUpAlert {
  width: 355px;
  margin: 10px auto;
  padding: 30px auto;
  background-color: red;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 20px;
}

.passwordResetTitle {
  font-size: 28px;
}

@media (max-width: 768px) {
  .login {
    width: 100%;
    margin: 9vw 0 0;
    padding: 0 0 0 0;
  }

  .loginLogo {
    width: 100%;
  }

  .loginLogo img {
    width: 100%;
  }

  .loginForm {
    width: 90%;
    margin: 4vw auto 0;
    padding: 5vw;
    color: #4E4E4E;
    background-color: #FFFFFF;
    border-radius: 2vw;
  }

  .loginFormLabel {
    font-size: 5vw;
  }

  .loginFormField {
    margin-top: 2vw;
    width: 100%;
    margin-bottom: 4vw;
    font-size: 5vw;
  }

  #loginButton {
    padding: 2vw 4vw;
    font-size: 3vw;
    border: none;
    border-radius: 2vw;
    color: #FFFFFF;
    background: #327FC2;
    /* Old browsers */
    background: -moz-linear-gradient(top, #327FC2 0%, #232258 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #327FC2), color-stop(100%, #232258));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #327FC2 0%, #232258 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #327FC2 0%, #232258 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #327FC2 0%, #232258 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #327FC2 0%, #232258 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$lightBlue', endColorstr='$darkBlue',GradientType=0 );
    /* IE6-9 */
  }

  .loginFormFooter {
    width: 90%;
    margin: 4vw auto 0;
    color: #7B7B7B;
    text-decoration: none;
    font-size: 3vw;
  }

  .loginFormFooter a {
    text-decoration: none;
    color: #000;
  }

  #username, #password, #tempPassword, #confirmPassword, #newPassword, #repeatNewPassword, #email {
    width: 100%;
    height: 12vw;
    font-size: 6vw;
    padding: 2vw;
  }

  .messageLogin {
    color: red;
    font-size: 4vw;
    margin-bottom: 5vw;
  }

  .passwordReset {
    width: 90%;
    margin: 4vw auto 0;
    padding: 5vw;
    color: #4E4E4E;
    background-color: #FFFFFF;
    text-align: center;
  }

  .passwordResetTitle {
    font-size: 6vw;
  }
}