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

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

.ppc-percents {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 173.9130434783px/2);
    top: calc(50% - 173.9130434783px/2);
    width: 173.9130434783px;
    height: 173.9130434783px;
    background: #449F9F;
    text-align: center;
    display: table;
}
.ppc-percents span {
    display: block;
    font-size: 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: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: #c6bfbf;
        position: relative;
    }

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

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

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

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

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

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



    .profile-page .profile .name, .mtn-80 {
        margin-top: -70px;
    }

    .pt-mb {
        padding-top: 80px;
    }
    .profile-content .container{
        padding:0 !important;
    }
    .p-mb-0{
        padding:0 !important;
    }
    #BenefactorSpace{
        margin: 10px !important;
    }
    .nav-mb{
        flex-wrap:nowrap;
        padding:0 7px;
    }
        .nav-mb .nav-item {
            width:50%;
        }
    .nav-mb .nav-link{
        min-width:auto !important;
        padding:5px 7px !important;
    }

}