ul.treeview {
	padding: 20px 0;
	margin: 0 20px;
	list-style: none;
	font-size: 16px;
	font-family: system-ui;
	line-height: 20px;
	font-weight: 400;
}
ul.treeview ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}
.treeview .hitarea {
	height: 30px;
	width: 30px;
	margin-left: -30px;
	float: left;
	cursor: pointer;
	text-align: center;
}
.treeview .hitarea:before {font-family:'Font Awesome 5 Free';font-weight:400;content:"\f0fe";font-size:12px;color:#342d2c;}
.treeview .hitarea:hover:before {color:#02be8e;}
.treeview li { 
	margin: 0;
	padding: 0 0 0 32px;
}
.treeview li ul li { 
	padding: 0 0 0 16px;
}
.treeview a {display:block;padding:0 6px;}
.treeview a.selected {
	background: #f2f2f2;
	border-radius: .25rem;
	color: #342d2c;
}
#treecontrol {margin:1em 0;display:none;}

.treeview li.collapsable .hitarea:before {content:"\f146";}
.treeview li.expandable .hitarea:before {content:"\f0fe";}