:root{

    --tamanhoMinimoForm: 315px;

}

#divTotal{

    display: flex;

}

#primeiraSecao{

    z-index: 998;

    width: 25vw;
    height: 100vh;
    background-color: var(--corMenuLateral);
    box-shadow: var(--sombraPadrao);

}

#segundaSecao{

    z-index: 997;

    width: 75vw;
    height: 100vh;
    
    background-image: url(../assets/imgs/clinica.jpg);
    background-size: cover;
    background-color: var(--corHeader);

}

#formLogin{

    z-index: 999;

    position: absolute;
    top: calc(50vh - calc(450px / 2));
    left: calc(25vw - calc(max(22.5vw, var(--tamanhoMinimoForm)) / 2));

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: var(--tamanhoMinimoForm);
    width: 22.5vw;
    height: 450px;

}

    #titulo-formLogin{

        position: absolute;
        top: 15%;

        font-size: 3.2rem;

    }

    #forms-formLogin{

        position: absolute;
        top: 38%;

        display: flex;
        flex-direction: column;
        gap: 10px;

        width: 75%;

    }

        .labelPadrao{

            gap: 2px;

            margin-top: 5px;

            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        
        }

            .inputPadrao-formLogin{

                display: flex;
                align-items: center;
                gap: 5px;

                border-bottom: 1px solid var(--corDetalhes);

                padding: 7px 0px;

            }

                .icone-inpuPadrao-formLogin{

                    width: 1.9rem;
                    height: auto;

                    fill: var(--corTextoMain);

                    opacity: 0.45;
                    
                    cursor: pointer;
                    
                }

                .inputPadrao-formLogin > input{

                    flex: 1;

                    border: none;

                    background-color: transparent;
                    color: var(--corTextoMain);

                    font-size: 1.5rem;
                    letter-spacing: 0.5px;

                }
                
                
                #iconeOlharSenha{

                    opacity: 0.25;

                }

            #labelLembrar-formLogin{

                display: flex;
                align-items: center;
                gap: 5px;

                margin-left: 3.5px;

                max-width: fit-content;

                font-size: 1.5rem;

                cursor: pointer;

            }

                #labelLembrar-formLogin > input{

                    position: relative;
                    top: 1px;
    
                }

            #botaoEnviar{

                margin-top: 15px;

                border: none;
                border-radius: 3px;

                padding: 7px 0 8px;

                background-color: var(--corTextoMain);
                color: var(--corDivsMain);

                font-size: 1.5rem;
                font-weight: 400;
                text-transform: uppercase;
                letter-spacing: 2px;

                cursor: pointer;
                

            }

@media (max-width: 750px){

    #divTotal{

        flex-direction: column-reverse;

    }
    

    #formLogin{

        left: calc(50vw - calc(max(22.5vw, var(--tamanhoMinimoForm)) / 2))

    }

    #primeiraSecao{

        width: 100vw;
        height: 40vh;
    
    }
    
    #segundaSecao{
    
        width: 100vw;
        height: 60vh;

    }

}

@media (max-width: 350px){
    
    :root{

        --tamanhoMinimoForm: 285px; 

    }

}