/* ALTERANDO ESTRUTURA */

/* GERAIS */

:root {
    --blue-main: #365167; /* Azul mais suave */
    --green-dark: #65A37A; /* Verde suave */
    --gray-light: #F5F5F5; /* Cinza claro */
    --gray-dark: #333333; /* Cinza escuro */
    --white: #FFFFFF; /* Branco */

    --blue-light: #eef2f5;
}

body{
    font-family: 'Roboto', sans-serif;
    background-color: var(--blue-light); /* Fundo mais suave para contraste com cards brancos */
    color: var(--gray-dark);
    overflow-x: hidden;
}

.container{
    padding: 70px 0;
}

p, li{
    color: #444;
    font-size: 14px;
}

/* BARRA DE NAVEGAÇÃO */

header, .navbar{
    background-color: var(--gray-dark);
}

.dropdown-menu {
    background-color: rgba(54, 81, 103, 0.9) !important; /* Define o fundo do dropdown */
    border: none; /* Remove as bordas, se desejar */
}

.dropdown-item {
    color: var(--white) !important; /* Define a cor do texto */
    font-size: 15px;
    font-weight: 500; 
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--blue-main) !important; /* Fundo ao passar o mouse */
    color: var(--green-dark) !important; /* Mantém o texto branco */
}


#nav-container{
    padding-top: 0;
    padding-bottom: 0;
}

.logo-circle {
    width: 60px; /* Largura do círculo */
    height: 60px; /* Altura do círculo (igual à largura para ser um círculo perfeito) */
    border-radius: 50%; /* Transforma o contêiner em um círculo */
    background-color: #365167; /* Cor do fundo do círculo (seu blue-dark) */
    display: flex; /* Usar flexbox para centralizar a imagem dentro do círculo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    overflow: hidden; /* Garante que a imagem não vaze do círculo se for maior */
}

#logo {
    max-width: 100%; /* Ajusta o tamanho da imagem para caber dentro do círculo */
    max-height: 100%;
    height: auto; /* Mantém a proporção da imagem */
    display: block; /* Remove o espaço extra abaixo da imagem */
}

.navbar-brand{
    padding: 0;
    color: #FFF;
}

.navbar-brand:hover{
    color: #FFF;
}

#navbar-links a{
    color: #fff;
    cursor: pointer;
}

#navbar-links a:hover{
    color: #65A37A;
}

.navbar-expand-lg .navbar-nav .nav-link{
    padding: 1rem .8rem;
}

#logout-btn {
    background-color: var(--blue-main);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    margin-top: 8px;
}

#logout-btn:hover {
    background-color: #365167;
    color: var(--green-dark)
}

/* GERAR TABELAS */

.gerar-tabelas{
    margin-top: -30px;
    margin-bottom: 70px;
}

.gerar-tabelas img{
    width: 100%;
    height: 65vh;
}

#gerar-total{
    padding-top: 30px;
    background-color: white;
}

.titulo-gerar{
   display: inline;
   margin-left: 40%;
   padding-bottom: 10px;
}

.titulo-gerar h2{
    text-align: center;
}

.gerar-tabelas h2{
    text-align: center;
    display: inline;
    border-bottom: 3px solid #444;
    padding-bottom: 5px;
}

.gerar-tabelas a{
    text-decoration: none;
    color: white;
}

.gerar-tabelas p{
    font-size: 20px;
    text-align: justify;
    margin-top: 45px;
}

.gerar-conteudo{
    margin-top: 20px;
}

.gerar-tabelas button{
    margin-top: 45px;
    border-radius: 0;
    margin-right: 10px;
}

.gerar-botao{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ARQUIVOS */

.conteudo-arquivo{
    margin-top: 80px;
}

.gerar-botao a{
    text-decoration: none; 
    color: white; 
    margin-right: 5px; 
    margin-top: 20px;
}

.gerar-texto{
    margin-top: 20px;
    border: 1px solid  #343C40;
    border-radius: 5px;
    margin-left: -15px;
}

#img-arquivos{
    width: 100%;
    height: auto;
}

.gerar-texto button{
    text-decoration: none;
}

/* PARTE DAS DEFS */

#titulo-defs{
    margin-top: -50px;
    margin-bottom: 40px;
}

#titulo-defs h2{
    display: inline;
    border-bottom: 3px solid black;
}

#borda-def{
    border: 1px solid black;
    padding: 10px;
    margin: 10px 10px;
    border-radius: 10px;
    background-color: #f4f4f4;
    box-shadow: 1px 1px 2px black;
}

#borda-def::after{
    margin-top: 10px;
}

/* CONTACT */

#copy-area{
    text-align: center;
    margin-top: auto;
    padding-bottom: 10px;
}

#copy-area .container{
    padding: 5px;
}

/* ESTILIZACAO CABECALHO TABELA */

#tabela-listar {
    width: 100%;
    border-collapse: collapse;
}

#tabela-listar thead {
    position: sticky; /* Fixar o cabeçalho */
    top: 0; /* Ficar fixo no topo do contêiner */
    z-index: 2; /* Garantir que o cabeçalho fique acima do conteúdo da tabela */
}

#tabela-listar thead th {
    text-align: center; /* Alinhamento do texto no cabeçalho */
    background-color: #3E5C75;
    color: #FFF;
    padding: 8px; /* Espaçamento dentro das células do cabeçalho */
}

#tabela-listar tbody {
    text-align: center; /* Alinhamento do texto no corpo da tabela */
}

#tabela-listar th, #tabela-listar td {
    border: 1px solid #ddd; /* Borda das células */
    padding: 8px; /* Espaçamento nas células */
}

/* TABELA SOMA */

#tabela-soma {
    width: 100%;
    border-collapse: collapse;
}

#tabela-soma thead {
    position: sticky; /* Fixar o cabeçalho */
    top: 0; /* Ficar fixo no topo do contêiner */
    z-index: 2; /* Garantir que o cabeçalho fique acima do conteúdo da tabela */
}

#tabela-soma thead th {
    text-align: center; /* Alinhamento do texto no cabeçalho */
    background-color: #3E5C75;
    color: #FFF;
    padding: 8px; /* Espaçamento dentro das células do cabeçalho */
}

#tabela-soma tbody {
    text-align: center; /* Alinhamento do texto no corpo da tabela */
}

#tabela-soma th, #tabela-soma td {
    border: 1px solid #ddd; /* Borda das células */
    padding: 8px; /* Espaçamento nas células */
}

/* PAGINACAO E BOTOES */

#pular-paginas a {
    background-color: #3E5C75;
    border-radius: 5px;
    text-decoration: none;
}

#pular-paginas a:hover {
    background-color: #2A2F33;
}

.pagination {
    --bs-pagination-color: white;
}

.table-wrapper {
    position: relative;
    max-height: 600px; /* Altura máxima desejada */
    overflow-y: auto; /* Permitir rolagem vertical */
}

.table-wrapper table {
    max-height: 300px;
    width: 100%;
    border-collapse: collapse;
}

.table-wrapper thead {
    position: sticky; /* Fixar o cabeçalho */
    top: 0; /* Ficar fixo no topo do contêiner */
    background-color: #365167; /* Cor de fundo do cabeçalho */
    color: #fff; /* Cor do texto no cabeçalho */
    z-index: 2; /* Garantir que o cabeçalho fique acima do conteúdo */
}

#export-buttons {
    margin-bottom: 1em;
}

.export-btn {
    background-color: #365167;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
}

.export-btn:hover {
    background-color: #2A2F33;
    color: white;
}

.delete-btn {
    background-color: #d9534f; /* Cor de fundo vermelho para o botão de delete */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
}

.delete-btn:hover {
    background-color: #c12e2a; /* Cor de fundo mais escura quando em hover */
    color: white;
}

/* TELA DE CARREGAMENTO */

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after {
  position: absolute;
  top: 0;
  content: '';
}

.jimu-primary-loading:before {
  left: -19.992px;
}

.jimu-primary-loading:after {
  left: 19.992px;
  -webkit-animation-delay: 0.32s !important;
  animation-delay: 0.32s !important;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after,
.jimu-primary-loading {
  background: var(--blue-main);
  -webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
  animation: loading-keys-app-loading 0.8s infinite ease-in-out;
  width: 13.6px;
  height: 32px;
}

.jimu-primary-loading {
  text-indent: -9999em;
  margin: auto;
  position: absolute;
  right: calc(50% - 6.8px);
  top: calc(50% - 16px);
  -webkit-animation-delay: 0.16s !important;
  animation-delay: 0.16s !important;
}

@-webkit-keyframes loading-keys-app-loading {

  0%,
  80%,
  100% {
    opacity: .75;
    box-shadow: 0 0 var(--blue-main);
    height: 32px;
  }

  40% {
    opacity: 1;
    box-shadow: 0 -8px var(--blue-main);
    height: 40px;
  }
}

@keyframes loading-keys-app-loading {

  0%,
  80%,
  100% {
    opacity: .75;
    box-shadow: 0 0 var(--blue-main);
    height: 32px;
  }

  40% {
    opacity: 1;
    box-shadow: 0 -8px var(--blue-main);
    height: 40px;
  }
}

/* tela de concluido e erro */

#div-concluido {
    display: flex;
    flex-direction: column; /* Organiza os itens em coluna (vertical) */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
    height: 100vh; /* Altura da tela */
    text-align: center; /* Alinha o texto ao centro */
}

#div-concluido h1, #div-concluido p {
    margin: 0.5em 0; /* Dá um espaço entre os elementos */
}

/* TELA DE LOGIN */

#h3-login{
    margin-top: 80px;
    font-size: 44px;
}

.login-btn{
    padding-top: 25px;
}