/*
 * 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; }
 
/*
 * FTime
 */
.fx-time input { width: 70px; } 

.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;  
}   
 
img.fx-iimage { border: 1px solid #ccc; }