:root{
	
	--primary-color: #FB6302;
	--secondary-color: #B839D8;
	
	--light-primary-color: #FB6302;
	--light-secondary-color: #B839D8;
	
	--dark-primary-color: #FB6302;
	--dark-secondary-color: #B839D8;
	
	--primary-color-50: #FB630280;
	--secondary-color-50: #B839D880;
	--light-primary-color-50: #FB630280;
	--light-secondary-color-50: #B839D880;
	--dark-primary-color-50: #FB630280;
	--dark-secondary-color-50: #B839D880;
	
	
	
	--background-color: #EEEEEE;
	--dark-background-color: #27272a; /*bg-zinc-800*/


	--color-default-1: black;	/*bg-black*/
	--color-default-2:	white; 	/*bg-white*/
	--text-color-placeholder: #888888;
	--text-color-message: #BBBBBB;
	
	--input-color-error: #fecaca;
	--input-color-error-ring: #ef4444;
	
	--dark-background-content: #18181b; /*bg-zinc-900*/
	
	--errorColorIcon: #C7302B;
	
	--input-color: #EEEEEE;
	--border-input-color: #d1d5db;

	--dark-login-background: #333333;
	--dark-input-background-color: #2D2D2D;
	--dark-border-input-color: #222222;
	
	--dark-border-color:  #222222;

	--color-border-grupo: #94a3b8;
	--titulo-color-modal: #DDDDDD;
	--input-color-weak:  #F9FAFB;
	--background-color-weak: #FFFFFF;
	--icon-color-desable: #CECECE;
	
	--dark-color-disable:	#555555;
	
	--vcolor-tpri1: 204,   0,   0;
	--vcolor-tpri2: 255, 126,   0;
	--vcolor-tpri3: 179, 149,   0;
	--vcolor-tpri4:   0, 153,   0;
	--vcolor-tpri5:   0,  85, 128;
	
	
	--vcolor-tpri1-hex: #CC0000;
	--vcolor-tpri2-hex: #FF7E00;
	--vcolor-tpri3-hex: #B39500;
	--vcolor-tpri4-hex: #009900;
	--vcolor-tpri5-hex: #005580;
	
	--vcolor-tpri1-hex-50: #CC000080;
	--vcolor-tpri2-hex-50: #FF7E0080;
	--vcolor-tpri3-hex-50: #B3950080;
	--vcolor-tpri4-hex-50: #00990080;
	--vcolor-tpri5-hex-50: #00558080;
	
	--text-color-button-add: #2F88FF;
	
	--background-alta-ocorrencia: #FDE8E8;
	--background-media-ocorrencia: #FDF6B2;
	--background-baixa-ocorrencia: #DEF7EC;
	--text-alta-ocorrencia: #9B1C1C;
	--text-media-ocorrencia: #723B13;
	--text-baixa-ocorrencia: #03543F;
	
	--border-column-grid: #8300BD;
	
	--icon-grid-inative: #DDDDDD;
	--icon-grid-dark-inative: #888888;
	
	--vcolor-main: #303030;
	
	--bg-slider: #DDD;
	
	--text-color-default: #000000;

}

.dark {
	--text-color-default: #ffffff;
}

@font-face {
  		font-family: 'Inter';
  		src: url(../utils/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf) format('truetype');
}

body{
	font-family: 'Inter', sans-serif;
}

.none {
	display: none !important;
}

@supports (-webkit-touch-callout: none) {
    body {
    	font-family: 'Inter', sans-serif;
		height: 90vh;
		
    }
}

#swLoader {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
	background-color: #ffffffCC;
	z-index: 100000;
	animation: sit-fadeEffect .3s; /* Fading effect takes 1 second */
}

#swLoaderContent {
	border: 12px solid var(--primary-color);
	border-radius: 50%;
	border-top: 12px solid #FFFFFF00;
	width: 160px;
	height: 160px;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	position: fixed;
	left: calc(50% - 80px);
	top: 30%;
}

.inputColor{
	background-color: transparent;
	border: none;
    cursor: pointer;
   	height: 2.5rem;
}

.inputColor::-webkit-color-swatch{
	border-radius: 8px;
	border: none;
}


::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0); /* Torna o fundo da barra de rolagem transparente */
  width: 1.25rem;
}

::-webkit-scrollbar {	
	width: 0.5rem;
	height: 0.5rem;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb{
	width: 0.5rem;
    height: 0.5rem;
	background-color: var(--primary-color-50);
	border-radius: 20px;
}

.dark ::-webkit-scrollbar-thumb{
	width: 0.5rem;
    height: 0.5rem;
	background-color: var(--dark-primary-color-50);
	border-radius: 20px;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MjUxNTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jaGV2cm9uLWRvd24iPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==") no-repeat 98.5% ;
  	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MjUxNTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jaGV2cm9uLWRvd24iPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==") no-repeat calc(100% - 0px);
}

select.no-arrow {
	background: none;
}

.arrow{
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MjUxNTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jaGV2cm9uLWRvd24iPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==") no-repeat 98.5% ;
  	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MjUxNTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jaGV2cm9uLWRvd24iPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==") no-repeat calc(100% - 10px);
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none; 
  background-color: var(--secondary-color);
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 6px;
  background: var(--input-color);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 15px;
  width: 15px;
  background: var(--secondary-color);
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}

input[type=range]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: var(--secondary-color);
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}

input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(255,85,0, .1);
  background-color:var(--secondary-color)
}

input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2);background-color:var(--secondary-color)
}

input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2);background-color:var(--secondary-color)
}

input[type=range]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 10px rgba(255,85,0, .1);background-color:var(--secondary-color)
}

input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2);background-color:var(--secondary-color)
}

input[type=range]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2);background-color:var(--secondary-color)  
}

.value2, .value3, .value4 {
  font-size: 26px;    
  width: 50px;
  text-align: center;
}

.dashboardLegendGrid {
	  grid-template-columns: auto auto;
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: white;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid purple;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rf-ntf {
	margin-top: 60px !important;
}

.swInputFiltro{
	background: linear-gradient(to right, white 0%, var(--input-color) 10%,  var(--input-color) 100%);	
}

.swInputFiltro:is(.dark *){
	background: linear-gradient(to right, var(--dark-background-color) 0%, var(--dark-input-background-color) 10%, var(--dark-input-background-color) 100%)
}

.rf-ntf-cnt {
	border: 2px solid var(--primary-color) !important;
	border-radius: 8px !important;
	background: white !important;
	box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, .2) !important;
}

.apexcharts-zoom-icon.apexcharts-selected svg{
	  fill:	var(--primary-color) !important;
}

.apexcharts-pan-icon.apexcharts-selected svg{
	  stroke:	var(--primary-color) !important;
}

.apexcharts-marker {
	
}

/* NEW SLIDER */
.swSlider {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 25px;
    background-color: var(--bg-slider);
    border-radius: 9999px;
    transition: background-color 0.0s;
}

.swSlider::after {
    content: '';
    position: absolute;
    top: 2.33px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    border: 1px solid #D1D5DB;
    border-radius: 9999px;
    transition: all 0.2s;
}


.dark .swSlider::after{
	background-color: var(--dark-primary-color);
}


.dark input[type="checkbox"]:checked + .swSlider {
    background-color: var(--dark-primary-color);
}

input[type="checkbox"]:checked + .swSlider {
    background-color: var(--primary-color);
}

input[type="checkbox"]:checked + .swSlider::after {
    transform: translateX(20px);
    background-color: white;
}