@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{font-family: roboto;}

body {
    background-color: #5f6682;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Roboto", sans-serif;
    line-height: 1.5;
    height: 100vh;
    background: #5F6682;
    margin: 0;
}

.container-left, .container {
    flex-basis: 50%;
    box-sizing: border-box;
}

.container-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.left_log_image {
    max-width: 60%; 
    height: auto;
    margin-bottom: 40px; 
}

.watermark h1, .watermark h2, .watermark h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0; 
    letter-spacing: 1px; 
    font-size: 16px; 
    color: #ffffff73;
    font-weight: 200;
}


.container {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 5vh 3vw;
    margin-right: 60px;    
    text-align: center;
}

.my-form input {
    display: block;
    margin-bottom: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 2vh; 
    border-radius: 5px;
    background: #D9D9D9;
    border: 1px solid #ccc;
}

.my-form label {
    display: block;
    width: 100%;
    text-align: left;
    color: #555;
    font-size: 14px;
    padding: 0.5vh;
}

.entrar {
    padding: 15px;
    border-radius: 10px;
    margin-top: 50px; 
    margin-bottom: 40px;
    border: none;
    color: white;
    cursor: pointer;
    background-color: #5875AE;
    width: 60%;
    font-size: 16px; 
}

.entrar:hover {
    background-color: #314d80;
}

h2 {
    box-sizing: border-box;
    letter-spacing: 1px;
    font-size: 45px; 
    padding: 10px;
    color: #5f6682;
    font-weight: 800;
}


input[type="checkbox"] {
    display: none; 
    margin-right: 0px; 
}


p:has(input[type="checkbox"]) {
    display: none;
    align-items: center; 
    margin-right: 20px;
}

.password-container {
    position: relative;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    width: 100%;
    padding-right: 40px;
    height: 45px; 
    box-sizing: border-box;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%); 
    background: none;
    border: none;
    cursor: pointer;
    font-size: 100%;
    color: #555;
}

.toggle-password:focus {
    outline: none;
}


@media (max-width: 1024px) {
    .container-left, .container {
        flex-basis: 100%; 
        padding: 20px;
    }

    .container {
        margin-right: 0; 
        max-width: 600px; 
    }
    
    h2 {
        font-size: 36px; 
    }
    
}


@media (max-width: 768px) {
    body {
        flex-direction: column; 
        height: auto; 
    }

    .container-left {
        margin-bottom: 20px;
    }

    .left_log_image {
        max-width: 80%;
    }

    .container {
        width: 100%; 
        margin: 0; 
        max-width: 90%;
    }

    .watermark h1, .watermark h2, .watermark h3 {
        display: none;
    }

    h2 {
        font-size: 28px; 
    }

    .my-form input, .my-form button {
        font-size: 12px; 
    }

    .enviar {
        width: 80%; 
    }

}