/*     Chart    */

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid $transparent-bg;
  border-bottom: 0;
  border-left: .3em solid $transparent-bg;
}

.chart {
  margin: 30px 0 30px;
  position: relative;
}

.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
  fill: $white-color !important;
  color: $white-color !important;
}

.chart-circle {
  display: flex;
  justify-content: center;
  .circles-text {
    font-size: 28px !important;
  }
}

.color-box {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  display: inline-block;
  float: left;
  padding-top: 3px;
  margin: 2px 5px 0 0;
}

.chart-pie {
  display: block;
  position: relative;
  width: 100%;
  &:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 75%;
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}