.c3 svg {
    position: absolute; /* fix 9999px height issue with edge */
    z-index: 1; /*put above other elements*/
}

.c3 .c3LegendSVG {
    z-index: 5;
}

.c3 .c3LegendToggler {
    z-index: 6;
}

.c3 .granularity-container {
    z-index: 9;
}

.c3 + .annotationMarkerContainer > .timeContainer {
    z-index: 2;
}

.value-down{
	animation: redToBlk 1s linear;
}
.value-up{
    animation: grnToBlk 1s linear;
}

.darkTheme .c3-legend-item-value .value-down {
    animation: redToWhtValue 1s linear;
}
.darkTheme .c3-legend-item-value .value-up {
    animation: grnToWhtValue 1s linear;
}

.darkBlueTheme .c3-legend-item-value .value-down{
    animation: redToWhtValue2 1s linear;
}

.darkBlueTheme .c3-legend-item-value .value-up{
    animation: grnToWhtValue2 1s linear;
}

.darkTheme .c3-legend-item-ratio .value-down {
    animation: redToWhtRatio 1s linear;
}
.darkTheme .c3-legend-item-ratio .value-up {
    animation: grnToWhtRatio 1s linear;
}

.darkBlueTheme .c3-legend-item-ratio .value-down{
    animation: redToWhtRatio2 1s linear;
}

.darkBlueTheme .c3-legend-item-ratio .value-up{
    animation: grnToWhtRatio2 1s linear;
}

@keyframes redToBlk {
    0% {
        fill: #b22;
    }
    45% {
        fill: #b22;
    }
    100% {
        fill: #000;
    }
}
@keyframes grnToBlk {
    0% {
        fill: #2b2;
    }
    45% {
        fill: #2b2;
    }
    100% {
        fill: #000;
    }
}

@keyframes redToWhtValue {
    0% {
        fill: #f44;
    }
    45% {
        fill: #f44;
    }
    100% {
        fill: hsl(213, 14%, 98%);
    }
}
@keyframes grnToWhtValue {
    0% {
        fill: #2c2;
    }
    45% {
        fill: #2c2;
    }
    100% {
        fill: hsl(213, 14%, 98%);
    }
}

@keyframes redToWhtRatio {
    0% {
        fill: #f44;
    }
    45% {
        fill: #f44;
    }
    100% {
        fill: hsl(213, 14%, 81%);
    }
}
@keyframes grnToWhtRatio {
    0% {
        fill: #2c2;
    }
    45% {
        fill: #2c2;
    }
    100% {
        fill: hsl(213, 14%, 81%);
    }
}

@keyframes redToWhtValue2 {
    0% {
        fill: #f44;
    }
    45% {
        fill: #f44;
    }
    100% {
        fill: hsl(200, 50%, 98%);
    }
}
@keyframes grnToWhtValue2 {
    0% {
        fill: #2c2;
    }
    45% {
        fill: #2c2;
    }
    100% {
        fill: hsl(200, 50%, 98%);
    }
}

@keyframes redToWhtRatio2 {
    0% {
        fill: #f44;
    }
    45% {
        fill: #f44;
    }
    100% {
        fill: hsl(200, 50%, 81%);
    }
}
@keyframes grnToWhtRatio2 {
    0% {
        fill: #2c2;
    }
    45% {
        fill: #2c2;
    }
    100% {
        fill: hsl(200, 50%, 81%);
    }
}

.c3-legend-background {
    opacity: 1;
    fill: rgba(255,255,255,0.75);
}

.darkTheme .c3-legend-background  {
    stroke:hsla(213, 10%, 38%, 0);
    fill: hsla(213, 10%, 18%, 0.75);
}

.darkBlueTheme .c3-legend-background   {
    stroke: hsla(200, 50%, 48%, 0);
    fill:hsla(200, 50%, 24%, 0.75);
}

:not([timeseriesLegend]) > .c3-legend-background {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0;
}

.c3-legend-item-hidden {
    opacity: .15 !important; /* sometimes disabling doesn't immediately apply hidden*/
}

.c3DisableAllLegend {
    transform: translateY(-20px);
}

.c3LegendToggler,.c3DisableAllLegend {
    cursor: pointer;
}

/* C3 SVG-based Legend Toggler */
.c3LegendToggler>rect,.c3DisableAllLegend>rect {
    stroke: hsla(213,7%,89%,.9);
    fill:white;
}


.darkTheme .c3LegendToggler>rect,
.darkTheme .c3DisableAllLegend>rect {
    stroke:hsla(213, 10%, 38%, 0);
    fill: hsla(213, 10%, 18%, .9);
}

.darkBlueTheme .c3LegendToggler>rect,
.darkBlueTheme .c3DisableAllLegend>rect  {
    stroke: hsla(200, 50%, 48%, 0);
    fill:hsl(200, 50%, 24%);
}

.c3LegendToggler[active=false]>polygon {
    transform: translate(122px,6px) rotate(0deg);
}

.c3LegendToggler[active=true]>polygon {
    transform: translate(122px,6px) rotate(180deg);
}

.c3LegendTogglerText {
    text-anchor: end;
}

.c3 text, .c3LegendToggler>polygon
{
    fill: hsl(0,0%,20%);
    font-family: LatoWeb, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
}

.darkTheme .c3 text,
.darkTheme .c3LegendToggler>polygon
{
    fill: hsl(213, 14%, 85%);
}

.darkBlueTheme .c3 text, 
.darkBlueTheme .c3LegendToggler>polygon
{
    fill: hsl(200, 50%, 85%);
}

.c3-arcs path {
    stroke-width: 0.5;
}

.lightTheme .c3-arcs path {
    stroke: #FFF;
    stroke-width: 1;
}

.darkTheme .c3-arcs path {
    stroke: hsla(213, 3%, 10%, .8);
    stroke-width: 0.4;
}

.darkBlueTheme .c3-arcs path {
    stroke: hsla(200, 50%, 20%, .8);
    stroke-width: 0.6;
}

.c3-tooltip tr {
    border: none;
}
.c3-tooltip td {
    border: none;
    color: hsl(216, 10.9%, 36.1%);
}
.darkTheme .c3-tooltip td {
    background-color: hsl(213, 5%, 10%);
    color:            hsl(213, 5%, 68%);
}
.darkBlueTheme .c3-tooltip td {
    background-color: hsl(213, 50%, 10%);
    color:            hsl(200, 10%, 68%);
}

.c3-tooltip td.value {
    text-align: left;
}

.c3-tooltip th {
    background-color: hsl(216.5, 10.1%, 55.5%);
}

.c3-tooltip-container {
    box-shadow: 0px 5px 20px 0px hsla(213,30%,5%,.56);
}

.c3-tooltip-container[sticky='true'] {
    cursor:     default;
}

.darkTheme .c3-legend-item-name {
    fill: hsl(213, 14%, 75%);
}
.darkTheme .c3-legend-item-value {
    fill: hsl(213, 14%, 98%);
}
.darkTheme .c3-legend-item-ratio {
    fill: hsl(213, 14%, 81%);
}

.darkBlueTheme .c3-legend-item-name {
    fill: hsl(200, 50%, 75%);
}
.darkBlueTheme .c3-legend-item-value {
    fill: hsl(200, 50%, 98%);
}
.darkBlueTheme .c3-legend-item-ratio {
    fill: hsl(200, 50%, 81%);
}

/* Line charts start */
.c3-axis > text {
    font-size: 12px;
}

.c3-axis > .tick > text{
    fill:hsl(0, 0%, 40%);
}

.darkTheme .c3-axis > .tick > text{
    fill:hsl(213, 10%, 55%);
}

.darkBlueTheme .c3-axis > .tick > text{
    fill:hsl(200, 50%, 70%);
}

.c3-axis line, .c3 path.domain {
    fill: none;
    stroke: none;
}
.c3-xgrid, .c3-ygrid {
    stroke-dasharray: none;
}

.c3-grid line {
    stroke: #ddd;
}

.darkTheme .c3-grid line {
    stroke: hsl(213, 5%, 25%);
}

.darkBlueTheme .c3-grid line {
    stroke: hsl(200, 50%, 30%);
}

.c3-ygrids line:first-child {
    stroke: #999;
}

.darkTheme .c3-grid line:first-child {
    stroke: hsl(213, 5%, 36%);
}

.darkBlueTheme .c3-grid line:first-child {
    stroke: hsl(200, 50%, 45%);
}
.c3-bar, .c3-chart-bars .c3-area {
    stroke-width: 1px;
}

.c3-line {
    stroke-width: 2px;
}

.c3-area {
    opacity: 1;
}

.xlabel-suffix {
  font-size: 12px;
  top: 2px;
}

.c3-chart {
  cursor: crosshair;
}

.c3-chart .c3-crosshair {
  stroke:         rgb(255, 0, 0);
  stroke-width:   1;
  pointer-events: none;
}

.c3-cursor text {
  fill:  rgb(0, 0, 0);
}
.darkTheme .c3-cursor text {
  fill:  rgb(174, 180, 188);
}
.darkBlueTheme .c3-cursor text {
  fill:  rgb(172, 198, 210);
}
.c3-cursor rect {
  fill:  rgb(247, 247, 247);
}
.darkTheme .c3-cursor rect {
  fill:  rgb(28, 30, 34);
}
.darkBlueTheme .c3-cursor rect {
  fill:  rgb(27, 42, 50);
}

.c3-cursor {
  font-size:      11px !important;
  pointer-events: none;
}

.c3-zoombox {
  fill:           #3a6ea5;
  -moz-opacity:   .20;
  -khtml-opacity: .20;
  opacity:        .20;
  filter:         alpha(opacity=20);
  overflow:       hidden;
  pointer-events: none;
}

.c3-tooltip td {
  font-size: 11px;
  padding: 2px 6px;
}
.ctChartCanvas .c3-tooltip td {
  font-size: 10px;
  padding: 0px 6px;
}
.ctChartCanvas .c3-tooltip th {
  font-size: 12px;
  padding: 1px 5px;
}
.ctChartCanvas .c3-tooltip td>span {
  width: 9px;
  height: 9px;
  margin-top: 1px;
}