.kpi-tree input[type="checkbox"] {
  display: none;
}
.kpi-tree > ul > li > input[type="checkbox"] ~ ul{
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease-out
}
.kpi-tree > ul > li > input[type="checkbox"]:checked ~ ul{
  max-height: 9999px;
  overflow: hidden;
}

.kpi-tree li.selectable,
.kpi-tree li.selectable a {
  cursor: pointer;
}

/* Style */
.kpi-tree ul {
  list-style-type: none;
  padding: 0;
  padding-right: 30px;
  margin: 0;
}

/* Toggler */
.kpi-tree ul li label.toggler {
  position: absolute;
  top: 25px;
  right: -5px;
  width: 20px;
  height: 20px;
  background: url("../images/toggle_arrow.png") center center no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  transform: rotate(90deg);
  transition: transform 0.1s ease-out
}
.kpi-tree > ul > li > input[type="checkbox"]:checked ~ label {
  transform: rotate(0deg);
}

/* First Level */
.kpi-tree ul li {
  padding: 0;
  padding-top: 20px;
  padding-bottom: 30px;
  margin: 0;
  position: relative;
}
.kpi-tree ul li label a {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  color: #000000;
  word-break: break-word;
}
.kpi-tree ul li label a:hover {
  text-decoration: none;
}
.kpi-tree ul li.selectable label a:hover {
  text-decoration: none;
  color: #e82c29;
}

/* Second Level */
.kpi-tree ul li ul {
  padding-right: 15px;
  padding-left: 19px;
}
.kpi-tree ul li ul li {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 40px;
}
.kpi-tree ul li ul li label a {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
.kpi-tree ul li ul li.e-active label a {
  color: #e82c29;
}

/* Third Level */
.kpi-tree ul li ul li ul {
  padding-top: 5px;
}
.kpi-tree ul li ul li ul li {
  padding-bottom: 10px;
}
.kpi-tree ul li ul li ul li label a {
  font-size: 18px;
  line-height: 22px;
  color: #b3b3b3;
}