.rect-auto,
.wppr-c100.wppr-good .wppr-slice,
.wppr-c100.wppr-very-good .wppr-slice {
clip: rect(auto, auto, auto, auto);
}
.wppr-pie,
.wppr-c100 .wppr-bar,
.wppr-c100.wppr-good .wppr-fill,
.wppr-c100.wppr-very-good .wppr-fill {
clip: rect(0em, 0.5em, 1em, 0em);
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 15px solid #333;
border-radius: 50%;
}
.wppr-pie-fill,
.wppr-c100.wppr-good .wppr-bar:after,
.wppr-c100.wppr-good .wppr-fill,
.wppr-c100.wppr-very-good .wppr-bar:after,
.wppr-c100.wppr-very-good .wppr-fill {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.wppr-c100 {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
min-width: 100px;
max-width: 120px;
height: 100%;
min-height: 100px;
max-height: 120px;
border-radius: 50%;
background-color: #ebebeb;
font-size: 120px;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.wppr-c100.center {
float: none;
margin: 0 auto;
}
.wppr-c100 > span {
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
width: 100%;
color: #333;
font-size: 33px;
font-weight: 900;
line-height: 120px;
text-align: center;
white-space: nowrap;
transition-timing-function: ease-out;
transition-duration: 0.2s;
transition-property: all;
}
.wppr-c100 .wppr-slice-center {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 15px;
}
.wppr-c100 .wppr-slice-center:after {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
content: " ";
}
.wppr-c100 .wppr-slice {
clip: rect(0em, 1em, 1em, 0.5em);
position: absolute;
width: 100%;
height: 100%;
}