:root {

    --azul:
        #0d425e;

    --azul-escuro:
        #05344c;

    --azul-claro:
        #edf5f8;

    --texto:
        #27323c;

    --cinza:
        #74808a;

    --fundo:
        #f4f6f8;

}


/*
|--------------------------------------------------------------------------
| BASE
|--------------------------------------------------------------------------
*/

* {

    box-sizing:
        border-box;

}


html,
body {

    margin:
        0;

    min-height:
        100%;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:
        var(--texto);

}


/*
|--------------------------------------------------------------------------
| LOGIN
|--------------------------------------------------------------------------
*/

.login-body {

    min-height:
        100vh;

    background:
        linear-gradient(
            150deg,
            var(--azul-escuro),
            var(--azul)
        );

}


.login-page {

    min-height:
        100vh;

    padding:
        35px 20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    overflow:
        hidden;

}


.login-page::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    top:
        -200px;

    right:
        -180px;

}


.login-brand {

    text-align:
        center;

    color:
        #fff;

    margin-bottom:
        28px;

    position:
        relative;

    z-index:
        2;

}


.login-logo {

    max-width:
        110px;

    max-height:
        80px;

    object-fit:
        contain;

    margin-bottom:
        12px;

}


.login-brand-name {

    font-size:
        1.5rem;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.login-brand-subtitle {

    font-size:
        .86rem;

    color:
        rgba(
            255,
            255,
            255,
            .68
        );

    margin-top:
        3px;

}


/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.login-card {

    background:
        #fff;

    width:
        100%;

    max-width:
        420px;

    padding:
        32px;

    border-radius:
        22px;

    box-shadow:
        0 18px 50px
        rgba(
            0,
            0,
            0,
            .18
        );

    position:
        relative;

    z-index:
        2;

}


.login-icon {

    width:
        54px;

    height:
        54px;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--azul-claro);

    color:
        var(--azul);

    font-size:
        1.45rem;

    margin-bottom:
        20px;

}


.login-card h1 {

    font-size:
        1.55rem;

    font-weight:
        800;

    margin-bottom:
        6px;

}


.login-text {

    color:
        var(--cinza);

    font-size:
        .9rem;

    line-height:
        1.55;

    margin-bottom:
        25px;

}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.form-label {

    font-size:
        .8rem;

    font-weight:
        700;

    color:
        #56616b;

}


.input-group-text {

    background:
        #f6f8f9;

    border-color:
        #dfe4e7;

    color:
        var(--azul);

}


.form-control {

    min-height:
        47px;

    border-color:
        #dfe4e7;

}


.form-control:focus {

    border-color:
        var(--azul);

    box-shadow:
        0 0 0 .18rem
        rgba(
            13,
            66,
            94,
            .10
        );

}


.btn-app {

    min-height:
        48px;

    border:
        0;

    border-radius:
        10px;

    background:
        var(--azul);

    color:
        #fff;

    font-weight:
        700;

}


.btn-app:hover {

    background:
        var(--azul-escuro);

    color:
        #fff;

}


/*
|--------------------------------------------------------------------------
| AJUDA
|--------------------------------------------------------------------------
*/

.login-help {

    margin-top:
        24px;

    padding-top:
        20px;

    border-top:
        1px solid #edf0f2;

    text-align:
        center;

    color:
        #87919a;

    font-size:
        .76rem;

}


.login-footer {

    position:
        relative;

    z-index:
        2;

    margin-top:
        25px;

    color:
        rgba(
            255,
            255,
            255,
            .50
        );

    font-size:
        .75rem;

}


@media(max-width:480px) {

    .login-card {

        padding:
            25px 20px;

        border-radius:
            18px;

    }

}