/* ============ desktop view ============ */
@media all and (min-width: 992px) {

	.dropdown-menu li{
		position: relative;
	}
	.dropdown-menu .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.dropdown-menu .submenu-left{ 
		right:100%; left:auto;
	}

	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {

.dropdown-menu .dropdown-menu{
		margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}

}	
/* ============ small devices .end// ============ */

.dropdown-item {
  padding : 0.25rem 0.5rem;
}
/* ============ icone colorate delle voci di primo livello ============ */
/* L'icona sta nello stesso <a> dell'etichetta: senza nowrap il testo va a capo
   sotto l'icona quando la voce e' stretta ("Home" lo faceva). */
.navbar-nav > .nav-item > .nav-link {
  white-space: nowrap;
}
.menu-ico {
  margin-right: 0.4em;
  vertical-align: -0.08em;   /* allinea l'occhio dell'icona alla base del testo */
  font-size: 1.05em;
}

/* ============ larghezza delle voci a tendina ============ */
/* 10rem e' il minimo di Bootstrap: le etichette lunghe (le sezioni di CEM) ci
   andavano a capo tre volte. */
.dropdown-menu {
  min-width : 12rem;
}
/* Sul desktop la tendina si allarga sulle sue etichette fino a 22rem: un menu di voci brevi
   resta compatto, uno di voci lunghe le tiene su una riga finche' ci stanno, e il sottomenu
   diventa molto piu' basso (le voci di CEM andavano a capo tre volte). La posizione dentro
   lo schermo la corregge navbar.multilevel.js all'apertura. */
@media all and (min-width: 992px) {
  .dropdown-menu {
    width     : max-content;
    max-width : min(22rem, calc(100vw - 1rem));
  }
}

/* ============ freccia del sottomenu ============ */
/* La freccia sta in un <b class="float-end"> dopo l'etichetta: un float si mette
   sulla riga in cui cade, quindi con l'etichetta su piu' righe scendeva in fondo.
   Il flex la tiene a metà altezza e a destra; le voci senza freccia non cambiano
   aspetto, perche' con un solo figlio space-between non ha nulla da distribuire. */
.dropdown-menu .dropdown-item,
.dropdown-menu .nav-link {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 0.5rem;
  white-space     : normal;   /* l'etichetta va a capo dentro la sua colonna */
}
.dropdown-menu .dropdown-item > .float-end,
.dropdown-menu .nav-link > .float-end {
  float       : none !important;   /* dentro il flex il float non serve piu' */
  flex        : 0 0 auto;
  margin-left : auto;
}