.transition-all {
	-webkit-transition: all 0.4s; 
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
.flex {
	display: block;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.flex-direction-column {
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.flex-direction-row {
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
}
.flex-vertical-center {
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
}
.flex-vertical-bottom {
	-ms-flex-align: end;
	-webkit-align-items: flex-end;
	-webkit-box-align: flex-end;

	align-items: flex-end;
}
.flex-space-between {
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.flex-horizontal-center {
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}

/** Non-flex centering, sometimes doesn't work */
.non-flex-vertical-center {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
/** End of Non-flex centering */

/** Status Bar */
.status-bar {
	display: inline-block;
    height: 10px;
    width: 40px;
    border: 1px solid #88cdd3;
    border-radius: 6px;
    position: relative;
}
.status-bar-filling {
    background-color: #88cdd3;
    display: block; 
    position: absolute;
    height: 8px;
    left: 0px;
    z-index: 100;
    border: 0;
}
.status-bar.progress-one-forth .status-bar-filling {
	width: 25%;
}
.status-bar.progress-half .status-bar-filling {
	width: 50%;
}
.status-bar.progress-three-forth .status-bar-filling {
	width: 75%;
}
.status-bar.progress-completed .status-bar-filling {
	width: 100%;
}
/** End of status bar */