/* Timeline Element */

.overlayTimeline .timelineElement {
    position: absolute;
    height: 100%;
    background: var(--semi-transparent-fg-color);
    pointer-events: none;
    -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: var(--primary-fg-color);
}

.overlayTimeline .timelineElement.highlighted {
    background: var(--primary-fg-color) !important;
    z-index: 100000;
}

.overlayTimeline.editable .timelineElement {
    pointer-events: all;
    background-color: var(--secondary-fg-color);
}

.overlayTimeline .timelineElement.brushed {
    background: var(--semi-transparent-fg-highlight-color);
}

.overlayTimeline .timelineElement.brushed.active, .overlayTimeline.editable .timelineElement.brushed {
    background-color: var(--primary-fg-color);
}

.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;
    touch-action: none;
}

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

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

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

@media (pointer: coarse) {
    .overlayTimeline .timelineElement.ui-resizable .ui-resizable-handle {
        width: 12px;
    }
    .overlayTimeline .timelineElement.ui-resizable .ui-resizable-handle.ui-resizable-e {
        right: -6px;
    }
    .overlayTimeline .timelineElement.ui-resizable .ui-resizable-handle.ui-resizable-w {
        left: -6px;
    }
}

/* 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;
    opacity: 0;
    pointer-events: none;
}

.overlayContainer .overlayElement.active {
    visibility: visible;
    pointer-events: auto;
}

/* Keep visible during exit animation */
.overlayContainer .overlayElement.animating-out {
    visibility: visible;
    pointer-events: none;
}

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.overlayContainer .overlayElement.active.anim-in-fade {
    animation: overlayFadeIn var(--overlay-anim-duration, 300ms) ease-out forwards;
}

@keyframes overlaySlideInLeft {
    from { opacity: 0; transform: translate3d(-30px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.overlayContainer .overlayElement.active.anim-in-slideLeft {
    animation: overlaySlideInLeft var(--overlay-anim-duration, 300ms) ease-out forwards;
}

@keyframes overlaySlideInRight {
    from { opacity: 0; transform: translate3d(30px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.overlayContainer .overlayElement.active.anim-in-slideRight {
    animation: overlaySlideInRight var(--overlay-anim-duration, 300ms) ease-out forwards;
}

@keyframes overlaySlideInUp {
    from { opacity: 0; transform: translate3d(0, 30px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.overlayContainer .overlayElement.active.anim-in-slideUp {
    animation: overlaySlideInUp var(--overlay-anim-duration, 300ms) ease-out forwards;
}

@keyframes overlaySlideInDown {
    from { opacity: 0; transform: translate3d(0, -30px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.overlayContainer .overlayElement.active.anim-in-slideDown {
    animation: overlaySlideInDown var(--overlay-anim-duration, 300ms) ease-out forwards;
}

@keyframes overlayZoomIn {
    from { opacity: 0; transform: translate3d(0, 0, 0) scale(0.8); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.overlayContainer .overlayElement.active.anim-in-zoom {
    animation: overlayZoomIn var(--overlay-anim-duration, 300ms) ease-out forwards;
}

/* ============================================
   EXIT ANIMATIONS
   ============================================ */

@keyframes overlayFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.overlayContainer .overlayElement.anim-out-fade {
    animation: overlayFadeOut var(--overlay-anim-duration, 300ms) ease-in forwards;
}

@keyframes overlaySlideOutLeft {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(-30px, 0, 0); }
}
.overlayContainer .overlayElement.anim-out-slideLeft {
    animation: overlaySlideOutLeft var(--overlay-anim-duration, 300ms) ease-in forwards;
}

@keyframes overlaySlideOutRight {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(30px, 0, 0); }
}
.overlayContainer .overlayElement.anim-out-slideRight {
    animation: overlaySlideOutRight var(--overlay-anim-duration, 300ms) ease-in forwards;
}

@keyframes overlaySlideOutDown {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, 30px, 0); }
}
.overlayContainer .overlayElement.anim-out-slideDown {
    animation: overlaySlideOutDown var(--overlay-anim-duration, 300ms) ease-in forwards;
}

@keyframes overlaySlideOutUp {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, -30px, 0); }
}
.overlayContainer .overlayElement.anim-out-slideUp {
    animation: overlaySlideOutUp var(--overlay-anim-duration, 300ms) ease-in forwards;
}

@keyframes overlayZoomOut {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(0, 0, 0) scale(0.8); }
}
.overlayContainer .overlayElement.anim-out-zoom {
    animation: overlayZoomOut var(--overlay-anim-duration, 300ms) ease-in forwards;
}

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

/* Hover States */

.overlayContainer .overlayElement.hasHoverStyle.active {
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.overlayContainer .overlayElement.hasHoverStyle.active:hover {
    opacity: var(--overlay-hover-opacity, 1) !important;
    transform: translate3d(0,0,0) scale(var(--overlay-hover-scale, 1));
    outline: var(--overlay-hover-outline, none);
    background-color: var(--overlay-hover-bg, transparent);
}

.mainContainer.editActive .overlayContainer .overlayElement.hasHoverStyle:hover {
    opacity: 1 !important;
    transform: translate3d(0,0,0);
    outline: none;
    background-color: transparent;
}

.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;
}

/* Appearance and placement come from generic.css; only visibility is local. */
.overlayContainer .overlayElement.ui-resizable .ui-resizable-handle {
    display: none !important;
}

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

/* Edit Overlay Properties */

#OverlayOptions > hr.overlayAppearanceSeparator:first-child {
    display: none;
}

.editPropertiesContainer .overlayOptionsTabs .ui-tabs-panel[id^="ActionOn"] .message {
    float: right;
    width: 330px;
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 0px;;
}