.node {
  border : 1px solid hsl(0, 0%, 0%);
}
.key {
  color: hsl(0, 0%, 20%);
}
.value {
  color: hsl(0, 0%, 50%);
}
.divider {
  clear: both;
}
.collapsed > * {
  display: none;
}


.progress-bar {
  background-color: hsl(0, 0%, 50%);
  border: 2px solid hsl(0, 0%, 0%);
  height: 30px;
  width: 300px;
}

.progress-bar-filler {
  outline: 1px solid hsl(0, 0%, 100%);
  float: left;
  height: 30px;
}
.rank-E {
  background: linear-gradient(to right, hsl(0, 0%, 0%), hsl(0, 50%, 50%));
  left: 0%;
  width: 20%;
}
.rank-D {
  background: linear-gradient(to right, hsl(0, 50%, 50%), hsl(30, 50%, 50%));
  left: 20%;
  width: 15%;
}
.rank-C {
  background: linear-gradient(to right, hsl(30, 50%, 50%), hsl(60, 50%, 50%));
  left: 35%;
  width: 15%;
}
.rank-B {
  background: linear-gradient(to right, hsl(60, 50%, 50%), hsl(105, 50%, 50%));
  left: 50%;
  width: 15%;
}
.rank-A {
  background: linear-gradient(to right, hsl(105, 50%, 50%), hsl(50, 100%, 50%));
  left: 65%;
  width: 15%;
}
.rank-S {
  background: linear-gradient(to right, hsl(50, 100%, 50%), hsl(40, 10%, 90%));
  left: 80%;
  width: 10%;
}
.rank-SS {
  background: linear-gradient(to right, hsl(40, 10%, 90%), hsl(270, 50%, 50%));
  left: 90%;
  width: 10%;
}