/*ESTILOS PARA LA TABLA*/
table th {
  background-color: #03A9F3;
  color: white;
}

/*BOTON DE SUBIR IMAGEN*/
.subir {
  padding: 5px 10px;
  background: #f55d3e;
  color: #fff;
  border: 0px solid #fff;
}

.subir:hover {
  color: #fff;
  background: #f7cb15;
}


/*ESTILOS PARA LA PAGINA DE INICIO*/
/* background-color: #343a40; */ 

.login-page {
  background-color: #e6ebf4;  
}

/* Cambiar el fondo del formulario de inicio de sesión */
.login-box_ {
  border-radius: 10px;
background: linear-gradient(145deg, #cfd4dc, #f6fbff);
box-shadow:  20px 20px 60px #c4c8cf,
             -20px -20px 60px #ffffff;
}


/**/
/*  ESTILO PARA EL SCANNER  */

.video-container {
  position: relative;
  width: 100%;
  height: 99%;
  overflow: hidden;
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.5);
  pointer-events: none;
}




.scanLine {
  width: calc(100% - 6px);
  height: 3px;
  background-color: rgba(255, 0, 0, 0.40);
  box-shadow: 0px 0px 10px 7px rgba(255, 99, 71, 0.50);
  position: absolute;
  top: 0;
  left: 3px;
  animation: scanAnimation 3s linear infinite;
  z-index: 3;
}

@keyframes scanAnimation {
  0% {
    top: 0;
  }

  100% {
    top: 100%;
  }
}


/*/////////////////////////////////// */

/*loading spiner*/
#loadingModal {
  z-index: 99999;
}

#loadingModal .modal-content {
  background-color: transparent;
  border: none;
  box-shadow: none;
}
#loadingModal .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  box-shadow: none;
}
#loadingModal .spinner-border.large {
  width: 5rem;
  height: 5rem;
  border-width: .5em;
}


#loadingModal .loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(32,201,151, 0.2);
  border-right: 1.1em solid rgba(32,201,151, 0.2);
  border-bottom: 1.1em solid rgba(32,201,151, 0.2);
  border-left: 1.1em solid #20c997;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



/*/////////////////////////////////// */

/* ~~~~~~~~~~~~~~~ SELECT2 ~~~~~~~~~~~~~~~ */
@media (max-width: 767px) {
  .select2-dropdown {
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      max-height: 80vh; /* Ajusta el valor según tus necesidades */
      overflow-y: auto; /* Agrega un scroll vertical si el dropdown excede la altura máxima */
      z-index: 9999; /* Asegura que el dropdown esté por encima de otros elementos */
  }
}


/* ====================================================== */
/* ==================== SPINER PROPIO =================== */
/* ====================================================== */
/* Estilos para el contenedor del spinner */
.spinner-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente oscuro */
  display: none; /* Ocultar inicialmente el contenedor */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Asegura que el spinner esté por encima de otros elementos */
}

/* Estilos para el spinner */
.spinner {
  border: 4px solid #f3f3f3; /* Estilo del borde */
  border-top: 4px solid #3498db; /* Estilo del borde superior */
  border-radius: 50%; /* Borde redondeado */
  width: 50px; /* Ancho del spinner */
  height: 50px; /* Altura del spinner */
  animation: spin 1s linear infinite; /* Animación de giro */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





/* ====================================================== */
/* ==========  CONTENEDOR IMAGEN MODELOS       ========== */
/* ====================================================== */
.image-upload {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.image-upload img {
  max-width: 100%;
  max-height: 100%;
  object-fit:cover;
  display: none;
}