body.painel {
    font: 12px Arial, Georgia, "Times New Roman", Times, serif;
    color: #333; /* cor marrom escuro */
    background: #b5dfcf; /* cor verde claro de fundo do painel STYLE DO SEMENTE */
}

a:link, a:active, a:visited {
    text-decoration: none;
    color: #fbfeff; /* cor cinza da letra do menu */
}
a:hover {
    text-decoration: underline;
}

#wrapper {
    width: 100%; /* era 980 isso aqui alarga o painel */
    margin: 0 auto;
    /*
    background: #d5e3ea;
    background-image: url(imagemficha2017_verso.JPG);
    background-repeat: no-repeat;
    background: #dfe0e1;   estava ate 080818
    */
    background: #d7d7d7; /* é a cor cinza claro do fundo da região dos dados */
    /* cor das telas */
}

#wrapperFundo1 {
    width: 100%; /* era 980 isso aqui alarga o painel */
    /* height: 1200px; era 980 isso aqui alarga o painel */
    margin: 0 auto;
    /* background: #d5e3ea; */
    background-image: url(imagemficha2017_verso.JPG);
    background-repeat: no-repeat;
    /* background: #d5e3ea; */
    /* cor das telas */
}

#header {
    height: 70px;
    border-bottom: 2px solid #363636; /* cor preta */
    padding: 10px;
}
#header h1 {
    font-size: 25px;
    margin-top: 5px;
}

#wrap-content {
    display: table;
    height: auto;
    padding: 10px;
}

#content {
    float: right;
    /* width: 795px; */
    padding-left: 15px;
    flex: 1; /* ocupa o restante do espaço */
    padding-left: 15px;
      margin-left: 180px; 
}


#content h2 {
    font-size: 20px;
    border-bottom: 1px solid #fbfbfb; /* branco */
    margin-bottom: 10px;
}

#sidebar {
    float: left;
    width: 160px;
     margin-top: 5px;
       position: fixed;
  top: 0;
 
   padding-top: 60px;
}

#sidebar ul li {
    padding: 2% 5%;
    width: 90%;
    background: #8b9693;
    margin-bottom: 1px;
    font-size: 16px;
    display: block;
}

/* Conteúdo principal fica com margem à esquerda para abrir espaço para o sidebar */

#accordion ul {
    display: none;
    margin: 5px 10px;
}

#accordion ul li {
    padding: 2%;
    width: 96%;
    background: #685a55; /* marrom cor de fundo dos sub menus */
    margin-bottom: 2px;
    display: block;
    font-size: 12px;
}

#footer {
    height: 20px;
    border-top: 2px solid #999; /* cinza médio do rodapé */
    padding: 20px 10px;
    text-align: center;
}

#loginform {
    width: 600px;
    margin: 100px auto;
    /* background: #dbdcdd; */
    background: #cbeced; /* verde claro */
}

#loginform1 {
    width: 800px;
    margin: 100px auto;
    background: #dbdcdd; /* cinza bem claro */
}

fieldset {
    border: 5px solid #9c9ca0; /* era border:1px solid #74071d */
    padding: 15px 10px; /* era 20px 10px */
}

#corteIframe {
    position: absolute;
    clip: rect(40px, 424px, 750px, 55px);
    width: 424px; /* pode colocar o mesmo valor do segundo parâmetro */
}

legend {
    font-size: 16px;
    padding: 0 10px;
    background: #80c07a; /* azul claro */
}

legend1 {
    font-size: 12px;
    /* font-style: italic; */
    padding: 0 10px;
    /* ele aceitou isso aqui colocando uma letra menor */
}

form li {
    padding: 5px;
    margin-bottom: 1px;
}

form li.center {
    text-align: center;
}

form li.left {
    text-align: left;
}

form li.right {
    text-align: right;
}

form input[type=submit],
form input[type=button] {
    cursor: pointer;
    padding: 2px 10px; /* define o tamanho mínimo do botão ERA 5px 10px */
    border: 1px solid #ccc; /* cinza claro */
    margin: 0 5px;
}

form input[type=submit]:hover,
form input[type=button]:hover {
    background: #dbe606; /* amarelo quando passa por cima dá uma amarelada no comando */
    border: 1px solid #95a02c; /* amarelo queimado */
}

input.MeuInput {
    width: 120px;
    /* height: 10px; */
    /* font-family: verdana; */
    background-color: #a6cbdb; /* azul claro */
}

form label1 {
    color: #2e2bbd; /* azul forte */
    float: left;
    width: 60px;
    text-align: right;
    margin-right: 5px;
}

form label1a {
    color: #e21c05; /* vermelho */
    /* float:left; */
    width: 3px;
    text-align: left;
    margin-right: 5px;
}

form label2 {
    color: #140239; /* azul ultra forte */
    float: left;
    width: 80px;
    text-align: right;
    margin-right: 5px;
}

form label3 {
    color: #07070a; /* preto */
    float: left;
    width: 50px;
    size: 12px;
    text-align: right;
    margin-right: 5px;
}

form label.error {
    float: none;
    display: block;
    color: #f00; /* vermelho */
    width: auto;
    text-align: left;
    padding-left: 105px;
}

form input[type=text],
form input[type=password],
form textarea {
    padding: 5px;
    border: 1px solid #1faa1c; /* coloca uma borda verde claro em todos os campos text input */
}

form input[type=text]:focus,
form input[type=password]:focus,
form textarea:focus {
    background: #f8f8f8; /* quase branco */
    border: 1px solid #666; /* cinza médio */
}

.radius5 {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
}

.erro,
.sucesso,
.alerta,
.alertaVermelho,
.pergunta {
    width: 96%;
    padding: 2%;
    margin: 10px 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
}

.sucesso {
    background: #eff4d4; /* amarelo bem claro */
    border: 1px solid #8fad3d; /* verde claro */
    color: #596c26; /* verde médio */
}

.alertaVermelho {
    background: #ffea97; /* amarelo claro */
    border: 1px solid #e2b500; /* amarelo médio */
    color: #995f5b; /* marrom médio */
}

.alerta {
    background: #ea0421; /* vermelho forte (corrigido comentário) */
    border: 1px solid #040300; /* quase preto */
    color: #f1e603; /* amarelo */
}

.erro {
    background: #efcec9; /* salmão */
    border: 1px solid #ad3f30; /* vermelho */
    color: #943728; /* vermelho escuro */
}

.pergunta {
    background: #c6d8f0; /* azul claro */
    border: 1px solid #4381cc; /* azul médio */
    color: #5c58b9; /* azul escuro */
}

/* exemplo de posicionamento ver módulo pesquisas... */

#box1 {
    position: absolute;
    top: 50px;
    left: 50px;
}

#box2 {
    position: absolute;
    top: 50px;
    right: 50px;
}

#box3 {
    position: absolute;
    top: 300px;
    left: 725px;
}

#box4 {
    position: absolute;
    bottom: 350px;
    left: 150px;
}

/* 🌟 Container da Tabela */
tabela-container {
    display: block;
    max-width: 100%;  /* Faz a tabela ocupar quase toda a tela */
    margin: 20px auto;  /* Centraliza no meio da página */
    overflow-x: auto;  /* Permite rolagem horizontal se necessário */
    padding: 15px;
}

/* 🌟 Tabela */
tabela {
    display: block;
    table-layout: fixed; /* Impede o redimensionamento automático da tabela */
    width: 100%; /* A tabela ocupará 100% do seu contêiner */
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 50px rgba(0, 0, 0, 0.1);
    margin-left: auto;  /* Alinha a tabela à direita */
    margin-right: 0;
}

/* 🌟 Cabeçalho */
tabela-cabecalho {
    display: table-header-group;
    background: #007BFF;
    color: white;
    text-align: left;
    font-weight: bold;
}

/* 🌟 Células do Cabeçalho */
tabela-cabecalho > tabela-linha > tabela-celula {
    padding: 18px;
    text-transform: uppercase;
    border-bottom: 3px solid #0056b3;
}

/* 🌟 Corpo da Tabela */
tabela-corpo {
    display: table-row-group;
}

/* 🌟 Linhas da Tabela */
tabela-linha {
    display: table-row;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s ease-in-out;
}

/* Linha especial */
tabela-linha1 {
    display: table-row;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s ease-in-out;
    background-color: #87CEFA;
}

/* 🌟 Células */
tabela-celula {
    display: table-cell;
    padding: 15px;
}

/* 🌟 Alternância de Cor (Linhas Zebra) */
tabela-linha:nth-child(even) {
    background: #f9f9f9;
}

/* 🌟 Efeito Hover */
tabela-linha:hover {
    background: #eef4ff;
}

/* 🌟 Tornar Responsivo */
@media (max-width: 1024px) {
    tabela-container {
        max-width: 100%;
    }
    tabela {
        font-size: 14px;
    }
    tabela-cabecalho > tabela-linha > tabela-celula, 
    tabela-linha > tabela-celula {
        padding: 10px;
    }
}
