body {
    font-family: Arial, sans-serif;
    background: url('res/backgroud.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Forçar o viewport e evitar overflow horizontal */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#logo {
    text-align: center;
    height: 120px; 
    width: auto; 
    display: block; 
    margin: 0 auto 20px auto;
}

#copyright {
    text-align: center;
    margin-top: 2px 0;
    font-size: 12px;
    color: gray;
    font-weight: bold;
}

h2 {
    text-align: center;
}

/* Media query para telas maiores (tablets e desktops) */

    input[type="text"], input[type="password"] {
        min-width: 300px;
        overflow: hidden;
        background-color: #ffffffff; 
        color: rgb(0, 0, 0); 
        padding: 5px; 
        margin: 8px auto;
        border: #93def5 solid 1px;
        border-radius: 5px;
    }

    input[type="submit"] {
        min-width: 300px;
        text-align: center;
        background-color: #93def5; 
        color: rgb(255, 255, 255); 
        padding: 5px;
        margin: 8px auto; 
        border: #93def5 solid 1px; 
        border-radius: 5px; 
        cursor: pointer;

    }

    /* Estilo Específico para o Chrome */
    body.chrome {
        input[type="text"],
        input[type="password"] {
            min-width: 500px;
            width: auto; 
            overflow: hidden;
            background-color: #ffffffff; 
            color: rgb(0, 0, 0); 
            padding: 5px; 
            margin: 8px auto;
            border: #93def5 solid 1px;
            border-radius: 5px;
        }

        input[type="submit"] {
            min-width: 500px;
            width: auto; 
            text-align: center;
            background-color: #93def5; 
            color: rgb(255, 255, 255); 
            padding: 5px;
            margin: 8px auto; 
            border: #93def5 solid 1px; 
            border-radius: 5px; 
            cursor: pointer; 
        }
    }

/* Media query para telas menores (mobile) */
@media (min-width: 640px) {

    /* Estilo Específico para o Chrome */
    body.chrome {
        input[type="text"], 
        input[type="password"] {
            min-width: 300px;
            width: 90%; 
            overflow: hidden;
            background-color: #ffffffff; 
            color: rgb(0, 0, 0); 
            padding: 5px; 
            margin: 8px auto;
            border: #93def5 solid 1px;
            border-radius: 5px;
        }

        input[type="submit"] {
                min-width: 300px;
                width: 90%; 
                text-align: center;
                background-color: #93def5; 
                color: rgb(255, 255, 255); 
                padding: 5px;
                margin: 8px auto; 
                border: #93def5 solid 1px; 
                border-radius: 5px; 
                cursor: pointer; 
            }
    }

    input[type="text"],
    input[type="password"]{
        /* min-width: 90%;  */
        min-width: auto; 
        width: 90%; 
        overflow: hidden;
        background-color: #ffffffff; 
        color: rgb(0, 0, 0); 
        padding: 5px; 
        margin: 8px auto;
        border: #93def5 solid 1px;
        border-radius: 5px;
    }

    input[type="submit"]{
        min-width: auto; 
        /* min-width: 90%;   */
        width: 90%; 
        text-align: center;
        background-color: #93def5; 
        color: rgb(255, 255, 255); 
        padding: 5px;
        margin: 8px auto; 
        border: #93def5 solid 1px; 
        border-radius: 5px; 
        cursor: pointer;  
    }

/* --- Estilos para o Alerta (Popper) --- */


}

/* --- Estilos para o Alerta (Popper) --- */
/* #alerta-msg { */
    /* position: fixed; */
    /* height: 7vw; 
    width: 50%; 
    /* max-width: 600px;  */
    /* min-width: 400px; 
    left: 50%;  */
    /* top: 5%;
    transform: translate(-50%, -200px); /* usado como estado inicial (animado para 0) */
    /* padding: 15px 20px;
    border-radius: 8px;
    color: white;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;  */
/* } */

/*Efeitos para o Popper*/
.fade-in {
  animation: fadeIn 1s ease-in-out forwards;
}

.fade-out {
  animation: fadeOut 1s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -200px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -200px);
    }
}

/*Estilos para o Popper*/
.alerta-msg p {
    margin: 0;
}

.alerta-msg  p:first-child {
    font-weight: bold;
}

.sucesso-msg, .info-msg, .aviso-msg, .erro-msg {
    transform: translateX(0);
    opacity: 1;
}

.fecha-msg {
    display: none;
}

.sucesso-msg { background-color: #4CAF50; }
.info-msg { background-color: #2196F3; }
.aviso-msg { background-color: #ff9800; }
.erro-msg {background-color: #f44336; }