.custom-login {
  width: 100%;
  height: 100%;
  display: none;
  /* display: flex; */
  position: fixed;
  z-index: 999999999;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.70);
}

.login-card,
.signUp-card,
.verify-card,
.loading-card,
.reset-email-card {
  width: 51.46vw;
  height: 33.65vw;
  display: flex;
  position: relative;
  border-radius: 1.72vw;
  background: #FFFFFF;
  /* border: 1px solid #C4C4C4; */
}

.signUp-card {
  display: flex;
  padding-top: 3.28vw;
  align-items: center;
  flex-direction: column;
  /* justify-content: center; */
}



.login-card-left {
  width: 25.89vw;
  height: 33.65vw;
}

.login-img {
  width: 100%;
  display: block;
}

.login-card-right {
  /* display: flex; */
  /* align-items: center; */
  /* flex-direction: column; */
  padding-top: 3.28vw;
}

.login-title {
  padding-left: 4.43vw;
  padding-bottom: 1.82vw;
}


.login-title p {
  color: #000;
  font-size: 2.08vw;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  padding-bottom: 0.26vw;
  font-family: "Montserrat";
  /* text-transform: capitalize; */
}

.login-title span {
  font-size: 0.73vw;
  font-weight: 400;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
}

.login-title span:first-of-type {
  color: #BDBDBD;
}

.login-title span:nth-of-type(2) {
  cursor: pointer;
  color: #8CD7D0;
  /* text-transform: capitalize; */
  text-decoration-line: underline;
}

.eMail-input {

  padding-bottom: 0.86vw;

}

.eMail-input .eMail-input-box {
  width: 18.75vw;
  height: 2.71vw;
  position: relative;
}

.eMail-input .eMail-input-box img {
  width: 0.68vw;
  height: 0.68vw;
  position: absolute;
  top: 0;
  right: 0.99vw;
  bottom: 0;
  margin: auto 0;
}

.reset-eMail-input-box {
  width: 18.75vw;
  height: 2.71vw;
  position: relative;
}

.reset-eMail-input-box img {
  width: 0.68vw;
  height: 0.68vw;
  position: absolute;
  top: 0;
  right: 0.99vw;
  bottom: 0;
  margin: auto 0;
}

.reset-eMail-input-box .reset-eMail-errText {
  display: none;
}

.reset-password-code {
  padding-top: 2.60vw;
  padding-left: 3.44vw;
}

.reset-password-code .reset-password-code-title,
.reset-password-code .reset-password-code-enter-code,
.reset-password-code .reset-password-code-input {
  padding-left: 1.20vw;
}

.reset-password-code .reset-password-code-title p {

  color: #000;
  font-size: 2.08vw;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  font-family: Montserrat;
  /* text-transform: capitalize; */

}

.reset-password-code .reset-password-code-enter-code {
  color: #000;
  font-size: 0.78vw;
  font-weight: 600;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  text-transform: lowercase;

  margin: 1.72vw 0 1.72vw 0;
}

.reset-password-code .reset-password-code-inputs .reset-password-code-errText {
  display: none;

  color: #F00;
  font-size: 0.57vw;
  font-weight: 400;
  font-family: Inter;
  font-style: normal;
  line-height: normal;

  padding-top: 0.78vw;
  padding-left: 1.82vw;

}

.reset-password-code .reset-password-code-input {
  gap: 0.68vw;
  display: flex;
}


.reset-password-code .reset-password-code-input input {
  width: 2.19vw;
  height: 2.19vw;
  display: flex;
  border-radius: 0.47vw;
  background: #FFF;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: 1px solid #E4E4E4;
  color: #000;
  font-size: 0.94vw;
  font-weight: 600;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
}

.reset-password-code .reset-password-code-input input::-webkit-outer-spin-button,
.reset-password-code .reset-password-code-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.reset-password-code .reset-password-code-input input {
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
}

.reset-password-code .reset-password-code-btn {
  margin: 2.76vw 0 0.52vw 0;
}

.reset-password-code .reset-password-code-btn .reset-password-code-verify {
  width: 18.75vw;
  height: 2.76vw;
  background: #000;
  border-radius: 3.80vw;

  color: #FFF;

  display: flex;
  flex-direction: column;
  justify-content: center;

  cursor: pointer;
  font-size: 0.94vw;
  font-weight: 700;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  user-select: none;
  /* text-transform: capitalize; */
}

.reset-password-code .back-signIn {
  color: #8CD7D0;
  font-size: 0.73vw;
  cursor: pointer;
  font-weight: 400;
  padding-top: 0.52vw;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  text-decoration-line: underline;
  /* text-transform: capitalize; */
}

.create-new-password-content {
  /* padding-top: 21px; */
  padding-left: 3.49vw;
}

.create-new-password-content .create-new-password-title,
.create-new-password-content .create-new-password-text {
  padding-left: 0.94vw;
}

.create-new-password-content .create-new-password-title p {
  color: #000;
  font-size: 2.08vw;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  font-family: Montserrat;
  /* text-transform: capitalize; */
}

.create-new-password-content .create-new-password-text {
  padding-top: 1.2vw;
  
}

.create-new-password-content .create-new-password-text p {
  color: #CECECE;
  font-size: 0.73vw;
  font-weight: 400;
  font-family: Inter;
  font-style: normal;
  text-align: justify;
  line-height: normal;
  text-transform: lowercase;
}

.create-new-password-inputs .create-new-password-label {
  padding-top: 1.41vw;
  padding-bottom: 0.78vw;
  font-size: 0.73vw;
  font-weight: 400;
  color: #CECECE;
  padding-left: 1.2vw;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /* text-transform: capitalize; */
}

.create-new-password-inputs .create-new-password-input {
  width: 18.75vw;
  height: 2.71vw;
  position: relative;
  /* border-radius: 8px; */
  /* border: 1px #E4E4E4; */
}

.create-new-password-inputs .create-new-password-input input {
  width: 18.75vw;
  height: 2.71vw;

  color: #000;
  font-size: 0.73vw;
  font-weight: 400;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  text-transform: lowercase;
  padding-left: 2.08vw;
  border-radius: 0.42vw;
  border: 1px solid #C4C4C4;
}

.create-new-password-inputs .create-new-password-input img {
  position: absolute;
  
}

.create-new-password-inputs .create-new-password-input .close-eyes {
  width: 1.04vw;
  height: 0.52vw;
  cursor: pointer;
  top: 1.25vw;
  right: 1.04vw;
}

.create-new-password-inputs .create-new-password-input .open-eyes {
  width: 1.04vw;
  height: 0.72vw;
  cursor: pointer;
  top: 1.04vw;
  right: 1.04vw;
}

.create-new-password-inputs .create-new-password-errText {
  color: #F00;
  font-size: 0.57vw;
  font-weight: 400;
  font-family: Inter;
  font-style: normal;
  padding-top: 0.26vw;
  padding-left: 1.2vw;
  line-height: normal;
  display: none;
  /* text-transform: lowercase; */
}


.create-new-password-content .create-new-password-ok {

  width: 18.75vw;
  height: 2.76vw;
  display: flex;
  margin-top: 1.72vw;
  border-radius: 3.8vw;
  background: #8CD7D0;
  flex-direction: column;
  justify-content: center;

  color: #FFF;

  cursor: pointer;
  font-size: 0.94vw;
  font-weight: 700;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
}

.create-new-password-content .back-signIn {
  font-size: 0.73vw;
  cursor: pointer;
  color: #8CD7D0;
  font-weight: 400;
  padding-top: 0.78vw;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /* text-transform: capitalize; */
  text-decoration-line: underline;
}


.password-input .password-input-box {
  width: 18.75vw;
  height: 2.71vw;
  position: relative;
}

.password-input .password-input-box img {

  position: absolute;
  top: 0;
  right: 1.04vw;
  bottom: 0;
  margin: auto 0;
  cursor: pointer;
}

.password-input .password-input-box .close-eyes {
  width: 1.04vw;
  height: 0.52vw;
}

.password-input .password-input-box .open-eyes {
  width: 1.04vw;
  height: 0.72vw;
}

.eMail-input input,
.password-input input {
  width: 18.75vw;
  height: 2.71vw;
  padding-left: 2.14vw;
  border-radius: 0.42vw;
  border: 1px solid #E4E4E4;

  /* background: rgba(255, 0, 0, 0.12); */

}

.eMail-input p {

  color: #F00;
  font-size: 0.57vw;
  font-weight: 400;
  padding-top: 0.26vw;
  padding-left: 2.14vw;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /* text-transform: lowercase; */

}

.login-inputs {
  padding-left: 3.44vw;
}

.login-inputs .login-message {
  color: #F00;
  font-size: 0.57vw;
  font-weight: 400;
  padding-top: 0.26vw;
  padding-left: 2.14vw;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /*text-transform: lowercase;*/
}

.login-inputs .label {

  font-size: 0.73vw;
  color: #CECECE;
  font-weight: 400;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  padding-left: 1.02vw;
  /* text-transform: capitalize; */

}

.login-inputs .label span {
  color: #F00;
  font-weight: 400;
}

.sign-button {
  width: 18.75vw;
  height: 2.76vw;
  display: flex;
  color: #FFF;
  cursor: pointer;
  font-size: 0.94vw;
  font-weight: 700;
  margin-top: 2.14vw;
  margin-left: 3.44vw;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  border-radius: 0.57vw;
  line-height: normal;
  background: #8CD7D0;
  flex-direction: column;
  justify-content: center;
  /* text-transform: capitalize; */
}


.reset-passwords {
  font-size: 0.73vw;
  cursor: pointer;
  color: #8CD7D0;
  font-weight: 400;
  padding-top: 0.52vw;
  /* text-align: center; */
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  padding-left: 8.70vw;
  text-decoration-line: underline;
}

.sign-up.third-party {
  width: 18.75vw;
  gap: 0.52vw;
  display: flex;
  margin-top: 1.35vw;
  margin-left: 3.44vw;
  justify-content: center;
}

.reset-email-box {
  padding-top: 2.60vw;
}

.reset-email-box .reset-email-title p {
  color: #000;
  font-size: 2.08vw;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  font-family: Montserrat;
  /* text-transform: capitalize; */
}

.reset-email-box .reset-email-title {

  padding-left: 4.43vw;
  padding-bottom: 2.34vw;

}

.reset-email-input {
  padding-left: 3.44vw;
}

.reset-email-input .label {

  color: #CECECE;
  font-size: 0.73vw;
  font-weight: 400;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /* text-transform: capitalize; */

}

.reset-email-input .reset-next-btn {
  width: 18.75vw;
  height: 2.76vw;
  display: flex;
  margin-top: 2.14vw;
  border-radius: 0.57vw;
  align-items: center;
  background: #8CD7D0;
  justify-content: center;

  color: #FFF;
  cursor: pointer;
  font-size: 0.94vw;
  font-weight: 700;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /* text-transform: capitalize; */
}

.reset-email-input .back-login {
  
  font-size: 0.73vw;
  cursor: pointer;
  color: #8CD7D0;
  font-weight: 400;
  padding-top: 0.52vw;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /* text-transform: capitalize; */
  text-decoration-line: underline;
}

.reset-email-input .label span {
  color: #F00;
}


.signUp-card .signUp-row {

  width: 40.63vw;

}

.signUp-card .signUp-row.title p:first-of-type {

  color: #000;
  font-size: 2.08vw;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  font-family: Montserrat;
  /* text-transform: capitalize; */

}

.signUp-card .signUp-row.title p:nth-of-type(2) {

  font-size: 0.73vw;
  font-weight: 400;
  color: #BDBDBD;
  font-family: Inter;
  font-style: normal;
  line-height: normal;

}

.signUp-row.third-party {
  gap: 0.52vw;
  display: flex;
  padding-top: 1.41vw;

}

.signUp-row.third-party img {
  width: 3.28vw;
  height: 3.33vw;
}

.signUp-row.user-info {
  display: flex;
  padding-top: 1.56vw;
  justify-content: space-between;
}

.signUp-row.user-info input {
  width: 18.75vw;
  height: 2.71vw;
  padding-left: 2.14vw;
  border-radius: 0.42vw;
  border: 1px solid #E4E4E4;
}

.signUp-row.user-info .label {

  font-size: 0.73vw;
  color: #CECECE;
  font-weight: 400;
  font-style: normal;
  font-family: Inter;
  line-height: normal;
  padding-left: 2.11vw;
  /* text-transform: capitalize; */
}

.signUp-row.user-info .label span {
  color: #F00;
  font-size: 0.63vw;
  font-weight: 400;
  text-align: center;
  font-style: normal;
  line-height: normal;
  font-family: "Abril Fatface";
}

.signUp-row.signUp-but {
  height: 2.76vw;
  color: #FFF;
  display: flex;
  cursor: pointer;
  font-size: 0.94vw;
  font-weight: 700;
  margin-top: 2.66vw;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  border-radius: 0.57vw;
  line-height: normal;
  background: #C5C5C5;
  flex-direction: column;
  justify-content: center;
  /* text-transform: capitalize; */
}

.send-err {
  display: none;
  color: #F00;
}

.signUp-row.back-text {
  display: flex;
  font-size: 0.63vw;
  color: #CECECE;
  font-weight: 400;
  padding-top: 1.04vw;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  justify-content: center;
  /* text-transform: capitalize; */
}

.signUp-row.back-text span {
  font-size: 0.63vw;
  cursor: pointer;
  color: #8CD7D0;
  font-weight: 400;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /* text-transform: capitalize; */
}

.user-input .user-password {
  position: relative;
}

.user-input .user-Email {
  position: relative;
}

.user-input .user-password img {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 1.04vw;
  bottom: 0;
  margin: auto 0;
}

.user-input .user-Email img {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 1.04vw;
  bottom: 0;
  margin: auto 0;
}

.user-input p {
  color: #F00;
  font-size: 0.57vw;
  font-weight: 400;
  padding-top: 0.26vw;
  padding-left: 2.14vw;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /*text-transform: lowercase;*/
}

.user-input .user-password .close-eyes {
  width: 1.04vw;
  height: 0.52vw;
}

.user-input .user-password .open-eyes {
  width: 1.04vw;
  height: 0.72vw;
}

.verify-card {
  padding: 4.38vw 5.47vw;
  flex-direction: column;
}

.verify-row.title {
  overflow: visible;
  margin-bottom: 2.19vw;
}

.verify-row.title p {
  color: #000;
  font-weight: 700;
  font-size: 2.60vw;
  font-style: normal;
  line-height: normal;
  font-family: Montserrat;
  /* text-transform: capitalize; */
}

.verify-row.prompt-message {
  margin-bottom: 2.45vw;
}

.verify-row.prompt-message p {

  font-size: 0.73vw;
  font-weight: 400;
  color: #BDBDBD;
  font-style: normal;
  font-family: Inter;
  line-height: normal;
}

.verify-row.email-code {
  /* gap: 0.89vw; */
  display: flex;
  flex-direction: column;
}

.verify-row.email-code .code-text {
  font-size: 0.73vw;
  font-weight: 400;
  color: #BDBDBD;
  font-style: normal;
  font-family: Inter;
  line-height: normal;

  margin-bottom: 0.89vw;;
}

.verify-row.email-code .code-err-text {
  color: #F00;
  display: none;
  font-size: 0.57vw;
  padding-top: 0.26vw;
  font-weight: 400;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /* text-transform: capitalize; */
  
}

.verify-row.email-code .resend-code {
  color: #A6A6A6;
  font-size: 0.63vw;
  font-weight: 400;
  padding-top: 0.52vw;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
}


.verify-row.email-code .resend-code span {
  cursor: pointer;
  color: #8CD7D0;
}


.verify-row.email-code .code-input {
  gap: 0.99vw;
  display: flex;
}

.verify-row.email-code .code-input input {
  width: 3.33vw;
  height: 3.33vw;
  display: flex;
  border-radius: 0.47vw;
  background: #FFF;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: 1px solid #E4E4E4;

  color: #000;
  font-size: 1.35vw;
  font-weight: 600;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
}

.verify-row.email-code .code-input input::-webkit-outer-spin-button,
.verify-row.email-code .code-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.verify-row.email-code .code-input input {
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
}

.verify-row.verify-btn {
  display: flex;
  margin-top: 2.76vw;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.verify-row.verify-btn .verify-btn-content {
  width: 22.92vw;
  height: 3.39vw;
  display: flex;
  align-items: center;
  border-radius: 1.69vw;
  background-color: #C5C5C5;
  justify-content: center;

  color: #FFF;
  cursor: pointer;
  font-size: 0.94vw;
  font-weight: 700;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  /* text-transform: capitalize; */

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* .verify-row.verify-btn .verify-btn-content .verify-btn-input,
.verify-row.verify-btn .verify-btn-content .verify-send-again {
  width: 22.92vw;
  height: 3.39vw;
  display: flex;
  align-items: center;
  border-radius: 1.69vw;
  background-color: #C5C5C5;
  justify-content: center;

  color: #FFF;
  cursor: pointer;
  font-size: 0.94vw;
  font-weight: 700;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  text-transform: capitalize;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
} */

.verify-row.verify-btn p {
  color: #8CD7D0;
  font-size: 0.73vw;
  cursor: pointer;
  font-weight: 400;
  padding-top: 0.52vw;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  line-height: normal;
  text-decoration-line: underline;
  /* text-transform: capitalize; */
}

.close-btn {
  width: 1.20vw;
  height: 1.20vw;
  position: absolute;
  top: 1.04vw;
  right: 1.04vw;
  border-radius: 50%;
  background-color: #D9D9D9;
}

.close-btn::after,
.close-btn::before {
  width: 0.10vw;
  height: 0.68vw;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 25%;
  transform: rotate(45deg);
  background-color: #fff;
}

.close-btn::before {
  transform: rotate(-45deg);
}







.loadEffect {
  width: 5.21vw;
  height: 5.21vw;
  position: relative;
  margin: 0 auto;
  margin-top: 5.21vw;
}

.loadEffect span {
  width: 0.95vw;
  height: 0.95vw;
  border-radius: 50%;
  position: absolute;
  background: #6AD9D4;
  display: inline-block;
  transform: scale(0);
  animation: load 2.4s ease infinite;
}

/* @keyframes load {
  0% {
    transform: scale(1.2);
    opacity: 1;
  }

  50% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(0.3);
    opacity: 0.5;
  }
} */

/* @keyframes load {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(0.5);
    opacity: 0.0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
} */

@keyframes load {
  0% {
    transform: scale(0.2);
    opacity: 0.2;
  }

  10% {
    transform: scale(0.4);
    opacity: 0.4;
  }

  20% {
    transform: scale(0.6);
    opacity: 0.6;
  }

  30% {
    transform: scale(0.8);
    opacity: 0.8;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
  
  50% {
    transform: scale(0.8);
    opacity: 0.8;
  }

  60% {
    transform: scale(0.6);
    opacity: 0.6;
  }

  70% {
    transform: scale(0.4);
    opacity: 0.4;
  }

  80% {
    transform: scale(0.2);
    opacity: 0.2;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.loadEffect span:nth-child(1) {
  left: 0;
  top: 50%;
  margin-top: -0.52vw;
  animation-delay: 0.3s;
}

.loadEffect span:nth-child(2) {
  left: 0.73vw;
  top: 0.73vw;
  animation-delay: 0.6s;
}

.loadEffect span:nth-child(3) {
  left: 50%;
  top: 0;
  margin-left: -0.52vw;
  animation-delay: 0.9s;
}

.loadEffect span:nth-child(4) {
  top: 0.73vw;
  right: 0.73vw;
  animation-delay: 1.2s;
}

.loadEffect span:nth-child(5) {
  right: 0;
  top: 50%;
  margin-top: -0.52vw;
  animation-delay: 1.5s;
}

.loadEffect span:nth-child(6) {
  right: 0.73vw;
  bottom: 0.73vw;
  animation-delay: 1.8s;
}

.loadEffect span:nth-child(7) {
  bottom: 0;
  left: 50%;
  margin-left: -0.52vw;
  animation-delay: 2.1s;
  
}

.loadEffect span:nth-child(8) {
  bottom: 0.73vw;
  left: 0.73vw;
  animation-delay: 2.4s;
  
}

.loading-card {
  padding-top: 5.26vw;
  flex-direction: column;
}

.loading-card .loading-title {

  
  color: #000;
  font-size: 1.56vw;
  font-weight: 700;
  text-align: center;
  font-style: normal;
  margin-bottom: 1.04vw;
  line-height: normal;
  font-family: Montserrat;
  /* text-transform: capitalize; */
}