body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
}
.left-section {
  background: linear-gradient(to right, #FF640C, #FF640C); /* Color de fondo a la izquierda */
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-section {
  flex: 1;
  padding: 75px;
}
.form-login{
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  flex-direction: column;
}
@media (max-width: 1200px) {
  /* .logo {
    max-width: 697px;
    height: auto;
  } */
  .right-section {
    flex: 1;
    padding: 20px;
  }
}
@media (max-width: 992px) {
  /* .logo {
    max-width: 100%;
    height: auto;
  } */
  .right-section {
    flex: 1;
    padding: 20px;
  }
}
@media (max-width: 767px) {
  .right-section {
    flex: 1;
    padding: 20px;
  }
}
.btn-IS{
  color: #FFFFFF;
}
.btn.btn-IS:hover{
  background-color: #FC9A4C;
}
.btn-crear-cuenta{
  background-color: #FFFFFF;
  border-radius: 20px;
  border: 2px solid var(--color-titulo);
  font-weight: bold;
}
.btn-crear-cuenta:hover{
  border: 2px solid var(--color-titulo);
}
.title-login{
  font-weight: 400;
}
.form-login span{
  font-size: 18px;
  font-weight: 400;
}
.orange-line {
  border: none;
  height: 2px;
  background-color: #FF640C;
  font-weight: bold;
}
.back-link {
  order: -1;
  margin-bottom: 20px;
  color: var(--color-link);
  font-weight: 400;
}
.content-btn{
  margin-top: 8rem;
}
.content-form{
  margin-top: 8rem;
}
/* ESTILOS DEL INPUT DEL FORMULARIO */
.form-login label{
  font-size: 13px;
  color: var(--color-titulo2);
}
.content-form label{
  position: absolute;
  margin-left: 13px;
  margin-top: -10px;
  background-color: #FFFFFF;
  padding: 0px 3px 0px 3px;
  z-index: 1;
}
.content-form input{
  border: 2px solid #D6D6D6;
}
input[type="email"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}
#showPasswordToggle{
  border-left: none;
  color: var(--color-link);
}
#showPasswordToggle:hover {
  background-color: transparent;
  color: inherit;
  border-color: #D6D6D6;
}
.btn-gray:hover {
  background-color: #D6D6D6;
}
.form-control:focus {
  outline: none;
}
.btn-gray:disabled {
  background-color: #D6D6D6;
  border-color: #D6D6D6;
}
.div-pass {
  position: relative;
}
.div-pass i {
  position: absolute;
  right: 10px; /* Ajusta la distancia del ícono al borde derecho según sea necesario */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--color-link);
}
/* ====================================================
== estilos para indicar el error en el formulario ==
==================================================== */
.content-form span{
  font-size: 14px;
  color: var(--color-rojo-error);
}
.create-account span.reCAPTCHA{
  font-size: 12px;
  color: var(--color-rojo-error);
}
.content-form input.bg-error{
  -webkit-box-shadow: 0 0 0 30px #fbd0d4 inset !important;
  border: 1px solid var(--color-rojo-error);
}
.content-form label.error{
  background-color: transparent;
  color: var(--color-rojo-error);
}
.div-pass input.bg-error{
  -webkit-box-shadow: 0 0 0 30px #fbd0d4 inset !important;
  border: 1px solid var(--color-rojo-error);
}
.div-pass label.error{
  background-color: transparent;
  color: var(--color-rojo-error);
}
.content-form i.color_error{
  color: var(--color-rojo-error) !important;
}
/* ============================================ */
/* ESTILOS APARTADO CREAR Cuenta
=============================================== */
.create-account label{
  position: absolute;
  margin-left: 13px;
  margin-top: -15px;
  background-color: #FFFFFF;
  padding: 0px 3px 0px 3px;
  z-index: 1;
}
.content-password label{
  position: absolute;
  margin-left: 13px;
  margin-top: -11px;
  background-color: #FFFFFF;
  padding: 0px 3px 0px 3px;
  z-index: 1;
}
.create-account input{
  border: 2px solid #D6D6D6;
}
.create-account span{
  color: var(--color-rojo-error);
}
label.position{
  margin-top: -11px;
}
.content-password span{
  font-size: 13px;
  color: #264653;
}
.text-pass{
  display: flex;
  align-items: center;
}
.check-pass i{
  color: var(--color-link);
  font-size: 15px;
}
.progress-bar{
  background-color: var(--color-rojo-error);
  transition: width 0.3s;
}
.content-password input{
  border: 2px solid #D6D6D6;
}
.content-password span.text_confirm_pass{
  font-size: 12px;
  color: var(--color-rojo-error);
}
/* ============
ALERTA SMS
============ */
#modalAlert .modal-header{
  border-bottom: none;
  display: block;
}
#modalAlert .modal-footer{
  border-top: none;
}
.icon-unique{
  border-radius: 50%;
  width: 70px;
  height: 70px;
  padding: 15px;
  font-size: 40px;
  line-height: 1;
  /* display: inline; */
  color: #ffffff;
  background-color: var(--color-verde-success);
  display: flex;
  justify-content: center;
  align-items: center;
}
.border-unique{
  border-radius: 50%;
  /* width: 30px;
  height: 30px; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  line-height: 1;
  /* display: inline; */
  background-color: #FFFFFF;
}
.unique-header{
  height: 104px;
}
.btn-closemodal{
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  color: #000;
  background-color: transparent;
  border: none;
  cursor: pointer;
  float: right;
  color: var(--color-link);
}
.modal-header i{
  font-size: 20px;
}
.btn-return{
  border-radius: 20px;
  background-color: var(--color-link);
  color: #FFFFFF;
  width: 30%;
}
.btn.btn-return:hover{
  color: #000000;
  background-color: var(--color-link);
}
div.loadingoverlay{
  z-index: 0 !important;
}
/* ====================
ESTILOS PARA CAPCHA
=================== */
.captcha-area .captcha-img{
  height: 100%;
  width: 200px;
  user-select: none;
  background: #000;
  border-radius: 5px;
  position: relative;
}
.captcha-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  opacity: 0.95;
}
.captcha-img .captcha{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  color: #000;
  font-size: 30px;
  text-align: center;
  letter-spacing: -3px;
  transform: translate(-50%, -50%);
  text-shadow: 0px 0px 2px #b1b1b1;
  font-family: "Rubik Glitch", system-ui;
}
div.reload_capcha{
  display: flex;
  align-items: center;
}
div.input-area{
  display: flex;
  align-items: center;
}
.reload_capcha button{
  background-color: transparent;
  border: none;
  color: var(--color-link);
  outline: none;
  font-size: 22px;
  padding: 0px;
}
.no-hover:hover {
  background-color: transparent;
  border: none;
  color: var(--color-link);
}
.status-text span.text_confirm_pass{
  font-size: 12px;
  color: var(--color-rojo-error);
}
.content-forgot-password label.email{
  position: absolute;
  margin-left: 13px;
  margin-top: -11px;
  background-color: #FFFFFF;
  padding: 0px 3px 0px 3px;
  z-index: 1;
}
.content-forgot-password label.verify-code{
  position: absolute;
  margin-left: 13px;
  margin-top: -39px;
  background-color: #FFFFFF;
  padding: 0px 3px 0px 3px;
  z-index: 1;
}
.btn-next{
  color: #FFFFFF;
  border-radius: 20px;
  font-weight: bold;
  background-color: var(--color-primary);
}
.btn-next:hover{
  color: #FFFFFF;
  background-color: var(--color-primary);
}
/* ESTILOS RECUPERAR CONTRASENA */
.border-recovery{
  border: 1px solid var(--color-gris);
  box-shadow: 0 4px 16px #D6D6D6;
}
.border-recovery h6{
  color: var(--color-titulo);
  font-weight: bold;
}
.content-forgot-password input{
  border: 2px solid #D6D6D6;
}
span.noExiste{
  font-size: 13px;
  color: var(--color-rojo-error);
}
.content-forgot-password p{
  color: var(--color-titulo2);
}
/* ALERTIFY */
.ajs-message
{
  width: 800px !important;
  top: 40px !important;
  background-color: #163A93 !important;
  color: white ;
  text-align: center;
}
.ajs-dialog
{
  max-width: none !important;
  background-color: transparent !important;
  margin:0px !important;
}
.ajs-primary
{
  position: absolute;
  right: 0px;
  top: 10px;
  z-index: 2;
}
.ajs-footer
{
  background-color:transparent !important;
}
.ajs-ok
{
  border-radius: 5px;
  border:0px;
  height:20px;
  background-color: #37C937;
  color: white;
}
.ajs-cancel
{
  border-radius: 5px;
  border:0px;
  height:20px;
  background-color: #d33;
  color: white;
}
/* Personalizar el tamaño de la alerta */
#tuDivEspecifico .toast {
  font-size: 14px;
  padding: 12px;
  color: #FFFFFF;
  background: var(--color-verde-success);
}
/* Personalizar el tamaño del título */
#tuDivEspecifico .toast-title {
  font-size: 16px;
  font-weight: bold;
}
/* Personalizar el tamaño del mensaje */
#tuDivEspecifico .toast-message {
  font-size: 14px;
}
/* Personalizar el ancho de la alerta */
#tuDivEspecifico .toast {
  position: fixed;
  top: 0;
  left: 58%;
  /* transform: translateX(-50%); */
  z-index: 9999;
  width: 100%;
}

/* Personalizar el ancho del título y del mensaje */
#tuDivEspecifico .toast-title,
#tuDivEspecifico .toast-message {
  width: 100%; /* O ajusta según tus preferencias */
  box-sizing: border-box;
}
/* FIN ALERTIFY */
.imgMovil{
  display: none;
}
@media (max-width: 768px) {
  .imgMovil{
    display: block;
    padding-top: 4rem;

  }
}
.bg-orange {
    background-color: orange;
}

.bg-white {
    background-color: white;
}
@media (max-width: 768px) {
  .left-section {
    display: none;
  }
}
span.status-text{
  font-size: 12px !important;
  color: var(--color-rojo-error)
}
.azul_link {
  color: var(--color-link);
  font-weight: 500;
}
.divider-bar {
  height: 16vh;
  margin: auto;
  border: 2px solid #FFFFFF;
}
.logo-1 {
  /* margin-left: 1rem; */
  margin-top: .25rem;
}
.logo_1 {
  padding-top: 16rem;
}
.logo_2 {
  /* margin-left: 2rem; */
  padding-top: 16rem;
}
.logo_2 img{
  margin-left: 36%;
}
.divider-logo {
  height: 36px;
  margin: auto;
  border: 1px solid var(--color-gris);
  display: inline-block;
}
input.form-control:focus {
  outline: none;
  box-shadow: none;
  border: 2px solid #D6D6D6;
}
input.form-control.bg-error:focus {
  border: 1px solid var(--color-rojo-error);
}
.error_label {
  display: inline-block; /* Para que el label tenga el ancho del contenido */
  padding: 5px 10px; /* Ajusta el padding según lo necesites */
  background: linear-gradient(to bottom, white 50%, #F3D1D4 50%); /* Gradiente lineal */
}
.create-account span.errorCorreo, .content-form span.errorCorreo {
  font-size: 14px;
}