.tree{
  font-size: 2vh;
}

.tree::after {
  content: '';
  display: block;
  clear: left;
}

.tree div {
  clear: left;
}

.tree input[type="checkbox"], .tree input[type="radio"] {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
}

.tree label, .tree a {
  display: block;
  float: left;
  clear: left;
  position: relative;
  margin-left: 1.8vw;
  color: #5c5d5e;
  text-decoration: none;
  cursor: pointer;
}

.tree label::before {
  display: block;
  position: absolute;
  left: calc(-5px + -1vw);
  font-family: 'FontAwesome';
  content: '\f096'; 
  color: #5c5d5e;
}

.tree label.circle::before {
  content: '\f10c'; 
}

.tree input:disabled + label::before, .tree input:disabled + label{ 
  color: lightgray;
}

.tree input:checked + label::before {
  content: '\f0c8'; 
  color: inherit;
}

.tree input:checked + label.circle::before {
  content: '\f111'; 
  color: inherit;
}

.tree input:focus + label{
  outline: none;
}

.tree_sub {
  display: none;
  float: left;
  margin-left: .5vw;
}

.tree_label {
  color: #5c5d5e; 
}

.tree input:checked ~ .tree_sub {
  display: block;
}