body .forcast {
  text-align: center;
}

br {
  height: 2px;
}

.container {
  padding: 20px;
}

.controls {
  margin-bottom: 10px;
}

.controls input[type="radio"] {
  margin-right: 5px;
}

.buttons {
  margin: 10px 0;
}

#chart-container {
  width: 80%; /* Mantém a largura do contêiner */
  margin: 0 auto;
  padding: 20px;
}

#forecast-chart {
  display: block;
  width: 100%; /* Gráfico ocupa 100% da largura do contêiner */
  height: 400px; /* Reduz a altura do gráfico */
}

.custom-button {
  display: inline-block;
  background-color: #4CAF50; /* Cor de fundo padrão */
  color: white; /* Cor do texto */
  padding: 8px 18px; /* Espaçamento interno */
  font-size: 12px; /* Tamanho da fonte */
  cursor: pointer; /* Mostra o cursor de "mão" ao passar */
  border: none; /* Remove borda */
  border-radius: 5px; /* Deixa os cantos arredondados */
  text-align: center; /* Alinha o texto ao centro */
  transition: background-color 0.3s; /* Suaviza a transição ao passar o mouse */
}

.custom-button:hover {
  background-color: #45a049; /* Cor ao passar o mouse */
}

.number-format {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: bottom; /* Centraliza verticalmente */
  gap: 15px; /* Espaçamento entre os checkboxes */
  margin-top: 10px; /* Adiciona um pequeno espaçamento acima */
}

.number-format label {
  margin-top: -2px;
  /*font-size: 11px; !* Tamanho do texto *!*/
  display: flex;
  align-items: bottom;
  gap: 5px; /* Espaçamento entre o checkbox e o texto */
}

.number-format input[type="radio"] {
  margin-top: 1px;
  /*width: 11px; !* Tamanho do checkbox *!*/
  /*height: 11px;*/
}

.data-table-wrapper {
  width: 80%;
  margin: 20px auto;
  border: 1px solid #ddd;
  height: 400px; /* Altura fixa */
  overflow: auto; /* Permite rolagem horizontal e vertical */
  position: relative; /* Define o contexto para sticky */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  position: relative; /* Necessário para sticky */
  table-layout: fixed; /* Garante larguras consistentes */
}

.data-table th, .data-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  background-color: #fff; /* Fundo branco */
  width: 100px; /* Largura fixa */
  min-width: 100px; /* Consistência entre cabeçalhos e células */
  max-width: 100px; /* Evita expansão excessiva */
  box-sizing: border-box; /* Inclui bordas no cálculo de largura */
  font-size: 12px; /* Reduz o tamanho da fonte */
}

/* Garante z-index correto para cabeçalhos */
.data-table th {
  position: sticky;
  top: 0;
  z-index: 50; /* Certifique-se de que os cabeçalhos móveis fiquem abaixo das colunas fixas */
  background-color: #f4f4f4;
}

/* Cabeçalhos Fixos */
.data-table th.sticky {
  position: sticky;
  left: 0;
  z-index: 60; /* As colunas fixas precisam estar acima das móveis */
  background-color: #fff;
  border-right: 1px solid #ddd;
}

/* Ajusta deslocamento horizontal para colunas fixas */
.data-table th.sticky:nth-child(2),
.data-table td.sticky:nth-child(2) {
  left: 100px;
}

.data-table th.sticky:nth-child(3),
.data-table td.sticky:nth-child(3) {
  left: 200px;
}

/* Linhas da tabela */
.data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Colunas Fixas nas Linhas Roláveis */
.data-table td.sticky {
  position: sticky;
  left: 0; /* Fixa na lateral */
  z-index: 40; /* Mantém as colunas fixas abaixo do cabeçalho, mas acima das células móveis */
  background-color: #fff; /* Fundo branco */
  background-clip: padding-box; /* Garante que o fundo cobre totalmente o padding */
  border-right: 1px solid #ddd; /* Adiciona borda entre colunas fixas e móveis */
  box-shadow: 2px 0 0 #ddd, -2px 0 0 #ddd; /* Preenche brechas verticais */
}

.data-table td.sticky:nth-child(2) {
  left: 100px; /* Distância para a segunda coluna fixa */
}

.data-table td.sticky:nth-child(3) {
  left: 200px; /* Distância para a terceira coluna fixa */
}

.scrollable-content {
  height: 600px;
  margin-top: 20px;
  overflow-y: auto; /* Permite rolagem apenas nessa área */
  padding: 10px;
  background-color: #f8f8f8; /* Fundo para diferenciar */
}

/* Deixa os elementos fixos visíveis no topo */
.fixed-elements {
  background-color: white; /* Fundo branco para evitar sobreposições visuais */
  padding: 10px;
  border-bottom: 2px solid rgb(208, 208, 208); /* Linha vermelha separando os elementos fixos */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
}

.color-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.color-controls label {
  font-size: 14px;
}

.color-controls input {
  width: 50px;
  text-align: center;
}

.header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 1 parte para espaço vazio, 1 parte para o título, 1 parte para o botão */
  align-items: center;
  background-color: #f4f4f4;
  margin-left: -10px;
  margin-top: -10px;
  padding: 10px 15px;
  width: 100%;
  box-sizing: border-box;
}

h1 {
  grid-column: 2; /* Garante que o título fique exatamente no centro */
  text-align: center;
  padding-left: 50px;
  margin: 0;
  font-size: 20px;
  color: #2f2f2f;
}

.logout-button {
  justify-self: end; /* Garante que o botão vá para a direita */
  background-color: #4f4a4a;
  color: white;
  border: none;
  padding: 6px 10px;
  font-size: 9px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-button:hover {
  background-color: #666371;
}

#filter-search {
  margin-bottom: 10px; /* Adiciona um espaço de 10px abaixo do input */
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px; /* Espaçamento entre nome e botão */
}

#user-name {
  font-size: 14px;
  font-weight: bold;
  color: #333; /* Cor escura para destaque */
}

/* Estilos para o modo escuro */
.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

/* Ajusta o fundo e as cores das tabelas e botões */
.dark-mode .data-table {
  background-color: #1e1e1e;
  color: #ffffff;
}

.dark-mode .data-table th, .dark-mode .data-table td {
  background-color: #1e1e1e;
  color: #ffffff;
  border-color: #444;
}

.dark-mode .custom-button {
  background-color: #333;
  color: #fff;
}

.dark-mode .custom-button:hover {
  background-color: #555;
}

.dark-mode .fixed-elements {
  background-color: #222;
  border-bottom: 2px solid #444;
}

.dark-mode .scrollable-content {
  background-color: #181818;
}

/* Garante que os botões fiquem alinhados corretamente */
.buttons-container {
  display: flex;
  gap: 8px; /* Espaçamento entre os botões */
  margin-left: auto;
}

/* Mantém o mesmo estilo do botão de logout */
#toggle-dark-mode {
  background-color: #4f4a4a;
  color: white;
  border: none;
  padding: 6px 10px;
  font-size: 9px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#toggle-dark-mode:hover {
  background-color: #666371;
}

/* Modo escuro */
.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

/* Elementos dentro da parte fixa */
.dark-mode .fixed-elements {
  background-color: #181818;
  border-bottom: 2px solid #333;
}

/* Estiliza os botões no modo escuro */
.dark-mode .custom-button,
.dark-mode .logout-button {
  background-color: #333;
  color: white;
  border: 1px solid #555;
}

.dark-mode .custom-button:hover,
.dark-mode .logout-button:hover {
  background-color: #555;
}

/* Estiliza os inputs no modo escuro */
.dark-mode input,
.dark-mode select {
  background-color: #222;
  color: white;
  border: 1px solid #555;
}

/* Estiliza os rótulos no modo escuro */
.dark-mode label {
  color: #ffffff;
}

/* Ajusta a cor da tabela */
.dark-mode .data-table {
  background-color: #1e1e1e;
  color: #ffffff;
}

.dark-mode .data-table th,
.dark-mode .data-table td {
  background-color: #1e1e1e;
  color: #ffffff;
  border-color: #444;
}

/* Estiliza os totais na parte fixa */
.dark-mode .totals-container {
  background-color: #222;
}

.dark-mode .totals-container .total {
  color: white;
  background-color: #333;
  border-color: #444;
}

.dark-mode .header-container {
  background-color: #222;
}

.dark-mode h1 {
  color: #666371;
}

.dark-mode #user-name {
  color: #666371;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 250px;
}

.logo-container img {
  max-width: 250px; /* Ajuste conforme necessário */
  height: auto;
}


.custom-dropdown {
  position: relative;
  display: inline-block;
  width: 110px; /* Ajustando o tamanho do botão */
  margin-bottom: 10px;
}

.dropdown-btn {
  background-color: #f4f4f4;
  color: #333;
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid #ccc;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-radius: 5px;
}

.dropdown-btn:hover {
  background-color: #ddd;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 130px;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 5px;
  padding: 5px;
}

.dropdown-content label {
  display: flex;
  align-items: center;
  padding: 3px;
  font-size: 12px;
  cursor: pointer;
}

.dropdown-content label:hover {
  background-color: #f0f0f0;
}

.dropdown-content input[type="checkbox"] {
  margin-right: 5px;
}

/* Modo escuro para os dropdowns */
.dark-mode .dropdown-btn {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}

.dark-mode .dropdown-btn:hover {
  background-color: #555;
}

.dark-mode .dropdown-content {
  background-color: #222;
  border: 1px solid #444;
  box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.2);
}

.dark-mode .dropdown-content label {
  color: #ddd;
}

.dark-mode .dropdown-content label:hover {
  background-color: #444;
}

.dark-mode .dropdown-content input[type="checkbox"] {
  accent-color: #fff; /* Ajusta a cor da checkbox no modo escuro */
}

/* Tooltip para as colunas fixas */
.data-table td.sticky {
  position: sticky;
  left: 0;
  z-index: 40;
  background-color: #fff;
  border-right: 1px solid #ddd;
  box-shadow: 2px 0 0 #ddd, -2px 0 0 #ddd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.data-table td.sticky:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: normal;
  max-width: 300px;
  z-index: 999;
  pointer-events: none;
}

/* Tooltip flutuante seguro */
.custom-tooltip {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: normal;
  max-width: 400px;
  z-index: 10000;
  pointer-events: none;
  text-align: left;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}

.menu-bg{
  background-color: #F7F6FE;
}
.custom-button {
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}
.totals-container {
  display: flex;
  marging-left: -15px;
  justify-content: space-between;
  padding: 10px 50px;
  background-color: #f4f4f4;
  border-bottom: 1px solid #ddd;
}
.total {
  font-size: 14px;
  font-weight: bold;
}
.highlight-green {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  padding: 5px;
  border-radius: 5px;
}
.highlight-gray {
  background-color: #f4f4f4;
  border: 1px solid #c3e6cb;
  padding: 5px;
  border-radius: 5px;
}
.loading-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: none;
  text-align: center;
}
.hero1 {
  padding-top: 100px!important;
}