:root {
    --logos-margin-right: 9.36%;
    --logo-farmanova-width: 7.85%;
    /* RELATIVE TO BODY WIDTH */
    --logo-pharmanet-width: 11.22%;
    /* RELATIVE TO BODY WIDTH */
    --logo-intermed-width: 9%;
    /* RELATIVE TO BODY WIDTH */
    --logo-margin-between: 2%;
    /* RELATIVE TO BODY WIDTH */
    --logo-grupo-farmanova-width: 26.68%;

    --left-shapes-width: 15.33%;
}

/************************************************************/
/* MIN BODY ASPECT-RATIO: */
/* 247:150 */
/************************************************************/

body {
    height: 100%;
    background: linear-gradient(180deg, var(--gradient-top) 0%, var(--gradient-bottom) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.shapes-container {
    z-index: -1;
    width: 100%;
    top: 0;
    bottom: 0;
    position: absolute;

}

.shape {
    z-index: -1;
    position: absolute;
}

.left {
    width: 15.33%;
    top: 0;
    bottom: 5%;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/elementoslogin_laterales.svg");
    background-repeat: no-repeat;
}

.upper-right {
    width: 9.61%;
    aspect-ratio: 60/19;
    right: calc(var(--logos-margin-right) / 2);
    top: calc(var(--logos-margin-right) * .8);
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/elementologin_superior.svg");
}

.logo {
    z-index: -1;
    filter: brightness(0) invert(1);
    background-repeat: no-repeat;
    background-position: center;
}

.logos {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    position: absolute;
    right: var(--logos-margin-right);
    bottom: calc(var(--logos-margin-right) / 2);
    gap: var(--logo-margin-between);
}

.logo-farmanova {
    width: var(--logo-farmanova-width);
    aspect-ratio: 60/23;
}

.logo-pharmanet {
    width: var(--logo-pharmanet-width);
    aspect-ratio: 75/8;
}

.logo-intermed {
    width: var(--logo-intermed-width);
    aspect-ratio: 300/133;
}

#center-login-art {
    height: calc(100% * (842/1206));
    aspect-ratio: 1509/842;
    top: var(--logos-margin-right);
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    margin: auto;
    margin-top: 0;
}

.fail-popup {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--dark-blue);
}

.fail-popup p{
    text-align: center;
    max-width: 80%;

}

.fail-popup>* {
    margin-bottom: 2vw;
}

#download {
    margin-bottom: .4vw;
}

#loading {
    position: fixed;
    inset: 0;
    margin: auto;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(40,40,40,.5);
}

#osSelected {
    background-color: white;
    margin-right: .4vw;
}

#osToggler {
    display: flex;
    align-items: center;
}

#osToggler::after {
    content: " ";
    display: block;
    width: .9vw;
    height: .6vw;
    background-color: var(--dark-blue);
    mask-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/flecha_selector.svg");
    -webkit-mask-image:url("https://storage.googleapis.com/farmanova-cdn/imgs/flecha_selector.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    margin-left: .2vw;
}

/* Media query for windows that does not met the min project aspect ratio */
@media (max-aspect-ratio: 247/150) {
    body {
        height: min(100vw, 100vh);
        width: auto;
        aspect-ratio: 247/150;
    }

    #center-login-art {
        margin-left: calc(var(--left-shapes-width) * .9);
    }
}

/* Media query for windows heights that are smaller than 720px*/
@media (max-height: 720px) {
    body {
        height: 720px;
        width: auto;
        margin: 0 auto;
        aspect-ratio: 247/150;
    }

    #center-login-art {
        margin-left: calc(var(--left-shapes-width) * .9);
    }
}