ul.tree {
    padding: 10px;
    overflow-x: auto;
    height: 300px;
}
.tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid
}
.tree li {

    line-height:2em;
    color: #050506;
    font-weight:500;
    position:relative;
    cursor:pointer;
}
.tree li.maincat:hover {
    border-radius: 5px;
    color: #ff9822 !important;
}
.tree ul li:before {
    content: "";
    display: block;
    width: 10px;
    height: 0;
    border-top: 1px solid;
    margin-top: -1px;
    position: absolute;
    top: 1em;
    left: 0;
    margin-left: -17px;
}
ul.sub-menu li {
    margin-left: 18px;
}
.tree ul li:last-child:before {
    background:#fff;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
.tree li a {
    text-decoration: none;
    color:#888ea8;
}
.tree li a:hover {
    color: #ff9822;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color: #ff9822;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}