#error1_password {
  color: red;
}

.left-col {
  width: 50%;
  gap: 30px;
  padding: 200px;
  background: #0084FF;
}
@media (min-height: 200px) and (max-height: 700px) and (max-width: 1800px) {
    .left-col.vh-100 {
        height: auto !important;
    }
}
/* @media screen and (min-height: 870px) {
    .left-col {
      padding: 300px;
    }
  } */
.content-container {
  gap: 30px;
}

.loginpage-input-container {
  margin-top: 15%;
  gap: 30px
}

.gap-30 {
  gap: 30px
}

.profile-back-btn {
  width: 30px;
  height: 30px;
  cursor: pointer;
  text-decoration: none;
}

.profile-back-btn:hover svg rect[fill] {
  fill: #0085FF1A;
  transition: fill 0.3s;
}




.company-name {
  color: #222;
  font-family: Poppins;
  font-size: 44.776px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.login-description {
  font-family: Poppins;
  color: #222;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.company-moto {
  color: #0085ff;
  text-align: center;
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0px;
}

.right-col {
  width: 50%;
  /* padding: 100px 160px; */
  gap: 35px;
}



.h-80 {
  height: 80%
}

.page-name {
  color: #0085ff;
  font-family: Poppins;
  font-size: 50px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.input-container {
  gap: 30px;
}

.email-container {
  position: relative;
}

.email-container img,
.password-container img {
  position: absolute;
  left: 3%;
  top: 30%;
}

.input-container input {
  display: flex;
  padding: 20px 20px 20px 50px;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-radius: 20px;
  border: 1px solid #dbe2ee;
  background: #fafafa;
  color: #212529;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

.input-container p,
.input-container .error_message {
  position: absolute;
}

.error_message {
  color: red
}

.custom-input-container {
  gap: 10px;
}

.password-container {
  position: relative;
}

.password-container i {
  position: absolute;
  right: 3%;
  top: 30%;
  cursor: pointer;
}

.password-container p {
  position: absolute;

}

.custom-form-check-box {
  display: flex;
  width: 22px;
  height: 22px;
  padding: 5.5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5.5px;
  border: 0.733px solid #dbe2ee;
  background: rgba(249, 249, 249, 0.15);
}

.form-check-input[type="checkbox"] {
  border-radius: 5.5px;
  margin-top: 0;
}

.form-check-input:focus {
  border: 1px solid #0085ff;
  box-shadow: none;
}

.form-control:focus {
  box-shadow: none;
  border: 1px solid #0085ff;
}

.r-pass {
  color: #222;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

.f-pass {
  color: var(--primary, #0085ff);
  text-align: center;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
}

.f-pass:hover {
  text-decoration: underline;
}

.btn-login {
  display: flex;
  height: 70px;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 50px;
  border: 1px solid #0085ff;
  color: #0085ff;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.btn-bck-login {
  height: 63px;
  padding: 7px 14px;
}

.btn-login:hover {
  background: rgba(0, 133, 255, 0.15);
  color: #0085ff;
}

.btn-login:focus {
  background: #0085ff;
  color: #fff;
  box-shadow: none;
}

/* mail */
.message-mail {
  color: #000;
  font-family: Poppins;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#error1_password,
#error1_password_confirmation {
  color: red;
}

.message-mail span {
  color: var(--Green, #00b332);
  font-family: Poppins;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* process intiated */
.process-image {
  width: 240px;
  height: 238.957px;
  flex-shrink: 0;
  /* background: url(/assest/images/process.gif) lightgray 50% / cover no-repeat; */
}

#loader {
  display: none;
  /* Hide loader initially */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 20px;
  border-radius: 5px;
  z-index: 9999;
  text-align: center;
}

/* session expired page */
.session-expired-wrapper {
  background-color: #FCFCFC;
}

.logout-msg {
  color: #222;
  text-align: center;
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

div#user {
  border: 1px solid #6c757d62 !important;
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  background-color: #f8f9fa;
  color: #6c757d;
  pointer-events: none;
}


/* OTP NEW */
.otp-input {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 1.2rem;
  margin: 0 5px;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s;
}

.otp-input:focus {
  border: 2px solid #ddd;
  /* border-color: #0084FF; */
  outline: none;
  /* box-shadow: 0 0 5px rgba(13, 110, 253, 0.5); */
}

@media (max-width:1023px) {
  .left-col {
    display: none !important;
  }

  .right-col {
    width: 100%;
    padding: 40px 100px
  }
}

@media (min-width: 1024px) and (max-width:1279px) {
  .right-col {
    padding: 40px 60px;
  }

  .company-name {
    font-size: 20px;
  }

  .animation-image {
    height: 300px;
    width: 300px;
  }

  .page-name {
    font-size: 20px;
  }

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

  .input-container input {
    padding: 12px 12px 12px 38px;
    gap: 10px;
  }

  .r-pass,
  .f-pass {
    font-size: 14px;
  }

  .custom-form-check-box {
    width: 18px;
    height: 18px;
    padding: 5.5px;
  }

  .btn-login {
    font-size: 20px;
    height: 60px
  }

  .logout-msg {
    font-size: 18px;
  }

  .company-moto {
    font-size: 30px;
  }

}

@media (min-width: 1279px) and (max-width: 1535px) {
  .right-col {
    padding: 40px 80px;
  }

  .company-name {
    font-size: 24px;
  }

  .page-name {
    font-size: 24px;
  }

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

  .input-container input {
    padding: 13px 13px 13px 40px;
    gap: 10px;
  }

  .r-pass,
  .f-pass {
    font-size: 12px;
  }

  .custom-form-check-box {
    width: 20px;
    height: 20px;
    padding: 5.5px;
  }

  .btn-login {
    font-size: 24px;
    height: 60px
  }

  .logout-msg {
    font-size: 22px;
  }

  .company-moto {
    font-size: 38px;
  }

  .animation-image {
    height: 400px;
    width: 400px;
  }

}

@media (min-width: 1536px) and (max-width: 1920px) {
  .right-col {
    padding: 40px 120px;
  }

  .company-name {
    font-size: 36px;
  }

  .page-name {
    font-size: 36px;
  }

  .login-description {
    font-size: 16px;
  }

  .input-container input {
    padding: 20px 20px 20px 50px;
    gap: 10px;
  }

  .r-pass,
  .f-pass {
    font-size: 16px;
  }

  .custom-form-check-box {
    width: 22px;
    height: 22px;
    padding: 5.5px;
  }

  .btn-login {
    font-size: 26px;
    height: 70px
  }

  .logout-msg {
    font-size: 24px;
  }

  .company-moto {
    font-size: 46px;
  }

  .animation-image {
    height: 550px;
    width: 550px;
  }

}

@media (min-width: 1921px) {
  .right-col {
    padding: 40px 120px;
  }

  .logout-msg {
    font-size: 26px;
  }

  .company-moto {
    font-size: 50px;
  }

  .animation-image {
    height: 600px;
    width: 600px;
  }

}

.image-height{
  height:350px;
}