.percircle.dark{ background-color:#777 }

.percircle.dark .bar, .percircle.dark .fill{ border-color:#C6FF00 }

.percircle.dark > span{ color:#777 }

.percircle.dark:after{ background-color:#555 }

.percircle.dark:hover > span{ color:#C6FF00 }

.percircle.red .bar, .percircle.red .fill{ border-color:#DD5454 }

.percircle.red:hover > span{ color:#DD5454 }

.percircle.red.dark .bar, .percircle.red.dark .fill{ border-color:#F84A4A }

.percircle.red.dark:hover > span{ color:#F84A4A }

.percircle.blue .bar, .percircle.blue .fill{ border-color:#82CEFA }

.percircle.blue:hover > span{ color:#82CEFA }

.percircle.blue.dark .bar, .percircle.blue.dark .fill{ border-color:#20CCEB }

.percircle.blue.dark:hover > span{ color:#20CCEB }

.percircle.green .bar, .percircle.green .fill{ border-color:#8DEA7B }

.percircle.green:hover > span{ color:#8DEA7B }

.percircle.green.dark .bar, .percircle.green.dark .fill{ border-color:#A9FF3A }

.percircle.green.dark:hover > span{ color:#A9FF3A }

.percircle.orange .bar, .percircle.orange .fill{ border-color:#E88239 }

.percircle.orange:hover > span{ color:#E88239 }

.percircle.orange.dark .bar, .percircle.orange.dark .fill{ border-color:#DC5B00 }

.percircle.orange.dark:hover > span{ color:#DC5B00 }

.percircle.pink .bar, .percircle.pink .fill{ border-color:#FF8ED0 }

.percircle.pink:hover > span{ color:#FF8ED0 }

.percircle.pink.dark .bar, .percircle.pink.dark .fill{ border-color:#FF58B9 }

.percircle.pink.dark:hover > span{ color:#FF58B9 }

.percircle.purple .bar, .percircle.purple .fill{ border-color:#AA7EFF }

.percircle.purple:hover > span{ color:#AA7EFF }

.percircle.purple.dark .bar, .percircle.purple.dark .fill{ border-color:#7A38F7 }

.percircle.purple.dark:hover > span{ color:#7A38F7 }

.percircle.yellow .bar, .percircle.yellow .fill{ border-color:#DCBD00 }

.percircle.yellow:hover > span{ color:#DCBD00 }

.percircle.yellow.dark .bar, .percircle.yellow.dark .fill{ border-color:#FFDB00 }

.percircle.yellow.dark:hover > span{ color:#FFDB00 }

.percircle.gt50 .slice, .rect-auto{ clip:rect(auto, auto, auto, auto) }

.gt50 .fill, .percircle .bar, .pie{ position:absolute; border:.08em solid #307BBB; width:.84em; height:.84em; clip:rect(0, .5em, 1em, 0); border-radius:50%; -webkit-transform:rotate(0deg); transform:rotate(0deg) }

.bar{ -webkit-backface-visibility:hidden; backface-visibility:hidden }

.gt50 .bar:after, .gt50 .fill, .pie-fill{ -webkit-transform:rotate(180deg); transform:rotate(180deg) }

.percircle{ position:relative; font-size:120px; width:1em; height:1em; border-radius:50%; float:left; margin:0 .1em .1em 0; background-color:#E5E5E5 }

.percircle *, .percircle :after, .percircle :before{ box-sizing:content-box }

.percircle.animate:after, .percircle.animate > span{ -webkit-transition:-webkit-transform .2s ease-in-out; transition:transform .2s ease-in-out }

.percircle.animate .bar{ -webkit-transition:-webkit-transform .6s ease-in-out; transition:transform .6s ease-in-out }

.percircle.center{ float:none; margin:0 auto }

.percircle.big{ font-size:240px }

.percircle.small{ font-size:80px }

.percircle > span{ position:absolute; z-index:1; width:100%; top:50%; height:1em; margin-top:-.5em; font-size:.2em; display:block; text-align:center; white-space:nowrap }

.perclock > span{ font-size:.175em }

.percircle:after{ position:absolute; top:.08em; left:.08em; display:block; content:" "; border-radius:50%; background-color:#FFF; width:.84em; height:.84em }

.percircle .slice{ position:absolute; width:1em; height:1em; clip:rect(0, 1em, 1em, .5em) }

.percircle:hover{ cursor:default }