:root {
    --form-login--bkg: linear-gradient(135deg, #fff, #f2f2f4 25%, #f2f2f4 75%, #fff);
    --form-login--gap: 30px;
    --form-login--padding: 50px;
    --form-login--size: 720px;
    --form-login--form--size--max: 400px;
    --form-login--input--height: 48px;
    --form-login--logo--size: 72px;
    --form-login--logo--text--size: 18px;
    --form-login--frase--size: 50px;
}

/*-------------------------------------*/
/*-------------------------------------*/
form [name],
form [type="submit"] {
    min-height: var(--form-login--input--height);
}

form [type="submit"] {
    font-size: 18px;
    font-weight: 700;
}

#mainLogin {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 1.6rem;
    font-weight: 400;
    display: flex;
    flex-direction: row-reverse;
}

/*-------------------------------------*/
/*-------------------------------------*/
#formLogin {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    background: var(--form-login--bkg);
    width: var(--form-login--size);
}

#formLoginBody {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--form-login--padding);
}

#formLoginBody form {
    width: 100%;
    max-width: var(--form-login--form--size--max);
    display: grid;
    gap: var(--form-login--gap);
}

/*-------------------------------------*/
#formLoginFooter {
    position: relative;
    z-index: 2;
    padding: 20px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#formLoginFooter a {
    text-decoration: none;
    transition: color .3s;
    color: var(--color-labels);
}
#formLoginFooter a:hover {
    color: var(--color);
}

#formLoginFooter i {
    width: auto;
    height: auto;
    font-size: 20px;
}

#formLoginFooter span {
    width: 1px;
    height: 20px;
    background-color: var(--color);
}

/*-------------------------------------*/
/*-------------------------------------*/
#headerFormLogin {
    display: flex;
    align-items: center;
    gap: 15px;
}

#logoFormLogin {
    width: var(--form-login--logo--size);
    min-width: var(--form-login--logo--size);
}
#logoFormLogin img {
    width: 100%;
    max-height: 100%;
}

#textFormLogin {
    font-size: var(--form-login--logo--text--size);
    font-weight: 600;
    line-height: 140%;
    display: grid;
    gap: 4px;
}

#textFormLogin span {
    font-size: 1.8em;
    font-weight: 800;
    line-height: 110%;
}

/*-------------------------------------*/
#footerFormLogin {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#footerFormLogin > div {
    flex: 1;
    display: flex;
    justify-content: center;
}

/*-------------------------------------*/
#btnSubmitLogin {
    width: 100%;
    position: relative;
}

/*-------------------------------------*/
#recuperarSenhaLogin {
    font-weight: 500 !important;
}

/*-------------------------------------*/
/*-------------------------------------*/
#asideLogin {
    flex: 1;
    position: relative;
    background-color: var(--color);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#asideLogin:not([data-nao-exibir-pelicula-laranja]):before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background-color: rgba(255,136,0,.5);
}

/*-------------------------------------*/
#fraseMotivacional {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 10rem;
    font-size: var(--form-login--frase--size);
    font-weight: 900;
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 35%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.frase {    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 860px;
    gap: 20px;
    
    animation: showFrase 1.6s ease forwards;
}

@keyframes showFrase {
    from {
        opacity: 0;
        translate: 0 -30%;
    }

    to {
        opacity: 1;
        translate: none;
    }
}

.oldFrase {
    animation: removeFrase .4s ease-in forwards;
}

@keyframes removeFrase {
    to {
        opacity: 0;
        translate: 0 30%;
    }

    from {
        opacity: 1;
        translate: none;
    }
}


.frase i {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    font-size: 1.5em;
    display: block;
}
.frase span {
    line-height: 110%;
}

/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

@media (max-width: 2020px) {
    :root {
        --form-login--size: 640px;
    }
}


@media (max-width: 1640px) {
    :root {
        --form-login--size: 540px;
        --form-login--frase--size: 45px;
    }
}

@media (max-width: 1280px) {
    :root {
        --form-login--size: 480px;
        --form-login--frase--size: 40px;
    }
}

@media (max-width: 1080px) {
    :root {
        --form-login--size: 420px;
        --form-login--padding: 40px;
        
    }
}


@media (max-width: 980px) {
    :root {
        --form-login--size: 380px;
        --form-login--padding: 30px;
        --form-login--input--height: 44px;
        --form-login--frase--size: 35px;
    }
}

@media (max-width: 724px) {
    :root {
        --form-login--size: 100%;
        --form-login--padding: 0 25px;
        --form-login--gap: 15px;
        --form-login--logo--size: 64px;
        --form-login--logo--text--size: 16px;
        --form-login--form--size--max: 100%;
    }

    #formLogin {
        background: linear-gradient(180deg, var(--color) 30%, var(--color-hover), var(--color) 70%);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #formLoginBody form {
        background: var(--form-login--bkg);
        border-radius: 20px;
        padding: 40px 25px 15px 25px;
    }

    #formLoginFooter a {
        color: #fff;
    }

    #asideLogin {
        display: none;
    }
}