.treeview {
    padding: 0 0 0 6px;
    list-style: none;
    margin: 2px 4px 2px 2px;
}

    .treeview ul {
        padding: 0px;
        margin: 0px;
        margin-left: 16px;
        list-style: none;
        clear: both;
        margin-top: 0px;
        white-space: nowrap;
    }

    .treeview li {
        margin: 0;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #000;
    }

    /* expanded collapsed icon */
    .treeview .hitarea {
        height: 16px;
        width: 16px;
        margin-top: -17px;
        float: left;
        cursor: pointer;
        position: absolute;
    }

        .treeview .hitarea.collapsable-hitarea:before,
        .treeview .hitarea.expandable-hitarea:before {
            content: '';
            display: block;
            position: absolute;
            left: 6px;
            top: 3px;
            width: 0;
            height: 0;
            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #000;
            background-color: rgba(0, 0, 0, 0);
            border-style: solid;
            border-width: 5px;
        }

        .treeview .hitarea.expandable-hitarea:after
        {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: 7px;
            width: 0;
            height: 0;
            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFF;
            border-style: solid;
            border-width: 3px;
        }

        .treeview .hitarea.collapsable-hitarea:before {
            transform: rotate(45deg);
            top: 6px;
        }

        .treeview .hitarea.selected.enabled.collapsable-hitarea:before,
        .treeview .hitarea.selected.enabled.expandable-hitarea:before {
            border-left-color: #000; /*#fff;*/
        }


    .treeview .node {
        height: 18px;
        line-height: 18px;
        margin: 0px 0px 0px 22px;
        display: block;
        cursor: default;
        white-space: nowrap;
        /*background: none !important;*/
        text-overflow: ellipsis;
        overflow-x: hidden;
    }

        .treeview .node div:first-of-type {
            position: relative;
            display: inline;
            /* line-height: 24px; / * 2 pixels minder dan zijn parent om hem iets naar boven uit te lijnen */
        }

    .treeview i {
        margin-right: 5px;
        font-size: 14px;
        width: 15px;
        text-align: center;
    }

    .treeview .placeholder {
        height: 16px;
        width: 16px;
        display: block;
    }

    .treeview .node.enabled.selected {
        font-weight: bold;
        /*color: #fff;*/
    }

    .treeview .node:hover:before,
    .treeview .selected:before {
        pointer-events: none;
        content: '';
        height: 18px;
        position: absolute;
        left: 5px;
        right: 3px;
        margin-top: 0px;
    }

    .treeview .node:hover:before {
        background-color: #eee;
    }

    .treeview .node.selected:before {
        background-color: #eee;
    }

    .treeview .node.selected:hover:before {
        background-color: #eee;
    }

    .treeview .node.enabled.selected:before {
        background-color: #eee; /*rgb(99, 144, 181);*/
    }

    .treeview .node.enabled.selected:hover:before {
        background-color: #eee; /*rgb(99, 144, 181);*/
    }


    .treeview .node.disabled {
        font-style: italic;
        color: #aaa;
    }

    .treeview .node .highlite {
        font-weight: bold;
        background-color: rgba(99, 144, 181, 0.3);
    }