table.controller{border-collapse: collapse;padding:0px;font-family:arial;
        background-color: #CDCDCD;
        margin:auto;
        font-size: 8pt;
        width: 96%;  /* 81% */
        text-align: left;
         margin:auto;}
/*table.controller .control{font:14px 'Open Sans';}*/
table.controller td{padding:0px;border:1px solid black;}

table.controller tr{
        background-color: #e6EEEE;
        border:1px solid black;
        font-size: 8pt;
	text-align: right;
        }

/*Update the height of the line per your needs*/
/*table.controller .line{position:relative;height:24px;width:15px;float:left;}
table.controller .line .vert{width:1px; height:100%;}
table.controller .line .horz{position:absolute;top:50%;width:10px;height:1px;}*/

/*Change the colors to match your color scheme*/
/*table.controller .line.level1 .vert {background-color:#FF2A02;}
table.controller .line.level1 .horz {background-color:#FF2A02;}
table.controller .line.level2 .vert{background-color:#2BC6CC;} 
table.controller .line.level2 .horz{background-color:#2BC6CC;}
table.controller .line.level3 .vert{background-color:#098EE7;}
table.controller .line.level3 .horz{background-color:#098EE7;}*/

table.controller tr.hidden{display:none;}

table.controller .expander{margin-right:1px;}

table.controller .l1 .control{width:10px;min-height:100%}
table.controller .l2 .control{width:30px;min-height:100%}
table.controller .l3 .control{width:60px;min-height:100%}
table.controller .l4 .control{width:90px;min-height:100%}

table.controller .l1.contracted .control .line.level1{display:none;}
table.controller .l2.contracted .control .line.level2{display:none;}
table.controller .l3.contracted .control .line.level3{display:none;}

/*table.controller .l4 .expander{display:none;}*/

/*table.controller .label {margin-right:30px;}*/
table.controller td.data {text-align:center;min-width:90px;}

/*table.controller .contracted td {background-color: ; border: 1px solid #BDBDBD; font-size: 8pt; font-weight: bold;padding: 4px 1px;text-align: center;}*/
table.controller .contracted td {background-color: ; border: 1px solid #BDBDBD; font-size: 1em; font-weight: normal;padding: 2px 1px;text-align: center;}
table.controller .expanded td {background-color: #CEF6CE; border: 1px solid #BDBDBD; font-size: 1em; font-weight: bold;padding: 2px 1px;text-align: center;}
table.controller .childless td {background-color: ; border: 1px solid #BDBDBD; font-size: 1em; font-weight: normal;padding: 2px 1px;text-align: center;}
table.controller .hasParent td{background-color: #CEF6CE; border: 1px solid #BDBDBD; font-size: 1em; font-weight: normal;padding: 2px 1px;text-align: center;}

table.controller .control, table.controller .expander, table.controller {float:right;text-align:right;}
table.controller .hasParent .label{text-align:right;}

table.controller .control, table.controller .expander, table.controller .label{text-align:right; padding: 0px 14px;}
/*table.controller .contracted .expander {width:10px;height:10px;background-position:center left; background-repeat:no-repeat;background-size:10px 10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAABMUlEQVQ4ja2VPUvDUBSG3zctBAMOuuvm5Ogg+iN0spOLKAgdHNss6T00HdwCXXXSQcGlf0E3waHYRX9GQFMRLsfBBuJHaJLm2c7Hfc653OESGYwxNyQ3rLVHYRhOUAEnG5DcVNWtRqPxKCInCwtTVHVJVS9EZOT7/srCwox433XdcRAEO7UIZ6w7jvPQ6/W6AFiHEACaJM+NMSMRWa1DmLIHYCwiu3UJoaprqnov3/w5X1o4o6mqBsBtp9NZ/lGoKAQAqOqB53mfAA7TXNUNszi5QVlI3iVJcprNVboyyXcAbRG5+l0rLSQ5AdASkZf/6mWFwziO/SiKpnkNRYVvqtru9/vX8xqLCJ+tta3BYPBaZPK8Vx6S3C4qA3I2JDkFcCYil0VFecInkh/W2uOqX8AXLgNp5aJbT/cAAAAASUVORK5CYII=);}
table.controller .expanded .expander {width:10px;height:10px;background-position:0px 0px; background-repeat:no-repeat;background-size:10px 10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRTRGQzMxRDlGQzExMUUzODBEOEVDQTdCODg2NDBDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRTRGQzMxRTlGQzExMUUzODBEOEVDQTdCODg2NDBDNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVFNEZDMzFCOUZDMTExRTM4MEQ4RUNBN0I4ODY0MEM1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVFNEZDMzFDOUZDMTExRTM4MEQ4RUNBN0I4ODY0MEM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+I8q8PAAAAQxJREFUeNpi/P//PwM1ARMDlQHVDWRpbGycB6RNqGEYMPiusgBpHSBDlxoGMjIy/mL6+/dvMpDxnQqGfQealcjU3Nx8GcjPo4ID80BmMcJ49fX1E8k1GOi6jQ0NDQEosQwULAdSl8gw79GPHz8SMZIN0IYfwDAIAzK/kGDYn3///kV0dHS8x5oOW1pabgJjPIuEZFIDDLfjKN7HppDI8NwETMOgcPtPMKd8+vSpAhiml/FEwmMgTkQ3DKeB/f39oHQZBtT0FVu4AXEEMMzfkZSXgRpuAKksLK5rBcodI6twAGpcBDRgNZJhIHYT3sKBUEx++/YtmYuLC+TNf0B2ZldX1z+8iXzkFbAAAQYATlZraA/C4aUAAAAASUVORK5CYII=);}
*/

table.controller .contracted .expander {width:10px;height:10px;float:left;background-position:left; background-repeat:no-repeat;background-size:10px 10px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFsAAABVCAIAAACpXg++AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE8SURBVHhe7dlNDoIwFABhz+WBPA+n8TIeBlHrwiGt8tL0x8ysYcHHayHpabXPFGGKMEWYIkwR1lTktpxP+c7LLV3XtVYi10t67m9drumOXrUR+dljq/eojCfSe0oUYYowRZgiTBGmCFOEKcIUYYowRZgiTBGmCFOEKcIUYYowRZgiTBGmCFOElUXKx5JjFz0JK4kcerMDFjMpiMwOshVZgHmRmVfMu8iU5EX+YERCQ6IIy4r8w6JRZJ+rhinCqor49d01P0nop7UgMj1J9b/4RxNvJoEt5NkXkUodgo0+SqUUYYowRZgiTBGmCFOEKcIUYYowRZgiTBGmCFOEKcIUYYowRZgiTBGmCFOEjScSO4mrVxuRAwemnSekmcirskvv4Ug1FZkiRZgiTBGmCFOEKcIUYYowRZgin63rHc2Nd5fRP3cQAAAAAElFTkSuQmCC);}

table.controller .expanded .expander {width:10px;height:10px;float:left;background-position:0px 0px; background-repeat:no-repeat;background-size:10px 10px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABICAIAAADeevQtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC8SURBVGhD7dbBDYUgEABR67Ig67Eam7EY1ARv/192dc2QmQbgZUGZ2tDJIyePnDxy8sjJIyePnDxy8sjJIyePnDxy8shleNsyvd287n2xWGHevs59Cy+3bH3FSFFeweTuMr4gr2x2Z5kDGuQVDi81PgIvMT55v5L3XPL+ReDVfzkH/+9V+j54tYz+5rwquICZg3mV4QGSR04eOXnk5JGTR04eOXnk5JGTR04eOXnk5JGTR04eOXnkhua1dgCAivv4PKNFCgAAAABJRU5ErkJggg==);}

table.controller .childless .expander {display:none;float:right;text-align:right;}
/*table.controller .contracted .expander {width:10px;height:20px;background-position:0px 5px; background-repeat:no-repeat;background-size:10px 10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAABMUlEQVQ4ja2VPUvDUBSG3zctBAMOuuvm5Ogg+iN0spOLKAgdHNss6T00HdwCXXXSQcGlf0E3waHYRX9GQFMRLsfBBuJHaJLm2c7Hfc653OESGYwxNyQ3rLVHYRhOUAEnG5DcVNWtRqPxKCInCwtTVHVJVS9EZOT7/srCwox433XdcRAEO7UIZ6w7jvPQ6/W6AFiHEACaJM+NMSMRWa1DmLIHYCwiu3UJoaprqnov3/w5X1o4o6mqBsBtp9NZ/lGoKAQAqOqB53mfAA7TXNUNszi5QVlI3iVJcprNVboyyXcAbRG5+l0rLSQ5AdASkZf/6mWFwziO/SiKpnkNRYVvqtru9/vX8xqLCJ+tta3BYPBaZPK8Vx6S3C4qA3I2JDkFcCYil0VFecInkh/W2uOqX8AXLgNp5aJbT/cAAAAASUVORK5CYII=);}
table.controller .expanded .expander {width:10px;height:20px;background-position:0px 5px; background-repeat:no-repeat;background-size:10px 10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRTRGQzMxRDlGQzExMUUzODBEOEVDQTdCODg2NDBDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRTRGQzMxRTlGQzExMUUzODBEOEVDQTdCODg2NDBDNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVFNEZDMzFCOUZDMTExRTM4MEQ4RUNBN0I4ODY0MEM1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVFNEZDMzFDOUZDMTExRTM4MEQ4RUNBN0I4ODY0MEM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+I8q8PAAAAQxJREFUeNpi/P//PwM1ARMDlQHVDWRpbGycB6RNqGEYMPiusgBpHSBDlxoGMjIy/mL6+/dvMpDxnQqGfQealcjU3Nx8GcjPo4ID80BmMcJ49fX1E8k1GOi6jQ0NDQEosQwULAdSl8gw79GPHz8SMZIN0IYfwDAIAzK/kGDYn3///kV0dHS8x5oOW1pabgJjPIuEZFIDDLfjKN7HppDI8NwETMOgcPtPMKd8+vSpAhiml/FEwmMgTkQ3DKeB/f39oHQZBtT0FVu4AXEEMMzfkZSXgRpuAKksLK5rBcodI6twAGpcBDRgNZJhIHYT3sKBUEx++/YtmYuLC+TNf0B2ZldX1z+8iXzkFbAAAQYATlZraA/C4aUAAAAASUVORK5CYII=);}
table.controller .childless .expander {display:none;}
*/
table.controller .control .line.level1 .horz{display:none;}
table.controller .l1-first .control .line.level1 .horz{display:block;}
table.controller .l1-last .control .line.level1 .horz{display:block;}
table.controller .l1-first .control .line.level1 .vert{bottom:0px;position:absolute;width:1px; height:50%;}
table.controller .l1-last .control .line.level1 .vert{width:1px; height:50%;}
table.controller .l1-last .control .line.level1 .horz{}

table.controller .control .line.level2 .horz{display:none;}
table.controller .l2-first .control .line.level2 .horz{display:block;}
table.controller .l2-last .control .line.level2 .horz{display:block;}
table.controller .l2-first .control .line.level2 .vert{bottom:0px;position:absolute;width:1px; height:50%;}
table.controller .l2-last .control .line.level2 .vert{width:1px; height:50%;}

table.controller .control .line.level3 .horz{display:none;}
table.controller .l3-first .control .line.level3 .horz{display:block;}
table.controller .l3-last .control .line.level3 .horz{display:block;width:10px; height:1px;}
table.controller .l3-first .control .line.level3 .vert{bottom:0px;position:absolute;width:1px; height:50%;}
table.controller .l3-last .control .line.level3 .vert{width:1px; height:50%;}