body,html{
    height: 100%;
    width: 100%;
}

.main-container{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-container > .login,
.main-container > .hero-body{
    height: auto;
    width: 100%;
    max-width: 400px;
    min-width: 300px;
}



table {
    width: 100%; /* La tabla ocupará todo el ancho disponible */
    border-collapse: collapse; /* Eliminar los espacios entre celdas */
}

table, th, td {
    border: 1px solid #ddd; /* Bordes en la tabla y las celdas */
}

th, td {
    padding: 8px; /* Espaciado interno en las celdas */
    text-align: left; /* Alinear el texto a la izquierda */
}

th {
    background-color: #f2f2f2; /* Color de fondo para los encabezados */
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: #f9f9f9; /* Fondo gris claro para filas pares */
}

.table thead th {
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 2px solid #ccc; /* Agrega una línea para separar el encabezado del contenido */
}

.box {
  transition: background-color 0.8s ease;
}

.fixed-profile {
  width: 128px;
  height: 128px;
  overflow: hidden;
  border-radius: 50%; /* Para que sea redonda */
}

.fixed-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajusta la imagen sin deformarla */
  border-radius: 50%;
}