.circle-graph {
  width: 11.25rem;
  height: 11.25rem;
  border-radius: 50%; 
  background-color: #D8D8D8; 
  position: relative;
}

.circle-graph.gt-50 {
  background-color: #1779ba;
}

.circle-graph-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 5.625rem);
  top: calc(50% - 5.625rem);
  width: 11.25rem;
  height: 11.25rem;
  clip: rect(0, 11.25rem, 11.25rem, 5.625rem);
}

.circle-graph-progress .circle-graph-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 5.625rem);
  top: calc(50% - 5.625rem);
  width: 11.25rem;
  height: 11.25rem;
  clip: rect(0, 5.625rem, 11.25rem, 0);
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}

.gt-50 .circle-graph-progress {
  clip: rect(0, 5.625rem, 11.25rem, 0);
}

.gt-50 .circle-graph-progress .circle-graph-progress-fill {
  clip: rect(0, 11.25rem, 11.25rem, 5.625rem);
  background: #8a8a8a;
}

.circle-graph-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 7.75862rem/2);
  top: calc(50% - 7.75862rem/2);
  width: 7.75862rem;
  height: 7.75862rem;
  background: #e6e6e6;
  text-align: center;
  display: table;
  z-index: 4;
}

.circle-graph-percents .circle-graph-percents-number {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #1779ba;
}

.circle-graph-percents .circle-graph-percents-units {
  display: block;
  font-size: 1rem;
  font-weight: bold;
}

.circle-graph-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
  line-height: 0;
}

.circle-graph-percents-wrapper span {
  line-height: 1;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th { 
  border: 3px solid white;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}