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


/*****************************************************************************************************
 *****************************************************************************************************
                                      M O D U L O   A B M 
 *****************************************************************************************************
 *****************************************************************************************************/
 

.abm-msg-ok  
{ 
	margin: 2em 0;
	color: #2F9100;
	font-weight: bold;
}

.abm-msg-confirmar {}

.abm-query-fposicion { vertical-align: top; padding-right: 15px; }


DIV.abm-flabel {
	background-color: #FFFFFF; 
	border: 1px solid #BBBBBB;
	padding: 0px 5px; 
	color: #888888;
}

.titFiltros { color: #aaa; } 

/* Los íconos de acciones a nivel de registros en las grillas */
A.abm-action-item { padding-right: 3px; padding-left: 3px; }


.abm-btn-multisel
{
	background-color: #0077CC;
	border-color: #117799; 
	color: #FFFFFF;
}	

.abm-lnk-action
{
	background-color:#DDDDDD;
	padding: 0.1em 1em; 
	color: #333333;
	border: 1px solid #CCC;
	font-weight: bold;
	text-decoration: none; 	
}
.abm-lnk-action:hover { background-color: #CCCCCC; }


/* ------------------------------ Grilla --------------------------------------------- */

TABLE.abm-grid {
	border-collapse: collapse; 
}
.abm-grid TD, .abm-grid TH {
	border: 1px solid rgb(208,215,229);
	padding-left: 6px; 
	padding-right: 6px;
}

.abm-grid TD {
	
}
.abm-grid TR {
	height: 18px;
	color: rgb(51,51,51);
}
.abm-grid TH {
	height: 20px;
	background-color: rgb(223,227,232);
	color: rgb(51,51,51); 
}

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

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

TR.abm-grid-footer table { width: 100%; padding-top: 10px; padding-bottom: 10px; background-color: #FFFFFF; }
TR.abm-grid-footer TD { border: none; }

.abm-grid-flechas A { text-decoration: none; padding: 5px; border: 1px solid #5C83A9; color: #5C83A9; }
.abm-grid-flechas A:hover {	color: white; background-color:  #5C83A9; }
.abm-grid-flechas span { color: #5C83A9; padding: 5px; }

/* ------------------------------ Pantalla de VIEW --------------------------------------------- */

/*
 * Los grupos de campos se agrupan en columnas para separarlos en la página.  
 */
TD.abm-view-grp-col { vertical-align: top; padding-right: 2em; }

/* 
 * Cada grupo de campos es una tabla. La 1er. fila es el título y cada otra fila (de 2 columnas) es un campo y su valor 
 */
TABLE.abm-view-grupo	{ border: 1px solid #CFD0D1; margin-bottom: 1em; border-collapse: collapse; }

TD.abm-view-grp-head	{ 
	background-color: #F2F2F2;
	padding: 3px; border-bottom: 1px solid #CFD0D1;
}
TD.abm-view-grp-key		{ font-weight: bold; padding: 2px; padding-right: 2em; vertical-align: top; }
TD.abm-view-grp-value	{ color: #515151; padding: 2px; }
TD.abm-view-grp-value .fx-emphasis { background-color: #3b3b3b; color: white; font-weight: bold; padding: 0 1em 0 1em; } 

TD.tabrow-key	{ font-weight: bold; padding: 2px; padding-right: 2em; }
TD.tabrow-value	{ color: #515151; padding: 2px; }

/*
 * Los tabs se renderean como una lista (UL), donde cada ítem es un LI y el seleccionado además tiene la clase SELECTED. 
 */
DIV.abm-view-tabs UL {
  border-bottom: 1px solid #A2B8D1;
  margin: 1em 0; padding-left: 0; padding-bottom: 3px; 
}
DIV.abm-view-tabs LI {
  display: inline;
  border: 1px solid #A2B8D1; 
  margin-right: 3px; padding: 3px 10px;
  background-color: #FFFFFF;
}
DIV.abm-view-tabs LI A { text-decoration: none; }
DIV.abm-view-tabs LI.fx-emphasis A { color: red; font-weight: bold; }
DIV.abm-view-tabs LI.selected	{ background-color: #C5D2E0; }

DIV.abm-div-actions { margin-bottom: 5px; }

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

/* --------------------------------------------------------------------------------------------------------- */


/*-------------------------*/

TR.row-n0 { background-color: rgb(255,255,255); }
TR.row-n1 { background-color: rgb(211,211,211); }
TR.row-n2 { background-color: rgb(216,228,188); }
TR.row-n3 { background-color: rgb(221,217,196); }
TR.row-n4 { background-color: rgb(220,230,241); }
TR.row-n5 { background-color: rgb(218,238,243); }
TR.row-n6 { background-color: rgb(255,255,255); }

/* ---------- MENU 2---------------- */

#menu2 .menu2-submenu { background-color: #FFFFFF; border-color: #FFFFFF; }


img.fxIImage { border: 1px solid #ccc; }

@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.8125rem; }   
html { font-size: 0.875rem; }
 
/* 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/202409191/images/icons16.png');
	--icons32: url('/static/202409191/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-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; 
}

/*
 * 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; }

/*
 * 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 { padding-top: 2px; }
.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); }
.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 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: #CCC; 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: 02.rem; 
}

.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; 
}

/* 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; 
}	       
/*
 * Layout de inputs 
 */ 
 
TD.fx-inputlist-col { vertical-align: top; padding-right: 15px; }
TABLE.fx-inputlist-row { margin-bottom: 0.2rem; }

TD.fx-input-label { vertical-align: top; padding-right: 2rem; }
TD.fx-input-input { vertical-align: top; }
TD.fx-input-error { vertical-align: top; font-weight: bold; color: red; }
TR.fx-input-error TD.fx-input-label { background-color: #ff9999; }

TD.fx-filter-label LABEL { 
	 margin-bottom: 0;		/* reseteo un martin-bottom de .5rem que pone _reboot.css */ 
}

.fx-input-text { padding: 1px; }

.fx-required { font-weight: bold; }
.fx-required b { color: red; }		/* el asterisco al final de la leyenda en un input obligatorio */

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

INPUT.fx-input-text { border: 1px solid rgb(206, 212, 218); }
TEXTAREA.fx-textarea { border: 1px solid rgb(206, 212, 218); resize: both; }
 
/*
 * Hago una distinción visible para los inputs que tienen el foco, para ayudar en el manejo con teclado. Según el tipo de control html del que se trate, 
 * la distinción puede estar hecha con border, con outline, con shadow o con alguna combinación.  
 */
 
INPUT.fx-input-text.fx-readonly { border: 0; color: #444; } 

div.fx-isubtitle { margin-bottom: 0.5rem; font-size: 1.5rem; } 

/* width define por defecto el ancho máximo, pero se puede especificar input por input con setWidth(). */
.fx-iparagraph { margin-bottom: 0.5rem; margin-top: 0.5rem; color: #3b3b3b; max-width: 800px;}	 

/*
 * Input ICodeLookup
 */ 
/*SPAN.fx-icodelookup	.fx-icon { } */
SPAN.fx-icodelookup	.fx-icodelookup-txt { margin-left: 1rem; }
SPAN.fx-icodelookup	A { vertical-align: middle; margin-left: 5px; margin-top: -4px; } 


.fx-input-text, 
.fx-select,
.fx-textarea 
	{ color: #0D3D56; /* podría ser también rgb(19,149,186); */ }

 
/*
 * IMultiSelect
 */ 
div.fx-imultiselect { border: 1px solid black; padding: 3px; overflow-y: scroll; overflow-x: clip; }
.fx-imultiselect-item { margin-left: 10px; cursor: move; height: 22px; white-space: nowrap; overflow-x: clip; }
.fx-imultiselect-item input { margin-right: 10px; }
.fx-imultiselect-item label { font-size: 16px; }
.fx-imultiselect-item.fx-dragging { color: red; font-weight: bold; }
/* .fx-imultiselect-item.fx-selected { font-weight: bold; } */ 
.fx-imultiselect .allnone { margin-top: 8px; margin-bottom: 8px; }

/* Dentro de un IBoolInput, el checkbox está encerrado en un SPAN.fx-iboolinput-bool */
.fx-iboolinput-checkbox {
	display: inline-block; 
	width: 30px; 
	height: 100%; 
	background-color: #CCC;
	text-align: center; 
	vertical-align: middle;  
}
.fx-iboolinput-checkbox.fx-selected { background-color: green; }

/*
 * IBooleans
 */
.fx-ibooleans label { padding-right: 1rem; }
 
.fx-multipleinput { display: flex; }
.fx-multipleinput .fx-multipleinput-label { padding-right: 1rem; padding-left: 1rem; }
.fx-multipleinput .fx-multipleinput-label.fx-multipleinput-first { padding-left: 0; } 
 
 
 /*
  * Link para página de ayuda
  */
.fx-span-help { padding-left: 1rem; font-size: 14px; }
  
  
/********************** IAttach *****************************/

div.fx-iattach {
	border: 1px dashed #444; 
	cursor: pointer;  	
	padding: 5px 10px; 
}

div.fx-iattach--over {
	border-style: solid; 
}

button.fx-iattach__delete {
	width: 16px;
	height: 16px;
	background: url('/images/icons16.png') -48px 0;
	border: none;
	position: relative;
	top: -5px;
	display: none; 
}

.fx-iattach__empty {
	font-weight: lighter;
	font-style: italic;
	color: #444; 
}
   
.fx-iattach__filename {
	border: 1px solid #ccc;
	padding: 2px 5px; 
	background-color: #ff8000;
	color: white;  
	font-style: normal;
	font-weight: normal;
	display: none;  
}   
  
    
.fx-icombodrilldown {
	display: flex; 
}   

.fx-icombodrilldown-horizontal  {
	flex-direction: row; 
	gap: 5px; 	
}
.fx-icombodrilldown-vertical  {
	flex-direction: column;
	gap: 2px;  
}   
 /*
 * Clase FilterList 
 */

table.fx-filters-layout {
	background-color: #EEE;
	border: 7px solid #EEE;
	/* no es un borde sino que al tener mismo color del fondo, da un poco de aire y queda como un padding */
}

td.fx-filters-layout {
	vertical-align: top;
}

DIV.fx-filters {
	margin-bottom: 4px;
}

/* divide entre los filtros y la barra de botones de acciones */


TD.fx-filter-label {
	vertical-align: middle;
	text-align: right;
	padding-right: 10px;
	padding-left: 5px;
	white-space: nowrap;
}

TD.fx-filter-label LABEL {
	margin-bottom: 0;
	/* reseteo un martin-bottom de .5rem que pone _reboot.css */
}


TD.fx-filter-input {
	padding-top: 3px;
	padding-bottom: 3px;
}


.fx-fdate {
	white-space: nowrap;
	/* evita que el icono del calendario salte de la línea del input */
}

/*
 * FCombo
 */
select.fx-fcombo {
	color: #333333;
	margin: 0px;
	font-family: inherit;
}

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


.fx-fcombodrilldown {
	display: flex;
}

.fx-fcombodrilldown-horizontal {
	flex-direction: row;
	gap: 5px;
}

.fx-fcombodrilldown-vertical {
	flex-direction: column;
	gap: 2px;
}

/* Customización de la librería "select-pure" */

.fx-ftag .select-pure__select {
	font-size: 13px;
}

.fx-ftag .select-pure__autocomplete {
	font-size: 13px;
}
/* Custom CSS */

/* Fin custom CSS */