.chart-value-text {
    font-size: calc(1.0em + 1vw);
    position: absolute;
    top: 46%; /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
}

.chart-sub-text {
    font-size: calc(0.2em + 1vw);
}

.chart-circle {
    position: relative;
}

.chart-circle-container {
    width: 100%;
}

.easy-pie-canvas {
    width: 100%;
}

.easypie-smart {
    width: 100%;
}

.chart-circle-container:after, .clearfix {
    display: block;
    content: '';
    clear: both;
}

@media only screen and (min-width: 576px) {
    .chart-circle-container {
        height: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .chart-circle-container {
        height: 100%;
    }
}

@media only screen and (min-width: 992px) {
    .chart-circle-container {
        height: 100%;
    }
}

@media only screen and (min-width: 1200px) {
    .chart-circle-container {
        height: 100%;
    }
}