.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

.timeline:before {
	top: 0;
	bottom: 0;
	position: absolute;
	content: " ";
	width: 1px;
	background-color: #CCCCCC;
	left: 10%;
	margin-left: -1.5px;
	margin-bottom: 40px;
}

.timeline > li {
	margin-bottom: 20px;
	position: relative;
}

.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 {
	width: 70%;
	float: left;
	border: 1px solid #d4d4d4;
	border-radius: 2px;
	padding: 20px;
	position: relative;
	background-color: #FFFFFF;
}
.timeline > li.notification-tag > .timeline-panel {
	width: 20%;
	float: left;
	border: 1px solid #d4d4d4;
	border-radius: 25px;
	padding: 5px;
	position: relative;
	background-color: #FFFFFF;
	text-align: center;
	font-family: 'Noto Sans Bold';	
}		

.timeline > li > .timeline-badge {
	color: #fff;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1.4em;
	text-align: center;
	position: absolute;
	top: 16px;
	left: 10%;
	margin-left: -25px;
	z-index: 100;
	border-top-right-radius: 50%;
	border-top-left-radius: 50%;
	border-bottom-right-radius: 50%;
	border-bottom-left-radius: 50%;
	border: 1px solid #cccccc;
}
.timeline-body.statuslist{
	width: 45%;
}
.time-schedule {
	font-size: 18px;
	color: #000000;
	margin-bottom: 0px;
}		
.time-status {
	margin-top: 0px;
	color: #777777;
}
.timeline-title {
	margin-top: 0;
	color: inherit;
}

.timeline-body > p,
.timeline-body > ul {
	margin-bottom: 0;
}

@media (max-width: 767px) {
    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px;
    }

	ul.timeline > li > .timeline-panel:before {
		border-left-width: 0;
		border-right-width: 15px;
		left: -15px;
		right: auto;
	}

	ul.timeline > li > .timeline-panel:after {
		border-left-width: 0;
		border-right-width: 14px;
		left: -14px;
		right: auto;
	}
}