:root {
      --negro: #000000;
      --azul: #0b4391;
      --amarillo: #FEC805;
      --blanco: #FFFFFF;
}

* {
      font-family: 'Poppins', sans-serif;
}

button:active {
      outline: none!important;
      border: none!important;
  }
  
button:visited {
      outline: none!important;
      border: none!important;
}

button:focus {
      outline: none!important;
}

.swal2-container {
      z-index: 9999999!important;
}

div.login {
      position: relative;
    width: 100%;
    height: 100vh; /* ajusta si tu login tiene un tamaño diferente */
    overflow: hidden;
}

.login .video-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
  }

div.opacidad-login {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(4, 19, 40, 0.85);
      z-index: 2;
}

div.login img {
      width: 25%;
      margin-bottom: 1.5rem;
}

form.caja-login, form.caja-olvido {
      padding: 2rem;
      background-color: rgba(6, 34, 74,.95);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 30%;
      border-radius: .25rem;
      -webkit-box-shadow: 5px 0px 15px -7px #000000; 
      box-shadow: 5px 0px 15px -7px #000000;
      z-index: 9999;
}

form#olvido {
      display: none;
}

p.texto-ayuda {
      font-size: .9rem;
      color: var(--blanco);
      text-align: center;
}

form span.input-group-text {
      border-radius: .25rem 0rem 0rem .25rem!important;
}

button.botonIngresar, button.botonGuardar {
      padding: .5rem 2rem;
      width: 100%;
      background-color: var(--blanco)!important;
      border-radius: .25rem;
      transition: all .3s ease;
      border: none!important;
      padding: .5rem 0;
      text-transform: uppercase;
      letter-spacing: 1px;
}

button.botonGuardar {
      margin-top: 1rem;
      background-color: var(--azul)!important;
      color: var(--blanco)!important;
}

button.botonIngresar:hover, button.botonGuardar:hover {
      background-color: var(--amarillo)!important;
}

form span.olvido {
      color: var(--blanco);
      text-align: center;
      font-size: .9rem;
      display: block;
      margin: 1rem auto 0 auto;
      cursor: pointer;
      transition: all .3s ease;
}

form span.olvido:hover {
      color: var(--amarillo);
}

form span.iniciar-sesion {
      color: var(--blanco);
      text-align: center;
      font-size: .9rem;
      display: block;
      margin: 1rem auto 0 auto;
      cursor: pointer;
      transition: all .3s ease;
}

form span.iniciar-sesion:hover {
      color: var(--amarillo);
}

form h2 {
      font-size: 1.5rem;
      text-transform: uppercase;
      color: #FFFFFF;
      text-align: center;
      margin-bottom: 1.5rem;
      letter-spacing: 1px;
}

footer.footer-login {
      position: absolute;
      bottom: 1rem;
      left: 50%;
      font-size: .8rem;
      color: var(--blanco);
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 3;
}

div.modal-header.bg-info {
      background-color: var(--azul)!important;
}

div.input-group-append span.input-group-text {
      background-color: var(--amarillo)!important;
      border: 0!important;
      color: #FFFFFF!important;
      cursor: pointer;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
      form.caja-login, form.caja-olvido {
            width: 40%;
      }
}

@media screen and (min-width: 600px) and (max-width: 991px) {
      form.caja-login, form.caja-olvido {
            width: 60%;
      }
}

@media screen and (max-width: 575px) {

      form.caja-login, form.caja-olvido  {
            padding: 1rem;
            width: 95%;
      }

      footer.footer-login {
            left: 50%;
            width: 90%;
            bottom: .5rem;
            font-size: .7rem;
            text-align: center;
      }

}


.swal2-timer-progress-bar {
  background: #28a745 !important;
}