Kendo UI TreeView dotted styling (like Windows)

kendo-treeview-dotted.css

/* Kendo UI TreeView: https://demos.telerik.com/kendo-ui/treeview
 * Measurements based on the default "Material" theme as of April 2018, should be easily adjustable for other themes.
 */

.k-treeview .k-item[data-expanded="true"] { overflow:hidden;position:relative; }
.k-treeview .k-item[data-expanded="true"]:before {
    content:'';
    position:absolute;
    top:2em;
    bottom:1.2em;
    left:1.75em;
    border-left: dotted 1px #AAA;
}
/* prevent dotted line overlapping icons, will cause issues if using a non-white background */
.k-treeview .k-item .k-icon {
    background:white;
}
/* Move checkboxes down a bit */
.k-treeview .k-item .k-checkbox-label {
    vertical-align: text-top;
}
/* Horizontal dotted line between vertical and the item.
   ":only-child" filters to 'Leafs' (nodes without children) */
.k-treeview .k-item > div:only-child {position:relative;}
.k-treeview .k-item > div:only-child:before {
    content:'';
    position:absolute;
    top:50%;
    width:0.5em;
    right:100%;
    border-top:dotted 1px #AAA;
}