.ACTree-Main, .ACTree-Children
{ list-style-type:none; margin:0; }
.ACTree-Main     { padding:0; }
.ACTree-Children { padding:0 0 0 16px; }

.ACTree-Btn
{ width:9px;
  height:9px;
  margin:0px;
  display: inline-block;
  background-position: center center;
  background-repeat:no-repeat;
}

.ACTree-Main li
{ background-image:url('tree-vline.png');
  background-position-x: 4px;
  white-space:nowrap; }

.ACTree-Main li:not(:last-child) { background-repeat:repeat-y; }
.ACTree-Main li:last-child
{ background-position-y:top;
  background-repeat:no-repeat; }

.ACTree-Open  >.ACTree-Btn { background-image:url('tree-minus.png'); cursor: pointer; }
.ACTree-Closed>.ACTree-Btn { background-image:url('tree-plus.png');  cursor: pointer; }
.ACTree-Single>.ACTree-Btn { background-image:url('tree-single.png'); }

:where(.ACTree-Open, .ACTree-Closed, .ACTree-Single) > span
{ background-position: 3px,left;
  background-repeat:no-repeat;
  padding:3px 5px 3px 20px;
  margin-left:0px;
  display:inline-block;
  white-space:nowrap;
}

.ACTree-Open  >span { background-image:url('tree-folder-open.png')  ,url('tree-hline.png'); }
.ACTree-Closed>span { background-image:url('tree-folder-closed.png'),url('tree-hline.png'); }
.ACTree-Single>span { background-image:url('tree-folder-closed.png'),url('tree-hline.png'); }

.ACTree-Closed>ul {height:0;  overflow-y: hidden; }
.ACTree-Open>ul {height:100%; }

.ACTree-Main span:hover { background-color: #ddd; cursor: pointer; }
.ACTree-Main span.Selected { background-color: LightCyan; }
.ACTree-Main span.Selected:hover { background-color: #7ee; }

/* The whole thing */
.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}

/* Each of the items in the list */
.custom-menu li {
    padding: 8px 12px 8px 28px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
    background-repeat:no-repeat;
    background-position: 5px;
}

.custom-menu li:hover {
    background-color: #DEF;
}

.ModalBox
{ display: none;
  z-index:100;
  background-color: rgba(0,0,0,0.35);
  Position:absolute;
  left:0px;  top:0px;
  right:0px; bottom:0px;
}

.ModalBox .DlgBox
{ margin:180px auto;
  width:250px;
  background:white;
  border-radius: 5px;
  border: 1px solid black;
  overflow: hidden;
}

.ModalBox .DlgBox h1
{ background-color: Azure;
  margin:0; padding:2px 10px;
  font-size: 12px;
}