/*
    Author : Adlur Rahman Bin Ali Omar
    Desc : CSS for step by step progress with success and failed indicator
    Example :
        <div class="stepbar">
            <ul>
                <li class="success">
                    <div class="line"></div>
                    <div class="icon"></div>
                    Step 1</li>
                <li class="failed">
                    <div class="line"></div>
                    <div class="icon"></div>
                    Step 2</li>
                <li>
                    <div class="line"></div>
                    <div class="icon"></div>
                    Step 3</li>
                <li>
                    <div class="line"></div>
                    <div class="icon"></div>
                    Step 4
                </li>
            </ul>
        </div>
*/

.stepbar{
    width: 100%;
    z-index: 0;
}

.stepbar {
    width: 100%;
}

.stepbar  li {
    text-align: center;
    list-style-type: none;
    width: 12%;
    display: inline-block;
    font-size: 12px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #7d7d7d;
}

.stepbar li .icon {
    width: 1em;
    height: 1em;
    line-height: 1em;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 1em auto;
    border-radius: 50%;
    background-color: #7d7d7d;
}

.stepbar li .line {
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: #7d7d7d;
    top: 5px;
    left: -50%;
    z-index: -1;
}

.stepbar li.success .icon, .stepbar li.failed .icon {
    border-color: #ddd;
    width: 20px;
    height: 20px;
    margin-bottom : 10px;
    color:white;
    line-height: 18px;
}

.stepbar li.success .line,.stepbar li.failed .line
{
    top:10px;
}


.stepbar li.failed {
    color: tomato;
}

.stepbar li.failed .line{
    background-color: tomato;
}
.stepbar li.failed .icon{
    background-color: white;
    border-color: tomato;
    color:tomato;
}


.stepbar li.success {
    color: green;
}
.stepbar li.success .line{
    background-color: green;
} 

.stepbar li.success .icon{
    
    background-color: white;
    border-color: green;
    color:green;
}



.stepbar li:first-child .line {
    display: none;
}