.treeview {
    margin-top: 0.3em;
    display: flow-root
}

.treeview .treeview-header {
    padding-left: 3px;
    font-weight: bold
}

.treeview .treeview-header:last-child {
    border-color: #636363 !important;
    border-left-style: dotted
}

.treeview .treeview-header:not(:last-child)::before {
    content: none
}

.treeview .treeview-header:last-child::before {
    border-bottom: 0
}

/* removes the dots of the unordered list */
.treeview ul,.treeview li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none
}

/* vertical lines between nodes */
.treeview li li {
    position: relative;
    padding-left: 13px;
    margin-left: 7px;
    border-left: 1px solid #636363
}

/* Horizontal Lines to Connect Parent to Child */
.treeview li li::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 11px;
    height: 11px;
    border-bottom: 1px solid #636363
}

/* makes sure the last child doesn't display a continuing line */
.treeview li li:last-child:not(.treeview-continue) {
    border-color: transparent
}

/* makes sure the last child doesn't display a continuing line */
.treeview li li:last-child:not(.treeview-continue)::before {
    border-left: 1px solid #636363;
    width: 10px
}


/* ------------------------------------------------------------- */