/* Dicas (tooltips) — Tooltip da Syncfusion (js/dicas.js) com a cara do site: cartão navy, faixa verde-água à esquerda,
   fonte do site e seta para o elemento. O tema material3 da Syncfusion (lib/syncfusion/tooltip-material3.css) dá a
   estrutura; as cores e a fonte vêm daqui (o CSS base com as variáveis e a fonte de ícones da Syncfusion não é carregado). */
.e-tooltip-wrap.pf-dica.e-popup {
  max-width: min(280px, calc(100vw - 16px)); border: 0; border-radius: 7px; opacity: 1;
  background: #221d3a;
  box-shadow: inset 3px 0 0 #7fd4c0, 0 10px 26px rgba(34, 29, 58, .3), 0 0 0 1px rgba(127, 212, 192, .16);
}
.e-tooltip-wrap.pf-dica.e-popup-close { display: none; }
/* O tema pinta o conteúdo com o fundo do cartão (inherit) por cima da faixa verde-água: aqui ele é transparente. */
.e-tooltip-wrap.pf-dica .e-tip-content {
  padding: 7px 12px 8px 14px; color: #f6f5fc; background: transparent; line-height: 1.4;
  font: 500 12.5px/1.4 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .005em; text-align: left;
  white-space: normal; overflow-wrap: anywhere;
}
/* A ponta interna da seta do tema é um glifo da fonte de ícones: a seta fica só no triângulo de borda, na cor do cartão.
   As bordas vão inteiras (a do tema usa uma variável de cor que não existe aqui, o que anula a declaração toda). */
.e-tooltip-wrap.pf-dica .e-arrow-tip-inner { display: none; }
.e-tooltip-wrap.pf-dica .e-arrow-tip-outer.e-tip-bottom { border-top: 8px solid #221d3a; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.e-tooltip-wrap.pf-dica .e-arrow-tip-outer.e-tip-top { border-bottom: 8px solid #221d3a; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.e-tooltip-wrap.pf-dica .e-arrow-tip-outer.e-tip-left { border-right: 8px solid #221d3a; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.e-tooltip-wrap.pf-dica .e-arrow-tip-outer.e-tip-right { border-left: 8px solid #221d3a; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }