.modal-dialog.custom-modal {
    max-width: 90%;  
    width: 90%;     
}

@media (min-width: 768px) {
    .modal-dialog.custom-modal {
        max-width: 80%;  
    }
}

@media (min-width: 1200px) {
    .modal-dialog.custom-modal {
        max-width: 70%;  
    }
}

table td {
    white-space: nowrap;
}

.resultado-secao {
    display: block;
    border-radius: 20px;
}

.resultado-secao.d-none {
    display: none;
}

.resultado-secao {
    display: block;
    margin-bottom: 20px; /* Adiciona espaçamento entre as seções */
    border-radius: 20px;
}

.resultado-secao h5 {
    margin-bottom: 15px; /* Espaçamento abaixo do título */
}

.bg-amarelo-claro {
    background-color: #fff3cd; /* Um tom de amarelo claro */
    border-color: #ffeeba; /* Cor da borda para combinar */
}

/* Estiliza o modal */
.modal-content {
    border-radius: 20px; /* Arredonda as bordas do modal */
}

/* Estiliza os botões */
.btn {
    border-radius: 12px; /* Arredonda os botões */
    transition: all 0.3s ease-in-out; /* Suaviza a mudança de estado */
}

/* Quando um botão é clicado, ele fica mais escuro para dar um efeito visual */
.btn:active {
    transform: scale(0.98); /* Dá um efeito de clique */
}

/* Estiliza os botões de seleção de pagamento */
.btn-meio {
    border-radius: 12px; /* Arredonda os botões de meio de pagamento */
    padding: 10px;
    font-weight: bold;
}

/* Deixa o campo de entrada arredondado */
.form-control {
    border-radius: 12px;
}