html {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14pt;
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0px;
  padding: 0px;
  background-color: #333;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
*:focus {
  outline: none;
}
[onClick] {
  cursor: pointer;
}
#nodes {
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
  margin: 32px;
  width: min-content;
}
.node {
  display: grid;
  grid-template-columns: min-content min-content 100%;
  white-space: nowrap;
}
.node img {
  height: 24px;
}
.node.expanded > .children {
  display: block;
}
.node .expand-status {
  padding-left: 8px;
  padding-right: 8px;
}
.node .expand-status.leaf {
  width: 36px;
}
.node .expand-status.leaf img {
  display: none;
}
.node .expand-status img {
  cursor: pointer;
}
.node .icon {
  padding-right: 8px;
}
.node .icon img {
  filter: invert(0.7) sepia(0.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
}
.node .name {
  margin-bottom: 8px;
  line-height: 24px;
}
.node .children {
  display: none;
  grid-column: 1 / -1;
  border-left: 1px solid #ccc;
  padding-left: 12px;
  margin-left: 19px;
  /*
		&.expanded {
			display: block;
		}
		*/
}