.modal-hidden {
    display: none !important;
}

.modal-visible {
    display: flex !important;
}

.crop-overlay-hidden {
    display: none !important;
}



.video-interactive {
    pointer-events: auto !important;
    z-index: 25 !important;
}

.video-non-interactive {
    pointer-events: none !important;
    z-index: auto !important;
}

.crop-handle-hidden {
    display: none !important;
}

.crop-handle-visible {
    display: block !important;
}

.timeline-play-button-hidden {
    display: none !important;
}

.timeline-play-button-visible {
    display: flex !important;
}


.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    z-index: 10000;
    font-weight: 600;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.notification.show {
    transform: translateX(0);
}

.notification.hide {
    transform: translateX(100%);
}

/*  */

.progress-bar {
    width: var(--progress-width, 0%);
    transition: width 0.3s ease;
}

.btn-active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.video-flip-horizontal {
    transform: scaleX(-1);
}

.video-flip-vertical {
    transform: scaleY(-1);
}

.video-flip-both {
    transform: scaleX(-1) scaleY(-1);
}

.video-rotate-90 {
    transform: rotate(90deg);
}

.video-rotate-180 {
    transform: rotate(180deg);
}

.video-rotate-270 {
    transform: rotate(270deg);
}





.upload-area-hidden {
    display: none !important;
}

.upload-area-visible {
    display: block !important;
}


.timeline-segment-left {
    width: var(--left-segment-width, 0%);
}

.timeline-segment-active {
    left: var(--active-segment-left, 0%);
    width: var(--active-segment-width, 100%);
}

.timeline-segment-right {
    left: var(--right-segment-left, 100%);
    width: var(--right-segment-width, 0%);
}

.timeline-handle-left {
    left: var(--left-handle-position, 3.6%);
}

.timeline-handle-right {
    left: var(--right-handle-position, 96.4%);
}

.timeline-playhead {
    left: var(--playhead-position, 5%);
}
/* 
.container-height-adjusted {
    height: var(--container-height, auto);
} */