/*PROGRESS*/



.order-progrss-wrap {

    margin: 40px 0;

}



.order-progrss-wrap li {

    -ms-flex-preferred-size: 0;

    flex-basis: 0;

    -webkit-box-flex: 1;

    -ms-flex-positive: 1;

    flex-grow: 1;

    text-align: center;

    font-size: 13px;

    position: relative;

    font-weight: 400;

}



.order-progrss-wrap li:before {

    width: 30px;

    height: 30px;

    line-height: 28px;

    display: block;

    font-size: 15px;

    background: #1a1e20;

    border-radius: 50%;

    margin: auto;

    padding: 0px;

    position: relative;

    z-index: 2;

    border: 2px solid #cccccc;

}



.order-progrss-wrap li:after {

    content: "";

    width: 100%;

    height: 5px;

    background: #b2b2b2;

    position: absolute;

    left: 0;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    transform: translateY(-50%);

    z-index: 0;

}

.order-progrss-wrap .step-box:before {

    font-family: "Font Awesome 5 free";

    color: #fff;

    font-weight: 900;

}

.order-progrss-wrap .step-one:before {

    content: "1";

}

.order-progrss-wrap .step-two:before {

    content: "2";

}

.order-progrss-wrap .step-three:before {

    content: "3";

}

.order-progrss-wrap li.active:after {

    background: #1dcdfe;

}

.order-progrss-wrap li.active::before {

    border-color: #1dcdfe;

}

.order-progrss-wrap li.active.complete:before {

    background: #1dcdfe;

    content: "\f00c";

}

.order-progrss-wrap li:last-child:after {

    border-top-right-radius: 10px;

    border-bottom-right-radius: 10px;

    position: absolute;

    left: -50%

}



.order-progrss-wrap li:nth-child(2):after,

.order-progrss-wrap li:nth-child(3):after {

    left: -50%

}



.order-progrss-wrap li:first-child:after {

    border-top-left-radius: 10px;

    border-bottom-left-radius: 10px;

    position: absolute;

    left: 50%

}



.order-progrss-wrap li:last-child:after {

    border-top-right-radius: 10px;

    border-bottom-right-radius: 10px

}



.order-progrss-wrap li:first-child:after {

    border-top-left-radius: 10px;

    border-bottom-left-radius: 10px

}



.order-progrss-wrap li.progressing:before {

    animation: pulse-green 2s infinite;

    background: #1dcdfe;

}



@keyframes pulse-green {

    0% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(29, 205, 254, 1);

    }

    70% {

        transform: scale(1);

        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);

    }

    100% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);

    }

}



.step-text{

    display: block;

    position: absolute;

    color: #fff;

    font-size: 15px;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    transform: translateX(-50%);

    margin-top: 7px;

}





/*END PROGRESS*/