.divider:after,
.divider:before {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}

.h-custom {
  height: calc(100% - 73px);
}

@media (max-width: 450px) {
  .h-custom {
    height: 100%;
  }
}

.input-container {
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
}

.text-field {
  padding-left: 30px;
}


body::after {
  content: "";
  background-image: url('https://cdacenda.com/wp-content/uploads/2022/05/cenda-footer.png');
  background-repeat: repeat;
  opacity: 0.05;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
}


footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}


.campo-oculto {
  display: none;
}

#textoAdicional {
  display: none;
}



th,
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.centered-button {
  display: block;
  margin: 0 auto;
  text-align: center;
}


.custom-link {
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  /* Para posicionar la línea */
}

.custom-link:hover {
  font-size: 16px;
  color: #ffc107;
}

.custom-link::after {
  /* Pseudo-elemento para la línea */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  /* Altura de la línea */
  background-color: white;
  /* Color de la línea */
  transform: scaleX(0);
  /* Inicialmente, la línea no se ve */
  transform-origin: center;
  transition: transform 0.3s ease;
  /* Animación de la línea */
}

.custom-link:hover::after {
  transform: scaleX(1);
  /* Mostrar la línea al pasar el mouse */
}



.error-border {
  border: 2px solid red;
}

img {
  max-width: 100%; /* Asegura que la imagen no sea más ancha que el contenedor */
  max-height: 400px; /* Establece la altura máxima deseada */
  width: auto; /* La anchura se ajustará automáticamente para mantener la proporción */
  height: auto; /* La altura se ajustará automáticamente para mantener la proporción */
}


/* Estilos para hacer el div y su contenido más pequeños */
.smaller-container {
    font-size: 12px; /* Cambia el tamaño de fuente a 12px o ajusta según sea necesario */
    max-width: 80%; /* Limita el ancho máximo del contenedor para que no ocupe toda la pantalla */
    margin: 0 auto; /* Centra el contenedor horizontalmente en su contenedor padre */
}

/* Aplica estilos a los elementos dentro del contenedor si es necesario */
.smaller-container select,
.smaller-container input,
.smaller-container button,
.smaller-container table {
    font-size: 12px; /* Cambia el tamaño de fuente a 12px o ajusta según sea necesario para elementos internos */
}

/* Ajusta el espaciado de celdas en la tabla según sea necesario */
.smaller-container table th,
.smaller-container table td {
    padding: 0.25rem 0.5rem; /* Ajusta el espaciado de celdas según sea necesario */
}

    .btn-submit {
        margin-bottom: 50px; /* Puedes ajustar este valor según tus necesidades */
    }
    
    .user-icon-container {
            width: 200px; /* Aumentar el ancho del div */
            height: 200px; /* Aumentar la altura del div */
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f0f0; /* Color de fondo del div */
            border-radius: 50%; /* Hacer que el div sea circular */
        }
.user-icon {
            font-size: 80px; /* Aumentar el tamaño del icono */
            color: #333; /* Cambiar el color del icono */
        }