.chart {
  padding: 20px 20px 30px; }

#graph-bar {
  clear: both;
  max-height: 200px; }
  #graph-bar .morris-hover.morris-default-style .morris-hover-point {
    color: #000 !important; }
  #graph-bar path,
  #graph-bar text {
    display: none !important; }

#graph-line {
  clear: both;
  max-height: 200px; }
  #graph-line .morris-hover.morris-default-style .morris-hover-point {
    color: #000 !important; }
  #graph-line text {
    display: none; }

.devices {
  display: block;
  margin: 40px 0 20px;
  padding: 0 23px 0 0;
  text-align: right; }
  .devices li {
    color: #78909c;
    display: inline-block;
    font-size: 14px;
    margin-left: 15px;
    text-align: left; }
    .devices li:first-child {
      margin-left: 0; }
    .devices li span {
      display: inline-block;
      height: 10px;
      width: 10px;
      margin-right: 10px; }

.chart-text {
  color: #fff;
  display: inline-block;
  padding: 0 0 40px;
  width: 100%; }
  .chart-text .chart-title {
    display: block;
    font-size: 18px; }
  .chart-text .text {
    display: inline-block;
    font-size: 14px;
    margin: 10px 0 0; }
  .chart-text .counter {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 35px; }

.float-chart {
  height: 350px; }
  .float-chart .legend > div {
    background: transparent !important; }
  .float-chart .legendLabel {
    color: #7a7b88; }

.rect {
  fill: #30313e; }