body {
  font-family: 'Calibri', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  height: 100vh;
  background-color: #554f4fee;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
}

body.loaded {
  opacity: 1;
  visibility: visible;
}

.container {
  width: 90%;
  max-width: 400px;
  background-color: #141313dc;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.custom-separator {
  border: none; /* Remove a borda padrão */
  height: 1px; /* Define a altura da linha */
  background-color: #cdb0f7; /* Define a cor */
  margin: 5px 0; /* Espaçamento acima e abaixo */
  width: 100%; /* Define a largura da linha */
}

.custom-separator-vertical {
  border: none; /* Remove a borda padrão */
  height: 100%; /* Define a altura da linha */
  background-color: #cdb0f7; /* Define a cor */
  margin: 5px 0; /* Espaçamento acima e abaixo */
  width: 1px; /* Define a largura da linha */
}

.logo {
  text-align: center;
  padding: 20px;
}

.logo img {
  width: 100%;
  max-width: 300px;
}

.welcome {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  margin: 10px 0;
  color: #fff;
}
.form-criar-conta {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centraliza horizontalmente os filhos */
  justify-content: center; /* Centraliza verticalmente os filhos */
}

.form-criar-conta input {
  width: calc(100% - 20px);
  margin: 5px 10px 5px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: 'Calibri', sans-serif;
}

.form-login {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centraliza horizontalmente os filhos */
  justify-content: center; /* Centraliza verticalmente os filhos */
}

.form-login input {
  width: calc(100% - 20px);
  margin: 5px 10px 5px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: 'Calibri', sans-serif;
}

.button-container-login {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
}

.button-container-login a {
  text-decoration: none;
  color: #ffc000;
  font-weight: bold;
  padding: 0px 35px;
}

.error-banner {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  text-align: center;
}

.error-banner {
  background-color: #ff0000;
  color: #fff;
}

.login-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 20px;
  margin: 20px 0;
  background-color: #cc4c5f;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Calibri', sans-serif;
}

.login-btn img {
  width: 35px;
  vertical-align: middle;
  margin-right: 10px;
}

.hidden {
  display: none;
}

.create-account-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 10px;
  margin: 20px 0;
  background-color: #cc4c5f; /* Cor combinando com o vermelho da imagem */
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Calibri', sans-serif;
}

.create-account-btn img {
  width: 35px;
  vertical-align: middle;
  margin-right: 10px;
}

.error-banner {
  background-color: red;
  color: white;
  padding: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.error-banner.hidden {
  display: none;
}

.banner-close {
  cursor: pointer;
  font-weight: bold;
  border: none;
  background: none;
  color: white;
}

header.navbar .logo img {
  max-width: 50px; /* Largura máxima da imagem */
  max-height: 50px; /* Altura máxima da imagem */
  object-fit: contain; /* Ajusta a imagem sem distorcer */
}

header.navbar .logo {
  padding: 5px;
}

header.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #333;
  padding: 10px 0 5px;
  position: fixed; /* Fixa a barra no topo da página */
  top: 0;
  width: 100%; /* Garante que ocupe toda a largura */
  z-index: 1000; /* Mantém o header acima de outros elementos */
}

header.navbar a ion-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

header.navbar a:hover {
  color: #cc4c5f;
}

header .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  opacity: 1;
  visibility: visible;
}

header .nav-item span {
  margin-top: 2px;
  font-size: 16px; /* Tamanho padrão */
}

/* Para telas menores que 768px (exemplo: tablets) */
@media (max-width: 768px) {
  header .nav-item span {
    font-size: 12px;
  }
  h2 {
    max-width: 300px;
  }
}

/* Para telas menores que 480px (exemplo: celulares) */
@media (max-width: 480px) {
  header .nav-item span {
    font-size: 10px;
  }
  h2 {
    max-width: 250px;
  }
}

header .nav-item.active {
  color: #ffc107; /* Cor amarela para o item ativo */
}

main.content {
  padding: 10px;
  margin-top: 60px; /* Garante que o conteúdo não fique sob o header */
  text-align: left;
}

.add-button-container {
  display: flex;
  flex-direction: row;
  z-index: 10; /* Garante que fique acima de outros elementos */
  gap: 10px;
  padding-top: 10px;
  margin-left: 70px;
}

.add-button {
  align-items: center;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: transparent; /* Torna o fundo transparente */
}

.add-button img {
  max-width: 65px; /* Largura máxima da imagem */
  max-height: 65px; /* Altura máxima da imagem */
  object-fit: contain; /* Ajusta a imagem sem distorcer */
}

h2 {
  position: relative;
  top: 0%;
  left: 5%;
  color: white;
  font-size: 22px;
  max-width: 230px;
}

/* Popup */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup.hidden {
  display: none; /* Esconde o popup */
}

/* Conteúdo do Popup */
.popup-content {
  background-color: whitesmoke;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

/* Botão Fechar */
.close-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 32px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  z-index: 2000;
}

/* Formulário */
#title-form {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
}

.title-form {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
}

#title-form-novo-investimento {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
}

#title-form-lancamento {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
}

.form-group-inline {
  display: flex;
  align-items: left; /* Alinha os itens verticalmente no centro */
  margin-bottom: 15px; /* Espaço entre os campos */
  margin-top: 15px;
}

.form-group-inline input,
.form-group-inline select,
.form-group-inline textarea {
  flex: 1; /* Faz com que o input ocupe o espaço restante */
  padding: 5px 10px 5px 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

form button {
  background-color: #ffc000;
  color: black;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease;
  width: 75%;
  padding: 8px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 7px;
}

form button:hover {
  background-color: #554f4fee;
}

/* CONFIG PAGINA TOPO */
.topo-pagina {
  position: fixed;
  display: flex;
  top: 78px;
  height: 80px; /* Altura do container */
  width: 95%;
  opacity: 1;
  overflow: hidden;
  z-index: 20;
  background-color: #444;
}

/* Banners de Conta */
.banner-contas-popup {
  position: flex;
  transform: translate(-50%, -50%);
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.banner-contas-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 650px;
  width: 800px;
  padding: 10px 20px;
  overflow: auto;
  margin-top: 155px;
}

.banner-contas-option {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.popup-content-selecao {
  background-color: whitesmoke;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
}

.banner-contas-grid-selecao {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 270px;
  width: 100%;
  overflow: scroll;
}

.banner-contas-option-selecao {
  display: flex;
  align-items: center;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.banner-contas-icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.banner-contas-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.banner-contas-delete,
.banner-contas-default {
  width: 30px;
  height: 30px;
  cursor: pointer;
  padding: 2px 5px;
}

.banner-contas-nome {
  font-size: 20px;
  font-weight: bold;
}

.banner-contas-details {
  font-size: 14px;
}

.container-botoes-conta {
  display: flex;
  justify-content: space-between;
  display: table-column-group;
  gap: 10px;
}

#conta-default {
  display: block;
  text-align: center; /* Centraliza o texto */
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 4px;
}


/* FORM DE TRANSAÇÃO */

.container-de-linha {
  display: flex;
  margin-top: 10px;
  gap: 5px;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  position: relative;
}

.container-botoes-form-transacao {
  display: flex;
  flex-direction: column; /* Alinha os itens verticalmente */
  gap: 4px; /* Espaçamento entre os botões */
  align-items: flex-start;
  justify-content: flex-end;
}

.container-botoes-form-transacao label {
  display: inline-flex;
  align-items: middle; /* Alinha o botão com o texto */
  gap: 2px; /* Espaçamento entre o botão e o texto */
  font-size: 18px; /* Ajuste do tamanho do texto */
  margin-right: 5px;
}

.container-botoes-form-transacao img {
  display: inline-flex;
  align-items: middle;
  gap: 2px; /* Espaçamento entre o botão e o texto */
  width: 20px;
  height: 20px;
}

input[type='radio'] {
  zoom: 1.5; /* Aumenta o botão em 50% */
  margin: 0px 3px -1px;
}

#input-conta {
  width: 190px;
  margin-right: 0px;
}

#input-valor {
  text-align: center;
  font-size: 20px;
}

.input-transacao {
  padding: 0.5rem;
  font-size: 18px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  height: 40px;
  width: 100%;
  font-family: 'Calibri', sans-serif;
}

.input-transacao-taxa {
  padding: 0.5rem;
  font-size: 18px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  height: 40px;
  width: 100%;
  font-family: 'Calibri', sans-serif;
}

#input-periodicidade {
  height: 58px;
}
.input-transacao:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

input[type='checkbox'] {
  zoom: 1.5; /* Aumenta o botão em 50% */
  margin: 0px 3px -1px;
}

#ativo-vendido-checkbox {
  zoom: 1.5; /* Aumenta o botão em 50% */
  margin: 0px 3px -1px;
}

#add-transacao-button {
  background-color: #ffc000;
  color: black;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease;
  width: 75%;
  padding: 8px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 7px;
  margin-top: 15px;
}

#add-transacao-button:hover {
  background-color: #554f4fee;
}

.popup_selecao {
  position: fixed;
  z-index: 2500;
  top: 26%;
}

.banner-categorias-grid-selecao {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 375px;
  width: 100%;
  overflow: scroll;
}

.banner-categorias-option-selecao {
  display: flex;
  align-items: center;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.banner-categorias-icon {
  width: 35px;
  height: 35px;
  margin-right: 15px;
}

.banner-categorias-nome {
  font-size: 20px;
  font-weight: bold;
}

/* PÁGINA TRANSACAO CORPO */
/* Rolagem horizontal */
.scroll-container-datas-transacao {
  width: 98vw; /* Ocupa toda a largura da viewport */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Espaço entre os elementos */
  background-color: #444; /* Cor de fundo (opcional) */
  height: 50px;
  margin-top: 155px;
  width: 95%; /* Faz o container ocupar quase toda a largura da tela */
  position: fixed;
  left: 2.5%;
  z-index: 20;
  overflow: hidden; /* Esconde o conteúdo que ultrapassa os limites */
}

#scroll-meses-homepage {
  margin-top: 0px;
  border-radius: 8px;
  margin-top: 2px;
  position: sticky;
  left: 1%;
  width: 98%;
}

.scroll-container-datas-transacao div {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Espaço entre os elementos */
  padding: 5px;
}

.scroll-container-datas-transacao img {
  width: 25px;
  height: 25px;
  margin: 5px;
}

.scroll-container-datas-transacao .scroll-box {
  overflow-x: auto;
  white-space: nowrap;
  flex-grow: 1;
  margin: 0 5px;
}

.scroll-container-datas-transacao .scroll-box div {
  display: inline-block;
  padding: 5px 10px;
  background-color: #666;
  border-radius: 5px;
  margin-right: 5px;
  color: #fff;
}

.scroll-container-datas-transacao .scroll-box .mesAtivo {
  display: inline-block;
  padding: 5px 10px;
  background-color: #cc4c5f;
  border-radius: 5px;
  margin-right: 5px;
  color: #fff;
}

/* Botoes de pago/pendente */
#container-botoes-pendente-pago {
  display: flex; /* Alinha os botões lado a lado */
  justify-content: space-between; /* Espaço uniforme entre os botões */
  align-items: center; /* Centraliza os botões verticalmente */
  gap: 10px; /* Espaçamento entre os botões */
  padding: 5px 10px; /* Espaçamento interno no container */
  width: 95%; /* Faz o container ocupar quase toda a largura da tela */
  height: 47px;
  box-sizing: border-box; /* Inclui padding e borda no tamanho total */
  border-radius: 0px 0px 8px 8px; /* Bordas arredondadas opcionais */
  position: fixed;
  margin-top: 205px;
  left: 2.5%;
  z-index: 20;
  overflow: hidden; /* Esconde o conteúdo que ultrapassa os limites */
  background-color: #444;
}

/* Estilo básico para os botões */
.btn-pago-pendente {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 15px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 50%;
}

.btn-pago-pendente.inativo {
  background-color: #e7e7e7; /* Cor dourada */
  color: #000; /* Texto preto */
}

.btn-pago-pendente.ativo {
  background-color: #ffc000; /* Cor dourada */
  color: #000; /* Texto preto */
}

.btn-pago-pendente:hover {
  background-color: #d6d6c9; /* Sombra mais escura */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.badge {
  display: inline-block;
  margin-left: 10px; /* Espaçamento entre o texto e a badge */
  background-color: #cc4c5f; /* Cor de fundo */
  color: #fff; /* Cor do texto */
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px; /* Deixa a badge circular */
  min-width: 20px;
  text-align: center; /* Centraliza o texto */
}

/* BANNER TRANSACAO */
.banner-transacao-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px;
  width: 98vw;
  left: 2.5%;
  box-sizing: border-box; /* Inclui padding e borda no tamanho total */
  overflow: hidden;
  margin-top: 245px;
}

.banner-transacao-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 7px 2px 7px;
  border: 2px solid #444;
  border-radius: 8px;
  background-color: lightyellow;
  position: relative; /* Necessário para posicionamento absoluto dentro dos filhos */
  overflow: auto;
  /* Evitar compressão */
  flex-shrink: 0; /* Garante que o item não será comprimido */
}

.container-transacao-esquerda {
  display: flex;
  flex-direction: column; /* Faz com que o conteúdo fique em coluna */
  align-items: flex-start; /* Alinha tudo à esquerda */
  max-width: 100%; /* Permite que o conteúdo expanda até a largura disponível */
}

.banner-transacao-icon {
  width: 50px; /* Ajuste conforme necessário */
  height: auto; /* Mantém a proporção da imagem */
  margin-bottom: 5px; /* Espaçamento entre o ícone e o texto */
  margin-left: 10px;
}

.banner-transacao-categoria {
  text-align: left; /* Alinha o texto à esquerda */
  word-wrap: break-word; /* Faz com que o texto quebre linha, se necessário */
  width: 100%; /* O texto ocupa toda a largura disponível */
  font-size: 10px;
}
.container-transacao-meio {
  position: absolute; /* Mantém o texto fixo */
  left: 22%; /* Ajuste a posição horizontal */
  top: 55%; /* Alinha o texto ao centro verticalmente */
  transform: translateY(
    -50%
  ); /* Centraliza o texto completamente no eixo vertical */
  width: 245px; /* Define uma largura máxima para o texto */
  /* align-items: middle; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.banner-transacao-descricao {
  text-align: left; /* Alinha o texto à esquerda */
  white-space: normal; /* Permite que o texto quebre em várias linhas se necessário */
  word-wrap: break-word; /* Faz com que palavras longas quebrem linha */
  width: 100%; /* Ocupa toda a largura disponível no container */
  font-weight: bold;
  font-size: 22px;
  line-height: 0.8; /* Ajusta o espaçamento entre as linhas (experimente valores menores, como 1.2 ou 1.4) */
}

.banner-transacao-descricao-conta {
  text-align: right; /* Alinha o texto à esquerda */
  white-space: normal; /* Permite que o texto quebre em várias linhas se necessário */
  word-wrap: break-word; /* Faz com que palavras longas quebrem linha */
  width: 100%; /* Ocupa toda a largura disponível no container */
  font-weight: bold;
  font-size: 10px;
  background-color: rgb(250, 250, 220);
  display: inline-block; /* Evita que o span se comporte como bloco */
  padding: 2px 6px;       /* Espaçamento interno elegante */
  border-radius: 4px;     /* Opcional: cantos arredondados */
  max-width: max-content; /* Garante que o tamanho se ajuste ao conteúdo */
  margin-left: auto;
  margin-top: 4px;
}

.container-transacao-direita {
  display: flex;
  flex-direction: column; /* Organiza os textos em uma coluna */
  align-items: center; /* Alinha os textos à esquerda (ou use center/direita, se necessário) */
  justify-content: flex-start; /* Garante que os textos fiquem no topo */
  gap: 0px; /* Espaçamento vertical entre os textos (opcional) */
}

.banner-transacao-valor {
  text-align: center; /* Alinha o texto à esquerda */
  width: 100%; /* Ocupa toda a largura disponível no container */
  font-weight: bold;
  font-size: 20px;
}

.banner-transacao-valor.entrada {
  text-align: center; /* Alinha o texto à esquerda */
  width: 100%; /* Ocupa toda a largura disponível no container */
  font-weight: bold;
  font-size: 20px;
  color: rgb(0, 73, 0);
}

.banner-transacao-valor.saida {
  text-align: center; /* Alinha o texto à esquerda */
  width: 100%; /* Ocupa toda a largura disponível no container */
  font-weight: bold;
  font-size: 21px;
  color: darkred;
}

.banner-transacao-data {
  text-align: center; /* Alinha o texto à esquerda */
  width: 100%; /* Ocupa toda a largura disponível no container */
  font-style: italic;
  font-size: 14px;
}

.banner-transacao-parcelas,
.banner-transacao-periodicidade {
  text-align: center; /* Alinha o texto à esquerda */
  width: 100%; /* Ocupa toda a largura disponível no container */
  font-weight: bold;
  font-size: 12px;
  font-style: italic;
  text-transform: capitalize;
}

/* POPUP EDITAR TRANSACAO */

/* Estilo geral para o popup */
.popup {
  position: fixed; /* Fixa o popup na tela */
  top: 50%; /* Centraliza verticalmente */
  left: 50%; /* Centraliza horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta a posição central */
  width: 90%; /* Largura do popup */
  max-width: 400px; /* Limita a largura máxima */

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Sombra */
  border-radius: 10px; /* Bordas arredondadas */
  z-index: 1000; /* Certifica-se que aparece acima de outros elementos */
  display: none; /* Esconde por padrão */
  flex-direction: column;
  padding: 20px;
}

/* Exibe o popup quando a classe 'hidden' é removida */
.popup:not(.hidden) {
  display: flex; /* Mostra o popup como flexbox */
}

/* Estilo do overlay por trás do popup */
.popup-overlay {
  position: fixed; /* Fixa no fundo da tela */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
  z-index: 999; /* Aparece abaixo do popup */
  display: none; /* Esconde por padrão */
}

/* Exibe o overlay quando ativo */
.popup-overlay:not(.hidden) {
  display: block;
}

/* Botão para fechar o popup */
.popup-close-btn {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

/* Conteúdo do popup */
.popup-content {
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.container-botoes-editar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 7px;
}

#botao-tornar-pago-pendente {
  height: 85px;
  width: 85px;
}

/* Para esconder o botão da direita suavemente */
#botao-tornar-pago-pendente.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#botao-editar {
  height: 85px;
  width: 85px;
}

.container-botao-tornar-pago,
.container-botao-editar {
  display: flex;
  flex-direction: column; /* Alinha os botões uniformemente */
  align-items: left;
  gap: 2px;
}

.container-botao-tornar-pago span,
.container-botao-editar span {
  font-size: 14px;
  font-weight: bold;
  font-family: 'Calibri', sans-serif;
}

.btn-opcao-editar {
  padding: 5px 20px;
  border: none;
  background-color: lightgoldenrodyellow;
  color: black;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  margin: 5px;
  height: 25px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-opcao-editar:hover {
  background-color: #ffc000;
}

#add-transacao-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#add-transacao-button ion-icon {
  font-size: 24px; /* Ajusta o tamanho do ícone */
}
#container-botoes-edit-del {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

#edit-transacao-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#del-transacao-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #cc4c5f;
}

#del-transacao-button ion-icon {
  font-size: 18px; /* Ajusta o tamanho do ícone */
}

#edit-transacao-button ion-icon {
  font-size: 18px; /* Ajusta o tamanho do ícone */
}

/* PAGINA HOMEPAGE */
body.homepage {
  display: flex;
  flex-direction: column; /* Mantém a disposição em coluna */
  align-items: stretch; /* Alinha os itens para ocupar toda a largura */
  justify-content: flex-start; /* Garante que o conteúdo fique no topo */
  margin: 0; /* Remove margens do body */
  font-family: 'Calibri', sans-serif; /* Mantém a fonte */
  /* height: 100vh; Garante que o body ocupe toda a altura da tela */
}

.container-topo-homepage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  color: white; /* Cor do texto */
  margin-top: 80px;
  padding: 0 2.5%;
}

.container-topo-homepage #user-name {
  font-size: 19px; /* Ajuste do tamanho da fonte */
  font-weight: bold;
  text-align: left;
}

.container-topo-homepage #current-date {
  font-size: 16px;
  font-weight: normal;
  text-align: right;
}

.separator-homepage {
  border: none; /* Remove borda padrão */
  height: 1px; /* Altura da linha */
  width: 100%; /* Largura total da tela */
  background-color: #ffffff; /* Cor da linha */
  margin: 0; /* Remove qualquer margem padrão */
}

.container-input-conta {
  position: relative;
  margin-top: 2px;
  width: 60%;
}

.container-input-conta input {
  width: 100%;
  padding: 10px 5px;
  font-size: 16px;
  border: 1px solid #444;
  border-radius: 4px;
  outline: none;
}

.container-input-conta label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #aaa;
  pointer-events: none;
  transition: 0.2s ease all;
}

.container-input-conta input:focus + label,
.container-input-conta input:not(:placeholder-shown) + label {
  top: 14px;
  left: 10px;
  font-size: 12px;
  color: #333;
}

#input-conta-homepage {
  font-family: Calibri, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px 0px;
  border: 2px solid #444;
  border-radius: 8px;
  background-color: lightyellow;
  position: relative; /* Necessário para posicionamento absoluto dentro dos filhos */
  margin-top: 2px;
  height: 40px;
  width: 90%;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

#popup_conta {
  position: fixed; /* Fixa o popup na tela */
  top: 50%; /* Centraliza verticalmente */
  left: 50%; /* Centraliza horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta a posição central */
  z-index: 1000; /* Coloca o popup acima de outros elementos */
  width: 80%; /* Ajuste conforme necessário */
  max-width: 500px; /* Largura máxima */
  padding: 20px; /* Espaçamento interno */
  border-radius: 8px; /* Arredonda os cantos */
}

#popup_conta.hidden {
  display: none; /* Esconde o popup quando não estiver ativo */
}

.popup-content-selecao {
  overflow-y: auto; /* Permite rolagem se o conteúdo for muito longo */
  max-height: 70vh; /* Limita a altura */
}

/* Fundo semitransparente para escurecer o conteúdo abaixo */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
  z-index: 999; /* Logo abaixo do popup */
  display: none; /* Esconde quando o popup está fechado */
}

.popup-overlay.active {
  display: block; /* Mostra o fundo escuro */
}

.container-header-homepage {
  align-items: center;
  margin: 2px 5px;
  position: sticky;
}

.container-sub-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.container-ytd-mtd {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 12px 8px 0px;
  border: 2px solid #444;
  border-radius: 8px;
  background-color: lightyellow;
  position: relative; /* Necessário para posicionamento absoluto dentro dos filhos */
  margin-top: 3px;
  height: 40px;
  width: 27%;
  text-align: center;
  font-size: 18px;
  gap: 4px;
}

.container-ytd-mtd label {
  position: absolute;
  top: 2px;
  left: 10px;
  font-size: 12px;
  color: #333;
}

.btn-ytd-mtd {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 5px;
  font-size: 11.5px;
  font-weight: bold;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 50%;
}

.btn-ytd-mtd.inativo {
  background-color: #e7e7e7; /* Cor dourada */
  color: #000; /* Texto preto */
}

.btn-ytd-mtd.ativo {
  background-color: #ffc000; /* Cor dourada */
  color: #000; /* Texto preto */
}

.btn-ytd-mtd:hover {
  /* background-color: #d6d6c9; Sombra mais escura */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.container-select-conta-all {
  display: flex;
  flex-direction: column;
  
  align-items: center;
  padding: 12px 4px 0px;
  border: 2px solid #444;
  border-radius: 8px;
  background-color: lightyellow;
  position: relative; /* Necessário para posicionamento absoluto dentro dos filhos */
  margin-top: 3px;
  height: 40px;
  width: 10%;
  text-align: center;
  font-size: 18px;
  gap: 4px;
}

.chk-select-conta-all{
  transform-origin: left center; /* evita “pular” de lugar */
  margin-right: .25rem;          /* ajusta o espaçamento */
  align-self: center;
}

.txt-select-conta-all {
  font-size: 12px;
  color: #333;
  font-weight: bold;
}

.container-resumo-valores {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 3px;
  width: 100%; /* O container ocupa toda a largura da tela */
  gap: 8px; /* Espaçamento entre os divs */
}

.container-resumo-valores div {
  flex: 1; /* Faz com que todos os divs internos tenham o mesmo tamanho */
  display: flex;
  flex-direction: column; /* Organiza o conteúdo em coluna */
  padding: 2px 5px;
  border: 2px solid #444;
  border-radius: 8px;
  box-sizing: border-box; /* Inclui o padding dentro da largura total */
}

.container-resumo-valores label {
  color: #000000;
  font-size: 10px;
  margin-bottom: 2px; /* Adiciona espaço entre o label e o valor */
  align-items: left;
}

.container-resumo-valores span {
  color: #000000;
  font-weight: bold;
  font-size: 19px;
  margin-bottom: 2px; /* Adiciona espaço entre o label e o valor */
  align-items: center;
  text-align: center;
  margin: 8px 0px 10px 0px;
}

.valor-entradas {
  background-color: rgb(185, 229, 200);
}

.valor-saidas {
  background-color: rgb(211, 162, 162);
}

.valor-saldo {
  background-color: lightgrey;
}

.container-banner-resumo-categoria {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Alinha os itens ao topo */
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 2px 10px 10px 10px;
  box-sizing: border-box; /* Inclui padding e borda no tamanho total */
  overflow: hidden;
  margin-top: 3px;

  /* Estilização adicional */
  background-color: #ececec; /* Cor off-white */
  border: 3px solid #333; /* Borda grossa e escura */
  border-radius: 8px; /* Cantos arredondados para suavizar */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar destaque */
}

.banner-resumo-categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px;
  width: 100%;
  height: auto; /* Permite que os itens cresçam naturalmente */
  border-radius: 1px;
  background-color: rgb(212, 212, 212);
  position: relative; /* Necessário para posicionamento absoluto dentro dos filhos */
  overflow: auto;
}

.banner-resumo-icon {
  width: 35px; /* Ajuste conforme necessário */
  height: auto; /* Mantém a proporção da imagem */
  margin-left: 10px;
}

.banner-resumo-descricao {
  width: 130px; /* Ajuste conforme necessário */
  height: auto; /* Mantém a proporção da imagem */
  margin-left: 30px;
}

.banner-resumo-valor {
  width: 100px; /* Ajuste conforme necessário */
  height: auto; /* Mantém a proporção da imagem */
  margin-left: 0px;
  text-align: right;
}

.banner-resumo-percentual {
  width: 60px; /* Ajuste conforme necessário */
  height: auto; /* Mantém a proporção da imagem */
  margin-right: 10px;
  text-align: right;
}

#title-resumo-categoria {
  display: flex; /* Ativa o Flexbox */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 2px;
  /* border: 2px solid #444; */
  border-radius: 5px;
  background-color: #cc4c5f;
  width: 98%;
  position: relative; /* Necessário para posicionamento absoluto dentro dos filhos */
  font-weight: bold;
  font-size: 20px;
  margin: 3px 10px 2px 10px;
}

.banner-resumo-categoria span {
  font-weight: bold;
}

.container-proximos-pendentes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 10px 10px 10px;
  box-sizing: border-box; /* Inclui padding e borda no tamanho total */
  overflow: hidden;
  margin-top: 3px;
  height: 400px;

  /* Estilização adicional */
  background-color: #ececec; /* Cor off-white */
  border: 3px solid #333; /* Borda grossa e escura */
  border-radius: 8px; /* Cantos arredondados para suavizar */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar destaque */
}

#title-proximos-pendentes {
  display: flex; /* Ativa o Flexbox */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 2px;
  /* border: 2px solid #444; */
  border-radius: 5px;
  background-color: #cc4c5f;
  width: 98%;
  position: relative; /* Necessário para posicionamento absoluto dentro dos filhos */
  font-weight: bold;
  font-size: 20px;
  margin: 3px 10px 2px 10px;
}

.banner-transacao-grid-homepage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 10px;
  width: 98vw;
  left: 2.5%;
  box-sizing: border-box; /* Inclui padding e borda no tamanho total */
  overflow: hidden;
  /* Para scroll */
  overflow-y: auto; /* Adiciona barra de rolagem vertical, se necessário */
  overflow-x: hidden; /* Evita barra de rolagem horizontal */
}

/* PAGINA INVESTIMENTOS */

.investments-container {
  display: fixed;
  flex-direction: column;
  padding: 10px;
  /* max-width: 1200px; */
  /* margin: 0 auto; */
  margin-top: 80px;
  gap: 5px;
}

.container-investing-resumo {
  width: 97.5vw; /* Largura do container */
  height: auto; /* Altura do container */
  border-radius: 8px; /* Bordas arredondadas */
  border: 1px solid black; /* Define espessura, estilo e cor da borda */
  position: fixed;
  background-color: #444;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
  padding: 0px 0px 3px 2px;
  z-index: 30;
}

.investing-resumo-title {
  position: absolute;
  top: -10px; /* Ajusta a posição do título */
  left: 10px; /* Alinha o título */
  padding: 1px 10px; /* Espaçamento interno do título */
  font-weight: bold; /* Deixa o texto em negrito */
  border-radius: 5px; /* Bordas arredondadas para o título */
  color: black; /* Cor do texto */
  background-color: #444;
  font-size: 14px; /* Tamanho da fonte */
}

.container-content-investing-resumo {
  margin-top: 15px; /* Espaço entre o título e o conteúdo */
  height: calc(100% - 20px); /* Ajusta o tamanho do conteúdo */
}

#add-button-investing {
  position: fixed;
  right: 5%;
  top: 11%;
}

.container-resumo-investing {
  display: grid; /* Define como um grid */
  grid-template-columns: repeat(2, 1fr); /* Três colunas de tamanho igual */
  grid-template-rows: repeat(3, auto); /* Duas linhas ajustando ao conteúdo */
  gap: 5px; /* Espaçamento entre os itens */
  padding: 3px; /* Espaçamento interno */
  width: 75%; /* Ajusta a largura ao container pai */
  max-width: 800px; /* Limita a largura máxima */
}

.container-resumo-investing div {
  flex: 1; /* Faz com que todos os divs internos tenham o mesmo tamanho */
  display: flex;
  flex-direction: column; /* Organiza o conteúdo em coluna */
  padding: 1px 5px;
  border: 2px solid #444;
  border-radius: 8px;
  box-sizing: border-box; /* Inclui o padding dentro da largura total */
}

.container-resumo-investing label {
  color: #000000;
  font-size: 10px;
  margin-bottom: 1px; /* Adiciona espaço entre o label e o valor */
  align-items: left;
}

.container-resumo-investing span {
  color: #000000;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 2px; /* Adiciona espaço entre o label e o valor */
  align-items: center;
  text-align: center;
  margin: 3px 0px 5px 0px;
}

.resumo-investing {
  background-color: slategray;
}

/* TABS DE INVESTING */
.tabs-container {
  width: 98vw;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: slategray;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid black; /* Define espessura, estilo e cor da borda */
  margin-top: 140px;
}

.tabs-wrapper {
  overflow-x: auto; /* Adiciona scroll horizontal quando necessário */
  white-space: nowrap; /* Impede que os botões quebrem de linha */
  width: 98vw; /* Garante que ocupa toda a largura */
}

.tabs {
  display: flex;
  background: #444;
  border-bottom: 1px solid darkslategrey;
  min-width: max-content; /* Faz a div se expandir com os botões */
  border-radius: 8px 8px 0px 0px;
}

.tab-button {
  flex-shrink: 0; /* Impede que os botões sejam reduzidos */
  padding: 2px 15px;
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  white-space: nowrap; /* Evita que o texto dos botões quebre */
  border-radius: 8px 8px 0px 0px;
  
}

.tab-button.active {
  background-color: slategray;
  border-bottom: 3px solid darkslategrey;
  font-weight: bold;
  border-radius: 8px 8px 0px 0px;
}

.tab-content {
  display: none;
  padding: 10px;
  font-size: 16px;
  color: #333;
}

.tab-content.active {
  display: block;
}

/* FORMS DE NOVOS DADOS DE TRANSACAO */
.btn-cadastro-investing {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.btn-cadastro-investing div {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
}

.btn-cadastro-investing img {
  height: 55px;
  width: auto;
}

.btn-tipo-cadastro-investing {
  background-color: slategray;
  height: 65px;
  color: white; /* Cor do texto */
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px; /* Cantos arredondados */
  cursor: pointer;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2); /* Sombrinha */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Animação */
}

/* FORM DE CAIXINHAS */
.container-inputs-investing {
  display: flex;
  flex-direction: column;
  align-items: center; /* Alinha os grupos de inputs ao centro */
  gap: 5px; /* Espaço entre cada grupo de inputs */
  max-height: 60vh; /* Mantém o limite de altura */
  overflow-y: auto; /* Adiciona rolagem interna se necessário */
  width: 100%;
  margin-top: 10px;
  margin-bottom: 15px;
}

.linha-inputs {
  display: flex;
  flex-direction: row;
  gap: 10px; /* Espaço entre eles */
  width: 100%;
}

.linha-inputs div {
  display: flex;
  flex-direction: column; /* Deixa o label sempre acima */
  width: 48%;
}

.linha-inputs input,
.linha-inputs select {
  width: 100%;
  box-sizing: border-box;
}

/* DROPDOWN DE INVESTIMETNOS NO FORM LANCAMENTOS */

.autocomplete-list {
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  list-style: none;
  padding: 0;
  z-index: 1000;
  cursor: pointer; /* Faz o cursor mudar ao passar sobre a opção */
}

.autocomplete-list li {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}

.autocomplete-list li:hover {
  background: #dbdada;
}

/* TABELA DE POSICAO INVESTING*/
/* Estiliza a TABELA pelo ID correto */
#tabela-posicao {
  width: 100%;
  border-collapse: collapse;
  margin-top: 3px;
  margin-bottom: 10px;
  font-size: 10px;
  color: black;
}

/* Estiliza as células (th e td) */
#tabela-posicao th,
#tabela-posicao td {
  border-collapse: collapse; /* Remove espaços entre as células */
  padding: 2px;
  text-align: center;
}

/* Estiliza o cabeçalho da tabela */
#tabela-posicao thead th {
  background-color: slategray; /* Cinza claro para diferenciar */
  font-weight: bold;
  padding: 2px;
  text-align: center;
  border-bottom: 2px solid darkslategray; /* Apenas borda inferior */
  font-size: 12px;
  position: sticky;
  top: -0.5px;
  z-index: 5;
}

#tabela-posicao tbody td {
  padding: 4px;
  text-align: center;
  border-bottom: 1px solid #eee; /* Apenas linha inferior */
}

/* Estiliza os inputs dentro da tabela */
#tabela-posicao input {
  width: 100%;
  border: none;
  text-align: center;
  font-size: 10px;
  background: lightgrey;
}

#tabela-posicao input:focus {
  outline: none;
  background-color: lightslategray;
  font-weight: bold;
}

#tabela-posicao tbody tr:hover {
  background-color: lightyellow; /* Efeito hover leve */
}

/* Opcional: Ajusta a largura das colunas */
#tabela-posicao th:nth-child(1),
#tabela-posicao td:nth-child(1) {
  width: 5%; /* Ajusta a coluna ID */
}

#tabela-posicao th:nth-child(2) {
  width: 46%; /* Ajusta a coluna de Investimentos */
}

#tabela-posicao td:nth-child(2) {
  text-align: left;
}

#tabela-posicao th:nth-child(3),
#tabela-posicao td:nth-child(3) {
  width: 18%; /* Ajusta a Data de Investimento */
}

#tabela-posicao th:nth-child(4),
#tabela-posicao td:nth-child(4) {
  width: 21%; /* Ajusta a coluna de Valor */
}

#tabela-posicao th:nth-child(5),
#tabela-posicao td:nth-child(5) {
  width: 5%; /* Ajusta a Moeda */
}

#scroll-meses-investing {
  margin-top: 0px;
  border-radius: 8px;
  margin-top: 2px;
  position: sticky;
  left: 1%;
  width: 98%;
}

#div-do-cabecalho-sticky-investing {
  position: sticky;
  z-index: 10;
  top: 0;
  background-color: whitesmoke;
}

#add-conta-button-posicao-investing {
  position: sticky;
  z-index: 10;
  bottom: 0px;
}

#close-btn-posicao-investing {
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 32px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  z-index: 2000;
}

#title-form-posicao-investing {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
}

#div-da-tabela-posicao {
  max-height: 500px;
  overflow: auto;
  margin-bottom: 15px;
}

#id-investimento-posicao {
  font-size: 14px;
}

/* ABA CONFIG */

/* Estilo da Tabela Resumo de Caixinhas */
#resumo-caixinhas {
  width: 80%; /* Ocupa 80% da largura da tela */
  margin: 30px auto; /* Centraliza a tabela na página */
  border-collapse: collapse; /* Remove espaçamentos internos da borda */
  font-family: Calibri, sans-serif;
  font-size: 18px;
  color: black; /* Fonte escura */
  text-align: center; /* Centraliza os textos */
  font-family: Calibri;
}

/* Estilo das Linhas e Células da Tabela */
#resumo-caixinhas td {
  padding: 15px; /* Aumenta o espaço interno */
  border-bottom: 1px solid #ddd; /* Linha divisória suave */
}

/* Botão de Deletar */
#resumo-caixinhas td ion-icon {
  background: grey;
  color: black;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease-in-out;
}

#resumo-caixinhas td ion-icon {
  margin: 0;
  line-height: 1;
}

#resumo-caixinhas td {
  text-align: center;
  vertical-align: middle;
}

/* Ícone de deletar (trash-bin) */
#resumo-caixinhas td ion-icon[name='trash-bin'] {
  background: #cc4c5f;
  color: white;
}

/* Ícone de edição (pencil) */
#resumo-caixinhas td ion-icon[name='build'] {
  background: #ffc000;
}

#resumo-caixinhas td ion-icon[name='trash-bin']:hover {
  background: #ca364d; /* Tom mais escuro ao passar o mouse */
}

#resumo-caixinhas td ion-icon[name='build']:hover {
  background: lightgoldenrodyellow; /* Tom mais escuro ao passar o mouse */
}

/* PROGRESS BAR */
.resumo-caixinha-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.progress-bar-container {
  width: 100%;
  height: 25px;
  background-color: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.progress-bar {
  height: 100%;
  background-color: cadetblue;
  width: 0%;
  transition: width 0.5s ease-in-out;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Faz os elementos se posicionarem corretamente */
  border-radius: 12px 0px 0px 12px;
}

#label-valor-investido {
  position: absolute;
  left: 10px; /* Mantém o texto alinhado à esquerda */
  color: black;
  font-weight: bold;
}

#label-valor-target {
  position: absolute;
  right: 10px; /* Mantém o texto alinhado à direita */
  color: black;
  font-weight: bold;
  z-index: 20;
}

/* 🔹 Estilização do gráfico de rosca */
.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 350px;
  height: 180px;
}

/* 🔹 Ajuste no tamanho do canvas */
.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block; /* Remove espaços extras */
  max-width: 100%;
  max-height: 100%;
}

.chart-text {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #333;
}

.div-rend-grafico {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 5px;
}

/* 🔹 Estilização da área de resumo (esquerda) */
.rendimentos-caixinha {
  display: flex;
  flex-direction: column; /* Empilha os elementos um sobre o outro */
  align-items: flex-start;
  gap: 5px;
}

/* 🔹 Estilização dos blocos de resumo */
.resumo-investing-caixinha {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #444444;
  padding: 1px 5px;
  border-radius: 8px;
  width: 100px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.resumo-investing-caixinha label {
  color: white;
  font-size: 10px;
  margin-bottom: 1px; /* Adiciona espaço entre o label e o valor */
  align-items: left;
}

.resumo-investing-caixinha span {
  color: white;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 2px; /* Adiciona espaço entre o label e o valor */
  align-items: center;
  text-align: center;
  margin: 1px 0px 3px 0px;
}

/* CAIXAS DE TARGET */

/* 🔹 Container Principal da Data Target */
.div-datas-target {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

/* 🔹 Label "Target Date" */
.label-target-date {
  width: 100%;
  background-color: #2c3e50;
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  padding: 5px;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0px;
}

/* 🔹 Estilização das caixas de dados */
.box-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  padding: 10px 10px;
  margin: 2px;
  border-radius: 5px;
  font-weight: bold;
}

/* 🔹 Definição de cores */
.anos,
.meses {
  background-color: #2980b9;
  color: white;
}

.nper {
  background-color: #f4d03f;
  color: rgb(41, 41, 41);
}

.idade {
  background-color: goldenrod;
  color: rgb(41, 41, 41);
}

/* 🔹 Estilização dos números */
.box-data .numero {
  font-size: 24px;
  font-weight: bold;
}

/* 🔹 Estilização das descrições (ANOS, MESES, NPER) */
.box-data .descricao {
  font-size: 12px;
  font-weight: bold;
  margin-top: 5px;
  text-transform: uppercase;
}

/* GRAFICO DE LINHA INVESTING */
.grafico-investimentos-meta {
  width: 100%;
  height: 200px;
  background-color: #2c3e50;
  border-radius: 5px;
}

/* TABELA INVESTIMENTOS */
.div-tabela-investimentos {
  background-color: whitesmoke;
  height: 250px; /* Altura fixa para ativar o scroll */
  overflow-y: auto; /* Ativa o scroll vertical quando necessário */
  overflow-x: hidden; /* Esconde o scroll horizontal (opcional) */
  border: 1px solid #ccc; /* Borda opcional para melhor visualização */
  width: 100%;
}

#resumo-lista-investimentos {
  width: 100%;
  font-size: 10px;
  border-collapse: collapse;
}

/* Estiliza o cabeçalho da tabela */
#resumo-lista-investimentos thead {
  position: sticky;
  top: 0;
  background-color: slategray; /* Cor de fundo do cabeçalho */
  color: black; /* Texto branco para melhor contraste */
  font-weight: bold;
  font-size: 12px; /* Tamanho da fonte do cabeçalho */
  border-bottom: solid 2px darkslategray;
  text-align: center;
}


/* Estiliza as células da tabela */
#resumo-lista-investimentos tbody td {
  font-size: 10px; /* Tamanho da fonte das células */
  text-align: center;
  border-bottom: 1px solid #eee; /* Linha cinza leve para separar as linhas */
}

/* Ajusta espaçamento das colunas */
#resumo-lista-investimentos th,
#resumo-lista-investimentos td {
  white-space: nowrap; /* Impede quebra de linha automática */
}

/* Ícones edit e delete com espaçamento */
#resumo-lista-investimentos ion-icon {
  cursor: pointer;
  margin: 0 5px;
  height: 15px;
  margin-top: 2px;
}

/* Torna a tabela responsiva */
@media (max-width: 768px) {
  #resumo-lista-investimentos {
    font-size: 9px; /* Reduz fonte para telas menores */
  }

  #resumo-lista-investimentos thead th,
  #resumo-lista-investimentos tbody td {
    padding: 1px;
  }
}

#del-investimento-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #cc4c5f;
  margin-top: 10px;
  align-self: center;
}

#del-investimento-button :hover {
  background-color: #c97380;
}

#edit-lancamentos-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: slategray;
  margin-top: 10px;
  align-self: center;
}

#edit-lancamentos-button :hover {
  background-color: darkslategray;
}

#form-novo-investing {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#title-form-novo-investimento {
  align-self: flex-start;
}


/* PAGINA CONFIG */
body.configuracoes {
  font-family: 'Calibri', sans-serif;
  margin: 0;
  padding: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 98vh;
  background-color: #f4f4f4;
}

.logout-container {
  position: relative;
  margin: 15px 15px;
  display: flex;
  align-items: center;
  background: white;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  width: 150px;
}

.logout-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  
}

.logout-button img {
  width: 24px;
  height: 24px;
}

.logout-label {
  margin-left: 10px;
  font-size: 16px;
  color: #cc4c5f;
  font-weight: bold;
}

.tabs-container-config {
  width: 98vw;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: slategray;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid black; /* Define espessura, estilo e cor da borda */
  margin-top: 55px;
  height: 790px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#tabs-content-config {
  margin-top: 2px;
  border-radius: 2px;
  height: 700px;
  width: 98%;
  overflow-y: auto;
  background-color: rgb(201, 201, 201);
}

#tabela-drivers {
  width: 98%;
  border-collapse: collapse;
  margin-top: 10px;
}

#tabela-drivers thead {
  background: #1d2d3d;
  color: white;
  font-size: 14px;
}

#tabela-drivers th, td {
  padding: 1px;
  border: 1px solid #ddd;
  text-align: center;
}

button.salvaDriver {
  font-family: 'Calibri';
  padding: 7px 15px;
  background: slategrey;
  color: black;
  font-weight: bold;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.input-ipca, .input-dolar {
  width: 80px;
  padding: 1px;
  text-align: center;
}

.container-header-drivers {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filtro-anos {
  margin-right: 20px;
  font: "Calibri";
  font-weight: bold;
  font-size: 14px;
}

#select-ano {
  width: 70px;
  padding: 2px;
}

.container-botoes-form-lancamentos {
  display: inline-flex;
  flex-direction: row; /* Alinha os itens verticalmente */
  gap: 4px; /* Espaçamento entre os botões */
  align-items: flex-start;
}

.container-botoes-form-lancamentos div {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-end;
}

.container-botoes-form-lancamentos label {
  display: inline-flex;
  align-items: middle; /* Alinha o botão com o texto */
  gap: 2px; /* Espaçamento entre o botão e o texto */
  font-size: 14px; /* Ajuste do tamanho do texto */
  margin-right: 5px;
}

.container-botoes-form-lancamentos img {
  display: inline-flex;
  align-items: middle;
  gap: 2px; /* Espaçamento entre o botão e o texto */
  width: 20px;
  height: 20px;
}

/* TABELA DE POSICAO EDIT LANCAMENTO*/
/* Estiliza a TABELA pelo ID correto */
#tabela-edit-lancamento {
  width: 100%;
  border-collapse: collapse;
  margin-top: 3px;
  margin-bottom: 10px;
  font-size: 10px;
  color: black;
}

/* Estiliza as células (th e td) */
#tabela-edit-lancamento th,
#tabela-edit-lancamento td {
  border-collapse: collapse; /* Remove espaços entre as células */
  padding: 2px;
  text-align: center;
}

/* Estiliza o cabeçalho da tabela */
#tabela-edit-lancamento thead th {
  background-color: slategray; /* Cinza claro para diferenciar */
  font-weight: bold;
  padding: 2px;
  text-align: center;
  border-bottom: 2px solid darkslategray; /* Apenas borda inferior */
  font-size: 12px;
  position: sticky;
  top: -0.5px;
  z-index: 5;
}

#tabela-edit-lancamento tbody td {
  padding: 4px;
  text-align: center;
  border-bottom: 1px solid #eee; /* Apenas linha inferior */
}

/* Estiliza os inputs dentro da tabela */
#tabela-edit-lancamento input {
  width: 100%;
  border: none;
  text-align: center;
  font-size: 10px;
  background: lightgrey;
}

#tabela-edit-lancamento input:focus {
  outline: none;
  background-color: lightslategray;
  font-weight: bold;
}

#tabela-edit-lancamento tbody tr:hover {
  background-color: lightyellow; /* Efeito hover leve */
}

/* Opcional: Ajusta a largura das colunas */
#tabela-edit-lancamento th:nth-child(1),
#tabela-edit-lancamento td:nth-child(1) {
  width: 15%; /* Ajusta a coluna ID */
}

#tabela-edit-lancamento th:nth-child(2) {
  width: 30%; /* Ajusta a coluna de Investimentos */
}

#tabela-edit-lancamento th:nth-child(3),
#tabela-edit-lancamento td:nth-child(3) {
  width: 20%; /* Ajusta a Data de Investimento */
}

#tabela-edit-lancamento th:nth-child(4),
#tabela-edit-lancamento td:nth-child(4) {
  width: 25%; /* Ajusta a coluna de Valor */
}

#tabela-edit-lancamento th:nth-child(5),
#tabela-edit-lancamento td:nth-child(5) {
  width: 10%; /* Ajusta a Moeda */
}

#container-botoes-lanc-investing {
  align-items: center;
}


/* LOADING FEATURE */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#loading-overlay.show {
  visibility: visible;
  opacity: 1;
}

.loading-content {
  text-align: center;
  color: white;
  font-size: 20px;
}

.loading-content img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}


/* ORDEM DAS TELAS DOS POPUPS */
#form_posicao_investimento {
  z-index: 30;
}

#form_edit_lancamento {
  z-index: 110;
}

#form_novo_investimento {
  z-index: 100;
}

/* PAGINA CALCULADORA */
.calculator-container {
  display: fixed;
  flex-direction: column;
  padding: 10px;
  /* max-width: 1200px; */
  /* margin: 0 auto; */
  margin-top: 80px;
  gap: 5px;
}

.container-de-calculo {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 10px;
  max-height: 800px;
  gap: 5px;
  /* max-width: 1200px; */
  /* margin: 0 auto; */
  /* background-color: darkkhaki; */
  border-radius: 6px;
  border: 1px solid #ddd;
  width: 100%;
}

#death-calculator-title {
  position: absolute;
  top: 83px; /* Ajusta a posição do título */
  left: 22px; /* Alinha o título */
  padding: 1px 10px; /* Espaçamento interno do título */
  font-weight: bold; /* Deixa o texto em negrito */
  border-radius: 5px; /* Bordas arredondadas para o título */
  color: black; /* Cor do texto */
  background-color: darkcyan;
  font-size: 14px; /* Tamanho da fonte */
}

.inputs-container-de-calculo {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
  padding: 10px;
  max-height: 800px;
}

.inputs-container-de-calculo label {
  font-size: 10px;
  align-items: left;
}

.inputs-container-de-calculo input {
  width: 100px;
  border-radius: 7px;
  font-size: 14px;
  padding-left: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  background-color: lightgray;
}

.valores-referencia {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  width: 100px;
  height: 150px;
  background-color: slategray;
  align-self: center;
  margin-top: 10px;
  justify-content: space-around;
}

.valores-referencia label {
  font-size: 10px;
  margin-left: 5px;
  margin-bottom: -10px;
  
}

.valores-referencia span {
  font-size: 16px;
  font-weight: bold;
  align-self: center;
  
}

.resultado-calculator {
  border-radius: 6px;
  width: 130px;
  height: 40px;
  background-color: slategray;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease;
  font-size: 24px;
  margin-top: 25px;
}

.botoes-death-calculator {
  display: flex;
  flex-direction: column;
  /* justify-content: space-evenly; */
}

.container-sub-resultados-death-calculator {
  display: flex;
  justify-content: space-around;
  color: darkgray;
  font-weight: bold;
  font-size: 15px;
}

.container-sub-resultados-death-calculator-label {
  display: flex;
  justify-content: space-around;
  color: darkgray;
  font-weight: bold;
  font-size: 7px;
  margin-top: -2px;
}

.imagem-death-calculator {
  align-self: center;
  margin-top: 15px;
}

.imagem-death-calculator button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.imagem-death-calculator img {
  /* width: 50px;
  /* height: 50px; */
  max-width: 95px; /* Largura máxima da imagem */
  max-height: 95px; /* Altura máxima da imagem */
  object-fit: contain; /* Ajusta a imagem sem distorcer */
  cursor: pointer;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); */
  transition: background-color 0.2s ease;
}

#input-data-morte {
  width: 30%;
  height: 25px;
  text-align: center;
  color: black;
  font-weight: bold;
}

.dados-container {
  display: flex;
  flex-direction: row;
}

.dados-container label {
  align-self: center;
  margin-right: 10px;
}

.dados-container span {
  align-self: center;
  margin-left: 5px;
}

#salvaDados {
  height: 40px;
  position: fixed;
  right: 20%;
}

.organizador-calculo-inputs-com-grafico {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95vw;
}

#grafico-death-calculator {
  width: 100%;
  align-self: center;
  background-color: #2c3e50;
  border-radius: 5px;
}

.filtro-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px; /* espaçamento entre os checkboxes */
}

.filtro-checkboxes input[type="checkbox"] {
  transform: scale(1.15); /* aumenta o tamanho */
  margin-right: 6px;
}

.filtro-checkboxes label {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

#btn-filtrar {
  margin-top: 10px;
}

#form_filtro_transacao_popup {
  z-index: 10000;
}

.popup-content-filtro {
  background-color: whitesmoke;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

.input-transacao-data {
  padding: 0.5rem;
  font-size: 18px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  height: 40px;
  width: 157px;
  font-family: 'Calibri', sans-serif;
}

.campo-data label{
  font-weight: bold;
  font-size: 12px;
}
  
.banner-transacao-grid.filtrado {
  transition: all 0.3s ease-in-out;
  margin-top: 160px;
  padding-top: 2px;
}

.add-button.filtrado {
  background-color: #dcedc8;
  border: 2px solid #0b3d0b;
  border-radius: 8px;
  padding: 6px;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 0 6px rgba(11, 61, 11, 0.4);
  padding: 2px;
}

.relatorios-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  margin-top: 78px;
}

/* Estilos mínimos só para a nova toolbar; mantenha seu style.css como fonte principal */
.relatorios-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.toolbar-relatorios {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr auto; /* Macro | Nome do relatório | Botão */
  gap: 12px;
  align-items: center;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-top: 65px;
  width: 92vw; /* ocupa toda a largura da viewport */
}

.toolbar-relatorios .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toolbar-relatorios select {
  width: 100%;
  padding: 10px 4px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--input, #fff);
  font-size: .9rem;
}
.btn-executar-relatorio {
  height: 35px;
  padding: 0 6px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: var(--primary, #2c457a);
  color: var(--primary-foreground, #fff);
  font-weight: 600;
  letter-spacing: .2px;
}
 
.filtros-relatorios {
  grid-column: 1 / -1; /* ocupa toda a largura da toolbar */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0px 6px;
  align-items: end;
}

.filtros-relatorios label {
  margin-top: 2px;
  margin-bottom: -6px;
  font-size: .8rem;
  font-weight: bold;
}

.filtros-relatorios select,
.filtros-relatorios input {
  padding: 2px;
}

.filtros-relatorios .field { grid-column: span 3; }
.filtros-relatorios .field.w-2 { grid-column: span 2; }
.filtros-relatorios .field.w-4 { grid-column: span 4; }

.conteudo-relatorio {
  min-height: 40vh;
  border: 1.5px dashed var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted-foreground, #6b7280);
  width: 95%;
  align-self: center;
}

#chart-cat {
  height: auto !important;
  width: 100% !important;  
}