/* INCLUDE AS <ChartTool> */
/* REQUIRE CSS <Chartist> */
/* Tooltip styling */
.chartist-tooltip {
  background: #fff8cc;
  border: 1px solid #888;
  padding: 5px 10px;
  color: black;
  border-radius: 6px;
  font: 14px "Helvetica Neue", Sans-Serif;
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.4);
  z-index: 2000;
}

.chartist-tooltip:before {
  border-top-color: #CCC8AA;
  margin-left: -7px;
  border-width: 7px;
}

.ct-label {
  fill: #000;
  color: #000;
  /* Center horizontal labels */
}
.ct-label.ct-horizontal.ct-end {
  justify-content: center;
  font-size: medium;
}
.ct-label.ct-vertical.ct-start {
  justify-content: center;
  font-size: small;
}

.ct-grid {
  stroke: #AAA;
}

.ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
  stroke: #03c32c;
}

.ct-series-a .ct-point {
  stroke: #03c32c;
  /* Size of your points */
  stroke-width: 20px;
  /* Make your points appear as squares */
  stroke-linecap: square;
}

.ct-series-a .ct-line {
  stroke: #03c32c;
  /* Control the thikness of your lines */
  stroke-width: 7px;
  /* Create a dashed line with a pattern */
  stroke-dasharray: 10px 10px;
}

.ct-series-a .ct-slice-pie, .ct-series-a .ct-area {
  fill: #03c32c;
}

.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
  stroke: #A78ABF;
}

.ct-series-b .ct-slice-pie, .ct-series-b .ct-area {
  fill: #A78ABF;
}

/* Legend for chart */
.ct-legend {
  position: relative;
  z-index: 10;
}
.ct-legend li {
  position: relative;
  padding-left: 23px;
  margin-bottom: 3px;
  line-height: 1.4em;
  display: inline-block;
  margin-right: 2em;
  cursor: pointer;
}
.ct-legend li:before {
  width: 1em;
  height: 1em;
  position: absolute;
  left: 0.2em;
  top: 0.2em;
  content: "";
  border: 3px solid transparent;
  border-radius: 2px;
}
.ct-legend li.inactive:before {
  background: transparent;
}
.ct-legend.ct-legend-inside {
  position: absolute;
  top: 0;
  right: 0;
}
.ct-legend .ct-series-0:before {
  background-color: #03c32c;
  border-color: #03c32c;
}
.ct-legend .ct-series-1:before {
  background-color: #A78ABF;
  border-color: #A78ABF;
}
.ct-legend .ct-series-2:before {
  background-color: #f4c63d;
  border-color: #f4c63d;
}
.ct-legend .ct-series-3:before {
  background-color: #d17905;
  border-color: #d17905;
}
.ct-legend .ct-series-4:before {
  background-color: #453d3f;
  border-color: #453d3f;
}
.ct-legend .ct-series-5:before {
  background-color: #59922b;
  border-color: #59922b;
}
.ct-legend .ct-series-6:before {
  background-color: #0544d3;
  border-color: #0544d3;
}
.ct-legend .ct-series-7:before {
  background-color: #6b0392;
  border-color: #6b0392;
}
.ct-legend .ct-series-8:before {
  background-color: #f05b4f;
  border-color: #f05b4f;
}
.ct-legend .ct-series-9:before {
  background-color: #dda458;
  border-color: #dda458;
}
.ct-legend .ct-series-10:before {
  background-color: #eacf7d;
  border-color: #eacf7d;
}
.ct-legend .ct-series-11:before {
  background-color: #86797d;
  border-color: #86797d;
}
.ct-legend .ct-series-12:before {
  background-color: #b2c326;
  border-color: #b2c326;
}
.ct-legend .ct-series-13:before {
  background-color: #6188e2;
  border-color: #6188e2;
}
.ct-legend .ct-series-14:before {
  background-color: #a748ca;
  border-color: #a748ca;
}

.mb-chart-legend .ct-legend {
  padding-top: 10px;
  margin-bottom: 0;
}

.mb-chart-container {
  position: relative;
  overflow: hidden;
}
.mb-chart-container .mb-chart.mb-chart-pie {
  display: grid;
  grid-template: "pie" 1fr "legend" auto/1fr;
  --svg-height: 0;
  --svg-padding: 0;
  margin-bottom: calc(var(--svg-padding) + var(--svg-height) / -2);
}
.mb-chart-container .mb-chart.mb-chart-pie > * {
  grid-area: pie;
}
.mb-chart-container .mb-chart.mb-chart-pie .ct-legend {
  grid-area: legend;
  position: relative;
  text-align: center;
  transform: translateY(calc(var(--svg-padding) + var(--svg-height) / -2));
}
.mb-chart-container .mb-chart + .mb-chart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.mb-chart-container .mb-chart .mockup {
  text-align: center;
  position: relative;
}
.mb-chart-container .mb-chart .mockup {
  font-size: 3em;
  color: #EEE;
  text-shadow: -1px -1px 2px #CCC, 1px 1px 2px #888;
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mb-block.is-maximized .panel-body {
  position: relative;
}
.mb-block.is-maximized .mb-chart-container {
  position: absolute;
  left: 0;
  top: 15px;
  right: 0;
  bottom: 0;
}
.mb-block.is-maximized .mb-chart-container .mb-chart {
  height: 100% !important;
  box-sizing: padding-box;
}
.mb-block.is-maximized .mb-chart-container .mb-chart + .mb-chart-overlay {
  height: auto !important;
}
.mb-block.is-maximized .mb-chart-legend {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  padding-bottom: 10px;
}