/* ===================================================================
 * SHELL / LAYOUT DO INDEX.JSP (header roxo, toolbar clara, rodape)
 * Reescrito do zero (US #3928, Fase 2) depois de multiplas rodadas de
 * remendos incrementais em cima do style.css legado causarem regressoes
 * em cadeia. Este arquivo e' o UNICO ponto de verdade pro esqueleto
 * flexbox do #topo/#conteudo/#rodape e pros componentes de busca
 * reutilizaveis (.geosite-search*). Cores/alturas alinhadas ao mockup de
 * referencia (frontend/src/views/mapa/MapaView.vue).
 *
 * #conteudo (menu de camadas + mapa) fica FORA deste arquivo -- mantem
 * dgLayout/layout="border" como esta, area ja estabilizada em sessao
 * anterior e fora do escopo desta reescrita. So' o necessario pra ele se
 * comportar certo dentro da coluna flex (#app-conteudo abaixo) esta aqui.
 * =================================================================== */

/* ---------- Design tokens (padronizacao) ----------
 * Escala unica de border-radius e cores da marca, consumida por todo o
 * header/toolbar/menu E pelo override do Bootstrap em include/bootstrap/
 * override/bootstrap.css (custom properties resolvem no :root indepen-
 * dente da ordem dos arquivos no bundle). Ajuste aqui = muda em todo lugar. */
:root {
	--geo-radius-xs: 3px;   /* detalhes minimos */
	--geo-radius-sm: 4px;   /* itens de lista, chips */
	--geo-radius-md: 6px;   /* botoes, inputs, pilulas */
	--geo-radius-lg: 8px;   /* paineis, dropdowns, menu */

	--geo-purple: rgb(83, 62, 118);
	--geo-purple-hover: rgb(100, 76, 140);
	--geo-purple-soft: rgba(83, 62, 118, .10);
	--geo-purple-ring: rgba(83, 62, 118, .15);
}

html, body {
	height: 100%;
	margin: 0;
	/* nenhum scroll no nivel do documento -- evita o bug de scroll-drift
	 * horizontal ao maximizar uma Window (include/digicade/window/window.js) */
	overflow: hidden;
}
body {
	display: flex;
	flex-direction: column;
	font-size: 12px !important;
}

/* ---------- #topo (header roxo + toolbar clara) ---------- */
.app-topo {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	/* 2600 (era 2500): acima da paleta (2580) e do puxador do painel de
	 * camadas (.layerPanel-west, 2560) -- que antes "vazavam" por cima do
	 * menu hamburguer aberto, ja que o menu vive no contexto de empilha-
	 * mento do header. Continua abaixo das Windows (piso 3000+), que devem
	 * cobrir o header quando maximizadas. */
	z-index: 2600 !important;
	overflow: initial;
}

/* Header roxo: logo, abas de janelas abertas, busca global, usuario. */
.app-topo-windows {
	flex: 0 0 auto;
	height: 40px;
	display: flex;
	align-items: center;
	background-color: rgb(83, 62, 118);
	color: #fff;
	/* overflow: visible (NAO auto/hidden) -- qualquer overflow no eixo
	 * horizontal forcava overflow-y a recortar tambem (regra do CSS: se um
	 * eixo e' auto/hidden/scroll, o outro nao pode ser visible), e isso
	 * CORTAVA os dropdowns do header que descem abaixo da linha de 40px
	 * (notificacoes do sino, menu do usuario) -- eles abriam mas ficavam
	 * invisiveis, parecendo "nao abrir". A pressao horizontal em telas
	 * estreitas e' absorvida pelo #app_window_bar (flex:1 1 auto,
	 * min-width:0, overflow:hidden -- tem dgScrollBar propria pras abas),
	 * entao a linha do header nao precisa recortar. */
	overflow: visible;
}
.app-topo-windows > * {
	flex-shrink: 0;
}

/* Cabecalho colapsado (btn-ocultar/btn-exibir, ver toggleTopo em
 * System.js): a linha inteira some do fluxo -- .app-topo-ferramentas
 * ocupa o espaco sozinha. */
.app-topo-reduced .app-topo-windows {
	display: none;
}

.topo-windows-menu-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
/* Trocado o PNG (logo-branca.png, baixa resolucao/serrilhado em telas
 * HiDPI) pelo SVG oficial (mesmo arquivo da tela de login,
 * autenticacao/img/geral/geosite-logo.svg, com o fill trocado pra branco
 * -- login mantem as cores originais, so' o header e' branco sobre o
 * roxo). Mesmo tamanho de antes (149x30) pra nao mexer no layout. */
.topo-windows-menu-logo .logo {
	background-image: url(../images/geosite-logo-branca.svg);
	background-repeat: no-repeat;
	background-size: contain;
	height: 30px;
	width: 149px;
	/* margin-top:5px removido -- o flex align-items:center do container ja
	 * centraliza verticalmente; o offset fixo deixava a logo ~2.5px baixa. */
	margin: 0 0 0 10px;
}
/* Telas estreitas: troca pro "compasso" (so' o miolo do "O" de "Geo", ver
 * resources/images/geosite-logo-compasso-branca.svg).
 *
 * O logo NAO fica na mesma linha da toolbar (Selecionar/Pan, busca de
 * endereco etc) -- fica em .app-topo-windows, ao lado de
 * #app_window_bar (abas das janelas abertas/minimizadas). Esse elemento
 * e' flex:1 com scroll PROPRIO (dgScrollBar) -- nunca "quebra"/empurra o
 * resto do header pra fora, so' vai perdendo espaco visivel pras abas
 * conforme a tela estreita (medido ao vivo: em 800px, logo completo
 * (149px) deixa so' 84px pra abas -- menos de 1 aba inteira visivel
 * antes de precisar rolar; o compasso (19px) deixa 214px, ~2 abas). Como
 * o unico "custo" real de manter o logo completo e' esse espaco de abas
 * minimizadas (nao um overflow/quebra visual), o breakpoint e' uma
 * escolha de UX (abaixo de 800px passa a doer mais que vale a pena
 * manter a palavra por extenso), nao um ponto de colisao rigido. */
@media (max-width: 799px) {
	.topo-windows-menu-logo .logo {
		background-image: url(../images/geosite-logo-compasso-branca.svg);
		/* So' o compasso, sem o resto da palavra ao lado pra "ancorar"
		 * visualmente o tamanho, ficava grande/pesado ocupando quase a
		 * altura toda do header (30px) -- reduzido pra ficar na mesma
		 * escala dos outros icones do header (sino/hamburguer, ~18-20px). */
		width: 19px;
		height: 20px;
	}
}
.topo-windows-menu-logo .app-topo-windows-menu {
	padding: 3px 6px 3px 3px;
}

/* ---------- Menu hamburguer (#button-menu + #menu-principal) ----------
 * Botao: era um .btn.btn-default padrao do Bootstrap (caixa clara com
 * borda, destoando do resto do header translucido). Vira um icone solto
 * com hover translucido, igual ao padrao dos outros botoes do header
 * (mockup de referencia usa exatamente esse tratamento pro botao do
 * menu). A ARVORE de itens dentro de #menu-principal (.item-pai/
 * .item-filho) continua igual -- funcional, so' o CONTAINER (moldura,
 * cantos, sombra) e' modernizado aqui. */
#button-menu {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--geo-radius-md);
}
#button-menu:hover,
#button-menu:focus {
	background: rgba(255, 255, 255, .15) !important;
}
#button-menu img {
	width: 18px;
	height: 18px;
}

#menu-principal {
	width: 260px;
	max-height: 520px;
	font-size: 12px !important;
	border-radius: var(--geo-radius-lg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	border: 1px solid rgba(0, 0, 0, .08);
	padding: 0;
	/* container em coluna: cabecalho de busca fixo + corpo rolavel.
	 * IMPORTANTE: NAO declarar display:flex aqui na base -- isso sobre-
	 * escrevia o display:none padrao do .dropdown-menu e deixava o menu
	 * SEMPRE visivel (abria "sozinho" no load). O flex so' vale quando o
	 * dropdown esta aberto (.open), na regra abaixo. */
	flex-direction: column;
	overflow: hidden;
}
/* Abre como coluna flex apenas quando o dropdown esta aberto. !important
 * porque o script de reposicionamento de dropdowns do app seta
 * display:block INLINE (junto de position:fixed/top/left/z-index) ao abrir
 * -- inline vence stylesheet normal, entao so' !important garante o flex
 * (necessario pro corpo rolavel .menu-scroll preencher a altura). */
#menu.open > #menu-principal {
	display: flex !important;
}

/* ---------- Cabecalho de busca (fixo no topo) ---------- */
.menu-search {
	flex: 0 0 auto;
	position: relative;
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
	background: #fff;
	border-radius: var(--geo-radius-lg) var(--geo-radius-lg) 0 0;
}
.menu-search-input {
	width: 100%;
	height: 34px;
	border: 1px solid #dcdcdc;
	border-radius: var(--geo-radius-md);
	padding: 0 10px 0 34px;
	font-size: 13px;
	color: #333;
	background: #fff;
	outline: none;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.menu-search-input:focus {
	border-color: rgb(83, 62, 118);
	box-shadow: 0 0 0 3px rgba(83, 62, 118, .15);
}
.menu-search-input::-webkit-input-placeholder { color: #9a9a9a; }
.menu-search-input::-moz-placeholder { color: #9a9a9a; }
/* Lupa desenhada em CSS (circulo + cabo) */
.menu-search-icon {
	position: absolute;
	left: 23px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -1px;
	transform: translateY(-50%);
	border: 2px solid #9a9a9a;
	border-radius: 50%;
	pointer-events: none;
}
.menu-search-icon::after {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 2px;
	height: 6px;
	background: #9a9a9a;
	border-radius: 1px;
	transform: rotate(-45deg);
}

/* ---------- Corpo rolavel ---------- */
.menu-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px 0;
}

/* Estado de busca: item/categoria sem correspondencia some; categorias
 * ficam forcadamente expandidas (chevron escondido) pra mostrar os hits. */
.menu-hidden { display: none !important; }
#menu-principal.menu-searching .menu-cat-toggle > ul { display: block !important; }
#menu-principal.menu-searching .menu-cat-caret { display: none; }
#menu-principal.menu-searching .menu-cat-header { cursor: default; }

#menu-principal ul {
	padding: 0;
	margin: 0;
}
#menu-principal ul li {
	list-style: none;
	background-color: #fff;
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	border: none;
}

/* Cabecalho de categoria (.item-pai): antes era fundo azul-claro (#e7f4f9)
 * com texto BRANCO herdado (contraste pessimo, quase ilegivel). Vira um
 * rotulo de secao discreto -- fundo cinza clarissimo, texto escuro em
 * maiusculas, peso 600 -- separando visualmente os grupos sem pesar. */
#menu-principal .item-pai {
	display: block;
	padding: 8px 12px 8px 34px;
	background-color: #f4f5f7;
	color: #4a4a4a !important;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .3px;
	text-transform: uppercase;
	cursor: default;
}

/* Item folha (.item-filho): texto escuro legivel (nao mais o azul de link
 * do Bootstrap), linha confortavel. */
#menu-principal .item-filho {
	display: block;
	padding: 8px 12px 8px 34px;
	color: #333;
	font-weight: 400;
}

/* Indentacao por nivel de aninhamento (mantida em relacao ao layout
 * antigo pra nao desalinhar os icones absolutos). */
#menu-principal ul li ul li .item-pai,
#menu-principal ul li ul li .item-filho {
	padding-left: 50px;
}
#menu-principal ul li ul li ul li .item-pai,
#menu-principal ul li ul li ul li .item-filho {
	padding-left: 66px;
}
#menu-principal ul li ul li ul li ul li .item-filho {
	padding-left: 82px;
}

#menu-principal a {
	display: block;
	width: auto;
	text-decoration: none;
	color: inherit;
	border-radius: var(--geo-radius-sm);
	margin: 0 4px;
	transition: background-color .12s ease-in-out;
}
#menu-principal a:hover {
	background-color: rgba(83, 62, 118, .09);
}
#menu-principal a:hover .item-filho {
	color: rgb(83, 62, 118);
}

/* Icone do item: centralizado verticalmente na linha (o -21px puxa pra
 * dentro do padding-left; top:50% + translate centra na altura, em vez de
 * grudar no topo da linha como antes). */
#menu-principal .menu-icon {
	margin-left: -21px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
}

/* ---------- Grupos colapsaveis (categorias de topo) ----------
 * Categorias de topo (.menu-cat-toggle) abrem/fecham ao clicar no
 * cabecalho; o estado persiste em localStorage (ver initializeMenuAplicacao
 * em System.js). Um chevron a direita indica o estado. */
#menu-principal .menu-cat-header {
	position: relative;
	cursor: pointer;
	user-select: none;
	padding-right: 28px;
}
#menu-principal .menu-cat-header:hover {
	background-color: #eceef1;
}
.menu-cat-caret {
	position: absolute;
	right: 13px;
	top: calc(50% - 5px);
	width: 6px;
	height: 6px;
	border-right: 2px solid #9a9a9a;
	border-bottom: 2px solid #9a9a9a;
	transform: rotate(45deg);          /* aberto: aponta pra baixo */
	transition: transform .15s ease-in-out;
}
.menu-cat-toggle.collapsed .menu-cat-caret {
	transform: rotate(-45deg);         /* fechado: aponta pra direita */
}
.menu-cat-toggle.collapsed > ul {
	display: none;
}

/* ---------- Secao "Mais usados" (topo) ---------- */
.menu-mais-usados .menu-secao-fixa {
	color: rgb(83, 62, 118) !important;
	background-color: #f0ecf6;
	cursor: default;
}

/* ---------- Scrollbar custom (design mais limpo) ----------
 * Barra fina e discreta nos paineis proprios (corpo do menu, resultados
 * de busca, notificacoes). O "thumb" tem borda BRANCA (igual ao fundo do
 * painel) em vez de transparente -- a borda transparente antiga deixava
 * o trilho aparecer por baixo com um aspecto sujo/acinzentado. */
.menu-scroll,
#resultadoInputPesquisaGlobal.ui-autocomplete,
#resultadoInputPesquisaGlobal2.ui-autocomplete,
.menu-dowloads {
	scrollbar-width: thin;
	scrollbar-color: #c4c4cc #ffffff;
}
.menu-scroll::-webkit-scrollbar,
#resultadoInputPesquisaGlobal.ui-autocomplete::-webkit-scrollbar,
#resultadoInputPesquisaGlobal2.ui-autocomplete::-webkit-scrollbar,
.menu-dowloads::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
.menu-scroll::-webkit-scrollbar-track,
#resultadoInputPesquisaGlobal.ui-autocomplete::-webkit-scrollbar-track,
#resultadoInputPesquisaGlobal2.ui-autocomplete::-webkit-scrollbar-track,
.menu-dowloads::-webkit-scrollbar-track {
	background: #ffffff;
}
.menu-scroll::-webkit-scrollbar-thumb,
#resultadoInputPesquisaGlobal.ui-autocomplete::-webkit-scrollbar-thumb,
#resultadoInputPesquisaGlobal2.ui-autocomplete::-webkit-scrollbar-thumb,
.menu-dowloads::-webkit-scrollbar-thumb {
	background: #c4c4cc;
	border-radius: 7px;
	border: 3px solid #ffffff;
	background-clip: padding-box;
}
.menu-scroll::-webkit-scrollbar-thumb:hover,
#resultadoInputPesquisaGlobal.ui-autocomplete::-webkit-scrollbar-thumb:hover,
#resultadoInputPesquisaGlobal2.ui-autocomplete::-webkit-scrollbar-thumb:hover,
.menu-dowloads::-webkit-scrollbar-thumb:hover {
	background: #a8a8b2;
	background-clip: padding-box;
}

/* Barra de abas de janelas abertas -- unico item com flex-shrink:1 no
 * header (o ponto normal de espremer; tem sua propria dgScrollBar
 * interna pra rolar as abas quando ha muitas). */
.app-topo-windows-windowbar {
	flex: 1 1 auto;
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	/* ALTURA EXPLICITA (bug corrigido): o dgScrollBar posiciona a toolbar
	 * interna como position:absolute (fora do fluxo) e os scrollers com
	 * top:0/bottom:0 -- ou seja, ele depende do CONTAINER ter altura
	 * propria. A regra legada #app_window_bar{height:39px} (removida na
	 * limpeza da busca) era quem dava essa altura; sem ela o bar colapsava
	 * pra ~6px e as abas de janela (30px) ficavam recortadas num fio fino.
	 * position:relative garante que a toolbar absolute ancore aqui. */
	height: 32px;
	position: relative;
	padding: 0;
}
/* Centraliza a toolbar interna do dgScrollBar na altura do bar sem mexer
 * no mecanismo de scroll (mantem o float dos itens). */
.app-topo-windows-windowbar .dgScrollBar-toolbar {
	top: 50%;
	transform: translateY(-50%);
}

/* ---------- Toolbar clara: ferramentas, projeto, busca de endereco ---------- */
.app-topo-ferramentas {
	flex: 0 0 auto;
	height: 32px;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2px;
	padding: 3px 6px;
	/* Antes: border:1px silver nos 4 lados (caixa dura, datada). Agora so'
	 * uma linha inferior discreta separando do mapa -- o topo encosta no
	 * header roxo (contraste ja separa) e as laterais nao precisam moldura. */
	border: none;
	border-bottom: 1px solid #e0e0e0;
	background-color: rgb(247, 247, 247);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.app-topo-ferramentas::-webkit-scrollbar {
	display: none;
	height: 0;
}
.app-topo-ferramentas > * {
	flex-shrink: 0;
}

/* Botoes de ferramenta (selecionar/pan/medir/etc): eram cinza-solido
 * (#f7f7f7, quase a mesma cor do fundo da toolbar, mas com o box-shadow
 * default do Bootstrap por baixo criando uma "caixa" visivel e pesada) --
 * viram "ghost" de verdade (fundo transparente, sem sombra), com hover/
 * active em tom roxo claro (mesma familia de cor do resto da marca) em
 * vez de cinza neutro. Padrao usado no mockup de referencia pros botoes
 * da toolbar. */
.app-topo-ferramentas .btn-ferramenta {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	border-radius: var(--geo-radius-md);
	/* min-width (nao width fixa) -- botoes SO' de icone (<em> 16px) ficam
	 * ~26px; botoes de TEXTO (#btn-converter "Converter", #btn-sair-projeto
	 * "Sair") expandem pra caber o texto em vez de serem cortados dentro de
	 * uma caixa fixa de 26px (bug: "ConverterSair" grudados/clipados). */
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	margin-right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}
.app-topo-ferramentas .btn-ferramenta:hover,
.app-topo-ferramentas .btn-ferramenta:focus {
	background-color: rgba(83, 62, 118, .1);
	border-color: transparent;
	box-shadow: none;
}
.app-topo-ferramentas .btn-ferramenta:active,
.app-topo-ferramentas .btn-ferramenta.active,
.app-topo-ferramentas .open .dropdown-toggle.btn-ferramenta {
	background-color: rgba(83, 62, 118, .18);
	border-color: transparent;
	box-shadow: none;
}
/* Selecionar/Pan mesclados num so' botao visivel (US #3928, ver
 * index.jsp + System.js#bindEventos/ontogglecontrol): o par comeca com
 * #btn-map-pan oculto (Selecionar e' o modo inicial) e o JS alterna qual
 * dos 2 fica com essa classe conforme o modo ativo. */
.nav-toggle-hidden {
	display: none !important;
}

.app-topo-ferramentas .divider-vertical {
	height: 18px !important;
	border-left: 1px solid #dcdcdc;
	border-color: #dcdcdc;
	margin: 0 6px;
	align-self: center;
}

/* "Redes" (filtro) era um .btn puro do Bootstrap sem variante de cor --
 * ficava so' o texto flutuando, sem parecer um botao clicavel de verdade
 * (inconsistente com "Selecionar projeto" ao lado). Ganha o mesmo
 * tratamento ghost dos botoes de ferramenta, so' com padding horizontal
 * (tem texto, nao so' icone). */
#btn-filtro-redes {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	border-radius: var(--geo-radius-md);
	height: 26px;
	padding: 0 10px;
}
#btn-filtro-redes:hover,
#btn-filtro-redes:focus {
	background-color: rgba(83, 62, 118, .1);
	border-color: transparent;
}

/* Altura consistente com os botoes de ferramenta (26px) -- antes usava
 * so' o padrao do Bootstrap .btn-xs (~22px), ficando um pixel mais baixo
 * e desalinhado verticalmente ao lado dos icones. */
#btn-projeto {
	height: 26px;
}

/* Grupo da direita: busca global "interna" + busca de endereco + divisor +
 * ocultar/exibir cabecalho -- um UNICO item flex com margin-left:auto,
 * robusto a qualquer combinacao do que estiver visivel a esquerda
 * (selecionar projeto/filtro de redes/acoes-projeto aparecem e somem
 * conforme o estado do projeto selecionado). */
.app-toolbar-right {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex-shrink: 0;
}

/* ---------- Componente de busca reutilizavel (.geosite-search) ----------
 * Markup proprio, sem .input-group/.input-group-btn do Bootstrap (esses
 * sao display:table/table-cell por padrao -- forcar flex neles sem
 * reestruturar o HTML colapsa a caixa do wrapper enquanto o botao real,
 * maior, renderiza fora do lugar). Reaproveitado por 3 buscas:
 *  - #idPesquisaRapida   (endereco,       toolbar clara)
 *  - #consultalGlobaExterna (elementos,   header roxo)
 *  - #consultalGlobalInterna (elementos,  toolbar clara, cabecalho colapsado)
 */
.geosite-search {
	display: flex;
	align-items: center;
	height: 28px;
	border-radius: var(--geo-radius-md);
	overflow: hidden;
	flex-shrink: 0;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}
.geosite-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: none;
	box-shadow: none;
	background: transparent;
	padding: 0 8px;
	font-size: 12px;
}
.geosite-search-input:focus {
	outline: none;
	box-shadow: none;
}
.geosite-search-submit {
	flex: 0 0 auto;
	height: 100%;
	border: none;
	/* Era 0 10px -- pro icone de 16px isso dava 20px de padding (mais
	 * padding que icone), um respiro desproporcional dentro de um campo
	 * que ja' e' pequeno. 8px (igual ao padding do input do lado) mante'm
	 * a lupa clicavel sem sobrar espaco morto. */
	padding: 0 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Lupa dos botoes de busca: troca o sprite antigo (iconeg-buscagoogle) por
 * um icone Lucide (mask + currentColor) -- fica nitido e herda a cor do
 * botao (branco). Vale pra busca de endereco e as duas globais. */
.geosite-search-submit .iconeg-buscagoogle,
#pesquisaLupaGlobal .iconeg-buscagoogle,
#pesquisaLupaGlobal2 .iconeg-buscagoogle {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: none;
	background-color: currentColor;
	-webkit-mask: url(../../include/icones/images/lucide/search.svg?v=1) center / contain no-repeat;
	mask: url(../../include/icones/images/lucide/search.svg?v=1) center / contain no-repeat;
}

/* Variante clara (toolbar cinza): fundo branco, borda cinza, texto/icone
 * escuros, botao roxo da marca. Largura fixa e generosa o bastante pro
 * placeholder mais longo ("Pesquisar elementos de rede") nao cortar. */
.geosite-search--light {
	width: 240px;
	background-color: #fff;
	border: 1px solid #ddd;
}
.geosite-search--light:focus-within {
	border-color: rgb(83, 62, 118);
	box-shadow: 0 0 0 3px rgba(83, 62, 118, .15);
}
.geosite-search--light .geosite-search-input {
	color: #333;
}
.geosite-search--light .geosite-search-submit {
	background-color: rgb(83, 62, 118);
	color: #fff;
}
.geosite-search--light .geosite-search-submit:hover,
.geosite-search--light .geosite-search-submit:focus {
	background-color: rgb(100, 76, 140);
}

/* Variante escura (header roxo): translucida, texto/icone brancos.
 * Largura media (era 260px, so' o placeholder "Pesquisar elementos de
 * rede" ja' medido ao vivo precisa de ~156px -- 220px sobra um respiro
 * saudavel pra digitar sem cortar o placeholder nem ficar apertado). */
.geosite-search--dark {
	width: 220px;
	background-color: rgba(255, 255, 255, .15);
}
.geosite-search--dark:focus-within {
	background-color: rgba(255, 255, 255, .25);
}
.geosite-search--dark .geosite-search-input {
	color: #fff;
}
.geosite-search--dark .geosite-search-input::-webkit-input-placeholder { color: rgba(255, 255, 255, .6); }
.geosite-search--dark .geosite-search-input::-moz-placeholder { color: rgba(255, 255, 255, .6); }
.geosite-search--dark .geosite-search-input:-ms-input-placeholder { color: rgba(255, 255, 255, .6); }
.geosite-search--dark .geosite-search-submit {
	background: transparent;
	color: #fff;
}
.geosite-search--dark .geosite-search-submit:hover,
.geosite-search--dark .geosite-search-submit:focus {
	background-color: rgba(255, 255, 255, .15);
}

/* #consultalGlobaExterna comeca visivel (display:flex, nao "none") -- o
 * header inicia expandido (sem a classe app-topo-reduced), e' esse o
 * estado que ela representa. toggleTopo (System.js) alterna pra "none"
 * quando o cabecalho e' colapsado (a linha toda some via
 * .app-topo-reduced .app-topo-windows acima de qualquer forma). */
#consultalGlobaExterna {
	display: flex;
	flex-shrink: 0;
}

/* ---------- Cluster do usuario (nome + sino + Minha Conta + chevron) ----------
 * Antes: fileira de botoes .btn-default do Bootstrap = caixas BRANCAS com
 * borda cinza sobre o header roxo (visual datado, "poor bootstrap"), cada
 * um com margin-top:5px/width inline compensando o posicionamento antigo.
 * Vira um cluster "ghost": itens transparentes, texto/icone branco, hover
 * translucido (rgba branco), altura consistente -- igual ao header do
 * mockup de referencia (MapaView.vue: hover:bg-white/15). */
.header-buttons {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	margin-right: 8px;
	height: 40px;
}
.header-buttons .btn-group {
	display: flex;
	align-items: center;
	gap: 2px;
}
/* Nome do usuario: label branco, sem caixa. */
#boxNomeUsuario {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #fff !important;
	width: auto !important;
	margin: 0 !important;
	height: 32px;
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	font-weight: 500;
	cursor: default;
}
/* Botoes de texto/icone do cluster: ghost translucido. */
.header-buttons .btn,
.header-buttons .btn-usuario {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #fff !important;
	height: 32px;
	margin: 0 !important;
	border-radius: var(--geo-radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease-in-out;
}
.header-buttons .btn:hover,
.header-buttons .btn:focus,
.header-buttons .btn-usuario:hover,
.header-buttons .btn-usuario:focus,
.header-buttons .open > .btn-usuario {
	background: rgba(255, 255, 255, .15) !important;
	color: #fff !important;
}
/* Botoes SO' de icone (sino, chevron): quadrados. */
.header-buttons .btn-usuario {
	width: 34px;
	padding: 0;
}
/* "Minha Conta" (texto): padding horizontal. */
.header-buttons .id_btn_minha_conta {
	padding: 0 10px;
}
/* Menu de downloads/notificacoes: mantem fundo claro (e' um popover
 * sobre o mapa, nao parte do header roxo) e herda o visual moderno de
 * dropdown-menu do override do Bootstrap. */
#collapseDownload {
	color: #333;
}

/* ---------- Resultados da busca global (consulta global) ----------
 * O autocomplete (jQuery UI) da busca "Pesquisar elementos de rede"
 * (#resultadoInputPesquisaGlobal / *2) vinha com o tema PADRAO do jQuery
 * UI (cantos retos, borda dupla, realce cinza-degrade no item em foco) +
 * itens com spans em position:absolute e margens magicas -- visual pobre
 * e fragil. Reescrito (escopo SO' desses dois results): container
 * arredondado com sombra, itens em flex (icone + label), realce roxo da
 * marca. */
#resultadoInputPesquisaGlobal.ui-autocomplete,
#resultadoInputPesquisaGlobal2.ui-autocomplete {
	padding: 4px !important;
	border: 1px solid rgba(0, 0, 0, .12) !important;
	border-radius: var(--geo-radius-lg) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .15) !important;
	background: #fff !important;
	max-height: 360px;
	overflow-y: auto;
}
.itemPesquisaGlobal.ui-menu-item {
	display: flex !important;
	align-items: center;
	gap: 8px;
	height: auto !important;
	min-height: 34px;
	margin: 0 !important;
	padding: 6px 10px !important;
	border: none !important;
	border-radius: var(--geo-radius-md);
	cursor: pointer;
	font-size: 12px;
	line-height: 1.3;
}
/* Neutraliza o position:absolute + top/margin magicos dos spans internos
 * (agora sao apenas itens flex normais). */
.itemPesquisaGlobal > div {
	display: inline-flex !important;
	align-items: center;
	flex: 0 0 auto;
}
.itemPesquisaGlobal .spanIconPesquisaGlobal,
.itemPesquisaGlobal .spanItemPesquisaGlobal {
	position: static !important;
	top: auto !important;
	margin: 0 !important;
}
.itemPesquisaGlobal .spanIconPesquisaGlobal {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.itemPesquisaGlobal .spanItemPesquisaGlobal {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333;
}
/* Realce (hover + foco do teclado do jQuery UI) em roxo da marca, sem o
 * degrade/borda cinza do tema padrao. */
.itemPesquisaGlobal.ui-state-focus,
.itemPesquisaGlobal.ui-state-active,
.itemPesquisaGlobal:hover {
	background: rgba(83, 62, 118, .10) !important;
	border: none !important;
	color: #333 !important;
	margin: 0 !important;
}

/* Busca de endereco (toolbar): o seletor de tipo (pin+chevron) fica solto,
 * sem caixa/borda, ao lado da pilula input+botao -- igual ao mockup de
 * referencia. */
/* #pesquisaEnderecoBarra encolhe pro tamanho do conteudo (pin + pilula).
 * Antes ficava com ~362px porque o #results (.pac-container, width:350px)
 * era um filho EM FLUXO e esticava o container mesmo vazio -- criando um
 * vao grande entre a busca e o botao de ocultar cabecalho. Tirando o
 * #results do fluxo (position:absolute, e' um dropdown que aparece por
 * baixo), o container fica do tamanho da pilula. */
#pesquisaEnderecoBarra {
	display: inline-flex;
	align-items: center;
	position: relative;
}

/* ---------- Resultados da busca de endereco (Google Places, #results) ----------
 * #results agora vive no <body> (appendTo + $.position(), ver System.js#
 * initializeConsultaRapida) pra escapar do overflow-y:hidden de
 * .app-topo-ferramentas -- so' a POSICAO e' calculada via JS, o visual
 * continua 100% CSS aqui. Estilo antigo (estiloBuscaGoogle.css) era o
 * padrao generico do exemplo oficial do Google (Roboto, cinza claro,
 * icone via sprite externo do proprio Google) -- substituido pelos
 * tokens do resto do app (--geo-radius-lg, --geo-purple, mesmo padrao
 * de .ctx-menu em context-menu.css) pra parecer parte do produto, nao
 * um widget de terceiro colado por cima. */
.pac-container {
	font-family: inherit;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--geo-radius-lg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	padding: 4px;
	font-size: 13px;
}
/* .pac-item nao pode virar flexbox: highlightMatches() (System.js) so'
 * embrulha em <span class="pac-item-query"> o TRECHO destacado, o resto
 * da descricao entra como texto solto direto dentro do .pac-item -- um
 * layout flex trata esse texto solto como outro item e ele nao encolhe/
 * trunca (BUG REAL achado testando ao vivo: descricao vazava pra fora do
 * dropdown). Mantém o mesmo truque do CSS antigo (inline-block + vertical-
 * align pro icone, ellipsis no proprio .pac-item) que trunca a linha
 * INTEIRA de uma vez, icone incluso, sem depender da estrutura interna
 * do HTML gerado. */
.pac-icon {
	width: 16px;
	height: 16px;
	margin: 0 8px -3px 2px;
	display: inline-block;
	background-image: none;
	background-color: var(--geo-purple);
	-webkit-mask: url(../../include/icones/images/lucide/map-pin.svg?v=1) no-repeat center / contain;
	mask: url(../../include/icones/images/lucide/map-pin.svg?v=1) no-repeat center / contain;
}
.pac-item {
	font-family: inherit;
	display: block;
	padding: 6px 8px;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-top: none;
	border-radius: var(--geo-radius-sm);
	color: #444;
	font-size: 13px;
}
.pac-item-query {
	color: #222;
	font-size: 13px;
}
.pac-item:hover,
.pac-item-selected,
.pac-item-selected:hover {
	background-color: var(--geo-purple-soft);
}
.pac-matched {
	font-weight: 600;
	color: var(--geo-purple);
}
.pac-item-error,
.pac-item-error:hover {
	color: #888;
	padding: 8px 10px;
	background-color: #fff;
	cursor: default;
}

#idPesquisaRapida {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
}
.geosite-search-type {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	box-shadow: none;
	color: #767676;
	padding: 0 2px;
}
.geosite-search-type:hover,
.geosite-search-type:focus {
	color: rgb(83, 62, 118);
	background: transparent;
}

/* ---------- Dropdown "Exportar" (Importar KML + Exportar Area/Manchas) ----------
 * Consolida 3 botoes que so' tinham icone (sem rotulo, so' tooltip) num
 * unico dropdown com rotulo visivel por item -- reduz a toolbar de 3
 * controles pra 1 e da contexto textual que o icone isolado nao dava. */
#btn-exportar-importar-toggle .caret {
	margin-left: 2px;
}
.dropdown-menu-exportar {
	min-width: 190px;
	padding: 4px;
}
.dropdown-menu-exportar li {
	list-style: none;
}
.btn-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 10px;
	background: transparent;
	border: none;
	border-radius: var(--geo-radius-sm);
	font-size: 12px;
	color: #333;
	text-align: left;
	cursor: pointer;
}
.btn-dropdown-item:hover,
.btn-dropdown-item:focus {
	background-color: var(--geo-purple-soft);
	color: rgb(83, 62, 118);
}
.btn-dropdown-item em {
	flex: 0 0 auto;
}

/* Split-button #idExportarImportar: o botao de icone (acao direta, 1
 * clique) + a seta (abre as 2 opcoes menos usadas) ficam visualmente
 * "colados" -- sem gap entre eles, so' uma linha fina separando, pra ler
 * como um controle so' com duas zonas clicaveis (padrao split-button). */
#idExportarImportar {
	display: inline-flex;
	align-items: center;
}
#idExportarImportar > #btn-map-exportar-area {
	margin-right: 0;
	border-radius: var(--geo-radius-md) 0 0 var(--geo-radius-md);
}
#idExportarImportar > #btn-exportar-importar-toggle {
	margin-left: 0;
	padding: 0 4px;
	min-width: 14px;
	border-left: 1px solid rgba(0, 0, 0, .12);
	border-radius: 0 var(--geo-radius-md) var(--geo-radius-md) 0;
}
#idExportarImportar > #btn-exportar-importar-toggle .caret {
	margin: 0;
}

/* ---------- Polimento: foco de teclado + botao de projeto ----------
 * Bootstrap 3 aplica um outline preto/azul grosso e um box-shadow de foco
 * herdado do tema padrao nos botoes -- feio e destoante quando aparece no
 * header/toolbar (ex: depois de clicar). Neutraliza o foco de MOUSE mas
 * preserva um anel discreto pra navegacao por TECLADO (:focus-visible),
 * mantendo acessibilidade. */
.app-topo .btn:focus,
.app-topo button:focus,
.app-topo a.btn:focus {
	outline: none;
	box-shadow: none;
}
.app-topo .btn:focus-visible,
.app-topo button:focus-visible {
	outline: 2px solid rgba(83, 62, 118, .5);
	outline-offset: -1px;
}
.app-topo-windows .btn:focus-visible,
.app-topo-windows button:focus-visible {
	outline-color: rgba(255, 255, 255, .7);
}

/* Botao "Selecionar projeto" (laranja): centraliza texto + caret na
 * vertical e joga o caret pro extremo direito com flex, em vez do
 * float + margin-top:7px legado (que deixava o caret levemente
 * desalinhado dentro da altura de 26px). */
#btn-projeto {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
#btn-projeto .caret {
	float: none;
	margin: 0;
	flex: 0 0 auto;
}

/* ---------- #conteudo (fora de escopo, so' o necessario pra coluna flex) ---------- */
.app-conteudo {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	padding: 0;
}

/* ---------- Rodape ---------- */
.app-rodape {
	flex: 0 0 auto;
	height: 22px;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 12px;
	box-sizing: border-box;
	border: solid 1px silver;
	background-color: rgb(247, 247, 247);
}
.app-rodape #coordenada,
.app-rodape #selecionados,
.app-rodape #escala {
	float: none;
	margin-left: 0;
}
.app-rodape #escala {
	margin-left: auto;
}

/* ---------- Paleta de atalhos flutuante (#paleta) ----------
 * Antes: position:fixed com o offset calculado por 2 breakpoints de
 * media query em ALTURA de tela (min-height:720px / max-height:721px)
 * usando numeros magicos (margin-top:280px/120px, margin-right:15px/71px)
 * -- um resquicio de quando o header/toolbar tinham alturas hardcoded
 * competindo com dgLayout (ver historico do #topo acima). Com o header
 * (40px) + toolbar (32px) agora fixos e conhecidos aqui no mesmo
 * arquivo, a paleta e' posicionada direto pela altura REAL do topo
 * (72px + uma folga de 8px), sem depender da altura da JANELA do
 * navegador pra decidir o offset. */
/* #paleta e' so' a ancora de posicao (fixed). O conteudo real
 * (#paleta-drag) e' position:absolute, entao #paleta tem altura ~0 -- por
 * isso borda/sombra/cantos ficam no #paleta-drag (abaixo), que de fato
 * envolve header+corpo. */
.paleta-container {
	position: fixed;
	/* 80px (topo do header+toolbar) + 10px + 204px (altura do controle de
	 * zoom padrao do OpenLayers, MapService.Control.Slider, posicionado em
	 * top:10/right:10 relativo ao container do mapa) + 6px de folga -- sem
	 * isso a paleta nascia sobreposta ao slider de zoom (mesma regiao,
	 * z-index da paleta maior, sempre desenhava por cima). */
	top: 300px;
	right: 15px;
	/* largura definida junto de #paleta-drag mais abaixo (grid 2 colunas) */
	/* Escala harmonizada com LayerPanel.css (2550-2570) -- fica acima do
	 * menu de camadas mas abaixo de qualquer Window aberta (piso do
	 * sistema de Window: 3000 + Window.windows.length, ver Util.js). */
	z-index: 2580;
}
/* Cabecalho: barra roxa que serve de alca de arraste (cursor:move) E de
 * botao de recolher/expandir (ver atalhoOcultar em System.js). Mostra um
 * chevron branco (estado) sobreposto por um "grip" sutil (affordance de
 * arraste). */
.paleta-header {
	position: relative;
	background: rgb(83, 62, 118);
	border-radius: var(--geo-radius-lg) var(--geo-radius-lg) 0 0;
	cursor: move;
	height: 22px;
	width: 100%;
}
.paleta-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, .95);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 15px; mask-size: 15px;
}
.paleta-header.icon-paleta-retrair::after {
	-webkit-mask-image: url(../../include/icones/images/lucide/chevron-up.svg?v=1);
	mask-image: url(../../include/icones/images/lucide/chevron-up.svg?v=1);
}
.paleta-header.icon-paleta-expandir::after {
	-webkit-mask-image: url(../../include/icones/images/lucide/chevron-down.svg?v=1);
	mask-image: url(../../include/icones/images/lucide/chevron-down.svg?v=1);
}
.paleta-header:hover {
	background: rgb(94, 71, 133);
}

/* Continua 1 coluna (grid 2x nao ficou bom) -- so' enxugado: botao/gap/
 * padding menores encolhem a altura total sem trocar o layout. */
.paleta-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--geo-paleta-item-gap);
	padding: var(--geo-paleta-pad) 0;
	background: #fff;
	border-radius: 0 0 var(--geo-radius-lg) var(--geo-radius-lg);
	width: 100%;
	box-sizing: border-box;
	/* Dois tetos de altura; o MENOR vence (min).
	 *
	 * 1. Viewport -- em telas baixas os atalhos nao cabem entre o topo
	 *    (300px, ver .paleta-container) e a borda inferior da janela. Em vez
	 *    de virar grid de colunas (rejeitado, mexeria no layout inteiro), o
	 *    corpo ganha teto relativo ao viewport e rola internamente.
	 *    300px do offset do topo + 22px do header + a folga inferior.
	 *
	 *    A folga e' 96px, nao os 24px de antes: o canto inferior direito
	 *    tem o rodape (22px) e o lancador do chat da Blip, que fica em
	 *    right:17px -- praticamente a mesma coluna da paleta (right:15px)
	 *    -- com z-index 10000001. Esse valor e' inalcancavel (acima ate' do
	 *    piso de Window, 3000), entao NAO da' pra resolver a sobreposicao
	 *    empilhando: a paleta tem que parar antes de chegar la'.
	 *
	 * 2. Numero de itens -- a paleta ganhou o "Drop de Atendimento" e passou
	 *    de 14 pra 15 atalhos, ficando mais alta do que era. Este teto a
	 *    prende na altura de 14 itens (o tamanho que ela tem na main) e o
	 *    excedente entra por scroll. Para mostrar mais/menos atalhos sem
	 *    recalcular nada, basta mudar --geo-paleta-itens-visiveis.
	 *
	 * As medidas vem de variaveis para nao repetir numero: o gap e o padding
	 * acima usam as mesmas, entao a conta nao sai de sincronia se mudarem. */
	--geo-paleta-item-h: 28px;   /* .btn-icon */
	--geo-paleta-item-gap: 2px;
	--geo-paleta-pad: 4px;
	--geo-paleta-folga-inferior: 96px;  /* rodape + lancador do chat */
	--geo-paleta-itens-visiveis: 14;
	max-height: min(
		calc(100vh - 300px - 22px - var(--geo-paleta-folga-inferior)),
		calc(
			var(--geo-paleta-itens-visiveis) * var(--geo-paleta-item-h) +
			(var(--geo-paleta-itens-visiveis) - 1) * var(--geo-paleta-item-gap) +
			2 * var(--geo-paleta-pad)
		)
	);
	overflow-y: auto;
}
.paleta-body button {
	margin: 0;
}
.paleta-container,
#paleta-drag {
	width: 40px;
}
#paleta-drag {
	position: absolute;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--geo-radius-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	overflow: hidden;
}
#ocult-paleta {
	width: 100%;
}
/* .icon-paleta-retrair / -expandir agora sao so' seletores de ESTADO pro
 * chevron do ::after acima (os PNGs bg-retrair/expandir foram aposentados). */

/* Botoes de atalho: quadrados maiores (alvo de clique mais confortavel),
 * cantos arredondados, realce roxo no hover. O icone da feicao e' o
 * background-image do proprio botao (setado inline via API ou via classe
 * .icon-*), entao aqui so' cuidamos da CAIXA -- o !important no hover vence
 * o "background: ... transparent" inline dos botoes com icone da API. */
.btn-icon {
	border: none;
	width: 28px;
	height: 28px;
	border-radius: var(--geo-radius-md);
	background-size: 17px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	transition: background-color .12s ease-in-out;
}
.btn-icon:hover,
.btn-icon:focus {
	background-color: var(--geo-purple-soft, rgba(83, 62, 118, .12)) !important;
	border-color: transparent;
	box-shadow: none;
}

/* ---------- Tooltips (Bootstrap .tooltip) ----------
 * Global: qualquer [data-toggle="tooltip"] do app usa este visual (init
 * em IndexBootstrap.js#init, container:'body' pra nao ficar
 * cortado por overflow:hidden de containers como .app-topo-ferramentas).
 *
 * Cor: NAO usa --geo-purple (roxo dos botoes/header) -- testado ao vivo e
 * ficou "lavado"/estranho pra um tooltip (elemento pequeno, transiente,
 * texto branco em cima de roxo médio nao rendia contraste bom o
 * suficiente pra algo tao pequeno). Cinza-chumbo quase preto, padrao
 * "utility tooltip" (GitHub/Linear/Material) -- neutro, alto contraste,
 * nao disputa atencao com a marca.
 *
 * Opacidade: Bootstrap por padrao poe .tooltip.in {opacity:.9} (90%) --
 * some com o "vidro" translucido, reforca solido/legivel.
 *
 * z-index: BUG REAL, o padrao do Bootstrap pro .tooltip e' 1070 -- menor
 * que o header roxo (#topo, 2600 !important, ver topo do arquivo) e que o
 * context-menu/dropdowns (3100+, resources/css/context-menu.css). O
 * tooltip de qualquer botao do header/toolbar renderizava LITERALMENTE
 * atras dessas camadas (confirmado com elementFromPoint no ponto do
 * tooltip retornando outro elemento por baixo) -- olhando pra tela dava
 * pra ver so' uma sombra/nada, parecia "quebrado". Acima de tudo relevante
 * no shell, sem chegar no exagero do hack de dropdown (2147483647). */
.tooltip {
	z-index: 3200;
}
.tooltip.in {
	opacity: 1;
}
.tooltip-inner {
	background-color: #2b2733;
	color: #fff;
	padding: 5px 9px;
	border-radius: var(--geo-radius-sm);
	font-size: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
	border-top-color: #2b2733;
}
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
	border-bottom-color: #2b2733;
}
.tooltip.left .tooltip-arrow {
	border-left-color: #2b2733;
}
.tooltip.right .tooltip-arrow {
	border-right-color: #2b2733;
}