
#main {
	width: 80%;
	margin: 0 auto;
	/* border: solid 2px lightgray; */
}


h1{
	text-align:center;
	color:#000000;
	font-size:1.2em;
	padding: 20px;
	text-shadow: 1px 1px 1px WhiteSmoke;
	margin: 0 auto;
	background-color: #c1c1c1;
	box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	-webkit-box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	-moz-box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	-o-box-shadow:0px 20px 20px 0px #f1f1f1 inset;
}

h2{
	text-align:center;
	color:#fff;
	font-size:1em;
	/* text-shadow: 1px 2px 2px WhiteSmoke; */
	margin: 0 auto;
	padding: 10px;
}


h3{
	text-align:center;
	color:#fff;
	font-size:1em;
	padding: 10px;
}
h3 a{text-decoration:none;}
h4{
	text-align:center;
	color:#000000;
	font-size:0.8em;
	text-shadow: 1px 1px 1px WhiteSmoke;
	margin: 0 auto;
	padding: 1%;
	/* background-color: #c1c1c1;
	box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	-webkit-box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	-moz-box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	-o-box-shadow:0px 20px 20px 0px #f1f1f1 inset; */
}


.smoothie-legend{
	margin: 0 auto;
	color: #fff;
	align-content: center;
	text-align: center;
	width: 100%;
	background: #444;
	border: 1px solid #fff;
	border-radius: 0px 0px 8px 8px;
	-moz-border-radius: 0px 0px 8px 8px;
	-webkit-border-radius: 0px 0px 8px 8px;
	-o-border-radius: 0px 0px 8px 8px;
	}
.smoothie{
	margin: 2px auto;
	/* display: block; */
	/* padding: 20px; */
	/* border: 1px solid #fff; */
	border-radius: 0px 0px 8px 8px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	-o-border-radius: 8px 8px 0px 0px;
}

.content-gauge{
	z-index: 100;
	width: 100%;
	margin: 0 auto;
	background: #444;
	border: 1px solid #fff;
	border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	-o-border-radius: 8px 8px 0px 0px;
}

.gauge{
	float: left;
	width: 25%;
	height: 200px;
	/* display:table; */
}

.pdp{
	margin: 0 auto;
	border: 1px solid lightgrey;
	width: 80%;
	font-size: 0.8em;
}



.data-title{
	width: 80%;
	margin: 0 auto;
	background-color: #f0f0f0;
	background-color: #c1c1c1;
	box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	-webkit-box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	-moz-box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	-o-box-shadow:0px 20px 20px 0px #f1f1f1 inset;
	font-size:1.2em;
	line-height:30px;
}


.content-tables{
	border: solid 1px #fff;
	margin: 20px auto;
	background: #444;
	display: table;
	width:100%;
	padding:10px;
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	-o-border-radius: 8px 8px 8px 8px;
	font-size:1em;
}

.content-table1{
	float:left;
	width: 50%;
	padding: 5px;
}
.content-table2{
	float:right;
	width: 50%;
	padding: 5px;
}

.elenco-row{
	color:#fff;
	background: #333;
	height: 42px;
	margin:5px;
	width: 100%; 
	padding: 0px;
	border: 1px solid #999;
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	-o-border-radius: 8px 8px 8px 8px;
}
.elenco-col1{
	float:left; 
	color:#ccc;
	width: 59%;
	padding: 5px;
}
.elenco-col2{
	float: right;
	width: 40%;
	color:#fff; 
	padding:10px 5px;
	margin: 0px 0;
	text-align: right;
 }
.elenco-col2 label{
	font-size: 1.4em;
	text-align: right;
	font-weight: bold;
}
.red-txt{
	color:red;
}

.gray-txt{
	color:gray;	
}
.green-txt{
	color:green;
}
.cyan-txt{
	color: cyan;
}

	/*---------------- 
	PRODUZIONI prod.html
	----------------*/
#table1_div, #table2_div, #chart1_div, #chart2_div {
	font-size: 1.2em;
	border: 5px solid gray;
}
.filtro-cont{
	text-align:center;
	color:#fff;
	width: 100%;
	margin:0px auto;
}
.filtro-data1{
	display:inline-block;
	color:#fff;
	text-align: right;
	vertical-align: middle;
	padding: 0px 10px;
	margin:5px auto;
}
.filtro-data2{
	display:inline-block;
	color:#fff;
	vertical-align: middle;
	padding: 0px 10px;
	margin:5px auto;
}
.filtro-button{
	display:inline-block;
	text-align: end;
	vertical-align: middle;
	color:#fff;
	padding: 0px 0px;
	margin:5px auto;
}



	/*---------------- 
	Smarphone
	----------------*/
	@media (max-width: 767px){
		.gauge{height: 120px;}
		#main{width: 100%;}
		#main_div{width: 100%}
		#table1_div, #table2_div {font-size: 0.6em}
		.content-table1{width:100%;}
		.content-table2{width: 100%;}
		.filtro-data1, .filtro-data2{width: 40%;text-align: center;} 
		.filtro-button{display:block; width: 100%;text-align: center;}
	}

/* Login Area */
/*S7-1500 */

#Login_Area_Name_InputTag {
  /*Input field username*/
  width: 100px;
}

#Login_Area_PW_InputTag {
  /*Input field password*/
  width: 100px;
}

#Login_Area_SubmitButton {
  /*Button for login*/
  width: 80px;
}

.Logout_Button {
  /*Button for logout*/
  width: 100px;
}

#logout_user_name {
  /*div of username after login*/
  color:#fff;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

/*S7-1200 */

#username {
  /*Input field username*/
  width: 100px;
}

#password {
  /*Input field password*/
  width: 100px;
}

#loginButton {
  /*Button for login*/
  width: 80px;
}

.text {
  /*Button for logout*/
  width: 100px;
}

#loggedInUser {
  /*div of username after login*/
  color:#fff;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}
