.barchart_chart {
  margin-top: 10px;
  margin-bottom: 0px;
  position: relative;
}

.barchart_legend,
.bar_label {
  position: absolute;

  display: table;
  table-layout: fixed;
}
.barchart_legend {
  top: 325px;
}

.bar_label {
  top: 0;
  width: 100%;
}
.barchart_legend .legenditem,
.bar_label .labelitem {
  display: table-cell;
  width: 92px;
  text-align: center;
  font-size: 14px;
  /* margin: 0 14px; */
  padding: 0;
  vertical-align: top;
  line-height: 14px;
}

.barchart_legend .legenditem {
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  line-height: 14px;
}
.bar_label .labelitem {
  position: absolute;
}

.barchart {
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  position: relative;
}

.barchart .bar {
  cursor: pointer;
}

.barchart .bar.active {
  fill: #0069e2 !important;
}

.bar-chart .x .domain {
  display: none;
}
.bar-chart .x text,
.bar-chart .toplabel {
  font-size: 14px;
}
.bar-chart .selected {
  fill: #0069e2;
}
.bar-chart .selected.flax {
  fill: #87bd21;
}
.bar-chart .menu_bar {
  width: 500px;
  margin: 0 auto 20px auto;
}
.bar-chart p {
  font-size: 16px;
  line-height: 28px;
  color: #777;
  cursor: pointer;
  margin: 0 10px;
  display: inline-block;
  text-transform: uppercase;
}
.bar-chart .selectedMenuItem {
  color: #333;

  border-bottom: 4px solid #e1e1e1;
}

.bar_status {
  line-height: 50px;
  font-weight: bold;
  display: inline-block;
}
.bar-next {
  width: 50px;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  float: left;
}
.bar_page {
  float: left;
}

.bar-prev {
  width: 50px;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  float: left;
}

.bar-next img,
.bar-prev img {
  padding: 15px;
  width: 20px;
  height: 20px;
}

.disabl {
  pointer-events: none;
  opacity: 0.5;
}

@media only screen and (max-width: 768px) {
  .barchart {
    margin: 0 auto;
  }

  .bar-chart .x text,
  .bar-chart .toplabel {
    font-size: 10px;
  }
  .barchart_legend {
    top: 335px;
  }
}
@media only screen and (max-width: 658px) {
  .barchart {
    margin: 0 auto;
  }

  .bar-chart p {
    font-size: 14px;
    line-height: 22px;
    margin: 5px 10px;
  }
  .bar-chart .x text,
  .bar-chart .toplabel {
    font-size: 10px;
  }

  .barchart_chart {
    margin-top: 10px;
    margin-bottom: 0px;
  }

  .barchart_legend .legenditem,
  .bar_label .labelitem {
    font-size: 10px;
  }
  .barchart_legend {
    top: 335px;
  }
}
@media only screen and (max-width: 510px) {
  .barchart_legend {
    top: 375px;
  }
  .barchart_legend .legenditem,
  .bar_label .labelitem {
    font-size: 10px;
    line-height: 10px;
  }
  .bar_status {
    top: 380px;
    line-height: 35px;
  }
  .bar-next {
    width: 35px;
    height: 35px;
    line-height: 35px;
  }

  .bar-prev {
    width: 35px;
    height: 35px;
    line-height: 35px;
  }

  .bar-next img,
  .bar-prev img {
    padding: 0px;
    width: 15px;
    height: 15px;
  }
}