body, html {
    font-family: 'Roboto', sans-serif;
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    height: 100vh;
}

.left-side {
    flex: 1;
    position: relative;
}

.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Ajusta la posición del video */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.right-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f4f4;
}

.login-form {
    width: 80%;
    max-width: 400px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-form img {
    display: block;
    margin: 0 auto 10px; /* Reduce el margen inferior del logo */
    width: 80px; /* Ajusta el ancho del logo */
    height: auto;
}

.login-form h2 {
    text-align: center;
    margin-bottom: 10px;
    font-weight: 500; /* Puedes ajustar el peso de la fuente */
}

.login-form .form-group {
    margin-bottom: 20px; /* Puedes ajustar este valor según sea necesario */
}

.login-form .input-group {
    display: flex;
    align-items: center;
    position: relative;
}

.login-form .input-group span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Ajusta el ancho del contenedor del ícono */
    pointer-events: none; /* Evita que el ícono interfiera con el input */
}

.login-form .form-control {
    border: none; /* Quitar el borde */
    background-color: transparent; /* Fondo transparente */
    padding: 10px 0; /* Ajuste del relleno */
    padding-left: 40px; /* Añadir espacio para el ícono */
    transition: border-color 0.3s; /* Transición para el color del borde */
    border-bottom: 2px solid #ced4da; /* Línea delgada inferior */
    width: 100%; /* Ancho completo del contenedor */
    margin: 10px 0; /* Margen superior e inferior */
    max-width: 300px; /* Ancho máximo para evitar que se extienda demasiado */
}

/* Estilo al enfocar */
.login-form .form-control:focus {
    outline: none; /* Quitar el contorno al enfocar */
    border-bottom-color: #007bff; /* Color de la línea al enfocar */
}

.login-form .btn {
    max-width: 200px; /* Ancho máximo del botón */
    width: 100%; /* Para que ocupe todo el ancho disponible */
    border-radius: 5px; /* Borde redondeado */
    background-color: #007bff; /* Color de fondo */
    color: white;
    border: none;
    padding: 12px; /* Ajuste del padding */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: block; /* Para ocupar todo el ancho y permitir centrado */
    margin: auto; /* Centrar horizontalmente */
}

.login-form .btn:hover {
    background-color: #0056b3; /* Color de fondo al pasar el mouse */
}

.login-form .btn:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.25); /* Efecto al enfocar */
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .left-side {
        height: 300px; /* Ajusta la altura del video para dispositivos móviles */
    }
    .right-side {
        padding: 20px; /* Añade un poco de espacio alrededor del formulario */
    }
    .login-form {
        width: 100%; /* Ocupa todo el ancho disponible */
        max-width: none; /* Elimina el ancho máximo para que se expanda según sea necesario */
    }
}