* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  
body {
    background: #0099cc !important;
    font-family: 'dinregular',Helvetica,Arial,Lucida,sans-serif;
    overflow-x: hidden;
  }

  .logo
  {
    width: 100%;
    height: 10vh;
    padding: 1rem 0 1rem 0;
  }

  .logo img
  {
    width: 150px;
  }

  .body-content 
  {
    width: 80%;
    max-width: 1560px;
    height: 84vh;
    margin: auto;
    margin-top: 2vh;
    background-color: #fff;
    border-radius: 15px;
  }

  .welcome
  {
    text-align: center;
    padding: 25px;
  }
  .img-welcome img
  {
    width: 65%;
    margin: auto;
  }

  .text-welcome
  {
    color: #525252;
  }

  .text-welcome h1
  {
    font-size: 2rem;
  }

  .text-welcome p
  {
    font-size: 1rem;
    font-weight: 400;
  }

  /* LOGIN */

  .container-fluid, .container-fluid .row 
  {
    height: 100%;
  }
  .content-form
  {
    text-align: center;    
  }

  .content-form-login
  {
    width: 100%;
  }

  .form-login-content
  {
    width: 80%;    
    text-align: left;
    margin: auto;
  }

  .divider {
    border-right: 2px solid #ccc; /* Línea vertical */
    height: 80%; /* Controla la altura para que no toque los bordes */
    margin: auto; /* Centra la línea */
}

  .form-login-content h1
  {
    font-size: 2rem;
    font-weight: 600;
    color: #993399;
    text-align: center;
  }

  .form-login-content label
  {
    font-size: 1rem;
    font-weight: 600;
    color: #0099cc;
    margin-top: 10px;
  }

  .password-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.password-container input, 
input[type=text], 
input[type=email],
input[type=number], 
select{
    width: 100%;
    padding: 10px;
    padding-right: 40px; /* Espacio para el ícono */
    border: 1px solid #7e7f80 ;
    border-radius: 8px;
    font-size: 16px;
    height: 55px;
}

.password-container .toggle-password, .password-container .toggle-passwordConf {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #888;
}

.password-container .toggle-password:hover, .password-container .toggle-passwordConf:hover {
    color: #000;
}

input:focus, input[type]:focus
  {
    border: #993399 1px solid !important;
  }

.form-rem-foret
  {
    width: 100%;
    padding-left: 15px;
    text-align: left;
  }

  .check_politica
  {
    width: 100%;
  }
  
  .remember-form span
  {
    margin-left: 5px;
    font-size: 1rem;
    font-weight: 600;
    color: #0099cc;    
  }

  .foot-form-login
  {
    text-align: center;
  }

  .btn-form-login-dis
  {
    margin-top: 10px;
    width: 200px;
    height: 50px;
    border-radius: 10px;
    border: none;
    color: #fff;
    font-weight: 600;
    background-color: #b4b6b6;
  }

  .btn-form-login
  {
    margin-top: 10px;
    width: 200px;
    height: 50px;
    border-radius: 10px;
    border: none;
    color: #fff;
    font-weight: 600;
    background-color: #0099cc;
  }

  .btn-form-login:hover
  {
    background-color: #993399;
  }

  .form-forget-pass
  {
    margin-top: 10px;
    text-align: center;
  }

  .form-forget-pass a, .forget-pass a, .contact-ft a, .contact-ft, .remember-form a, .yes-account a
  {
    text-decoration: none;
    color: #0099cc;
    font-size: 1rem;
    font-weight: 500;
  }
  
  .forget-pass
  {
    display: flex;
    justify-content: center;
  }

  .form-forget-pass a:hover, .forget-pass a:hover, .contact-ft a:hover, .remember-form a:hover, .yes-account a:hover
  {
    color: #993399;
  }
  
  .forget-pass p, .forget-pass button:hover
  {
    font-size: 1rem;
    font-weight: 500;
    color: #993399;
  }

  .contact-ft
  {
    margin: 5px auto;
  }

  .contact-ft h1
  {
    text-decoration: none;
    color: #993399;
    font-size: 1.2rem;
    font-weight: 600;
  }

  .stl-captcha {
    width: 100%;
    text-align: center;
  }

  .stl-captcha div {    margin: auto;
    
  }

  .g-recaptcha {
    width: 100% !important;
    max-width: 400px !important;
  }

  /* REGISTRO */
  .title-form-register
  {
    padding: 20px;
  }
  .title-form-register h1
  {
    color: #993399;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
  }

  .content-form-register h2
  {
    color: #0099cc;
    font-size: 1.5rem;
    font-weight: 600;
  }

  .modal-backdrop {
    position: relative !important;
  }

  #labelcaract
  {
    font-size: 0.7rem;
  }

  .yes-account
  {
    margin: 5px 0;
    text-align: center;
  }

  .ocultar
  {
    display: none;
  }

  .mostrar
  {
    display: block;
  }

  .content-form-register input[type=text], 
  .content-form-register input[type=number], 
  .content-form-register input[type=password], 
  .content-form-register select,
  .content-form-register input[type=email]
  {
    height: 40px;
  }

  .btn-register-content
  {
    text-align: center;
  }

  .form-login-content input:focus, input[type]:focus
  {
    border: #993399 1px solid !important;
  }

  .remember-form 
  {
    font-size: .9rem;
  }