.progress-pie-chart {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #c6bfbf;
    position: relative;
}

    .progress-pie-chart.gt-50 {
        background-color: #0C3B43;
    }

.ppc-progress {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 60px);
    top: calc(50% - 60px);
    width: 120px;
    height: 120px;
    clip: rect(0, 120px, 120px, 60px);
}

    .ppc-progress .ppc-progress-fill {
        content: "";
        position: absolute;
        border-radius: 50%;
        left: calc(50% - 60px);
        top: calc(50% - 60px);
        width: 120px;
        height: 120px;
        clip: rect(0, 60px, 120px, 0);
        background: #0C3B43;
        transform: rotate(60deg);
    }

.gt-50 .ppc-progress {
    clip: rect(0, 60px, 120px, 0);
}

    .gt-50 .ppc-progress .ppc-progress-fill {
        clip: rect(0, 120px, 120px, 60px);
        background: #E5E5E5;
    }

.ppc-percents {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 104.3478260869px/2);
    top: calc(50% - 104.3478260869px/2);
    width: 104.3478260869px;
    height: 104.3478260869px;
    background: #449F9F;
    text-align: center;
    display: table;
}

    .ppc-percents span {
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        color: #000;
    }

.pcc-percents-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.progress-pie-chart {
    margin: auto;
}

.panel-helpbtn {
    float: left !important;
}

@media screen and (max-width: 400px) {

    .progress-pie-chart {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        position: relative;
    }

    .ppc-progress {
        content: "";
        position: absolute;
        border-radius: 50%;
        left: calc(50% - 45px);
        top: calc(50% - 45px);
        width: 90px;
        height: 90px;
        clip: rect(0, 90px, 90px, 45px);
    }

        .ppc-progress .ppc-progress-fill {
            content: "";
            position: absolute;
            border-radius: 50%;
            left: calc(50% - 45px);
            top: calc(50% - 45px);
            width: 90px;
            height: 90px;
            clip: rect(0, 45px, 90px, 0);
            transform: rotate(60deg);
        }

    .ppc-percents {
        content: "";
        position: absolute;
        border-radius: 50%;
        left: calc(50% - 78.2608695652px/2);
        top: calc(50% - 78.2608695652px/2);
        width: 78.2608695652px;
        height: 78.2608695652px;
        text-align: center;
        display: table;
    }

    .gt-50 .ppc-progress {
        clip: rect(0, 45px, 90px, 0);
    }

        .gt-50 .ppc-progress .ppc-progress-fill {
            clip: rect(0, 90px, 900px, 45px);
        }

    .ppc-percents span {
        font-size: 0.9em;
    }




}