@font-face
{
	font-family: 'Alegreya Sans Light';
	src: url('font/AlegreyaSans-Light.otf');
	src: url('font/AlegreyaSans-Light.ttf');
}

@font-face
{
	font-family: 'Alegreya Sans';
	font-weight: bold;
	src: url('font/AlegreyaSans-Bold.otf');
	src: url('font/AlegreyaSans-Bold.ttf');
}

@font-face
{
	font-family: 'Dosis';
	src: url('font/Dosis-SemiBold.ttf');
	src: url('font/Dosis-regular.ttf');
}

@font-face
{
	font-family: 'Elektra Light Pro';
	src: url('font/Elektra Light Pro.otf');
	src: url('font/elektra_light_pro.ttf');
}

@font-face
{
	font-family: 'Web Serveroff';
	src: url('font/menu.otf');
	src: url('font/menu.TTF');
}

body, html, form
{
	width: 100%;
	height: 100%;
	font-size: 16px;
	margin: 0;
	padding: 0;
	background-color: #fff;
	font-family: 'Elektra Light Pro';
	color: #000000;
}

a
{
	text-decoration: none;
	color: blue;
}

hr
{
	border-bottom: none;
	border-right: none;
	border-left: none;
	border-top: 1px solid #333;
}

a:hover
{
	color: red;
}

.modal
{
	background-color: rgba(0,0,0,0.7)
}

.stato_testo
{
	text-shadow: 0px 0px 3px #333;
}

.box_ricerca
{
	background-color: #ddd;
	padding: 10px;
	box-sizing: border-box;
	border-bottom: 1px solid #000;
	position: relative;
}

	.box_ricerca input[type=text], .box_ricerca input[type=datetime-local], .box_ricerca input[type=number]
	{
		height: 25px;
		line-height: 25px;
		box-sizing: border-box;
		font-size: 14px;
	}

	.box_ricerca input[type=submit], .box_ricerca input[type=button]
	{
		width: 90px;
		height: 40px;
		line-height: 25px;
		box-sizing: border-box;
		font-size: 14px;
		margin-top: 5px;
		color: black;
	}

.autohref
{
	position: fixed;
	width: 100%;
	height: 30px;
	line-height: 30px;
	left: 0;
	bottom: 0px;
	display: block;
	/*background-color: rgba(255,0,0,0.5);*/
	background-color: rgb(255,0,0);
	color: white;
	text-align: center;
	margin: 0;
	padding: 0;
}
/*testa*/
.testa
{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	height: 60px;
	text-align: center;
	box-sizing: border-box;
	padding: 0 10px;
	border-bottom: 1px solid #333;
	background-color: #000;
}

	.testa .hamburger
	{
		width: 60px;
		height: 60px;
		line-height: 60px;
		position: absolute;
		left: 0px;
		top: 2px;
		text-align: center;
		font-size: 40px;
		color: #6ab342;
		text-decoration: none;
		display: block;
	}

		.testa .hamburger:hover
		{
			color: #aaa;
		}

		.testa .hamburger.hidden
		{
			transition: 0.5s;
			transform: rotate(0deg);
		}

		.testa .hamburger.active
		{
			transition: 0.5s;
			transform: rotate(90deg);
		}

	.testa .logo
	{
		width: 50px;
		height: 50px;
		background-repeat: no-repeat;
		background-image: url('../img/logo_piccolo.png');
		background-position: center center;
		background-size: contain;
		margin: 5px auto;
	}

	.testa .operatore
	{
		width: 60px;
		height: 60px;
		line-height: 60px;
		position: absolute;
		right: 0px;
		top: 2px;
		text-align: center;
		font-size: 40px;
		color: #6ab342;
		text-decoration: none;
		display: block;
	}

		.testa .operatore:hover
		{
			color: #aaa;
		}

		.testa .operatore.hidden
		{
			transition: 0.5s;
			transform: rotate(0deg);
		}

		.testa .operatore.active
		{
			transition: 0.5s;
			transform: rotate(90deg);
		}

	.testa .titolo
	{
		height: 60px;
		line-height: 60px;
		font-size: 30px;
		font-weight: bold;
		position: absolute;
		left: 60px;
	}

.pannello_operatore
{
	position: fixed;
	right: 0px;
	height: 80px;
	z-index: 97;
	background-color: #6ab342;
	padding: 10px;
	box-sizing: border-box;
	border-bottom-left-radius: 20px;
}

	.pannello_operatore.active
	{
		transition: 0.5s;
		top: 60px;
	}

	.pannello_operatore.hidden
	{
		transition: 0.5s;
		top: -61px;
	}

	.pannello_operatore .nome
	{
		height: 30px;
		line-height: 30px;
		font-size: 24px;
		color: black;
		margin: 0 10px;
		text-align: right;
	}

	.pannello_operatore .bntlo
	{
		line-height: 30px;
		margin: 0 10px;
		float: right;
		font-size: 24px;
		color: white;
	}

		.pannello_operatore .bntlo:hover
		{
			opacity: 0.6;
		}

	.pannello_operatore a
	{
		line-height: 30px;
		margin: 0 10px;
		float: right;
		font-size: 24px;
	}
/*/testa*/
.centro
{
	padding: 60px 0 0 0;
}
/*MENU*/
.menu
{
	width: 300px;
	position: fixed;
	top: 61px;
	bottom: 0px;
	z-index: 99;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: black;
}

	.menu.hidden
	{
		transition: 0.5s;
		left: -301px;
	}

	.menu.active
	{
		transition: 0.5s;
		left: 0px;
	}

	.menu .btn
	{
		border-bottom: 1px solid white;
		width: 100%;
		display: block;
		height: 34px;
		line-height: 30px;
		text-align: left;
		box-sizing: border-box;
		padding: 0 10px;
		color: #eee;
		font-size: 20px;
	}

		.menu .btn:hover
		{
			background-color: #666;
			color: #fff;
		}
/*/MENU*/
/*INIZIO REPARTI*/
.reparti .blocco, .reparto .blocco, reparto.blocco, .plc .modo, .plc
{
	/*box-shadow: 4px 4px 8px rgba(0,0,0,0.3)*/
}

	.reparti .blocco:hover, .reparto .blocco:hover
	{
		/*box-shadow: 4px 4px 8px rgba(0,0,0,0.3) inset;*/
	}

.reparti
{
	text-align: left;
	width: 32%;
	min-width: 300px;
	height: 100%;
	padding: 10px;
	font-size: 0;
	float: left;
	background-color: #ccc;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: scroll;
	border-top: 1px solid black;
	margin-top: -1px;
	display: none;
}

	.reparti .blocco
	{
		display: inline-block;
		text-align: center;
		border: 1px solid #ccc;
		background-color: #fff;
		padding: 10px;
		width: 240px;
		height: 110px;
		box-sizing: border-box;
		border-radius: 20px;
		margin: 10px;
		overflow: hidden;
	}

		.reparti .blocco.selected
		{
			box-shadow: 4px 4px 8px rgba(0,0,0,0.4) inset;
			cursor: default;
		}

		.reparti .blocco .titolo
		{
			font-size: 24px;
		}

		.reparti .blocco .ultima
		{
			font-size: 20px;
			margin: 5px auto;
		}

		.reparti .blocco.selected .ultima
		{
			color: #666;
		}

		.reparti .blocco.link .ultima
		{
			color: #999;
		}

		.reparti .blocco.selected .titolo
		{
			color: #000;
			font-weight: bold;
		}

		.reparti .blocco.link .titolo
		{
			font-size: 24px;
			color: #333;
		}

		.reparti .blocco:hover .titolo
		{
			color: black;
		}

		.reparti .blocco.allarme
		{
			border: 1px solid red;
		}

		.reparti .blocco.regolare
		{
			border: 1px solid green;
		}

		.reparti .blocco .stato
		{
			margin-top: 10px;
			font-size: 20px;
		}

			.reparti .blocco .stato.allarme
			{
				color: red;
			}

			.reparti .blocco .stato.regolare
			{
				color: green;
			}
/*FINE REPARTI*/
/*REPARTO*/
.reparto
{
	width: 100%;
	min-width: 300px;
	height: 100%;
	float: left;
	text-align: center;
	padding: 10px 5px;
	font-size: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	box-sizing: border-box;
	padding-bottom: 30px;
}

	.reparto .bloccone
	{
		display: inline-block;
		width: 280px;
		height: 190px;
		box-sizing: border-box;
		margin: 10px;
		overflow: hidden;
		padding: 10px;
	}

	.reparto .blocco
	{
		display: block;
		text-align: center;
		border-width: 2px;
		border-style: solid;
		border-radius: 30px;
		border-color: #000;
		padding: 10px;
		width: 270px;
		height: 170px;
		box-sizing: border-box;
		position: relative;
		background-color: #f9f9f9;
	}

	.reparto .cerchio
	{
		position: absolute;
		width: 40px;
		height: 40px;
		line-height: 33px;
		border: 5px solid white;
		border-radius: 25px;
		top: -13px;
		left: -13px;
		z-index: 98;
		box-sizing: border-box;
		text-align: center;
		color: white;
		font-size: 16px;
	}

	.reparto .blocco.selected
	{
		/*box-shadow: 4px 4px 8px rgba(0,0,0,0.4) inset;*/
		cursor: default;
	}

	.reparto .blocco.allarme
	{
		border: 1px solid red;
		box-sizing: border-box;
	}

	.reparto .blocco .titolo
	{
		font-size: 24px;
		box-sizing: border-box;
	}

	.reparto .blocco.selected .titolo
	{
		font-weight: bold;
	}

	.reparto .blocco .ultima
	{
		font-size: 20px;
		margin: 5px 0;
		box-sizing: border-box;
	}

	.reparto .blocco .stato
	{
		margin: 5px 0;
		font-size: 20px;
		font-style: italic;
		box-sizing: border-box;
	}

	.reparto .blocco .produzione
	{
		margin-top: 5px;
		width: 100%;
		height: 40px;
		position: relative;
		border-top: 1px solid #aaa;
		overflow: hidden;
		box-sizing: border-box;
	}

		.reparto .blocco .produzione .prodtesto
		{
			width: 100%;
			height: 20px;
			line-height: 20px;
			position: absolute;
			top: 5px;
			left: 0;
			font-size: 14px;
		}

			.reparto .blocco .produzione .prodtesto div
			{
				float: left;
				width: 33.333%;
			}

				.reparto .blocco .produzione .prodtesto div:first-child
				{
					text-align: left;
				}

				.reparto .blocco .produzione .prodtesto div:last-child
				{
					text-align: right;
				}

		.reparto .blocco .produzione .prodcur
		{
			height: 6px;
			position: absolute;
			left: 0;
			bottom: 5px;
			background-color: dodgerblue;
		}

		.reparto .blocco .produzione .prodtot
		{
			width: 100%;
			height: 6px;
			position: absolute;
			right: 0;
			bottom: 5px;
			background-color: #ddd;
		}

		.reparto .blocco .produzione .prodcursor
		{
			width: 4px;
			height: 14px;
			position: absolute;
			left: 0;
			bottom: 1px;
			background-color: dodgerblue;
		}
/*/REPARTO*/
/*PLC*/
.plc
{
	box-sizing: border-box;
	text-align: center;
	float: left;
	overflow: auto;
	width: 100%;
	padding: 10px;
}

	.plc .modo, .reparti .modo, .reparto .modo
	{
		padding: 10px;
		margin: 10px auto 20px auto;
		border: 1px solid #666;
		border-radius: 20px;
		text-align: center;
		border-bottom: 1px solid #333;
		font-size: 24px;
		font-weight: bold;
		box-sizing: border-box;
		background-color: white;
		position: relative;
	}

		.plc .modo div i
		{
			text-decoration: none;
			font-style: normal;
		}

		.plc .modo span
		{
			cursor: pointer;
			color: blue;
			width: 90px;
			height: 20px;
			line-height: 20px;
			display: inline-block;
			position: relative;
			margin-top: 4px;
		}

	.plc .stato
	{
		font-size: 24px;
		margin-top: 10px;
	}

		.plc .stato.allarme
		{
			color: red;
		}

		.plc .stato.regolare
		{
			color: green;
		}

	.plc .tabvar, .lettura
	{
		background-color: #fff;
		margin: 20px auto 0 auto;
		border-collapse: collapse;
	}

		.plc .tabvar th, .lettura th, .plc .tabvar td, .lettura td
		{
			border: 1px solid #ccc;
			padding: 5px;
		}

		.plc .tabvar th, .lettura th
		{
			background-color: #ddd;
		}

			.lettura th.hc
			{
				background-color: #6ab342 !important;
				color: #000 !important;
				font-size: 18px;
				text-align: center;
			}

		.plc .tabvar .allarme
		{
			color: red;
		}

		.plc .tabvar .regolare
		{
			color: green;
		}
/*/PLC*/
/*MACCHINA*/
.macchina
{
	text-align: center;
}
.macchina.box_ricerca
{
	padding:3px!important;
}
	.macchina .aggior
	{
		position: absolute;
		left: 10px;
		top: 14px;
		width: 150px;
		text-align: left;
		font-style: italic;
	}

	.macchina .intestazione
	{
		margin: 0px auto;
		box-sizing: border-box;
		text-align: center;
		overflow: hidden;
	}

	.macchina span
	{
		display: inline-block;
		margin: 0 10px;
	}

	.macchina .titolo
	{
		font-size: 24px;
	}

	.macchina .ultima
	{
		font-size: 16px;
		color: #666;
		margin: 5px auto;
	}

	.macchina .cerchio
	{
		display: inline-block;
		width: 36px;
		height: 36px;
		line-height: 38px;
		border-radius: 25px;
		box-sizing: border-box;
		text-align: center;
		color: white;
		font-size: 19px;
		margin: 0px 0;
	}
	.cerchio.on
	{
		background-color:blue;
	}
	.cerchio.off
	{
		background-color:grey;
	}
/*MENU MACCHINA*/
.menu_macchina
{
	position: absolute;
	width: 170px;
	top: 10px;
	right: 10px;
}

	.menu_macchina span input
	{
		display: none;
	}

	.menu_macchina span, .menu_macchina a
	{
		display: inline-block;
		margin: 0 5px;
	}

		.menu_macchina span label, .menu_macchina a
		{
			font-size: 20px;
		}

			.menu_macchina span:hover label, .menu_macchina a:hover
			{
				color: red;
				cursor: pointer;
			}
/*/MENU MACCHINA*/
.varlist td
{
	padding: 5px 10px;
	border-bottom: 1px solid white;
}

	.varlist td:not(:last-child)
	{
		border-right: 1px solid white;
	}

.varlist ul
{
	text-indent: 0;
	margin: 0 0 0 20px;
	padding: 0;
}

.gesturno
{
	display: inline-block;
	width: 120px;
	height: 25px;
	line-height: 25px;
	border: 1px solid blue;
	color: blue;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	border-radius: 10px;
	background-color: #efefef;
	cursor: pointer;
	padding: 0px;
	text-decoration: none;
}

	.gesturno:hover
	{
		background-color: blue;
		color: white;
	}
/*ACCESSO*/
.colonna_accesso
{
	width: 250px;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
	text-align: center;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 20px;
}

	.colonna_accesso input[type=text], .colonna_accesso input[type=password]
	{
		border: none;
		width: 100%;
		height: 30px;
		font-size: 16px;
		text-align: center;
		margin: 10px 0;
		border: 1px solid #ccc;
		border-radius: 10px;
	}

	.colonna_accesso input[type=submit]
	{
		border: none;
		width: 100%;
		height: 40px;
		font-size: 18px;
		text-align: center;
		cursor: pointer;
		margin: 10px 0;
		border: 1px solid #ccc;
		border-radius: 10px;
	}

		.colonna_accesso input[type=submit]:hover
		{
			background-color: #666;
			color: #eee;
		}

	.colonna_accesso .box_logo
	{
		margin: 0 0 10px 0;
		width: 100%;
		height: 200px;
		box-sizing: border-box;
		background-color: #fff;
		background-image: url('/img/logo.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
/*/ACCESSO*/
/*PANNELLO GIUSTIFICATIVO ALLARME*/
.allarme_pn
{
	background-color: white;
	border: 5px solid #333;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
	width: 300px;
	height: 400px;
	border-radius: 20px;
	position: relative;
}

	.allarme_pn b
	{
		display: block;
		text-align: center;
		font-size: 22px;
		margin: 10px 0;
	}

	.allarme_pn ul li a
	{
		display: block;
		margin: 10px 0;
		font-size: 18px;
	}

	.allarme_pn .intestazione
	{
		display: block;
		margin: 10px 0;
		font-size: 20px;
		text-align: center;
		line-height: 22px;
		white-space: nowrap;
	}

	.allarme_pn .chiudi
	{
		position: absolute;
		display: block;
		top: 0px;
		right: 0px;
		background-color: red;
		text-align: center;
		line-height: 30px;
		height: 30px;
		width: 30px;
		font-size: 30px;
		color: white;
		font-weight: bold;
	}

		.allarme_pn .chiudi:hover
		{
			color: #ccc;
			background-color: brown;
		}
/*/PANNELLO GIUSTIFICATIVO ALLARME*/
.btn_centro
{
	display: block;
	width: 320px;
	height: 40px;
	line-height: 40px;
	margin: 20px auto;
	border: 1px solid #666;
	background-color: #bbb;
	color: #000;
	text-align: center;
	padding: 0;
	border-radius: 20px;
	font-weight: bold;
	font-size: 20px;
}

	.btn_centro:hover
	{
		border: 1px solid #000;
		background-color: #666;
		color: #fff;
	}