/* Estilos para o modal */
.modal {
    display: none; /* Inicialmente invisível */
    position: fixed;
    z-index: 100; /* Fica por cima de outros elementos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo semi-transparente */
    overflow: auto; /* Permite rolagem caso o conteúdo seja maior que a tela */
}

.modal-content {
    background-color: white;
    margin: 12% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Tamanho médio */
    max-width: 900px; /* Largura máxima */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 70%; /* Limita a altura do modal */
    overflow-y: auto; /* Permite rolar o conteúdo caso seja maior que a altura do modal */
    position: relative;
}

/* Barra de título do modal */
.modal-header {
    display: flex;
    justify-content: space-between; /* Alinha título à esquerda e botão à direita */
    align-items: center; /* Alinha verticalmente o título e o botão */
    background-color: #EBF3E7; /* Fundo cinza para a barra */
    padding: 10px 20px;
    border-radius: 8px 8px 0 0; /* Cantos arredondados no topo */
    border-bottom: 1px solid #ddd; /* Linha separando a barra do conteúdo */
    margin-bottom: 4px;
}

/* Estilo para o título */
.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

/*.close-btn {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    z-index: 2;
    display: flex;  Flexbox para centralizar o ícone verticalmente 
    align-items: center;  Centraliza o ícone verticalmente 
}*/

.close-btn {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: flex; /* Flexbox para centralizar o ícone verticalmente */
    align-items: center; /* Centraliza o ícone verticalmente */
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Responsividade */
@media (max-width: 768px) {
    .modal-content {
        width: 90%; /* Modal ocupa 90% da largura em telas pequenas */
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 95%; /* Modal ocupa 95% da largura em dispositivos muito pequenos */
    }
}