.percircleccc.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; width:1em;height:1em;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:none; display:inline-block; margin:0 0 .1em 0; background:#fff url('test.png') top center no-repeat;
           -webkit-box-shadow:  7px 7px 5px rgba(0,0,0,0.4);
-moz-box-shadow:  7px 7px 5px rgba(0,0,0,0.4);
box-shadow:  7px 7px 5px rgba(0,0,0,0.4);
}
.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; line-height:36px; font-size:.15em;color:#879298; font-family:Arial; display:block;text-align:center;white-space:nowrap;  }
.perclock>span{font-size:.175em}
.percircle:after{position:absolute;top:0.23em;left:0.23em;display:block;content:" ";border-radius:50%;background-color:#fff;width:.54em;height:.54em;
                 -webkit-box-shadow:1px 3px 3px 2px rgba(0,0,0,0.3);
-moz-box-shadow:1px 3px 3px 2px rgba(0,0,0,0.3);
box-shadow:1px 3px 3px 2px rgba(0,0,0,0.3);
}
.percircle .slice{position:absolute;width:1.5em;height:1.5em;clip:rect(0,1em,1em,.5em)}.percircle:hover{cursor:default}
.percircle:hover>span{-webkit-transform:scale(1);transform:scale(1); }.percircle:hover:after{-webkit-transform:scale(1);transform:scale(1)}