@charset "UTF-8";

/*
 * CSS del framework (independiente de la aplicación)
 *
 * El CSS final que recibe el browser es la concatenación del CSS del framework (primero) y el CSS de la aplicación (después). 
 *
 */

html { font-size: 0.875rem; }

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none; 
}
a:hover { text-decoration: underline; }

/* genérico para ocultar cualquier cosa */
.fx-hidden	{ display: none; }	

#fx-headbar {
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  /*background-color: rgb(241,241,241);*/
  background-color: #CCC;
  border-bottom: 1px solid #999;
}
#fx-headbar #fx-company {
  text-transform: uppercase;
  padding-left: 5px; 
  color: rgb(128,128,128);
  font-size: 20px;
  float: left; 
}
#fx-company A { color: inherit; }
#fx-company A:hover { text-decoration: inherit; }

#fx-headbar #fx-supermenu
{
  float: right;
  padding-right: 30px; 
}
#fx-headbar #fx-supermenu A { color: inherit; }

#fx-supermenu-sep { padding-left: 15px; }
#fx-whoami { 
	padding-left: 15px; 
	padding-right: 15px;
	background-color: #CCC; 
	color: #FFF; 
} 
#fx-whoami.fx-admin {
	background-color: red;
	color: white;
	font-weight: bold;
}

span.fx-mytask-count {
	display: inline-block;
    font-size: 14px;
    color: white; 
    background-color: red;
    width: 3em;
    text-align: center;
    border-radius: 50%; 
}

@media (max-width: 480px)
{
	#fx-headbar #fx-company { display: none; }
	#fx-headbar #fx-supermenu { float: none; padding-left: 5px; }
}
	
#fx-content {
	margin-left: 25px;
	margin-right: 25px; 
	/*border-top: 1px solid white; */	/* no se ve, pero evita un error de display por tema de márgenes/padding */
}

DIV.fx-screen-error {
	font-weight: bold; color: red; margin-top: 1em; white-space: pre;
	font-family: monospace;	/* los mensajes de error de la base se ven mucho mejor en monospace */ 
}
 
@media print {
	#fx-main-menu, #fx-headbar, .fx-actions, .fx-grid-bar, .fx-filters, .fx-grid-paginator, .fx-grid-data-action-item { display: none !important; }
	A { color: inherit !important;}
}

/*
 * Acomodo fonts de EasyUI que tiende a ponerle un font-size fijo y muy chico
 */
#fx-menu3-panel {  background-color: #FFF; border-bottom: 1px solid #999; height: 30px; padding-top: 2px;  font-size: 16px; }
#fx-menu3-panel span.l-btn-text { font-size: 16px; color: black; padding-right: 1em; }
.menu-text, .menu-text span {  font-size: 16px; }
.combobox-item, .textbox, .textbox-text { font-family: inherit; font-size: 14px !important; }

/*
 * Tabs
 */
DIV.fx-tablist UL {
  border-bottom: 1px solid #A2B8D1;
  margin: 1em 0; padding-left: 0; padding-bottom: 2px; 
}
LI.fx-tab {
  display: inline;
  border: 1px solid #A2B8D1; 
  margin-right: 3px; padding: 3px 10px; 
  background-color: #FFFFFF;
  cursor: pointer; 
}
.fx-tab-selected	{ background-color: #C5D2E0 !important; }

@media print {
	div.fx-tablist { display: none; }
	div#fx-tab-content pre { display: none; }
}

/*
 * Botones
 */
.fx-btn {
	border: 1px solid #CCC; 
	background-color: #FFF;
	color: #555; 	
	height: 25px;
	margin-right: 5px;
	cursor: pointer;  
}
.fx-btn:hover {
	background-color: #C5D2E0;
}
/* 
.fx-btn-refresh {}
.fx.btn-export {}
.fx-btn-print {}
*/
.fx-btn-delete  { border-color: red; color: red; }
.fx-btn-return 	{ background-color: #339933; color: #FFFFFF; } 
.fx-btn-ok 		{ background-color: #2299FF; color: #FFFFFF; min-width: 60px; }
.fx-btn-add 	{ background-color: #2299FF; color: #FFFFFF; }
.fx-btn-add-custom 	{ background-color: #ecd473; color: #000000; }
.fx-btn-attach  { background-color: #2299FF; color: #FFFFFF; }
.fx-btn-undo    { color: #999; }
.fx-btn-approve { background-color: #ff944d; color: #FFFFFF; }
.fx-btn-reject  { border-color: red; color: red; }
.fx-btn-dash    { background-color: lightblue ; color: black}
.fx-btn-disable { color: #999; }
.fx-btn-enable  {  }

	 
.fx-grid-orders {
	height: 25px;
	border: 1px solid #CCC;
	color: #555; 	 
	margin-right: 5px; 
} 


/**
 * Customización EasyUI
 */
 
/* saco el borde de los tabs */
DIV.tabs-panels { border: none; }
.panel-header { background-color: rgb(242, 242, 242); }
.panel-title { font-size: 13px; font-weight: normal; color: rgb(113, 158, 204); padding-right: 10px; } 
DIV.tabs-panels .panel-body { font-size: 14px; }

A.fx-icon			{ display: inline-block; width: 16px; height: 16px; 
					  vertical-align: bottom; /* alinea la imagen con los INPUTS */ 
					  cursor: pointer;
					}

.fx-icon-actionitem { margin: 2px 3px; }	/* un ícono de acción en una celda de una grilla */

:root { 
	--icons16: url('/static/202504081/images/icons16.png');
	--icons32: url('/static/2021/images/icons32.png');
}

.fx-icon-add  		{ background:var(--icons16)   0px 0; } 
.fx-icon-view  		{ background:var(--icons16)  -16px 0; }
.fx-icon-edit  		{ background:var(--icons16)  -32px 0; }
.fx-icon-delete  	{ background:var(--icons16) -48px 0; }
.fx-icon-reload  	{ background:var(--icons16)  -64px 0; }
.fx-icon-excel		{ background:var(--icons16)  -80px 0; }
.fx-icon-print		{ background:var(--icons16)  -96px 0; }
.fx-icon-enable		{ background:var(--icons16) -112px 0; }
.fx-icon-configure	{ background:var(--icons16) -128px 0; }
.fx-icon-execute	{ background:var(--icons16) -128px 0; }
.fx-icon-select		{ background:var(--icons16) -144px 0; }

.fx-icon-save		{ background:var(--icons16) -160px 0; }
.fx-icon-alert		{ background:var(--icons16) -176px 0; }
.fx-icon-users		{ background:var(--icons16) -192px 0; }
.fx-icon-notusers	{ background:var(--icons16) -208px 0; }
.fx-icon-up			{ background:var(--icons16) -224px 0; }
.fx-icon-right		{ background:var(--icons16) -240px 0; }
.fx-icon-rightdoble	{ background:var(--icons16) -256px 0; }
.fx-icon-down		{ background:var(--icons16) -272px 0; }
.fx-icon-left		{ background:var(--icons16) -288px 0; }
.fx-icon-leftdoble	{ background:var(--icons16) -304px 0; }

.fx-icon-download	{ background:var(--icons16) -320px 0; }
.fx-icon-money		{ background:var(--icons16) -336px 0; }
.fx-icon-info		{ background:var(--icons16) -352px 0; }
.fx-icon-mail		{ background:var(--icons16) -368px 0; }
.fx-icon-minus		{ background:var(--icons16) -384px 0; }
.fx-icon-plus		{ background:var(--icons16) -400px 0; }
.fx-icon-pdf		{ background:var(--icons16) -416px 0; }
.fx-icon-query		{ background:var(--icons16) -432px 0; }
.fx-icon-sortdown	{ background:var(--icons16) -448px 0; }
.fx-icon-sortup		{ background:var(--icons16) -464px 0; }

.fx-icon-return		{ background:var(--icons16) -480px 0; }
.fx-icon-calendar	{ background:var(--icons16) -496px 0; }
.fx-icon-csv  	    { background:var(--icons16) -512px 0; }
.fx-icon-attach	    { background:var(--icons16) -528px 0; }
.fx-icon-eye	    { background:var(--icons16) -544px 0; }
.fx-icon-word	    { background:var(--icons16) -560px 0; }
.fx-icon-image	    { background:var(--icons16) -576px 0; }
.fx-icon-green	    { background:var(--icons16) -592px 0; }
.fx-icon-red	    { background:var(--icons16) -608px 0; }
.fx-icon-blue	    { background:var(--icons16) -624px 0; }
.fx-icon-unlock	    { background:var(--icons16) -640px 0; }
.fx-icon-lock	    { background:var(--icons16) -656px 0; }
.fx-icon-folder	    { background:var(--icons16) -672px 0; }
.fx-icon-preferred  { background:var(--icons16) -688px 0; }
.fx-icon-up-down    { background:var(--icons16) -704px 0; }
.fx-icon-tree       { background:var(--icons16) -720px 0; }

.fx-icon-bell       { background:var(--icons16) -736px 0; }
.fx-icon-bell-on    { background:var(--icons16) -752px 0; }


.fx-icon-help       { background:url('/images/help.png');  }

A.fx-icon32			{ display: inline-block; width: 32px; height: 32px; }
 
.fx-icon32-left			{ background:var(--icons32)   -0px 0; }
.fx-icon32-leftdoble	{ background:var(--icons32)  -32px 0; }
.fx-icon32-right		{ background:var(--icons32)  -64px 0; }
.fx-icon32-rightdoble	{ background:var(--icons32)  -96px 0; }
.fx-icon32-sortdown		{ background:var(--icons32) -128px 0; }
.fx-icon32-sortup		{ background:var(--icons32) -160px 0; }
.fx-icon32-users		{ background:var(--icons32) -192px 0; }

/* los íconos dentro de un combobox quedan desalineados si se usan css sprites porque el anchor no tiene 18x20 en lugar de 16x16 (no se nota si es un icono independiente) */
.fx-fix-easyui-combobox-icon { width: 16px !important; height: 16px !important; margin-top: 2px; margin-right: 3px; }

  
/*
 * Clase Panel
 *
 * div.fx-panel
 */

/**
 * Clase PanelLayoutTable
 */
 
td.fx-panel-layout-table { vertical-align: top; } 

div.fx-panel { 
	margin-right: 10px; 
	margin-bottom: 10px; 
}

.fx-panel-border {
		border: 1px solid rgb(221,221,221);	
}

div.fx-panel-title { 
	background-color: rgb(242,242,242); 
	text-align: center; 
	padding-top: 5px; 
	padding-bottom: 5px; 
	vertical-align: middle; 
	color: rgb(113, 158, 204); 
} 

div.fx-pcol .fx-pcol-value {
	text-align:center; 
	padding: 1rem; 
	font-size: 1.2em; 
	font-weight: bold;
}

/*
 * Clase Grid
 */

.fx-grid-paginator { margin-top: 10px; width: 550px; border:1px solid #ccc;}
.fx-grid-paginator-nopages table { display: none; }	/* paginador cuando tengo menos de 10 registros. No muestro nro. de página ni botones de navegación. */

/*.fx-grid-bar { height: 26px; }*/  

.fx-variant-actions {
	display: inline-flex; 
	gap: 3px; 
	margin-left: 2px; 
	margin-right: 6px;
	vertical-align: middle; 
}

.fx-order-actions {
	display: inline-flex; 
	gap: 3px; 
	margin-left: 2px; 
	margin-right: 6px;
	vertical-align: middle; 	
}

.fx-grid-combo-orders { font-size: 12px;  } 

table.fx-grid-data {
	border-collapse: collapse;
	min-width: 550px;
	margin-top: 5px;
	font-size: 13px;  
}
table.fx-grid-data TD, table.fx-grid-data TH {
	border: 1px solid rgb(208,215,229);
	padding-left: 6px; 
	padding-right: 6px;
}

table.fx-grid-data TR {
	height: 20px;
	color: rgb(51,51,51);
}
table.fx-grid-data TH {
	height: 22px;
	background-color: rgb(223,227,232);
	color: rgb(51,51,51); 
	text-align: center;
}

TR.fx-grid-data-par   { background-color: rgb(244,244,244); }
TR.fx-grid-data-impar { background-color: #FFFFFF; }
TR.fx-grid-data-total { border: 0; height: 25px;}

TD.fx-grid-data-nototal { border: 0 !important; }
TD.fx-grid-data-total { font-weight: bold; background-color: rgb(230,230,230); text-align: right; }

.fx-grid-data-footer  { margin-top: 10px; }

/* celda con acciones de ítem. width de 1px + el nowrap hace que sea lo más angosta posible pero que entre todo en una línea. */
TD.fx-grid-data-action-item { vertical-align: middle; padding: 0 2px !important; width: 1px; white-space: nowrap;}
TD.fx-grid-data-checkbox 	{ vertical-align: middle; padding: 0 2px !important; width: 1px; white-space: nowrap;}
TH.fx-grid-data-action-item { vertical-align: middle; padding: 0 2px !important; width: 1px; white-space: nowrap;}
TH.fx-grid-data-checkbox 	{ vertical-align: middle; padding: 0 2px !important; width: 1px; white-space: nowrap;}
A.fx-grid-data-action-item img { vertical-align: middle; }

/* customización EasyUI */
td.fx-grid-data-action-item .l-btn-text {line-height: 20px; }		/* ajusto el alto para que no sea más que el alto de la fila */
td.fx-grid-data-action-item .l-btn-empty {margin: 0 2px; } 			/* achico un poco el ancho para que no queden tan separados */
td.fx-grid-data-action-item .l-btn-icon {left: 2px; } 
 
div.fx-grid-data-error { 
	font-weight: bold; color: red; 
	margin-top: 10px; 
	padding-left: 26px;
	background: url('/images/alert.png') no-repeat left top;
}

div.fx-grid-data-empty { 
	font-weight: bold; color: blue;
	margin-top: 10px; 
	padding-left: 26px;
	background: url('/images/alert.png') no-repeat left top;
} 
 
/*
 * Clase PCols
 *
 * div.fx-pcols
 */
table.fx-pcols { font-size: 13px; 	margin: 6px; }
td.fx-pcols-attr  { font-weight: bold; padding-right: 2em; white-space: nowrap; }
/* td.fx.pcols-value { } */


/*
 * Mensajes en ventanas
 */
 
.fx-msg-info { margin-bottom: 1em; margin-top: 1em; }
.fx-msg-ok   { margin-bottom: 1em; margin-top: 1em; }
.fx-msg-warning { margin-bottom: 1em; margin-top: 1em; }

.fx-msglist { margin-bottom: 1em; margin-top: 1em; }
.fx-msglist ul { list-style-type: none; }
.fx-msglist li { background-repeat:no-repeat; padding:0 0 0.5em 2em; }
li.fx-msglist-info { background-image:url("/fx/images/info.png");}
li.fx-msglist-alert { background-image:url("/fx/images/alert.png"); color: red; white-space: pre; }
li.fx-msglist-noicon { padding-left: 0;  } 
 
/*
 * Cuando un fx-msg-info adentro contiene HTML
 */
.fx-msg-info p { margin-bottom: 1em; }
.fx-msg-info table { border-collapse: collapse; }
.fx-msg-info th { padding: 5px 1em 5px 0; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }
.fx-msg-info td { padding: 1em 1em; }
.fx-msg-info td.fx-number { text-align: center; }
.fx-msg-info td.fx-money { text-align: right; } 
.fx-msg-info ul { padding-left: 2em; padding-top: 0.5em; padding-bottom: 0.5em; }

 
 

/*
 * Pantalla SDetail
 */
.fx-sdetail-actions { margin-bottom: 10px; }	

/*
 * Pantalla SOption
 */
 .fx-soption label { margin-left: 20px; vertical-align: middle; line-height: 20px; }
.fx-soption .fx-soption-radio { vertical-align: baseline; margin-right: 10px; } 
.fx-soption label { display: block; margin-bottom: 10px; }
.fx-soption label p {color: #555; margin-left: 23px; margin-top: 3px;}

/*
 * TabList
 */ 
 
DIV.fx-tablist { width: 100%; height: auto; } 

SPAN.fx-tablist-tab-img { display: inline-block; line-height: 20px; padding-top: 5px; }
SPAN.fx-tablist-tab-img DIV { width: 32px; height: 32px; margin: auto; }

/*
 * Tab TText
 */
div.fx-ttext .fx-format-text {
	white-space: pre-wrap; 
	max-width: 700px;
} 

div.fx-format-code {
	white-space: pre-wrap; 
}

/* La solapa additional data cuando estoy mirando un evento en fw.log. Como es un evento de log, el formato lo acomodo
  para que sea algo más técnico */
div.fx-ttext .fx-log-data-text {
	font-family: monospace;
	max-width: 1900px !important; 	/* override de los 700px máximos de fx-format-text */
}

/*
 * Un bloque de código HTML ingresado por el usuario (con un input IHtmlEdit o similar).
 */
/* .fx-custom-html {} */
.fx-custom-html p  { padding-bottom: 10px; }
.fx-custom-html ul { padding-left: 20px; padding-bottom: 10px; margin: 0; }  
 
/* Fija un ancho adecuado para un bloque de documentación, de texto puro, etc. para que no tome el ancho completo de la pantalla. Util por ej. para TText,  */ 
.fx-width-doc { width: 600px; }
.fx-width-email { width: 400px; } 
 
 
 
/*
 * TGrid
 */
div.fx-tgrid { padding: 10px; }

/*
 * TRow
 */
div.fx-trow { padding: 10px; }
td.fx-trow-key { padding-right: 15px; font-weight: bold; }

/*
 * TText
 */
.fx-ttext-actions { margin-bottom: 10px; }


/*
 * Genéricos para aplicar en condiciones o código en general
 */
.rojo { color: red !important; }
.verde { color: green !important; }
.gris { color: #888888 !important; }
.azul { color: blue !important; }
.amarillo { color: yellow !important; }
.blanco { color: white !important; }

TR.gris A:link { color: #888888 !important; }
TR.rojo A:link { color: red !important; }

.italic { font-style: italic; }
.bold { font-weight: bold; }
.pre { white-space: pre; }
.monospace { font-family: monospace; }

.bg-red    { background-color: #FFAAAA !important; }
.bg-yellow { background-color: #FFFF00 !important; }
.bg-green  { background-color: #00FF00 !important; }
.bg-blue   { background-color: #0000FF !important; color: white; }
.bg-grey   { background-color: #666666 !important; color: white; }

TD:has(> span.bg-red) { 
	background-color: #FFAAAA;
}
TD:has(> span.bg-green) { 
	background-color: #00FF00;
}

/*
 * Estilos de colores para celdas, cuando se quiere identificar valores pero sin 
 * una connotación buena/mala como podría ser verde/rojo. No importa mucho qué colores sean
 * pero están calculados para que intercalados en celdas de una misma grilla se vean bien. 
 */
.bg-color1  { background-color: #0375B4 !important; color: #FFFFFF; }
.bg-color2  { background-color: #DCD0D0 !important; color: #333333; }
.bg-color3  { background-color: #373737 !important; color: #FFFFFF; }
.bg-color4  { background-color: #EEAA7B !important; color: #FFFFFF; }
.bg-color5  { background-color: #66B9BF !important; color: #FFFFFF; }


.indent1 	{ padding-left: 2em; }

.right { text-align: right; }
.left  { text-align: left; }
.center { text-align: center; }

/*
 * Columnas
 */
.fx-ctext
{
	color: #333333;
	margin: 0px;
	border: 0;	
}

.fx-ctext-monospace
{
	font-family: monospace !important;
} 

/* TAB de notas FwNoteHtmlTab */
.fx-noteh { width: 494px; background-color: rgb(246,247,249); font-family: helvetica,arial,sans-serif; font-size: 12px; line-height: 1.34; }
.fx-noteh-note { width: 470px; padding: 8px 12px 4px 12px; }
.fx-noteh-avatar { width: 32px; height: 32px; float: left; background-color: #333; } 
.fx-noteh-content-wrap { padding-left: 40px; }
.fx-noteh-author { color: rgb(54,88,153); font-weight: bold; }
.fx-noteh-actions a { color: rgb(54,88,153);  text-decoration: none; }
.fx-noteh-actions a:hover { text-decoration: underline; }
.fx-noteh-actions a:visited { color: rgb(54,88,153); }  
.fx-noteh-date { color: rgb(144,148,156); padding-top: 2px; }
.fx-noteh-actions { margin-bottom: 10px; }
.fx-noteh-reminders { margin-bottom: 10px; } 
.fx-noteh-reminder > span { display: inline-block; width: 16px; height: 16px; background:url('/images/icons16.png') -496px 0; margin-right: 1em; }
.fx-noteh-reminder a span:first-child { padding-right: 1em; } 

/*
 * Ventana SQuickLookup
 */
#fx-squick-fsearch { margin-bottom: 10px; }
#fx-squick-fsearch #s { height: 23px; width: 150px; } 


/*
 * IHtmlEdit. Si pongo un tinymce dentro de un contenedor con la clase .fx-mcefullsize hace que el TinyMCE ocupe
 * todo el espacio de su contenedor
 */
.fx-mcefullsize, 
.fx-mcefullsize .mce-tinymce, 
.fx-mcefullsize .mce-stack-layout, 
.fx-mcefullsize .mce-edit-area {
        display: flex!important;
        flex-direction: column;
        flex: 1;
        align-items:stretch;
}
.fx-mcefullsize .mce-tinymce iframe {
  flex: 1;
}
      
      
      
div.fx-format-markdown {
	font-size: 14px;
	max-width: 60rem; 
}      
.fx-format-markdown table { 
  border-collapse: collapse;
  box-shadow: 2px 2px #CCC;
  margin-bottom: 10px;	
}

.fx-format-markdown th {
  border: 1px solid #CCC;
  padding: 5px;	
}
.fx-format-markdown td {
  padding: 5px; 
  border: 1px solid #CCC; 
}
.fx-format-markdown code {
  font-family: monospace;
  background-color: #eee;
}
.fx-format-markdown > *:first-child {
	margin-top: 0;
}
.fx-format-markdown > *:last-child {
	margin-bottom: 0;
}
/*
.fx-format-markdown p {
  padding-bottom: 15px; 
}
*/


.fx-bgtask-output {
	white-space: pre; 
	line-height: 12px; 
	font-size: 12px;
	font-family: monospace;   
}
      
      
/*********************************************************/
/* Submenúes multilevel */
/*********************************************************/
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}      

.fx-main-menu .dropdown-item.active, nav.navbar .dropdown-item:active {
  color: inherit;
  background-color: inherit;
}

#fx-main-menu { margin-bottom: 0.8em; height: 37px; background-color: rgb(241,241,241); }
#fx-main-menu .navbar-light .navbar-nav .nav-link { color: black; }
#fx-main-menu nav { padding-top: 0px; padding-bottom: 0px; }
#fx-main-menu .nav-link { font-size: 16px; padding-right: 1.5em; }
#fx-main-menu .dropdown-menu { 
	font-size: 16px;		/* agrando la letra, si no queda el default a nivel de html que es 13px */ 
	margin-top: 0px; 		/* el default de Bootstrap a mi gusto queda demasiado abajo */
}	 
#fx-main-menu nav { background-color: rgb(241,241,241); } 

/*********************************************************/
   
      
/* grid paginator */
.fx-grid-pag { margin-top: 0.8em; }      
.fx-grid-pag .btn-toolbar button { background-color: white; color: #888; width: 30px; border-color: rgb(206, 212, 218); }
.fx-grid-pag .btn-toolbar .input-group input { width: 50px; text-align: center; }
.fx-grid-pag .btn-toolbar .input-group { margin-right: 6.5px; }
.fx-grid-pag .btn-toolbar .input-group .fx-paginator-info .input-group-text { width: 200px; background-color: white; }
      

/*********************************************************/

.fx-toggler
{
	cursor: pointer; 
	font-weight: bold; 
}

.fx-no-toggler::before		/* aplica a los span que podrían haber sido togglers pero que no tienen hijos */
{
	content: " ";
	display: inline-block;
  	width: 1em; 
  	margin-right: 0.2rem; 
}

.fx-toggler::before
{
  /*content: "\25B6";*/
  content: "+";
  display: inline-block;	/* esto es un span, pero quiero setearle anchos y márgenes */
  width: 1em;				/* el signo más y el menos no tienen el mismo ancho. Le fuerzo un ancho fijo */
  text-align: center;		/* dentro de ese ancho fijo, el caracter va centrado */ 
  margin-right: 0.2rem;		/* espacio entre el signo más/menos y la leyenda */
}

.fx-toggler.fx-opened::before
{
	content: "-";
}
      
/* Genéricos para armar columnas en una página */

.fx-flex-row {
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap; 
	width: 100%;
	gap: 30px;  
}
.fx-flex-col {
	display: flex; 
	flex-direction: column; 
}
       

/* Tablas de datos estilo grilla pero generadas a mano en el código (no desde el objeto Grid) */
table.fx-table
{
	border-collapse: collapse; 
	margin-top: 5px;
	margin-bottom: 5px;
}
table.fx-table TD, table.fx-table TH {
	border: 1px solid rgb(208,215,229);
	padding-left: 6px; 
	padding-right: 6px;
}
table.fx-table TR {
	height: 20px;
	color: rgb(51,51,51);
}
table.fx-table TH {
	height: 22px;
	background-color: rgb(223,227,232);
	color: rgb(51,51,51); 
	text-align: center;
}
table.fx-table td.fx-tmoney {
	text-align: right; 
}
table.fx-table td.fx-tdecimal {
	text-align: right; 
}
table.fx-table td.fx-tdate {
	text-align: center; 
}
table.fx-table td.fx-tnumber {
	text-align: right; 
}
table.fx-table tbody:nth-of-type(2) td {		/* el 2do TBODY por convención es la sección de totales */
	background-color: rgb(223,227,232);
	font-weight: bold; 
	text-align: right; 
}
table.fx-table tbody:nth-of-type(2) td:empty {		
	background-color: white;
	border: 0;  
}
              
iframe.fx-FlexReportHtmlViewer
{
	width: 100%; 
	margin-top: 1rem; 
	border: 1px solid black; 
	box-shadow: 10px 5px 5px #CCC; 
	height: calc(100vh - 150px);
}       
       
       
/* cuando se muestran los tags en una pantalla de detalle se muestra un bloque de ancho máximo fijo que crece hacia abajo */	
div.fx-tags
{
	max-width: 40em; 
}

div.fx-chtml
{
	max-height: 12em;
	overflow: auto;
}

div.fx-chtml img
{
	max-width: 100%;
	height: auto;
}

/* cada tag individual tiene un border y una separación (sea que se muestre dentro de un div.ge-tags o en una columna normal de grilla */ 
span.fx-tag
{
	display: inline-block; 
	border: 1px solid #CCC; 
	border-radius: 10px; 
	padding: 0.2em;
	margin-left: 0.5em; 
	margin-bottom: 0.5em; 
}	       

/* tooltips */

.fx-tooltip {
  position: relative;
  cursor: default;
}

.fx-tooltip-content {
  display: none;
  position: absolute;
  bottom: auto;
  top: 125%;
  left: 50%;

  background: #ffffff;
  color: #333333;
  border: 1px solid #cccccc;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15);  
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
}

.fx-tooltip:hover .fx-tooltip-content {
  display: block;
}

PRE.fw-cparagraph { background-color: #EEE; padding: 0.5em; }