#chartMain {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    width: 100%;
    height: 100%;
    min-height: 600px;
    float: left;
}

#chartSidebar {
    float: right;
    width: 100px;
}

#chartSequence {
    position: absolute;
    bottom: -15%;
    left: 10px;
    width: 100%;
}

#chartLegend {
    padding: 10px 0 0 3px;
}

#chartSequence text, #chartLegend text {
    font-weight: 600;
    fill: #ddd;
}

#chartTheChart {
    position: relative;
    height: 100%;
}

#chartTheChart path {
    stroke: #333;
    transition: all .25s ease;
}

#chartTheChart:hover path {
    stroke: #fff;
}

#chartTheChart path:hover {
    stroke: #f00;
}

#chartExplanation {
    position: absolute;
    left: calc(50% - 70px);
    width: 140px;
    text-align: center;
    color: white;
    z-index: 1;
}

#chartPercentage {
    font-size: calc(1.65vw + 1vh);
    margin: 0 auto;
}

#chartEndlabel {
    fill: #fff;
}

@media only screen
and (min-width: 991px)
and (max-width: 1199px) {

}

@media only screen
and (min-width: 0px)
and (max-width: 991px) {
    #chartExplanation {
        left: calc(50% - 76px);
    }

    #chartSequence {
        bottom: -20px;
    }
}

@media only screen
and (min-width: 0px)
and (max-width: 767px) {
}

@media only screen
and (min-width: 0px)
and (max-width: 367px) {
    #chartExplanation {
        left: calc(50% - 56px);
        width: 100px;
    }
}