.prompt_buttons button {
    width: 35%;
}

.prompt_buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.prompt_message {
    width: 90%;
}

.prompt_container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    z-index: 99999;
}

.image-tile-text {
    font-size: 1rem;
    color: white;
    padding: 0.4rem;
    font-weight: 300;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
        bottom: 0;
}

.image-tile-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    max-width: 120px;
    position: relative;
        overflow: hidden;
}

.image-tile-wrapper .timestamp {
    font-size: 0.8rem;
    color: gray;
    margin-bottom: 0.3rem;
    text-align: center;
    width: 100%;
    background-color: rgb(221, 221, 221);
    border-radius: 1rem;
}

.image-tile {
    position: relative;
    aspect-ratio: 9 / 16;
    width: 100%;
    min-height: 20px;
    height: auto;
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    border: 1px solid red;
    background-color: gray;



}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

.timer-message span {
    margin-left: 1rem;
}

.timer-message {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgb(241, 179, 179);
    padding: 0.5rem;
    text-align: center;
    display: flex;

}


.generate_imagery_button {
    margin: 4rem auto auto auto;
    border: 1px solid red;
}

.selected_audio_preview {
    box-shadow: 0 0 0 2px #3b82f6;
    border: none !important;
    border-radius: 1rem;

    box-shadow:
        inset 0 -2em 2em #3b83f63e,
        0 0 0 2px #3b82f6,
        0.3em 0.3em 1em #3b83f642;
}

.delete_button {
    display: none;
}

.favorites_button {
    font-size: 1.2rem;
}

.voice_preview_item {
    position: relative;

}

.voice_preview_item .title {
    position: absolute;
    top: -0.4rem;
    left: 1rem;
    background: white;
    font-size: 0.8rem;
    z-index: 999
}

.voice_preview_item .wrapper {
    padding: 10px;
    cursor: pointer;
    border-radius: 1rem;
    display: flex;
    gap: 8px;
    align-items: center;
    border: 1px solid lightgray;

    overflow: hidden;
    border-radius: 1rem;
    position: relative;
}

.voice_preview_item .text {
    flex: 1;
}

.voice_preview_item .play_button {
    z-index: 9999;
    --size: 2.5rem;
    --progress: 0;


    width: var(--size);
    height: var(--size);

    border-radius: 50%;
    background: conic-gradient(#3b82f6 calc(var(--progress) * 1%), rgb(208, 208, 208) 0);


    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

}


.audio-selected-voice-title {
    position: absolute;
    top: -0.4rem;
    left: 1rem;
    background: white;
    font-size: 0.8rem;
}

.collapsible_container {
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 1rem;
    font-family: sans-serif;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: right;
}

.collapsible_header {
    background-color: #dcf5fd;
    padding: 0.3rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.toggle_icon {
    margin-left: auto;
}

.collapsible_content {
    padding: 10px;
    border-top: 1px solid #ddd;
    display: flex;
    align-content: top;
    flex-direction: column;
    width: 90%;
}


#add_to_preview {
    --size: 1.5rem;
    width: var(--size);
    height: var(--size);
    font-size: calc(var(--size) /1.5);


    position: absolute;
    right: calc(1.5%);
    top: calc(50% - var(--size) / 2);
    min-width: none;

    text-align: center;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    /* border-radius: 50%;
    background-color: #2563eb; */
}
#playbackspeed {
    --size: 1.5rem;
    width: var(--size);
    height: var(--size);
    font-size: calc(var(--size) /1.5);


    position: absolute;
    right: calc(1.5%);
    top: calc(50% - var(--size) / 2);
    min-width: none;

    text-align: center;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    color: white;
    font-weight: bold;
    /* border-radius: 50%;
    background-color: #2563eb; */
}

.audio_timeline_filler {
    height: 100%;
    width: 100%;
    background-color: #007bff;
    border-radius: 5px;
}

.audio_timeline {
    z-index: 2000;
}
.audio_timeline_text_container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 0.3rem;
    display: flex;

}

.audio_timeline_text {

    width: 60%;

    font-size: 0.8rem;
    font-weight: normal;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio_timeline_time {
    width: 5rem;
    font-family: monospace;
    font-size: 0.8rem;
    text-align: center;
}

.ui_slider_container {
    position: relative;
    height: 8px;
    background-color: #376894;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    width: 100%;
    display: block;
    margin: 0 auto;
    /* display: flex;
    align-items: center;
    justify-content: center;
    text-align: left; */
}

.ui_slider_knob {
    position: absolute;
    top: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #007bff;
    transform: translateX(-50%);
    transition: background 0.2s;
    cursor: pointer;
}

.ui_slider_container:hover .ui_slider_knob {
    background-color: #0056b3;
}


/**
 * Editable Textarea Component Styles
 * This file contains styles for the component Component.newEditableTextareaComponent()
 */
.editable_textarea_with_defaults .top_row {
    display: flex;
    align-items: top;

}

.editable_textarea_with_defaults .value {
    margin-left: 10px;
    max-width: 60%;
}

.editable_textarea_with_defaults .value {
    margin-left: 10px;
}

.editable_textarea_with_defaults .dropdown_btn {
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.editable_textarea_with_defaults textarea {
    width: 90%;
    margin-top: 1rem;
}

/**
    * Editable List Component Styles
    * This file contains styles for the component Component.newEditableListComponent() 
*/
textarea.editable_input,
textarea.new_item_input {
    overflow: hidden;
    min-height: 1.5em;
    line-height: 1.5em;
    font-size: 1rem;
    padding: 6px 8px;
    box-sizing: content-box;
    /* Very important for accurate scrollHeight */
    width: 95%;
    margin: 0;
}

.editable_list {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.033);
}

.editable_list button {
    border-radius: 60px;
    color: white;

}

.editable_list_title_container {
    position: relative;
    margin: 0.5rem 0px;
    margin-bottom: 1.4rem;
}

.collapser,
.collapser:hover {

    padding: 5px;
    border-radius: 30px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
}

.editable_item {
    margin-left: 4rem;
    position: relative;
    margin-bottom: 1rem;
}

.editable_controls {
    margin-left: 4rem;
    position: relative;
}

.add_item_btn {
    position: absolute;
    left: -3.5rem;
    top: 0;
    min-width: none;
    width: 2rem;
    height: 2rem;
    font-size: 0.7rem;
    text-align: center;
    padding: 0;
}

.listContainer {
    margin-bottom: 1rem;
}

.remove_item_btn {
    position: absolute;
    left: -3.5rem;
    top: 0;
    min-width: none;
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
    text-align: center;
    padding: 0;

}


@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.marquee_text_container {
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid red;

}

.marquee_text {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

/* .tab_section_pictures {} */

#tab_section_pictures #visual_style_textarea,
#tab_section_pictures #visual_style_textarea:focus,
#tab_section_pictures #image_prompt_textarea,
#tab_section_pictures #image_prompt_textarea:focus {
    width: 90%;
    background: none;

    box-shadow: none;
    border-radius: 0;
    border: none;
    margin-bottom: 0;
}


#tab_section_pictures #second_row_div {
    display: flex;
    width: 100%;
}

#tab_section_pictures #button_container {
    display: flex;
    width: 100%;
    padding-bottom: 1rem;

    border-bottom: 1px solid #ddd;
}

#tab_section_pictures #button_container button {
    width: 5rem;
}

#info_container label {
    margin: 0;
}

#tab_section_pictures #info_container {
    font-size: 1rem;
    color: gray;
    margin-left: auto;
    display: flex;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* #tab_section_pictures #info_left {}
#tab_section_pictures #grid_container {} */

#tab_section_pictures #info_right {
    margin-left: auto;
    text-align: right;
}

.scene_editor>* {
    pointer-events: all;
}

.scene_editor {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    color: gray;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    z-index: 1002;
}

.scene_editor #dragging_area {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 75%;
    z-index: 1003;
    background: rgba(255, 0, 0, 0.2);
}
.scene_editor label {
    color: gray !important;
    text-align: left;
    width: 100%;
}

.scene_editor textarea:disabled {

    background: rgba(255, 255, 255, 0.171);
}

.canvas_container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: black;
    display: flex;
        justify-content: center;
}
/* -------------- Viewport : fills screen & supplies black bars -------------- */
#picture_video_viewport {
    position: fixed;
    inset: 0;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* -------------- Common layer rules -------------- */
#picture_video_image_layer {

    background-repeat: no-repeat;
}

/* --------- 1) SINGLE FULL PICTURE --------- */
#picture_video_image_layer.single {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
}

/* ---------- 2) SPRITE QUADRANT  (letter-box like contain) ---------- */
#picture_video_image_layer.quadrant_black_bars {
    aspect-ratio: 9 / 16;
    background-size: 200% 200% !important;
}

/*   Responsive sizing:
     – If screen is WIDE (≥ 9/16) use full height
     – If screen is NARROW (< 9/16) use full width               */
@media (min-aspect-ratio:9/16) {

    /* screen wider than video */
    #picture_video_image_layer.quadrant_black_bars {
        height: 100vh;
        width: calc(100vh * 9 / 16);
    }
                                                                                                                                                                                                                                                                .image_previewer {
                                                                                                                                                                                                                                                                    height: 100vh;
                                                                                                                                                                                                                                                                    width: calc(100vh * 9 / 16);
                                                                                                                                                                                                                                                                }
}

@media (max-aspect-ratio:9/16) {

    /* screen narrower / taller */
    #picture_video_image_layer.quadrant_black_bars {
        width: 100vw;
        height: calc(100vw * 16 / 9);
    }
                                                                                                                                                                                                                                                                .image_previewer {
                                                                                                                                                                                                                                                                    width: 100vw;
                                                                                                                                                                                                                                                                    height: calc(100vw * 16 / 9);
                                                                                                                                                                                                                                                                }
}

.quadrant {
    background-color: #0056b3;
    background-size: 200%;
    background-repeat: no-repeat;

    aspect-ratio: 9 / 16;
    width: 23%;
    min-height: 20px;

    height: 100%;
    border: 1px dashed gray;


}

.top-left {
    background-position: 0% 0%;
}

.top-right {
    background-position: 100% 0%;
}

.bottom-left {
    background-position: 0% 100%;
}

.bottom-right {
    background-position: 100% 100%;
}

.page_blocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 2rem;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

}

.upscale_button {
    background-color: #007bff;
    border-radius: 10%;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    font-size: 1.5rem;
}


.pictures_video_close_button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    border: 1px solid white;
    font-size: 1.2rem;
}

#scene_editor_close_button {

    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;

    font-size: 16px;
    border: 1px solid white;
    font-size: 1.2rem;
}

#scene_editor_prompt {
    flex: 1;
    height: 1rem;
    background: rgb(255, 255, 255);
    color: black;
    font-size: 0.8rem;
}

.no-scenes-message {
    color: gray;
    text-align: center;
    padding: 0.5rem;
    font-size: 1.2rem;
    width: 100%;
}

#playback_speed_button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    z-index: 100000;
    border: 1px solid white;
    font-size: 1.2rem;
}

#pictures_container {

    background: rgba(0, 0, 0, 0.8);

    position: absolute;
    width: 100%;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 2000;
        overflow-y: auto;
    }
    
#pictures_options {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: start;
    flex-wrap: nowrap;
    gap: 1%;
    overflow-x: auto;
    overflow-y: auto;
    padding: 0.5rem;
    scrollbar-width: thin;
}
    
#pictures_container button {
    margin: 5px auto;
}

.sceneEditorImage {
    flex: 0 0 auto;
    aspect-ratio: 9/16;
    width: 87px;
    height: auto;
    border-radius: 0.5rem;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    font-size: 2rem;
    background-color: #0056b3;
    border: 2px dashed transparent;
    position: relative;
}

.sceneEditorImageSelected {
    border: 2px dashed white;
}

/* .pictures_container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1%;
    align-items: start;
    justify-content: center;

} */



.imageNum {
    font-size: 1.2rem;
    color: white;
    text-align: center;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    background: rgba(0, 0, 0, 0.5);
}

#timelineContainer {
    position: absolute;
    width: 100%;
    height: 100px;
    top: calc(50% - 53.5px);
    z-index: 2000;
}

.bar {
    position: absolute;
    top: 40px;
    height: 25px;
    cursor: ew-resize;
    border-radius: 4px;

}

.bar .inside_label {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: bold;
    font-size: 0.8rem;
}

.bar-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.486);
    border-radius: 10px;
    color: white;
    margin: 0;
    padding: 0.2rem 0.5rem;
    text-wrap: nowrap;

    display: flex;
    justify-content: center;
    align-items: center;

}

.bar-label.top {
    top: -44px;
}

.bar-label.bottom {
    bottom: -44px;
}

.bar-handle {
    position: absolute;
    width: 20px;
    height: 100%;
    top: 0;
    cursor: ew-resize;
    background: rgba(0, 0, 0, 0.1);
}

.bar-handle.left {
    left: 0;
}

.bar-handle.right {
    right: 0;
}
#bigmode_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

#bigmode_toogle_button {
    padding: 7px 10px;
    text-align: right;
    margin-left: auto;
    float: right;
    position: absolute;
    top: 0rem;
    right: 0;
    background: black;
    font-size: 2rem;
    z-index: 9999;
    display: none;
}

/**
this is the container of all buttons in big mode
*/
#bm_ta_buttons {
    width: 96%;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

#bm_ta_buttons button {
    flex: 1;
    font-size: 1rem;
    padding: 0;
    height: 2rem;
}

#bm_mass_selection_buttons button {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    padding: 0;
    height: 2.5rem;
    width: 2.5rem;
    margin: 1rem;
}

#bm_mass_selection_buttons {
    width: 96%;
    display: flex;
    flex-direction: row;
    font-size: 1.5rem;
    gap: 0.5rem;
    padding: 0.25rem 0;
    margin: 0 auto;
    justify-content: flex-start;


}

#bm_ta_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

#bm_prompts_pagination {
    font-size: 1.2rem;
    color: lightgray;
    font-weight: bold;
}

#bm_gen_pics {
    font-size: 1.5rem;
}

#bigmode_textarea {
    width: 94%;
    height: 12rem;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    border: none;
    margin: 5px auto;
    background: transparent;
    border: 1px solid white;
    color: white;
}

#bigmode_container .fa-image {
    margin: 0.5rem;
}

.sceneEditorImage .checkbox {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 10;
    cursor: pointer;
    font-size: 1.5rem;
    color: black;
    box-shadow: 0 0 1px 2px black;
    border-radius: 50%;
    background-color: black;
}

.horizontal_centered {
    margin-top: 1rem;
    width: 96%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
#invisible_cursor_controller {
    width: 100vw;
    height: 5rem;
    z-index: 999999;
    position: absolute;
    top: 5rem;
    left: 0;
    /* background: rgba(255, 255, 255, 0.10); */
    overflow: hidden;
}

#cursor_container {
    height: 5rem;
    width: 100%;
    pointer-events: none;
    z-index: 9999999;
    position: absolute;
    top: calc(50% - 2.5rem);
    left: 0;
}

#cursor {
    color: white;
    font-size: 3rem;
    background-color: white;
    width: 1px;
    height: 3rem;
    position: absolute;
    top: -2rem;
    left: 0%;
}

.circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: white;
    width: 0.6rem;
    height: 0.6rem;
}

.cursor_circle {
    position: absolute;
    top: 0;
    left: -0.25rem;
}
#choose_video {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

#choose_video #choose_video_prev {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    border-radius: 0.5rem;
    width: 10%;
    text-align: left;

}

#choose_video #choose_video_next {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    border-radius: 0.5rem;
    width: 10%;
    text-align: right;
}

#choose_video #choose_video_label {
    font-weight: bold;
    width: 80%;
    text-align: center;
}

.image_previewer_container {
    position: absolute;
    background-color: black;
    width: 100vw;
    height: 100vh;
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image_previewer {
    position: absolute;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.unchecked_button {
    background-color: lightgray;
    color: black;
}

.unchecked_button:hover {
    background-color: lightgray;
    color: black;
}
.tile_swipe_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.3rem;
    /* box-shadow: inset 0 0 0 3px white */
}

.tile_swipe_controller {
    position: absolute;
    height: 25%;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: red;
}

.tile_more_button {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 2.2rem;
    color: white;
}

.tile_buttons_section {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}

.tile_buttons_section2 .tile_options_button {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 2.5rem !important;
}

.tile_buttons_section2 {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3rem;
    margin: 2rem;

}

.tile_options_button {
    color: white;
    font-size: 2rem;
}

#this_wrapper {
    margin-bottom: 100px;
}
.tile_selection_button {
    color: rgba(255, 255, 255, 0.25);
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.8rem;
}

.tile_selection_button.selected {
    color: white;
}
.calendar-cell {
    outline-offset: -1px;
    min-height: 30px;
    padding: 2px;
    position: relative;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e7e7e7;
}

.calendar-cell.selected {
    border: 1px solid #3b82f6;
}

#calendar-events-container {
    width: 100%;
    padding: 1rem;

}

.calendar-event {
    font-size: 1.2rem;
}
.frame {
    height: 200px;
    aspect-ratio: 9 / 16;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #376894;
    border: 2px solid rgba(0, 0, 0, 0.6);
}

.timeline_previewer {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 3rem;
    left: 0;
    z-index: 9999;
    display: flex
;
    align-items: center;
    justify-content: flex-end;
    z-index: 9999999;
    flex-direction: column;
    pointer-events: none;
}

.timeline_previewer > * {
  pointer-events: auto;   
}

.centered {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #007bff;

}

.timeline_previewer_buttons {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    padding: 1rem;
}

.timeline_previewer_buttons button{
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
}

.crop-video-bar{
    position: relative;
    width: 570.6px;
    height: 80px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 6px;
    background: rgb(17, 17, 17);
    display: flex;
    align-items: center;
    user-select: none;
    margin: 0 auto;
    border: 2px solid gray;
}

.crop_video_cursor{
    width: 3px;
    height:100%;
    background-color: #007bff;
    position:absolute;
}

.crop-video-bar-frames{
    display: flex;
    height: 100%;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.crop-video-bar-frame{
    flex: 1 1 auto;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-color: rgb(0, 0, 0);
}

.crop-video-bar-selection{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 142.648px;
    width: 427.945px;
    border-width: 3px 15px;
    border-style: solid;
    border-color: white;
    border-image: initial;
    border-radius: 5px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.crop-video-bar-handle-left{
    position: absolute;
    top: 0px;
    width: 12px;
    height: 100%;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    color: rgb(255, 255, 255);
    left: -6px;
}
.crop-video-bar-handle-right{
    position: absolute;
    top: 0px;
    width: 12px;
    height: 100%;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    color: rgb(255, 255, 255);
    right: -6px;
}
.frame_highlight{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color: rgba(229, 255, 0, 0.4);
}

#zoom_editor_preview_container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#zoom_editor_preview_image{
    aspect-ratio: 9 / 16;
    background-size: cover;
    background-position: center;
    width: auto;
    height: 50vh;
    background-color: gray;
}
#zoom_editor_preview_label{
    color:white;
    margin: 1rem 0;
    font-size: 1.5rem;
    width: 100%;
    background-color: dimgray;
    padding: 0.7rem;
    border-radius: 0.5rem;
}

#zoom_editor_preview_info_container {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;

    padding: 8px 14px;
    border-radius: 999px;

    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);

    color: #f9fafb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;

    backdrop-filter: blur(100px);
    pointer-events: none;
}

/* shared chip look (frame + seconds) */
#framesLabel,
#seconds_label {
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  font-weight: 600;
}

/* frame index */
#framesLabel {
  background: rgba(59, 130, 246, 0.22);
  color: #eaf2ff;
  text-transform: uppercase;
}

/* time in seconds */
#seconds_label {
  background: rgba(34, 197, 94, 0.22);
  color: #ecfdf5;
}

/* descriptive text */
#labelText {
  opacity: 0.9;
  white-space: nowrap;
}
.ze_frame_controller{
    font-size:2rem;
    pointer-events: all;
}
#prev_frame_button{
    margin-left: 1rem;
}