.circleChart+*{
    position:relative;
    }
.circleChart {
    width:240px;
    height:240px;
    border-radius:100%;
    padding:4px 4px;
    margin-bottom:-80px;
  }
  .CircleOverlay {
    width:250px;
    height:120px;
    margin-top:117px;
    margin-left:-7px;
    -webkit-transform: rotate(10deg);
    background-image: linear-gradient(90deg,transparent 45%, #f4f4f4 45%);
    }
  .CircleOverlay>div {
    width:245px;
    height:120px;
    -webkit-transform: rotate(-20deg);
    background-image: linear-gradient(270deg,transparent 45%, #f4f4f4 45%);
  }
  .CircleOverlay>div>div {
    position:relative;
    top:-111px;
    left:23px;
    border-radius:100%;
    background:#f4f4f4;
    width:222px;
    height:222px;
  }
  .CircleOverlay span {
    display:block;
    -webkit-transform: rotate(10deg);
    font-family:sans-serif;
    text-align:left;
    position:relative;
  }
  .CircleOverlay span:first-of-type {
    font-size:36px;
    font-weight:bold;
    color:#00354b;
    top:-331px;
    left:100px;
    width:200px;
    line-height:150px;
  }
  .CircleOverlay span:nth-of-type(2) {
    font-size:30px;
    position:relative;
    top:-400px;
    left:97px;  
    border-top:1px solid gray;
    width:80px;
    height:30px;
    color:gray;
  }