#menu {
	position: 		relative; 
	display: 		table-cell; 
	width: 			15%; 
	min-width: 		120px; 
	font-weight:	bold;
}

#menu p {
	line-height:	1.5em; 
	text-align: 	left; 
	margin: 		2% 0.5% 2% 2%;
}

/* ======== PULSANTI ======== */

/*PULSANTI "Accesso Staff" E "Vai alla produzione"*/
.sezionemenu {
    background-color:#015196;  /* stato normale */
    color: 			#FFFFFF;
    border: 		none;
    border-radius: 	0;
    font-family: 	Verdana, sans-serif;
    font-size: 		16px;
    font-weight: 	normal;
    padding: 		8px 0;    
    box-sizing: 	border-box;
    white-space: 	nowrap;
    min-width: 		360px;
    margin-bottom: 	10px;
    cursor: 	 	pointer;   
}

/* HOVER DEL PULSANTE INTERO */
.sezionemenu:hover {
    background-color: #D4EBFF;
    color: 			  #015196;
}

/* ACTIVE / SELECTED */
.sezionemenu.selected,
.sezionemenu.active,
.sezionemenu:active {
    background-color: #D4EBFF;
    color: 			  #015196;
}

/* LINK: NON deve interferire con hover */
.sezionemenu a:link,
.sezionemenu a:visited,
.sezionemenu a:hover,
.sezionemenu a:active {
    color: 			 inherit;
    text-decoration: none;
    display: 		 block;
    cursor: 		 pointer;
}

.sezionemenu a {
    display: 		flex;
    align-items: 	center;
    padding-left: 	20px;
}

/* CAMBIO ICONA SUL PULSANTE (NON sul link) */
.sezionemenu:hover .icon-normal {
    display: 		none;
}

.sezionemenu:hover .icon-hover {
    display: 		inline-block;
}


/* ======== ICONE ======== */

.sez-staff a {
    display: 		flex;
    align-items: 	center;
    justify-content:flex-start;
    padding-left: 	80px; 				/*distanza icona e testo dal bordo sinistro*/
}

/* dimensione icone */
.sez-staff img {
    width: 			20px; 				/*larghezza icone*/
    height: 		20px;				/*altezza icone*/
    margin-right: 	15px;  				/*distanza del testo dall'icona*/
    transform: 		translate(0px, 2px);/*posizione dell'icona*/
}

/* stato normale */
.sez-staff .icon-hover {
    display: 		none;	 
}

.vocimenu {
	margin-bottom: 	2em; 
	font-size: 		75%;
}

.vocimenu a {
	display: 		block; 
	color: 			#015196; 
	padding: 		0.5em; 
	border-bottom: 	1px solid #D2DEE4; 
	text-decoration:none;
}

.vocimenu a:hover {
	text-decoration: underline; 
}

#collaborazioni {
	white-space: 	nowrap; 
	text-overflow: 	ellipsis; 
	overflow: 		hidden; 
	margin-top: 	15px;
}

#listacollaborazioni {
	overflow: 		hidden;
}

.logo_collaborazione {
	display: 		block; 
	padding-top: 	1em; 
	padding-left: 	0.5em;
}

/* ======== MENU LATERALE ======== */

/* Contenitore principale unico */
.menu_main {
  position: 		relative; 
  display: 			table-cell; 
  width: 			19%; 
  min-width: 		180px; 
  font-family: 		Verdana, sans-serif;
  border-left: 		none; 
  border-right: 	none;  
}

/* Elementi di testo nativi (p) */
.menu_main p {
  margin: 			0;
  padding: 			0;
}

/* Voci menu di primo livello (titoli sezioni) */
.menu-toggle {
  width: 			100%;
  display: 			flex;
  justify-content: 	flex-start; 
  align-items: 		center;  
  background: 		#F4FAFF;   
  color: 			#01294C;   
  padding: 			16px 15px; 
  font-size: 		16px;
  font-weight: 		normal;  
  border: 			none;
  border-top: 		1px solid rgba(0, 0, 0, 0.1);
  cursor: 			pointer;
  text-align: 		left;
  box-sizing: 		border-box;
  font-family: 		inherit;
}

/* Personalizzazione colori titoli (modificati con il nuovo colore testo) */
.menu_main .sezione      { background: #F4FAFF; color: #01294C; }
.menu_main .sezione_rn   { background: #F4FAFF; color: #01294C; }
.menu_main .sezione_tf   { background: #F4FAFF; color: #01294C; }
.menu_main .sezione_ocse { background: #F4FAFF; color: #01294C; }
.menu_main .sezione_iea  { background: #F4FAFF; color: #01294C; }

/* Gestione hover sui titoli */
.menu-toggle:hover {
  background-color: #D4EBFF;
}

/* Creazione della freccetta (css pure) */
.arrow {
  display: 			inline-block;
  margin-left: 		10px;   
  width: 			5px;
  height: 			5px;  
  border-right: 	2px solid #01294C;
  border-bottom: 	2px solid #01294C;  
  transform: 		rotate(45deg); 
  margin-top: 		-3px; 
}

/* Contenitore scomparsa (ex bordo) */
.menu-content {
  max-height: 		0; 
  overflow: 		hidden;
  background-color: #DBEDF7;  
  opacity: 			0; 
  visibility: 		hidden;
  transition: 
					max-height 0.3s ease-in-out, 
					opacity 0.3s ease-in-out, 
					visibility 0.3s;
}

/* Quando la sezione è attiva, mostra le voci e attiva il fade-in */
.menu-section.active .menu-content {
  max-height: 		500px; 
  opacity: 			1;
  visibility: 		visible;
}

/* Pulsanti di secondo livello (sottosezioni) */
.menu_main [class^="sottosezione_titolo"] {
  display: 			block;
  padding: 			10px 15px;
  font-size: 		14px;
  font-weight: 		normal;  
  color: 			#01294C;
  background-color: #EBF3F9;
  border-bottom: 	1px solid #e1e6eb;
}

/* Singole voci del menu */
.menu_main .vocimenu {
  width: 			auto; 
  display: 			block; 
  border-bottom: 	none; 
  margin: 			0 	!important;  				/* forza l'azzeramento di qualsiasi margine esterno del div */
  padding: 			0 	!important; 				/* forza l'azzeramento di qualsiasi padding del div */
}

.menu_main .vocimenu a {  
  display: 			block;  						/* trasforma il link in un blocco solido che occupa il 100% dello spazio disponibile */
  width: 			100%;
  box-sizing: 		border-box;   
  padding: 			15px 15px 15px 30px;   			/* spostiamo tutto lo spazio e l'altezza dentro il link (Padding simmetrico 15px sopra e sotto) */
  color: 			#01294C; 
  text-decoration: 	none;
  font-size: 		16px;
  font-family: 		Verdana, sans-serif;
  font-weight: 		normal;
  line-height: 		1.4;   
  background-color: #DBEDF7;						/* sfondo predefinito del sottomenu */ 
  transition: 		background-color 0.15s ease;  
  margin: 			0 	!important; 				/* annulla margini interni/esterni residui ereditati dal browser */
}

/* Se la voce appartiene a un sotto-menu avanzato (classe .indentato) */
.menu_main .vocimenu.indentato a {
  padding-left: 	45px;
  background-color: #DBEDF7;  
}

/* Effetto hover standard */
.menu_main .vocimenu a:hover {
  background-color: #D4EBFF !important; 
}

/* Voce selezionata (pagina corrente) */
.menu_main .vocimenu.corrente a {
  background-color: #015196 !important;				/* per evitare che lo sfondo si spezzi, coloriamo direttamente il tag <a> */ 
  color: 			#FFFFFF !important;				/* che si trova dentro il div .corrente, garantendo la copertura totale della cella */
}

/* Hover quando la voce è già selezionata ed è blu */
.menu_main .vocimenu.corrente a:hover {
  background-color: #013C70 !important;
  color: 			#FFFFFF !important;
}

/* Stile per il padre cliccabile selezionato (senza figli) */
.menu_main .menu-toggle.padre-corrente {
  background-color: #015196 !important;
  color: 			#FFFFFF !important;
}

.menu-spazio-iniziale {
    margin-top:		-25px;
}

/*======== MENU PER DISPOSITIVI MOBILI: MENU HAMBURGER ======== */
.menu-spazio-iniziale {
    margin-top:		0;
} 
	
.menu-mobile-toggle{
    display:		none;
    align-items:	center;
    gap:			12px;
    padding:		12px 15px;
    cursor:			pointer;
    background:		#F4FAFF;
    border:			1px solid #dcdcdc;
    color:			#01294C;
    font-family:	Verdana,sans-serif;
    font-size:		18px;
    font-weight:	bold;
    box-sizing:		border-box;
}

/* Contenitore delle tre linee */
.hamburger-icon{
    display:		flex;
    flex-direction:	column;
    justify-content:center;
}

/* Linee */
.hamburger-icon span{
    display:		block;
    width:			36px;      				/* larghezza */
    height:			4px;      				/* spessore */
    margin:			4px 0;
    background:		#01294C;
    border-radius:	2px;
}

/* Scritta "Menu" */
.hamburger-text{
    font-size:		20px;
    letter-spacing:	1px;
}

/* MOBILE */
@media screen and (max-width:1000px){ 		/*risoluzione dello schermo dopo la quae parte il menu-mobile*/

    .menu-mobile-toggle {
        display:	flex;			
    }

    .menu_main {
		display:	block 	!important;
		width:		100% 	!important;
		min-width:	0 		!important;
		max-height:	0;
		overflow:	hidden;
		transition:	max-height .35s ease;
	}

	.menu_main.menu-open {
		max-height:3000px;
	}

    /* Titoli principali del menu */
    .menu-toggle {
        font-size:	30px;
    }

    /* Titoli delle sottosezioni */
    .menu_main [class^="sottosezione_titolo"] {
        font-size:	30px;
    }

    /* Voci del menu */
    .menu_main .vocimenu a {
        font-size:	30px;
    }
	
	/* Menu in alto*/
	#menu-principale a {
		font-size: 	28px;
	
	}
	
	#menu-principale .submenu a {
		font-size: 	28px;
	}
	
	#menu-principale li a {
		padding: 	12px 28px;
	}
	/* Sottomenu tendina */
	#menu-principale .submenu {
		width: 		max-content;
		min-width: 	100%;
	}

	#menu-principale .submenu li {
		width: 		100%;
	}

	#menu-principale .submenu a {
		display: 	block;
		white-space:nowrap;
		padding: 	10px 20px;
	}
	
	#menu-principale .submenu li a {
		padding-top: 25px;
		padding-bottom:25px;
	}
	
    #contenuti {
		font-size: 	120%;
	}

	#contenuti .intestazione {
		font-size: 	1.22em;
	}

	#contenuti .form {
		font-size: 	1.4em;
	}

	#contenuti button,
	#contenuti input,
	#contenuti select {
		font-size: 	1.05em;
	}

	#contenuti .discrizione {
		font-size: 	1.05em;
	}
	
	/* Icona Invasi e Titolo*/
	#logo_invalsi {
		width: 		90px;
		height: 	auto;
	} 

	#titolo span {
		font-size: 	28px;
	}
	
	/* Accessibilità testo area notizie */
	.news-slider {
		font-size: 	130%;
	}

	.news-slider .badge {
		font-weight:bold;
		font-size: 	130%;
	}

	.news-slider .title {
		line-height:1.4;
		font-size: 	130%;
	}
	
	
}