/*
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #333;
    color: #eee;
}
*/
html, body {
    background-color: #333;
    color: #eee;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

.body-index {
    background-color: #333; /* Fundo escuro */
    color: #eee; /* Cor clara para o texto padrão */
}

.login-container {
    width: 90%;
    max-width: 400px;
    padding: 32px;
    border-radius: 8px;
    background-color: #000000; /* Container um pouco mais claro que o fundo */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra mais visível no escuro */
    text-align: center;
}

.login-logo {
    max-width: 100%; /* Defina a largura máxima da sua logo */
    height: auto;
    margin-bottom: 16px; /* Espaço entre a logo e o título */
}

.login-title {
    text-align: center;
    margin-bottom: 24px;
    color: yellow; /* Cor primária do Materialize */
}

.input-field label {
    color: gray; /* Cor do texto do label */
}

.input-field input {
    color: white; /* Cor clara para o texto digitado */
}

.input-field input:focus + label {
    color: white  !important; /* Cor primária do label quando focado */
}

.input-field input:focus {
    border-bottom: 1px solid white !important; /* Cor primária da linha inferior quando focado */
    box-shadow: 0 1px 0 0 white !important;
}

.remember-me {
    margin-top: 16px;
    margin-bottom: 24px;
}

.remember-me label span {
    color: white; /* Cor clara para o texto "Lembrar-me" */
}

.login-button {
    width: 100%;
    background-color: yellow; /* Cor primária do botão */
    color: black;
    font-weight: bold;
}

.login-button:hover {
    background-color: rgb(209, 209, 42); /* Cor mais clara no hover */
}

.forgot-password {
    text-align: center;
    margin-top: 16px;
}

.forgot-password a {
    color: white;
}

.helper-text.red-text {
    color: #ff4d4d !important;
}

.card-panel.green.lighten-4 {
    background-color: #e6ee9c !important; /* Um verde claro do Materialize */
    color: #33691e !important; /* Texto verde escuro */
}

.login-page-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    min-height: 100vh; /* Faz com que o contêiner ocupe a altura total da viewport */
    padding: 20px; /* Adiciona um padding interno para não colar nas bordas */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

/* Reduza o padding do card ou container em telas pequenas */
@media screen and (max-width: 600px) { /* Breakpoint 'small' do Materialize */
    .login-page-wrapper {
        padding: 10px; /* Reduz padding para telas muito pequenas */
    }
    .card {
        margin-top: 20px; /* Reduza ou remova o margin-top padrão do card se for muito grande */
        margin-bottom: 20px;
    }
    .card .card-content {
        padding: 15px; /* Reduza o padding interno do card */
    }
}

/* Para telas médias, se ainda houver problema */
@media screen and (max-width: 992px) and (min-width: 601px) { /* Breakpoint 'medium' do Materialize */
    .card {
        margin-top: 40px; /* Talvez um pouco mais de margem que em telas pequenas */
    }
}