$ac-light-gray: dedede; $ac-red: fe4a5d; $ac-orange: ff9016; $ac-yellow: fee123; $ac-green: #008476; $ac-blue: #4542ca; $ac-purple: #702277; $ac-pink: ffb3cb; $ac-lime: a5e100; $ac-teal: #00a0cc; $ac-lavendar: c19bff; $ac-gold: d39f10; $ac-brown: #7d4a32; $ac-gray: aaa; $ac-black: #000; $ac-olive: a09f29;

$ac-border: $ac-light-gray;

$ac-series: (

series-a: $ac-red,
series-b: $ac-orange,
series-c: $ac-yellow,
series-d: $ac-green,
series-e: $ac-blue,
series-f: $ac-purple,
series-g: $ac-pink, 
series-h: $ac-lime, 
series-i: $ac-teal, 
series-j: $ac-lavendar, 
series-k: $ac-gold, 
series-l: $ac-brown, 
series-m: $ac-gray, 
series-n: $ac-black, 
series-o: $ac-olive,

);

@mixin smart-box {

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
        box-sizing: border-box;

}

@mixin border-radius($radius) {

-webkit-border-radius: $radius;
   -moz-border-radius: $radius;
    -ms-border-radius: $radius;
        border-radius: $radius;

}

@mixin slow-transitions {

-webkit-transition-property: opacity background color fill stroke; 
-webkit-transition-duration: 0.20s; 
-webkit-transition-timing-function: ease-out; 
   -moz-transition-property: opacity background color fill stroke; 
   -moz-transition-duration: 0.20s; 
   -moz-transition-timing-function: ease-out; 
    -ms-transition-property: opacity background color fill stroke; 
    -ms-transition-duration: 0.20s; 
    -ms-transition-timing-function: ease-out; 
        transition-property: opacity background color fill stroke; 
        transition-duration: 0.20s; 
        transition-timing-function: ease-out;

}

text, circle { @include slow-transitions; }

.ac-clearfix:before, .ac-clearfix:after {

content: " "; /* 1 */
display: table; /* 2 */

} .ac-clearfix:after {

clear: both;

}

figure.ac-chart-container {

margin-bottom: 1em;

}

figcaption.ac-chart-title {

text-align: center;
font-weight: 700;
font-size: 1em; 
text-transform: capitalize;
margin: 0 auto 0.5em auto;

}

svg.ac-chart {

background: #fff;
max-width: 100%;
display: block; 
margin: 0 auto 1em auto;

line.ac-grid-line, rect { stroke-width: 1px; stroke: $ac-border; }
path.ac-line-chart-line { stroke-width: 1px; fill: transparent; }
rect.grid { fill: #fff; }
text { text-anchor: middle; font-size: 14px; height: 12px; }
text.anchor_start, text.ac-y-label { text-anchor: start; }
text.ac-toggleable { text-anchor: start; opacity: 0; cursor: pointer; z: 2; }
text.ac-toggleable:hover { opacity: 0.2; }
.ac-triggerable { cursor: pointer; z: 1; }

}

svg.ac-chart.ac-scatter-plot {

circle.ac-scatter-plot-dot { r: 3px; stroke-width: 3px; fill: transparent; }

}

ul.ac-chart.ac-series-legend {

@include smart-box;

width: 360px;
max-width: 100%;
margin: 0 auto;
padding: 0.25em;

li { 
  list-style: none; 
  text-align: left; 
  padding-left: 0.5em;
  margin-bottom: 0.2em;
  border-left-width: 1em; 
  border-left-style: solid;
}

}

@each $name, $color in $ac-series {

rect.ac-bar-chart-bar.#{$name} { fill: $color; }
path.ac-line-chart-line.#{$name},
  circle.ac-scatter-plot-dot.#{$name} { stroke: $color; }
li.#{$name} { border-color: $color; }

}

.ac-highlight { stroke: $ac-black !important; z: 1 !important; } .ac-visible { opacity: 1 !important; z: 2 !important; }