@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
    height: 100%;
    width: 100%;
    font-family: "Raleway", serif;
    overflow: hidden;
}

body {
    background: url('../../images/login/fondoLogin.png') no-repeat center center;
    background-size: cover;
}

h1{
    color: #FFFFFF;
}

.main-container{
    height: 100%;
    width: 100%;
}

.boxLeftLogin{
    padding-left: 0;
    padding-right: 0;
    min-height: 300px;
}

.boxRightLogin{
    min-height: 300px;
}

.box-login{
    width: 100%;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.btn-back{
    border-radius: 5px;
    background-color: #5858EE;
    color: #FFFFFF;
    height: 2.569vw;
    max-height: 37px;
    min-height: 25px;
    width: 7.708vw;
    max-width:111px;
    min-width: 56px;
}

.img-back{
    width: 1.528vw;
    max-height: 22px;
    min-height: 15px;
    max-width: 22px;
    min-width: 15px;
}

.inputGris{
    background-color: #212E36;
    color: #FFFFFF;
    font-family: "Raleway", serif;
    height: 65px;
}

@media (min-height: 850px) {
    .inputGris{
        height: 7.129vh !important;
        min-height: 70px;
        max-height: 130px;
    }
}

@media (min-height: 1026px) {
    .inputGris {
        height: 9.028vh !important;
    }
}

input::placeholder{
    color: #AAAAAA;
    opacity: 1;
    font-size: clamp(0.875rem, 0.8286rem + 0.1905vw, 1rem);
}


.btnLogin{
    height: 12%;
    background-color: #5858EE;
    border-radius: 10px;
    color: #FFFFFF;
    max-height: 80px;
}

/* Aplica estos estilos a todos los inputs que puedan autocompletarse */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    /* El truco principal: rellenar el fondo con box-shadow */
    -webkit-box-shadow: 0 0 0px 1000px #212E36 inset;
    box-shadow: 0 0 0px 1000px #212E36 inset;

    /* Color del texto */
    -webkit-text-fill-color: #fff;

    /* Para evitar que el color cambie tras cierto tiempo,
       se añade una transición "eterna" en background-color */
    transition: background-color 999999s ease-in-out 0s;
}


@media (max-height: 849.98px) {
    .d-max-h-flex {
        display: flex !important;
    }

    d-max-h-none{
        display: none !important;
    }
}

@media (max-height: 699.98px) {
    html, body{
        overflow-y: auto;
    }
}

@media (min-height: 850px) {
    .d-min-h-flex{
        display: flex !important;
    }
}

p span, p strong, .labelInputs{
    font-size: clamp(0.875rem, 0.7357rem + 0.5714vw, 1.25rem);
}

@media (min-width: 1442px) {
    p span, p strong, .labelInputs{
        font-size: clamp(1.25rem, 0.4464rem + 0.8929vw, 1.875rem);
    }
}

h1{
    font-size: clamp(1.5rem, 1.1286rem + 1.5238vw, 2.5rem);
}

@media (min-width: 1442px) {
    h1 {
        font-size: clamp(2.5rem, 0.8929rem + 1.7857vw, 3.75rem);
    }
}