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

}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-right:1em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    /*border-left:1px solid*/
}
.tree li {
 width: max-content;
    margin:0;
    padding:0 2em;
    line-height:2em;
    color:#369;
    font-weight:700;
    position:relative
}
.tree li> *{
      display: list-item;
}

.tree ul li:last-child:before {
   /* background:#fff;
    height:auto;
    top:1em;
    bottom:0*/
}

.indicator {
    margin-left:5px;
}
.rtl .indicator {
     margin-left:0px !important;
    margin-right:5px;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0;
    padding:0;
    outline: 0;
}

.tree li a {
	text-decoration: none;
	text-align:rightl;
	font-size:10px;
    display: table;
    border: solid 0.5px #aaadb0;
	background-color:#fff;
	
    margin: 10px;
    padding: 0px 35px 0px 20px;
    border-radius: 5px;
	-webkit-box-shadow: 0px 0px 10px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px -6px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px -6px rgba(0,0,0,0.75);
	position:relative;
	overflow:hidden;
	}
	.tree li a h5 {
	color:#4a4a4a;
	font-size:14px;
	}
      .ltr  .tree li:after {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 20px;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    
        content:"\f0da";
        
        display:block;
        text-align: -webkit-center;

        padding-top: 0px;
        position:absolute;
        top:.4em;
        left:1em
    
    }
	.rtl .tree li:before {
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
		font-size: 20px;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	
		content:"\f0d9";
		
		display:block;
		text-align: -webkit-center;

        padding-top: 0px;
		position:absolute;
		top:.4em;
		right:1em
	
	}
	.glyphicon-chevron-right{content:"\f0d9";}
	.glyphicon-chevron-down{content:"\f0d9";}
.tree li .icon{
	padding: 5px;
	border: solid #e6eaee 1px;
	margin: 0 -2px 0 20px;
	border-radius: 100px;
	color:#000;
	}
  .rtl .tree li .icon{
   
    margin: 0 20px 0 -2px;
   
    }
.tree.subControl{display:none !important;}

.tree a:hover .subControl {
	display:inline-block !important;
	}
	/*
.tree a:hover h5:before {
        
            content: " : ";
            display: block;
            color: #fff;
            padding: 10px;
            height: 100%;
            width: 2px;
            background-color: #f00;
            position: absolute;
            top:0;
            right: 0;
    }
*/
.tree.subControl{width:auto;float:inherit;}

.tree a h5{display:inline-table !important;}


.tree li a, .tree li a:active, .tree li a:focus {
	
	}

.rootChildren a .IsIcon,
.hasChildren a .IsIcon ,
.noChildren a .IsIcon
 {
 
            color: #fff;
            padding: 10px 6px 10px 7px;
            height: 100%;
            width: 2px;
            position: absolute;
            top:0;
            left: 0;
   }

.rtl .rootChildren a .IsIcon,
.rtl .hasChildren a .IsIcon ,
.rtl .noChildren a .IsIcon
 {

            padding: 10px 7px 10px 6px;
             right: 0;
 }

	.rootChildren a .IsIcon{
		background-color: #0162a7;
		
		 }
	.hasChildren a .IsIcon {

            background-color: #3e9fb2;
            
    }
	.noChildren  a .IsIcon {

            background-color: #feb500;

    }