.wp-block-vsf-dce-progress-bar{
    position: relative;
    margin: 0 0 1rem 0;
}

.wp-block-vsf-dce-progress-bar p{
    margin: 0 0 0.5rem 0;
}

.wp-block-vsf-dce-progress-bar .percentageBox{
    background: #303030;
    color: #fff;
    border-radius: 2px;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1em;
    padding: 0.325rem;
    text-align: center;
    min-width: 2.875rem;
}

.wp-block-vsf-dce-progress-bar .progressBack{
    height: 5px;
    background: #909090;
    position: relative;
}
.wp-block-vsf-dce-progress-bar .progressBar{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    background: var(--vsf-primary-color);
    transition: all 600ms ease;
}
.wp-block-vsf-dce-progress-bar .progressBack:not(.show-animation) .progressBar{
    width: 0 !important;
}

/* Circular */
.wp-block-vsf-dce-progress-bar.is-style-circular .percentageBox{
    /*top: 50%;
    right: unset;
    left: calc(50% - 1.4375rem);
    transform: translateY(-50%);*/

    top:0;
    bottom:0;
    left:0;
    right:0;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wp-block-vsf-dce-progress-bar.is-style-circular p{
    text-align: center;
}

/*
 * react-circular-progressbar styles
 * All of the styles in this file are configurable!
 */

.CircularProgressbar {
    /*
     * This fixes an issue where the CircularProgressbar svg has
     * 0 width inside a "display: flex" container, and thus not visible.
     */
    width: 100%;
    /*
     * This fixes a centering issue with CircularProgressbarWithChildren:
     * https://github.com/kevinsqi/react-circular-progressbar/issues/94
     */
    vertical-align: middle;
}

.CircularProgressbar .CircularProgressbar-path {
    stroke: #3e98c7;
    stroke-linecap: round;
    -webkit-transition: stroke-dashoffset 0.5s ease 0s;
    transition: stroke-dashoffset 0.5s ease 0s;

    stroke-width: 5px;
    fill-opacity: 0;
}

.CircularProgressbar .CircularProgressbar-trail {
    stroke: #d6d6d6;
    /* Used when trail is not full diameter, i.e. when props.circleRatio is set */
    stroke-linecap: round;

    stroke-width: 5px;
    fill-opacity: 0;
}

.CircularProgressbar .CircularProgressbar-text {
    fill: #3e98c7;
    font-size: 20px;
    dominant-baseline: middle;
    text-anchor: middle;
}

.CircularProgressbar .CircularProgressbar-background {
    fill: #d6d6d6;
}

/*
 * Sample background styles. Use these with e.g.:
 *
 *   <CircularProgressbar
 *     className="CircularProgressbar-inverted"
 *     background
 *     percentage={50}
 *   />
 */
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
    fill: #3e98c7;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
    fill: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
    stroke: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
    stroke: transparent;
}