/*
<div id="pcH" class="indH h10">
   <div class="indHLC">
      <div class="indFH"></div>
      <div class="indBarH"></div>
   </div>
</div>
*/
.indH {
   font-size: 20px;
   /*margin: 20px;*/
   position: relative; /* so that children can be absolutely positioned */
   padding: 0;
   width: 400px;
   height: 400px;
   /*background-color: rgba(0,0,0,0.4); */
   border-radius: 50%;
   line-height: 400px;
}

.indH:after{
    border: none;
    position: absolute;
    top: 20px;
    left: 20px;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 360px;
    height: 360px;
    /*background-color: black;*/
    content: " ";
}
/* Text inside the control */
.indH span {
    position: absolute;
    line-height:400px;
    width:400px;
    text-align: center;
    display: block;
    color: #53777A;
    z-index: 2;
}
.indHLC { 
   /* a round circle */
   border-radius: 50%;
   width:400px;
   height:400px;
   position: absolute; /* needed for clipping */
   clip: rect(0,400px,400px, 200px); /* clips the whole left half*/ 
}
/* when p>50, don't clip left half*/
.indH.over30h .indHLC {
   clip: rect(auto,auto,auto,auto);
}
.indBarH {
   /*This is an overlayed square, that is made round with the border radius,
   then it is cut to display only the left half, then rotated clockwise
   to escape the outer clipping path.*/ 
   position: absolute; /*needed for clipping*/
   clip: rect(0, 200px,400px, 0);
   width:400px;
   height:400px;
   border-radius: 50%;
   border: 30px solid #2e426a; /*The border is 0.35 but making it larger removes visual artifacts */
   /*background-color: #4D642D;*/ /* for debug */
   box-sizing: border-box;
  
}
.indFH {
  
   border: 30px solid #2e426a; /*The border is 0.35 but making it larger removes visual artifacts */

}

/* Progress bar filling the whole right half for values above 50% */
.indH.over30h .indFH {
   /*Progress bar for the first 50%, filling the whole right half*/
   position: absolute; /*needed for clipping*/
   clip: rect(0,400px,400px, 195px);
   background-color: #2e426a;
   border-radius: 50%;
   width:400px;
   height:400px;
}

.indH:not(.over30h) .indFH{ display: none; }

@media only screen and (max-width: 400px) {
   .indH {
      font-size: 20px;
      /*margin: 20px;*/
      position: relative; /* so that children can be absolutely positioned */
      padding: 0;
      width: 380px;
      height: 380px;
      /*background-color: rgba(0,0,0,0.4); */
      border-radius: 50%;
      line-height: 380px;
   }

   .indH:after{
       border: none;
       position: absolute;
       top: 20px;
       left: 20px;
       text-align: center;
       display: block;
       border-radius: 50%;
       width: 340px;
       height: 340px;
       /*background-color: black;*/
       content: " ";
   }
   /* Text inside the control */
   .indH span {
       position: absolute;
       line-height:380px;
       width:380px;
       text-align: center;
       display: block;
       color: #53777A;
       z-index: 2;
   }
   .indHLC { 
      /* a round circle */
      border-radius: 50%;
      width:380px;
      height:380px;
      position: absolute; /* needed for clipping */
      clip: rect(0,380px,380px, 200px); /* clips the whole left half*/ 
   }
   /* when p>50, don't clip left half*/
   .indH.over30h .indHLC {
      clip: rect(auto,auto,auto,auto);
   }
   .indBarH {
      /*This is an overlayed square, that is made round with the border radius,
      then it is cut to display only the left half, then rotated clockwise
      to escape the outer clipping path.*/ 
      position: absolute; /*needed for clipping*/
      clip: rect(0, 200px,380px, 0);
      width:380px;
      height:380px;
      border-radius: 50%;
      border: 30px solid #2e426a; /*The border is 0.35 but making it larger removes visual artifacts */
      /*background-color: #4D642D;*/ /* for debug */
      box-sizing: border-box;
     
   }
   .indFH {
     
      border: 30px solid #2e426a; /*The border is 0.35 but making it larger removes visual artifacts */

   }

   /* Progress bar filling the whole right half for values above 50% */
   .indH.over30h .indFH {
      /*Progress bar for the first 50%, filling the whole right half*/
      position: absolute; /*needed for clipping*/
      clip: rect(0,380px,380px, 195px);
      background-color: #2e426a;
      border-radius: 50%;
      width:380px;
      height:380px;
   }
}

/* Progress bar rotation position */
.indH.h0 .indBarH { display: none; }
.indH.h01 .indBarH { transform: rotate(6deg); }
.indH.h02 .indBarH { transform: rotate(12deg); }
.indH.h03 .indBarH { transform: rotate(18deg); }
.indH.h04 .indBarH { transform: rotate(24deg); }
.indH.h05 .indBarH { transform: rotate(30deg); }
.indH.h06 .indBarH { transform: rotate(36deg); }
.indH.h07 .indBarH { transform: rotate(42deg); }
.indH.h08 .indBarH { transform: rotate(48deg); }
.indH.h09 .indBarH { transform: rotate(54deg); }
.indH.h10 .indBarH { transform: rotate(60deg); }
.indH.h11 .indBarH { transform: rotate(66deg); }
.indH.h12 .indBarH { transform: rotate(72deg); }
.indH.h13 .indBarH { transform: rotate(78deg); }
.indH.h14 .indBarH { transform: rotate(84deg); }
.indH.h15 .indBarH { transform: rotate(90deg); }
.indH.h16 .indBarH { transform: rotate(96deg); }
.indH.h17 .indBarH { transform: rotate(102deg); }
.indH.h18 .indBarH { transform: rotate(108deg); }
.indH.h19 .indBarH { transform: rotate(114deg); }
.indH.h20 .indBarH { transform: rotate(120deg); }
.indH.h21 .indBarH { transform: rotate(126deg); }
.indH.h22 .indBarH { transform: rotate(132deg); }
.indH.h23 .indBarH { transform: rotate(138deg); }
.indH.h24 .indBarH { transform: rotate(144deg); }
.indH.h25 .indBarH { transform: rotate(150deg); }
.indH.h26 .indBarH { transform: rotate(156deg); }
.indH.h27 .indBarH { transform: rotate(162deg); }
.indH.h28 .indBarH { transform: rotate(168deg); }
.indH.h29 .indBarH { transform: rotate(174deg); }
.indH.h30 .indBarH { transform: rotate(180deg); }
.indH.h31 .indBarH { transform: rotate(186deg); }
.indH.h32 .indBarH { transform: rotate(192deg); }
.indH.h33 .indBarH { transform: rotate(198deg); }
.indH.h34 .indBarH { transform: rotate(204deg); }
.indH.h35 .indBarH { transform: rotate(210deg); }
.indH.h36 .indBarH { transform: rotate(216deg); }
.indH.h37 .indBarH { transform: rotate(222deg); }
.indH.h38 .indBarH { transform: rotate(228deg); }
.indH.h39 .indBarH { transform: rotate(234deg); }
.indH.h40 .indBarH { transform: rotate(240deg); }
.indH.h41 .indBarH { transform: rotate(246deg); }
.indH.h42 .indBarH { transform: rotate(252deg); }
.indH.h43 .indBarH { transform: rotate(258deg); }
.indH.h44 .indBarH { transform: rotate(264deg); }
.indH.h45 .indBarH { transform: rotate(270deg); }
.indH.h46 .indBarH { transform: rotate(276deg); }
.indH.h47 .indBarH { transform: rotate(282deg); }
.indH.h48 .indBarH { transform: rotate(288deg); }
.indH.h49 .indBarH { transform: rotate(294deg); }
.indH.h50 .indBarH { transform: rotate(300deg); }
.indH.h51 .indBarH { transform: rotate(306deg); }
.indH.h52 .indBarH { transform: rotate(312deg); }
.indH.h53 .indBarH { transform: rotate(318deg); }
.indH.h54 .indBarH { transform: rotate(324deg); }
.indH.h55 .indBarH { transform: rotate(330deg); }
.indH.h56 .indBarH { transform: rotate(336deg); }
.indH.h57 .indBarH { transform: rotate(342deg); }
.indH.h58 .indBarH { transform: rotate(348deg); }
.indH.h59 .indBarH { transform: rotate(354deg); }
.indH.h60 .indBarH { transform: rotate(360deg); }