.treeview-root ul,
.treeview-root li{
    position: relative;
    color: #333;
}
.treeview-root,
.treeview-root ul,
.treeview-root ol{
    position: relative;
    list-style: none;
    margin: 0;
    padding-left: 1em;
}
/* arrow right */
.treeview-type-object:before,
.treeview-type-array:before{
    visibility: visible;
    content: " ";
    width: 0;
    height: 0;
    border-top: 0.25em solid transparent;
    border-bottom: 0.25em solid transparent;
    border-left: 0.375em solid #ccc;
    position: absolute;
    left: -0.65em;
    top: 0.3em;
}
    .treeview-type-array > li > .treeview-type-object:before{
        left: -0.85em;
    }

/* arrow down */
.treeview-expanded:before{
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-top: 0.375em solid #ccc;
    border-bottom: none;
    left: -0.75em;
    top: -0.75em;
}
    .treeview-root > li > .treeview-expanded:before{
        left: -0.75em;
    }


ol.treeview-type-array > li > .treeview-expanded{
    padding-top: 1.1em;
}
    ol.treeview-type-array > li > ul.treeview-expanded:before{
        top: 0.4em;
        left: -1em;
    }

ol.treeview-type-array{
    counter-reset: step-counter -1;
}
    ol.treeview-type-array > li {
        counter-increment: step-counter;
        color: transparent;
    }
    ol.treeview-type-array > li:before {
        content: counter(step-counter) ":";
        position: absolute;
        left: -0.25em;
        color: #999;
    }
.treeview-label:after{
    color: #333;
    content: ":";
}

.treeview-value{
    margin-left: 1em;
}
    .treeview-type-array > li > .treeview-value{
        margin-left: 1.5em;
    }
    .treeview-type-array > li > ul.treeview-value{
        margin-left: 0;
        padding-left: 1.5em;
    }

/* Type color coding */
span.treeview-type-object,
span.treeview-type-array{
    color: #333;
}
.treeview-type-null{
    color: royalblue;
}
.treeview-type-undefined{
    color: #999;
}
.treeview-type-number{
    color: orangered;
}
.treeview-type-string{
    color: seagreen;
}
.treeview-type-boolean{
    color: goldenrod;
}