.figr-frq-bar {
  height: 3px;
  margin-bottom: 1px;
  line-height: 1px;
}
.figr-frq-bar-id {
  background-color: #1b9e77;
}
.figr-frq-bar-asd {
  background-color: #d95f02;
}
.figr-frq-bar-ep {
  background-color: #7570b3;
}
.figr-frq-bar-adhd {
  background-color: #e7298a;
}
.figr-frq-bar-scz {
  background-color:#66a61e;
}
.figr-frq-bar-bd {
  background-color: #e6ab02;
}
.figr-frq-bar-ab {
  background-color: #000;
}
.figr-frq-scale {
  position: relative;
  left: 0px;
}
.figr-frq-scl-line {
  position: absolute;
  border-right: solid #ccc 1px;
  height: 35px;  /* based on the number of graphs X 10px per the height of the .figr-frq-bar + 10 to handle the padding*/
  top: -5px;
}
.figr-frq-key {
  position: relative;
  left: 0px;
  bottom: -15px;
}
.figr-frq-scl-key {
  position: absolute;
  border-radius: 5px 5px 5px 0px;
  background-color: #ccc;
  color: #fff;
  font-size: 9px;
  padding: 2px 4px;
}
@media (max-width: 768px) {
  .figr-col {
    width: 70%;
  }
}
@media (min-width: 768px) and (max-width: 995px) {
  .figr-col {
    width: 85%;
  }
}