.boxb{
    position: relative;
    width: 300px;
    /*height: 400px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 40px;
    /*box-shadow: 0 30px 60px rgba(0,0,0,.2);*/
  }
  
  .boxb .percent{
    position: relative;
    width: 200px;
    height: 200px;
  }
  
  
  .boxb .percent svg{
    position: relative;
    width: 200px;
    height: 200px;
  }
  
  .boxb .percent svg circle{
    width: 200px;
    height: 200px;
    fill: none;
    stroke-width: 12;
    stroke: #000000;
    transform: translate(30px,10px);
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
  }
  
  .boxb .percent svg circle:nth-child(1){
    stroke-dashoffset: 0;
    stroke: rgba(0,0,0,.85); 
  }
  
  .boxb .percent svg circle:nth-child(2){
    stroke-dashoffset: calc(440 - (440 * var(--percentage))/100);
    stroke: rgb(0, 114, 188); 
  }
  
  .boxb .percent .number {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
  }
  
  .text-title{
    font-size: large;
  }
  
  .boxb .percent .number .text-title{
    font-size: 48px;
  }
  
  .boxb .percent .number .text-title .text-body{
    font-size: 24px;
  }