@import url(https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap);

#loginform, #verifyform, #password-recovery-form, #otp-verification-form, #change-password-form {
  margin: 1.25rem !important;
}

.login-box {
  width: 400px;
  margin: 0 auto;
}

.login-box .footer {
  width: 100%;
  left: 0px;
  right: 0px;
}

.register-box {
  width: 500px;
  margin: 0 auto;
}

.register-box .footer {
  width: 100%;
  left: 0px;
  right: 0px;
}

#change-password-form, #otp-verification-form {
  display: none; 
}

#loginform figure,  #password-recovery-form figure, #otp-verification-form figure, #change-password-form figure {
  text-align: center;
}

#loginform button, #verifyform button, #password-recovery-form button, #otp-verification-form button, #change-password-form button{
  background-color: var(--primaryColor) !important;
  border: none;
  border-radius: 6px;
}

#loginform button:hover:enabled, #verifyform button:hover:enabled,  #password-recovery-form button:hover:enabled, #otp-verification-form button:hover:enabled, #change-password-form button:hover:enabled {
  background-color: var(--secondaryColor) !important;
  opacity: 1 !important;
}

.company_logo {
  width: 200px;
  margin: 10px 0;
}

#loginform p.alert {
  border-radius: 0px;
}

#loginform i {
  margin-left: -15px;
  margin-top: 3px;
  position: absolute;
  color: #67757c;
}

#verify-email-form .form-control, #otp-verification-form .form-control {
  display: block;
  height: 50px;
  margin-right: 0.5rem;
  text-align: center;
  font-size: 1.25rem;
  min-width: 0;
  border-radius: 0.5rem !important;
  border: 1px solid #c1c1c1 !important;
}

@media only screen and (max-width: 399px) {
  .checkbox {
    width: 100%;
    margin-bottom: 16px;
    text-align: center;
  }

  #to-recover {
    display: block;
    text-align: center;
    float: unset;
    margin-left: 12px;
  }
}