.g44-progress {
    position: relative;
    width: 100%;
    margin: 1rem 0;
    font-size: var(--size);
    --bg-color: var(--g44-gray-color);
    --progress-color: var(--g44-primary-color);
    --txt-color: var(--g44-primary-color-dark);
}

.g44-progress-bg {
    position: relative;
    width: 100%;
    height: 1.25em;
    line-height:1.25em;
    background: var(--bg-color);
    border-radius: 10em;
    overflow: hidden;
    /* box-shadow: inset 0px 0px 0.3em rgb(0 0 0 / 5%); */
}

.g44-progress-bar {
    position: absolute;
    text-align: right;
    left: 0;
    height: 100%;
    width: 0%;
    border-radius: 10em;
    background-color: var(--progress-color);
    -webkit-transition: all 1.4s ease 0s;
    -moz-transition: all 1.4s ease 0s;
    -o-transition: all 1.4s ease 0s;
    -ms-transition: all 1.4s ease 0s;
    transition: all 1.4s ease 0s;
}

.progress-move .g44-progress-bar {
    animation-name: g44-progress;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-duration: 1s;
    animation-delay: 0s;
}

.g44-progress.active-anim .g44-progress-bar {
    width: calc( var(--progress) * 1%);
}

.g44-progress-text {
    font-size: 1em;
    line-height: unset;
    padding: 0 0.5em;
    box-sizing: border-box;
    display: inline-block;
    color: var(--txt-color);
    background-color: var(--progress-color);
    box-shadow: inset 0px 0px 0.3em rgb(255 255 255 / 40%), 0px 0px 0.6em rgb(0 0 0 / 20%);
    border-radius: 10em;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease 0.6s;
    -moz-transition: opacity 0.4s ease 0.6s;
    -o-transition: opacity 0.4s ease 0.6s;
    -ms-transition: opacity 0.4s ease 0.6s;
    transition: opacity 0.4s ease 0.6s;
}

.g44-progress.active-anim .g44-progress-text {
    opacity: 1;
}

.g44-progress.progress-move.done .g44-progress-bar {
    animation: none;
}


/* Type Circle */
/*
.g44-progress.type-circle{
    max-width: 500px;
}
*/

.g44-progress.type-circle svg {
    transform: rotate(-90deg);
}

.g44-progress.type-circle .g44-progress-text {
    position: absolute;
    width: 100%;
    height: 100%;
    color: var(--progress-color);
    background: transparent;
    box-shadow: none;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:1.25em;
    opacity:0;
}
.g44-progress.active-anim .g44-progress-text {
    opacity: 1;
}

.g44-progress.type-circle svg,
.g44-progress.type-circle svg circle {
    width: 100%;
}

.g44-progress.type-circle svg circle {
    r: 44;
    stroke-width: 0.3em;
}

.g44-progress-circle-bg {
    stroke: var(--bg-color);
}
.g44-progress-circle {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity:0;
    stroke-linecap: round;
    stroke: var(--progress-color);
    -webkit-transition: all 1.4s ease 0s;
    -moz-transition: all 1.4s ease 0s;
    -o-transition: all 1.4s ease 0s;
    -ms-transition: all 1.4s ease 0s;
    transition: all 1.4s ease 0s;
}
.g44-progress.active-anim .g44-progress-circle {
    stroke-dashoffset: calc( 100 - var(--progress) );
    opacity:1;
}