/* GLOBAL CSS VARIABLES */
:root {
	--pageWidth: 1200px;
	--pageHeight:710px;
	--quadroHeight:520px;
	--listaHeight:485px; /* = elencoHeight -33px */
	--imgWidth:245px;
	--imgHeight:245px;


/* elenchi */
	--sfondoElenco:#888;
	--titoloFg: #fff;
	--titoloBg: #0077bb;
	--cellaFg: #ffffff;
	--cellaBg: #666;
	--cellaAttivaFg: #ffffbf;
	--cellaAttivaBg: #88a;
	--rigaAttivaFg: #ffffbf;
	--rigaAttivaBg: #caa;

/* campi */
	--stdHeight: 23px;
	--sfondoCampi:#333;
	--labelFg: #f8f8f8;
	--labelBg: #444;
	--infoFg: #f0f0ff;
	--infoBg: #8088c0;
	--campoFg: #343;
	--campoBg: #d8f8b8;
	--campoFgDis: #666;
	--campoBgDis: #e0e8f8;
	--textFg: #333;
	--textBg: #d8f8b8;
	--textFgDis: #666;
	--textBgDis:#e0e8f8;
	--selFg:#343;
	--selBg:#d8f8b8;
	--selFgDis:#f0f0ff;
	--selBgDis:#9090a0;
	--optBg:#a0d0f0;
	--optFg:#334;
	--borderColor:#ccc;
}

/*----------------------------------------*/
.size1  {width:46px;}
.size2  {width:96px;}
.size3  {width:146px;}
.size4  {width:196px;}
.size5  {width:246px;}
.size6  {width:296px;}

.size7 {width:348px;}
.size8 {width:398px;}
.size9 {width:448px;}
.size10 {width:498px;}
.size11 {width:548px;}
.size12 {width:598px;}
.size24 {width:1198px;}

.sizeR1 {width:50px;}
.sizeR2 {width:100px;}
.sizeR3 {width:150px;}
.sizeR4 {width:200px;}
.sizeR5 {width:250px;}
.sizeR6 {width:300px;}
.sizeR12 {width:600px;}
.sizeR13 {width:650px;}
.sizeR14 {width:700px;}
.sizeR15 {width:750px;}
.sizeR16 {width:800px;}
.sizeR17 {width:850px;}
.sizeR18 {width:900px;}
.sizeR19 {width:950px;}
.sizeR20 {width:1000px;}
.sizeR21 {width:1050px;}
.sizeR22 {width:1100px;}
.sizeR23 {width:1150px;}
.sizeR24 {width:1200px;}



html {
	font-size:9pt;
	width:var(--pageWidth);
	height: var(--pageHeight);
}

body {
	font-family: 'Trebuchet MS', sans-serif;
	background: #fff;
	width:100%;
  height:100%;
  overflow-x: hidden;
  text-align:center;
  margin:8px;
}

/*  =============== Larghezza DIVs ==================*/
.header {width:100%;}


/*  =============== SEZIONI ==================*/
.header {
	width:100%;
	height:52px;
	border:0px solid var(--borderColor);
	background-color:#666;
}

.azioni {
	height:27px;
	margin-top:10px;
	padding-left:20px;
	padding-top:5px;
	background-color:transparent;
	border:1px solid #ddd;
}

.moduli {
	height:27px;
	margin-top:10px;
	padding-left:20px;
	padding-top:5px;
	background-color:transparent;
	border:1px solid #ddd;
}

.elenco {
	width:600px;
	height:var(--quadroHeight);
	margin:0;
	padding:0;
	border:0px solid #888;
}

.campi {
	width:600px;
	height:var(--quadroHeight);
	box-sizing: border-box;
	padding:8px 0px!important;
	background-color:var(--sfondoCampi);
	font-size:0pt;
}

.spacing {
	clear:both;
	min-height:16px;
}



.footer {
	clear:both;
	height:auto;
	padding-top:0px;
	border:1px solid var(--borderColor);
	background-color:#222;
}

div.ft {
	height:37px;
	margin:0;
	background:#bbf;
}

.dataoggi {
	height:37px;
	padding-top:6px;
	padding-left:20px;
	color:#444;
	background:transparent;
	font-size:9pt;
	text-align:center;
	box-sizing: border-box;
}


.msg {
	height:37px;
	padding-top:6px!important;
	font-size:11pt;
	font-weight:800;
	text-align:center;
	color:#cceeff;
	border-left:1px inset #bcb;
	background:#037;
	box-sizing: border-box;
}

.version {
	height:37px;
	padding-top:6px;
	padding-left:20px;
	color:#444;
	background:transparent;
	text-align:center;
	box-sizing: border-box;
}

.divHelp {
	height:31px;
	margin:0;
	color:#334;
	border:1px inset #bcb;
	background:#f0f0ff;
}


.pHelp {
	margin:0;
	padding-top:5px;
	padding-left:5px;
	font-size:9pt;
	font-weight:bold;
	text-align:center;
}





/* ========================== LISTE  ======================= */
.elenco {
	display:inline-block;
	height:var(--elencoHeight);
	box-sizing: border-box;
	margin:0;
	padding:0;
	background-color:var(--sfondoElenco);
}

.titoli {
	width:100%;
	height:35px;	/* obbligatorio per mostrare lo scroll */
	overflow-y:scroll;
}

.lista {
	width:100%;
	height:var(--listaHeight);
	overflow-y:scroll;
}


/* -------------------------  titoli ---------------------------------- */


UL.ulTitolo {
	display:block;
	width:100%;
	list-style-image: none;
	list-style-position: outside;
	margin:0;
	padding:0;
	height:100%;
	color:var(--titoloFg);
	background:  var(--titoloBg);
	}


LI.liTitolo {
	display:block;
	float:left;
	margin:0;
	padding-top:8px;
	font-size:9pt;
	font-weight:800;
	text-align:center;
	box-sizing: inherit;
	box-sizing: border-box;

	height:100%;
	color:var(--titoloFg);
	background-color:var(--titoloBg);
	border:1px inset #888;
	border-collapse:collapse;
	}

LI.liTitolo[value="up"]::after {
	position:relative;
  top: 1px;
	content:url(../img/arrow_up.gif);
	}

LI.liTitolo[value="down"]::after {
	position:relative;
	top: 1px;
	content:url(../img/arrow_down.gif);
	}


/* ---------------------  items ---------------------------- */
UL.ulVoci {
	display:block;
	width:100%;
	list-style-image: none;
	list-style-position: outside;
	margin:0;
	padding:0;
	height:23px;
	color:var(--cellaFg);
	background:var(--cellaBg);
	}

UL.ulVoci:hover , UL.ulVoci:focus{
	background-color:var(--cellaAttivaBg);
}

.highlighted {
	background:var(--rigaAttivaBg)!important;
}



LI.liVoci {
	display:block;
	float:left;
	height: var(--stdHeight);
	margin:0;
	padding:2px 5px;
	font-size:9pt;
	text-align:left;
	font-weight:bold;
	box-sizing: inherit;
	box-sizing: border-box;
	color: var(--cellaFg);
	border:1px inset #ccc;
	cursor:pointer;
	border-collapse:collapse;
}

LI.liVoci.masked {
	background:#048!important;
}

.fldTipo, .fldMarca {	color:#eeffff;}
.fldTipo:hover, .fldMarca:hover {	color:#44ffff; text-decoration:underline;}




/* ========================== CAMPI  ======================= */

.etichetta {
  height:23px; /*var(--stdHeight);*/
	font-size:9pt;
	text-align:left;
	margin:0;
	padding:3px 15px!important;
	border:1px solid var(--borderColor);
	color:var(--labelFg);
	background-color:var(--labelBg);
	box-sizing: border-box;
}


.valore {
 	height:var(--stdHeight);
 	margin:0;
 	font-size:10pt;
	text-align:center;
	border:1px solid var(--borderColor);
	box-sizing: border-box;
}


.contatore {
	color:var(--labelFg);
	background-color:#67a;
}



.infoDiv {
 	height:var(--stdHeight);
	font-size:9pt;
	font-weight:400;
	padding:2px;
	text-align:center;
	color:var(--campoFg);
	background-color:var(--campoBgDis);
	border:1px solid var(--borderColor);
	box-sizing: border-box;

}

input.fld {
	width:100%;
	height:100%;
	margin:0;
	padding:2px 6px;
	font-size:9pt;
	font-weight:600;
	border:0;
	border-right:1px solid #aaa;
	color:var(--campoFg);
	background-color:var(--campoBg);
}

input.fld[disabled] {
	background-color:var(--campoBgDis);
}

.divImg {
	width: var(--imgWidth);
  height: var(--imgHeight);
	margin:0;
	margin-left:5px;
	padding:2px;
	text-align:center;
	position: relative;
	overflow:hidden;
	border: 1px #f0f0f0 solid;
	border-radius: 4px;
	background-color:transparent;
	box-sizing: border-box;
}

.immagine {
	max-width: var(--imgWidth);
	max-height:var(--imgHeight);
  margin: 0;
  text-align:center;
  vertical-align:middle;
}



.thumb {
	width: 80px;
	height:80px;
	border: 1px #fff solid;
	border-radius: 5px;
	margin-top:0px;
	padding:0px;
	text-align:center;
	overflow:hidden;
}


/* ============================= Labels & Controls ===================== */

div.cntlLabel {
	height:20px;
	margin-top:10px;
	border:1px solid #888;
}

input.cntText
{
	height:30px;
	text-align:center;
	font-weight:800;
	font-size:10pt;
}

select{
	width:100%;
	height:var(--stdHeight);
	margin-top:0px;
	padding:0;
	padding-left:8px;
	font-size:10pt;
	color: var(--selFg);
	background-color: var(--selBg);
	border:1px solid var(--borderColor);
	box-sizing: border-box;
	}

select:disabled {
	background-color:var(--selBgDis);
	color:var(--selFgDis);
	}
option {
	color:var(--optFg);
	background-color:var(--optBg);
	font-size:10pt;

}

textarea {
	width:100%;
	height:100%;
	margin-bottom:0px;
	font-size:10pt;
	font-weight:normal;
	text-align:left;
	overflow-y:scroll;
	color:var(--textFg);
	background-color:var(--textBg);
}

textarea[disabled] {
	color:var(--textFgDis);
	background-color:var(--textBgDis);
}

input.cnt {
	width:100%;
	height:22px;
	font-size:10pt;
	font-weight:800;
	text-align:center;
	padding:2px 6px;
	color:#444;
	background-color:#6ac; /* var(--campoBg); */
	box-sizing: border-box;
	outline:none;
	border:none;
}

Label {
	color:var(--labelFg);
	background-color:var(--labelBg);
	font-weight:800;
	font-size:9pt;
	text-align:left;
	padding:3px 8px;
	border:0px solid #aaa;
	}

.info {
	height:var(--stdHeight)!important;
	margin:0!important;
	color:var(--infoFg)!important;
	background-color:var(--infoBg)!important;
	font-size:9pt;
	font-weight:bold;
	padding-top:2px;
	border:1px solid var(--borderColor);
	box-sizing: border-box;
	cursor: not-allowed!important;
}

/* ========================== ELEMENTI ================================ */


/**** GENERICI ****/
P {
	font-size:9pt;
	line-height:1.3em;
	color:#222;
	text-align:justify;
	}

P.msg {
	text-align:center;
	font-size:11pt;
	font-weight:bold;
	line-height:1.3em;
}


h1 {
	font-size: 20px;
	color: #b70;
	line-height: 24px;
	margin-top: 4px;
	margin-bottom: 4px;
	font-weight: 600;
}

h2 {
	color: #fff;
	font-size: 16px;
	line-height: 20px;
	margin-top: 4px;
	font-weight: 600;
}


table {
	margin:0;
	margin-left:4px;
	padding:0;
	padding-left:4px:
	border:none;
}

tr {
	margin:0;
	margin-left:4px;
	padding:0;
}

td {
	height:auto;
	border:0px solid yellow;
	vertical-align:top;
	margin:0;
	padding:0;
	border-collapse:collapse;
box-sizing: border-box;
}

/* ========================== BOTTONI ================================ */

.button {
	width:85px;
	height:23px;
	margin:0px 3px;
	padding:3px;
	font-size:9pt;
	font-weight:bold;
	text-align: center;
	color:#fafaff;
	background-color: #9080f0;
	border:1px outset #669;
	border-radius: 4px;
	transition: background-color 50ms ease-out;
}

.button.short {width:70px;}

.button:hover, .button:focus {
	color: #fff;
	background-color: #d000f0;
}

.button.disabled, .button[disabled], .button.disabled:hover,.button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus
{
	color:#444;
	background-color: #ddd;
}

button.setActive
{
	background:transparent;
}

Label.button:hover, Label.button:focus {
	color: #fff;
	background-color: #f80;
}



/* ================ varie  ======================= */
.logo 	{text-align:left;}

.cmbCliente {
width:300px;
background-color:#d0efff!important;
color:#237;
font-weight:bold;
outline:none;
}


A.stdLink:link,A.stdLink:visited,A.stdLink:active {
	font-size:9pt;
	font-weight:bold;
	border:none;
	color:#ddf;
	display:inline-block;
	background:transparent;
	text-decoration:underline;
}

A.stdLink:hover {
	color:#daf;
}
.noPdf {color:#d0d0d0!important;}

/* link usati nelle liste */
A.listLink:link,A.listLink:visited,A.listLink:active {
	font-size:10pt;
	font-weight:bold;
	border:none;
	color:#d8e8ff;
	display:inline-block;
	background:transparent;
	text-decoration:underline;
}

A.listLink:hover {
	color:#ffb8e8;
}

.centered {text-align:center!important;}
HR {height:2px; margin:6px;;}


/* ========================== ELENCHI ================================ */
.titCodice	{width:23%;}
.titTipo		{width:15%;}
.titMarca 	{width:35%;}
.titQta			{width:12%;}
.titData		{width:15%;}

.fldCodice{width:23%; text-align:left!important;}
.fldTipo	{width:15%; text-align:center!important;}
.fldMarca	{width:35%; text-align:center!important; }
.fldQta 	{width:12%; text-align:center!important;}
.fldData	{width:15%; text-align:center!important;}


/* ========================== FINE  ================================ */