* {
    box-sizing: border-box;
}

div:after {
    /*content: '';*/
    display: block;
    clear: both;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Calibri;
}

.tracking-status .form-horizontal {
    margin-bottom: 50px;
}

.tracking-status .status_content {
    margin-top: 50px;
    position: relative;
    margin-bottom: 100px;
}

.tracking-status .status-timeline {
    height: 12px;
    border: 1px solid #239000;
    border-radius: 7px;
    background: #eee;
    box-shadow: 0px 0px 5px 0px #C2C2C2 inset;
}

    .tracking-status .status-timeline .status-timeline-completion {
        height: 8px;
        margin: 1px;
        border-radius: 7px;
        background: #239000;
        width: 0px;
    }

        .tracking-status .status-timeline .status-timeline-completion.c1 {
            width: 22%;
        }

        .tracking-status .status-timeline .status-timeline-completion.c2 {
            width: 46%;
        }

        .tracking-status .status-timeline .status-timeline-completion.c3 {
            width: 68%;
        }

        .tracking-status .status-timeline .status-timeline-completion.c4 {
            width: 100%;
        }
        .tracking-status .status-timeline .status-timeline-completion.c5 {
            width: 140%;
        }
          .tracking-status .status-timeline .status-timeline-completion.c6 {
            width: 160%;
        }
            .tracking-status .status-timeline .status-timeline-completion.c7 {
            width: 180%;
        }

.tracking-status .image-order-status {
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0px 0px 5px 0px #d17a0b;
    background-color: #fff;
    position: absolute;
    margin-top: -33px;
    border-radius: 50px;
}

    .tracking-status .image-order-status.disabled {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: gray;
    }

    .tracking-status .image-order-status.active {
        box-shadow: 0px 0px 5px 0px #196700;
        border: 1px solid #239000;
    }

        .tracking-status .image-order-status.active .status {
            color: #cf7400;
            text-shadow: 0px 0px 1px #777;
            width:100px;
        }

    .tracking-status .image-order-status .icon {
        height: 30px;
        width: 30px;
        background-size: contain;
        background-position: no-repeat;
    }


    .tracking-status .image-order-status .status {
        position: absolute;
        text-shadow: 1px 1px #eee;
        color: #cf7400;
        
        top: 46px;
         /*width: 10px;
        
           
         transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        left: 40px;*/
        font-size: 12px;
    }

        .tracking-status .image-order-status .status:before {
            padding-right: 5px;
            content: '➢';
        }

.tracking-status .step1 {
    left: 0;
}

    .tracking-status .step1 .icon {
        background-image: url('../images/start.png');
    }

.tracking-status .step2 {
    left: 13.5%;
}

    .tracking-status .step2 .icon {
        background-image: url('../images/second.png');
    }

.tracking-status .step3 {
    left: 27%;
}

    .tracking-status .step3 .icon {
        background-image: url('../images/third.png');
    }

.tracking-status .step4 {
    left: 40.5%;
}

    .tracking-status .step4 .icon {
        background-image: url('../images/step4.png');
    }

.tracking-status .step5 {
    left: 54%;
}

    .tracking-status .step5 .icon {
        background-image: url('../images/step5.png');
    }

.tracking-status .step6 {
    left: 67.5%;
}

    .tracking-status .step6 .icon {
        background-image: url('../images/step6.png');
    }

.tracking-status .step7 {
    left: 81%;
}



    .tracking-status .step7 .icon {
        background-image: url('../images/step7.png');
    }

    /*.tracking-status .step7 .status {
        top: 46px;
        left:67.5%;
         
        /*transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        text-align: right;
        font-weight: 600;
        font-size: 12px;
    }

        .tracking-status .step7 .status:before {
            display: none;
        }

        .tracking-status .step7 .status:after {
            content: "➢";
            padding-left: 5px;
            vertical-align: middle;
        }*/

.tracking-status .last_step {
    right: 0px;
}

    .tracking-status .last_step .icon {
        background-image: url('../images/step8.png');
    }

    .tracking-status .last_step .status {
        top: 46px;
        left: -210px;
        /*transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        text-align: right;
        font-weight: 600;
        line-height: 20px;
        font-size: 12px;
        font-family: Calibri;*/
        
    }

        .tracking-status .last_step .status:before {
            display: none;
        }

        .tracking-status .last_step .status:after {
            /*content: "➢";*/
            padding-left: 5px;
            vertical-align: middle;
        }


.container_track {
    width: 90%;
    margin: 0 auto;
}


.track_heading {
    width: 100%;
    margin: 0;
    padding: 10px 0;
    font-size: 26px;
    font-weight: 500;
}

    .track_heading span {
        border-bottom: 4px solid #d37e13;
        padding-top: 5px;
        border-radius: 3px;
    }





.progress-wrapper {
    background: #eee;
    border: solid 2px #239000;
    border-radius: 10px;
    height: 14px;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) inset;
    width: 100%;
    box-shadow: 0px 0px 3px 0px #239000;
}

.progress-bar {
    background: #239000;
    height: inherit;
}

.progress-bar-width {
    border-radius: 10px;
    width: 70%;
}

.progress-bar-anim {
    animation: progress 3s linear infinite;
    /* Don't touch this anim bar color*/
    background: linear-gradient( -45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
    /* Don't touch this */
    background-repeat: repeat-x;
    /* The size of the bars must match the background-position in the @keyframes */
    background-size: 1.5em 1.5em;
    border-radius: 10px;
    height: inherit;
    width: 100%;
}

@keyframes progress {
    to {
        background-position: 1.5em 0;
    }
}