body {
    font-family: 'Poppins', sans-serif !important;
    padding-top: 108.65px;
    height: 100%;
  }
  
  .deg-body {
    height: 130px;
    background-image: linear-gradient(0deg, #0F1113, #000000);
  }
  
 
  
  .bg-toas {
    background-color: #212428 !important;
    color: #FAFAFA !important;
  }
  
  #logout {
    width: 70px;
  }
  
  .ic_tienda {
    height: 24px;
  }
  
  .mt-l-text {
    margin-top: 5px !important;
  }
  
.color-lime {
  color: lime;
}
  .offcanvas {
    transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out !important;
}


  /* Aplicar el estilo solo en pantallas pequeñas */
  @media only screen and (max-width: 576px) {
    .offcanvas-size-sm {
      width: min(95vw, 250px) !important;
    }
  }
  
  .text-size-1 {
    font-size: small !important;
  }

  .text-size-2 {
    font-size: medium !important;
  }

  .text-size-3 {
    font-size: large !important;
  }
  
  .text-size-menu {
    font-size: x-large !important;
  }
  
  .text-color-wcalido {
    color: #FAFAFA !important;
  }
  
  .text-color-wfrio {
    color: #F5F5F5 !important;
  }
  
  .bg-color-blue {
    background-color: #1B76FD !important;
  }
  
  .bg-color-white {
    background-color: #FFFFFF;
  }
  
  .bg-color-red {
    background-color: #ff0000;
  }

  .color-red {
    color: #fc1c1c;
    
  }
  
  .bg-color-white2 {
    background-color: #F0F2F5;
  }
  
  .bg-color-dark {
    background-color: #0F1113;
  }

  #contbtnkcal {
    display: none;
  }
  
  .bg-color-dark2 {
    background-color: #000000;
  }
  
  .text-white {
    color: #ffffff;
  }
  
  .text-black {
    color: black;
  }
  
  .radio-small {
    border-radius: 9px;
  }

  #textDispo {
    display: none;
  }
  
  
  
  .zise-icon {
    font-size: 25px;
  }
  
  .bg-color-card {
    background-color: #212529 !important;
    color: #f5f5f5;
  }
  
  .text-action {
    pointer-events: none;
    cursor: pointer;
  }
  
  .cuerpocolum-1 {
    grid-template-rows: 1fr auto;
  }
  
  .cuerpocolum-1>.cuerpocolum-2 {
    column-count: 2;
  }
  
  .cuerpocolum-3 {
    break-inside: avoid;
  }
  
  .r-my-1 {
    margin-top: -.25rem !important;
    margin-bottom: -.25rem !important;
  }
  
  .r-my-2 {
    margin-top: -.5rem !important;
    margin-bottom: -.5rem !important;
  }
  
  .r-my-3 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important;
  }
  
  .r-my-4 {
    margin-top: -2rem !important;
    margin-bottom: -2rem !important;
  }
  
  #resta_password, #btn2_iniciarSesion, #datincorrecta2, #datcorrecu, #noneeyelog, #group_btn_iniReg, #group_btn_yaRegistrado, #datincorrectar {
    display: none;
  }
  
  .input-dark, .dark-eye {
    background-color: #363636 !important;
    color: #F0F2F5 !important;
  }

  .est-border {
    border-color: #222222 !important;
  }
  
  .text-color-grey {
    color: #4B4B4B;
  }


  #layerPrin, #bannerimgin, #card_c, #card_d, #card_k, #card_rm, #card_rh, #btnigin, #btnwin{
    display: none;
  }


  
  
  
.cards-banner {
  display: grid;
  grid-auto-columns: 100%;
  grid-column-gap: 10px;
  grid-auto-flow: column;
  padding: 0px 0px;
  list-style: none;
  overflow-x: scroll;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}

/* Ajustar altura en pantallas más pequeñas (por ejemplo, en dispositivos móviles) */
@media (max-width: 1023px) {
  .cards-banner {
    height: auto; /* Ajusta la altura según tus necesidades */
    overflow: hidden; /* Asegura que las imágenes no se desborden */
    background-color: red;
  }
  .cards-banner img {
    height: 100%; /* Ajusta la imagen para que ocupe toda la altura del contenedor */
    width: 100%;
    object-fit: cover; /* Ajusta el ajuste de la imagen */
    object-position: center;
    margin-top: 17px ;
  }


}




  .img-containerej {
    width: 120px;  /* Ajusta el ancho deseado */
    height: 80px; /* Ajusta la altura deseada */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se salga del contenedor */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .img-containerej img {
    max-width: 100%;
    max-height: 100%;
  }
 

  .card-banner {
    display: inline-flex; /* Ensure the items are in a horizontal line */
    flex-direction: column;
    padding: 0;
    background: var(--white);
    border-radius: 0px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    scroll-snap-align: start;
    min-width: 100vw; /* Ensure each item takes up full viewport width */
    box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  }

  .card-banner img {
    width: 100%;
    height: auto;
    display: block;
  }


  
 #ic_carga_user {
    display: none;
 }
  




  

  .btn-close-red-look {
    background: none;
  border: none;
  color: #FF0000 !important; /* Color de la "x" */
  font-size: 20px;
  cursor: pointer;
  margin-left: 18px !important; /* Espacio entre el input y el botón */
  }


 



 


.row-full-width-e {
  display: flex; /* Usa Flexbox para el diseño */
  justify-content: center; /* Centra horizontalmente todos los elementos en la fila */
  align-items: center; /* Centra verticalmente todos los elementos en la fila */
  width: 100%; /* Asegura que la fila ocupe el ancho completo del contenedor */
}

/* Estilo para la columna 'ejercicio-col' */
.ejercicio-col-e {
  display: flex; /* Usa Flexbox para alinear los elementos */
  justify-content: center; /* Centra horizontalmente los elementos dentro de la columna */
  align-items: center; /* Centra verticalmente los elementos dentro de la columna */
  width: 100%; /* Asegura que la columna ocupe el ancho completo disponible */
}

/* Estilo para los inputs para que tengan el mismo tamaño */
.input-group-col-e input {
  flex: 1; /* Hace que los inputs ocupen el mismo espacio disponible */
  margin: 2px; /* Margen opcional para separarlos un poco */
}


/* Estilo para la fila de inputs usando Grid Layout */
.input-row-e {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Crea 4 columnas de igual tamaño */
  gap: 4px; /* Espacio entre los inputs */
}

/* Estilo para los inputs dentro de .input-row */
.input-row-e input {
  width: 100%; /* Asegura que cada input ocupe el ancho total de su columna */
  box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el tamaño total */
}



  
 
  #toast_sesion {
    display: none;
  }

  .zindex-2000 {
    z-index: 2000 !important;
  }
  
  #poscurita {
    z-index: 1999 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    display: none;
  }

  #poscuritados {
    z-index: 1999 !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    background:black;
    display: none;
  }
  
  #btn-close-t {
    margin-left: auto;
  }
  
  .text-grey {
    color: #6c6f70;
  }
  
  .mayusculas {
    text-transform: uppercase;
  }
  
  .puntero {
    cursor: default;
  }
  

  .vipasswlog, .vipasswlogg, .vipasswl, .vipasswwl {
    background-color: #2C2B2E !important;
  color: #C6C5C6 !important;
  border: 0px !important;
  }

  #seg_cont_miperfil {
    display: none;
  }


.bg-color-card-i{
  background-color: #1D1C1D !important;
}

.bg-color-deg-y {
  background: linear-gradient(to right, #f0f00a, #f3eb06, #ffee00, #f1da07);
}


.bg-color-card-2i{
  background-color: #2C2B2E !important;
}


.bg-color-card-3i{
  background-color: #323232 !important;
}

input::placeholder,
textarea::placeholder {
    color: #C6C5C6 !important;
    opacity: 0.5 !important;
}

#barraCargaFoto, #cartelcargado, #cartelerror{
  display: none;
}

.input-dark-i {
  background-color: #2C2B2E !important;
  color: #C6C5C6 !important;
  border: 0px !important;
}

.input-dark-i-2 {
  background-color: #1C1C1E !important;
  color: #C6C5C6 !important;
  border: 0px !important;
}

.btn-i-1{
  color: #0A82FB !important;
  background-color: #26262A !important;
  border-radius: 11px !important;
}

.btn-i-2{
  color: #0A84FF !important;
  background-color: #042140 !important;
  border-radius: 11px !important;
}

.btn-i-3{
  color: #FEFEFF !important;
  background-color: #077df4 !important;
  border-radius: 11px !important;
}

.bg-color-blue-i {
  background-color: #077df4 !important;
  color: #FEFEFF !important;
}

.btn-i-4{
  color: #0983FE !important;
  background-color: transparent !important;
  border-radius: 11px !important;
}

.rad-i {
  border-radius: 11px !important;
}

.rad-i-de {
    border-top-right-radius: 11px !important;
    border-bottom-right-radius: 11px !important;
}

.rad-i-iz {
  border-top-left-radius: 11px !important;
    border-bottom-left-radius: 11px !important;
}

.dark-eye-i {
  background-color: #2C2B2E !important;
  color: #C6C5C6 !important;
}


.bg-color-fondo-i{
  background-color: #010001 !important;
}

.bg-color-text-i{
  color: #C6C5C6 !important;
}

.bg-color-textblue-i{
  color: #1C79DA !important;
}


#butbuscar, #opam3, #btnsavam, #btnresam, #cardain, #contListMie {
  display: none;
}




#tabla-ejercicios {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
}

#tabla-ejercicios th, 
#tabla-ejercicios td {
  padding: 8px;
  text-align: left;
  vertical-align: middle;
}

#tabla-ejercicios td input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: none;
  margin: 0;
  text-align: center; /* Centra el texto horizontalmente */
  vertical-align: middle; /* Centra el texto verticalmente */
}

#contenedor-canvas {
  display: none;
}

.ejercicio-col {
margin-left: -50px !important;
margin-right: -50px !important;
}




.input-group-col {
  display: flex;
  flex-direction: column; /* Organiza los inputs en columna */
  gap: 10px; /* Espacio entre la fila superior y la fila inferior */
}

.input-full-width {
  width: 100%; /* El primer input ocupa todo el ancho */
}

.input-row {
  display: flex;
  justify-content: space-between; /* Espacio uniforme entre los 3 inputs */
}

.input-row input {
  flex: 1; /* Hace que los inputs sean del mismo tamaño */
  margin-right: 10px; /* Espacio entre inputs */
}

.input-row input:last-child {
  margin-right: 0; /* Quita el margen a la derecha del último input */
}



/* Agregar borde a las celdas */
#tabla-ejercicios td {
  border-bottom: 0.8px solid #2C2B2E ; /* Cambia #FF0000 al color que prefieras */
}

/* Opcional: agregar borde a las filas si también es necesario */
#tabla-ejercicios tr {
  border-bottom: 0px; /* Cambia #FF0000 al color que prefieras */
}


/* Estilos para el botón de eliminar */
.btn-remove-row {
  background: none;
  border: none;
  color: #FF0000; /* Color de la "x" */
  font-size: 20px;
  cursor: pointer;
  margin-left: 10px; /* Espacio entre el input y el botón */
}

/* Estilos para el contenedor del input y el botón */
.input-wrapper {
  display: flex;
  align-items: center;
}

.input-wrapper input {
  margin-right: 10px; /* Espacio entre el input y el botón */
}

.btn-remove-row {
  background: none;
  border: none;
  color: #FF592F; /* Color de la "x" */
  font-size: 20px;
  cursor: pointer;
}


.border-00 {
  border: none !important;
  outline: none !important;
}


.center-div {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
  align-items: center !important;
}


.center-ha {
  display: block;
  margin: 0 auto;
}

.center-hb {
  text-align: center;
}

.center-va {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  
}

.center-vb {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  
}









.lius-name-header {
  text-align: center;
  margin-bottom: 2px;
}

.lius-space-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 espacios por fila */
  gap: 0px;
}

.lius-space {
  width: 100%;
  height: 30px; /* Ajusta la altura del espacio según sea necesario */
  background-color: #ddd; /* Color inicial (gris claro) */
  border: 1px solid #ccc; /* Añadir un borde */
}

/* Ajustes para pantallas móviles */
@media (max-width: 576px) {
  .lius-space-container {
    grid-template-columns: repeat(12, 1fr); /* Mantén 12 columnas en pantallas pequeñas */
  }
}