:root {
		--st_font_family: "Monserrat";
		--st_font_tamanionormal: calc(var(--st_font_tamanio) + 0px);
		--st_font_tamaniogrande: calc(var(--st_font_tamanio) + 1px);
		--st_font_tamaniogrande2: calc(var(--st_font_tamanio) + 2px);
		--st_font_tamaniogrande3: calc(var(--st_font_tamanio) + 3px);
		--st_font_tamaniogrande4: calc(var(--st_font_tamanio) + 4px);
		--st_font_tamaniopeque: calc(var(--st_font_tamanio) - 1px);
		--st_font_tamaniopeque2: calc(var(--st_font_tamanio) - 2px);

		--st_color1: #1f3d7a;
		--st_color1oscuro: #152951;
		--st_color1medio: #6b8bc6;
		--st_color2medio: #9ab3e5;
		--st_color1claro: #D3E1F3;
		--st_color1masclaro: #E6EEF9;
		--st_color2masclaro: #eaf1fa;

		--st_colorcontraste1: #c0c0c0;
		--st_colorcontraste1oscuro: #666666;
		--st_colorcontraste1claro: #e6e6e6;

		--st_colorrequerido: #edcccc;
		--st_colorrequeridoborde: #ae3334;

		--st_colorfondo:#ffffff;
		--st_colorfondomuysuave:#eeeeee;
		--st_colorfondosuave:#dddddd;
		--st_colornegro:#000000;
		--st_coloralerta:#cc0000;
		--st_coloralertacont:#ffffa4;

		--st_icotamanio: 25px; /* Ancho y Alto de iconos y botones */
		--st_icozoom: 100%; /* 100% = st_icotamanio */
		--st_icozoompeque: 70%;

        /*	png para ICONOS 25x25 */
        --st_urlimg: url('./archivoscss/icomix_1.png?a=36');

        /*	png BOTONES 25x25 */
        --st_urlbtn: url('./archivoscss/btnmix_1.png?a=36');

		/*png FLECHAS Y ESPECIALES */
        --st_urlsnl: url('./archivoscss/snlmix_1.png?a=36');

		/*png Ordenar Plecas */
        --st_urldrag: url('./archivoscss/dragmix_1.png?a=36');

		/*png Area Basicos */
        --st_urlbasc: url('./archivoscss/basicmix_1.png?a=36');

        /*	png que deben tener todos los iconos con el mismo ancho y alto (st_anchocheckradio), alineados horizontalmente,
        en este orden (checkbox, checkbox_checked, radiobutton, radiobutton_checked) */
        --st_urlcheckradio: url('./archivoscss/checkradiomix_1.png');
		--st_anchocheckradio: 22px;
		--st_anchocheckradiopeque: 15px;
	}

/* 0.--------- Variables [FIN] ---------------------- */



/* 1.--------- Estructura Basica [INICIO] ---------------------- */

	@font-face {
		font-family: 'Monserrat';
		src: url("./archivoscss/MONTSERRAT-REGULAR.TTF");
		src: url("./archivoscss/MONTSERRAT-REGULAR.TTF") format("truetype");
		font-display: swap
	}

	body{
		padding:0px;
		margin:0px;
		font-size: var(--st_font_tamanio);
		font-family:var(--st_font_family);
		color:var(--st_colornegro);
		background-color: var(--st_colorfondo);
	}

	a:active { color: #aaaaaa; text-decoration: none; }
	a:link, a:visited { color: #808080; text-decoration: none; }
	a:hover {color: var(--st_colornegro); font-weight: bold; text-decoration: underline; text-decoration-color: #cccccc; }
	
	td, div {
		font-size: var(--st_font_tamanio);
		font-family:var(--st_font_family);
	}

	input {
		font-size: var(--st_font_tamanio);
		font-family:var(--st_font_family);
		color:var(--st_color1oscuro);
		background-color: var(--st_colorfondo);
		border: 0px;
		border-bottom: 1px solid var(--st_color1);
		padding: 5px 0px 5px 8px;
		outline: none;
	}
	input:focus {
	  background-color: var(--st_color1masclaro);
	}
	input[type=file] {
		border-bottom: 0px !important;
	}

	select {
		font-size: var(--st_font_tamanio);
		font-family:var(--st_font_family);
		color:var(--st_color1oscuro);
		background-color: var(--st_color1masclaro);
		border: 0px;
		border-bottom: 1px solid var(--st_color1);
		padding: 3px;
		outline: none;
	}
    select option {
		font-size: var(--st_font_tamanio);
        font-weight: normal;
		background-color: var(--st_color1masclaro);
		color:var(--st_color1oscuro);
    }
    select option:checked{
		background: var(--st_color2medio);
    }
    select optgroup {
		font-size: var(--st_font_tamaniogrande);
        font-weight: bold;
		color:var(--st_color1oscuro);
        background-color: var(--st_color1claro);
    }

	textarea {
		font-size: var(--st_font_tamanio);
		font-family:var(--st_font_family);
		color: var(--st_color1oscuro);
		background-color: var(--st_colorfondo);
	}

	input[type=button], input[type=submit] {
		font-size: var(--st_font_tamaniogrande);
		font-family:var(--st_font_family);
		color:var(--st_colorfondo);
		letter-spacing: 1px;
		background-color: var(--st_color1);
        border: 1px solid var(--st_color1oscuro);
		padding: 6px 20px 6px 20px;
		margin: 12px;
		cursor: pointer;
		outline: none;
		border-radius: 3px;
	}
    input[type=button]:hover, input[type=submit]:hover {
		padding: 6px 26px 6px 20px;
		background-color: var(--st_color1oscuro);
		background-image: url(./archivoscss/ico_inputflecha.png);
		background-repeat: no-repeat;
		background-position: 96% 50%;
	}
	::placeholder {
		color: var(--st_color2medio);
		font-size: var(--st_font_tamaniopeque2);
	}

/* -------- Colores Fondo [inicio] ---------- */

	.st_DivColor {
		background-color:var(--st_color1);
	}
	.st_DivColorClaro {
		background-color:var(--st_color1claro);
	}
	.st_Resalte {
		background-color:var(--st_color2medio);
	}
	.st_DivColorOscuro {
		background-color:var(--st_color1oscuro);
	}
	.st_DivColorContraste {
		background-color:var(--st_colorcontraste1);
	}

	.st_Degradado {
		width: 80%;
		background: linear-gradient(to left, var(--st_color1), var(--st_colorfondo));
		background-image: linear-gradient(to left, var(--st_color1), var(--st_colorfondo));
		background-position-x: initial;
		background-position-y: initial;
		background-size: initial;
		/*background-repeat-x: initial;*/
		/*background-repeat-y: initial;*/
		background-attachment: initial;
		background-origin: initial;
		background-clip: initial;
		background-color: initial;
    }
	tr.st_TDResalte td{
		background-color:var(--st_color1claro) !important;
		border-top:2px solid var(--st_color1medio) !important;
		font-weight: bold !important;
	}

/* -------- ESTRUCTURA [inicio] ---------- */
	.st_InsideZn {
		/*border: 1px solid var(--st_color1);*/
  		/*border-radius: 10px;*/
  		padding: 0px 5px 10px 5px;
		background: var(--st_colorfondo);
		vertical-align:text-top;
	}

	.st_InsidePes {
		border: 1px solid var(--st_color1medio);
		border-radius: 4px;
		background: var(--st_colorfondo);
		padding: 3px;
		position: relative;
		left: 3px;
		margin-right: 6px;
	}

/* -------- ESTRUCTURA [fin] ---------- */

/* -------- MENUS [inicio] ---------- */

	.st_ZonaMenu {
		margin:0px 6px 4px 6px;
		width:99%;
		height:100%;
		padding:2px;
		/*border:1px solid var(--st_color1);*/
		/*border-radius: 6px;*/
		background-color:var(--st_colorfondo);
	}

	.st_TBMenusTop {
		table-layout: fixed;
		border-collapse:collapse;
	}
	.st_TBMenusTop td {
		white-space: nowrap;
		color:#666666;
		background-color:var(--st_colorfondomuysuave);
		border: 1px solid var(--st_color1);
		padding:5px 6px;
	}
	.st_TBMenusTop td a, .st_TBMenusTop td a:active, .st_TBMenusTop td a:link, .st_TBMenusTop td a:visited {
		color:#666666;
	}
	.st_TBMenusTop td a:hover, div.st_MenuRow a:hover div.st_MenuTab {
		color:var(--st_color1oscuro);
		text-decoration: underline;
	}
	.st_TBMenusTop td:hover, div.st_MenuRow div.st_MenuTab:hover {
		background-color:var(--st_color1claro);
	}
	.st_TBMenusTop td.st_CurrentMenu, div.st_MenuRow a div.st_MenuTab, div.st_MenuRow a div.st_CurrentMenu {
		background-color:var(--st_color1);
	}
	.st_TBMenusTop td.st_CurrentMenu a, .st_TBMenusTop td.st_CurrentMenu a:active, .st_TBMenusTop td.st_CurrentMenu a:link, .st_TBMenusTop td.st_CurrentMenu a:visited,
	div.st_MenuRow a div.st_CurrentMenu, div.st_MenuRow a:link div.st_CurrentMenu, div.st_MenuRow a:visited div.st_CurrentMenu, div.st_MenuRow a:active div.st_CurrentMenu {
		color:var(--st_colorfondo);
	}
	.st_TBMenusTop td.st_CurrentMenu a:hover, .st_TBMenusTop td.st_CurrentHSAdmin a:hover, div.st_MenuRow a:hover div.st_CurrentMenu {
		color:var(--st_color1claro);
		text-decoration: underline;
	}
	.st_TBMenusTop td.st_CurrentHSAdmin {
		background-color:var(--st_colorcontraste1oscuro);
	}
	.st_TBMenusTop td.st_CurrentHSAdmin a, .st_TBMenusTop td.st_CurrentHSAdmin a:active, .st_TBMenusTop td.st_CurrentHSAdmin a:link, .st_TBMenusTop td.st_CurrentHSAdmin a:visited {
		color:var(--st_colorfondo);
	}
	div.st_MenuRow a div.st_MenuTab, div.st_MenuRow a div.st_CurrentMenu {
		padding: 3px 8px;
		margin: 2px 0px;
		color:#666666;
		text-align: center;
		border-top: solid var(--st_color1) 1px;
		border-bottom: solid var(--st_color1) 1px;
		border-left: solid var(--st_color1) 1px;
    }
    div.st_MenuRow a div.st_MenuTab {
		background-color:var(--st_colorfondomuysuave);
	}
	div.st_MenuRow a {
		color: #666666;
		margin: 0px 0px;
		text-decoration: none;
	}
	div.st_MenuRow a div.st_MenuTabLast{
		border-right: solid var(--st_color1) 1px;
	}


	.st_MenuProgramadoDesplegadoDiv { /* Sirver para menus programados y menus de ordenamientos en listados de busqueda */
		position: absolute;
		left:0px;
		width: 190px;
		background-color:var(--st_color1medio);
		border:1px solid var(--st_colorfondo);
		cursor:pointer;
		visibility: inherit;
	}
	.st_MenuProgramadoDesplegadoDiv:hover {
		background-color:var(--st_color1);
	}
	.st_MenuProgramadoDesplegadoTexto { /* Sirver para menus programados y menus de ordenamientos en listados de busqueda */
		position: absolute;
		left:4px;
		top:5px;
		font-size: var(--st_font_tamaniopeque);
		color:var(--st_colorfondo);
		cursor:pointer;
	}
	
	#navmenu > li {
		margin-top: 2px;
		margin-right: 0px;
		margin-left: 0px;
	    padding: 6px;
		text-align: center;
		position: relative;
		border-right: solid 1px #cccccc;
		border-bottom: solid 2px var(--st_colorfondo);
	}
	#navmenu > li > a { display:block; }
	#navmenu > li.st_CurrentMenu a { color: var(--st_colorfondo); }
	#navmenu li div, #navmenu li > a { color: var(--st_color1oscuro); }
	#navmenu li:hover div, #navmenu li:hover > a { color: var(--st_colorfondo); }
	#navmenu li .bsq ul li div, #navmenu li .bsq ul li:hover { color:var(--st_color1oscuro) !important;}
	#navmenu li {
	  background-color: var(--st_colorfondomuysuave);
	  display: block;
	  text-decoration: none;
	}
	#navmenu li:hover, #navmenu li.st_CurrentMenu { background-color:var(--st_color1);}
	#navmenu li.st_CurrentMenu { order: -1;}
	#navmenu li .wrapper ul .text_line_menu {
	  text-align: left;
	  overflow-x: hidden;
	}
	#navmenu li .wrapper ul .text_line_nom {
	  float: left;
	  width: 70%;
	  padding-top: 5px;
	  padding-left: 5px;
	  padding-bottom: 5px;
	}
	#navmenu li .wrapper ul .text_line_icon {
	  float: right;
	  width: 7%;
	  padding-top: 5px;
	  padding-bottom: 5px;
	}							
	/* #navmenu .wrapper div a { color:var(--st_colorfondo);} */
	/* #navmenu .wrapper.bsq div a { color:var(--st_color1) !important;} */
	#navmenu li .wrapper {
	  border-radius: 4px;
	  backface-visibility:hidden;
	  position: absolute;
	  z-index: 2000;
	  display: none;
	  text-align: left;
	  font-size: var(--st_font_tamaniopeque);
	  left: 0px;
	}
	#navmenu li.edge .wrapper {
	  left: unset;
	  right: 0px;
	}
	#navmenu li .wrapper.bsq{
	  left: 240px;
	  top: 0px;
	}
	#navmenu li.edge .wrapper.bsq{
	  left: unset;
	  right: 240px;
	  top: 0px;
	}
	#navmenu li .wrapper ul .srch_l {
	  margin-left: 5px;
	  float: left;
	  display: none;
	}
	#navmenu li.edge .wrapper ul .srch_l { display: block;}
	#navmenu li.edge .wrapper ul .srch_r {
	  display: none;
	  margin-right: 5px;
	}
	#navmenu li:hover > .wrapper { display: flex;}
	#navmenu li:hover > .wrapper > div {
	  display: flex;
	  flex-direction: column;
	  border-right: 1px solid var(--st_color1);
	}
	#navmenu li:hover > .wrapper > div:last-of-type { border-right: unset; }
	#navmenu li .wrapper ul { padding: 0px; }
	#navmenu li .wrapper ul li {
	  width: 200px;
	  border: 1px solid var(--st_colorfondo);
	  position: relative;
	  background-color: var(--st_color1medio);
	}
	#navmenu li .wrapper ul li:hover { background-color:  var(--st_color1); }
	#navmenu li .bsq ul li { background-color:var(--st_color2medio) !important;}
	#navmenu li .bsq ul li:hover { background-color:var(--st_color1medio) !important;}
	#navmenu li .wrapper.bsq{
	  left: 200px;
	  top: 0px;
	}
	#navmenu li .wrapper.bsq li {
	  width: unset;
	  min-width: 120px;
	  max-width: 200px;
	}
	#navmenu li.edge .wrapper.bsq{
	  left: unset;
	  right: 200px;
	  top: 0px;
	}




/* -------- MENUS [fin] ---------- */


	.st_TitPagina {
		table-layout: fixed;
		border-radius:0px 0px 12px 12px;
		border: 0px;
		background-color: var(--st_color1);
	}
	.st_TitPagina TD {
		font-size: 16px;
		color:var(--st_colorfondo);
		padding:8px;
	}

	.st_DivMarcoVentanita {
		background-color: var(--st_colorfondo);
		border-radius:6px;
		border: 4px solid var(--st_colorfondo);
		box-shadow: -2px 2px 4px 3px #666666;
	}
	.st_DivMarcoVentanitaTitulo { 
		padding:4px;
		background-color: var(--st_color1oscuro);
		border-radius:4px 4px 0px 0px;
	}
	.st_DivMarcoVentanitaTitulo td { 
		font-weight:bold;
		color:var(--st_colorfondo);
	}
	.st_DivMarcoVentanitaContenido { 
		padding:1px;
		border: 1px solid var(--st_color1oscuro);
		border-radius:0px 0px 4px 4px;
	}

	table.st_PestaniasGrupoTop td {
		margin:0px;								
		padding:2px 6px;
		color: var(--st_colornegro);
		font-weight:500;
		border-right: 1px dotted var(--st_color1);
	}
	table.st_PestaniasGrupoTop td:last-child {
		border: 0px;
	}
	table.st_PestaniasGrupoTop td.st_CurrentPes a, 
	table.st_PestaniasGrupoTop td.st_CurrentPes a:link,
	table.st_PestaniasGrupoTop td.st_CurrentPes a:visited,
	table.st_PestaniasGrupoTop td.st_CurrentPes a:hover,
	table.st_PestaniasGrupoTop td.st_CurrentPes a:active, 
	table.st_PestaniasGrupoTop td.st_CurrentPes span { 
		color: var(--st_color1);
		font-weight:bold;
		padding-right:2px;		
	}
	table.st_PestaniasGrupoTop a, table.st_PestaniasGrupoTop a:visited {
		color: var(--st_colornegro);
		text-decoration:none;
	}
	table.st_PestaniasGrupoTop a:hover, table.st_PestaniasGrupoTop a:active {				
		color: var(--st_color1);				
	}			

	.st_tdCajaTitulo {
		border-radius:15px 0px 15px 0px;
		border: 1px solid var(--st_colorcontraste1oscuro);
		background-color: var(--st_colorcontraste1claro);
		padding:6px;
	}
	
	.st_tbCajaOpciones {
		margin:0px;
	}
	.st_tbCajaOpciones td{
		border-right: 1px dotted var(--st_color1);
		white-space: nowrap;
		padding:1px 6px !important;
	}
	.st_tbCajaOpciones td:last-child{
		border: 0px;
	}
	.st_tbCajaOpciones td.st_CurrentPes {
		font-weight:bold;
		text-decoration: underline;
		background-color: var(--st_color1claro);
	}
	.st_tbCajaOpciones span[onclick], .st_tbCajaOpciones a{
		font-size: var(--st_font_tamaniogrande);
		color: var(--st_color1oscuro);
	}
	.st_tbCajaOpciones span[onclick]:hover, .st_tbCajaOpciones a:hover{
		color: var(--st_color1);
		cursor:pointer;
		text-decoration: underline;
		background-color: var(--st_colorcontraste1);
	}
	
	.st_HRSeparaLinea {
		height: 3px;
		border-top: 1px dashed #999999;
		border-bottom: 1px dashed #999999;
		background-image: linear-gradient(90deg, var(--st_colorcontraste1oscuro), transparent);
	}

	table.st_TablaListados {
		border:0px;
		border-collapse:collapse;
	}
	table.st_TablaListados tr.st_TDTitulo > td {
		background-color:var(--st_color1);
		color:var(--st_colorfondo);
		height:24px;
		padding:3px 3px;
		vertical-align:middle;
		border-right-color:var(--st_color1claro);
		border-right-width:1px;
		border-right-style:solid;				
		border-left-color:var(--st_color1claro);
		border-left-width:1px;
		border-left-style:solid; 
	}
	tr.st_TDTitulo td, 
	tr.st_TDTitulo td a, 
	tr.st_TDTitulo td a:link,
	tr.st_TDTitulo td a:visited,
	tr.st_TDTitulo td a:hover,
	tr.st_TDTitulo td a:active { 
		color:var(--st_colorfondo);
		text-decoration:none;
		text-align:center;
	}

	table.st_TablaListados > tr:hover,  table.st_TablaListados > tbody > tr:hover{ 
		background-color: var(--st_color1claro) !important;
	}
	table.st_TablaListados > tr:nth-child(even), table.st_TablaListados > tbody > tr:nth-child(even) {
		background-color: var(--st_colorfondo); 
	}
	table.st_TablaListados > tr:nth-child(odd), table.st_TablaListados > tbody > tr:nth-child(odd) {
		background-color: var(--st_colorfondomuysuave);
	}
	table.st_TablaListados > tr > td, table.st_TablaListados > tbody > tr > td {
		font-weight:normal;
		color:var(--st_colornegro);
		padding:3px 3px;			
		border-right-color:var(--st_color1claro);
		border-right-width:1px;
		border-right-style:solid;				
		border-left-color:var(--st_color1claro);
		border-left-width:1px;
		border-left-style:solid; 
		border-bottom-color:var(--st_colorfondosuave);
		border-bottom-width:1px;
		border-bottom-style:solid; 
	}

	.st_TDTituloPeque { /* para usarlo individual */
		font-weight:normal;
		color:var(--st_color1oscuro);
		background-color: var(--st_color1claro);
		padding:3px 4px;			
		border-bottom:1px solid var(--st_color1oscuro);
		border-left:1px solid var(--st_color1oscuro);
		border-right:1px solid var(--st_color1oscuro);
		text-align:center;
		vertical-align:middle;					
	}

	.st_TDBordeLeve { /* para usarlo individual*/
		border:1px solid var(--st_colorfondosuave);
	}

/* 1.--------- Estructura Basica [FIN] ---------------------- */



/* 2.--------- Formularios [INICIO] ---------------------- */
/* 2.1.- Tablas y Celdas */

.st_TBForm { /*Tabla de formularios*/
		table-layout: fixed;
		border:none;
		border-collapse:collapse;
	}
	
	.st_TBRadio { /*Tabla de opciones de radio, usar tambien para checkbox*/
		table-layout: fixed;
		border:none;
		border-collapse:collapse;
	}
	.st_TBRadioRequerido { /*Tabla de opciones de radio requerida*/
		table-layout: fixed;
		border:1px solid var(--st_colorrequeridoborde) !important;
		border-collapse:collapse;
		box-shadow: 0 0 5px var(--st_colorrequeridoborde);
		padding: 3px 0px 3px 3px;
		margin: 5px 1px 3px 0px;
		background-color:var(--st_colorrequerido) !important;	
	}
	
    .st_TRForm {

    }

	.st_TDContraste { /*Celda con color de contraste*/
		border: 1px dashed var(--st_colorcontraste1oscuro);
		background-color: var(--st_colorcontraste1) !important;
		color:var(--st_colornegro) !important;
		padding:6px;
	}
	
	.st_TDContrasteClaro { /*Celda con color de contraste*/
		border: 1px dashed var(--st_colorcontraste1);
		background-color: var(--st_colorcontraste1claro);
		color:var(--st_colornegro);
		padding:6px;
	}
	
	.st_TDRadio { /*Celda de Radio Button*/
		padding:4px;
		border: 1px solid var(--st_colorfondosuave);
		background-color: var(--st_colorfondo);
		color: var(--st_color1oscuro) !important;
		white-space: nowrap;
	}
	.st_TDRadioCheck { /*Celda de Radio Button Check*/
		padding:4px;
		border: 1px solid var(--st_colorfondosuave);
		background-color: var(--st_color1claro);
		color: var(--st_color1oscuro) !important;
		white-space: nowrap;
	}
	.st_TDRadioPeque { /*Celda de Radio Button Peque - sirve tambien para checkbox*/
		padding:4px !important;
		border: 1px solid var(--st_colorfondosuave);
		background-color: var(--st_colorfondo);
		font-size: var(--st_font_tamaniopeque2) !important;
		color: var(--st_color1oscuro) !important;
		white-space: nowrap;
	}
	.st_TDRadioPequeCheck { /*Celda de Radio Button Check Peque*/
		padding:4px;
		border: 1px solid var(--st_colorfondosuave);
		background-color: var(--st_color1claro);
		font-size: var(--st_font_tamaniopeque2) !important;
		color: var(--st_color1oscuro) !important;
		white-space: nowrap;
	}
	
	.st_TDCampTit { /*Celda de los titulos de campo en un formulario*/
		font-size: var(--st_font_tamaniogrande);
		font-weight:bold;
	        text-align: right;
		color:var(--st_color1) !important;
		border-bottom: 1px dashed var(--st_colorfondomuysuave);
		padding:6px !important;
		width: 200px !important;
	}

	.st_AnchoDoble {
		width: 400px !important;
	}

	.st_TDCampVal {
		color:var(--st_colornegro);
		border-bottom: 1px dashed var(--st_colorfondomuysuave);
		padding:6px;
	}

	.st_TDPequeVal, .st_PlecaTablaVal { /*Celda con Campo Peque*/
		font-size: var(--st_font_tamaniopeque2);
		color:#333333;
		padding:3px;
	}

	.st_TDMarcoOff, .st_TDMarcoOn { /*Celda con Marco*/
		padding:3px;
		border-radius: 2px;
	}
	.st_TDMarcoOff {
		color:#222222 !important;
		border: 1px solid var(--st_color1);
		background-color:var(--st_colorfondomuysuave);
	}
	.st_TDMarcoOff a {
		color:#222222 !important;
	}
	.st_TDMarcoOff:hover {
		background-color:var(--st_color1claro);
	}
	.st_TDMarcoOn {
		color:var(--st_colorfondosuave);
		border: 1px solid var(--st_color1oscuro);
		background-color:var(--st_color1);
	}
	.st_TDMarcoOn a {
		color:var(--st_colorfondosuave) !important;
	}
	.st_TDMarcoOn:hover {
		background-color:var(--st_color1oscuro);
	}

	.st_TBSubmodulo {
		table-layout: fixed;
		border: 1px solid var(--st_colorfondosuave);
		border-collapse:collapse;
	}
	.st_TDSubModuloTitulo {
		font-weight:bold;
		color:var(--st_colorfondo);
		padding:4px 4px 4px 20px;
		background-color:var(--st_color1oscuro);
		border-bottom: 0px solid var(--st_color1oscuro);
	}

	.st_PlecaNivel1Txt {
		font-size: var(--st_font_tamaniogrande4);
		font-weight:bold;
		color: var(--st_color1);
		padding:16px 4px 1px 5px;
		margin:10px;
		border-bottom: 5px solid var(--st_color1);
		width: 99%;
		-webkit-text-size-adjust:99%; /* para que el iphone no cambie la letra*/
	}
	.st_PlecaNivel2Txt {
		font-size: var(--st_font_tamaniogrande2);
		font-weight:bold;
		color: var(--st_color1);
		padding:4px 6px;
		margin:8px;
		border:3px;
		border-style: solid;
		border-image-source: linear-gradient(45deg, var(--st_color1), var(--st_colorfondo));
		border-image-slice: 1;
		border-top:none;
		width: 99%;
		-webkit-text-size-adjust:99%; /* para que el iphone no cambie la letra*/
	}
	.st_PlecaNivel3Txt {
		font-size: var(--st_font_tamaniogrande2);
		font-weight:bold;
		color: var(--st_color1);
		background-color:var(--st_colorfondomuysuave);
		padding:4px;
		margin:8px;
		border-bottom: 1px dashed var(--st_color1);
		padding-left:0px;
		width: 99%;
		-webkit-text-size-adjust:99%; /* para que el iphone no cambie la letra*/
	}

	.st_TDTituloMatriz{
		font-weight: normal;
		color: var(--st_color1oscuro);
		background-color: var(--st_color1claro);
		padding: 3px 4px;
		border-bottom: 1px solid var(--st_color1oscuro);
		border-left: 1px solid var(--st_color1oscuro);
		border-right: 1px solid var(--st_color1oscuro);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.st_PlecaTablaFormCmp0 {
		display: grid;
		padding-bottom: 8px;
		grid-template-rows: auto 1fr;
	}
	.st_PlecaTablaFormCmp0 > .st_PlecaTablaTit {
		font-weight: normal;
		color: var(--st_color1oscuro);
		background-color: var(--st_color1claro);
		padding: 3px 4px;
		border-bottom: 1px solid var(--st_color1oscuro);
		border-left: 1px solid var(--st_color1oscuro);
		border-right: 1px solid var(--st_color1oscuro);
		text-align: center;
		vertical-align: middle;
	}
	.st_PlecaTablaFormCmp0 > .st_PlecaTablaVal {
		text-align: center;
	}
	.st_PlecaTablaFormCmp0 > .st_PlecaTablaVal > table,
	.st_PlecaTablaFormCmp0 > .st_PlecaTablaVal > div {
		margin: auto;
	}
	.st_PlecaTablaFormCmp0 > .st_PlecaTablaVal > div {
		margin: auto;
	}

	.st_PlecaTablaFormCmp1 {
		display: grid;
		padding-bottom: 8px;
		grid-auto-flow: column;
		grid-template-columns: auto 1fr;
	}
	.st_PlecaTablaFormCmp1 > .st_PlecaTablaTit {
		font-size: var(--st_font_tamaniogrande);
		font-weight: bold;
		color: var(--st_color1) !important;
		padding: 6px !important;
		width: 150px !important;
		text-align:right;
	}

	.st_PlecaTablaFormCmp1 > .st_PlecaTablaVal {
		padding: 6px;
	}

	.st_PlecaTablaFormCmp2 {
		display: grid;
		padding-bottom: 8px;
		grid-template-rows: auto 1fr;
	}
	.st_PlecaTablaFormCmp2 > .st_PlecaTablaTit {
		font-size: var(--st_font_tamaniogrande);
		font-weight: bold;
		color: var(--st_color1) !important;
		padding: 6px !important;
	}
	.st_PlecaTablaFormCmp2 > .st_PlecaTablaVal {
		padding: 6px;
	}

	
/* 2.2.- Textos */
	.st_Peque, td.st_Peque {
		font-size: var(--st_font_tamaniopeque2) !important;
		font-weight:normal !important;
		color:var(--st_colornegro);
	}

	.st_PequeBlanco {
		font-size: var(--st_font_tamaniopeque2);
		font-weight:normal;
		color:var(--st_colorfondo);
	}

	.st_PequeRoja {
		font-size: var(--st_font_tamaniopeque2);
		font-weight:normal;
		color:var(--st_coloralerta);
	}

	.st_PequeColor {
		font-size: var(--st_font_tamaniopeque);
		font-weight:normal;
		color:var(--st_color1);
	}

	.st_PequeLeve {
		font-size: var(--st_font_tamaniopeque2);
		font-weight:normal;
		color:#777777;
	}

	.st_TxtTitulo { /*Fuente de los titulos de campo en un formulario*/
		font-size: var(--st_font_tamaniogrande);
		font-weight:bold;
		color:var(--st_color1);
	}

	.st_TxtNegrita {
		font-weight:bold;
		color:var(--st_color1);
	}
	.st_TxtNegritaRoja {
		font-weight:bold;
		color:var(--st_coloralerta);
	}
	.st_TxtAlarma {
		font-size: var(--st_font_tamaniogrande2);
		font-weight:bold;
		text-decoration:underline;
		color:var(--st_coloralerta);
	}

	.st_TxtBlanco {
		color:var(--st_colorfondo) !important;
	}

	.st_MedianoTxt {
		font-size: var(--st_font_tamaniopeque) !important;
		font-weight:normal !important;
	}

	.st_Seleccionado {
		font-size: var(--st_font_tamaniopeque) !important;
		font-weight:bold !important;
		color:var(--st_colorcontraste1oscuro) !important;
	}

/* 2.3.- Inputs */

	.st_CampoObligatorio {
		box-shadow: 0 0 12px var(--st_colorrequeridoborde) !important;
		padding: 3px 0px 3px 3px;
		margin: 5px 1px 3px 0px;
		border: 1px solid var(--st_colorrequeridoborde) !important;
		background-color:var(--st_colorrequerido) !important;
	}

	.st_InputRight {
		text-align: right;
	}

	.st_InputText, .st_TDCampVal input[type=text], .st_TDPequeVal input[type=text], .st_PlecaTablaVal input[type=text], .st_PlecaTablaVal textarea {
		color:var(--st_color1oscuro);
		background-color: var(--st_colorfondo);
		border: 0px;
		border-bottom: 1px solid var(--st_color1);
		padding: 5px 0px 5px 5px;
		outline: none;
	}
	.st_TDPequeVal input[type=text], .st_PlecaTablaVal input[type=text], .st_PlecaTablaVal textarea{
		font-size: var(--st_font_tamaniopeque) !important;
		padding: 2px 0px 2px 2px !important;
		background-color: var(--st_color2masclaro);
	}
	.st_InputText:focus, .st_TDCampVal input[type=text]:focus, .st_TDPequeVal input[type=text]:focus, .st_PlecaTablaVal textarea:focus {
	  background-color: var(--st_color1masclaro);
	}

	.st_TextArea, .st_TDCampVal textarea, .st_TDPequeVal textarea {
		color:var(--st_color1oscuro);
		background-color: var(--st_colorfondo);
		border: 0px;
		border-bottom: 1px solid var(--st_color1);
		padding: 5px;
		outline: none;
	}
	.st_TDPequeVal textarea {
		font-size: var(--st_font_tamaniopeque) !important;
		padding: 2px !important;
		background-color: var(--st_color2masclaro);
	}
	.st_TextArea:focus, .st_TDCampVal textarea:focus, .st_TDPequeVal textarea:focus {
	  background-color: var(--st_color1masclaro);
	}

	.st_InputBloq, .st_TDCampVal .st_InputBloq {
        background-image: url(../img/ico_candado_6.png);
		background-repeat: no-repeat;
		background-position: 2px 50%;
		padding-left:12px !important;
	}
	
/* ------------------- Select [INICIO] */
	.st_Select, .st_SelectPeque, .st_TDCampVal select, .st_TDPequeVal select {
		color:var(--st_color1oscuro);
		background-color: var(--st_color1masclaro);
		border: 0px;
		border-bottom: 1px solid var(--st_color1);
		padding: 3px;
		outline: none;
	}
	.st_Select {
		min-width: 248px;
		max-width: 440px;
	}
    .st_Select option, .st_SelectPeque option, .st_TDCampVal option, .st_TDPequeVal option {
		font-size: var(--st_font_tamanio);
        font-weight: normal;
		background-color: var(--st_color1masclaro);
		color:var(--st_color1oscuro);
    }
    .st_Select optgroup, .st_SelectPeque optgroup, .st_TDCampVal optgroup, .st_TDPequeVal optgroup {
		font-size: var(--st_font_tamaniogrande);
        font-weight: bold;
		color:var(--st_color1oscuro);
        background-color: var(--st_color1claro);
    }
	.st_SelectPeque, .st_TDPequeVal select {
		min-width: 80px;
		max-width: 220px;
		font-size: var(--st_font_tamaniopeque) !important;
	}
    .st_SelectPeque option, .st_TDPequeVal select option {
		font-size: var(--st_font_tamaniopeque) !important;
    }
    .st_SelectPeque optgroup, .st_TDPequeVal select optgroup {
		font-size: var(--st_font_tamanio) !important;
    }
/* ------------------- Select [FIN] */


/* ------------------- Checkbox [INICIO] */
	.st_TDCampVal input[type="checkbox"],
   	.st_TDContrasteClaro input[type="checkbox"],
	.st_TDRadio input[type="checkbox"],
	.st_TDRadioCheck input[type="checkbox"],
	.st_TDRadioPeque input[type="checkbox"],
	.st_TDRadioPequeCheck input[type="checkbox"] {
        display:none;
    }
	.st_TDCampVal input[type="checkbox"] + label span,
	.st_TDContrasteClaro input[type="checkbox"] + label span,
	.st_TDRadio input[type="checkbox"] + label span,
	.st_TDRadioCheck input[type="checkbox"] + label span {
		display:inline-block;
		width:var(--st_anchocheckradio);
		height:var(--st_anchocheckradio);
		margin:-1px 4px 0 0;
		vertical-align:middle;
		background:var(--st_urlcheckradio) left top no-repeat;
		cursor:pointer;
	}
    .st_TDCampVal input[type="checkbox"]:checked + label span,
    .st_TDContrasteClaro input[type="checkbox"]:checked + label span,
 	.st_TDRadio input[type="checkbox"]:checked + label span,
	.st_TDRadioCheck input[type="checkbox"]:checked + label span {
       background:var(--st_urlcheckradio) calc(0px - var(--st_anchocheckradio)) top no-repeat;
    }
	.st_TDRadioPeque input[type="checkbox"] + label span {
        display:inline-block;
        width:var(--st_anchocheckradiopeque);
        height:var(--st_anchocheckradiopeque);
        margin:-1px 4px 0 0;
        vertical-align:middle;
        background:var(--st_urlcheckradio) left top no-repeat;
		background-size: calc(var(--st_anchocheckradiopeque)*4) var(--st_anchocheckradiopeque);
        cursor:pointer;
    }
	.st_TDRadioPequeCheck input[type="checkbox"]:checked + label span {
        display:inline-block;
        width:var(--st_anchocheckradiopeque);
        height:var(--st_anchocheckradiopeque);
        margin:-1px 4px 0 0;
        vertical-align:middle;
        background:var(--st_urlcheckradio) calc(0px - var(--st_anchocheckradiopeque)) top no-repeat;
		background-size: calc(var(--st_anchocheckradiopeque)*4) var(--st_anchocheckradiopeque);
        cursor:pointer;
    }

/* ------------------- Checkbox [FIN] */


/* ------------------- RadioButton [INICIO] */
	.st_TDCampVal input[type="radio"],
	.st_TDRadio input[type="radio"],
	.st_TDRadioCheck input[type="radio"],
	.st_TDRadioPeque input[type="radio"],
	.st_TDRadioPequeCheck input[type="radio"] {
        display:none;
    }
    .st_TDCampVal input[type="radio"] + label span,
	.st_TDRadio input[type="radio"] + label span,
	.st_TDRadioCheck input[type="radio"] + label span {
        display:inline-block;
        width:var(--st_anchocheckradio);
        height:var(--st_anchocheckradio);
        margin:-1px 4px 0 0;
        vertical-align:middle;
        background:var(--st_urlcheckradio) calc(0px - (var(--st_anchocheckradio)*2)) top no-repeat;
        cursor:pointer;
    }
    .st_TDCampVal input[type="radio"]:checked + label span,
	.st_TDRadio input[type="radio"]:checked + label span,
	.st_TDRadioCheck input[type="radio"]:checked + label span {
        background:var(--st_urlcheckradio) calc(0px - (var(--st_anchocheckradio)*3)) top no-repeat;
    }
	.st_TDRadioPeque input[type="radio"] + label span {
        display:inline-block;
        width:var(--st_anchocheckradiopeque);
        height:var(--st_anchocheckradiopeque);
        margin:-1px 4px 0 0;
        vertical-align:middle;
        background:var(--st_urlcheckradio) calc(0px - (var(--st_anchocheckradiopeque)*2)) top no-repeat;
		background-size: calc(var(--st_anchocheckradiopeque)*4) var(--st_anchocheckradiopeque);
        cursor:pointer;
    }
	.st_TDRadioPequeCheck input[type="radio"]:checked + label span {
        display:inline-block;
        width:var(--st_anchocheckradiopeque);
        height:var(--st_anchocheckradiopeque);
        margin:-1px 4px 0 0;
        vertical-align:middle;
        background:var(--st_urlcheckradio) calc(0px - (var(--st_anchocheckradiopeque)*3)) top no-repeat;
		background-size: calc(var(--st_anchocheckradiopeque)*4) var(--st_anchocheckradiopeque);
        cursor:pointer;
    }
/* ------------------- RadioButton [FIN] */

/* ------------------- Input Tooltip Error [INICIO] */
    .st_TDCampVal div.tooltip[data-tip],
    .st_PlecaTablaVal div.tooltip[data-tip] {
        display: inline-block;
        position:relative;

    }
    .st_TDCampVal div.tooltip[data-tip]:before ,
    .st_PlecaTablaVal div.tooltip[data-tip]:before {
        content:'';
        border-top: 5px solid transparent;
        border-right: 5px solid var(--st_colorrequeridoborde);
        border-bottom: 5px solid transparent;	
        position:absolute;
        top:-10px;
        left:5px;
        z-index:8;
        font-size:0;
        line-height:0;
        width:0;
        height:0;
    }
    .st_TDCampVal div.tooltip[data-tip]:after ,
    .st_PlecaTablaVal div.tooltip[data-tip]:after {
        content:attr(data-tip);
        position:absolute;
        top:-20px;
        left:10px;
        padding:5px 8px;
        background:var(--st_colorrequeridoborde);
        color:#fff;
        z-index:9;
        font-size: var(--st_font_tamaniopeque);
        line-height: var(--st_font_tamaniopeque);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        white-space: pre;
        word-wrap: normal;
    }
/* ------------------- Input Tooltip Error [FIN] */

/* ------------------- Sliders/Ranges [INICIO] */
    .st_celdaSelec {
        background-color:var(--st_colorfondo);
        color:var(--st_color1);
        height:18px;
        padding:3px 3px;
        border: solid 1px var(--st_color1);
        display: flex;
        justify-content: center;
        cursor: pointer;
    }
    .st_celdaSelec.selected { 
        background-color:var(--st_color1);
        color:var(--st_colorfondo);
    }


    svg.st_iconIncrSelect {
        vertical-align: middle;
        cursor: pointer;
        margin: 0px 3px;
    }
    svg.st_iconIncrSelect.selected {
        fill: var(--st_color1);
    }
    svg.st_estrellasvg {
        stroke: var(--st_color1);
        fill: var(--st_colorfondo);
    }


    svg.st_carasvg {
        stroke: #aab7b8;
        fill:  #d5dbdb;
    }
    svg.st_carasvg.selected {
        stroke: var(--st_color1);
        fill:  var(--st_color2medio);
    }
    svg.st_carasvg.selected .innerCircle{
        stroke:  var(--st_color1);
        fill:  var(--st_color1);
    }

    svg.st_pulgarsvg {
        stroke: #394344;
        fill:  #d5dbdb;
    }
    svg.st_pulgarsvg.selected {
        fill:  var(--st_color1);
    }

    .st_svgtooltip div.tooltipIco[data-tip] {
        position:relative;
        display: none;
    }
    .st_svgtooltip:hover div.tooltipIco[data-tip] {
        display:block;
    }
    .st_svgtooltip div.tooltipIco[data-tip]:before {
        content:'';
        border-left: 5px solid transparent;
        border-top: 5px solid var(--st_color1medio);
        border-right: 5px solid transparent;	
        position:absolute;
        top:-29px;
        left:10px;
        z-index:8;
        font-size:0;
        line-height:0;
        width:0;
        height:0;
    }
    .st_svgtooltip div.tooltipIco[data-tip]:after  {
        content:attr(data-tip);
        position:absolute;
        top:-50px;
        padding:5px 8px;
        background:var(--st_color1medio);
        color:#fff;
        z-index:9;
        font-size: var(--st_font_tamaniopeque);
        line-height: var(--st_font_tamaniopeque);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        white-space: pre;
        word-wrap: normal;
    }


	/*Range reset de estilos*/
    .st_TDCampVal .range-container input[type="range"],
    .st_PlecaTablaVal .range-container input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        cursor: pointer;
        width: 300px;
        border-bottom: unset;
        padding: 5px 0px 5px 0px;
    }

    .st_TDCampVal .range-container input[type="range"]:focus,
    .st_PlecaTablaVal .range-container input[type="range"]:focus {
        outline: none;
    }

    /*Estilos propios */
    .st_TDCampVal .range-container,
    .st_PlecaTablaVal .range-container {
        /* --ticksThickness: 2px;
        --ticksHeight: 60%; */

		--slidewidth: 300px;

        height: 20px;
        
        display: inline-block;
        /* background: silver;
        background: linear-gradient(to right, var(--st_colorcontraste1oscuro) var(--ticksThickness), transparent 1px) repeat-x;
        background-size: calc(100%/((var(--max) - var(--min)) / var(--step)) - .1%) var(--ticksHeight);
        background-position: 0 bottom; */
        position: relative;
    }
      
    
      
      /* Etiquetas min / max */
    .st_TDCampVal .range-container::before, .st_TDCampVal .range-container::after,
    .st_PlecaTablaVal .range-container::before, .st_TDCampVal .range-container::after {
        font: 12px monospace;
        content: counter(x);
        position: absolute;
        bottom: -5px;
    }
      
    .st_TDCampVal .range-container::before,
    .st_PlecaTablaVal .range-container::before {
        counter-reset: x var(--min);
        transform: translateX(-50%);
    }
      
    .st_TDCampVal .range-container::after,
    .st_PlecaTablaVal .range-container::after {
        counter-reset: x var(--max);
        right: 0;
        transform: translateX(50%);
    }
      
    .st_TDCampVal .range-container > input[type="range"],
    .st_PlecaTablaVal .range-container > input[type="range"] {
        margin: 0 -6px; /* Critical adjustment */
		border-radius: 8px;
		height: 7px;
		width: var(--slidewidth);
		outline: none;
		transition: background 450ms ease-in;
		-webkit-appearance: none;
    }

    /***** Chrome, Safari, Opera and Edge Chromium styles *****/
    /* Slider linea */
    /* .st_TDCampVal .range-container input[type="range"]::-webkit-slider-runnable-track,
    .st_PlecaTablaVal .range-container input[type="range"]::-webkit-slider-runnable-track {
        background-color: var(--st_color1);
        border-radius: 8px;
        height: 8px;  
    } */
    
    /* Slider indicador */
    .st_TDCampVal .range-container input[type="range"]::-webkit-slider-thumb,
    .st_PlecaTablaVal .range-container input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; /* Reseteo de estilos */
        appearance: none;
    
        /* Estilos propios */
        background-color: var(--st_color1claro);
        height: 18px;
        width: 18px;
        border-radius: 9px;
        border: 0.5px solid var(--st_color1medio);
    }

    .st_TDCampVal .range-container input[type="range"].disabled::-webkit-slider-thumb,
    .st_PlecaTablaVal .range-container input[type="range"].disabled::-webkit-slider-thumb {
        opacity: 0;
    }

    .st_TDCampVal .range-container input[type="range"]:focus::-webkit-slider-thumb,
    .st_PlecaTablaVal .range-container input[type="range"]:focus::-webkit-slider-thumb {   
        border: 1px solid var(--st_color1);
        outline: 3px solid var(--st_color1);
        outline-offset: 1.5px; 
        outline: none;
    }

    /******** Firefox styles ********/
    /* Slider linea */
    /* .st_TDCampVal .range-container input[type="range"]::-moz-range-track,
    .st_PlecaTablaVal .range-container input[type="range"]::-moz-range-track {
        background-color: var(--st_colorcontraste1);
        border-radius: 8px;
        height: 8px;
    } */
    .st_TDCampVal .range-container input[type="range"]::-moz-range-progress,
    .st_PlecaTablaVal .range-container input[type="range"]::-moz-range-progress {
        background-color: var(--st_color1);
        border-radius: 8px;
        height: 8px;
    }
    
    /* Slider indicador */
    .st_TDCampVal .range-container input[type="range"]::-moz-range-thumb,
    .st_PlecaTablaVal .range-container input[type="range"]::-moz-range-thumb {
        border: none; /*Removes extra border that FF applies*/
        border-radius: 0; /*Removes default border-radius that FF applies*/
    
        /* Estilos propios */
        background-color: var(--st_color1claro);
        height: 15px;
        width: 15px;
        border-radius: 7.5px;
        border: 1px solid var(--st_color1medio);
    }

    .st_TDCampVal .range-container input[type="range"].disabled::-moz-range-thumb,
    .st_PlecaTablaVal .range-container input[type="range"].disabled::-moz-range-thumb {
        opacity: 0;
    }
    
    .st_TDCampVal .range-container input[type="range"]:focus::-moz-range-thumb,
    .st_PlecaTablaVal .range-container input[type="range"]:focus::-moz-range-thumb {
        border: 1px solid var(--st_color1);
        outline: 3px solid var(--st_color1);
        outline-offset: 1.5px; 
        outline: none;
    }
    
    .st_TDCampVal .rangeControl,
    .st_PlecaTablaVal .rangeControl {
        padding-left: 25px;
    }

    .st_TDCampVal .rangeControl .rangeOutput,
    .st_PlecaTablaVal .rangeControl .rangeOutput {
        border: 1px solid #999999;
        width: 55px;
    }

    .st_TDCampVal .rangeControl input[type=number]::-webkit-inner-spin-button, 
    .st_PlecaTablaVal .rangeControl input[type=number]::-webkit-inner-spin-button, 
    .st_TDCampVal .rangeControl input[type=number]::-webkit-outer-spin-button,  
    .st_PlecaTablaVal .rangeControl input[type=number]::-webkit-outer-spin-button {  
        opacity: 1;
    }

/* ------------------- Sliders/Ranges [FIN] */

/* 2.--------- Formularios [FIN] ---------------------- */