*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* Fundo da página */

body{

    height:100vh;

    background-image:url("../images/fundo_novo_peq.png");
    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
    justify-content:center;

}

/* overlay escuro para melhorar leitura */

.overlay{

    position:fixed;
    width:100%;
    height:100%;

    background:rgba(0,0,0,0);

    z-index:1;

}

.top-left-brand{

    position:fixed;
    top:24px;
    left:24px;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    width:170px;

}

.top-left-logo{

    width:140px;
    height:auto;

}

.top-left-brand-text{

    color:#fff;
    font-size:9px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:0;
    text-transform:uppercase;
    text-shadow:0 1px 4px rgba(0,0,0,0.45);

}

.bottom-right-logo{

    position:fixed;
    right:24px;
    bottom:-30px;
    z-index:2;

    height:210px;
    width:auto;

}

/* container centralizado */

.container{

    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

}

/* Card do login */

.login-card{

    background:white;

    width:460px;

    padding:60px 55px;

    border-radius:18px;

    box-shadow:0 30px 80px rgba(0,0,0,0.35);

}

/* Logo do sistema */

.title{

    display:flex;
    justify-content:center;
    margin-left:-55px;
    margin-right:-55px;
    margin-bottom:18px;

}

.login-system-logo{

    display:block;
    width:100%;
    max-width:465px;
    height:auto;

}

/* Barra colorida */

.color-bar{

    display:flex;
    gap:8px;

    margin:25px 0 30px 0;

}

.color-bar span{

    height:6px;
    width:40px;

    border-radius:3px;

    display:block;

}

.green{
    background:#00D000;
}

.yellow{
    background:#FFD000;
}

.blue{
    background:#183EFF;
}

/* Campos */

.input-group{

    display:flex;
    align-items:center;

    background:#f1f1f1;

    padding:18px;

    border-radius:12px;

    margin-bottom:18px;

}

.input-group i{

    color:#777;

    margin-right:12px;

}

.input-group input{

    border:none;
    background:none;

    outline:none;

    flex:1;

    font-size:15px;

}

.eye{

    cursor:pointer;

}

/* Botão login */

.btn-login{

    width:100%;

    padding:18px;

    background:#00D000;

    color:white;

    font-size:18px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    margin-top:15px;

    transition:0.2s;

}

.btn-login:hover{

    background:#00b800;

}

/* Links */

.links{

    text-align:center;

    margin-top:20px;

}

.links a{

    display:block;

    text-decoration:none;

    font-size:14px;

    margin:10px 0;

}

.links .senha{

    color:#FF0000;

}

.links .cadastro{

    color:#183EFF;

}

/* Checkbox lembrar */

.remember{

    display:flex;

    gap:6px;

    font-size:14px;

    margin-top:16px;

    color:#555;

}

@media (max-width:600px){

    .top-left-brand{
        top:16px;
        left:16px;
        width:135px;
    }

    .top-left-logo{
        width:110px;
    }

    .top-left-brand-text{
        font-size:8px;
    }

    .bottom-right-logo{
        right:16px;
        bottom:16px;
        height:96px;
    }

}

/* Responsivo */

@media(max-width:600px){

    .login-card{

        width:92%;

        padding:40px 30px;

    }

    .login-system-logo{
        max-width:385px;
    }

    .title{
        margin-left:-20px;
        margin-right:-20px;
    }

}