        details.dttDetails{
            display: inline-block;
        }
        details.dttDetails > summary{
            cursor:pointer;
            border: none;
            list-style: none;
            width: 1em;
            padding-left: 5px;
        }
        details.dttDetails > summary::-webkit-details-marker{
            display: none;
        }

        .dttBranch .rowicon,
        .dttBranch .plusminus{
            vertical-align: top;
            padding-top: 2px;
            content: "";
        }
        
        .dttBranch[dttState='treeopen'] > .rowicon::before {
            content: url(dtt-down-arrow.png);
            cursor: pointer;
        }
        .dttBranch[dttState='treeclosed'] > .rowicon::before {
            content: url(dtt-right-arrow.png);
            cursor: pointer;
        }
        .dttLeaf > .rowicon::before{
            content: url(dtt-bullet.png);
            padding-right: 5px;
        }
       .dttBranch[dttState='treeclosed'] > .plusminus::after{
            content: "+";
            cursor: pointer;
        }
        .dttBranch[dttState='treeopen'] > .plusminus::after{
            content: "-";
            cursor: pointer;
        }


        .dttBranch {
            display: block;
        }

        .dttBranch .dttLabel {
            display: inline-block;
            vertical-align: top; 
        }
        
        
        
        .dttLabel>a:link,
        .dttLeaf>a:link{
            border-bottom: 0px !important;
        }

        ul.dttTree {
            list-style-type: none;
            padding: 5px;
        }
        ul.dttSubTree {
            display: block;
            padding: 0;
            padding-top: 1rem;
            list-style-type: none;
        }
        .ddtCloseAll,
        .ddtOpenAll{
          background-color: grey;
          color: white;
          cursor: pointer;
          padding: 3px;
        }
        .dttTreeContainer{
            display: block;
            overflow-x: auto;
            white-space: nowrap;
        }
