.login-page, .register-page {
    -ms-flex-align: center;
    align-items: center;
    background-image: url(fondo4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 767px) {

    .login-page, .register-page {
    
    background-image: url(fondo4.jpg);
    
    }
}

.card-primary.card-outline {
    border-top: 3px solid #009688;
}

.h1, h1 {
    font-size: 2.2rem;
    color: #ffffff;
}

.login-box {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  
}

.card {
    border: none;
}

.input-group-text {
    background: #009688;
    color: white;
}

.btn-success {
    background-color: #009688;
    border-color: #007B66;
}

.btn-success:hover {
    background-color: #007B66;
}

/* Ajustes adicionales según sea necesario */
input[type="text"], input[type="password"] {
    transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: #009688;
    box-shadow: 0 0 8px rgba(0, 150, 136, 0.6);
}

.btn-success {
    transition: background-color 0.3s, border-color 0.3s;
}

.btn-success:hover {
    background-color: #007B66;
    border-color: #006B56;
}
@keyframes backgroundFade {
    0% { background-color: #ffffff; }
    50% { background-color: #e0f7fa; }
    100% { background-color: #ffffff; }
}

.login-page {
    animation: backgroundFade 10s infinite;
}
a:hover {
   
    color: #1bddff;
}

body, h1, .input-group-text, .btn-success {
    font-family: 'Poppins', sans-serif;
}

.mi-alerta-personalizada {
    background-image: url('conejo.jpeg'); /* Asegúrate de que la ruta sea correcta */
    background-size: cover;
    width: 400px; /* Ajusta a tu preferencia */
    height: 300px; /* Ajusta a tu preferencia */
    /* Otros estilos si necesitas */
}


.card {
    background: rgba(0, 0, 0, 0.752); /* Ajusta la transparencia como en el GIF */
    backdrop-filter: blur(10px); /* Añade un desenfoque para el fondo como en el GIF */
    color: #ffffff; /* Cambia el color del texto a blanco para mejor contraste */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.form-group label {
    display: block;
    margin-bottom: .5rem;
    color: #ffffff; /* Asegúrate de que las etiquetas sean legibles sobre el fondo */
}

.input-group-text {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
}

.form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.icheck-primary label {
    color: white;
}

/* ... tus otros estilos ... */

/* Asegúrate de que la propiedad backdrop-filter esté soportada */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .card {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* ... tus otros estilos ... */