@use './fonts.scss';

.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:#417df8;font-size: 62px;}
.percircle.blue:hover>span{color:#417df8}
.percircle.blue.dark .bar,.percircle.blue.dark .fill{border-color:#417df8}
.percircle.blue.dark:hover>span{color:#417df8}

.percircle.green .bar,.percircle.green .fill{border-color:#007090;font-size: 62px;}
.percircle.green:hover>span{color:#007090}
.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:#6049ca;font-size: 62px;}
.percircle.purple:hover>span{color:#6049ca}
.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:62px;width:1em;height:1em;border-radius:50%;float:left;margin:0 8px;background-color:#02c7cd}

.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: 42%;
    top: calc(40% - 0.1em);
    transform: translateY(-50%);
    height: 1em;
    font-family: "Montserrat SemiBold", sans-serif;
    font-size: 1.2rem!important;
    margin: 0!important;
    font-weight: normal;
    color: #0A2342;
    display: block;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}
.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:62px;height:62px;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)}