.timeline {
margin-left: 0px;
margin-right: 0px;
font-size: 12px;
}

.timeline > div {
width: 100%;
display: flex;
}

.timeline > div > .label-center {
flex-grow: 1;
text-align: center;
}

.timeline .lines {
border-radius: 10px !important;
background-color: white;
height: 20px;
border: 2px solid #4c8c4a;
}

.timeline .lines div {
border-radius: 8px !important;
text-align: center;
height: 16px;
color: red;
}

.timeline .line1 {
width: 0%;
background-color: #5bc0de;
float: left;
width: auto;
-webkit-transition: width 0.5s; /* Safari */
transition: width 0.5s;
transition-timing-function: linear;
/*border-top-left-radius: 8px !important;
border-bottom-left-radius: 8px !important;*/
}

.timeline .line2 {
float: right;
width: auto;
/*border-top-right-radius: 8px !important;
border-bottom-right-radius: 8px !important;*/
}


.timeline .label1 {
float: left;
}

.timeline .label2 {
float: right;
}

.timeline .uplabel {
position: relative;
}

.timeline .uplabel div {
position: relative;
display: inline-block;
}