.tree-js {
    padding-left: 20px;
}


.tree-js li {
    display: block;
    position: relative;
}


.node-state {
/*    width:9px;
    height:9px;
*/
    display:inline-block;
    cursor: pointer;
    left: -8px;
    top: 7px;
    width:16px;
    height:16px;
    background:#fff;
    border: 1px solid #7b7b7b;
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
}

.node-state:before,
.node-state:after {
    content:"";
    position:absolute;
    top:50%;
    left:-20px;
    background:#000;
    display:block;
}

.closed-node:before,
.opened-node:before {
    left:2px;
    width:10px;
    height:2px;
    margin-top:-1px;
/*
    left:2px;
    width:5px;
    height:1px;
    margin-top:-4px;
*/
}

.closed-node:after{
    z-index:10;
    left:6px;
    width:2px;
    height:10px;
    margin-top:-5px;
}

.tree-node {
    border-left: 1px solid #7b7b7b; 
    margin-left: 10px;
    padding: 5px 0 5px 15px;
    position: relative;
}

.tree-node:last-child {
    border-left: none; 
}

.tree-node:before,
.tree-node:after {
    background:#000;
    content:"";
    display:block;
    position:absolute;
}

.tree-node:before {
    left:0;
    height:1px;
    top: 15px;
    width:15px;
}


.tree-node:last-child:after {
    left:0;
    height:15px;
    top: 0;
    width: 1px;
} 

.sub-tree {
    display: none;
}