ul .tip { list-style: none;padding:0 0 0 30px;margin:0; background-color: #fffff0; font-size: 0.8em;}

ul .tip li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}




.tree-menu ul { list-style: none;padding:0 0 0 30px;margin:0;}

.tree-menu > ul { padding: 0; }

.tree-menu a {
  display: block;
  vertical-align: middle;
  text-decoration: none;
  padding: 2px;
  background-color: #efefef;
  border-radius: 4px;
  margin-bottom: 1px;
  -moz-transition: background-color 0.25s linear;
  -webkit-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear;
  -moz-transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.tree-menu a:hover {
  -moz-transition: background-color 0.1s linear;
  -webkit-transition: background-color 0.1s linear;
  -o-transition: background-color 0.1s linear;
  transition: background-color 0.1s linear;
}

.tree-menu .active > a:hover,
.tree-menu .selected > a,
.tree-menu a:hover { background-color: #c6cdde; }

.tree-menu .selected > a {
  font-weight: bold;
  text-decoration: none;
}

.tree-menu .active > a { background-color: #e1e3e9; }


.tree-menu .closed > a,
.tree-menu .opened > a {
  padding-right: 0vw;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 6vw 6vw;

}


.tree-menu .closed > a { }
.tree-menu .closed > a::before { content:"▶️";padding-bottom:30px;   margin-right:10px;font-size:1.0em; display: inline-block;
    width: 10px;  height: 10px; vertical-align: middle;line-height:40px; }
.tree-menu .opened > a::before { content:"🔽️";padding-bottom:30px;  margin-right:10px;font-size:1.0em; display: inline-block;
    width: 10px;  height: 10px; vertical-align: middle;line-height:40px; }
.not-parent > a::before {
  content:" "; margin-right:10px;padding-bottom:30px;font-size:1.3em; display: inline-block;
    width: 10px;  height: 10px; vertical-align: middle;line-height:40px;
}


.info  { padding:0; margin:5px;}


/* ----------- iPhone 5, 5S, 5C and 5SE ----------- Portrait and Landscape */
@media only screen and (min-device-width: 100px) and (max-device-width: 568px) {
}

/* ----------- iPhone 6, 6S, 7 and 8 -----------  Portrait and Landscape */
@media only screen  and (min-device-width: 375px) and (max-device-width: 667px) { 
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- Portrait and Landscape */
@media only screen  and (min-device-width: 414px) and (max-device-width: 736px) { 
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
@media only screen and (min-device-width: 736px)  {
.tree-menu .closed > a::before {  margin-right:40px; }
.tree-menu .opened > a::before {  margin-right:40px; }
.not-parent > a::before {  margin-right:40px; }

}