.crust-progressbar {

    position: relative;

}



.crust-progressbar-circle-container{

    display: flex;

}



.crust-element .crust-progressbar-line-container{

    margin-bottom: 30px

}



.crust-progressbar-line {

    position: relative;

    display: block;

    width: 100%;

    height: 10px;

    background-color: #eee;

}



.crust-progressbar-line-container .crust-progressbar-title{

    display: block;

    font-weight: 600;

    margin-bottom: 10px;

    position: relative;

    z-index: 2;

}



.crust-progressbar-line .crust-progressbar-count-wrap {

    position: absolute;

    left: 0;

    bottom: calc( 100% + 5px );

    font-size: .875rem;

    font-weight: 600;

}



.crust-progressbar-line-fill {

    display: inline-block;

    position: absolute;

    top: 50%;

    right: 0;

    width: 0;

    height: 10px;

    background-color: #ff5b4a;

    transform: translateY(-50%);

    transition: width 1500ms linear;

    overflow: hidden;

}



.crust-progressbar-triangle .crust-progressbar .crust-progressbar-line-fill{

    background: transparent none !important;

    overflow: visible;

    top: 0;

    transform: none;

}



.crust-progressbar-triangle .crust-progressbar .crust-progressbar-line-fill svg{

    position: absolute;

    width: 100%;

    height: 100%;

    bottom: 100%;

    left: 0;

    margin-bottom: 2px;

}



.crust-progressbar-triangle.crust-progressbar-line-container .crust-progressbar-title{

    margin-bottom: 20px;

}



.crust-progressbar-triangle .crust-progressbar-line .crust-progressbar-count-wrap{

    top: auto;

    bottom: 0;

    margin-bottom: -15px;

}



.crust-progressbar-circle {

    position: relative;

    width: 200px;

    height: 200px;

}



.crust-progressbar-circle .crust-progressbar-count-wrap {

    font-size: 28px;

    font-weight: 700;

}



.crust-progressbar-circle-shadow {

    width: 220px;

    height: 220px;

    padding: 10px;

    border-radius: 50%;

}



.crust-progressbar-circle-pie {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    clip-path: inset(0 0 0 50%);

}



.crust-progressbar-circle-inner {

    height: 100%;

    width: 100%;

    border-width: 12px;

    border-style: solid;

    border-color: #eeeeee;

    border-radius: 50%;

}



.crust-progressbar-circle-inner-content i{

    display: inline-block;

    margin-bottom: 15px;

}



.crust-progressbar-circle-half {

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    border-width: 12px;

    border-style: solid;

    border-color: #ff5b4a;

    border-radius: 50%;

    clip-path: inset(0 50% 0 0);

}



.crust-progressbar-circle-half-left {

    transform: rotate(0deg);

}



.crust-progressbar-circle-half-right {

    transform: rotate(180deg);

    visibility: hidden;

}



.crust-progressbar-circle-inner-content {

    position: absolute;

    top: 50%;

    width: 100%;

    transform: translateY(-50%);

    text-align: center;

}



.crust-progressbar-circle-inner-content h5{

    margin-bottom: 0

}



.crust-progressbar-half-circle {

    position: relative;

    width: 200px;

    height: 100px;

    overflow: hidden;

}



.crust-progressbar-half-circle .crust-progressbar-circle-pie {

    clip-path: inset(0 0 50% 0);

}



.crust-progressbar-half-circle .crust-progressbar-circle-half {

    clip-path: inset(50% 0 0 0);

    transform: rotate(0deg);

    transition: transform 1500ms linear;

}



.crust-progressbar-half-circle .crust-progressbar-circle-inner-content {

    top: initial;

    bottom: 0;

    transform: translateY(0);

}



.crust-progressbar-half-circle .crust-progressbar-count-wrap {

    font-size: 1.5rem;

    font-weight: 700;

}



.crust-progressbar-half-circle-after {

    position: relative;

    font-size: .8rem;

    font-weight: 400;

    clear: both;

}



.crust-progressbar-postfix-label {

    float: right;

}



.crust-progressbar-line-stripe .crust-progressbar-line-fill:after {

    content: '';

    position: absolute;

    top: 0;

    left: -35px;

    width: calc(100% + 70px);

    height: 100%;

    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

    background-size: 35px 35px;

}



.crust-progressbar-line-animate .crust-progressbar-line-fill:after {

    animation: animateStripe 2s linear infinite;

}



.crust-progressbar-line-animate-rtl .crust-progressbar-line-fill:after {

    animation: animateStripeRTL 2s linear infinite;

}



.crust-progressbar-circle-wrap > div {

    margin: 0 auto;

}



/*alignment*/



.crust-progressbar-line-container.center .crust-progressbar-line-fill{

    left: 50%;

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

}



@-webkit-keyframes animateStripe {

    0% {

        -webkit-transform: translate(0, 0);

        transform: translate(0, 0);

    }

    100% {

        -webkit-transform: translate(35px, 0);

        transform: translate(35px, 0);

    }

}



@keyframes animateStripe {

    0% {

        transform: translate(0, 0);

    }

    100% {

        transform: translate(35px, 0);

    }

}



@-webkit-keyframes animateStripeRTL {

    0% {

        -webkit-transform: translate(0, 0);

        transform: translate(0, 0);

    }

    100% {

        -webkit-transform: translate(-35px, 0);

        transform: translate(-35px, 0);

    }

}



@keyframes animateStripeRTL {

    0% {

        transform: translate(0, 0);

    }

    100% {

        transform: translate(-35px, 0);

    }

}