/* Estilos para el ContenedorImagenWise */
.ContenedorImagenWise {
    position: absolute;
    width: 50%;
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    bottom: 0;
    top: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ContainerImagenSmartBill {
    position: absolute;
    width: 50%;
    background: #3E3E3E url(../Imagenes/smartbill-dark.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    bottom: 0;
    top: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilos para el ContenedorElementosLogin */
.ContenedorElementosLogin {
    height: 60%;
    display: flex;
    align-items: center;
}

/* Media query para dispositivos con pantalla pequeña (por ejemplo, móviles) */
@media (max-width: 768px) {
    .ContenedorImagenWise {
        position: static; /* Elimina la posición absoluta */
        width: 80%; /* Ocupa todo el ancho */
        height: 50%; /* Ocupa la mitad superior de la pantalla */
    }

    .ContenedorElementosLogin {
        height: 50%; /* Ocupa la mitad inferior de la pantalla */
    }
}



.LogoWise {
    max-width: 90%; /* La imagen no superará el ancho de su contenedor */
    height: auto; /* Se mantendrá la relación de aspecto original */
    display: block; /* Para centrar horizontalmente */
    /* Centrar horizontal y verticalmente */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*.LogoWise {
    width: 50%;
}*/

.ContenedorCopyright {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vh;
    font-variant: small-caps;
    color: white;
    letter-spacing: 1px;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 50%;
    position: absolute;
}

.ContenedorVersion {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5vh;
    color: #727272;
    text-align: right;
    bottom: 0;
    right: 1%;
    width: 50%;
    position: absolute;
}

.ContenedorLogin {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 50%;
    text-align: center;
}

.ContenedorLogoEmpresa {
    height: 40%;
    white-space:nowrap;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/*.ContenedorElementosLogin {
    height:60%;
    display:flex;
    align-items:center;
}*/

.LogoEmpresa {
    display: inline-block;
    max-height: 70%;
    max-width: 90%;
    vertical-align: middle;
    margin-left:-4px;
}


@media (max-width:980px){
    .ContenedorImagenWise {
        width: 100vw;
        height: 40%;
        position: absolute;
    }

    .ContainerImagenSmartBill {
        width: 100vw;
        height: 40%;
        position: absolute;
    }

    .LogoWise {
        height: 30%;
    }

    .ContenedorLogin {
        width: 100vw;
        height: 60%;
        top: auto;
    }

    .ContenedorLogoEmpresa {
        height: 40%;
    }

    .LogoEmpresa {
        max-height: 70%;
        max-width: 80%;
    }

    .ContenedorElementosLogin {
        height: 40%;
    }

        .ContenedorElementosLogin .txtIniciarSesion {
            width: 50%;
            height: 10%;
            font-size: 2vh;
        }

        .ContenedorElementosLogin .botonIniciarSesion {
            width: 60%;
            height: auto;
            padding: 2%;
            font-size: 2vh;
        }

        .ContenedorElementosLogin [class*="Icono-"] {
            height: 5vh;
            width: 5vw;
            background-position-y: bottom;
        }

        .ContenedorElementosLogin .modalPopup23 {
            /* Estilos generales del popup */
            max-width: 90%; /* Ancho máximo en porcentaje para adaptarse a la ventana */
            max-height: 80%; /* Altura máxima en porcentaje para adaptarse a la ventana */
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            position: relative;
            z-index: 10001;
            margin: 0 auto;
            padding: 20px;
            /* Estilos específicos para el contenido de los términos y condiciones */
            font-size: 14px; /* Tamaño de fuente */
            line-height: 1.4; /* Espaciado entre líneas */
            overflow: auto; /* Permite el desplazamiento vertical si es necesario */
        }

        .ContenedorElementosLogin .izquierda {
            text-align: left !important; /* Esto alineará el texto a la izquierda */
            overflow: auto; /* Agregar overflow para permitir desplazamiento si es necesario */
            max-height: 400px;
        }

        .ContenedorElementosLogin .modalBackground1 {
            background-color: rgba(0, 0, 0, 0.7);
            position: fixed;
            top: 30px;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000;
            display: none;
        }

    .ContenedorCopyright {
        width: 100%;
        color: black;
        font-size: 1.5vh;
    }

    .ContenedorVersion {
        width: 100%;
        color: black;
        font-size: 2vh;
        top:1%;
        color:white;
        bottom:auto;
    }
}