/* Timeline Element */

.overlayTimeline .timelineElement {
	position: absolute;
	height: 100%;
	background: rgba(160, 163, 163, .6);
	pointer-events: all;
	-moz-transition-duration: 0.2s;
    -moz-transition-property: bottom;
	-webkit-transition-duration: 0.2s;
    -webkit-transition-property: bottom;
    -o-transition-duration: 0.2s;
    -o-transition-property: bottom;
	transition-duration: 0.2s;
    transition-property: bottom;
}

.overlayTimeline .timelineElement.active {
	background: rgba(160, 163, 163, 1);
}

.overlayTimeline .timelineElement.highlighted {
	background: #f8f8f8 !important;
	z-index: 100000;
}

.overlayTimeline.editable .timelineElement {
	background-color: rgba(160, 170, 175, 0.8);
}

.overlayTimeline .timelineElement.brushed {
	background: #cad4d9;
}

.overlayTimeline .timelineElement.ui-draggable:hover {
	cursor: move;
}

.overlayTimeline .timelineElement.ui-resizable .ui-resizable-handle {
	position: absolute;
	top: -2px;
	width: 3px;
	height: 100%;
	background-color: var(--primary-fg-color);
	border: 2px solid #000;
	border-radius: 3px;
	display: none;
}

.overlayTimeline .timelineElement.ui-resizable .ui-resizable-handle:hover {
	background-color: var(--primary-fg-color);
}

.overlayTimeline .timelineElement.ui-resizable .ui-resizable-handle.ui-resizable-ne {
	top: -2px;
	right: -2px;
	cursor: ne-resize;
}

.overlayTimeline .timelineElement.ui-resizable .ui-resizable-handle.ui-resizable-nw {
	top: -2px;
	left: -2px;
	cursor: nw-resize;
}

.overlayTimeline .timelineElement.ui-resizable .ui-resizable-handle.ui-resizable-se {
	bottom: -2px;
	right: -2px;
	cursor: se-resize;
}

.overlayTimeline .timelineElement.ui-resizable .ui-resizable-handle.ui-resizable-sw {
	bottom: -2px;
	left: -2px;
	cursor: sw-resize;
}

.overlayTimeline .timelineElement.ui-resizable:hover .ui-resizable-handle {
	display: block;
}

/* Overlay Element */

.overlayContainer .overlayElement {
	-webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
	position: absolute;
	background: transparent;
	visibility: hidden;
}

.overlayContainer .overlayElement.active {
	visibility: visible;
}

.overlayContainer .overlayElement.highlighted {
	box-shadow: 0 0 1px 2px #f8f8f8 !important;
}

.overlayContainer .overlayElement img {
	-webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: scale;
}

.mainContainer.editActive .overlayContainer .overlayElement.ui-draggable.brushed {
	box-shadow: 0 0 2px 1px #cfcfcf;
}

.overlayContainer .overlayElement.ui-draggable .resourceDetail {
	pointer-events: none;
}

.overlayContainer .overlayElement.ui-draggable:hover {
	cursor: move;
}

.overlayContainer .overlayElement.ui-resizable .ui-resizable-handle {
	position: absolute;
	width: 4px;
	height: 4px;
	background-color: var(--primary-fg-color);
	border: 3px solid var(--primary-bg-color);
	border-radius: 4px;
	display: none !important;
}

.overlayContainer .overlayElement.ui-resizable .ui-resizable-handle:hover {
	background-color: var(--primary-fg-color);
}

.overlayContainer .overlayElement.ui-resizable .ui-resizable-handle.ui-resizable-ne {
	top: -2px;
	right: -2px;
	cursor: ne-resize;
}

.overlayContainer .overlayElement.ui-resizable .ui-resizable-handle.ui-resizable-nw {
	top: -2px;
	left: -2px;
	cursor: nw-resize;
}

.overlayContainer .overlayElement.ui-resizable .ui-resizable-handle.ui-resizable-se {
	bottom: -2px;
	right: -2px;
	cursor: se-resize;
}

.overlayContainer .overlayElement.ui-resizable .ui-resizable-handle.ui-resizable-sw {
	bottom: -2px;
	left: -2px;
	cursor: sw-resize;
}

.overlayContainer .overlayElement.ui-resizable:hover .ui-resizable-handle {
	display: block !important;
}

/* Edit Overlay Properties */

.editPropertiesContainer .overlayOptionsTabs .message {
	float: right;
	width: 330px;
	font-size: 13px;
	line-height: 16px;
}