.list-tree {
  --tree-clr: #075985;
  --tree-font-size: 1rem;
  --tree-item-height: 2;
  --tree-offset: 1.5rem;
  --tree-thickness: 2px;
  --tree-style: solid;
}
.list-tree ul{
  display: grid;
  list-style: none;
  font-size: var(--tree-font-size);
}
.list-tree li{
  line-height: var(--tree-item-height);
  padding-inline-start: var(--tree-offset);
  border-left: var(--tree-thickness) var(--tree-style) var(--tree-clr);
  position: relative;
  text-indent: .5rem;
  
  &:last-child {
    border-color: transparent; /* hide (not remove!) border on last li element*/
  }
  & span{
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 100;
    opacity: .65;
    
  }
  &::before{
    content: '';
    position: absolute;
    top: calc(var(--tree-item-height) / 2 * -1 * var(--tree-font-size) + var(--tree-thickness));
    left: calc(var(--tree-thickness) * -1); 
    width: calc(var(--tree-offset) + var(--tree-thickness) * 2);
    height: calc(var(--tree-item-height)  * var(--tree-font-size));
    border-left: var(--tree-thickness) var(--tree-style) var(--tree-clr);
    border-bottom: var(--tree-thickness) var(--tree-style) var(--tree-clr);
  }
  &::after{
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--tree-clr);
    top: calc(var(--tree-item-height) / 2 * 1rem);
    left: var(--tree-offset) ;
    translate: calc(var(--tree-thickness) * -1) calc(var(--tree-thickness) * -1);
  }
  & li li{
    /*
    change line color etc.
    --tree-clr: rgb(175, 208, 84);
    */
    --tree-style: dotted;
  }
}

* {
	margin: 0;
	padding: 0;
}

/* https://codeconvey.com/pure-css-collapsible-tree-menu/ */
.tree-menu{
    /*max-width: 640px;*/
    margin: 10px auto;
	
	padding: 100px;
	font-size: 100%;
	font-family: "Arial";
}


input {
	font-size: 1em;
}



.tree-menu ol.tree {
	padding-left: 30px;
}

.tree-menu li {
	list-style-type: none;
    user-select: none;
	color: #313131;
	position: relative;
	margin-left: -15px;
    border-left: 1px dotted #aaa;
}

.tree-menu li label {
	padding-left: 37px;
	cursor: pointer;
	background: url("img/folder-horizontal.png") no-repeat 15px 2px;
	display: block;
}

.tree-menu li input {
	width: 1em;
	height: 1em;
	position: absolute;
	left: -0.5em;
	top: 0;
	opacity: 0;
	cursor: pointer;
}

.tree-menu li input+ol {
	height: 1em;
	margin: -16px 0 0 -44px;
	background: url("img/toggle-small-expand.png") no-repeat 40px 0;
}

.tree-menu li input+ol>li {
	display: none;
	margin-left: -14px !important;
	padding-left: 1px
}

.tree-menu li.file {
	margin-left: -1px !important;
}

.tree-menu li.file a {
	display: inline-block;
	padding-left: 21px;
	color: #313131;
	text-decoration: none;
	background: url("img/document.png") no-repeat 0 0;
}

.tree-menu li input:checked+ol {
	height: auto;
	margin: -21px 0 0 -44px;
	padding: 25px 0 0 80px;
	background: url("img/toggle-small.png") no-repeat 40px 5px;
}

.tree-menu li input:checked+ol>li {
	display: block;
	margin: 0 0 0.063em;
}

.tree-menu li input:checked+ol>li:first-child {
	margin: 0 0 0.125em;
}