/* ==========================================================================
   Financeiro — telas do módulo (origem própria, subdomínio do financeiro).
   Cores, tipografia, controles e barra de abas: docs/financeiro/mockup/telas.html.
   Tema escuro: [data-theme="dark"], com a paleta escura do sistema
   (assets/css/root.css do sistema operacional).
   Nada externo: a CSP do vhost só permite 'self' (sem Google Fonts; o Inter
   entra se estiver instalado, senão a fonte do sistema operacional).
   ========================================================================== */

:root {
  color-scheme: light;
  --fin-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fin-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --fin-fundo: #eef1ef;
  --fin-superficie: #ffffff;
  --fin-superficie-alt: #f9f9f9;
  --fin-topo: #f7fcfa;
  --fin-suave: #eef4ee;
  --fin-suave-hover: #e1f3eb;
  --fin-linha-hover: #f4f8f5;
  --fin-borda: #dddddd;
  --fin-borda-suave: #e9ecef;
  --fin-borda-destaque: #cfe0d6;

  --fin-texto: #333333;
  --fin-texto-forte: #1d2a24;
  --fin-texto-suave: #6c757d;
  --fin-texto-apagado: #9aa5a0;

  --fin-primaria: #4a665a;
  --fin-primaria-hover: #3c5449;
  --fin-sobre-primaria: #ffffff;
  --fin-acento: #7da78a;

  --fin-perigo: #a8412c;
  --fin-perigo-hover: #8f3524;
  --fin-sobre-perigo: #ffffff;
  --fin-perigo-fundo: #f8e6df;
  --fin-perigo-borda: #e0b3a2;
  --fin-perigo-texto: #8c3a26;

  --fin-aviso-fundo: #fdf6e3;
  --fin-aviso-borda: #e3cf9a;
  --fin-aviso-texto: #7a5409;

  --fin-ok-fundo: #ddece2;
  --fin-ok-borda: #b9d7c4;
  --fin-ok-texto: #2f6b4f;

  --fin-pendente-fundo: #fdf0e8;
  --fin-pendente-texto: #a8412c;

  --fin-info-fundo: #f7fcfa;
  --fin-info-borda: #cfe0d6;
  --fin-info-texto: #333333;

  --fin-sombra-modal: 0 18px 60px rgba(20, 40, 30, 0.22);
  --fin-sombra-cartao: 0 10px 34px rgba(20, 40, 30, 0.13);
  --fin-foco: 0 0 0 3px rgba(74, 102, 90, 0.22);
  --fin-raio: 10px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --fin-fundo: #1a201d;
  --fin-superficie: #242b27;
  --fin-superficie-alt: #2a322e;
  --fin-topo: #1f2522;
  --fin-suave: #2d3d35;
  --fin-suave-hover: #2f3833;
  --fin-linha-hover: #2c3631;
  --fin-borda: #3a4540;
  --fin-borda-suave: #2f3833;
  --fin-borda-destaque: #3d5347;

  --fin-texto: #e6e8e7;
  --fin-texto-forte: #f2f4f3;
  --fin-texto-suave: #a8b0ad;
  --fin-texto-apagado: #7f8a85;

  --fin-primaria: #7da78a;
  --fin-primaria-hover: #9bc2a8;
  --fin-sobre-primaria: #16201d;
  --fin-acento: #7da78a;

  --fin-perigo: #e07a5f;
  --fin-perigo-hover: #ea927a;
  --fin-sobre-perigo: #16201d;
  --fin-perigo-fundo: rgba(220, 53, 69, 0.18);
  --fin-perigo-borda: rgba(220, 53, 69, 0.45);
  --fin-perigo-texto: #f5b3b8;

  --fin-aviso-fundo: rgba(255, 193, 7, 0.16);
  --fin-aviso-borda: rgba(255, 193, 7, 0.45);
  --fin-aviso-texto: #ffda6a;

  --fin-ok-fundo: rgba(25, 135, 84, 0.2);
  --fin-ok-borda: rgba(25, 135, 84, 0.5);
  --fin-ok-texto: #a3cfbb;

  --fin-pendente-fundo: rgba(224, 122, 95, 0.18);
  --fin-pendente-texto: #f0a48f;

  --fin-info-fundo: #1f2522;
  --fin-info-borda: #3d5347;
  --fin-info-texto: #e6e8e7;

  --fin-sombra-modal: 0 18px 60px rgba(0, 0, 0, 0.55);
  --fin-sombra-cartao: 0 10px 34px rgba(0, 0, 0, 0.45);
  --fin-foco: 0 0 0 3px rgba(125, 167, 138, 0.35);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fin-fonte);
  font-size: 14px;
  line-height: 1.45;
  color: var(--fin-texto);
  background: var(--fin-fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  color: var(--fin-texto-forte);
  font-weight: 600;
  letter-spacing: -0.25px;
}

a { color: var(--fin-primaria); }
a:hover { color: var(--fin-primaria-hover); }
svg { flex-shrink: 0; }

/* ---------- botões ---------- */
.fin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--fin-raio);
  background: transparent;
  color: var(--fin-texto);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fin-btn:focus-visible { outline: none; box-shadow: var(--fin-foco); }
.fin-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.fin-btn--primario { background: var(--fin-primaria); color: var(--fin-sobre-primaria); font-weight: 600; }
.fin-btn--primario:hover:not([disabled]) { background: var(--fin-primaria-hover); color: var(--fin-sobre-primaria); }
.fin-btn--secundario { background: var(--fin-superficie); border-color: var(--fin-acento); color: var(--fin-primaria); }
.fin-btn--secundario:hover:not([disabled]) { background: var(--fin-suave-hover); color: var(--fin-primaria); }
.fin-btn--neutro { background: var(--fin-superficie); border-color: var(--fin-borda); color: var(--fin-texto-suave); }
.fin-btn--neutro:hover:not([disabled]) { background: var(--fin-suave); color: var(--fin-texto); }
.fin-btn--perigo { background: var(--fin-perigo); color: var(--fin-sobre-perigo); font-weight: 600; }
.fin-btn--perigo:hover:not([disabled]) { background: var(--fin-perigo-hover); color: var(--fin-sobre-perigo); }
.fin-btn--bloco { width: 100%; }
.fin-btn--pequeno { height: 30px; padding: 0 11px; gap: 5px; border-radius: 8px; font-size: 12.5px; }

.fin-btn[aria-busy="true"]::before {
  content: '';
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fin-gira 0.7s linear infinite;
}
@keyframes fin-gira { to { transform: rotate(360deg); } }

.fin-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fin-primaria);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.fin-link:hover { color: var(--fin-primaria-hover); text-decoration: underline; }
.fin-link:focus-visible { outline: 2px solid var(--fin-primaria); outline-offset: 2px; border-radius: 4px; }

.fin-icone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--fin-texto-suave);
  cursor: pointer;
}
.fin-icone-btn:hover { background: var(--fin-suave); color: var(--fin-texto); }
.fin-icone-btn:focus-visible { outline: none; box-shadow: var(--fin-foco); }

/* botão de tema: mostra o ícone da escolha guardada (claro, escuro, automático) */
.fin-tema-icone { display: none; }
[data-tema-escolha="light"] .fin-tema-icone--light,
[data-tema-escolha="dark"] .fin-tema-icone--dark,
[data-tema-escolha="auto"] .fin-tema-icone--auto { display: block; }

/* ---------- formulários ---------- */
.fin-grupo { display: flex; flex-direction: column; margin: 0 0 16px; }
.fin-grupo--ultimo { margin-bottom: 0; }
.fin-fieldset { min-width: 0; padding: 0; border: 0; }

.fin-rotulo {
  display: flex;
  align-items: center;
  margin: 0 0 7px;
  padding: 0;
  color: var(--fin-texto-suave);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.fin-campo {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--fin-borda);
  border-radius: var(--fin-raio);
  background: var(--fin-superficie);
  color: var(--fin-texto);
  font: inherit;
  font-size: 13.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fin-campo::placeholder { color: var(--fin-texto-apagado); }
.fin-campo:focus { outline: none; border-color: var(--fin-primaria); box-shadow: var(--fin-foco); }
textarea.fin-campo { height: auto; min-height: 90px; padding: 10px 12px; line-height: 1.45; resize: vertical; }

.fin-contador {
  margin-top: 5px;
  color: var(--fin-texto-apagado);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

input[type="checkbox"],
input[type="radio"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--fin-primaria);
}

/* ---------- alertas (erro acionável, resultado) ---------- */
.fin-alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid var(--fin-perigo-borda);
  border-radius: 8px;
  background: var(--fin-perigo-fundo);
  color: var(--fin-perigo-texto);
  font-size: 13px;
  line-height: 1.45;
}
.fin-alerta > svg { margin-top: 1px; }
.fin-alerta-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fin-alerta-texto > div + div { margin-top: 3px; }
.fin-alerta--aviso { border-color: var(--fin-aviso-borda); background: var(--fin-aviso-fundo); color: var(--fin-aviso-texto); }
.fin-alerta--ok { border-color: var(--fin-ok-borda); background: var(--fin-ok-fundo); color: var(--fin-ok-texto); }
.fin-alerta--info { border-color: var(--fin-info-borda); background: var(--fin-info-fundo); color: var(--fin-info-texto); }

/* ---------- marca ---------- */
.fin-logo { display: block; height: 36px; width: auto; object-fit: contain; }
/* Tema escuro: a versao branca da logo, como o sistema faz em .logo-navbar (global.css). */
[data-theme="dark"] .fin-logo { content: url("../img/logo-branca.png"); }
.fin-modulo {
  padding-left: 12px;
  border-left: 1px solid var(--fin-borda);
  color: var(--fin-texto-suave);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- casca ---------- */
.fin-app { display: flex; flex-direction: column; min-height: 100vh; background: var(--fin-superficie); }

.fin-topo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid var(--fin-borda);
  background: var(--fin-topo);
}
.fin-topo-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fin-topo-acoes { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fin-usuario { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 280px; color: var(--fin-texto); font-size: 14px; }
.fin-usuario > svg { color: var(--fin-texto-suave); }
.fin-usuario-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fin-abas {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  column-gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--fin-borda);
  background: var(--fin-superficie);
}
.fin-aba {
  margin-bottom: -1px;
  padding: 14px 2px;
  border-bottom: 2px solid transparent;
  color: var(--fin-texto-suave);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.fin-aba:hover { color: var(--fin-primaria); }
.fin-aba[aria-current="page"] { border-bottom-color: var(--fin-primaria); color: var(--fin-primaria); font-weight: 600; }
.fin-aba:focus-visible { outline: 2px solid var(--fin-primaria); outline-offset: -3px; border-radius: 4px; }

.fin-conteudo { flex: 1; padding: 20px 24px 32px; }

.fin-cabecalho-painel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.fin-titulo-painel { font-size: 18px; }
.fin-acoes { display: flex; align-items: center; gap: 10px; }

.fin-secao {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px;
  color: var(--fin-texto-suave);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.fin-contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 50px;
  background: var(--fin-suave);
  color: var(--fin-primaria);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.fin-contagem:empty { display: none; }

/* aba ainda sem conteúdo: só o nome */
.fin-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 340px;
  border: 1px dashed var(--fin-borda);
  border-radius: var(--fin-raio);
  color: var(--fin-texto-apagado);
}
.fin-vazio h2 { color: var(--fin-texto-suave); font-size: 16px; }

/* ---------- tabelas ---------- */
.fin-tabela-caixa {
  overflow-x: auto;
  border: 1px solid var(--fin-borda);
  border-radius: var(--fin-raio);
  background: var(--fin-superficie);
}
.fin-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fin-tabela th {
  padding: 11px 10px;
  border-bottom: 1px solid var(--fin-borda);
  background: var(--fin-suave);
  color: var(--fin-primaria);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.fin-tabela td { padding: 11px 10px; border-bottom: 1px solid var(--fin-borda-suave); vertical-align: middle; }
.fin-tabela th:first-child,
.fin-tabela td:first-child { padding-left: 14px; }
.fin-tabela th:last-child,
.fin-tabela td:last-child { padding-right: 14px; }
.fin-tabela tbody tr:last-child td { border-bottom: 0; }
.fin-tabela tbody tr:hover td { background: var(--fin-linha-hover); }
.fin-tabela .fin-col-acoes { width: 1%; text-align: right; white-space: nowrap; }
.fin-tabela th .onb-help { text-transform: none; }

.fin-lista-vazia { padding: 18px 14px; color: var(--fin-texto-apagado); text-align: center; }
.fin-linha-revogada td { color: var(--fin-texto-suave); }
.fin-nome-celula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fin-forte { color: var(--fin-texto-forte); font-weight: 500; }
.fin-apagado { color: var(--fin-texto-suave); }
.fin-nowrap { white-space: nowrap; }
.fin-motivo { max-width: 340px; overflow-wrap: anywhere; }
.fin-codigo { font-family: var(--fin-fonte-mono); font-size: 11.5px; }

.fin-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.fin-pill--ok { background: var(--fin-ok-fundo); color: var(--fin-ok-texto); }
.fin-pill--pendente { background: var(--fin-pendente-fundo); color: var(--fin-pendente-texto); }
.fin-pill--inativo { border: 1px solid var(--fin-borda); background: var(--fin-superficie-alt); color: var(--fin-texto-suave); }

.fin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 3px 2px 8px;
  border-radius: 6px;
  background: var(--fin-suave);
  color: var(--fin-primaria);
  font-family: var(--fin-fonte-mono);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.fin-chip--so-texto { padding-right: 8px; }
.fin-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.fin-chip-x:hover { background: var(--fin-perigo-fundo); color: var(--fin-perigo); }
.fin-chip-x:focus-visible { outline: 2px solid var(--fin-primaria); outline-offset: 1px; }

/* ---------- modais (dialog) ---------- */
.fin-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--fin-superficie);
  color: var(--fin-texto);
  box-shadow: var(--fin-sombra-modal);
}
.fin-modal--estreito { width: min(440px, calc(100vw - 32px)); }
.fin-modal[open] { display: flex; flex-direction: column; }
/* ::backdrop não herda variáveis em navegador antigo: cor literal */
.fin-modal::backdrop { background: rgba(20, 30, 25, 0.45); }
[data-theme="dark"] .fin-modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.fin-modal > form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.fin-modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 22px;
  border-bottom: 1px solid var(--fin-borda);
  background: var(--fin-topo);
}
.fin-modal-titulo { color: var(--fin-primaria); font-size: 16px; }
.fin-modal-corpo { flex: 1; min-height: 0; padding: 18px 22px; overflow-y: auto; }
.fin-modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--fin-borda);
  background: var(--fin-superficie-alt);
}

/* ---------- listas de escolha (busca de usuário, permissões) ---------- */
.fin-resultados {
  max-height: 232px;
  margin: 8px 0 0;
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--fin-borda);
  border-radius: var(--fin-raio);
  background: var(--fin-superficie);
  list-style: none;
}
.fin-resultados--fixo { max-height: none; margin-top: 0; }
.fin-resultados > li + li { border-top: 1px solid var(--fin-borda-suave); }
.fin-opcao { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.fin-opcao:hover { background: var(--fin-linha-hover); }
.fin-opcao--inativa { cursor: default; }
.fin-opcao--inativa:hover { background: transparent; }
.fin-opcao-textos { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.fin-opcao-nome { color: var(--fin-texto-forte); font-weight: 500; overflow-wrap: anywhere; }
.fin-opcao-sub { color: var(--fin-texto-suave); font-size: 12px; overflow-wrap: anywhere; }
.fin-busca-estado { margin-top: 8px; color: var(--fin-texto-apagado); font-size: 12.5px; }
.fin-selecionado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--fin-borda-destaque);
  border-radius: var(--fin-raio);
  background: var(--fin-info-fundo);
}

/* ---------- entrada (login, definir senha) ---------- */
.fin-pagina-entrada {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
  background: var(--fin-fundo);
}
.fin-cartao {
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid var(--fin-borda);
  border-radius: 12px;
  background: var(--fin-superficie);
  box-shadow: var(--fin-sombra-cartao);
}
.fin-cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--fin-borda);
  background: var(--fin-topo);
}
.fin-cartao-corpo { padding: 24px 26px 26px; }
.fin-cartao-titulo { margin-bottom: 18px; font-size: 18px; }
.fin-cartao-rodape { display: flex; justify-content: center; margin-top: 16px; }
.fin-cartao .fin-btn--bloco { margin-top: 4px; }
.fin-tema-flutuante { position: fixed; top: 14px; right: 14px; }
.fin-carregando { display: flex; justify-content: center; padding: 22px 0; }
.fin-girando {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--fin-borda);
  border-top-color: var(--fin-primaria);
  border-radius: 50%;
  animation: fin-gira 0.8s linear infinite;
}

/* ---------- telas estreitas ---------- */
@media (max-width: 720px) {
  .fin-topo { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 14px; }
  .fin-logo { height: 30px; }
  .fin-usuario { max-width: 150px; }
  .fin-abas { column-gap: 18px; padding: 0 14px; }
  .fin-conteudo { padding: 16px 14px 28px; }
  .fin-cartao-topo, .fin-cartao-corpo { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .fin-btn[aria-busy="true"]::before,
  .fin-girando { animation-duration: 2.4s; }
  .fin-btn, .fin-campo { transition: none; }
}

/* ---------- ícone de ajuda ----------
   Copiado de assets/css/global.css da branch origin/main_rafa_hml (bloco
   'Tooltip "?"', ~linha 5059, com o :hover e a variante [data-theme="dark"]),
   em 15/09/2026. Ainda não está no main_hml; o global.css do sistema não muda. */
/* Tooltip "?" — bolinha cinza redonda com pergunta. Substitui textos longos
   de help dentro de formulários. Tooltip nativo via atributo `title`. */
.onb-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #dce8e0;
    color: #4a665a;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: help;
    margin-left: 0.3rem;
    transition: background 0.15s ease;
    border: none;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
}
.onb-help:hover {
    background: #7da78a;
    color: #fff;
}
.onb-help::after { content: '?'; }

[data-theme="dark"] .onb-help {
    background: #2d4438;
    color: #b8cabf;
}
[data-theme="dark"] .onb-help:hover {
    background: #7da78a;
    color: #16201d;
}