.s-timeline {
	white-space: nowrap;
	overflow: hidden;
}

.s-timeline ::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 6px;
    height: 17px;
}

.s-timeline ::-webkit-scrollbar-track {
	background-color: #e0e0e0;
}

.s-timeline ::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: #999;
}

.s-timeline p,
.s-timeline div {
	margin: 0;
	padding: 0;
}

.s-timeline .left {
	display: inline-block;
	width: 320px;
	white-space: normal;
	vertical-align: top;
}

.s-timeline .right {
	display: inline-block;
	vertical-align: top;
}

.s-timeline .body {
	z-index: 99;
}

.s-timeline .body .left .pins,
.s-timeline .body .left .main {
	overflow-y: scroll;
	direction: rtl;
}

.s-timeline .left .track-header {
	direction: ltr;
}

.s-timeline .track-title {
	display: inline-block;
	width: 70%;
}

.s-timeline .track-controls {
	display: inline-block;
	width: 30%;
}

.s-timeline .track-title p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.s-timeline .left .track-row {
	padding-right: 15px;
}

.s-timeline .left .track-controls {
	vertical-align: top;
}

.s-timeline .left .track-controls button {
	padding: 2px !important;
}

.s-timeline .body .right .track-row {
	position: relative;
	overflow: hidden;
}

.s-timeline .body.pins .left,
.s-timeline .body.pins .right {
	border-bottom: 3px solid #555;
}

.s-timeline .right {
	white-space: normal;
	overflow-y: hidden;
}

.s-timeline .header > div,
.s-timeline .scroll > div {
	background: #888;
	color: #fff;
	height: 25px;
}

.s-timeline .body .right {
	position: relative;
	overflow-x: hidden;
}

.s-timeline .body .right .main {
	position: relative;
	overflow-y: hidden;
	overflow-x: scroll;
}

.s-timeline .body .right .pins {
	overflow-x: hidden;
}

.s-timeline .body .pins .track-row:last-child {
	border-bottom: 3px solid #444;
}

.s-timeline .body .left .main .track-row:last-child,
.s-timeline .body .right .main .track-row:last-child {
    margin-bottom: 17px; /* keep these the same height of the webkit scrollbar... */
    padding-bottom: 17px; /* these are designed to prevent the horizontal scrollbar from overlapping the last timeline track */
}

.s-timeline .body .hover-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #666;
	opacity: .25;
	z-index:99;
	display: none;
	pointer-events: none;
}

.s-timeline .body .track-row.hover .hover-overlay {
	display: block;
}

.s-timeline .event-clone,
.s-timeline .body .event {
	position: absolute;
	height: 25px;
	overflow: hidden;
	user-select: none;
	cursor: pointer;
}

.s-timeline .body .track-row .event:nth-child(odd) {
    background: #6C6C6C;
	color: #fff;
	z-index: 1001;
}

.s-timeline .body .track-row .event:nth-child(even) {
	background: #878787;
    color: #fff;
}

.s-timeline .body .event-drag-original {
	display: none;
}
.s-timeline .event-clone {
	background: red;
	color: #fff;
	display: block !important;
}

.s-timeline .body .event.selected {
	background: red !important;
}

.s-timeline .body .event .event-size-e,
.s-timeline .body .event .event-size-w {
	display: none;
	cursor: ew-resize;
	position: absolute;
	width: 5px;
	height: 25px;
	top: 0;
}

.s-timeline .body .event .event-size-e {
	right: 0;
}

.s-timeline .body .event .event-size-w {
	left: 0;
}

.s-timeline .body .right .track-overlays {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	pointer-events: none;
}

.s-timeline .time .right {
	position: relative;
}

.s-timeline .body .right .track-overlays .timeline-span {
	position: absolute;
	height: 100%;
	background: #333;
	opacity: .25;
	pointer-events: none;
}

.s-timeline .time-bar {
	background: red;
	position: absolute;
	width: 3px;
	margin-left: -1px;
	top: 0px;
	height: 100%;
	left: 0;
	z-index: 1000;
	cursor: ew-resize;
}


.s-timeline .time-bar .top-handle {
	top: 0;
}

.s-timeline .time-bar .bottom-handle {
	bottom: 0;
}
.s-timeline .header .left {
	padding-right: 15px;
}

.s-timeline .scroll .right {
	overflow-x: auto;
	position: relative;
}

.s-timeline .body .track-row {
	height: 25px;
	border-bottom: 1px solid #ccc;
	position: relative;
}

.s-timeline .time {
	background: orange;
}

.s-timeline .time,
.s-timeline .time .left,
.s-timeline .time .right {
	overflow: hidden;
}

.s-timeline .time .zoom-wrapper {
	display: inline-block;
	width: calc(100% - 100px);
	padding-left: 10px;
}

.s-timeline .time .zoom-wrapper i {
	display: inline-block;
	width: 16px;
}

.s-timeline .time .zoom-wrapper .zoom {
	display: inline-block;
	width: calc(100% - 60px);
}

.s-timeline .time .current-time {
	display: inline-block;
	width: 100px;
}

.s-timeline .time .current-time > div {
	width: 100px;
	text-align: right;
}

.s-timeline .time .current-time input {
	background: gold;
	height: 12px;
	font-size: 10px;
	width: 95px;
	vertical-align: top;
	text-align: left;
	border: 0;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-right: 5px;
}

.s-timeline .bottom-scrollbar {
	height: 1px;
	background: transparent;
	position: absolute;
}

.s-timeline .time .current-time > div,
.s-timeline .time .timebar > div {
	position: relative;
	height: 12px;
	user-select: none;
	vertical-align: top;
}

.s-timeline .time .timebar > div {
	pointer-events: none;
}

.s-timeline .time span {
	top: 0px;
	font-size: 10px;
	position: absolute;
}

.s-timeline .time .current-time span {
	right: 10px;
	top: 0;
}
.s-timeline .time .right span {
	width: 150px;
	height: 10px;
}