/* wp-login.php */

html {
  height: auto;
}

body.login .ml-form-container {
  flex-flow: column;

  position: relative;

  justify-content: flex-start;
}

@media (max-width: 767px) {
  .login .ml-container .ml-extra-div {
    background-image: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.login.ml-half-screen .ml-container {
    flex-wrap: nowrap;
  }

  body.login.ml-half-screen.ml-login-align-1 .ml-container .ml-extra-div {
    width: 100%;
  }

  body.login.ml-half-screen.ml-login-align-1 .ml-container .ml-form-container {
    width: 354px;

    min-width: 354px;

    max-width: 354px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (aspect-ratio: 4/3) {
  body.login.ml-half-screen.ml-login-align-1 .ml-container .ml-form-container {
    width: 414px;

    min-width: 414px;

    max-width: 414px;
  }
}

@media (min-width: 1200px) {
  body.login .ml-form-container {
    justify-content: center;
  }

  /*body.login.ml-half-screen .ml-container {

        flex-wrap: nowrap;

    }



    body.login.ml-half-screen.ml-login-align-1 .ml-container .ml-extra-div {

        width: 100%;

    }



    body.login.ml-half-screen.ml-login-align-1 .ml-container .ml-form-container {

        width: 667px;

        min-width: 667px;

        max-width: 667px;

    }*/
}

.login .ml-container .ml-extra-div {
  background-position: bottom;

  background-attachment: fixed;
}

.login .ml-container #login {
  max-width: 305px;

  padding-top: 112px;

  background: rgba(65, 83, 100, 1);
}

@media (min-width: 768px) and (max-width: 1199px) and (aspect-ratio: 3/4) {
  .login .ml-container #login {
    padding-top: 256px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (aspect-ratio: 4/3) {
  .login .ml-container #login {
    padding-top: 129px;
  }
}

@media (min-width: 1200px) {
  .login .ml-container #login {
    /*max-width: 466px;*/

    padding-top: 0;
  }
}

.ml-container #login > *,
.ml-container #login_footer > * {
  padding: 0 20px;
}

.login #login h1 a {
  height: 140px;

  width: auto;

  margin-bottom: 44px;
}

@media (min-width: 1200px) {
  /*.login #login h1 a {

        height: 180px;

        margin-bottom: 40px;

    }





    .login .ml-container #login {

        padding-top: 60px;

    }



    .login #login h1 a {

        margin-bottom: 80px;

    }*/
}

.login #loginform {
  margin: 0;

  height: auto;

  padding: 0 20px 0;
}

@media (min-width: 1200px) {
  /* .login #loginform {

         padding: 0 20px;

     }*/
}

.login label {
  font-size: 12px;
}

body.login form .input,
.login input[type="text"] {
  margin: 2px 0 8px 0;
}

#loginform #user_login,
#loginform #user_pass {
  height: 40px;
}

@media (min-width: 1200px) {
  /*.login label {

        font-size: 20px;

    }



    #loginform #user_login,

    #loginform #user_pass {

        height: 64px;

    }*/
}

#loginform #user_pass {
  margin-bottom: 21px;
}

@media (min-width: 1200px) {
  /*#loginform #user_login {

        margin-bottom: 12px;

    }



    #loginform #user_pass {

        margin-bottom: 33px;

    }*/
}

.forgetmenot {
  display: none;
}

.submit #wp-submit {
  display: block;

  float: none;

  background: #91b6bb 0% 0% no-repeat padding-box;

  border-radius: 37px;

  width: 100%;

  height: 45px;

  border: 0;

  letter-spacing: 0;

  color: #253847;

  font-size: 12px;

  margin-bottom: 12px;
}

@media (min-width: 1200px) {
  /*.submit #wp-submit {

        height: 74px;

        font-size: 20px;

        margin-bottom: 18px;

    }*/
}

.login .ml-container #login_error {
  margin: 0 20px 0;
}

@media (min-width: 1200px) {
  /*.login .ml-container #login_error {

        margin: 0 20px 20px;

    }*/
}

#login_footer {
  max-width: 305px;

  width: 100%;

  background: rgba(65, 83, 100, 1);

  z-index: 99;

  display: flex;

  flex-flow: column;
}

@media (min-width: 1200px) {
  /*#login_footer {

        max-width: 466px;

    }*/
}

#signup_link {
  display: flex;

  justify-content: center;

  align-items: center;

  text-decoration: none;

  background: #9e703c 0% 0% no-repeat padding-box;

  border-radius: 37px;

  width: 100%;

  height: 45px;

  letter-spacing: 0;

  color: #243746;

  font-size: 12px;

  margin-bottom: 54px;
}

@media (min-width: 1200px) {
  /*#signup_link {

        height: 74px;

        font-size: 20px;

        margin-bottom: 40px;

    }*/
}

#form-links {
  flex: 1 0;
}

#forgot_links a {
  display: block;

  color: #91b6bb;

  letter-spacing: 0;

  font-size: 12px;

  text-decoration: none;
}

#forgot_links a:first-child {
  margin-bottom: 3px;
}

@media (min-width: 1200px) {
  /*#forgot_links a {

        font-size: 20px;

    }



    #forgot_links a:first-child {

        margin-bottom: 4px;

    }*/
}

#forgot_links {
  margin-bottom: 1rem;
}

#back_to_hq {
  text-align: center;

  margin-bottom: 30px;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: flex-end;
}

@media (min-width: 768px) {
  #back_to_hq {
    margin-bottom: 75px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (aspect-ratio: 4/3) {
  #back_to_hq {
    margin-bottom: 21px;
  }
}

#back_to_hq a {
  color: #adb7c0;

  text-decoration: none;

  letter-spacing: 0;

  font-size: 12px;
}

@media (min-width: 1200px) {
  /*#back_to_hq a {

        font-size: 20px;

    }*/

  #forgot_links {
    margin-bottom: 0;
  }

  #back_to_hq {
    display: block;

    height: auto;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;
  }
}

/* CUSTOM REGISTER BUTTON 2/14/24 */
#customModal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
  display: flex; /* Use flexbox to center */
  align-items: center; /* Align vertical */
  justify-content: center; /* Align horizontal */
  animation: fadeIn 0.5s; /* Fading effect */
}

.modal-content {
  z-index: 101;
  background-color: #243746;
  width: 334px !important;
  height: 360px !important;
  border-radius: 12px;
  margin-right: 5px;
  margin-left: 5px;

  /* Remove margin:auto if it was previously set */
  animation: slideIn 0.5s; /* Slide in effect */
}

/* The Close Button */

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#registerHeader {
  color: #fff !important;

  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 200 !important;
  line-height: normal !important;
  padding-top: 17px;
  padding-bottom: 17px;
}

#registerContent {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
}

#registerButtonLayout {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 32px;

  margin-top: 180px;
}
#registerButton {
  border-radius: 5px;
  background: var(--Inspiration---91B6BB, #91b6bb);

  color: var(--White, #fff);
  text-align: center;

  font-size: 13px;
  font-style: normal;
  font-weight: 400;

  width: 41px;
  height: 19px;

  padding: 6px 12px 7px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Add Animation */
@keyframes slideIn {
  from {
    transform: translateY(-300px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}