@charset "UTF-8"; 
* {
    box-sizing: border-box;
}


/* ===== body ===== */ 
body {
    margin: 0;
    background-color: #00203ec8;
}
main{ 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* ===== login ===== */ 
.login{
   background-color: white;
   width: 400px;
   max-width: 90%;
   min-height: 600px;
   padding: 40px;
   border-radius: 25px;

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

   box-shadow: 0 15px 40px rgba(0,0,0,.20);
}

/* ===== Logo ===== */ 
.logo{
    display: block;
    width: 200px;
    max-width: 100%;
    height:auto;
    margin-bottom: 35px;

}


/* ===== Campos ===== */
.campo{
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 20px;

    border:1px solid #00203ec8;
    border-radius:8px;

    font-size: 16px;

}
.campo:focus{
    outline: none;
    border-color: #2192ff;
    box-shadow: 0 0 0 3px rgba(33, 146, 255, 0.20);

}
.campo-senha{
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}
.campo-senha-input{
    margin-bottom: 0;
    padding-right: 50px;
}
.icone-olho{

    width: 22px;
    height: 22px;

    fill:none;
    stroke: #8f8f95;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

}
.botao-olho{
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);

    background: none;
    border: none;
    padding: 4px;

    font-size: 18px;
    cursor: pointer;
}
.botao-olho::after {
    content: attr(data-tooltip);

    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);

    background-color: #333333;
    color: white;
    padding: 6px 9px;
    border-radius: 5px;

    font-size: 12px;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}

.botao-olho:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ===== Botão ===== */
.botao-login{
    width: 100%;
    padding: 14px;
    margin-top: 10px;

    background-color: #2192ff;
    color: white;

    border: none;
    border-radius: 8px;

    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    

}
.botao-login:hover {
    background-color: #006fd6;
}
.mensagem-login {
    width: 100%;
    min-height: 20px;
    margin: 0 0 10px;

    color: #d93025;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    text-align: center;
}
.campo-erro {
    border-color: #d93025;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.15);
}
.mensagem-login.mensagem-sucesso {
    color: #188038;
}