.timeline {
    background: #222429;
    color: #bcbcbc;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	position: relative;
	display: none;
}

.timeline-inner {
    border: 1px solid #000;
    position: relative;
}

.timeline-sectionInfo {
    position: relative;
    height: 100%;
	width: 100%;
    float: left;
    text-align: center;
	border-right: 1px solid #32343b;
}

.timeline-zoomRange {
	-webkit-appearance: none;
	width: calc(100% - 50px);
	margin: 0 0 0 2rem;
	padding: 1.5rem 0;
	left: 0;
	background-color: transparent;
	height: 24px;
}

.timeline-label--video::before,
.timeline-waveform-container .timeline-section--label::before {
	font-family: Imagenweb, sans-serif;
	position: absolute;
	color: #bcbcbc;
}

.timeline-zoom::before {
	position: absolute;
}

.timeline-zoom-icon,
.timeline-zoom-icon::before,
.timeline-zoom-icon::after {
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
}

.timeline-zoom-icon {
	margin: 0 .3em .37em 0;
	width: .73em;
	height: .73em;
	background-color: transparent;
	border-width: .12em;
	border-style: solid;
	border-radius: 100%;
	display: block;
	position: absolute;
	vertical-align: bottom;
}

.timeline-zoomLabel {
	font-size: 2rem;
	display: inline-block;
	position: relative;
	line-height: 1em;
	min-height: 1.02em;
	-webkit-transform: scale(.55);
	transform: scale(.55);
	top: -3px;
	left: 3px;
}

.timeline-zoom-icon::before,
.timeline-zoom-icon::after {
	content: "";
	position: absolute;
}

.timeline-zoom-icon::before {
	top: 0.55em;
	left: 0.435em;
	border-width: 0.08em 0.23em;
	border-style: solid;
	border-radius: 0 19px 19px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.timeline-zoom-icon::after {
	width: 0.36em;
	height: 0.36em;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: -webkit-gradient(linear,left bottom, left top,color-stop(39%, transparent), color-stop(39%, currentcolor), color-stop(61%, currentcolor), color-stop(61%, transparent)),
	-webkit-gradient(linear,left top, right top,color-stop(39%, transparent), color-stop(39%, currentcolor), color-stop(61%, currentcolor), color-stop(61%, transparent));
	background: linear-gradient(0deg,transparent 39%, currentcolor 39%, currentcolor 61%, transparent 61%),
	linear-gradient(90deg,transparent 39%, currentcolor 39%, currentcolor 61%, transparent 61%);
}

.timeline-label--video::before {
	content: "\e955";
	left: 20px;
}

.timeline-waveform-container .timeline-section--label::before {
	content: "\e902";
	left: 20px;
}

.timeline-sectionInfo .timeCode,
.timeline-sectionInfo .elapsed,
.timeline-sectionInfo .elapsed:hover,
.timeline-sectionInfo .timeCode:hover {
    color: #fcc015 !important;
}

.timeline-waveform-container .timeline-sectionInfo--label {
	background-color: #2c2f36;
}

/* Time adjustment input */
.timeline-sectionInfo .time_adjuster::before {
	content: "\e920";
	font-family: Imagenweb, sans-serif;
	font-size: .8rem;
	position:absolute;
	top: 3px;
	right: 35px;
}

.timeline-sectionInfo .time_adjuster:first-child::before {
	content: "\e903";
	right: unset;
	left: 35px;
}

.timeline-sectionInfo .time_adjuster,
.timeline-sectionInfo:hover .time_adjuster {
	font-size: 0;
	opacity: 1;
}

.timeline-sectionInfo .time-container .u-link {
	font-family: "Roboto", Sans-Serif;
	border-bottom: 0;
	margin: 3px 0;
}

.timeline-sectionInfo .iwTimecode_editor {
	font-size: 1rem;
	color: #ffd817;
	background-color: #32343b;
	padding: .15rem .5rem;
	border-radius: 3px;
	width: calc(100% - 1rem);
	margin-top: -.4rem;
}

.timeline-sectionInfo .iwTimecode_editor .time-container {
	height: 28px;
}

.timeline-zoomRange::-ms-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
	background: #232323;
	border-radius: 25px;
	border: 0 solid #000101;
}

.timeline-zoomRange::-moz-range-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
	background: #4a4d5d;
	border-radius: 25px;
	border: 0 solid #000101;
}

.timeline-zoomRange::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
    background: #4a4d5d;
    border-radius: 25px;
    border: 0 solid #000101;
}

.timeline-zoomRange::-moz-range-thumb {
    box-shadow: 0 0 0 #848c24, 0 0 0 #0d0d0d;
    border: 0 solid #000000;
    height: 16px;
    width: 16px;
    border-radius: 15px;
    background: #ffd817;
    cursor: pointer;
}

.timeline-zoomRange::-webkit-slider-thumb {
	box-shadow: 0 0 0 #848c24, 0 0 0 #0d0d0d;
	border: 0 solid #000000;
	height: 16px;
	width: 16px;
	border-radius: 15px;
	background: #fcc015;
	cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}

.timeline-zoomRange:focus::-webkit-slider-runnable-track {
    background: #4a4d5d;
}

.timeline-zoomRange::-ms-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
	border-radius: 25px;
	background: #f8d731;
	border-color: transparent;
	border-width: 0;
	color: transparent;
}

.timeline-zoomRange::-ms-fill-lower {
	height: 6px;
	background-color: #232323;
}

.timeline-zoomRange::-ms-fill-upper {
	height: 6px;
	background-color: #232323;
}

.timeline-zoomRange::-ms-thumb {
	box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
	border: 0 solid #000000;
	height: 15px;
	width: 15px;
	border-radius: 15px;
	background: #fcc015;
	cursor: pointer;
	margin-top: -2px;
}

.timeline-zoomRange:focus::-ms-fill-lower {
	background-color: transparent;
}

.timeline-zoomRange:focus::-ms-fill-upper {
	background-color: transparent;
}

.timeline-zoomRange::-ms-tooltip {
	display: none;
}

.timeline-time-tip.iw-tip {
	display:none;
	position: absolute;
	top:0;
}

.timeline-time-tip.iw-tip.iw-tip-show {
	display:block;
	-webkit-transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	transform: translate3d(0, -180px, 0);
}

#timeline-time-tip-chapter-bar::after,
#timeline-time-tip-body::after {
	top:36px;
}

.timeline-track-select {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 10px;
	background-color: #333232;
	color: #bcbcbc;
	border-color: #424242;
	width: 21px;
	text-align: center;
	-webkit-transition: width 0.2s ease-in-out;
	-moz-transition: width 0.2s ease-in-out;
	-o-transition: width 0.2s ease-in-out;
	transition: width 0.2s ease-in-out;
}

.timeline-track-select:hover,
.timeline-track-select:focus{
	width:inherit;
	-webkit-transition: width 0.3s ease-in-out;
	-moz-transition: width 0.3s ease-in-out;
	-o-transition: width 0.3s ease-in-out;
	transition: width 0.3s ease-in-out;
}

.timeline-track-select-option {
	font-size: 14px;
}

.timeline-section--label {
	width: calc(100% - 52px);
	text-align: left;
	margin: .75rem 0 .75rem auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.timeline-canvas {
	height: 100%;
}

.timeline-section {
	border-bottom: 1px solid #4d4d4d;
}

.timeline-section.is-empty {
	border-bottom: 0;
}

.timeline-waveform-container .timeline-section {
	border-bottom: 1px solid #232323;
}

.timeline-section:last-child,
.timeline-section--chapter {
	border: 0;
}

.timeline-canvas--sprite-layer {
	position: absolute;
	right:0;
}

.timeline-dragging-page {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*  portrait iPad 768px */
@media (min-width:48em) {
	.timeline {
		display: block;
		margin-bottom: .75rem;
	}
}