.tree, .tree ul{
    font: normal normal 14px/20px sans-serif,Helvetica, Arial;
    list-style-type: none;
    margin: 0 0 0 10px;
    padding: 0;
    position: relative;
    overflow:hidden;
}

.tree li{
    margin: 3px 0;
    padding: 0 12px;
    position: relative;
}

.tree li::before, .tree li::after{
    content: '';
    position: absolute;
    left: 0;
}

/* horizontal line on inner list items */
.tree li::before{
    border-top: 1px solid #999;
    top: 10px;
    width: 10px;
    height: 0;
}

/* vertical line on list items */
.tree li:after{
    border-left: 1px solid #999;
    height: 100%;
    width: 0px;
    top: -10px;
}

/* lower line on list items from the first level because they don't have parents */
.tree > li::after{
    top: 10px;
}

/* hide line from the last of the first level list items */
.tree > li:last-child::after{
    display: none;
}


.tree ul:last-child li:last-child:after{
    height:20px;
}