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

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

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

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

.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.yellow .fill {
  border-color: #FEC231
}

.percircle.green:hover>span {
  color: #000
}

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

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

.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: #FEC231
}

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

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

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

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

.gt50 .fill, .percircle .bar, .pie {
  position: absolute;
  border: .08em solid #FEC231;
  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: 20px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0;
  background-color: #ccc
}

.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: 60px
}

.percircle>span {
  position: absolute;
  z-index: 1;
  width: 100%;
  top: 50%;
  top: calc(50% - .1em);
  transform: translateY(-50%);
  height: 1em;
  font-size: .2em;
  color: #000;
  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: #f5f5f5;
  width: .84em;
  height: .84em
}

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

.percircle:hover {
  cursor: default
}

.percircle:hover>span {
  /*-webkit-transform: scale(1.3) translateY(-50%);
  transform: scale(1.3) translateY(-50%);*/
  color: #307bbb
}

.percircle:hover:after {
  /*-webkit-transform: scale(1.1);
  transform: scale(1.1)*/
}