.epc-fps-widget{
    position:relative;
    width:100%;
    max-width:235px;
    margin:auto;
    background:transparent;
    overflow:visible;

    opacity:0;
    transition:opacity .3s ease;
}

.epcfps-gauge{
    width:100%;
    display:block;
    overflow:visible;
}

.epcfps-bg{
    fill:none;
    stroke:#a4a4a4;
    stroke-width:16;
    stroke-linecap:round;
}

.epcfps-progress{
    fill:none;

    stroke:url(#epcfpsGradient);

    stroke-width:16;

    stroke-linecap:round;

    stroke-dasharray:100;
    stroke-dashoffset:100;

    transition:stroke-dashoffset 1.8s ease;

    filter:drop-shadow(0 0 10px #0082f1);
}

.epcfps-center{
    position:absolute;

    left:50%;

    top:68%;

    transform:translate(-50%,-50%);

    text-align:center;
}

.epcfps-value{
    color:#0082f1;
    font-size:38px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.epcfps-unit{
    font-size:28px;
    font-weight:600;
}
.epcfps-finished{

    animation: epcfpsBlink 0.9s ease-in-out;

}

@keyframes epcfpsBlink{

    0%{
        filter:
            drop-shadow(0 0 8px #0082f1)
            drop-shadow(0 0 16px #0082f1);
    }

    15%{
        filter:
            drop-shadow(0 0 20px #0082f1)
            drop-shadow(0 0 40px #0082f1)
            drop-shadow(0 0 60px #0082f1);
    }

    30%{
        filter:
            drop-shadow(0 0 8px #0082f1)
            drop-shadow(0 0 16px #0082f1);
    }

    45%{
        filter:
            drop-shadow(0 0 20px #0082f1)
            drop-shadow(0 0 40px #0082f1)
            drop-shadow(0 0 60px #0082f1);
    }

    60%{
        filter:
            drop-shadow(0 0 8px #0082f1)
            drop-shadow(0 0 16px #0082f1);
    }

    75%{
        filter:
            drop-shadow(0 0 20px #0082f1)
            drop-shadow(0 0 40px #0082f1)
            drop-shadow(0 0 60px #0082f1);
    }

    100%{
        filter:
            drop-shadow(0 0 8px #0082f1)
            drop-shadow(0 0 16px #0082f1);
    }

}

.epc-fps-widget.epcfps-loaded{

    opacity:1;

}