/* ###################################################################################### */
/* ### CAMPI ############################################################################ */
/* ###################################################################################### */

/* ### STILE x HTMLreport.php ### */
.content {

}
.grigliaIndex {
	display: grid;
	grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
	grid-template-rows: auto; 
}


.r_11, 					.r_16,					
.rt_11,		.rt_13,		.rt_16,		.rt_18,



.r_61,		.r_63,						.r_68,
.rt_61,
.r_71,		.r_73,					.r_77,	





.r_101,

.rt_201,

.rt_301,

.rt_401


,.cornice
{
	padding: 10px 10px 10px 10px;
	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color); //#9cf;
	font-weight: bold;
	color: #36C;
	text-align: center;
}
.r_11 {					/* Barre "Prodotti per fase" */
	grid-column: 1 / span 5;
	grid-row: 1 / span 5;
}
.rt_11 {				/* Interruttore Realtime */
	grid-column: 1 / span 2;
	grid-row: 1 / span 1;
}
.rt_13 {				/* Strumenti Realtime */
	grid-column: 3 / span 4;
	grid-row: 1 / span 1;
}
.r_16 {					/* Barre "Wip per fase" */
	grid-column: 6 / span 5;
	grid-row: 1 / span 5;
}
.rt_16 {					/*  */
	grid-column: 3 / span 2;
	grid-row: 1 / span 5;
}
	.c_16_0 {
		grid-column:	1 / span 1;
		display:	flex;
		align-items:	center;
  		justify-content: center;
		padding:	30px 20px 10px 20px;
		font-weight:	bold;
		font-size:	1.70em;
		color:		#ff0;
	}
	.c_16_1 {
		grid-column:	1 / span 1;
		display:	flex;
		align-items:	center;
  		justify-content: center;
		padding:	30px 20px 10px 20px;
		font-weight:	bold;
		font-size:	1.70em;
		color:		#ff0;
	}
	.c_16_2 {
		grid-column: 2 / span 1;
		padding: 10px 20px 10px 20px;
		text-align: center;
	}
.rt_18 {					/* Cambio Part Number */
	grid-column:	9 / span 2;
	grid-row:	1 / span 1;
	display:	inline;
	color:		#ff0;
}
	.c_18_0 {
		grid-column:	1 / span 1;
		display:	flex;
		align-items:	center;
  		justify-content: center;
		padding:	30px 20px 10px 20px;
		font-weight:	bold;
		font-size:	1.70em;
		color:		#ff0;
	}
	.c_18_1 {
		grid-column:	1 / span 1;
		display:	flex;
		align-items:	center;
  		justify-content: center;
		padding:	30px 20px 10px 20px;
		font-weight:	bold;
		font-size:	1.70em;
		color:		#ff0;
	}
	.c_18_2 {
		grid-column: 2 / span 1;
		padding: 10px 20px 10px 20px;
		text-align: center;
	}
.r_61 {					/* Cambio Part Number */
	grid-column:	1 / span 2;
	grid-row:	6 / span 1;
	display:	grid;
	grid-template-columns: 60% 40%;
}
	.c_61_1 {
		grid-column:	1 / span 1;
		display:	flex;
		align-items:	center;
		padding:	5px 20px 5px 10px;
		text-align:	left;
		font-weight:	bold;
		font-size:	1.70em;
		color:		#ff0;
	}
	.c_61_2 {
		grid-column: 2 / span 1;
		padding: 5px 5px 5px 5px;
		text-align: right;
	}
.rt_61 {					/* Interruttore Simulatore */
	grid-column:	1 / span 2;
	grid-row:	6 / span 1;
}
.r_63 {					/* Striscia led */
	grid-column:	3 / span 5;
	grid-row:	6 / span 1;
}
.r_68 {					/* Striscia led */
	grid-column: 8 / span 3;
	grid-row: 6 / span 1;
	display: inline
}
.r_71 {					/* Tabella degli indici */
	grid-column: 1 / span 2;
	grid-row: 7 / span 3;
	display: grid;
	grid-template-columns: 60% 40%;
}
	.c_1 {
		grid-column: 1 / 2;
		padding: 5px 20px 5px 10px;
		text-align: left;
		font-weight: bold;
	}
	.c_2 {
		grid-column: 2 / 3;
		padding: 5px 5px 5px 5px;
		text-align: right;
	}
.r_73 {					/* Grafico "FPY_01" */
	grid-column: 3 / span 4;
	grid-row: 7 / span 3;
}
.r_77 {					/* Grafico "FPY_02 */
	grid-column: 7 / span 4;
	grid-row: 7 / span 3;
}
.r_101 {				/* 4 Gauge */
	grid-column: 1 / span 10;
	grid-row: 10 / span 5;
}
.rt_101 {				/* Root - 4 Knob */
	grid-column: 1 / span 10;
	grid-row: 10 / span 20;
}
.rt_301 {				/* Root - 4 Gauge */
	grid-column: 1 / span 10;
	grid-row: 30 / span 1;
}
.rt_401 {				/* Root - Postazioni */
	grid-column: 1 / span 10;
	grid-row: 40 / span 1;
}

.inv {
	visibility: hidden;
}

/* ### STILE x BANNER ### */
.ban_1,
.ban_3 {
	font-weight: bold;
}

/* ### STILE x REPindici.php ###*/

.grigliaIndici {
	grid-column: 1 / span 10;
	grid-row: 10 / span 1;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto;

	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color); //#9cf;
	font-weight: bold;
	color: #36C;
	text-align: center;
}

#ind_0 {					/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_1 {					/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_2 {					/* Descrizione */
	grid-column: 3 / span 1;
	grid-row: 1 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_3 {					/* Descrizione */
	grid-column: 4 / span 1;
	grid-row: 1 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_4 {					/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 2 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_5 {					/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 2 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_6 {					/* Descrizione */
	grid-column: 3 / span 1;
	grid-row: 2 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_7 {					/* Descrizione */
	grid-column: 4 / span 1;
	grid-row: 2 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_8 {					/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 3 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_9 {					/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 3 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_10 {					/* Descrizione */
	grid-column: 3 / span 1;
	grid-row: 3 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_11 {					/* Descrizione */
	grid-column: 4 / span 1;
	grid-row: 3 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_12 {					/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 4 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_13 {					/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 4 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_14 {					/* Descrizione */
	grid-column: 3 / span 1;
	grid-row: 4 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#ind_15 {					/* Descrizione */
	grid-column: 4 / span 1;
	grid-row: 4 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}

.grigliaRealtime {
	grid-column: 5 / span 4;
	grid-row: 1 / span 1;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;

	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color);
	font-weight: bold;
	color: #36C;
	text-align: center;
}
#knob_rt {						/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#dis_rt {						/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}


.grigliaDisplay {
	grid-column: 1 / span 10;
	grid-row: 10 / span 1;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto;

	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color); //#9cf;
	font-weight: bold;
	color: #36C;
	text-align: center;
}
#d_0 {						/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 10 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#d_1 {						/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 10 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#d_2 {						/* Descrizione */
	grid-column: 3 / span 1;
	grid-row: 10 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#d_3 {						/* Descrizione */
	grid-column: 4 / span 1;
	grid-row: 10 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}

.grigliaKnob {
	grid-column: 1 / span 10;
	grid-row: 20 / span 1;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto;

	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color); //#9cf;
	font-weight: bold;
	color: #36C;
	text-align: center;
}
#k_0 {						/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 20 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#k_1 {						/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 20 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#k_2 {						/* Descrizione */
	grid-column: 3 / span 1;
	grid-row: 20 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#k_3 {						/* Descrizione */
	grid-column: 4 / span 1;
	grid-row: 20 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}

.grigliaGauge {
	grid-column: 1 / span 10;
	grid-row: 30 / span 1;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto;

	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color); //#9cf;
	font-weight: bold;
	color: #36C;
	text-align: center;
}

#g_0 {						/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 30 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#g_1 {						/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 30 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#g_2 {						/* Descrizione */
	grid-column: 3 / span 1;
	grid-row: 30 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}
#g_3 {						/* Descrizione */
	grid-column: 4 / span 1;
	grid-row: 30 / span 1;
	margin: auto;
	padding: 10px 10px 10px 10px;
}

.postazione {						/* PER HTMLsim.php	*/
	width: auto;
	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color);
	font-weight: bold;
	font-size: 2em;
	color: #36C;
	text-align: left;
}

.grigliaPostazione {
	grid-column: 1 / span 10;
	grid-row: 40 / span 1;
	display: grid;
	grid-template-columns: 7% 12% 10% 3% 20% 12% 12% 12% 12%;
	grid-template-rows: auto;

	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
        vertical-align: middle;
	text-align: left;
}

.p_SIM_0 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_SIM_1 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_SIM_2 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_SIM_3 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_SIM_4 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: left;
}
.p_SIM_5 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_SIM_6 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_SIM_7 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_SIM_8 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}

.postazione_RT {					/* PER HTMLreport.php	*/
	width: auto;
	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color);
	font-weight: bold;
	font-size: 2em;
	color: #36C;
	text-align: left;
}

.grigliaPostazione_RT {
	grid-column: 1 / span 10;
	grid-row: 40 / span 1;
	display: grid;
	grid-template-columns: 7% 7% 11% 5% 30% 8% 8% 8% 8% 8%;
	grid-template-rows: auto;

	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
        vertical-align: middle;
	text-align: left;
}

.p_RT_0 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_RT_1 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_RT_2 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_RT_3 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_RT_4 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: left;
}
.p_RT_5 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_RT_6 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_RT_7 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_RT_8 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_RT_9 {						/* Descrizione */
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}


.postazione_IT {					/* PER HTMLitem.php	*/
	width: auto;
	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color);
	font-weight: bold;
	font-size: 2em;
	color: #36C;
	text-align: left;
}

.grigliaPostazione_IT {
	grid-column: 1 / span 10;
	grid-row: 40 / span 1;
	display: grid;
	grid-template-columns: 6% 6% 15% 25% 20% 8% 8% 12%;
	grid-template-rows: auto;

	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
        vertical-align: middle;
	text-align: left;
}

.p_IT_0 {						/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_IT_1 {						/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_IT_2 {						/* Descrizione */
	grid-column: 3 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_IT_3 {						/* Descrizione */
	grid-column: 4 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: left;
}
.p_IT_4 {						/* Descrizione */
	grid-column: 5 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_IT_5 {						/* Descrizione */
	grid-column: 6 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: right;
}
.p_IT_6 {						/* Descrizione */
	grid-column: 7 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: right;
}
.p_IT_7 {						/* Descrizione */
	grid-column: 8 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}


.postazione_COLL {					/* PER HTMLresa.php	*/
	width: auto;
	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color);
	font-weight: bold;
	font-size: 2em;
	color: #36C;
	text-align: left;
}

.grigliaPostazione_COLL {
	grid-column: 1 / span 10;
	grid-row: 40 / span 1;
	display: grid;
	grid-template-columns: 6% 6% 13% 25% 10% 10% 10% 10% 10%;
	grid-template-rows: auto;

	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
        vertical-align: middle;
	text-align: left;
}

.p_COLL_0 {						/* Descrizione */
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_COLL_1 {						/* Descrizione */
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: center;
}
.p_COLL_2 {						/* Descrizione */
	grid-column: 3 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: right;
}
.p_COLL_3 {						/* Descrizione */
	grid-column: 4 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: left;
}
.p_COLL_4 {						/* Descrizione */
	grid-column: 5 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align:  right;
}
.p_COLL_5 {						/* Descrizione */
	grid-column: 6 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: right;
}
.p_COLL_6 {						/* Descrizione */
	grid-column: 7 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: right;
}
.p_COLL_7 {						/* Descrizione */
	grid-column: 8 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: right;
}
.p_COLL_8 {						/* Descrizione */
	grid-column: 9 / span 1;
	grid-row: 1 / span 1;
	margin: auto 0;
	padding: 2px 2px 2px 2px;
	text-align: right;
}


/* ### STILE x TASTI PN E RESET ###*/

.tastoReset {
	border-radius: 10px;
	border-color: #9CF;
	background-color: #69C;
	font-weight: bold;
	color: #36C;
	font-size: 30px;
}
.tastoReset:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.tastoDettagli {
	border-radius: 10px;
	border-color: #9CF;
	background-color: #69C;
	font-weight: bold;
	color: #36C;
	font-size: 18px;
}
.tastoDettagli:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}



/* ### STILE x HTMLmonitor.php ###*/

.titolone {
	padding: 10px 10px 10px 10px;
	border-bottom: 3px solid #36c; 
	border-right: 3px solid #36c; 
	border-left: 3px solid #69f;
	border-top: 3px solid #69f;
	background-color: var(--main-bg-color);
	font-weight: bold;
	font-size: 3em;
	color: #36C;
	text-align: center;
}