ul{list-style-type: none;}

.tree {
  margin: 2% auto;
  width: 80%;
}

.tree p{width: calc(100% - 20px)}

.tree ul {
  display: none;
  margin: 4px auto;
  margin-left: 6px;
  border-left: 1px dashed #dfdfdf;
}

.tree li {
  padding: 1px 5px;
  cursor: pointer;
  vertical-align: middle;
  background: #fff;
  border: solid 1px;
}

.tree li:first-child {
  border-radius: 3px 3px 0 0;
}

.tree li:last-child {
  border-radius: 0 0 3px 3px;
}

.tree .active,
.active li {
  background: #efefef;
}

.tree label {
  cursor: pointer;
}

.tree input[type=checkbox] {
  margin: -2px 6px 0 0px;
}

.has > label {
  color: #000;
}

.tree .total {
  color: #e13300;
}