.tree
{
FONT-FAMILY: Arial;
COLOR: #FFFFFF;
BACKGROUND-COLOR: #006400;
FONT-SIZE: 12pt;
FONT-WEIGHT: 300;
FONT-STYLE: normal;
TEXT-ALIGN: left;
BORDER-LEFT: #FFFFFF 0px none ;
BORDER-RIGHT: #FFFFFF 0px none ;
BORDER-TOP: #FFFFFF 0px none ;
BORDER-BOTTOM: #FFFFFF 0px none ;
CURSOR: auto; 
TEXT-DECORATION: none; 
}

.treelistimagesize
{
    TEXT-DECORATION: none;
    HEIGHT: 30px;
    WIDTH: auto;
    DISPLAY: inline-block
}
.treelisttable
{
vertical-align: top;
    color: #00FF00;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
    text-align:top;
}

.tree{
  --spacing : 1.5rem;
  --radius  : 10px;
  text-align: top;
}

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
  text-align:top;
}

.tree ul{
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 0;
  text-align:top;
}

.tree ul li{
  border-left : 2px solid #00FF00;
  text-align:top;
}

.tree ul li:last-child{
  border-color : transparent;
  text-align:top;
}

.tree ul li::before{
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid #00FF00;
  border-width : 0 0 2px 2px;
  text-align:top;
}

.tree summary{
  display : block;
  cursor  : pointer;
  text-align:top;
}

.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
}

.tree summary:focus{
  outline : none;
}

.tree summary:focus-visible{
  outline : 1px dotted #00FF00;
}

.tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #00FF00;
  text-align:top;
}

.tree summary::before{
  z-index    : 1;
  background : #00FF00 url('expand-collapse.svg') 0 0;
  text-align:top;
}

.tree details[open] > summary::before{
  background-position : calc(-2 * var(--radius)) 0;
  text-align:top;
}

.treelastone li::after,
.treelastone summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #00FF00;
  text-align:top;
}

.treehierarchy {
  width:  auto;
  
  /*overflow-x: auto; */
  /*overflow-y: auto; */
  /*margin-left: -80px;*/
  color:  #00f;
}
.treehierarchy ul {
  width:auto;
  padding-top: 20px;
  position: relative;
  white-space: nowrap;
}
.treehierarchy li {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  margin: 0 -2px;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}
/*We will use ::before and ::after to draw the connectors*/
.treehierarchy li::before,.treehierarchy li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #00f;
  width: 50%;
  height: 20px;
}
.treehierarchy li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #00f;
}
/*We need to remove left-right connectors from elements without any siblings*/
.treehierarchy li:only-child::after,.treehierarchy li:only-child::before {
  display: none;
}
/*Remove space from the top of single children*/
.treehierarchy li:only-child {
  padding-top: 0;
}
/*Remove left connector from first child and 
right connector from last child*/
.treehierarchy li:first-child::before,.treehierarchy li:last-child::after {
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.treehierarchy li:last-child::before {
  border-right: 1px solid #00f;
  border-radius: 0 5px 0 0;
}
.treehierarchy li:first-child::after {
  border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.treehierarchy ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #00f;
  width: 0;
  height: 20px;
}
.treehierarchy li a {
  border: 1px solid #00f;
  padding: 5px 10px;
  text-decoration: none;
  color: #00f;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.treehierarchy li a:hover,.treehierarchy li a:hover+ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.treehierarchy li a:hover+ul li::after,.treehierarchy li a:hover+ul li::before,.treehierarchy li a:hover+ul::before {
  border-color: #94a0b4;
}