.color1 .line {
    stroke: #009688
}

.color1 .line .fill {
    pointer-events: none
}

.color1 rect,
.color1 circle {
    fill: #009688
}

.color1 .fill {
    fill: rgba(0, 150, 136, 0.1)
}

.color1.comp .line {
    stroke: #9dd597
}

.color1.comp rect {
    fill: #9dd597
}

.color1.comp .fill {
    display: none
}

.color1.comp circle,
.color1.comp .pointer {
    fill: #9dd597
}

.color1.comp.lineshade .fill,
.color1.comp.lineshadeup .fill {
    display: block;
    fill: rgba(0, 150, 136, 0.1)
}

.color0 .line {
    stroke: #3f51b5
}

.color0 .line .fill {
    pointer-events: none
}

.color0 rect,
.color0 circle {
    fill: #3f51b5
}

.color0 .fill {
    fill: rgba(63, 81, 181, 0.1)
}

.color0.comp .line {
    stroke: #3f51b5
}

.color0.comp rect {
    fill: #89bbd8
}

.color0.comp .fill {
    display: none
}

.color0.comp circle,
.color0.comp .pointer {
    fill: #89bbd8
}

.color0.comp.lineshade .fill,
.color0.comp.lineshadeup .fill {
    display: block;
    fill: rgba(56, 128, 170, 0.1)
}

.line {
    stroke-width: 3px;
    fill: none
}

.fill {
    stroke-width: 0
}

circle {
    stroke: #FFF;
    stroke-width: 3px
}

.axis .domain {
    fill: none
}

.axis .tick line {
    stroke: #f1f5f7;
    stroke-width: 1px
}

.axis text {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    fill: #7e97a6;
    font-size: 12px
}

.ex-tooltip {
    position: absolute;
    background: #EEE;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
    -webkit-box-shadow: 0 1px 3px #000;
    -moz-box-shadow: 0 1px 3px #000;
    -ms-box-shadow: 0 1px 3px #000;
    -o-box-shadow: 0 1px 3px #000;
    box-shadow: 0 1px 3px #000;
    border-collapse: separate;
    display: none
}

.demo {
    width: 100%;
    height: 400px
}