.progress-bar {
    padding: 12px 5px;
    width: 282px;
    top: -94px;
    left: -4px;
    position: relative;
    float: left;
    /* margin: 2px 0px; */

h1 {
    p {
        margin:0 0 .4rem;
    }}
    div {
        span {
            position:relative;
            height:100%;
            background-color:#3253504f;
            display:block;
            strong {
                font-weight:normal;
                font-size:1rem;
                position:absolute;
                right:.5rem;
                top:50%;
                display:block;
                transform:translate(0,-50%);
                i {
                    
                }
            }
        }
    }
    &.horizontal {
div {
width: 100%;
            /* border-radius: .4rem; */
            background-color: #ffffff08;
            overflow: hidden;
            /* height: 1.4rem; */
            height: 30px;
}  }
    &.circular {
        div {
            svg {
                width:20rem;
                height:20rem;
                .track, .fill{
                    fill: rgba(0, 0, 0, 0);
                    stroke-width: 3;
                    transform: rotate(90deg)translate(0px, -80px);
                }
                .track{
                    stroke: #ececec;
                }
                .fill {
                    stroke: #1bbcb8;
                    stroke-dasharray: 219.99078369140625;
                    stroke-dashoffset: -219.99078369140625;
                    transition: stroke-dashoffset 1s;
                    stroke: rgb(104, 214, 198);
                }
                .value {
                    font-family: 'Open Sans';
                    fill: #000;
                    text-anchor: middle;
                }
            }
        }
    }
}

.progress-bar horizontal {
    position: relative;
    top: -245px;
    left: 278px;
}

.mp-progess-text {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 19px;
    color: #181b1e;
    text-align: center;
    align-content: center;
}

.mp-progi {
    /* background: #ffffff3d; */
    margin: -215px 0px 0px 308px;
    width: 587px;
    height: 219px;
}

.progress-title {
    position: relative;
    top: -349px;
    text-transform: uppercase;
    font-family: 'Roboto';
    font-size: 10px;
    letter-spacing: 2px;
    left: 164px;
    text-align: right;
    z-index: 5;
    color: #8f8f8f;
    float: left;
    margin: 40px 180px 0px 0px;
    display: flex;
    justify-content: flex-end;
    width: 107px;
    /* background: #fff; */
}