/* @media only screen (min-width: 360px) and (max-width: 768px) { */
	/* --elements-width: 50% */
/* } */
/* @media only screen and (min-width: 769px) and (max-width: 1000px) { */
	/* --elements-width: 20% */
/* } */
/* @media only screen and (min-width: 1001px) and (max-width: 1200px) { */
	/* --elements-width: 10% */
/* } */
/* @media only screen and (min-width: 1201px) and (max-width: 1400px) { */
	/* --elements-width: 2% */
/* } */


:root 	{
			--sections-width:				900px;
			--img-width:					897px;
			--borders-color:				rgb(158, 158, 158);
			--sections-background-color:	white;
		}
body 	{
			white-space:		nowrap;
			text-shadow: 		0 0 1px rgba(0,0,0,0.1);
			font-size:			16px;
			font-family:		"Titillium Web", Helvetica, serif;
			/* background-color:	rgb(242, 242, 242); */
		} 
table	{
			border-collapse: 	collapse;
			text-align: 		center;
			table-layout:		fixed;
			margin-left:		auto;
			margin-right:		auto;
		}

td, th				{
						/* width:				var(--data-sections-detail-col-width); */
						border-style: 		solid;
						border-width: 		1px;
						border-color:		var(--borders-color);
						padding:			9px;
						vertical-align:		middle;
					}
tr					{
						height:				var(--data-sections-detail-row-height);
					}

.bold				{
						font-weight:		bold;
					}

.sez-info-color		{
						/* color:				rgb(255, 236, 129); */
					}
					
a 					{
						text-decoration: 	none;
					}
a:visited 			{
						color:				blue;
					}					
a:link 				{
						color:				blue;
					}
canvas				{
						margin-right: 		2px;
						padding: 			0px;
					}
div.hidden			{
						visibility:			hidden;
					}					

/* ------------- Intestazione ------------- */
.logo					{
							/* margin-top:		5%; */
							/* margin-bottom:	5%; */
							/* height:			30px; */
							max-width: 		90%;
							max-height: 	90%;
							vertical-align: middle;
							/* display: 		flex; /* remove extra space below image */ */
						}
div#page-header-cont-img{
						height: 			102px;
						width:				90%;
						border-width:		1px;
						border-style:		solid;
						text-align:			center;
						background-color:	#0066cc;
						display:			flex;
						justify-content:	space-between;
						margin-left:		auto;
						margin-right:		auto;
					}
div#page-header-cont-logo{
						width: 				45%;
						text-align: 		right;
						height: 			100px;
						line-height: 		100px;
						}
div#page-header-cont-comune{
						color: 				white;
						width: 				100%;
						margin-left:		1%;
						}
div#page-header-cont-comune2{
						position: 			relative;
						top: 				50%;
						transform: 			translate(0, -50%);
						text-align:			left;
						}
div#page-header-cont-comune-descr1{
						font-size:			200%;
						font-weight:		bold;
						margin-bottom: 		0.2em;
						}
div#page-header-cont-logo-elnist{
						width:				44%;
						position:			relative;
						top:				59%;
						transform:			translate(0%, 2%);
						text-align:			left;
						}
	div#page-header-img	{
							width:				var(--sections-width);
							margin-left:		auto;
							margin-right:		auto;
							border-style: 		none;
							border-color: 		var(--borders-color);
							padding-top:		5px;
						}
	img[src*="scroce."] {
							width:				var(--img-width);
							object-fit: 		contain;
							padding:			1px;
							border-style:		solid;
							border-width:		1px;
							border-color:		var(--borders-color);
						}
div.header-1-elez-princ { /* Nome giornata elettorale */
						font-size:			200%;
						font-weight:		bold;
						font-variant: 		small-caps;
						letter-spacing:		2px;
						/* color: 				#de0101; */
						color: 				#0066cc;
						-webkit-text-stroke: 1px rgb(2, 0, 118);						
						text-align:			center;
						/* background-color: 	white; */
						margin:				7px auto 7px auto;
						padding-bottom:		3px;
						width: 				var(--sections-width);
						/* border-style:		solid; */
						border-width:		1px;
					}
	div.header-riepilogo	{
								/* background-color:	rgb(255, 225, 186); */
								/* background:			#0066cc ; */
								padding-top:		5px;
								padding-bottom:		5px;
								margin-left:		auto;
								margin-right:		auto;
								text-align:			center;
								font-weight:		bold;
								/* color: 				rgb(66, 66, 66); */
								color: 				#0054a9;
								font-size:			140%;
							}
					

	div#header-elez 	{
							width:				var(--sections-width);
							margin-left:		auto;
							margin-right:		auto;
							padding-top:		8px;
							padding-bottom:		7px;
							color:				rgb(255, 51, 51);
							font-weight:		bold;
							font-size:			160%;
							font-variant: 		small-caps;
							letter-spacing:		2px;
							text-align:			center;
							-webkit-text-stroke: 1px rgb(102, 0, 0);
							background-color:	var(--sections-background-color);
							border-style:		solid;
							border-width:		1px;
							border-color:		var(--borders-color);
							border-bottom-style:none;
						}
	div#header2-elez	{
							width:				var(--sections-width);
							margin-left:		auto;
							margin-right:		auto;
							padding-bottom:		7px;
							background-color:	var(--sections-background-color);
							color:				rgb(155, 0, 0);
							margin-bottom:		3px;
							text-align:			center;
							font-size: 			130%;
							font-weight:		bold;
							border-style:		solid;
							border-width:		1px;
							border-color:		var(--borders-color);
							border-top-style:	none;
						}
	div#contenitore-sezioni-scrutinate
						{
							display:			flex;
							align-items: 		center;
							justify-content: 	center;
							font-size: 			90%;
							margin-bottom: 		6px;
							margin-top: 		6px;
						}
	div#riepilogo-header-sez-scrut{
							text-align:			center;
							padding-top:		4px;
							padding-bottom:		4px;
						}
	div#pulsante-riepilogo{
							margin-left:		10px;
							margin-right:		2px;
							border-color:		black;
							border-style:		solid;
							border-width:		1px;
							padding:			3px 3px 3px 3px;
							width:				60px;
							text-align:			center;
							background-color:	rgb(193, 221, 255);
						}
	div#pulsante-riepilogo:hover{
							border-color:		#0066cc;
							background-color: 	rgb(255, 255, 179);
						}
	div#dettagio-header-sez-scrut
						{
							/* ... */
						}
		div.dett-sez	{
								border-style:	solid;
								border-width:	1px;
								border-color:	black;
								float:			left;
								width:			20px;
								text-align:		center;
								margin-left:	1px;
								margin-right:	1px;
							}
		div.dett-sez-compl	{
								color:			blue;
								font-weight:	bold;
								background-color: rgb(225, 239, 255);
								padding:		3px;
							}
		div.dett-sez-compl:hover{
								border-color:	#0066cc;
								background-color: rgb(255, 255, 213);
							}
		div.dett-sez-non-compl	{
								color:			black;
								padding:		3px;
							}
		div#text-riepilogo	{
								margin-left:	auto;
								margin-right:	auto;
								width:			90%;
								background-color:	rgb(206, 206, 206);
								margin-bottom: 	4px;
								text-align:		center;
								padding-top:	6px;
								padding-bottom:	6px;
								letter-spacing:	2px;
								font-weight:	bold;
								border-style:	solid;
								border-width:	1px;
								border-color:	var(--borders-color);
							}
		div#contenitore-ordinamento{
								display: 		flex;
							}
		div#contenitore-ordinamento{
								display: 		flex;
							}
			div#ordinamento-testo{
								padding-left:	10px;
								padding-right:	3px;
							}
			div.ordinamento-opzioni{
								margin-left:	5px;
								margin-right:	5px;
								width:			70px;
								text-align:		center;
								border-color:	var(--borders-color);
								border-width:	1px;
								border-style:	solid;
								background-color:rgb(242, 250, 255);
							}
			div.ordinamento-opzioni-voti{
								/* ... */
							}
			div.ordinamento-opzioni-liste{
								/* ... */
							}
			div.ordinamento-opzioni-manif{
								/* ... */
							}
							

	/* ------------- Dettaglio dati ------------- */
		tr:hover td			{
								background-color:	white;
								color:				blue;
								border-width:	1px;
								border-color:	#0066cc;
								background-color: rgb(225, 239, 255);
							}
		.dettaglio_tab_inizio{
								width:			90%;
							}
		.dettaglio_tab_colonna1{
								width: 			25%;
								text-align: 	left;
								padding: 		3px;
							}
		.dettaglio_tab_colonna2{
								width: 			16%;
								text-align: 	left;
								padding: 		3px;
								/*text-align: 	center;*/
						}
		.dettaglio_tab_colonna3{
								width:			39%;
								padding: 		4px;
							}
		.dettaglio_tab_colonna4{
								width:			10%;
								font-weight: 	bold;
							}
		.dettaglio_tab_colonna5{
								width: 			10%;
							}
		.dettaglio_tad_img_liste{
								width:			2em;
								height:			2em;
							}
		div.grafico_voti	{
								height:			1.2em;
								border-style: 	solid;
								border-width: 	1px;
								border-color: 	rgb(200 200 200);
							}

		div.riga-data-wrapper{ /* Box contenitore ospita i dati di una certa lista per una certa elezione */
								border-style: 	solid;
								border-width: 	1px;
								border-color: 	var(--borders-color);
								display: 		flex;
								align-items: 	center;
								flex-grow: 		1;
								margin-bottom: -1px;
								width: 			var(--sections-width);
								margin-left: 	auto;
								margin-right: 	auto;
								background-color: white;
								opacity: 		1;
								/*height:			56px;*/
							}
		div.riga-overlay	{ /* Div per evidenziazione riga al passaggio del mouse */ 
								border-style: 	solid;
								display: 		flex;
								flex-grow: 		1;
								align-items: 	stretch;
								width: 			var(--sections-width);
								margin-left: 	auto;
								margin-right: 	auto;
							}
		body > div.riga-data-wrapper:nth-of-type(odd){
								/* ... */
							}
		body > div.riga-data-wrapper:nth-of-type(even){
								background: #f9f9f9;
							}
		tr:nth-child(even) {background: #f9f9f9;}
		tr:nth-child(odd) {background: white;}							


		div.riga-overlay:hover{
								border-width:	1px;
								border-color:	#0066cc;
								background-color: rgb(225, 239, 255);
								color:			blue;
							}

			div.elezs-candi-img	{ /* Contenitore immagine lista */
									width:				90px;
									text-align:			center;
									margin-left: 		3px;
									margin-right: 		3px;
									padding-top:		3px;
									padding-bottom:		3px;
									/* background-color:	yellow; */
									border-right-style:	solid;
									border-right-width:	1px;
									border-right-color: var(--borders-color);
								}
				img.elezs-candi-img-style	{
										width: 			50px;
										height:			50px;
											}
			div.elezs-cand-nominativo{
									width:				250px;
									margin-left: 		5px;
									margin-right: 		5px;
									line-height:		56px;
									text-align: 		left;
									border-right-style:	solid;
									border-right-width:	1px;
									border-right-color:	var(--borders-color);
									display:			flex;
									align-items:		center;
								}
			div.elezs-cand-liste_collegate{
									width:				250px;
									margin-left: 		5px;
									margin-right: 		5px;
									text-align: 		left;
									border-right-style:	solid;
									border-right-width:	1px;
									border-right-color:	var(--borders-color);
									display:			flex;
									align-items:		center;
									padding-top:		5px;
									padding-bottom:		5px;
								}
			div.cont-grafico		{
								display:			flex;
								justify-content: 	center;
								margin-left: 		auto;
								margin-right: 		auto;
								margin-bottom: 		0.2em;
								/* margin-top: 		1px; */
							}



	div.grafico-votanti		{
								border-style: 		solid;
								border-width: 		1px;
								/* border-color: 		#0066cc; */
								border-color: 		red;
								width:				90%;
								/* background:			linear-gradient(#65b2ff, #0066cc)  */
													/* left 2px top 50%  */
													/* / */
													/* 75% 80% */
													/* no-repeat; */
								padding-right:		2px;
								/* padding-left:		7px; */
							}


			div.elezs-cand-chart{ /* Contenitore grafico lista */
									position:			relative;
									border-width:		1px;
									border-color:		rgb(182, 182, 182);
									border-style:		solid;
									background-color:	rgb(245, 245, 245);

									/* line-height:		56px; */
									/* text-align: 		left; */

									height: 			27px;
									width: 				313px; /*396px;*/
									/* text-align:			center; */
									/* background-color:	red; */
									margin-right: 		10px;
									margin-top:			auto;
									margin-bottom:		auto;
								}
			div.elezs-candi-pvoti{ /* Contenitore percentuale voti lista */
									/*background-color:	#f6f6f6;*/
									width:				80px; /*50px;*/
									text-align:			right;
									border-left-style: 	solid;
									border-left-width: 	1px;
									border-color: 		var(--borders-color);
									padding-left:		20px;
									padding-right:		13px;
									font-weight:		bold;
									line-height: 		56px;
									/* background-color:	orange; */
									display:			flex;
									align-items:		center;
								}
			div.elezs-candi-tvoti{ /* Contenitore voti lista */
									/* background-color:	purple; */
									width:				10%; /*50px;*/
									text-align:			right;
									padding-right:		10px;
									/* line-height: 		56px; */
									/* background-color:	yellow; */
									border-left-style: 	solid;
									border-left-width: 	1px;
									border-left-color: 	var(--borders-color);									
									display:			flex;
									align-items:		center;
									padding-left: 		10px;
								}
	
	/* ------------- Footer riepilogo ------------- */
	div.riepilogo-dettaglio-footer{
							width:				var(--sections-width);
							margin-left:		auto;
							margin-right:		auto;
							margin-bottom:		10px;
							padding-top:		3px;
							padding-bottom:		3px;
							background-color:	rgb(206, 206, 206);
							display:			flex;
							justify-content: 	flex-start; /* Allineamento degli elementi del footer */
							font-size:			0.9em;
							border-style: 		solid;
							border-width: 		1px;
							border-color: 		var(--borders-color);									
						}
		div#riepilogo-footer-schede-title{
							margin-left:		10px;
							margin-right:		2px;
		}
		div#riepilogo-footer-schede-data{
							margin-left:		2px;
							margin-right:		10px;
		}
		div#riepilogo-footer-affl-title{
							margin-left:		10px;
							margin-right:		2px;
		}
		div#riepilogo-footer-affl-data{
							margin-left:		2px;
		}