:root {
  --bg-login-cta: #087657;
  --dark-green: #087657;
  --bg-login-hover-cta: #076449;
  --default-border-color: #e7eeec;
  --hover-border-color: #087657;
  --focus-border-color: #087657;
  --input-placeholder: #939f9c;
  --auth-form-head: 23px;
  --auth-form-desc: 14px;
  --secondary-color: #121212;
  --text-color: #6a6a6a;
  --invalid-color: #e20707;
  --flag-bg: #f4f9f7;
  --success-text-color: #3aaf48;
  --success-bg: #edfae7;
  --error-text-color: #cf1322;
  --error-bg: #FFEDED;
}
.authForm {
  padding: 85px 0 140px;;
  background: linear-gradient(90deg, #063e41 2.34%, #018751 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.formWrap {
  max-width: 465px;
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 15px;
  padding: 24px 27px;
  box-shadow: 0px 4px 60px 0px #58585826;
  height: 672.73px;
}
input::placeholder {
  font-size: 13px;
  color: var(--input-placeholder);
}
.formWrap.h-auto {
  height: auto;
  overflow-x: hidden;
}
.formWrap .formHead {
  font-size: var(--auth-form-head);
  font-weight: 700;
  line-height: 26px;
  color: var(--secondary-color);
  padding-bottom: 8px;
  text-align: center;
}

.formWrap .formDesc {
  font-size: var(--auth-form-desc);
  font-weight: 400;
  line-height: 16px;
  padding-bottom: 30px;
  color: var(--text-color);
  text-align: center;
}
.formWrap .inputGroup {
  position: relative;
}
.formWrap .passwordsFlex,
.formWrap .inputGroup + .inputGroup {
  margin-top: 10px;
}
.formWrap .passwordsFlex .inputGroup {
  margin-top: 0;
}
.formWrap .inputGroup input {
  font-size: 13px;
  font-weight: 400;
  line-height: 15.73px;
  height: 45px;
  width: 100%;
  background-color: #fdfefd;
  outline: none;
  border: 1px solid var(--default-border-color);
  border-radius: 4px;
  padding: 14px;
}
#r_phone {
  padding-left: 78px;
}
.formWrap .inputGroup input:hover {
  border-color: var(--hover-border-color);
}




.formWrap .inputGroup input:focus {
  border-color: var(--focus-border-color);
}
.formWrap .inputGroup input.invalid {
  border-color: var(--invalid-color);
}

.formWrap .inputGroup input.invalid:hover {
  border-color: var(--hover-border-color);
}
.formWrap .inputGroup .errorMsg {
  color: var(--invalid-color);
  font-size: 13px;
  font-weight: 400;
  line-height: 16.44px;
  position: relative;
  padding: 5px 0 2px;
  display: none;
}
.formWrap .inputGroup .errorMsg::before {
  content: "";
  background: url("../images/authImg/error-icon.svg");
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 7px;
  position: relative;
  top: 2px;
}
.formWrap .errorMsg.invalidPhone,
.formWrap input.invalid ~ .errorMsg,
.formWrap select.invalid ~ .errorMsg {
  display: block;
}
.formWrap .inputGroup label {
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  color: var(--secondary-color);
  margin-bottom: 6px;
  display: inline-block;
}

.flexInput {
  display: flex;
  justify-content: end;
  margin-top: 16px;
  column-gap: 15px;
}
.loginForm .flexInput div {
  max-width: 200px;
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--secondary-color);
  border-radius: 2px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}
input[type="checkbox"].invalid {
  border-color: var(--invalid-color);
}
input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.showPassCheck:hover input,
input[type="checkbox"]:hover {
  border-color: var(--hover-border-color);
}
input[type="checkbox"]:checked {
  background-color: var(--dark-green);
  border-color: var(--hover-border-color);
}
.showPassCheck {
  display: flex;
  align-items: center;
}
.formWrap p.showPassTxt {
  margin-left: 7px;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.73px;
  text-align: center;
  color: var(--secondary-color);
  display: inline-block;
}
.forgotPass {
  font-size: 13px;
  font-weight: 500;
  line-height: 15.73px;
  text-align: center;
  color: var(--dark-green);
  cursor: pointer;
  display: inline-block;
}
.forgotPass:hover {
  text-decoration: underline;
}
.authBtn {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 18.97px;
  text-align: center;
  background: var(--bg-login-cta);
  outline: none;
  border-radius: 5px;
  color: #fff;
  border: 1px solid transparent;
  margin-top: 42px;
}
.authBtn:hover {
  background: var(--bg-login-hover-cta);
}
.loginRedirect {
  font-size: 13px;
  font-weight: 500;
  line-height: 15.73px;
  text-align: center;
  margin-top: 12px;
  color: var(--secondary-color);
}
.loginRedirect a {
  color: var(--dark-green);
  font-weight: 500;
}
.loginRedirect a:hover {
  text-decoration: underline;
}
.active {
  display: block;
}
.formWrap .forgetPass,
.formWrap .loginForm {
  display: none;
}
.formWrap .active {
  display: block;
}
.formWrap .termSec {
  margin-top: 16px;
}
.formWrap .termSec .termsHead {
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #727272;
}
.formWrap .termBody {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
}
.formWrap .termText {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-color);
}
.formWrap .termText a {
  color: var(--dark-green);
}
.formWrap .termText a:hover {
  text-decoration: underline;
}
/* Phone intlTel */
.formWrap .iti--allow-dropdown {
  display: block;
}
.formWrap .iti__selected-flag {
  width: 64px;
  background-color: var(--flag-bg);
  border-radius: 4px 0px 0px 4px;
  justify-content: center;
}

.custom-alert {
  position: relative;
  padding: 10px 15px;
  margin-bottom: 1rem;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  text-align: center;
  font-weight: 500;
  margin-bottom: 25px;
  display: none;
}
.custom-alert-success {
  color: var(--success-text-color);
  background-color: var(--success-bg);
  border-color: var(--success-bg);
  display: block;
}
.custom-alert-error {
  color: var(--error-text-color);
  background-color: var(--error-bg);

  border-color: var(--error-bg);
  display: block;
}
/* Modal */
.forgotModal {
  display: none;
}
.forgotModal.show {
  display: block;
}
.forgotModalbody {
  box-shadow: 0px 4px 34.5px 0px #73737326;
  background-color: #fff;
  border-radius: 8px;
  padding: 32px 49px 42px;
  text-align: center;
  max-width: 443px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 111;
}
.forgotModalbody p {
  font-size: 15px;
  font-weight: 400;
  line-height: 18.15px;
  text-align: center;
  color: var(--text-color);
  padding-bottom: 28px;
}
.forgotModalbody p span {
  color: var(--secondary-color);
}
.modalBtn {
  background: var(--bg-login-cta);
  max-width: 158px;
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 17.71px;
  outline: none;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
}
.modalBtn:hover {
  background: var(--bg-login-hover-cta);
}
/* .iti__country-list {
  max-width: 411px;
} */
.showHidePassword {
  position: absolute;
  top: 40px;
  right: 10px;
  cursor: pointer;
}
.showHidePassword:hover {
  transform: scale(1.1);
}
@media (max-width: 575px) {
  .authForm {
    padding: 120px 0 90px;

  }
  .formWrap .formHead {
    font-size: 23px;
    line-height: 21px;
    padding-bottom: 7px;
  }
  .formWrap .formDesc {
    font-size: 14px;
    line-height: 16px;
    padding-bottom: 35px;
  }
  .formWrap .inputGroup input {
    height: 45px;
  }
  .formWrap {
    padding: 40px 15px 35px;
    height: 584.57px;
  }
  .forgotModalbody {
    width: calc(100% - 30px);
  }
}