:root {
    --alto_campo_PreLogin: 4em;
    --ancho_iconos_PreLogin: 3rem;
}
.contentPreLogin {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.contentForm {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4rem;
    max-width: 30rem;
    width: 100%;
    margin-bottom: 4rem;
}
.div_cabeceraPreLogin {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}
.logoWebPreLogin{
    width:50%;
}
.inf_Web {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    font-size: var(--fuenteSize_Info);
    color: var(--color_2);
    gap: 1rem;
}
#lbl_Version {
    height: 3rem;
    display: flex;
    align-items: center;
}
#lbl_CopyRight {
    height: 3rem;
    display: flex;
    align-items: center;
}
#div_Developed {
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.5rem;
}

#logo_4i {
    height: 100%;
}


.formPrelogin {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

.h1_tituloFormPreLogin {
    display: flex;
    width: 100%;
    font-size: var(--fuenteSize_Titulo);
}

/*#region  Campos PreLogin*/

.div_campoPrelogin {
    display: grid;
    grid-template: "div_iconoPreLogin inputPreLogin" 100% / var(--ancho_iconos_PreLogin) calc(100% - var(--ancho_iconos_PreLogin));
    height: 4rem;
    border-radius: var(--border-radius_1);
    border: 1px solid gray;
    width: 100%;
}

.div_campoPreloginPasswd {
    display: grid;
    grid-template: "div_iconoPreLogin inputPreLogin div_mostrarPreLogin" 100% / var(--ancho_iconos_PreLogin) calc(100% - (2 * var(--ancho_iconos_PreLogin))) var(--ancho_iconos_PreLogin);
    height: 4rem;
    border-radius: var(--border-radius_1);
    border: 1px solid gray;
    width: 100%;
}

.div_iconoPreLogin {
    grid-area: div_iconoPreLogin;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color_fondo_icono);
    border-radius: inherit;
    border-right: 1px solid gray;
}

.inputPreLogin {
    grid-area: inputPreLogin;
    border: 0px;
    border-radius: inherit;
    padding-left: 0.4rem;
    font-size: var(--fuenteSize_Input);
    font-weight:bold;
}
    .inputPreLogin::placeholder {
        font-weight: normal;
    }

    .inputPreLogin:focus-visible {
        border: 0;
        outline-offset: 0;
        outline: 0px;
    }

.div_mostrarPreLogin {
    grid-area: div_mostrarPreLogin;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color_fondo_icono);
    border-radius: inherit;
    border-left: 1px solid gray;
}

.iconoMostrar {
    cursor: pointer;
}

/*#endregion  Campos PreLogin*/

.TituloIdioma {
    display: flex;
    width: 100%;
    align-content: center;
    align-items: flex-end;
    justify-content: space-around;
    flex-direction: row;
}
    
.selectPreLogin {
    grid-area: input;
    font-weight: 600;
    border: 1px solid gray;
    border-radius: var(--border-radius_1);
    color: black;
    padding-left: 0.5rem;
    width: 40%;
    height: 3rem;
}

    .selectPreLogin:focus-visible {
        border: 1px solid gray;
        outline-offset: 0;
        outline: 0px;
    }

.btn_PreLogin {
    width: 100%;
    height: 4rem;
    border: 0;
    background-color: var(--c_btn_fondo_1);
    border-radius: var(--border-radius_1);
    color: var(--c_btn_texto_1);
    font-size: var(--fuenteSize_Button);
    
}
    .btn_PreLogin:hover {
        transform: scale(1.01) ;
    }
#a_restablecerContrasena {
    font-size: 1.3rem;
}
/*Movil*/
@media only screen and (max-device-width: 425px) {

}

/*Tablet*/
@media only screen and (min-device-width: 425px) and (max-device-width: 768px) {
    
}