/*MISCELLANEOUS*/
#content											{ margin: 10px; }
.bold												{ font-weight: bold; }
.gLeft												{ float: left; }
.gRight												{ float: right; }
.NoData2>*											{ font-size: 1.5rem; color: #89BEBA; }
.spnNoData 											{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.divBotonMas										{ text-align:center; margin-top: 200px; }
.combo-format										{ display: inline-block !important; margin-left: 10px; width: auto !important; max-width: 100%; margin-top: 5px; line-height: 1.5;  background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .3rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.graphicTitle										{ width: 50%; text-align: center; }
.AppToolBarContent 									{ max-width: none; }
.ui-dialog-titlebar-close 							{ visibility: hidden; }

/*CHECK-INE*/
input.checkINE[type="checkbox"]						{ font-weight: normal; font-size: 1rem; margin: 0; top: 3px; height: 16px; width: 16px; display: inline-block; background: transparent; border: 0 none; outline: none !important; box-shadow: none !important; overflow: visible; position: relative; }
input.checkINE[type="checkbox"] + label				{ color: #000; font-weight: normal; font-size: 1rem; margin: 0 5px 0 0; padding-right: 10px; min-width: inherit; white-space: normal; word-break: inherit; position: relative; top: 1px; }
input.checkINE[type="checkbox"]:checked+label		{ font-weight: bold; }
input.checkINE[type="checkbox"] + label.inBlock		{ display: inline-block; width: calc(100% - 30px); }
input.checkINE[type="checkbox"]::before				{ border: 1px solid rgba(0,0,0,0.2); outline: none !important; box-shadow: none !important; background-color: #fff; border-radius: 2px; content: ''; display: block; height: 16px; width: 16px; }
input.checkINE[type="checkbox"]:checked::before		{background: linear-gradient(45deg, #335B55 0%, #457e76 150%);border-color: #457e76;}
input.checkINE[type="checkbox"]::after 				{ border: 2px solid #fff; border-right: 0; border-top: 0; outline: none !important; box-shadow: none !important; content: ''; display: block; height: 4px; left: 2px; opacity: 0; position: absolute; top: 5px; transform: rotate(-45deg); width: 12px; }
input.checkINE[type="checkbox"]:checked:after 		{ opacity: 1; }
input.checkINE[type="checkbox"]:focus				{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #457e76 !important; background: #DDEEEC; color: black; }

@-moz-document url-prefix() { 
	input.checkINE[type="checkbox"] 				{ filter: hue-rotate(303deg) saturate(0.3); position: relative; top: 2px; }
}

/*GENERAL*/
select								{ border-style: none; border: 1px solid #457E76; max-width: 200px; font-size: initial; }
h1									{ font: bold 2.0em Arial, sans-serif; margin: 2.5rem 0 calc(2.5rem + 10px) 0; }
h2									{ font: bold 1em Arial, sans-serif; }

/*ICONS*/
.grp-icons 							{ width: 100%; margin-bottom: 5px; display: flex; justify-content: end; }
.grp-icons>a, .grp-icons>button		{ flex: 0 0 auto; padding-block: 1px; padding-inline: 6px; }
.grp-icons>a>span					{ margin-left: 10px; margin-right: 5px; }
.grp-icons-sub 						{ text-align: left; margin: 0 0 0 1rem; }
.grp-icons-sub>li					{ margin: 0.5rem 0; }
.grp-icons-sub>li>a					{ display: inline-flex; align-items: center; gap: 0.5rem;}

/*CONTENT*/
.tabcontent 						{ display: inline-flex; flex-direction: column; }
.form								{ text-align: left; }
.contentSelect						{ display: inline-flex; flex-wrap: wrap; margin: 0 0 2rem 0; gap: 2rem; }
.cntSlc>label 						{ margin: 0 0.5rem 0 0; }
.chartAndInfo 						{ display: grid; grid-template-columns: minmax(auto, 70%) auto; gap: 1rem; align-items: center;}
.chart 								{ clear:both; height:350px; max-width:550px; min-width: 550px; }
.row 								{ display: flex; }

/*FILTERS*/
.filterArea 						{ text-align: center; margin: 1rem 0 2rem 0; }
.commonSlider 						{ align-items: center; }
.sourceText							{ font-style: italic; }

/*SLIDER*/
.commonText							{ text-align: left; margin: 0 0 1rem 0; }
.commonTitle						{ font: bold 1.2em Arial, sans-serif; text-align: center; margin: 1rem 0 0 0; }
.commonPlay							{ white-space: nowrap; text-align: left; }
.btn-play-pause						{ margin: 0 0.5rem; }
.btn-play-pause:focus				{ border-color: var(--bg-color) !important; outline: 2px solid var(--color-focus) !important; box-shadow: 0 0 0 2px var(--bg-color) !important; }
.commonSlider 						{ display: flex; align-items: center; margin: 0.5rem 0 0 0; }
.commonSlider .slider 				{ flex: 1; }
.slidecontainer 					{ margin-top: 10px; }
.slider 							{ -webkit-transition: .2s; transition: opacity .2s; -webkit-appearance: none; appearance: none; background: #d3d3d3; outline: none; opacity: 0.5; /*width: 100%;*/ margin-top: 2px; }
.slider:hover 						{ opacity: 1; }
.slider::-webkit-slider-thumb 		{ -webkit-appearance: none; appearance: none; background: #457E76; cursor: pointer; height: 15px; width: 15px; }
.slider::-moz-range-thumb 			{ background: #457E76; cursor: pointer; height: 15px; width: 15px; }

/*INFO*/
.red 								{ color: #993333 !important; }
.info, .infoTot 					{ font-size:0.9em; text-align: left; margin: 0.5rem; border: none; border-top: 1px solid; min-width: 225px; white-space: nowrap;}
.infoTot							{ display: none; }
.infoTot.visible 					{ display: block; }
.labelInfo							{ margin-right:5px; }
.infoContent>fieldset>legend 		{ font-weight: bold; color: var(--color2-text); padding: 0 1rem; text-align: left; }
fieldset.info>legend, 
fieldset.infoTot>legend 			{ font-weight: bold; color: var(--color1-100); padding: 0 0.5rem;}
    
/*MEDIA*/
.div-media 							{ margin: 3rem 0 2rem 0; }
.div-media > span					{ font-size: 1.10rem; font-weight: bold; float: left; width: 100%; margin: 0 0 1rem 0; }

@media all and (max-width: 768px) {
	.chartAndInfo 					{ grid-template-columns: auto; }
	.chart 							{ max-width: none; min-width: 300px; }
	.infoContent 					{ display: flex; gap: 10px; justify-content: center; align-items: flex-start; }
	.infoContent > fieldset 		{ display: flex; }
	.cntSlc 						{display: flex;	width: 100%; justify-content:center;}
	.cntSlc > label 				{flex: 0 1 auto;}
	.cntSlc > select 				{flex: 1 1 auto; max-height: 25px; }
	.commonPlay 					{ white-space: normal; }
	.info, .infoTot 				{ min-width: auto; white-space: normal; }
}