/********************
Level 1
********************/

/*** ESSENTIAL STYLES ***/
.menu-container {
	position: relative;
	background-color: black;
}

.sf-ul-container {
	width: 100%;
	height: 100%;
	background-color: cyan;
	position:absolute;
	left: 0px;
	top: 120px;
}

.sf-menu,
.sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Allineamento centrato */
.sf-menu ul {
	position: absolute;
	left: 0px;
	top: 60px;
/*width:			10em;*/ /* left offset of submenus need to match (see below) */
}

.sf-menu ul li {
	width: 100%;
}

.sf-menu li.sfHover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li {
	float: left;
	position: relative;
}

.sf-menu a {
	display: block;
	position: relative;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	/*left:			32%; per centrare il sottomenu*/
	/*left: 220px;*/
/*	width:100%;   */
	top: 139px; /* match top ul list item height */
	z-index: 99;
}

.sf-menu li:hover li ul,
.sf-menu li.sfHover li ul {
	top: -999em;
}

.sf-menu li li:hover ul,
.sf-menu li li.sfHover ul {
	left: 106px; /* match ul width */
	top: 0;
}

.sf-menu li li:hover li ul,
.sf-menu li li.sfHover li ul {
	top: -999em;
}

.sf-menu li li li:hover ul,
.sf-menu li li li.sfHover ul {
	left: 106px;  /* match ul width */
	top: 0;
}



/*** DEMO SKIN ***/
.sf-menu {
	margin: 0px 0px;
}

.sf-menu a {
	border-left: 1px solid transparent;
	border-top: 1px solid transparent;
	/*padding: 		.75em 1em;  */
	text-decoration: none;
}

.sf-menu a,
.sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
}


.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:hover {
	outline: 0;
}

.sf-menu a:focus,
.sf-menu a:active {
	background: none;
	height: 32px;
	outline: 0 none;
}


/*** arrows **/
.sf-menu > li {
	height: 100px;
	min-width: 1px !important; /* trigger IE7 hasLayout so spans position accurately */
}

.sf-menu > li > a,
.sf-menu .sf-submenu > li > a {
	height: 100% !important;
	min-width: 1px !important; /* trigger IE7 hasLayout so spans position accurately */
}

.sf-menu li ul.sf-submenu > li > a {
/*	margin-right: 15px;    */
}

.sf-menu .sf-submenu {
	border: 1px solid #888888;
	padding-bottom: 1px;
	box-shadow: 2px 2px 5px 1px #707070;
}

.sf-sub-indicator {
	position: absolute;
	display: block;
	right: 4px;
	top: 1.05em; /* IE6 only */
	width: 12px;
	height: 12px;
	text-indent: -999em;
	overflow: hidden;
	background: url( '../img/custom/menu/arrow.png' ) no-repeat; /* 8-bit indexed alpha png. IE6 gets solid image only */

	/*display: none;  */
}

.sf-menu > li > a > .sf-sub-indicator {
	top: auto;
	bottom: 2px;
	left: 50%;
	margin-left: -5px;
	display: none;
}

a > .sf-sub-indicator {             /* give all except IE6 the correct values */
	top: .8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-image: url( '../img/custom/menu/arrow_active.png' );
}

/*** point all arrows down ***/
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator {
	background-position: -10px 0px;
}

/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-image: url( '../img/custom/menu/arrow_active.png' );
}

.sf-menu ul a > .sf-sub-indicator {
	background-position: 0px 0px;
}

.sf-menu li.empty .sf-sub-indicator {
	display: none;
}


/*** NAVBAR => adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
/*
.sf-menu li {
	height: 100px;
	margin: 0 5px 0 5px;
	position: static;
	width: 96px;
}

.sf-menu>li {
	display: block;
	float: left;
}

.sf-menu a {
	border-top: none;
}

.sf-menu li li {
	background: #transparent;
	position: relative;
}

.sf-menu li li ul {
	width: 13em;
}

.sf-menu li li li {
	width: 100%;
}

.sf-menu ul > li {
	float: left;
	height: 40px;
	width: 200px;
}

.sf-menu a,
.sf-menu a:visited {
	border: none;
}

.sf-menu li.current {
	background: #BDD2FF;
}

.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu li li.current,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active {
}

.sf-menu ul li:hover,
.sf-menu ul li.sfHover,
.sf-menu ul li:hover li,
.sf-menu ul li.sfHover li,
.sf-menu ul a:focus,
.sf-menu ul a:hover,
.sf-menu ul a:active {
	background: #transparent;
}

.sf-menu li li li:hover,
.sf-menu li li li.sfHover,
.sf-menu li li.current li.current,
.sf-menu ul li li a:focus,
.sf-menu ul li li a:hover,
.sf-menu ul li li a:active {
	background: #E6EEFF;
}

.sf-menu .current ul,
.sf-menu ul li:hover ul,
.sf-menu ul li.sfHover ul {
	left: 0;
	top: 2.5em;
}

.sf-menu .current ul ul {
	top: -999em;
}

.sf-menu li li.current>a {
	font-weight: bold;
}
/**/


/* Personalizzazioni per menu orizzontale */
.sf-menu .ul-container {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 50px;
	width: 100%;
}

.sf-menu li {
	cursor: default;
}

.sf-menu li .menu-button-border-center {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.sf-menu > li > a .menu-button-container  {
	width: 100%;
	height: 100%;
}

.sf-menu > li > a .menu-button-border-center  {
	width: 100%;
}

.sf-menu > li ul.sf-submenu li .menu-button-container {
	margin-right: 15px;
}

.sf-menu > li {
	width: 96px;
	height: 100px;
	padding: 5px;
	border-top: 2px solid transparent;
	background-image: url( ../img/custom/menu/btn_frame_active.png );
}
.sf-menu > li.sfHover {
	background-image: url( ../img/custom/menu/btn_frame_hover.png );
}
.sf-menu > li.sfSelected {
	background-image: url( ../img/custom/menu/btn_frame_click.png );
}

.sf-menu > li.sfHover,
.sf-menu > li.sfHover > ul {
	background-color: gray;
}

.sf-menu > li.sfSelected,
.sf-menu > li.sfSelected > ul  {
	background-color: transparent;
}

.sf-menu .sf-submenu li {
	background-color: black;
}

.sf-menu > li > a .menu-button-border-center {
	position: absolute;
	top: 76px;
	left: 0px;
	width: 100%;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	background-color: transparent;
	color: gray;
}

.sf-menu > li .sf-submenu .menu-button-border-center {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 28px;
	margin-right: 5px;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	color: cyan;
}


/*** SUB-MENU ***/
.sf-menu ul.sf-submenu > li {
	height: 30px;
}

.sf-menu ul.sf-submenu > li.menuseparator {
	height: 1px;
	background-color: gray;
}

.sf-menu ul.sf-submenu > li.menutitle {
	font-weight: bold;
	background-color: red;
}

.sf-menu ul.sf-submenu a {
}
.sf-menu > li > ul.sf-submenu > li.sfHover > a {
}
.sf-menu > li > ul.sf-submenu > li.sfSelected > a {
}

/* SUB-SUBMENU */
.sf-menu > li > ul.sf-submenu ul.sf-submenu > li a {
}
.sf-menu > li > ul.sf-submenu ul.sf-submenu > li.sfHover a {
}
.sf-menu > li > ul.sf-submenu ul.sf-submenu > li.sfSelected a {
}


/* RESPONSIVE */
/* Sotto i 980px di larghezza nascondo il menu grande e faccio apparire il menu a hamburger */
@media (max-width: 980px) {

	/* menu grnade */
	#menu-list-container {
		display: none;
	}

	/* menu hamburger */
	#hamburger-menu-container {
		display: flex;
	}
}


/* MENU HAMBURGER */

/* bottone hamburger */
.hamburger-menu-button-container {
	display: none;
	height: 100%;
}

.hamburger-menu-button-container > .hamburger-button {
	margin: 15px;
}

.hamburger-menu-button-container > .hamburger-button >.hamburger-button-icon {
	font-size: large;
}

/* div che appare e scompare che contiene i link */
.menu-hamburger-list-container {
	background-color: lightgrey;
	height: 100%;
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 60px;
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* bottone per chiudere il menu */
.menu-hamburger-list-container > .closebtn {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 26px;
	margin-left: 50px;
	color: black;
}

.menu-hamburger-list-container > .closebtn:hover {
	text-decoration: none;
	color: dimgrey;
}

/* voci del menu */
.menu-hamburger-list-content {
	text-align: left;
}

.menu-hamburger-list-content ul {
	padding: 0;
	list-style-type: none;
}

.menu-hamburger-list-li a:hover {
	text-decoration: none;
}


/* fare l'override di queste classi per sistemare la grafica delle voci del menu */

/* classe comune a tutte le voci */
.menu-list-text-container-common {
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	color: dimgrey;
	font-size: larger;
	background-color: #CCCCCC;
}

.menu-list-text-container-common:hover {
	background-color: #DBDBDB;
	color: black;
}

/* voci che non hanno un link */
.menu-list-container-empty {
	color: black;
	background-color: dimgrey;
}

.menu-list-container-empty:hover {
	color: black;
	background-color: dimgrey;
}

/* voci che con link di profondità 0 */
/*
 *	per voci piu profonde sostituire 0 con il numero della profondità della voce:
 * 	esempio .menu-list-text-container-1 è la voce che sta sotto .menu-list-text-container-0
 */
.menu-list-text-container-0 {
	color: black;
	background-color: darkgray;
}

.menu-list-text-container-0:hover {
background-color: #474747;
color: lightgrey;
}



/********************
Level 2
********************/

/* POSIZIONAMENTI */
.menu-container {
	height: 77px;
	background-repeat: repeat-x;
}

.sf-menu {
	padding-top: 0px;
	height: 100%;
}

.sf-menu ul {
	top: 75px;
}

.sf-menu a {
/*	border-top: 1px solid #fff;   */
	border: 0;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	top: 75px;
	height: 30px;
}

.sf-menu li li:hover ul,
.sf-menu li li.sfHover ul {
	left: 105px;
}

.sf-menu li {
	margin: 0px;
	height: 75px;
	background-repeat: no-repeat;
	background-position: center;
}

.sf-menu > li {
	width: 106px;
	padding: 0px;
	border: 0;
	background-image:none;
}

.sf-menu > li > a {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.sf-menu .sf-submenu {
	border-color: #1C6282;
	box-shadow: none;
	padding: 0;
}

.sf-menu .sf-submenu > li {
	float: none;
	display: block;
	min-width: 104px;
	width: inherit;
}

.menu-hamburger-list-container > .closebtn {
	color: #fff !important;
}

.menu-hamburger-list-container {
	background-color: #18bc9c;
	font-size: 12px !important;
}

.menu-list-text-container-0 {
	color: white;
	background-color: #18bc9c;
	padding: 14px 10px !important;
	font-weight: bold !important;
}

.menu-list-text-container-1 {
	color: #18bc9c;
	padding: 12px 14px !important;
	background-color: white;
	font-weight: bold !important;
}

.menu-list-text-container-2 {
	color: #18bc9c;
	padding: 10px 16px !important;
	background-color: white;
}

.menu-list-text-container-3 {
	color: black;
	padding: 8px 18px !important;
	background-color: white;
}

.sf-menu .sf-submenu > li > a {
	height: 100%;
}

.sf-menu .sf-submenu .sf-submenu > li {
	padding: 0px;
	margin: 0px;
}

.sf-menu > li > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico.png );
	background-position: center 10px;
	background-repeat: no-repeat;
}

.sf-menu ul.sf-submenu > li.menuseparator {
	height: 0px;
	background-color: #1C6282;
	border-bottom: 1px solid #1C6282;
}

.sf-sub-indicator {
	background: url( '../img/custom/menu/arrow_active.png' ) no-repeat; /* 8-bit indexed alpha png. IE6 gets solid image only */
}

/* COLORI */
.menu-container {
	background-color: #2583AE;
}

.sf-menu .sf-submenu li {
	background-color: transparent;
}

.sf-menu > li.sfHover,
.sf-menu > li.sfHover > ul {
	background-color: transparent;
}
.sf-menu > li.sfSelected {
	background-image: url("../img/custom/menu/btn_frame_click.png");
}
.sf-menu > li.sfSelected,
.sf-menu > li.sfSelected > ul  {
	background-color: #1A4F8E !important;
}

.sf-menu > li.sfSelected > ul {
 border-bottom: 1px solid #1A4F8E !important;
}

.sf-menu > li > a .menu-button-border-center {
	top: 56px;
	font-size: 11px;
	font-weight: bold;
	color: #666666;
}

.sf-menu > li .sf-submenu .menu-button-border-center {
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
}

.sf-menu > li ul.sf-submenu li .menu-button-container {
	display: table;
	width: 100%;
}
.sf-menu > li ul.sf-submenu li .menu-button-border-center {
	display: table-row;
}
.sf-menu > li ul.sf-submenu li .menu-button-border-center {
	margin: 0px;
	line-height: normal;
	color: #FFFFFF;
	display: table-cell;
	height: 100%;
	width:100%;
	vertical-align: middle;
	text-align: left;
	padding: 2px 5px;
}

.sf-menu .sf-submenu > li .menu-button-container {
	height: 100%;
	padding: 0px;
}

.sf-menu .sf-submenu > li .menu-button-border-center {
	height: 100%;
}



.sf-menu > li > a .menu-button-border-center {
	color: #FFFFFF;
}
.sf-menu > li.sfHover > a .menu-button-border-center,
.sf-menu > li.sfSelected > a .menu-button-border-center {
	color: #FFFFFF;
}



.sf-menu li ul.sf-submenu > li > a {
	background-color: #2583AE;
	color: #FFFFFF;
}
.sf-menu li ul.sf-submenu > li.sfSelected > a {
	background-color: #18bc9c;
	color: #FFFFFF;
}
.sf-menu li ul.sf-submenu > li.sfHover > a {
	background-color: #18bc9c;
	color: #FFFFFF;
}

.sf-menu li ul.sf-submenu > li > a .menu-button-border-center {
	color: inherit;
}
.sf-menu li ul.sf-submenu > li.sfHover > a .menu-button-border-center {
	color: inherit;
}
.sf-menu li ul.sf-submenu > li.sfSelected > a .menu-button-border-center {
	color: inherit;
}


.hamburger-button {
	background-color: #036399;
	padding: 10px;
	border: none;
	background: none;
}

.hamburger-button-icon {
	color: #fff;
}

 /* VOCI MENU */
.sf-menu > li.btn_home > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_home.png );
	
}
.sf-menu > li.btn_configurazione > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_configurazione.png );
	
}
.sf-menu > li.btn_punti_contesto > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_quote.png );
}
.sf-menu > li.btn_codici > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_qr.png );
}
.sf-menu > li.btn_sale > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_sala.png );
}
.sf-menu > li.btn_percorsi > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_percorso.png );
}
.sf-menu > li.btn_agenda > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_agenda.png );
}
.sf-menu > li.btn_compila > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_admin.png );
}
.sf-menu > li.btn_trouble_ticket > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_trouble_ticket.png );
}
.sf-menu > li.btn_offerte > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_offerte.png );
}
.sf-menu > li.btn_gestione > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_tabelle.png );
}
.sf-menu > li.btn_impianti > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_impianti.png );
}
.sf-menu > li.btn_verbali > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_verbali.png );
}
.sf-menu > li.btn_tabelle > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_tabelle.png );
}
.sf-menu > li.btn_provvigioni > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_provvigioni.png );
}
.sf-menu > li.btn_cataloghi > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_cataloghi.png );
}
.sf-menu > li.btn_fatturazione > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_fatturazione.png );
}
.sf-menu > li.btn_documenti > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_verbali.png );
}
.sf-menu > li.btn_admin > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_admin.png );
}
.sf-menu > li.btn_rubrica > a > .menu-button-container {
	background-image: url( ../img/custom/menu/btn_ico_rubrica.png );
}


/********************
Level 3
********************/

:root {
	--main-color: #aa0000;
	--secondary-color: #6e0000;
}

.sf-menu li ul.sf-submenu > li > a {
	background-color: #a0a0a0;

}
.sf-menu li ul.sf-submenu > li.sfSelected > a {
	background-color: #8f8383;
}

.sf-menu .sf-submenu {
	border-color: #ffffff;
	padding: 0;
	box-shadow: 0px 4px 8px 2px #e4e4e4;

}
.sf-menu ul.sf-submenu > li.menuseparator {
	height: 0px;
	background-color: #BBBBBB;
	border-bottom: 1px solid #ffffff;
	
}

.sf-menu > li.sfSelected,
.sf-menu > li.sfSelected > ul  {
	background-color: var(--secondary-color) !important;
}

.sfHover {
	background-image: url("../img/custom/menu/btn_frame_hover.png");
}

.sfSelected { background: var(--secondary-color) !important }

.sfHover {
	background-image:none !important;
	background-color: var(--secondary-color) !important
}

.menu-hamburger-list-container {
	background-color: var(--main-color);
	font-size: 12px !important;
}

.menu-list-text-container-0 {
	background-color: var(--main-color);
}

.menu-list-text-container-1 {
	color: var(--main-color);
}

.menu-list-text-container-2 {
	color: var(--main-color);
}

.sf-menu li ul.sf-submenu > li.sfSelected > a {
	background-color: var(--main-color) !important;
}

.sf-menu li ul.sf-submenu > li.sfHover > a {
	background-color: var(--main-color);
}