#tree_menu_cnt
{
	display: flex;
}

div.tree,
div.tree ul {
  list-style:none;
  margin:0;
  padding:0;
}

div.tree ul {
  /*margin-left:10px;*/ /* indentation */
  position:relative;
}

div.tree > ul:first-child:before {
	top: 18px;
}

div.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

div.tree li {
  margin:0;
  padding:0 12px; /* indentation + 2 */
  font-size:15px;
  line-height: 3em;
  color:#369;
  font-weight:bold;
  position:relative;
}

.mobile div.tree li
{
  line-height: 1.5em;
}

div.tree ul li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px solid;
  position:absolute;
  top:10px;
  left:0;
}

div.tree ul li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:10px; /* (line-height/2) */
  bottom:0;
}

div.tree
{
	position: relative;
	margin: auto;
}

div.tree li > div > ul > li > div > ul
{
	margin-left: 20px !important;
}

div.tree li > div > ul li
{
	padding: 5px 10px;
}

.mobile div.tree li > div > ul li
{
	padding: 5px 30px;
}

div.tree li div
{
	/*padding-right: 3px;*/
}

div.tree li.opened > div > ul,
div.tree li.selected > div > ul
{
	display: block;
}

/*=====  EXT ======*/
div.tree ul:before,
div.tree ul li:before
{
	border: 0 !important;
	position: relative;
}

div.tree > ul > li
{
	/*border-bottom: 1px solid #A7A5A6;*/
	float: left;
	text-align: center;
} 
div.tree > ul > li > *
{
	text-align: left;
} 

div.tree > ul > li,
div.tree > ul > li.selected 
{
	padding: 13px;
} 

div.tree li.selected ul
{
	/*margin-top: 12px;*/
}

div.tree > ul li:first-child
{
	/*border-top: 1px solid #A7A5A6;*/
}

div.tree > ul li:last-child
{
	border: 0 !important;
}

div.tree > ul li div a
{
	/*color: #eeeeee;*/
	color: #000;
	font-weight: normal;
}

div.tree > ul li ul div
{
	min-width: 200px;
}

div.tree > ul li ul div a
{
	color: #002432;
}

@media(max-width:768px)
{
.menu_visible .tree > ul li a
{
	color: #54595f;
	font-weight: normal;
}
}


div.tree li.opened > div > a,
div.tree li.selected > div > a
{
	font-weight: bold;
}

div.tree ul li.selected.home,
div.tree ul li.selected.formazione
{
	/*background: url("/gfx/orange.jpg") no-repeat -36px 0;*/
}

div.tree ul li.selected.albo,
div.tree ul li.selected.aggiornamenti,
div.tree ul li.selected.trasparenza
{
	/*background: url("/gfx/black.jpg") no-repeat -36px 0;*/
}

div.tree ul li.selected.ordine
{
	/*background: url("/gfx/blue.jpg") no-repeat -36px 0;*/
}

div.tree ul li.selected.infonews
{
	/*background: url("/gfx/green.jpg") no-repeat -36px 0;*/
}

div.tree ul li.selected.professione
{
	/*background: url("/gfx/red.jpg") no-repeat -36px 0;*/
}

div.tree .home a,
div.tree .formazione a
{
	/*color: #f9a65e;*/
}

div.tree .formazione > div,
div.tree .trasparenza > div
{
}

div.tree .albo a,
div.tree .aggiornamenti a
{
}

div.tree .ordine a
{
	/*color: #35539e;*/
}

div.tree .professione a
{
	/*color: #cb5757;*/
}

div.tree .infonews a
{
	/*color: #57cb80;*/
}

div.tree .first_li
{
	min-height: 50px;
}

div.tree div > li.selected
{
	padding-left: 0;
	padding-bottom: 0;
} 

div.tree li.selected > li
{
	background-color: #EEE;
} 
/*
div.tree li.selected > div
{
	text-indent: 20px;
}

div.tree li.selected > div div
{
	text-indent: 0;
	padding-left: 10px;
}
*/
@media(max-width:767px)
{
	div.tree > ul > li.first_li
	{
		padding: 5px 10px 2px 10px!important;
		min-height: 0;
	}

	div.tree > ul > li
	{
		padding: 2px 10px !important;
		clear: both;
		position: relative;
	} 
}

@media(min-width:768px)
{
	div.tree li > div > ul
	{
		position: absolute;
		overflow: hidden;
		height: 0;
		opacity: 0;
		transition: height 0ms 400ms, opacity 400ms 0ms;
	}
	div.tree li.xxx > div > ul,
	div.tree li > div.open > ul,
	div.tree li > div:hover > ul
	{
		margin-left: 5px;
		padding: 10px 15px 20px 15px;
		position: absolute;
		overflow: visible;
		background-color: white;/*#d8d6d7;*/
		border: 1px solid #A7A5A6;
		z-index: 1000;
		min-width: 200px;
		height: auto;
		opacity: 1;
		transition: height 0ms 0ms, opacity 600ms 0ms;
	}
	div.tree > ul > li,
	div.tree > ul > li.selected 
	{
		padding: 4px 25px;
		font-size: 20px;
	} 
}

@media(max-width:991px)
{
	div.tree > ul > li,
	div.tree > ul > li.selected 
	{
		padding: 4px 20px;
	} 
}

@media(min-width:992px)
{
	div.tree li > div > ul
	{
		position: absolute;
		overflow: hidden;
		height: 0;
		opacity: 0;
		transition: height 0ms 400ms, opacity 400ms 0ms;
	}
	div.tree li.xxx > div > ul,
	div.tree li > div.open > ul,
	div.tree li > div:hover > ul
	{
		margin-left: 5px;
		padding: 10px 15px 20px 15px;
		position: absolute;
		overflow: visible;
		background-color: white;/*#d8d6d7;*/
		border: 1px solid #A7A5A6;
		z-index: 1000;
		min-width: 200px;
		height: auto;
		opacity: 1;
		transition: height 0ms 0ms, opacity 600ms 0ms;
	}
}

@media(min-width:1200px)
{
	div.tree li > div > ul
	{
		position: absolute;
		overflow: hidden;
		height: 0;
		opacity: 0;
		transition: height 0ms 400ms, opacity 400ms 0ms;
	}
	div.tree li.xxx > div > ul,
	div.tree li > div.open > ul,
	div.tree li > div:hover > ul
	{
		margin-left: 5px;
		padding: 10px 15px 20px 15px;
		position: absolute;
		overflow: visible;
		background-color: white;/*#d8d6d7;*/
		border: 1px solid #A7A5A6;
		z-index: 1000;
		min-width: 200px;
		height: auto;
		opacity: 1;
		transition: height 0ms 0ms, opacity 600ms 0ms;
	}
}

