.timeline {

    position: relative;

    padding: 20px 0 20px;

    list-style: none;

}



.timeline:before {

    content: " ";

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 3px;

    margin-left: -1.5px;

    background-color: #eeeeee;

}



.timeline > li {

    position: relative;

    margin-bottom: 20px;

}



.timeline > li:before,

.timeline > li:after {

    content: " ";

    display: table;

}



.timeline > li:after {

    clear: both;

}



.timeline > li:before,

.timeline > li:after {

    content: " ";

    display: table;

}



.timeline > li:after {

    clear: both;

}



.timeline > li > .timeline-panel {

    float: left;

    position: relative;

    width: 46%;

    padding: 20px;

    border: 1px solid #d4d4d4;

    border-radius: 2px;

    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);

    box-shadow: 0 1px 6px rgba(0,0,0,0.175);

}



.timeline > li > .timeline-panel:before {

    content: " ";

    display: inline-block;

    position: absolute;

    top: 26px;

    right: -15px;

    border-top: 15px solid transparent;

    border-right: 0 solid #ccc;

    border-bottom: 15px solid transparent;

    border-left: 15px solid #ccc;

}



.timeline > li > .timeline-panel:after {

    content: " ";

    display: inline-block;

    position: absolute;

    top: 27px;

    right: -14px;

    border-top: 14px solid transparent;

    border-right: 0 solid #fff;

    border-bottom: 14px solid transparent;

    border-left: 14px solid #fff;

}



.timeline > li > .timeline-badge {

    z-index: 100;

    position: absolute;

    top: 16px;

    left: 50%;

    width: 50px;

    height: 50px;

    margin-left: -25px;

    border-radius: 50% 50% 50% 50%;

    text-align: center;

    font-size: 1.4em;

    line-height: 50px;

    color: #fff;

    background-color: #999999;

}



.timeline > li.timeline-inverted > .timeline-panel {

    float: right;

}



.timeline > li.timeline-inverted > .timeline-panel:before {

    right: auto;

    left: -15px;

    border-right-width: 15px;

    border-left-width: 0;

}



.timeline > li.timeline-inverted > .timeline-panel:after {

    right: auto;

    left: -14px;

    border-right-width: 14px;

    border-left-width: 0;

}



.timeline-badge.primary {

    background-color: #2e6da4 !important;

}



.timeline-badge.success {

    background-color: #3f903f !important;

}



.timeline-badge.warning {

    background-color: #f0ad4e !important;

}



.timeline-badge.danger {

    background-color: #d9534f !important;

}



.timeline-badge.info {

    background-color: #5bc0de !important;

}



.timeline-title {

    margin-top: 0;

    color: inherit;

}



.timeline-body > p,

.timeline-body > ul {

    margin-bottom: 0;

}



.timeline-body > p + p {

    margin-top: 5px;

}