@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,900&display=swap');

*
{
    margin:0px;
    padding:0px;
    color:#333;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
}

html,body {
    height:100%;
    overflow:hidden;
}

.clear{display:block; position:static; clear:both; float:none; width: 100%; height:0px; border:0px;}

.login-table{
    display:table;
    width: 90%;
    float:right;
}

.login-row{
    display:table-row;
    width: 100%;
}

.login-cell{
    position:relative;
    display:table-cell;
    width: 50%;
    vertical-align:middle;
}

.cell-banner
{
    text-align:center;
    background-color: #084794;
}

    .login-cell .logo{
        width: 100%;
        max-width: 130px;
        height:auto;
        position:absolute;
        top:10px;
        left:10px;
    }

    .white{display:none;}

    .login-cell .banner{
        height: 100vh;
        width: auto;
    }

    .content .titulo
    {
        font-family: 'Poppins', sans-serif;
        color:#084794; 
        font-size: 2.5em; 
        font-weight:bold; 
        text-transform:uppercase; 
        display:block; 
        text-align:center;
        margin-bottom: 33px;
        width:90%;
    }

    .content p{color: #333; font-size: 1.3em; margin:0px; padding:0px;}

    .content label{display:block; color: #333; font-size: 1em; margin-bottom: 0px;}

    .content input[type=text], .content input[type=password]
    {
        border:none;
        border-bottom:solid 1px #e6e6e6;
        padding: 5px 3px;
        width: 85%;
        margin-bottom: 22px;
    }

    .content input[type=text]:focus, .content input[type=password]:focus
    {
        border:none;
        border-bottom:solid 1px #084794;
        outline: none !important;
    }

    .content input[type=submit]
    {
        border:none;
        border-radius: 7px;
        padding: 11px 3px;
        width: 85%;
        background-color: #084794;
        display:block;
        text-align:center;
        color: #fff;
        margin: 22px 0px 44px;
        cursor:pointer;
    }

    .content input[type=submit]:hover
    {
        background-color: #0b68da;
    }

.pie{
    width:90%;
    text-align:center;
}

.pie .info{font-size: 0.8em;}

/* =============================================================================== */
/* = RESPONSIVE STYLE ============================================================ */
/* =============================================================================== */
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    html,body {
        overflow:auto;
    }

    .content .titulo
    {
        -webkit-text-stroke: 1px #fff;
    }

    .login-table{
        display:block;
        width: 100%;
        float:none;
        background-image:url(../images/top.png);
        background-repeat:no-repeat;
        background-position:top;
        background-attachment:scroll;
    }

    .login-row, .login-cell{
        display:block;
        width: 100%;
    }

    .cell-banner
    {
        text-align:center;
        background-color: #084794;
    }

        .login-cell .banner{
            width: 100%;
            height:auto;
        }

        .login-cell .logo
        {
            position:static;
            margin:0px auto;
            display:none;
            max-width: 200px;
        }

        .white{display:block !important;}

        .content .titulo{width:100%;}

        .login-cell div{width: 80%; margin:0px auto;}

        .content input[type=text], .content input[type=password], .content input[type=submit]
        {
            width: 100%;
        }

        .pie{
            width:100%;
            padding-bottom: 44px;
        }
}