.progress_bar 
{
    margin: 4px;
    padding: 4px;
    width: 100%;
    background-color: white;
    /* border: 1px solid lightgray; */
    /* overflow: hidden; */
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px lightgray inset;
}

.progress_bar .pb_inner 
{
    position: relative;
    height: 20px;
    width: 0%;
    border-radius: 20px;
    transition: 1s;
}

.progress_bar .pb_inner .pb_val
{
    position: absolute;
   
    /* top: -39px; */
    top: -6px;
    padding: 6px;

    right: 10px;
    border-radius: 35px;
    background-color: rgba(230, 230, 230, 0.8);
    /* color: white; */

    box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.1 ),
                -2px -2px 2px -1px rgba(255, 255, 255, 0.7),

                inset 2px 2px 2px -1px rgba(0, 0, 0, 0.1 ),
                inset -2px -2px 2px -1px rgba(255, 255, 255, 0.7 )

                ;
                

    font-weight: bold;
    font-size: 16px;
}

.progress_bar .pb_inner.gradient_0_25 
{
    background: linear-gradient( to right, red, red);
}
.progress_bar .pb_inner.gradient_0_25 .pb_val
{
    right: -25px;
}

.progress_bar .pb_inner.gradient_25_50
{
    background: linear-gradient( to right, red, orange);
}
.progress_bar .pb_inner.gradient_50_75
{
    background: linear-gradient( to right, orange, lightgreen);
}
.progress_bar .pb_inner.gradient_75_99
{
    background: linear-gradient( to right, lightgreen, green);
}
.progress_bar .pb_inner.gradient_100
{
    background: linear-gradient( to right, green, green);
}