/* Reset de estilos para garantir uma base consistente */ 
body, h1, h2, h3, p, ul, li {
    margin: 0; /* Resetando a margem */
    padding: 10pt; /* Espaço do preenchimento */
}

h2, .errologin {
    margin: 0; /* Resetando a margem */
    padding: 0; /* Resetando o preenchimento */
    font-size: 18pt; /* Tamanho da fonte */
}

.texto-direita {
    text-align: right;
}

.texto-esquerda {
    text-align: left;
}

.texto-centro {
    text-align: center;
}

.negrito {
    font-weight: bold;
}

.azul {
    color: #001a4d;
}

.bordo {
    color: #700000;
}

.legenda {
    font-size: 10pt;
    text-align: center; /* Alinhamento do texto */
    padding: 10px; /* Espaçamento interno */
    margin-right: 50px; /* Margem direita */
    color: #3b3b3b; /* Cor do texto */
    text-decoration: none;
    align-items: center; /* Alinha verticalmente no centro */
}

body {
    font-family: Arial, sans-serif; /* Fonte padrão para o corpo */
    margin: 0; /* Resetando a margem */
    padding: 0; /* Resetando o preenchimento */
    background-color: #e8e8e8; /* Cor de fundo */
}

header {
    background-color: #ffffff; /* Cor do cabeçalho */
    color: #000000; /* Cor do texto no cabeçalho */
    text-align: left; /* Alinhamento do texto */
    padding: 10px; /* Espaçamento interno */
}

nav {
    background-color: #b4b4b4; /* Cor de fundo da barra de navegação */
    padding: 10px 20px; /* Espaçamento interno */
    text-align: left; /* Alinhamento do texto */
    margin: 0; /* Resetando a margem */
    height: 40px; /* Definindo a altura fixa */
}

nav ul {
    list-style-type: none; /* Remover marcadores de lista */
    padding: 0; /* Resetando o preenchimento */
}

nav li {
    display: inline-block; /* Exibir em linha */
}

nav a {
    display: block; /* Exibir como bloco */
    padding: 10px 20px; /* Espaçamento interno */
    text-decoration: none; /* Remover decoração de link */
    color: #222222; /* Cor do texto */
}

nav a:hover {
    color: #0036A1; /* Cor de fundo ao passar o mouse */
}

main {
    padding: 20px; /* Espaçamento interno */
    color: #5c5c5c; /* Cor do texto principal */
    text-align: center; /* Alinhamento do texto */
    display: flex; /* Usando flexbox */
    flex-direction: column; /* Direção da flexbox */
    align-items: center; /* Alinhamento dos itens */
    justify-content: center; /* Justificação do conteúdo */
    min-height: 50vh; /* Altura mínima */
}

.fundoClaro {
    background-color: #ffffff;
}

footer.fixo {
    background-color: #001a4d; /* Cor de fundo do rodapé */
    color: #ffffff; /* Cor do texto no rodapé */
    font-size: 9pt; /* Tamanho da fonte */
    text-align: center; /* Alinhamento do texto */
    padding: 10pt; /* Espaçamento interno */
    position: fixed; /* Posicionamento fixo */
    bottom: 0; /* Posicionamento na parte inferior */
    width: 100%; /* Largura total */
    height: 50px; /* Altura */
}

footer.rodape {
    background-color: #001a4d; /* Cor de fundo do rodapé */
    color: #ffffff; /* Cor do texto no rodapé */
    font-size: 9pt; /* Tamanho da fonte */
    text-align: center; /* Alinhamento do texto */
    padding: 10pt; /* Espaçamento interno */
    bottom: 0; /* Posicionamento na parte inferior */
    width: 100%; /* Largura total */
    height: 50px; /* Altura */
}

/* =================================================================== Estilos para tabelas */
/* Responsividade para tabelas */
.table-responsive {
    overflow-x: auto;
}

.whiteTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 10pt;
    color: #000000de;
    padding: 10px 50px 10px 50px;
    border-radius: 20px; /* Adiciona cantos arredondados */
    table-layout: auto; /* Permite que a largura das colunas se ajuste automaticamente */
}

.whiteTable th,
.whiteTable td {
    padding: 10px;
    border: none; /* Remove a borda */
    padding: 10px;
}

.whiteTable th {
    background-color: #f0f0f0;
}

.whiteTable th:first-child {
    border-top-left-radius: 10px; /* Arredonda apenas o canto superior esquerdo */
}

.whiteTable th:last-child {
    border-top-right-radius: 10px; /* Arredonda apenas o canto superior direito */
}

.whiteTable tr:hover {
    background-color: #cfcfcf;
}

.whiteTable tr.clicked {
    background-color: #91a1b3; /* Cor de fundo quando clicado */
}

/* Adiciona linha fina vermelha entre as linhas */
.whiteTable tr:not(:last-child) {
    border-bottom: 1px solid #b6b6b6;
}

/* Estilo para os inputs dentro da tabela */
.whiteTable input.editadados {
    width: 100%; /* Largura total do campo */
    box-sizing: border-box; /* Inclui padding e border no tamanho total do elemento */
    font-size: 10pt;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .whiteTable th, .whiteTable td {
        font-size: 8pt; /* Ajuste do tamanho da fonte para dispositivos menores */
    }

    .whiteTable input.editadados {
        font-size: 8pt; /* Ajuste do tamanho da fonte para os inputs em dispositivos menores */
    }
}

@media (max-width: 600px) {
    .whiteTable th, .whiteTable td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .whiteTable th {
        background-color: #0036A1;
        color: white;
    }
    .whiteTable td {
        border-bottom: 1px solid #ddd;
    }
    .whiteTable tr {
        display: block;
        margin-bottom: 10px;
    }
}

/* =================================================================== Estilos adicionais para o formulários */

form.dados {
    max-width: 400px; /* Largura máxima do formulário */
    margin: 0 auto; /* Centralizar horizontalmente */
    background-color: #ffffff; /* Cor de fundo */
    padding: 20px; /* Espaçamento interno */
    border-radius: 8px; /* Raio da borda */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra */
}

form.login {
    max-width: 600px; /* Largura máxima do formulário padrão */
    margin: 0 auto; /* Centralizar horizontalmente */
    background-color: #ffffff; /* Cor de fundo */
    padding: 20px; /* Espaçamento interno */
    border-radius: 8px; /* Raio da borda */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra */
}

form.login.maior {
    width: 500px; /* Largura fixa do formulário quando a classe "maior" é aplicada */
    max-width: none; /* Ignorar a largura máxima */
}

form.btnsair-form {
    align-items: center; /* Alinha verticalmente no centro */
}

form.btnsalvar {
    align-items: center; /* Alinha verticalmente no centro */
}


/* Estilos para o botão de salvar */
.form-action {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    padding-right: 20px; /* Adicionando padding para alinhar melhor */
}

.form-action .bsubmit {
    max-width: 300px;
    width: 100%; /* Permitir que a largura seja 100% até o máximo de 400px */
    background-color: #0036A1; /* Cor de fundo do botão */
    color: white; /* Cor do texto do botão */
    border: none; /* Remover borda */
    cursor: pointer; /* Cursor */
    border-radius: 4px; /* Raio da borda */
    font-size: 12pt; /* Tamanho da fonte */
    text-decoration: none; /* Remover decoração de link */
    padding: 10px 20px; /* Espaçamento interno */
}

.form-action .bsubmit:hover {
    background-color: #4d4d4d; /* Cor de fundo ao passar o mouse */
}







input, button, .bsubmit {
    width: 100%; /* Largura total */
    padding: 15px; /* Espaçamento interno */
    margin-bottom: 10px; /* Margem inferior */
    box-sizing: border-box; /* Tamanho da caixa */
    font-size: 12pt; /* Tamanho da fonte */
}

input.verdados {
    font-size: 8pt;
    width: 100%; /* Largura total */
    padding: 05px; /* Espaçamento interno */
    margin-bottom: 0px; /* Margem inferior */
    box-sizing: none; /* Tamanho da caixa */
    font-size: 10pt; /* Tamanho da fonte */
    border: none;
    text-align: center;
    display: block; /* Garante que a label é tratada como um bloco */
}

input.editadados {
    font-size: 8pt;
    width: 100%; /* Largura total */
    min-width: 100px; /* Largura mínima */
    padding: 5px; /* Espaçamento interno */
    margin-bottom: 5px; /* Margem inferior */
    box-sizing: border-box; /* Tamanho da caixa */
    font-size: 12pt; /* Tamanho da fonte */
    text-align: right;
    display: block; /* Garante que a label é tratada como um bloco */
    border: 1px solid #ccc; /* Borda */
    border-radius: 4px; /* Bordas arredondadas */
}

/* Estilo do DIV Coitainer */
.container {
    background-color: #b4b4b4; /* Cor de fundo */
    display: flex; /* Usando flexbox */
    align-items: center; /* Alinha verticalmente no centro */
    justify-content: space-between; /* Distribui os elementos igualmente ao longo do eixo principal */
    padding: 0; /* Adiciona algum espaçamento entre o cabeçalho e a barra de menu */
}

div.sis {
    background-color: #0036a18e; /* Cor de fundo */
    display: flex; /* Usando flexbox */
    align-items: center; /* Alinha verticalmente no centro */
    justify-content: space-between; /* Distribui os elementos igualmente ao longo do eixo principal */
    padding: 0; /* Adiciona algum espaçamento entre o cabeçalho e a barra de menu */
}

/* Estilo para o menu suspenso */
.menu {
    padding-left: 0px; /* Espaçamento interno */
    list-style-type: none; /* Remover marcadores de lista */
    display: flex; /* Usando flexbox */
}

.menu:hover {
    color: #0036A1; /* Cor ao passar o mouse */
}

menu a:hover {
    color: #0036A1; /* Cor ao passar o mouse */
}

.menu li {
    position: relative; /* Posição relativa */
    display: inline-block; /* Exibir em linha */
    padding: 0px; /* Espaçamento interno */
    list-style-type: none; /* Remover marcadores de lista */
    display: flex; /* Usando flexbox */
    justify-content: flex-end; /* Justificando ao final */
}

/* Estilo do Botão de enviar */
.btnpadrao, .bsubmit {
    background-color: #0036A1; /* Cor de fundo do botão */
    color: white; /* Cor do texto do botão */
    border: none; /* Remover borda */
    cursor: pointer; /* Cursor */
    border-radius: 4px; /* Raio da borda */
    font-size: 12pt; /* Tamanho da fonte */
    text-decoration: none; /* Remover decoração de link */
}

button:hover, .bsubmit:hover {
    background-color: #4d4d4d; /* Cor de fundo ao passar o mouse */
}

/* Estilo do Botão de Sair */
.btnsair-container {
    display: flex; /* Usando flexbox */
    align-items: center; /* Alinha verticalmente no centro */
    margin-right: 50px; /* Adiciona alguma margem à direita */
}

.btnsair {
    align-items: center; /* Alinha verticalmente no centro */
    background-color: #0036A1; /* Cor de fundo */
    color: white; /* Cor do texto */
    padding: 10px; /* Espaçamento interno */
    border: none; /* Remover borda */
    cursor: pointer; /* Cursor */
    border-radius: 4px; /* Raio da borda */
    font-size: 9pt; /* Tamanho da fonte */
    margin-right: 20px; /* Margem direita */
    text-decoration: none; /* Remover decoração de link */
}

.btnsair:hover {
    background-color: #4d4d4d; /* Cor de fundo ao passar o mouse */
}

.lbmunicipio {
    font-size: 8pt;
    text-align: center; /* Alinhamento do texto */
    padding: 10px; /* Espaçamento interno */
    color: #3b3b3b; /* Cor do texto */
    text-decoration: none;
    align-items: center; /* Alinha verticalmente no centro */
}

/* Estilo para os links */
a.sublink {
    display: block; /* Exibir como bloco */
    text-align: center; /* Alinhamento do texto */
    padding: 10px 0px 20px 0px; /* Espaçamento interno */
    margin-top: 10px; /* Margem superior */
    color: #0036A1; /* Cor do texto */
    text-decoration: none; /* Remover decoração */
}

a.sublink:hover {
    color: #6d6d6d; /* Cor do texto ao passar o mouse */
    text-decoration: underline; /* Sublinhado ao passar o mouse */
}

/* Estilo para o link "Município na barra NAV" */
a.linkMun {
    display: block; /* Exibir como bloco */
    text-align: center; /* Alinhamento do texto */
    padding: 10px 0px 10px 0px; /* Espaçamento interno */
    margin-right: 10px; /* Margem direita */
    color: #1b1b1b; /* Cor do texto */
    text-decoration: none; /* Remover decoração */
}

a.linkMun:hover {
    color: #0036A1; /* Cor do texto ao passar o mouse */
    text-decoration: bold; /* Sublinhado ao passar o mouse */
    text-decoration: underline;
}

.legenda {
    font-family: Arial, sans-serif; /* Fonte padrão para o corpo */
    font-size: 8pt;
    margin: 0; /* Resetando a margem */
    padding: 10px 0px 0px 0px; /* Espaçamento */
    color: #707070; /* Cor */
}

/* Estilo para o Label */
label.labelG {
    font-family: Arial, sans-serif; /* Fonte padrão para o corpo */
    font-size: 16pt;
    font-weight: bold;
    color: #001a4d;
    margin: 0; /* Resetando a margem */
    padding: 10px; /* Espaçamento */
    display: block; /* Garante que a label é tratada como um bloco */
}

label.labelM {
    font-family: Arial, sans-serif; /* Fonte padrão para o corpo */
    font-size: 12pt;
    margin: 0; /* Resetando a margem */
    padding: 10px; /* Espaçamento */
    color: #1b1b1b; /* Cor */
    display: block; /* Garante que a label é tratada como um bloco */
}

label.labelP {
    font-family: Arial, sans-serif; /* Fonte padrão para o corpo */
    font-size: 10pt;
    margin: 0; /* Resetando a margem */
    padding: 5px; /* Espaçamento */
    color: #3a3a3a; /* Cor */
    display: block; /* Garante que a label é tratada como um bloco */
}

/* Estilo para o ComboBox "combodf" */
.combodf {
    /* Tamanho e Aparência */
    width: 100%; /* Largura do ComboBox */
    height: 50px; /* Altura do ComboBox */
    padding: 15px; /* Espaço interno */
    border: 1px solid #ccc; /* Borda */
    border-radius: 4px; /* Raio da borda */
    font-size: 12pt; /* Tamanho da fonte */
    appearance: none; /* Remover o estilo padrão do navegador */
    cursor: pointer; /* Cursor para seleção */
    margin-bottom: 10px; /* Margem inferior */
    box-sizing: border-box; /* Tamanho da caixa */
    font-family: Arial, sans-serif; /* Fonte padrão para o corpo */
}

/* Opções dentro do ComboBox */
.combodf option {
    padding: 50px 20px; /* Espaço interno das opções */
    appearance: none; /* Remover o estilo padrão do navegador */
    font-family: Arial, sans-serif; /* Fonte padrão para o corpo */
    font-size: 13pt;
    color: #000000;
}

/* Opção selecionada */
.combodf option:checked {
    background-color: #e0e0e0; /* Cor de fundo da opção selecionada */
}

/* Estilizando a seta padrão da combobox */
.combodf::after {
    content: "\25BC"; /* Conteúdo: triângulo apontando para baixo */
    position: absolute; /* Posição absoluta em relação ao elemento pai */
    top: calc(50% - 5px); /* Centralizar verticalmente */
    right: 10px; /* Distância do lado direito */
    pointer-events: none; /* Permitir que cliques passem através do elemento */
}

/* =============================================  Estilos para exibição em cartões */
.card-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os cartões quebrem linha */
    justify-content: center; /* Centraliza os cartões horizontalmente */
    gap: 20px; /* Espaçamento entre os cartões */
}

.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: calc(100% - 40px); /* Ajusta a largura para caber dentro do contêiner */
    max-width: 400px;
    margin: 10px;
    display: flex;
    flex-direction: column;
}

.card-header, .card-body, .card-footer {
    padding: 15px;
}

.card-header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
}

.card-body p {
    margin: 5px 0;
}

.card-footer {
    background-color: #f9f9f9;
    border-top: 1px solid #ccc;
    text-align: right;
}

.btn-edit img {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .card {
        width: calc(100% - 20px); /* Ajusta a largura para caber em dispositivos menores */
    }
}