.bg-primary {
     background-color: #284b63 !important;
     border-color: #284b63 !important;
     ;
   }

   .btn-primary,
   .page-item.active .page-link {
     background-color: #2a9d8f !important;
     border-color: #2a9d8f !important;
     ;
   }

   table .fas {
     color: #495057 !important;
   }

   fieldset {
     border-radius: 5px !important;
     border: 1;
   }

   .dataTables_info {
     display: flex;
     justify-content: flex-start;
   }

   .dataTables_paginate {
     display: flex;
     justify-content: flex-end;
     margin-top: -24px;
   }

   .select2-container {
     width: 100% !important;

   }

   .select2-selection--multiple {
     padding-bottom: 4px !important;
     height: auto !important;
     /* Permitir que a altura seja ajustada automaticamente */
     overflow: hidden;
     /* Evitar barras de rolagem dentro do seletor */
     white-space: normal;
     /* Permitir que o conteúdo flua para várias linhas */
   }

   .select2-selection__choice,
   .select2-selection__choice span {
     margin-left: 4px !important;
     margin-right: 0px !important;
     border: 0 !important;
     color: white;
     text-align: center;
     vertical-align: middle;
     font-size: 0.875rem;
     line-height: 2.0;
     border-radius: 0.2rem;
   }

   .setor .select2-selection__choice {
     background-color: #36b9cc;

   }

   .papel .select2-selection__choice {
     background-color: #1cc88a;

   }

   .select2-selection__choice button {
     margin: 0 0 0 0 !important;
     padding: 0 0 0 0 !important;
     margin-top: -1px !important;
     padding-left: 2px !important;
     padding-right: 2px !important;
     background-color: transparent;
     border: none;
     text-align: center;
     vertical-align: middle;
   }

   .table-form td {
     border: none;
   }

   .dropdown-menu {
     z-index: 1050 !important;
     /* Define um z-index alto para garantir que o dropdown apareça sobre outros elementos */
     position: absolute !important;
   }

   .card-header[role="button"]::after {
     content: none !important;
     /* Remove a seta padrão do colapso */
   }

   .toggled .sidebar-heading {
     display: flex !important;
     justify-content: center;
     font-size: 0.6rem;
   }

   .toggled span {
     display: flex !important;
     justify-content: center;
     font-size: 0.7rem !important;
   }

   .link {
     color: #4e73df !important;
   }

   h6 a:visited,
   .li-detalhes a:visited {
     color: #4e73df !important;
   }

   .paginate_button.page-item:not(.active):not(.disabled) a {
     color: #4e73df !important;
   }

   .card {
     overflow: visible !important;
   }

   .choices__inner {
     background-color: white !important;
   }

   .dropdown-menu a:visited {
     color: #3a3b45 !important;
   }

   .choices__inner:invalid:after {
     background-color: red !important;
   }


   .erro {
     color: red !important;
     font-size: 0.9rem;
   }

   .form-control {
     margin-bottom: 0px !important;
   }

   .search-container {
     margin-bottom: 15px !important;
   }

   .floating-card {
     position: absolute;
     bottom: 10px;
     right: 10px;
     width: 250px;
     background: white;
     border-radius: 8px;
     z-index: 10;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     cursor: grab;
   }

   .floating-card:active {
     cursor: grabbing;
   }


   #container {
     display: flex;
     width: 100%;
     height: 68vh;
   }

   #map {
     flex: 1;
     height: 100%;
     min-width: 100px;
     /* Para evitar que o mapa desapareça */
   }

   #grafo-container {
     position: relative !important;
     flex: 1;
     height: 100%;
     min-width: 100px;
     /* Para evitar que o grafo desapareça */
     display: flex;
     flex-direction: column;
     overflow: visible !important;
      z-index: 1;
     background: white;
   }

   #menu-grafo {
     position: absolute;
     padding: 5px;
     margin: 5px;
     z-index: 20;
     border: 1px solid #ddd;
     background: white;
     border-radius: 4px;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
   }

   #grafo {
     padding: 0px;
     overflow: hidden !important;
   }

   #grafo-sigma {
     overflow: hidden;
   }

   #divider {
     width: 5px;
     background-color: #ccc;
     cursor: ew-resize;
     /* Indica que pode ser arrastado */
     position: relative;
   }

   .btn-xs {
     padding: 2px 6px;
     font-size: 12px;
     line-height: 1;
   }


   .compact-table {
     width: 100%;
   }

   .compact-table td {
     padding: 4px 4px;
     /* Reduz o espaço entre as células */
     font-size: 12px;
     /* Diminui o tamanho do texto */
   }

   .compact-table button {
     padding: 2px 6px;
     /* Torna os botões menores */
     font-size: 12px;
     line-height: 1;
   }

   .floating-card {
     padding: 10px;
     /* Reduz o padding do card */
   }

   #floating-radar-btn {
     display: none;
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
   }

   #floating-radar-btn button {
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3) !important;
   }

   /* Estilização do container dos botões */
   #floating-buttons {
     display: none;
     position: absolute;
     bottom: 5px;
     left: 5px;
     flex-direction: column;
     gap: 5px;
     z-index: 1000;
   }

   /* Estilização dos botões */
   #floating-buttons button {
     background: white;
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 4px;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
     font-size: 20px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   #floating-buttons button:hover {
     background: #f0f0f0;
   }

   #clusters-container {
     display: none;
     position: absolute;
     /* Define um contexto para posicionamento dos filhos */
     right: 5px;
     bottom: 5px;
     max-height: 100%;
     flex-direction: column;
     gap: 5px;
     z-index: 10;
     overflow-y: auto !important;
     scrollbar-width: none;
     /* Oculta a barra de rolagem no Firefox */
   }

   #clusters-container>* {
     flex-shrink: 0;
     /* 🔹 Impede que os cards encolham */
   }

   /* Card flutuante dos clusters */
   #clusters-card {
     width: 280px;
     background: white;
     border: 1px solid #ddd;
     border-radius: 4px;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
     padding: 10px;
     display: block;
     z-index: 10;
     overflow: hidden;
     /* Esconde conteúdo extra ao recolher */
     transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
   }

   /* Classe quando o card está recolhido */
   .collapsed {
     height: 40px;
     /* Apenas o tamanho do título */
     padding: 5px 12px;
   }

   /* Cabeçalho do card */
   .clusters-header {
     display: flex;
     margin-bottom: 2px;
     justify-content: space-between;
     font-weight: bold;
     font-size: 16px;
     align-items: center;
     color: #000000;

   }

   /* Botão para recolher o card */
   #toggle-clusters {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   /* Informações sobre os clusters */
   .clusters-info {
     font-size: 12px;
     color: #000000;
   }

   /* Lista dos clusters */
   #clusters-list,
   #regions-list {
     display: grid;
     margin: 0px;
     gap: 4px;
     padding: 0;
     list-style: none;
   }

   #regions-list {
     grid-template-columns: repeat(2, 1fr);
   }

   #clusters-list {
     grid-template-columns: repeat(3, 1fr);
   }

   /* Cada item da lista */
   #clusters-list li,
   #regions-list li {
     display: flex;
     align-items: center;
     font-size: 14px;
     padding: 1px;
     gap: 4px;
     /* Espaço entre o círculo de cor e o nome do estado */
     white-space: nowrap;
     /* Evita quebra de linha nos nomes dos estados */
     cursor: pointer;
     transition: background 0.3s;
   }

   #clusters-list li:hover,
   #regions-list li:hover {
     background: #f0f0f0;
   }

   /* Cor do cluster ao lado do nome */
   .cluster-color {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     margin-right: 8px;
     display: inline-block;
   }

   .clusters-controls {
     display: flex;
     justify-content: space-between;
     padding: 5px 10px;
   }

   .filtros {
     border-radius: 4px;
   }

   /* Estilização da caixa de busca */
   #search-container {
     position: relative !important;
     border: 1px solid #ddd;
     background: white;
     border-radius: 4px;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
     padding: 10px;
     display: flex;
     align-items: center;
     width: 280px;
     height: 40px;
     overflow: visible !important;
   }

   /* Ícone da lupa */
   #search-container i {
     font-size: 16px;
     color: #666;
     margin-right: 8px;
     display: block;
   }

   /* Input de busca */
   #node-search {
     flex: 1;
     border: none;
     outline: none;
     font-size: 14px;
     padding: 5px;
   }

   /* Dropdown de sugestões */
   #search-results {
     position: absolute;
     top: calc(100% + 2px) !important;
     right: 0;
     width: 100%;
     background: white;
     border-radius: 4px;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
     display: none;
     /* Inicialmente escondido */
     flex-direction: column;
     max-height: 150px;
     font-size: 14px;
     overflow-y: auto;
     z-index: 9999;
   }

   .search-item {
     padding: 8px;
     cursor: pointer;
     border-bottom: 1px solid #ddd;
   }

   .search-item:last-child {
     border-bottom: none;
   }

   .search-item:hover {
     background: #f0f0f0;
   }

   /* Estilo para clusters ocultos */
   .disabled-cluster {
     color: #bbb !important;
     /* Texto cinza claro */
     opacity: 0.5;
     /* Diminui a opacidade */
   }

   /* Estilo para o círculo de cor ao lado do nome */
   .disabled-cluster .cluster-color {
     filter: grayscale(100%);
     /* Deixa a cor em tons de cinza */
     opacity: 0.5;
   }

   /* Melhora os rótulos */
   .filter-group label {
     font-size: 14px;
     margin: 0;
     font-weight: bold;
     color: #333;
   }

   /* Cada filtro individual */
   .filter-group {
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: 200px;
     align-items: center;
   }

   /* Aparência do select */
   .filter-group select {
     width: 100%;
     height: 35px !important;
     cursor: pointer;
     font-size: 14px !important;
   }

   .card-bonito {
     background: linear-gradient(to bottom right, #ffffff 50%, #d9e4f5);
     border-radius: 5px;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
     transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   }

   /* Efeito ao passar o mouse */
   .card-bonito:hover {
     transform: scale(1.05);
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
   }

   .card-number {
     font-size: 2rem;
     font-weight: bold;
     color: #0056b3;
     /* Azul mais escuro para melhor contraste */
   }

   #loading-overlay {
     position: absolute;
     /* Ocupa toda a área do grafo-container */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.8);
     /* Fundo semi-transparente */
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 18px;
     font-weight: bold;
     color: #333;
     z-index: 99999;
     /* Certifica-se de que fique sobreposto ao grafo */
     backdrop-filter: blur(3px);
     /* Efeito de desfoque no fundo */
   }

   .loading-gif {
     width: 80px;
     /* Ajuste o tamanho do GIF conforme necessário */
     height: 80px;
   }

   .logo {
     position: fixed;
     top: 0px;
     left: 10px;
     width: 220px;
     /* Ajuste conforme necessário */
     height: auto;
     z-index: 1000;
     /* Mantém a logo sobre os outros elementos */
   }

   .logo-h {
     position: relative;
     top: 0px;
     left: -28px;
     width: 180px;
     /* Ajuste conforme necessário */
     height: auto;
     object-fit: contain;
     /* Evita cortes na imagem */
     z-index: 1000;
     /* Mantém a logo sobre os outros elementos */
   }

   .logo-menu {
     position: relative;
     justify-content: center;
     /* Centraliza horizontalmente */
     align-items: center;
     /* Centraliza verticalmente */
     width: 250px;
     /* Ajuste conforme necessário */
     height: auto;
     object-fit: contain;
     /* Evita cortes na imagem */
     z-index: 1000;
     /* Mantém a logo sobre os outros elementos */
   }

   .parceiros {
     position: fixed;
     display: flex;
     flex-wrap: wrap;
     top: 65px;
     right: 10px;
     width: clamp(600px, 40vw, 100%);
     /* cresce entre 250px e 500px conforme o viewport */
     gap: 20px;
     align-items: center;
     height: auto;
     z-index: 1000;
     /* Mantém a logo sobre os outros elementos */
   }

   .sidebar-heading {
     font-size: 0.8rem !important;
   }


   ul.custom-list {
     padding: 0;
     margin: 0;
   }

   ul.custom-list li {
     margin-top: -20px;
     /* Ajuste conforme necessário */
     padding-left: 10px;
     /* Reduz o espaçamento interno */
     font-size: 0.7rem !important;
   }