/* Definição da variável (global) */
:root {
    --cor-botao: #a5c5dd;
    --cor-texto: #ffffff;
    --cor-background: #e3f2fd;
}

/* ---------- CONTAINER DO MODAL (dentro do fluxo da página) ---------- */


@media (min-width: 916px) {
    html {
        width: 98vw;
        max-height: 98%;
    }

    header {
        border-color: #007bff;
        box-sizing: border-box;

    }

    main {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .quadro-padrao {
        display: flex;
        justify-content: center;
        max-height: 65dvh;
        max-width: 45dvw;
        z-index: 10;
    }

    form{
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 100%;
    }

    .card-login {
        background-color: white;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        max-width: 100%;
        min-width: 80%;
        height: 100%;
    }    

    .card-login input{
        border-radius: 20px;
        border: 1px solid #a0d3e8;
        background-color: #02d9e5a1;
        background: transparent;
        margin-bottom: 25px;
        max-width: 80%;
        min-width: 70%;
        padding: 10px;
        outline: none;
    }    

    .card-login .form-check-label {
        margin-left: 5px;
        color: #6c757d;
    }

    .buttonDiv{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        width: 80%;
        /* padding: 15px; */
    }

    .submitBtnLogin {
        background-color: #002b5c;
        color: white;
        padding: 12px;
        border-radius: 25px;
        border: none;
        width: 12dvw;
        margin-top: 20px;        
    }

    .submitBtnLogin:hover {
        --square: 12px;
        --c1: #0f7ce964;
        --c2: #69a7eab3;
        color: #26272a;
        box-shadow: 0 0 0 2px rgba(15, 124, 233, .15) inset;
        background-color: #02d9e5a1;
        border-color: #26272a;
    }

    .logo-bottom {
        position: fixed;
        top: 15%;
        left: 15%;
        transform: translateX(-50%);
        max-width: 400px;
        z-index: 10;
    }
}

/* ---------- Landscape ---------- */
@media (min-width: 421px) and (max-width: 915px) {
    body {
        display: flex;
        width: 98vw;
        max-height: 98%;
        min-height: 58%;
    }

    header {
        border-color: #007bff;
        box-sizing: border-box;
        max-height: 100%;
    }

    main {
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 100%;
        min-width: 75%;
    }

    .quadro-padrao {
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 100%;
        min-height: 75%;
        max-width: 75%;
        min-width: 55%;
        z-index: 10;
        box-sizing: border-box;
    }

    form{
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 100%;
    }

    .card-login {
        background-color: white;
        border-radius: 20px;
        padding: 15px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        max-width: 100%;
        min-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }    

    .card-login input{
        border-radius: 20px;
        border: 1px solid #a0d3e8;
        background-color: #02d9e5a1;
        background: transparent;
        margin-bottom: 25px;
        max-width: 80%;
        min-width: 70%;
        padding: 10px;
        outline: none;
    }    

    .card-login .form-check-label {
        margin-left: 5px;
        color: #6c757d;
    }

    .buttonDiv{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        width: 80%;
        /* padding: 15px; */
    }

    .submitBtnLogin {
        background-color: #002b5c;
        color: white;
        padding: 12px;
        border-radius: 25px;
        border: none;
        width: 12dvw;
        margin-top: 20px;        
    }

    .submitBtnLogin:hover {
        --square: 12px;
        --c1: #0f7ce964;
        --c2: #69a7eab3;
        color: #26272a;
        box-shadow: 0 0 0 2px rgba(15, 124, 233, .15) inset;
        background-color: #02d9e5a1;
        border-color: #26272a;
    }

    .logo-bottom {
        top: 75%;
        left: 5%;
        transform: translateX(-25%);
        max-width: 250px;
        z-index: 10;
    }
}

/* ---------- Portrait ---------- */
@media (max-width: 420px) {
    body {
        display: flex;

        width: 98vw;
        max-height: 98%;
    }

    header {
        border-color: #007bff;
        box-sizing: border-box;
        max-height: 5%;
    }

    main {
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 100%;
        min-width: 75%;
    }

    .quadro-padrao {
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 85%;
        min-height: 75%;
        max-width: 85%;
        min-width: 55%;
        z-index: 10;
    }

    form{
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 100%;
    }

    .card-login {
        background-color: white;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        max-width: 100%;
        min-width: 80%;
        height: 100%;
    }    

    .card-login input{
        border-radius: 20px;
        border: 1px solid #a0d3e8;
        background-color: #02d9e5a1;
        background: transparent;
        margin-bottom: 25px;
        max-width: 80%;
        min-width: 70%;
        padding: 10px;
        outline: none;
    }    

    .card-login .form-check-label {
        margin-left: 5px;
        color: #6c757d;
    }

    .buttonDiv{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        width: 80%;
        /* padding: 15px; */
    }

    .submitBtnLogin {
        background-color: #002b5c;
        color: white;
        padding: 12px;
        border-radius: 25px;
        border: none;
        width: 22dvw;
        margin-top: 20px;        
    }

    .submitBtnLogin:hover {
        --square: 12px;
        --c1: #0f7ce964;
        --c2: #69a7eab3;
        color: #26272a;
        box-shadow: 0 0 0 2px rgba(15, 124, 233, .15) inset;
        background-color: #02d9e5a1;
        border-color: #26272a;
    }

    .logo-bottom {
        top: 75%;
        left: 15%;
        transform: translateX(-25%);
        max-width: 250px;
        z-index: 10;
    }
}