/*
Custom Treelist Widget stylesheet
https://www.eastfist.com
Copyright (c) 2026 By Chongchen Saelee

Must use accompanying treelistwidget.js
*/

:root {
  --toggleColor0: rgb(190,190,190);
  --toggleColor1: rgb(210,210,210);
  --cellColor0: rgb(230,230,230);
  --cellColor1: rgb(255,255,255);
}
/*
html, body {
    font-size: 12pt;
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
}
*/
div:empty {
    display: block !important;
}
div.treelistDiv {
    /*min-width: 250px;*/
    width: 250px;
    /*height: 900px;*/
    /*border: 1px dotted silver;*/
    overflow-x: scroll;
    /*overflow-y: scroll;*/
    /*margin: 0 auto;*/
    box-sizing: border-box;
}
div.treelistSubDiv {
    /*make real big so ulist can expand be cropped by parent div*/
    width: 600px; 
    overflow:hidden;
    margin: 0 0 20px 0;
}
ul.treelist {
    
}
ul.treelist, ul.treelist ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 120%;
    box-sizing: border-box;
    width: max-width;
    display:block;
}
ul.treelist ul {
    display: none;
}
ul.treelist li {
    cursor: pointer;
    margin: 0;
    line-height: 180%;
    padding: 2px 0;
    display:block;
    /*clear:both;*/
    font-size: 9pt;
    vertical-align: middle;
    width: 280px;
    
}

ul.treelist li li:not(:last-child) {
    border-bottom: 1px dashed var(--toggleColor0, rgb(190,190,190));
}

ul.treelist div, ul.treelist a, ul.treelist span {
    display:table-cell;
    text-decoration: none;
}

.togglebox, .branch {
    height: 0.8lh; /* must be less than 1lh */
    /*aspect-ratio: 1 / 1;*/
    width: 6px;
    color: gray;
    border:1px dashed var(--toggleColor0, rgb(190,190,190));
    float:left;
    text-align: center;
    margin-right: 3px;
    padding: 0;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12pt;
    overflow:hidden;
}
.togglebox:hover {
    background-color: var(--toggleColor1, rgb(210,210,210));
    border-color: var(--toggleColor0, rgb(190,190,190));
}
 .branch {
     visibility: hidden;
     border-color: transparent;
 }
 .branchline {
     postion:relative;
     left:0;
     top:0;
     height: 0.75lh;
     aspect-ratio: 1 / 4;
     border-right: 1px dashed var(--toggleColor0, rgb(190,190,190));
 }
 .subbranchline {
     postion:relative;
     right: 0;
     top:0;
     height: 0.15lh;
     width: 0.35lh;
     margin-right: -10px;
     border-bottom: 1px dashed var(--toggleColor0, rgb(190,190,190));
 }