.tree li {
  margin: 0px 0;
    list-style-type: none;
  position: relative;
  padding: 5px 5px 0px 5px;
}
.tree li::before{
  content: '';
  position: absolute; 
  top: 0;
  width: 1px; 
  height: 100%;
  right: auto; 
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}
.tree li::after{
  content: '';
  position: absolute; 
  top: 20px; 
  width: 25px; 
  right: auto; 
  left: -20px;
  border-top: 1px solid #ccc;
}
.tree li a{
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after{
  border: 0;
}

/*Remove connectors after last child*/
.tree li::after,
.tree li:last-child::before{ 
  height: 20px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
  /* background: #c8e4f8; color: #000; border: 1px solid #94a0b4; */
  background: #D7ECCE;
  color: #2B543B;
  border: 1px solid #F0AD4E;

}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
  border-color:  #94a0b4;
}

.tree li a.folder-open:before {
  padding:0 1px;
  font-family: 'Glyphicons Halflings';
  content:"\e118";
}

.tree li a.leaf:before {
  padding:0 1px;
  font-family: 'Glyphicons Halflings';
  content:"\e103";
}

.tree li a.piggy-bank:before {
  padding:0 1px;
  font-family: 'Glyphicons Halflings';
  content:"\e225";
}

.tree li a.question-sign:before {
  padding: 0 1px;
  font-family: 'Glyphicons Halflings';
  content:"\e085";
}

.tree span.badge.badge-success {
  background-color: #468847;
  border: 1px solid #999;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  line-height: 1.2em;
  padding: 1px 5px 3px 5px;
  text-decoration: none;
  webkit-transition: color .2s ease .1s,background-color .2s ease .1s,border-color .3s ease .2s;
  moz-transition: color .2s ease .1s,background-color .2s ease .1s,border-color .3s ease .2s;
  o-transition: color .2s ease .1s,background-color .2s ease .1s,border-color .3s ease .2s;
  transition: color .2s ease .1s,background-color .2s ease .1s,border-color .3s ease .2s;
}

.tree li span.badge:focus,
.tree li span.badge:hover {
  background-color: #D7ECCE;
  color: #2B543B;
  border: 1px solid #F0AD4E;
}