#chart {
  text-align: center;
  position: relative;

  /*background: rgba(0,128,0,.5);*/
}

#chart p {
  margin: 0;
  padding: 0;
  text-indent: 0;
}

/*
#chart ul li a, #chart ul li span { font-size: 14px }
@media only screen and (min-width: 992px) {
  #chart ul li a, #chart ul li span { font-size: 16px }
}
@media only screen and (min-width: 1024px) {
  #chart ul li a, #chart ul li span { font-size: 20px }
}
*/

#chart ul {
  padding: 0;
  display: block;
  list-style: none;
  overflow: hidden;

  top: 0;
  height: 100%;
  position: absolute;

  /*background: rgba(128,0,0,0.5);*/
}
#chart li {
  display: table;
  width: 100%;
}

#chart ul li>* {
  display: table-cell;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

@media only screen {
#chart ul li>* {
  color: #fff;
}
}

#chart #left {
  left: 7%;
  width: 45%;
}
#chart #left>li {
  height: 33.33%;
}
#chart #left>li:first-child>* {
  color:#000;
}
@media only screen and (min-width: 992px) {
  #chart #left>li:first-child>* {
    padding-top: 60px;
  }
}

#chart #middle {
  left: 54%;
  width: 10%;
}
#chart #middle>li {
  height: 100%;
}

#chart #right {
  left: 66%;
  width: 34%;
  overflow-y: scroll;
  background: #95B3D7;
}
#chart #right>li {
  height: 16.67%;
}
#chart #right a {
  border-bottom: 1px solid #fff;
}
@media only screen and (max-width: 767px) {
  #chart ul li a, #chart ul li span { font-size: 12px }
  #chart ul li>* { color: #000 }
}