/* Pie Chart */
.progress-pie-chart {
  width:180px;
  height: 180px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background-color: #247ba0;
}

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

.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px/2);
  top: calc(50% - 100px/2);
  width: 100px;
  height: 100px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.2em;
  color: #4c4c4c;
}

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

.progress-pie-chart {
  margin-left: 25px;margin-top: 10px;
}