#metrics {display:flex;flex-direction: row;flex-wrap:wrap;}
.metric {flex: 1; margin: 1em; padding: 1em; border-radius: 0.3em; background: #f1f2f3; box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.05); text-align: center; min-width: 20em;}
.metric+.metric {margin-left:0;}
.metric h3 {font-size: 100%; font-weight: 700; letter-spacing: 0.05em; margin: 0;}
.metric p {font-size: 80%; opacity: 0.5;}
.metric .graph {height: 20em;position:relative;}

[data-tooltip] {cursor: pointer;}
#tooltip {background:#000c;border-radius:3px;color:#fff;animation:tooltipin 0.2s ease-out; position:absolute;padding:0.2em 0.5em;pointer-events:none;font-size:80%;transform:translate(0%,-100%);max-width:15em;}
@keyframes tooltipin { from {opacity: 0;transform:translate(0%,-50%);} }

.ct-grid {
    stroke: rgba(0,0,0,.2);
    stroke-width: 1px;
    stroke-dasharray: 2px
}

.ct-point {
    stroke-width: 10px;
    stroke-linecap: round; 
    display:none;
}

.ct-line {
    stroke-width: 4px
}

.ct-area {
    stroke: none;
    fill-opacity: .1
}

.ct-bar {
    fill: none;
    stroke-width: 10px
}

.ct-slice-donut {
    fill: none;
    stroke-width: 60px
}

.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point,.ct-series-a .ct-slice-donut {
    stroke: #509e2f
}

.ct-series-a .ct-area,.ct-series-a .ct-slice-donut-solid,.ct-series-a .ct-slice-pie {
    fill: #509e2f
}

.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point,.ct-series-b .ct-slice-donut {
    stroke: #66b544
}

.ct-series-b .ct-area,.ct-series-b .ct-slice-donut-solid,.ct-series-b .ct-slice-pie {
    fill: #66b544
}

.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point,.ct-series-c .ct-slice-donut {
    stroke: #81c763
}

.ct-series-c .ct-area,.ct-series-c .ct-slice-donut-solid,.ct-series-c .ct-slice-pie {
    fill: #81c763
}

.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point,.ct-series-d .ct-slice-donut {
    stroke: #9dd287
}

.ct-series-d .ct-area,.ct-series-d .ct-slice-donut-solid,.ct-series-d .ct-slice-pie {
    fill: #9dd287
}

.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point,.ct-series-e .ct-slice-donut {
    stroke: #76c593
}

.ct-series-e .ct-area,.ct-series-e .ct-slice-donut-solid,.ct-series-e .ct-slice-pie {
    fill: #76c593
}

.ct-series-f .ct-bar,.ct-series-f .ct-line,.ct-series-f .ct-point,.ct-series-f .ct-slice-donut {
    stroke: #6eccb3
}

.ct-series-f .ct-area,.ct-series-f .ct-slice-donut-solid,.ct-series-f .ct-slice-pie {
    fill: #6eccb3
}

.ct-series-g .ct-bar,.ct-series-g .ct-line,.ct-series-g .ct-point,.ct-series-g .ct-slice-donut {
    stroke: #53c1c7
}

.ct-series-g .ct-area,.ct-series-g .ct-slice-donut-solid,.ct-series-g .ct-slice-pie {
    fill: #53c1c7
}

.ct-series-h .ct-bar,.ct-series-h .ct-line,.ct-series-h .ct-point,.ct-series-h .ct-slice-donut {
    stroke: #36adca
}

.ct-series-h .ct-area,.ct-series-h .ct-slice-donut-solid,.ct-series-h .ct-slice-pie {
    fill: #36adca
}

.ct-series-i .ct-bar,.ct-series-i .ct-line,.ct-series-i .ct-point,.ct-series-i .ct-slice-donut {
    stroke: #f05b4f
}

.ct-series-i .ct-area,.ct-series-i .ct-slice-donut-solid,.ct-series-i .ct-slice-pie {
    fill: #f05b4f
}

.ct-series-j .ct-bar,.ct-series-j .ct-line,.ct-series-j .ct-point,.ct-series-j .ct-slice-donut {
    stroke: #dda458
}

.ct-series-j .ct-area,.ct-series-j .ct-slice-donut-solid,.ct-series-j .ct-slice-pie {
    fill: #dda458
}

.ct-series-k .ct-bar,.ct-series-k .ct-line,.ct-series-k .ct-point,.ct-series-k .ct-slice-donut {
    stroke: #eacf7d
}

.ct-series-k .ct-area,.ct-series-k .ct-slice-donut-solid,.ct-series-k .ct-slice-pie {
    fill: #eacf7d
}

.ct-series-l .ct-bar,.ct-series-l .ct-line,.ct-series-l .ct-point,.ct-series-l .ct-slice-donut {
    stroke: #86797d
}

.ct-series-l .ct-area,.ct-series-l .ct-slice-donut-solid,.ct-series-l .ct-slice-pie {
    fill: #86797d
}

.ct-series-m .ct-bar,.ct-series-m .ct-line,.ct-series-m .ct-point,.ct-series-m .ct-slice-donut {
    stroke: #b2c326
}

.ct-series-m .ct-area,.ct-series-m .ct-slice-donut-solid,.ct-series-m .ct-slice-pie {
    fill: #b2c326
}

.ct-series-n .ct-bar,.ct-series-n .ct-line,.ct-series-n .ct-point,.ct-series-n .ct-slice-donut {
    stroke: #6188e2
}

.ct-series-n .ct-area,.ct-series-n .ct-slice-donut-solid,.ct-series-n .ct-slice-pie {
    fill: #6188e2
}

.ct-series-o .ct-bar,.ct-series-o .ct-line,.ct-series-o .ct-point,.ct-series-o .ct-slice-donut {
    stroke: #a748ca
}

.ct-series-o .ct-area,.ct-series-o .ct-slice-donut-solid,.ct-series-o .ct-slice-pie {
    fill: #a748ca
}

.ct-label {
    fill: rgba(0,0,0,.8);
    color: rgba(0,0,0,.8);
    font-size: 80%;
    line-height: 1
}

.ct-grid-background,.ct-line {
    fill: none
}

.ct-chart-bar .ct-label,.ct-chart-line .ct-label {
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.ct-chart-donut .ct-label,.ct-chart-pie .ct-label {
    dominant-baseline: central
}