.leaflet-control-feature-legend span {
			padding-left: 5px;
		}
		
		.leaflet-control-feature-legend-title {
			text-align: center;
		}
		
		.mnubtn {
			overflow: hidden !important
		}
		
		.overlay{
			display: none;
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 999;
			background: url("../img/loader2.gif") center no-repeat;
		}
		
		body.loading{
			overflow: hidden;   
		}
		
		body.loading .overlay{
			display: block;
		}
		
		.infomap{
			padding-right: 8px;
		}
			
	   .colorPicker{
			border-radius: 5px;
			height: 29px;
			width: 52px;
			border: 1px solid #ccc;
			outline: none;
			-webkit-appearance: none;
		}

		.colorPicker::-webkit-color-swatch-wrapper {
			padding: 0; 
		}
		.colorPicker::-webkit-color-swatch {
			border: none;
			border-radius: 5px;
		}	
	
		.amcharts-amexport-icon {
			width: 22px!important;
			height: 20px!important;
			min-width: 22px!important;
			min-height: 20px!important;
		}
		.amcharts-amexport-item {
			background-color: #fff!important;
		}
		
		.chart-temp {
		  width: 85%;
		  display: inline-block;
		  height: 400px;
		}
		
		.chart {
		  width: 95%;
		  display: inline-block;
		  height: 400px;
		}
		
		.map_result {
		 height: -moz-calc(100% - 81px) !important;
		 height: -webkit-calc(100% - 81px) !important;
		 height: calc(100% - 81px) !important;
		}
		
		/* Formatação para o text box de escolha de layer localizado dentro da div #mapTitle */
		.panel-title .textbox, .panel-title .textbox .textbox-text{
			background: linear-gradient(to top, #F8F8F8 0, #eeeeee 100%);
			background-repeat: repeat-x;
			font-weight:bold!important;
			text-align:center;
		}			
		
		/* Formatação para o box de detalhes das variáveis da TAB Início >> Variáveis */ 
		.info {
			border-radius:3px;
			border:1px solid #ccc;
			padding: 15px;
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
			width:80%;
		}	
		
		.accordion .accordion-header {
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.05))!important;
		}
		
		.convencoes {
			width:100px;
			text-align:center;
			font-size:14px;
			font-weight:bold;
		}
		
		.accordion .accordion-header-selected .panel-title {
			color: #575765!important;
		}	
		
		/* Formatação para o campo search da arvore */
		.search-container {
		  position: relative;
		}
		
		#jstree_search {
		  padding-right: 20px; /* Adicione espaço para o ícone à direita */
		}
		
		.slider {
			display: inline-block;
			vertical-align: middle;
			margin-left: 20px;
		}
		
		.clear-button {
		  position: absolute;
		  top: 12px;
		  left: 217px;
		  transform: translateY(-50%);
		  cursor: pointer;
		  background-color: white;
		  z-index: 1;
		}

		.clear-button-ini {
		  position: absolute;
		  top: 12px;
		  left: 227px;
		  transform: translateY(-50%);
		  cursor: pointer;
		  background-color: white;
		  z-index: 1;
		}	
	
		/* Formatação geral de fonte, tamanho, estilo */	
		body, .tabulator, .easyui-panel, .jstree, .uni-geo-panel, .ui-widget input, .textbox, .textbox-text, .combobox-item,  .ui-jqgrid, .ui-jqgrid-view {
			font-size:12px!important;
			font-family: Calibri, Arial!important; 
			font-weight:normal!important;
		}
		
		/* Inicio Formatação TABS */
		.tabs-scroller-left {
			left: 365px!important;
			z-index: 999!important;
		}	

		/* Geral para todas as tabs */
		.tabs {
			padding-left: 20px !important;
		}

		.tabs-panels {
			border-width: 1px !important;
		}
		
		#unigeo_tabs .tabs-panels {
			border-width: 1px 0 0 0 !important;
		}

		.tabs-tool {
			border-width: 0;
			margin-top: 1px;
		}

		.panel-body-noheader {
			border-top-width: 0 !important;
		}

		.content {
			padding: 20px;
		}
		
		.content-unigeo {
			padding: 20px 0 0 0;
		}

		#tb .tabs {
			height: 36px !important;
		}		

		#tb .tabs-header,
		#tb .tabs-tool {
			background: #fff;    /* Original mais claro >>> 1d83bb  -   4682B4 - Mais escuro >>> 3C719B    */
			height: 38px!important;
			border-color: #fff!important;
		}
		

		/* Específico para a tab 'tab_inicio' */
		#tab_inicio .tabs-panels-right {
			border-width: 0 0 0 1px !important;
		}

		#tab_inicio .tabs-header-left .tabs,
		#tab_inicio .tabs-header-left,
		#tab_inicio .tabs,
		#tab_inicio .tabs-tool {
			border: 0 !important;
			background-color: #fff!important;
		}

		#tab_inicio .tabs-header,
		#tab_inicio .tabs-tool {
			height: auto !important;
		}

		#tab_inicio .tabs {
			padding: 20px 0 0 8px !important;
			height: auto !important;
		}

		#tab_inicio #unigeo_tabs .tabs,
		#tab_inicio #unigeo_tabs .tabs-header {
			padding: 0 !important;
			height: auto !important;
			border-width: 0 !important;
			background-color: #fff!important;
		}
		/* Fim Formatação TABS */
				
		/* Formatação para o Tabulator */
		.tabulator-row .tabulator-cell .tabulator-data-tree-control {
   			background: rgb(255, 255, 255)!important;
		}	
		
		/* Formatação para a primeira do coluna do grid */
		.tabulator .tabulator-row .tabulator-cell[tabulator-field="r"]{
			background-color:#F3F3F3;
		}
		
		.panel-result {
			overflow-x:auto!important; 
			height:100%!important;
			width:100%!important;
		}		
		
		.combo .validatebox-text, .combobox-item{
			cursor: pointer;
		}				
		
		/* Formatação para o combo da paleta de cores */
		.select2-container .select2-selection--single .select2-selection__rendered {
			padding-top: 4px;
		}
		
		.select2-search--dropdown {
			display:none!important;
		}
		
		.select2-selection {
			background: #fafafa;
			background-repeat: repeat-x;
			background: -webkit-linear-gradient(top,#ffffff 0,#eeeeee 100%);
			background: -moz-linear-gradient(top,#ffffff 0,#eeeeee 100%);
			background: -o-linear-gradient(top,#ffffff 0,#eeeeee 100%);
			background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);
			background-repeat: repeat-x;
		}
		
		/* Formatação do container do leaflet */		
		.leaflet-container {
			background: #fff;
			outline: 0;
		}			
		
		/* Formatação para o label do grid de coordenadas */
		.leaflet-grid-label .lng {
			margin-left: 8px;
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg);
		}		
				
		/* Titulo do gráfico */
		.graph-title {
			margin-top:8px;
		}
		
		.graph-title, .graph-title .panel-header {
			height:38px!important;
		}
		
		/* Formatação para o Text Label adicionado ao mapa. Ex: Oceano Atlântico */
		.map-label {
			font-family: Arial, sans-serif;
			font-size: 12px;
			color: #4D80B3;
			padding: 5px;
			text-shadow: 1px 1px #ffffff;
			cursor: default;
		}	
		
		/* Formatação para tooltip transparente no mapa */
		.leaflet-tooltip {
			 background-color: transparent;
			 border: transparent;
			 box-shadow: none;
		}
		
		.leaflet-tooltip-top:before,
		.leaflet-tooltip-bottom:before,
		.leaflet-tooltip-left:before,
		.leaflet-tooltip-right:before {
			position: absolute;
			pointer-events: none;
			border: 6px solid transparent;
			background: transparent;
			content: "";
		}
		
		/* Alinha o centro da imagem North com o componente de escala */
		.north-arrow.leaflet-control {
			right: 28%!important;
		}
		
		/* Remove o marcador do Text Label adicionado ao mapa */
		.leaflet-marker-icon {
			background: transparent; 
			border: none; 
			box-shadow: none; 
		}	
		
		/* Remove o fundo branco do plugin de escala do leaflet */
		.leaflet-control-scale-line {
			background: rgba(255, 255, 255, 0)!important;
		}
		
		/* INICIO formatacao das legendas do mapa Leaflet */
		.sublegend-color {
			width: 20px;
			border: 1px solid #666666;
			display: inline-block;
		}

		.sublegend-item {
			padding-top: 0.2em;
		}

		.sublegend {
			list-style: none;
			padding-inline-start: 8px;
			margin-top: 0px;
		}
		
		.legend {
			padding: 6px 10px 6px 6px;
			color: #333;
			background: #fff;
			background: rgba(255,255,255,1);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		/* FIM formatacao das legendas do mapa Leaflet */
		
		/* INICIO Formatação para o box filtro de unidade geográfica */
		.ug-filter-add,.ug-filter-add-disable,.ug-filter-remove,.ug-filter-remove-disable	{
			width: 16px;
			height: 16px;
			padding: 0px;
			margin: 0px;
			float: right;
			margin-left: 10px;
		}
		
		.ug-filter-add,.ug-filter-remove {
			cursor: pointer !important;
		}
		
		.ug-filter-add-disable,.ug-filter-remove-disable {
			cursor: default !important;
		}

		.ug-filter-add {
			background: url('../img/filters_gray.png') 0px 0px no-repeat !important;
		}		
		
		.ug-filter-add:hover::after {
			content: 'Filtrar';
			position: relative;
			left: -45px;
			white-space: nowrap; 
			z-index: 99999;
			opacity:.7;
			padding:2px 4px 2px 4px;
			border-radius:3px;
			border:1px solid #000;
			background-color:#fefefe;
		}
		
		.ug-filter-remove:hover::after {
			content: 'Remover Filtro';
			position: relative;
			left: -115px;
			white-space: nowrap; 
			z-index: 99999;
			opacity:.7;
			padding:2px 4px 2px 4px;
			border-radius:3px;
			border:1px solid #000;
			background-color:#fefefe;
		}

		.ug-filter-add-disable {
			background: url('../img/filters_gray.png') -17px 0px no-repeat !important;
		}

		.ug-filter-remove {
			background: url('../img/filters_gray.png') 0px -17px no-repeat !important;
		}

		.ug-filter-remove-disable {
			background: url('../img/filters_gray.png') -17px -17px no-repeat !important;
		}	
		
		.uni-geo-panel a {
			float: right;
			margin-left: 10px;
			cursor: pointer;
		}
		/* FIM Formatação para o box filtro de unidade geográfica */
							
		.toolbargrid  {
			margin-top:5px;
			height:30px!important;
			white-space: nowrap;
		}
		
		.more-buttons-tabulator {
			white-space: nowrap;
			flex-shrink: 0;
			display: inline-block;
			vertical-align: top;
		}
		
		.panel-title{
			text-align: center;
		}
		
		.deleterow, .delete_all {
			right: 5px;
			vertical-align:middle;
		}	
		
		.deleterow, .delete_all, .up, .down {
			cursor: pointer;
		}	
			
		/* Altera o icone de resize das colunas no jqgrid para o padrão do jeasy-ui */
		.ui-jqgrid-resize {
			cursor:e-resize!important;
		}			
					
		.jstree {
			display: inline-block;
			margin-left: -20px;
		}		
		
		/* Aumenta o tamanho do header do grid de seleção */
		.jqgrid-wrapper .ui-jqgrid .ui-jqgrid-htable th div {
			height:28px!important;
			padding-top: 5px;
		}
		
		.ui-jqgrid-view input {
			vertical-align: sub;
		}
		
		/* Sobrepõe estilo do jquery ui para que o jqGrid fique com a mesma aparência do restante da interface */
		.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
			background-color: #f3f3f3!important;
			background: -webkit-linear-gradient(top,#F8F8F8 0,#eeeeee 100%)!important;
			background: -moz-linear-gradient(top,#F8F8F8 0,#eeeeee 100%)!important;
			background: -o-linear-gradient(top,#F8F8F8 0,#eeeeee 100%)!important;
			background: linear-gradient(to bottom,#F8F8F8 0,#eeeeee 100%)!important;
			background-repeat: repeat-x!important;
		}
		
		.ui-state-hover {
			background: #beebff!important;
		}
		
		.ui-jqgrid-jquery-ui.ui-jqgrid .ui-jqgrid-bdiv tr.ui-row-ltr > td {
			border-color: transparent!important;
		}		
				
		.AltRowClass {
			background : #f3f3f3;
			opacity: 1!important;
		}
		
		.ui-priority-secondary {
			opacity: 1!important;
		}

		input.cb_all_var, input.cb_all, input.cbh, input.cb, input.cb_disabled{
			width: 12px;
			height: 12px;
		}
		
		input.cb_uni_geo{
			width: 14px;
			height: 14px;
		}
		
		/* alinhamento dos checkbox da seleção de unidade geográfica */
		.cb_uni_geo {  
			vertical-align: middle;
		}
		
		/* Não permite que o texto dos tabs seja selecionavel */
		.tabs-inner span.tabs-title {
			user-select: none;
		}
		
		.accordion-body {
			padding:5px;
		}
		
		.easyui-accordion .panel-title {
			text-align:left!important;
		}
		
		.left, .right {
		  position: absolute;
		  top: 50%;
		  transform: translateY(-50%);
		  padding:10px;
		  cursor: pointer;
		}
				
		.left {
			left: 0;
		}
		.right {
			right: 0;
		}
		
		.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button {
			padding: 0 8px 0 0!important;
		}
			
		.top-container {
			display: flex;
			width: 100%;
			box-sizing: border-box;
		}
		
		.div1 {
			width: 70%;
			box-sizing: border-box;
			border-radius:3px;
			padding: 0px 10px 0px 0px;
			text-align: left;  
			margin: 30px 30px 10px 30px;
			font-size: 17px!important;
			text-align: justify;
			text-justify: inter-word;
		}	
		
		.right-column {
		  width: 30%;
		  display: flex;
		  flex-direction: column;
		  box-sizing: border-box;
		}
					
		.div2, .div3 {
			border-radius:3px;
			border:1px solid #ccc;
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
			padding: 20px;
			text-align: left;   
			margin: 0px 0px 10px 10px;
			overflow: auto;
			box-sizing: border-box;
			flex-shrink: 0;
		}
		
		.div2 {
			height: 30%;
			max-height: 200px;
			min-height: 0;
		}
		
		.div3 {
			height: 70%;
			max-height: 360px;
			min-height: 0;
		}
		
		.div4 {
			margin: 30px 10px 10px 0px;
			text-align:center;
		} 
		
	    .apresentacao-img {
			padding-right: 15px;
			margin-bottom: 15px;
			width: 195px;
			height: 64px;
		}	

		.content-wrapper { 
			margin: 0;
			height: 100vh;
		}
		
		.title {
			font-size: 18px;
			font-weight: bold;
			margin: 0 0 8px 0!important;
		}
		
		.login {
		  position: fixed;
		  cursor: pointer; 
		  bottom: 10px;
		  left: 15px;
		  width:24px;
		  height:24px;
		  z-index: 10000;
		}
		
		.container {
			padding: 0 0 60px 0;
			display: flex;
			flex-wrap: wrap;
			gap: 40px;
			justify-content: space-between;
		}

		.link-box {
			flex: 1;
			height: 140px;
			min-width: 140px;
			border-radius: 16px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 22px;
			font-weight: bold;
			color: #fff;
			text-decoration: none;
			transition: transform 0.2s, box-shadow 0.2s;
			flex-shrink: 0;
		}

		.link-box:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
		}
		
		.container-apresentacao {
			width: 100%;
		}

		.imagem {
            float: right;
            width: 340px; /* Largura da imagem */
            margin-left: 35px; /* Espaço entre texto e imagem */
			margin-bottom: 20px;
			margin-top: 5px;
			cursor: pointer;
		}

        .imagem img {
            width: 100%;
            height: auto;
            display: block;
        }

        .texto {
            text-align: justify;
        }
		
		@media screen and (max-width: 1600px) {
		  .imagem {
            width: 290px!important;
		  }	
		  .div1 {
			font-size: 14px!important;
		  }
		  .link-box {
			font-size: 20px!important;	
		  }	
		}
		
		@media screen and (max-width: 1200px) {
	      .div2 {
			max-height: 215px;
		  }			
		  .div3 {
			max-height: 390px;
		  }
		  .container {
			gap: 20px!important;
			padding: 0 0 25px 0;
		  }		
		  .link-box {
			font-size: 18px!important;	
		  }			
		}
				
		@media screen and (max-width: 1050px) {
		  .div1 {
			margin: 20px 20px 10px 20px!important;
		  }
		  .div2 {
			max-height: 230px!important;
		  }			
		  .div3 {
			max-height: 370px!important;
		  }
		  .div2, .div3 
		  {
			padding: 10px!important;
		  }
		  .imagem {
            width: 240px!important; 
            margin-left: 15px!important; 
			margin-bottom: 5px!important;
		  }	
		  .link-box {
			font-size: 16px!important;
			height: 120px!important;
			min-width: 120px!important;
		  }
		  .title {
			font-size: 17px!important;
		  }	
	  }
		
		@media screen and (max-width: 900px) {
		  .div1 {
			margin: 15px 15px 10px 15px!important;
			font-size: 14px!important;
		  }
		  .div2 {
			max-height: 160px!important;
		  }			
		  .div3 {
			max-height: 380px!important;
		  }	
		  .div2, .div3 {
			  font-size: 13px!important;
		  }
		  .imagem {
            width: 200px!important; 
		  }		
		  .link-box {
			font-size: 14px!important;	
			height: 100px!important;
			min-width: 100px!important;
		  }			
		}
		
		@media screen and (max-width: 800px) {
		  .div1 {
			margin: 10px!important;
			font-size: 12px!important;
		  }
		  .div2 {
			max-height: 220px!important;
		  }	
		  .div3 {
			max-height: 320px!important;
		  }	
		  .div2, .div3 {
			 font-size: 11px!important; 
		  }
		  .imagem {
            width: 160px!important; 
		  }		
		  .link-box {
			font-size: 14px!important;	
		  }	
		  .title {
			font-size: 16px!important;
		  }			
		}