html, body {
    margin: 0;
    padding: 0;
    height: 100%;  /*Garante que o fundo ocupe toda a altura */
    overscroll-behavior-y: contain; /* Impede o comportamento de pull-to-refresh */
    overflow: auto !important; 
}

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    background-color: skyblue;
    height: 100%;
}

custom-scroll {
    
}

.container {
    display: flex;
    flex: 1;
    flex-direction: row;
    width: 100%
}

.left-panel, .right-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 30px;
}

.left-panel {
    text-align: center;
    background-color: green;
    background-attachment: scroll; /* Alternativo ao fixed, especialmente em dispositivos móveis */
}

.left-panel h1 {
 
    color: #ffffff; /* Texto branco */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    display: inline-block; /* Evita que o fundo ocupe 100% da largura */
    font-size: 24px; /* Tamanho da fonte */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    margin-bottom: 20px; /* Espaçamento abaixo */

}

.right-panel {
    flex: 1;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

.login-box {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 350px;
    text-align: left;
}

.login-box img {
    max-width: 380px;
    margin-bottom: 7px;
}

.login-box h2 {
    font-size: 18px;
    margin-bottom: 7px;
    color: #333;
}

.login-box a {
    display: block;
    margin-top: 25px;
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
    text-align: left;
}





/* Responsividade */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .left-panel {
        order: 2;
    }

    .right-panel {
        order: 1;
        padding: 20px;
    }
}


@media (max-width: 768px) {
    .ui-fileupload .ui-button.ui-fileupload-choose {
        display: inline-flex !important; /* Garante que o botão escolha fique visível */
        justify-content: center;
        align-items: center;
    }

    .ui-fileupload label {
        display: inline !important; /* Força a exibição do label */
    }
}