/* ###################################################################################### */
/* ### STILI PER UN GRID LAYOUT ######################################################### */
/* ###################################################################################### */
:root {
    --main-bg-color: #9cf; 
}
body {
	margin: 0;
	padding: 0;
}html, body {
	height: 100%;
}
.grid_container {
	min-height: 100%;
	display: grid;
	grid-template-columns: 160px 1fr 160px;
	grid-template-rows: min-content min-content min-content auto min-content;
	grid-template-areas: 
		"a a a"
		"b b b"
		"c c c"
		"s e f"
		"g g g";
	font-family: verdana,helvetica,arial,sans-serif;
	font-size: 76%;
	background-color:#fff;
	color: #36C;
}
.grid_container_m {
	min-height: 100%;
	display: grid;
	grid-template-columns: none none none;
	grid-template-rows: min-content min-content min-content min-content auto min-content;
	grid-template-areas: 
		"a a a"
		"b b b"
		"c c c"
		"e e e"
		"x x x"
		"g g g";
	font-family: verdana,helvetica,arial,sans-serif;
	font-size: 76%;
	background-color:#fff;
	color: #36C;
}
/* ###################################################################################### */
/* ### CAMPI ############################################################################ */
/* ###################################################################################### */

/* ### DUMMY ### */
.dummy {
	grid-area:		x;
	background-color:	var(--main-bg-color);
}
/* ### HEADER ### */
.header {
	grid-area: a;
	display: flex;
	background-color:#def;
}
.logo {
	padding-left:	20px;
	padding-right:	20px;
	padding-top:	5px;
	padding-bottom:	5px;
}
.hostName {
	padding-top:	5px;
	padding-bottom: 5px;
	padding-left:	0px;
	padding-right:	10px;
	margin-top:	auto;
	margin-bottom:	auto;
	margin-left:	0px;
	margin-right:	auto;
	width:		120px;
	font-size:	20px;
	font-weight:	bold;
}
.scorre {
	width:		100%;
	max-width:	100%;
	margin-top:	auto;
	margin-bottom:	auto;
	margin-left:	0px;
	margin-right:	20px;
	font-size:	1.6em;
}
/* ### BARRA DI NAVIGAZIONE ### */
.navBar {
	grid-area: b;
	display:inline;
	border: 5px #36C;
	border-style: solid none solid none;
	background-color:#9cf;
}
.navBar ul {
	margin: 0;
	list-style: none;
	text-align: right;	
}
.navBar li {
	display:inline;
}
.navBar li a { 
	color:#369;
	font-size: 1.2em;
	font-weight: bold;
}.navBar li a:hover {
	color:#def;
}
.navBar .item1,
.navBar .item1:hover,
.navBar .item1-active,
.navBar .item1-active:hover {
	padding: 5px;
}
.navBar .item2,
.navBar .item2:hover,
.navBar .item2-active,
.navBar .item2-active:hover {
	padding: 5px 8px 4px 8px;
	display: block;
	white-space: nowrap;
	position: relative;
	z-index: 1;

	width: 12em;
	text-align: left;
	font-size: 1em;
	border-bottom: 2px solid #36c;
	border-right: 2px solid #36c;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	background-color:#69f;
	color:#369;
}
.navBar .item2:hover,
.navBar .item2-active,
.navBar .item2-active:hover {
	background-color:#369;
	color:#69f;
}
.navBar .arrow {
	padding: 5px 8px 4px 8px;
}
.navBar .item2 img,
.navBar .item2-active img{
	position: absolute;
	top: 8px;
	right: 1px;
	border: 0;
}
.navBar .item3,
.navBar .item3:hover,
.navBar .item3-active,
.navBar .item3-active:hover {
	position: absolute;
	top: -12px;
	right: 2px;

	padding: 5px 8px 4px 8px;
	display: block;
	white-space: nowrap;
	position: relative;
	z-index: 2;

	width: 4em;
	text-align: left;
	font-size: 1em;
	border-bottom: 2px solid #36c;
	border-right: 2px solid #36c;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	background-color:#69f;
	color:#369;
}
.navBar .item3:hover,
.navBar .item3-active,
.navBar .item3-active:hover {
	background-color:#369;
	color:#69f;
}
.navBar .arrow {
	padding: 5px 8px 4px 8px;
}
.navBar .item3 img,
.navBar .item3-active img{
	position: absolute;
	top: 8px;
	right: 1px;
	border: 0;
}
.navBar .section {
	border: 1px solid #b8b4ae;
	position: absolute;
	visibility: hidden;
	z-index: -1;
}
/* ### LOCALIZZAZIONE ### */
.locbar {
	grid-area: c;
	display: flex;
	border-top:1px dotted;
	border-bottom:1px dotted;
	font-weight: bold;
	background-color:#36C; 
	color: #ff0;
}
.locbar a {
	border-bottom-style:none;
	background:transparent;
	color:#ff0;
}
.locbar a:hover, #locbar a:active { 
	color:#fff; 
}
/* ### SIDEBAR ### */
.sidebar {
	grid-area: s;
	border: 5px #36C;
	border-style: solid none none none;
	background-color: #69c;
}
/* ### ICON ### */
.XXXXXicon {					// DA CANCELLARE (anche nei css locali che lo definiscono)?
	border: 5px #36C;
	border-style: solid none none none;
	background-color: #69c;
}
.scrooge {
	width: 90%;
	height: auto;
}
.smile {
	width: 90%;
	height: auto;
}
/* ### NAVIGATION ### */
.navigation {
	background-color: #69c;
	padding: 0px 5% 0px 5%;
	font-weight: bold;
}
.navigation ul {
	margin: 0;
	padding: 0; 
	list-style-type: none;
	border-style: none;
}
.navigation li {
	margin: 0;
	padding: 0;
}
.navigation li.titolo {
	padding: 10px; 
	color: #ff0; 
	font-size: 1.2em;
	font-weight: bold;
}
.navigation li a {
	display: block;
	width: 90%;
	border-bottom: 2px solid #36c; 
	border-right: 2px solid #36c; 
	border-left: 1px solid #fff; 
	border-top: 1px solid #fff; 
	padding: 5px
}
.navigation a:link {
	background-color:#69f;
	color:#369;
}
.navigation a:visited {
	background-color:#69f;
	color:#369;
}
.navigation a:hover {
	background-color:#369;
	color: #69f;
}
/* ### CONTENT ### */
.content {
	grid-area: e;
	border: 5px #36C;
	border-style: solid none none none;
	background-color: var(--main-bg-color);
}

/* ### EXTRA ### */
.extra {
	grid-area: f;
	border: 5px #36C;
	border-style: solid none none none;
	background-color: #69c;
	padding: 20px 5% 0px 5%;
	font-weight: bold;
}
/* ### FOOTER ### */
.footer {
	grid-area: g;
	background-color: #69c;
	color: #def;
	font-weight: bold;
	text-align:center;
	padding: 3px 0px 3px 0px;
}
.footer a {
	color: #ff0;
	font-weight: bold;
}
.footer a:hover {
	color: #fff;
	text-decoration: underline
}
/* ### STILE x SIDE BAR OVERLAY		### */
.sidenav {							/* The side navigation menu								*/
	height:		auto;
	width:			0;				/* 0 width - change this with JavaScript						*/
	position:		fixed;				/* Stay in place									*/
	z-index:		1;				/* Stay on top										*/
	left:			0;
	top:			0;				/* Stay at the top									*/
	bottom:		0;
	overflow-y:		scroll;
	background-size:	0 0;				/* Elimina lo sfondo									*/
	overflow-x:		hidden;			/* Disable horizontal scroll								*/
	transition:		0.5s;				/* 0.5 second transition effect to slide in the sidenav				*/
	border-radius:		15px;
}
.dropdown {							/* Dropdown container - needed to position the dropdown container			*/
	float:			left;
	overflow:		hidden;
}
.dropdown-container {						/* Dropdown container									*/
								/* Optional: add a lighter background color and some left padding to change the design */
	display:		none;				/* Hidden by default									*/
	background-color:	inherit;
	padding-left:		50px;
	font-size:		50px;
	color:			#369;	
}
.dropdown:hover {						/* Add a dark background on sidenav links and the dropdown button on hover		*/
	background-color:	#369;
	color:			#69f;
}
.dropdown:hover
.dropdown-content {						/* Show the dropdown menu when the user moves the mouse over the dropdown button */
	display: block;
}
.dropdown-btn,							/* The dropdown button									*/
.sidenav a {							/* The navigation menu links								*/
	display:		block;
	transition:		0.3s;
	width:			100%;
	text-align:		left;
	background-color:	#69c;				/* Lo stesso colore di "Navigation"							*/
	padding:		8px 8px 8px 32px;
	border-bottom:		4px solid #36c; 
	border-right:		4px solid #36c; 
	border-left:		2px solid #fff; 
	border-top:		2px solid #fff;
	text-decoration:	none;
	font-size:		50px;
	color:			#369;				/* Lo stesso colore di "Navigation"							*/
	border-radius:		15px;
}
.active,							/* Add an active class to the active dropdown button */
.dropdown-btn:hover,
.sidenav a:hover {						/* When you mouse over the navigation links						*/
	background-color:	#369;
	color:			#69f;
}
.fa-caret-down {						/* Optional: Style the caret down icon						*/
	float:			right;
	padding-right:		20px;
}
.logoBank {							/* Style the bank logo									*/	
	width:			70%;  
	height:		auto;  
}
@media screen and (max-height: 450px) {			/* On smaller screens (height less than 450px) change the style of the sidenav	*/
	.sidenav {
		padding-top: 15px;				/* Less padding									*/
	}
	.sidenav a {
		font-size: 18px;				/* Smaller font size									*/
	}
}
#main {							/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
	transition:		margin-left .5s;
	padding:		20px;
}


/* ###################################################################################### */
/* ### FORMATTAZIONI #################################################################### */
/* ###################################################################################### */

/* ### TITOLI ### */
h1 {
	text-align: center;
	font-weight: bold;
	font-size: 1.70em;
	color: #369;
}
h2 {
	text-align: justify;
	font-size: 1.25em;
}
h3 {
	font-size: 1em;
}
h4,h5,h6 {
	text-align: justify;
	font-size: 1em;
}
acronym {
	cursor: help;
	border-bottom: 1px
	dashed #900;
}
img {
	border: 0;
}
a {
	border-bottom-style: none;
	background:transparent;
	text-decoration:none;
}
ul {
	list-style-type: square;
}
.hide {
	display:none;
}