/**********TIMELINE************/
div.timelineContainer {
	overflow: hidden;
	width: calc(100% - 10px);
	display: block;
	height: 180px;
	position: relative;
	padding:10px 0 0 0;
}

div.viewportCrop {
	width: 100%;
	height: 100%;
	position: absolute;
}

div.viewportCropHandle {
	cursor: ew-resize;
	position: absolute;
	bottom:0;
	right:0;
	top:0;
	left:0;
	background: rgb(230, 230, 230);
}

/**********TIMELINE ITEMS************/
div.timeline {
	position: absolute;
	top: 130px;
	height: 15px;
	width:100%;
	z-index: 4;
}

div.timelineItem {
	position: absolute;
	height: 130px;
	width:100%;
	top: 0;
}


div.timelineItem .in,
div.timelineItem .out {
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 2;
}


div.timelineItem .out {
	right: 0;
}

div.timelineItem .handle {
	width: 2px;
	height: calc(100% + 2px);
	background: rgb(230, 230, 230);
	position: absolute;
	cursor: col-resize;
	top:-2px;
}

div.timelineItem .out .handle:after {
	position: absolute;
	content: '';
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #003E86;
}

div.timelineItem .out .handle:after {
	top: 0;
	right: 0;
	transform: translateX(calc(50% - 1px)) translateY(-15px);
}

div.timelineItem .out .handle,
div.timelineItem .out .handle:after {
	background-color: #00AFF0;
}


div.timelineItem .out .handle {
	right: 0;
	bottom: 0;
	height: 112px;
}


div.timelineItem .out video {
	margin-right: 2px;
}


div.timelineItem video {
	height: calc(100% - 25px);
	width: 100%;
	margin-top: 25px;
	object-fit: cover;
	cursor: default;
	background: rgba(0, 0, 0, .7);
	overflow: hidden;
}


div.timelineItem .drag {
	position: absolute;
	top: 0px;
	height: 15px;
	left: 0;
	right: 2px;
	cursor: move;
	background: rgb(230, 230, 230);
}

div.timelineItem img{
	position: absolute;
	left: 4px;
	top: 69px;
	height: 37px;
	width:auto;
}

div.timelineItem .panClipTime {
	--background: #777;
	--quadratColor: #fff;
	--size: 4px;
	background-image: linear-gradient(to right, var(--background) var(--size), var(--quadratColor)  var(--size)), linear-gradient(to bottom, var(--background) var(--size), var(--quadratColor) var(--size)), linear-gradient(to right, var(--background) var(--size), var(--quadratColor) var(--size)), linear-gradient(to bottom, var(--background) var(--size), var(--quadratColor) var(--size)), linear-gradient(to bottom, var(--quadratColor) var(--size), var(--background) var(--size));
	background-size: calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), 100% calc(100% - var(--size) * 3);
	background-repeat: repeat-x;
	background-position: 0 var(--size), top left, 0 calc(100% - var(--size)), bottom left, 0 var(--size);
	position: absolute;
	top: 35px;
	height: 50px;
	display:none;
}

div.timelineItem.active .panClipTime{
	display:block;
}

div.timelineItem .panClipTimeCropped{
	position: absolute;
	top:20px;
	height: 65px;
	cursor: grab;
}

div.timelineItem .panClipTimeCropped > div.bg{
	position: absolute;
	cursor: grab;
	top:15px;
	left:0;
	bottom:0;
	right:0;
	background: #333;
}

div.timelineItem.active .panClipTimeCropped > div.bg{
	background: transparent;
	backdrop-filter: contrast(6);
}

div.timelineContainer.isDragging.startTime .active .panClipTimeCropped:before{
 content:'';
	position: absolute;
	top:0;
	z-index: 3;
	left:0;
	bottom:0;
	width:2px;
	background: red;
}

div.timelineContainer .drag.dragged{
	opacity: 1;
}

div.timelineContainer.isDragging div.timelineItem{
	opacity:0;
}

div.timelineContainer.isDragging.viewPort div.timelineItem,
div.timelineContainer.isDragging div.timelineItem.active{
	opacity: 1;
}

.timelineItem .drag:hover,
div.timelineItem .out .handle:hover,
div.timelineItem:not(.active) .panClipTimeCropped > div.bg:hover,
div.viewportCropHandle:hover,
div.timelineItem .out .handle:hover:after{
	background-color: #F0E318;
}

div.timelineContainer.isDragging.movieDuration .active .handle,
div.timelineContainer.isDragging.movieDuration .active .handle:after,
div.timelineContainer.isDragging.viewPort div.viewportCropHandle,
div.timelineContainer .drag.dragged{
	background: red;
}

@media (prefers-color-scheme: dark) {

}