.flexer, .progress-indicator {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.no-flexer, .progress-indicator.stacked {
	display: block;
}
.no-flexer-element {
	-ms-flex: 0;
	-webkit-flex: 0;
	-moz-flex: 0;
	flex: 0;
}
.flexer-element, .progress-indicator > li {
	-ms-flex: 1;
	-webkit-flex: 1;
	-moz-flex: 1;
	flex: 1;
}
.progress-indicator {
	margin: 0;
	padding: 0;
	font-size: 12px;	
	margin-bottom: 60px;
	background-color: #888888;
	height:10px;
	border-radius:20px;
}
.progress-indicator > li {
	list-style: none;
	text-align: center;
	width: auto;
	padding: 0;
	margin: 0;
	position: relative;
	text-overflow: ellipsis;
	color: #888888;
	display: block;
	line-height: 16px;
}
.progress-indicator > li:hover {
	color: #6e6e6e;
}
.progress-indicator > li .bubble {
	border-radius: 1000px;
	width: 30px;
	height: 30px;
	background-color: #888888;
	display: block;
	margin: -12px auto 0.5em auto;
	border: 2px solid #fff;
	color:#fff;
	z-index:999;
	font-size:14px;	
	line-height:26px;
}
.progress-indicator > li .bubble:before, .progress-indicator > li .bubble:after {
	display: block;
	position: absolute;
	top: 9px;
	width: 100%;
	height: 3px;
	content: '';
	
}
.progress-indicator > li .bubble:before {
	left: 0;
}
.progress-indicator > li .bubble:after {
	right: 0;
}
.progress-indicator > li.completed {
	color: green;
	background-color: #5c9641;	
}
.progress-indicator > li.completed:first-child {border-radius:20px 0px 0px 20px;}
.progress-indicator > li.completed:last-child {border-radius:0px 20px 20px 0px;}

.progress-indicator > li.completed .bubble {
	background-color: #5c9641;
	color: #fff;	
	
}
.progress-indicator > li.completed .bubble:before, .progress-indicator > li.completed .bubble:after {
	/*background-color: #65d074;*/
	border-color: #247830;
	
	
}
.progress-indicator > li a:hover .bubble {
	background-color: #5671d0;
	color: #5671d0;
	border-color: #1f306e;
}
.progress-indicator > li a:hover .bubble:before, .progress-indicator > li a:hover .bubble:after {
	background-color: #5671d0;
	border-color: #1f306e;
}
.progress-indicator > li.danger .bubble {
	background-color: #d3140f;
	color: #d3140f;
	border-color: #440605;
}
.progress-indicator > li.danger .bubble:before, .progress-indicator > li.danger .bubble:after {
	background-color: #d3140f;
	border-color: #440605;
}
.progress-indicator > li.warning .bubble {
	background-color: #edb10a;
	color: #edb10a;
	border-color: #5a4304;
}
.progress-indicator > li.warning .bubble:before, .progress-indicator > li.warning .bubble:after {
	background-color: #edb10a;
	border-color: #5a4304;
}
.progress-indicator > li.info .bubble {
	background-color: #5b32d6;
	color: #5b32d6;
	border-color: #25135d;
}
.progress-indicator > li.info .bubble:before, .progress-indicator > li.info .bubble:after {
	background-color: #5b32d6;
	border-color: #25135d;
}
.progress-indicator.stacked > li {
	text-indent: -10px;
	text-align: center;
	display: block;
}
.progress-indicator.stacked > li .bubble:before, .progress-indicator.stacked > li .bubble:after {
	left: 50%;
	margin-left: -1.5px;
	width: 3px;
	height: 100%;
}
.progress-indicator.stacked .stacked-text {
	position: relative;
	z-index: 10;
	top: 0;
	margin-left: 60% !important;
	width: 45% !important;
	display: inline-block;
	text-align: left;
	line-height: 1.2em;
}
.progress-indicator.stacked > li a {
	border: none;
}

@media handheld, screen and (max-width: 400px) {
.progress-indicator {
	font-size: 60%;
}
}

    
    
    /* A totally custom override */

    .progress-indicator.custom-complex {
        background-color: #f1f1f1;
        padding: 10px 5px;
        border: 1px solid #ddd;
        border-radius: 10px;
    }
    .progress-indicator.custom-complex > li .bubble {
        height: 12px;
        width: 99%;
        border-radius: 2px;
        box-shadow: inset -5px 0 12px rgba(0, 0, 0, 0.2);
    }
    .progress-indicator.custom-complex > li .bubble:before,
    .progress-indicator.custom-complex > li .bubble:after {
        display: none;
    }

    /* Demo for vertical bars */

    .progress-indicator.stacked {
        width: 48%;
        display: inline-block;
    }
    .progress-indicator.stacked > li {
        height: 150px;
    }
    .progress-indicator.stacked > li .bubble {
        padding: 0.1em;
    }
    .progress-indicator.stacked > li:first-of-type .bubble {
        padding: 0.5em;
    }
    .progress-indicator.stacked > li:last-of-type .bubble {
        padding: 0em;
    }

    /* Demo for Timeline vertical bars */

    #timeline-speaker-example {
        background-color: #2b4a6d;
        color: white;
        padding: 1em 2em;
        text-align: center;
        border-radius: 10px;
    }
    #timeline-speaker-example .progress-indicator {
        width: 100%;
    }
    #timeline-speaker-example .bubble {
        padding: 0;
    }
    #timeline-speaker-example .progress-indicator > li {
        color: white;
    }
    #timeline-speaker-example .time {
        position: relative;
        left: -80px;
        top: 30px;
        font-size: 130%;
        text-align: right;
        opacity: 0.6;
        font-weight: 100;
    }
    #timeline-speaker-example .current-time .time {
        font-size: 170%;
        opacity: 1;
    }
    #timeline-speaker-example .stacked-text {
        top: -37px;
        left: -50px;
    }
    #timeline-speaker-example .subdued {
        font-size: 10px;
        display: block;
    }
    #timeline-speaker-example > li:hover {
        color: #ff3d54;
    }
    #timeline-speaker-example > li:hover .bubble,
    #timeline-speaker-example > li:hover .bubble:before,
    #timeline-speaker-example > li:hover .bubble:after {
        background-color: #ff3d54;
    }
    #timeline-speaker-example .current-time .sub-info {
        font-size: 60%;
        line-height: 0.2em;
        text-transform: capitalize;
        color: #6988be;
    }
    @media handheld, screen and (max-width: 400px) {
       
        .progress-indicator.stacked {
            display: block;
            width: 100%;
        }
        .progress-indicator.stacked > li {
            height: 80px;
        }
    }