/* ********** CLASS DEFINITION ********** */
.header {
	width: 100%;
	height: 100%;
	background: #5c5c5c url(../img/header_background.png);
	box-shadow: 0 0 4px 2px rgba(0, 0, 0, .4);
	color: #fff;
	display:inline-block;
	vertical-align: middle;
}
.main {
	display:inline-block;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(LightGray, white);
}

.separator {
	display:inline;
	float: left;
}
.logo {
	height: calc(20% + .5vw);
	width:  calc(18% + .5vw);
}

.black {
	color: black
}

.red {
	color: red;
	border: solid 1px red;
}
.center {
	vertical-align: middle;
	text-align: center;
}

.menu {
	display:inline-block;	
	vertical-align: middle;
	float: right;
	margin-right: 5%;
	font-size: calc(12px + .5vw);
}
.menu ul {
	list-style: none;
	padding: 0;
}
.menu ul li {
	color: #f7f7f7;
	border-right: 1px solid #737373;
	padding: 0;
	float: left;
	position: relative;
}
.menu ul li:hover {
	color: #ffffff;
	background-color: #737373
}
.menu ul li:hover>ul {
	display: block
}
.menu ul li ul {
	display: none;
	position: absolute;
	background: #f5f5f5;
}
.menu ul li ul li {
	color: #737373;
	background: 0 0;
	border: none;
	margin: 0;
	padding: 0;
	width: 200px
}
.menu ul li ul li:first-child {
	border-left: none
}
.menu ul li ul li a {
	color: #737373
}
.menu ul li ul li a:hover {
	color: #ffffff;
	background-color: #737373
}
.menu a {
	padding: 6px 10px;
	display: block;
	cursor: pointer;
	text-decoration: none;
	color: #fff
}

/* ********** SINGLE ID DEFINITION ********** */
#separator, #eol_custom {
	width: 100px;
	text-align: center;
}

#table_conf, th, td {
	max-width: 100%;
	border: 1px solid black;
	padding: 8px;
	margin-left: 1%; 
	margin-top: 1%;
}


/* ********** ELEMENT DEFINITION ********** */
section {
	margin-left: 1%; 
	margin-top: 1.5%;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
button {
	margin: 8px;
}
th {
	vertical-align: middle;
}
td {
	margin: 8px;
	vertical-align: middle;
}
/* Firefox */
input[type=number] {
	width: 100px;
	text-align: center;
}
input[type=radio] {
	margin: 8px;
	background-color: #737373 
}

/* ********** MEDIA DEFINITION ********** */
@media only screen and (max-device-width : 400px) {
	#table_conf {
		white-space: nowrap;
		overflow-x: auto;
        display: block;
	}
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN8rsOX-hpOqc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN8rsOVuhpOqc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN8rsOXuhpOqc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN8rsOUehpOqc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN8rsOXehpOqc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN8rsOXOhpOqc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url(/fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN8rsOUuhp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
	
/* ********** TESTING TEST ********** */
/*
	element.class					=> ELEMENT + CLASS DEFINITION
	*				 				=> ALL ELEMENTS
	element1, element2, elementEtc	=> multiple element, same definition
	
	priority:
		1. Inline style (inside an HTML element)
		2. External and internal style sheets (in the head section) [cascade order, last => least]
		3. Browser default
	
	colors:
		BLACK: 			#000000
		MENO BLACK: 	#3c3c3c
		GRIGIO SCURO: 	#787878
		GRIGIO SCURO: 	#b4b4b4
		QUASI BIANCO:	#f0f0f0
		BIANCO:			#ffffff

	colors sfiziosi:
		Tomato
		Orange
		DodgerBlue
		MediumSeaGreen
		Gray
		SlateBlue
		Violet
		LightGray
	
	https://fonts.google.com/
	font base:
		font-family: Arial, Helvetica, sans-serif;
		font-family: 'Trebuchet MS', sans-serif
	font cinese:
		<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@700&display=swap" rel="stylesheet">
		font-family: 'Noto Sans HK', sans-serif;
	font arabo:
		<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap" rel="stylesheet">
		font-family: 'Cairo', sans-serif;
	font indiano:
		<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@500&display=swap" rel="stylesheet">
		font-family: 'Hind Siliguri', sans-serif;
	font greco:
		<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
		font-family: 'Roboto', sans-serif;
*/