:root {
    --tam-max: 1200px; /* Azul */
    --cor-primaria: #c4faf5; /* Azul */
    --cor-secundaria: #009337; /* Cinza */
    --cor-terciaria: #E6E100; /* Cinza */
    --cor-quaternaria: #004796; /* Cinza */
    --quinta-cor: #fbffee;
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* Espaço entre os checkboxes */
    border: none;
    box-shadow: none; 
}

.checkbox-container input{
    max-width: 20px;
    margin-right: 20px;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 0px; /* Espaço entre o checkbox e o texto */
    outline: none; /* Remove a borda padrão ao focar */
}

.checkbox-container input[type="checkbox"]:focus {
    outline: none; /* Garante que não haja borda ao focar */
    box-shadow: none; /* Remove qualquer sombra ao focar */
}

label {
    font-size: 14px; /* Ajuste opcional do tamanho da fonte */
    cursor: pointer; /* Permite que o clique no texto ative o checkbox */
}

.box-secao-login{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    max-width: var(--tam-max);
    margin: 0 auto;
}

#inicio-secao-login{
    width: 100%;
    background-color: var(--quinta-cor);
    padding: 70px 0 70px 0;
}

.box-secao-login div:first-child img{
    max-width: 300px;
}

#box-area-de-login{
    max-width: 325px;
    border-radius: 10px;
    padding: 40px 20px 40px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), /* sombra principal */
    0 6px 20px rgba(0, 0, 0, 0.1); /* sombra adicional para profundidade */
    background-color: white;
}

#titulo-area-login{
    text-align: center;
    padding-bottom: 10px;
}

#titulo-area-login span{
    text-align: center;
    font-size: 24px;
}

#box-area-de-login div input{
    border: 2px solid var(--cor-secundaria);
    padding: 10px;
    width: calc(100% - 20px );
    border-radius: 5px;
    margin: 10px 0px 10px 0px;
}

#box-area-de-login div input:focus {
    border-color: var(--cor-quaternaria);
    box-shadow: 0 0 5px var(--cor-quaternaria);
    outline: none; /* Remove o outline padrão */
}

#botao-entrar-login{
    text-align: center;
}

#box-area-de-login div button{
    background-color: var(--cor-quaternaria);
    padding: 10px 30px 10px 30px;
    width: calc(100%);
    border-radius: 20px;
    margin: 10px 0px 10px 0px;
    color: white;
    text-align: center;
    border: 1px solid var(--cor-quaternaria);
    cursor: pointer;
}

#inscreva-se-span{
    color: var(--cor-quaternaria);
    cursor: pointer;
}

.senha-container {
    position: relative;
    display: flex;
    align-items: center;
}

.senha-container input {
    flex: 1;
    padding-right: 40px; /* Espaço para o ícone */
}

#toggle-senha {
    position: absolute;
    right: 10px;
    cursor: pointer;
    /* color: white; */
}

#mensagem-retorno-login{
    width: 100%;
    text-align: center;
}