/*********************
* Chartist chart css *
*********************/
.ct-label {
    fill: rgba(255, 255, 255, 0.4);
    color:rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    line-height: 1;
}

.ct-grid {
    stroke: rgba(255, 255, 255, 0.2);
}
.linechart {
    max-height: 400px;
    margin-top:20px;
    .ct-series-a .ct-line,
    .ct-series-a .ct-point {
        stroke: $chart-color-a;
    }
    .ct-series-b .ct-line,
    .ct-series-b .ct-point {
        stroke: $chart-color-b;
    }
    .ct-series-c .ct-line,
    .ct-series-c .ct-point {
        stroke: $chart-color-c;
    }
    .ct-series-d .ct-line,
    .ct-series-d .ct-point {
        stroke: $chart-color-d;
    }
    .ct-series-e .ct-line,
    .ct-series-e .ct-point {
        stroke: $chart-color-e;
    }
    .ct-series-f .ct-line,
    .ct-series-f .ct-point {
        stroke:$chart-color-f;
    }
    .ct-series-g .ct-line,
    .ct-series-g .ct-point {
        stroke:$chart-color-g;
    }
    .ct-series-h .ct-line,
    .ct-series-h .ct-point {
        stroke:$chart-color-h;
    }
    .ct-series-i .ct-line,
    .ct-series-i .ct-point {
        stroke:$chart-color-i;
    }
    .ct-series-j .ct-line,
    .ct-series-j .ct-point {
        stroke:$chart-color-j;
    }
    .ct-series-k .ct-line,
    .ct-series-k .ct-point {
        stroke:$chart-color-k;
    }
    .ct-series-l .ct-line,
    .ct-series-l .ct-point {
        stroke:$chart-color-l;
    }
    .ct-series-m .ct-line,
    .ct-series-m .ct-point {
        stroke:$chart-color-m;
    }
    .ct-series-n .ct-line,
    .ct-series-n .ct-point {
        stroke:$chart-color-n;
    }
    .ct-series-o .ct-line,
    .ct-series-o .ct-point {
        stroke:$chart-color-o;
    }
    .ct-series-p .ct-line,
    .ct-series-p .ct-point {
        stroke:$chart-color-p;
    }
    .ct-series-q .ct-line,
    .ct-series-q .ct-point {
        stroke:$chart-color-q;
    }
    .ct-series-r .ct-line,
    .ct-series-r .ct-point {
        stroke:$chart-color-r;
    }
    .ct-series-s .ct-line,
    .ct-series-s .ct-point {
        stroke:$chart-color-s;
    }
    .ct-series-t .ct-line,
    .ct-series-t .ct-point {
        stroke:$chart-color-t;
    }
    .ct-series-u .ct-line,
    .ct-series-u .ct-point {
        stroke:$chart-color-u;
    }
    .ct-series-v .ct-line,
    .ct-series-v .ct-point {
        stroke:$chart-color-v;
    }
    .ct-series-w .ct-line,
    .ct-series-w .ct-point {
        stroke:$chart-color-w;
    }
    .ct-series-x .ct-line,
    .ct-series-x .ct-point {
        stroke:$chart-color-x;
    }
    .ct-series-y .ct-line,
    .ct-series-y .ct-point {
        stroke:$chart-color-y;
    }
    .ct-series-z .ct-line,
    .ct-series-z .ct-point {
        stroke:$chart-color-z;
    }
}

.barchart {
    max-height: 300px;
    &.bar-xs .ct-bar {
        stroke-width: 5px;
    }
    .ct-series-a .ct-bar {
        stroke:$chart-color-a;
    }
    .ct-series-b .ct-bar {
        stroke:$chart-color-b;
    }
    .ct-series-c .ct-bar {
        stroke:$chart-color-c;
    }
    .ct-series-d .ct-bar {
        stroke:$chart-color-d;
    }
    .ct-series-e .ct-bar {
        stroke:$chart-color-e;
    }
    .ct-series-f .ct-bar {
        stroke:$chart-color-f;
    }
    .ct-series-g .ct-bar {
        stroke:$chart-color-g;
    }
    .ct-series-h .ct-bar {
        stroke:$chart-color-h;
    }
    .ct-series-i .ct-bar {
        stroke:$chart-color-i;
    }
    .ct-series-j .ct-bar {
        stroke:$chart-color-j;
    }
    .ct-series-k .ct-bar {
        stroke:$chart-color-k;
    }
    .ct-series-l .ct-bar {
        stroke:$chart-color-l;
    }
    .ct-series-m .ct-bar {
        stroke:$chart-color-m;
    }
    .ct-series-n .ct-bar {
        stroke:$chart-color-n;
    }
    .ct-series-o .ct-bar {
        stroke:$chart-color-o;
    }
    .ct-series-p .ct-bar {
        stroke:$chart-color-p;
    }
    .ct-series-q .ct-bar {
        stroke:$chart-color-q;
    }
    .ct-series-r .ct-bar {
        stroke:$chart-color-r;
    }
    .ct-series-s .ct-bar {
        stroke:$chart-color-s;
    }
    .ct-series-t .ct-bar {
        stroke:$chart-color-t;
    }
    .ct-series-u .ct-bar {
        stroke:$chart-color-u;
    }
    .ct-series-v .ct-bar {
        stroke:$chart-color-v;
    }
    .ct-series-w .ct-bar {
        stroke:$chart-color-w;
    }
    .ct-series-x .ct-bar {
        stroke:$chart-color-x;
    }
    .ct-series-y .ct-bar {
        stroke:$chart-color-y;
    }
    .ct-series-z .ct-bar {
        stroke:$chart-color-z;
    }
}

.piechart {
    max-height: 400px;
    .ct-label {
        fill: rgba(255, 255, 255, 0.8);
        color:rgba(255, 255, 255, 0.8);
    }
    .ct-series-a .ct-slice-donut {
        stroke:$chart-color-a;
    }
    .ct-series-b .ct-slice-donut {
        stroke:$chart-color-b;
    }
    .ct-series-c .ct-slice-donut {
        stroke:$chart-color-c;
    }
    .ct-series-d .ct-slice-donut {
        stroke:$chart-color-d;
    }
    .ct-series-e .ct-slice-donut {
        stroke:$chart-color-e;
    }
    .ct-series-f .ct-slice-donut {
        stroke:$chart-color-f;
    }
    .ct-series-g .ct-slice-donut {
        stroke:$chart-color-g;
    }
    .ct-series-h .ct-slice-donut {
        stroke:$chart-color-h;
    }
    .ct-series-i .ct-slice-donut {
        stroke:$chart-color-i;
    }
    .ct-series-j .ct-slice-donut {
        stroke:$chart-color-j;
    }
    .ct-series-k .ct-slice-donut {
        stroke:$chart-color-k;
    }
    .ct-series-l .ct-slice-donut {
        stroke:$chart-color-l;
    }
    .ct-series-m .ct-slice-donut {
        stroke:$chart-color-m;
    }
    .ct-series-n .ct-slice-donut {
        stroke:$chart-color-n;
    }
    .ct-series-o .ct-slice-donut {
        stroke:$chart-color-o;
    }
    .ct-series-p .ct-slice-donut {
        stroke:$chart-color-p;
    }
    .ct-series-q .ct-slice-donut {
        stroke:$chart-color-q;
    }
    .ct-series-r .ct-slice-donut {
        stroke:$chart-color-r;
    }
    .ct-series-s .ct-slice-donut {
        stroke:$chart-color-s;
    }
    .ct-series-t .ct-slice-donut {
        stroke:$chart-color-t;
    }
    .ct-series-u .ct-slice-donut {
        stroke:$chart-color-u;
    }
    .ct-series-v .ct-slice-donut {
        stroke:$chart-color-v;
    }
    .ct-series-w .ct-slice-donut {
        stroke:$chart-color-w;
    }
    .ct-series-x .ct-slice-donut {
        stroke:$chart-color-x;
    }
    .ct-series-y .ct-slice-donut {
        stroke:$chart-color-y;
    }
    .ct-series-z .ct-slice-donut {
        stroke:$chart-color-z;
    }

    .ct-series-a .ct-slice-donut-solid {
        fill:$chart-color-a;
    }
    .ct-series-b .ct-slice-donut-solid {
        fill:$chart-color-b;
    }
    .ct-series-c .ct-slice-donut-solid {
        fill:$chart-color-c;
    }
    .ct-series-d .ct-slice-donut-solid {
        fill:$chart-color-d;
    }
    .ct-series-e .ct-slice-donut-solid {
        fill:$chart-color-e;
    }
    .ct-series-f .ct-slice-donut-solid {
        fill:$chart-color-f;
    }
    .ct-series-g .ct-slice-donut-solid {
        fill:$chart-color-g;
    }
    .ct-series-h .ct-slice-donut-solid {
        fill:$chart-color-h;
    }
    .ct-series-i .ct-slice-donut-solid {
        fill:$chart-color-i;
    }
    .ct-series-j .ct-slice-donut-solid {
        fill:$chart-color-j;
    }
    .ct-series-k .ct-slice-donut-solid {
        fill:$chart-color-k;
    }
    .ct-series-l .ct-slice-donut-solid {
        fill:$chart-color-l;
    }
    .ct-series-m .ct-slice-donut-solid {
        fill:$chart-color-m;
    }
    .ct-series-n .ct-slice-donut-solid {
        fill:$chart-color-n;
    }
    .ct-series-o .ct-slice-donut-solid {
        fill:$chart-color-o;
    }
    .ct-series-p .ct-slice-donut-solid {
        fill:$chart-color-p;
    }
    .ct-series-q .ct-slice-donut-solid {
        fill:$chart-color-q;
    }
    .ct-series-r .ct-slice-donut-solid {
        fill:$chart-color-r;
    }
    .ct-series-s .ct-slice-donut-solid {
        fill:$chart-color-s;
    }
    .ct-series-t .ct-slice-donut-solid {
        fill:$chart-color-t;
    }
    .ct-series-u .ct-slice-donut-solid {
        fill:$chart-color-u;
    }
    .ct-series-v .ct-slice-donut-solid {
        fill:$chart-color-v;
    }
    .ct-series-w .ct-slice-donut-solid {
        fill:$chart-color-w;
    }
    .ct-series-x .ct-slice-donut-solid {
        fill:$chart-color-x;
    }
    .ct-series-y .ct-slice-donut-solid {
        fill:$chart-color-y;
    }
    .ct-series-z .ct-slice-donut-solid {
        fill:$chart-color-z;
    }
}

html body {
    .ct-color-a {
        color: $chart-color-a;
    }
    .ct-color-b {
        color: $chart-color-b;
    }
    .ct-color-c {
        color: $chart-color-c;
    }
    .ct-color-d {
        color: $chart-color-d;
    }
    .ct-color-e {
        color: $chart-color-e;
    }
    .ct-color-f {
        color: $chart-color-f;
    }
    .ct-color-g {
        color: $chart-color-g;
    }
    .ct-color-h {
        color: $chart-color-h;
    }
    .ct-color-i {
        color: $chart-color-i;
    }
    .ct-color-j {
        color: $chart-color-j;
    }
    .ct-color-k {
        color: $chart-color-k;
    }
    .ct-color-l {
        color: $chart-color-l;
    }
    .ct-color-m {
        color: $chart-color-m;
    }
    .ct-color-n {
        color: $chart-color-n;
    }
    .ct-color-o {
        color: $chart-color-o;
    }
    .ct-color-p {
        color: $chart-color-p;
    }
    .ct-color-q {
        color: $chart-color-q;
    }
    .ct-color-r {
        color: $chart-color-r;
    }
    .ct-color-s {
        color: $chart-color-s;
    }
    .ct-color-t {
        color: $chart-color-t;
    }
    .ct-color-u {
        color: $chart-color-u;
    }
    .ct-color-v {
        color: $chart-color-v;
    }
    .ct-color-w {
        color: $chart-color-w;
    }
    .ct-color-x {
        color: $chart-color-x;
    }
    .ct-color-y {
        color: $chart-color-y;
    }
    .ct-color-z {
        color: $chart-color-z;
    }
}