@import "vars";

.ct-chart {
  height: 240px;
}
@include media-breakpoint-up(lg) {
  .ct-chart {
    height: 320px;
  }
}
@include media-breakpoint-up(md) {
  .ct-chart {
    height: 280px;
  }
}
#exampleSimplePie.ct-chart {
   .ct-label {
    font-size: 16px;
    color: #fff;
    fill: #fff;
  }
}

#exampleLineAnimation {
  height: 300px;
  background-color: #453d3f;
}

.ct-chart {
  &.ct-golden-section {
    position: relative;
    display: block;
    width: 100%;
    &:before {
      display: block;
      float: left;
      width: 0;
      height: 0;
      /*padding-bottom: 61.804697157%*/
      padding-bottom: 0;
      content: "";
    }
    &:after {
      display: table;
      clear: both;
      content: "";
    }
    > svg {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
    }
  }
}

#exampleLineAnimation {
  .ct-label,
  .ct-label.ct-horizontal {
    display: block;
    width: 100%;
    height: 100%;
    /*font-size: .75rem;*/
    font-size: 13px;
    color: #94878a;
    text-align: left;

    fill: #94878a;
  }
  .ct-label.ct-vertical {
    display: block;
    width: 100%;
    height: 100%;
    /*font-size: .75rem;*/
    font-size: 13px;
    color: #94878a;
    text-align: right;

    fill: #94878a;
  }
  .ct-grid {
    stroke: #53494b;
    stroke-width: 1px;
    stroke-dasharray: 3px;
  }
  .ct-point {
    stroke-width: 10px;
    stroke-linecap: round;
  }
  .ct-line {
    fill: none;
    stroke-width: 4px;
  }
  .ct-area {
    stroke: none;
    fill-opacity: .1;
  }
  .ct-bar {
    fill: none;
    stroke-width: 10px;
  }
  .ct-slice.ct-donut {
    fill: none;
    stroke-width: 60px;
  }
  .ct-series {
    &.ct-series-a {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #d70206;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #d70206;
      }
      .ct-point {
        stroke-width: 10px;
        stroke-linecap: square;
      }
      .ct-line {
        -webkit-animation: dashoffset 1s linear infinite;
             -o-animation: dashoffset 1s linear infinite;
                animation: dashoffset 1s linear infinite;

        fill: none;
        stroke-width: 4px;
        stroke-dasharray: 5px;
      }
    }
    &.ct-series-b {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #f05b4f;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #f05b4f;
      }
    }
    &.ct-series-c {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #f4c63d;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #f4c63d;
      }
    }
    &.ct-series-d {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #d17905;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #d17905;
      }
    }
    &.ct-series-e {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #453d3f;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #453d3f;
      }
    }
    &.ct-series-f {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #59922b;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #59922b;
      }
    }
    &.ct-series-g {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #0544d3;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #0544d3;
      }
    }
    &.ct-series-h {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #6b0392;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #6b0392;
      }
    }
    &.ct-series-i {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #f05b4f;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #f05b4f;
      }
    }
    &.ct-series-j {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #dda458;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #dda458;
      }
    }
    &.ct-series-k {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #eacf7d;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #eacf7d;
      }
    }
    &.ct-series-l {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #86797d;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #86797d;
      }
    }
    &.ct-series-m {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #b2c326;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #b2c326;
      }
    }
    &.ct-series-n {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #6188e2;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #6188e2;
      }
    }
    &.ct-series-o {
      .ct-bar,
      .ct-line,
      .ct-point,
      .ct-slice.ct-donut {
        stroke: #a748ca;
      }
      .ct-area,
      .ct-slice:not(.ct-donut) {
        fill: #a748ca;
      }
    }
  }
  .ct-point {
    -webkit-animation: bouncing-stroke .5s ease infinite;
         -o-animation: bouncing-stroke .5s ease infinite;
            animation: bouncing-stroke .5s ease infinite;
  }
  .ct-line {
    fill: none;
    stroke-width: 3px;
  }
  .ct-point {
    -webkit-animation: exploding-stroke 1s ease-out infinite;
         -o-animation: exploding-stroke 1s ease-out infinite;
            animation: exploding-stroke 1s ease-out infinite;
  }
  .ct-line {
    fill: none;
    stroke-width: 2px;
    stroke-dasharray: 40px 3px;
  }
}

#behavior-with-jquery {
  .ct-point {
    stroke-width: 20px;
    stroke-linecap: round;
  }
}

@-webkit-keyframes dashoffset {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -20px;
  }
}
@-o-keyframes dashoffset {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -20px;
  }
}
@keyframes dashoffset {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -20px;
  }
}
@-webkit-keyframes bouncing-stroke {
  0% {
    stroke-width: 5px;
  }
  50% {
    stroke-width: 10px;
  }
  100% {
    stroke-width: 5px;
  }
}
@-o-keyframes bouncing-stroke {
  0% {
    stroke-width: 5px;
  }
  50% {
    stroke-width: 10px;
  }
  100% {
    stroke-width: 5px;
  }
}
@keyframes bouncing-stroke {
  0% {
    stroke-width: 5px;
  }
  50% {
    stroke-width: 10px;
  }
  100% {
    stroke-width: 5px;
  }
}
@-webkit-keyframes exploding-stroke {
  0% {
    opacity: 1;

    stroke-width: 2px;
  }
  100% {
    opacity: 0;

    stroke-width: 20px;
  }
}
@-o-keyframes exploding-stroke {
  0% {
    opacity: 1;

    stroke-width: 2px;
  }
  100% {
    opacity: 0;

    stroke-width: 20px;
  }
}
@keyframes exploding-stroke {
  0% {
    opacity: 1;

    stroke-width: 2px;
  }
  100% {
    opacity: 0;

    stroke-width: 20px;
  }
}