/*
 * Charts.css v0.9.0 (https://ChartsCSS.org/)
 * Copyright 2020 Rami Yushuvaev
 * Licensed under MIT
 */
.active-analytics .charts-css {
  --chart-bg-color: transparent;
  --heading-size: 0px;
  --primary-axis-color: var(--color-grey-100);
  --primary-axis-style: solid;
  --primary-axis-width: 1px;
  --secondary-axes-color: var(--color-grey-50);
  --secondary-axes-style: solid;
  --secondary-axes-width: 1px;
  --data-axes-color: var(--color-grey-200);
  --data-axes-style: solid;
  --data-axes-width: 1px;
  --legend-border-color: var(--color-grey-200);
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/*
 * Chart wrapper element
 */

.active-analytics .charts-css,
.active-analytics .charts-css::after,
.active-analytics .charts-css::before,
.active-analytics .charts-css *,
.active-analytics .charts-css *::after,
.active-analytics .charts-css *::before {
  box-sizing: border-box;
}

/*
 * Reset table element
 */
.active-analytics .card table.charts-css {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  overflow: initial;
  background-color: transparent;
  margin: 0 -22px -22px;
}

@media (min-width: 600px) {
  .active-analytics .card table.charts-css {
    margin-bottom: -18px;
  }
}

.active-analytics table.charts-css caption,
.active-analytics table.charts-css colgroup,
.active-analytics table.charts-css thead,
.active-analytics table.charts-css tbody,
.active-analytics table.charts-css tr,
.active-analytics table.charts-css th,
.active-analytics table.charts-css td {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.active-analytics table.charts-css colgroup,
.active-analytics table.charts-css thead,
.active-analytics table.charts-css tfoot {
  display: none;
}


/*
 * Chart colors
 */ 

.active-analytics .charts-css.column tbody tr td {
  background: var(--color-grey-100);
  padding: 0;
}

/*
 * Chart data
 */
.active-analytics .charts-css.hide-data .data {
  opacity: 0;
}

.active-analytics .charts-css.show-data-on-hover .data {
  transition-duration: .3s;
  opacity: 0;
}

.active-analytics .charts-css.show-data-on-hover tr:hover .data {
  transition-duration: .3s;
  opacity: 1;
}

/*
 * Chart labels
 */

.active-analytics .charts-css.column:not(.show-labels) {
  --labels-size: 0;
}

.active-analytics .charts-css.column:not(.show-labels) tbody tr th {
  display: none;
}

.active-analytics .charts-css.column.show-labels {
  --labels-size: 1.5rem;
}

.active-analytics .charts-css.column.show-labels tbody tr th {
  display: flex;
  justify-content: var(--labels-align, center);
  align-items: center;
  flex-direction: column;
}

@media (max-width: 600px) {
  .active-analytics .charts-css.column.show-labels {
    --labels-size: 0;
  }
  
  .active-analytics .charts-css.column.show-labels tbody tr th {
    display: none;
  }
}

/*
 * Chart axes
 */
.active-analytics .charts-css.column.show-primary-axis:not(.reverse) tbody tr {
  border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
}

.active-analytics .charts-css.column.show-primary-axis.reverse tbody tr {
  border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
}

.active-analytics .charts-css.column.show-5-secondary-axes:not(.reverse) tbody tr {
  background-size: 100% 20%;
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
}

.active-analytics .charts-css.column.show-5-secondary-axes.reverse tbody tr {
  background-size: 100% 20%;
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
}

/*
 * Chart tooltips
 */
.active-analytics .charts-css .tooltip {
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  padding: 4px 8px;
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s;
  background-color: var(--color-grey-500);
  color: var(--color-grey-00);
  text-align: center;
  font-size: .9rem;
}

.active-analytics .charts-css .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border-width: 4px;
  border-style: solid;
  border-color: var(--color-grey-500) transparent transparent;
}

.active-analytics .charts-css tr:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/*
 * Column Chart
 */
.active-analytics .charts-css.column tbody {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  gap: 1px;
  height: calc(100% - var(--heading-size));
}

.active-analytics .charts-css.column tbody tr {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  overflow-wrap: anywhere;
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}

.active-analytics .charts-css.column tbody tr th {
  position: absolute;
  right: 0;
  left: 0;
}

.active-analytics .charts-css.column tbody tr a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.active-analytics .charts-css.column tbody tr td {
  display: flex;
  justify-content: center;
  width: 100%;
  height: calc(100% * var(--size, 1));
  position: relative;
}

.active-analytics .charts-css.column:not(.reverse) tbody tr {
  align-items: flex-end;
  margin-block-end: var(--labels-size);
}

.active-analytics .charts-css.column:not(.reverse) tbody tr th {
  bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
  height: var(--labels-size);
  color: var(--color-grey-400);
  font-weight: 400;
}

.active-analytics .charts-css.column:not(.reverse) tbody tr td {
  align-items: flex-start;
}

.active-analytics .charts-css.column:not(.stacked) tbody tr td {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.active-analytics .charts-css.column:not(.reverse-data) tbody {
  flex-direction: row;
}