.modal-footer {
    button {
        border: 0;
        border-radius: 10px;
        height: 40px;
    }

    .save-as-new-btn {
        position: relative;
        background-color: var(--main-purple);
        color: white;
        padding-left: 15px;
        padding-right: 15px;
        width: 130px;

        pointer-events: auto;
        -webkit-user-select: auto;
        user-select: auto;
        -moz-user-select: auto;

        transition: background-color 0.2s ease-in-out;

        .create-video-loading {
            position: absolute;
            top: 5px;
            left: 55px;
        }

        &:disabled {
            background-color: var(--grey-200);
            color: var(--main-white);
        }

        &:hover {
            background-color: var(--hover-purple);
        }
    }

    .close-btn {
        color: var(--grey-400);
        border: 1px solid var(--grey-100);
        background-color: transparent;
        font-weight: 200;
        padding-left: 15px;
        padding-right: 15px;

        transition: all 0.2s ease-in-out;

        &:hover {
            color: var(--theme-text-primary);
            border: 1px solid var(--grey-200);
        }
    }
}

.modal-title .modal-title-text {
    margin-left: 20px;
    margin-top: 4px;
    margin-bottom: auto;
    font-weight: 400;
    opacity: 1;
}

.modal-column {
    display: flex;
    flex-direction: column;
    gap: 10px;

    &.g-5 {
        gap: 5px;
    }

    &.g-15 {
        gap: 15px;
    }

    &.g-20 {
        gap: 20px;
    }

    &.g-30 {
        gap: 30px;
    }

    &.center {
        justify-content: center;
        align-items: center;
    }
}

.modal-row {
    display: flex;
    flex-direction: row;
    gap: 10px;

    &.center {
        align-items: center;
    }

    &.wrap {
        flex-wrap: wrap;
    }

    &.justify-center {
        justify-content: center;
    }

    &.space {
        justify-content: space-between;
    }

    &.g-5 {
        gap: 5px;
    }
}

.modal-overflow {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;

    input,
    select {
        font-size: var(--text-sm);
        border-radius: var(--border-radius-sm);
        border: 1px solid var(--grey-500);
        height: 30px;
    }

    label {
        font-size: 0.8rem;
        font-weight: 400;
    }

    &.disabled {
        pointer-events: none;
        opacity: 0.5;
    }
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 13px;
    cursor: pointer;
    z-index: 10;
}

.modal-body p {
    margin: 0;
}

/* Create Brand Modal */
/* #create-new-brand-modal {
    h3 {
        font-size: 1rem;
        font-weight: bold;
        margin: 0 auto;
    }

    .brand-preview {
        .scene-container {
            aspect-ratio: 16/9;
            width: 100%;
            height: 190px;
            border-radius: var(--border-radius-sm);
            background-color: var(--grey-100);
            position: relative;

            &.outro-scene-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 10px;
            }

            &.basic-scene-container {
                background-image: url('/public/img/basicscenephoto.jpg');
                background-size: cover;
            }
        }

        .textbox-preview {
            position: absolute;
            left: 0;
            bottom: 10%;
            width: 250px;
            height: 45px;
            background-color: var(--grey-300);
            border-radius: 0 5px 5px 0;
            display: flex;
            justify-content: center;
            align-items: center;

            font-size: var(--text-md);
            margin: 0;
        }

        .logo-preview {
            width: 60%;
            height: 50%;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            &.empty {
                display: none;
            }
        }

        .brand-website-preview {
            width: 100%;
            margin: 0;
            font-size: var(--text-md);
            text-align: center;
        }

        &.loading {
            .logo-preview {
                background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                background-size: 200% 200%;
                animation: gradient-streak 1s linear infinite;
                border: 1px solid transparent;
                border-radius: var(--border-radius-sm);

                img {
                    display: none;
                }
            }

            .brand-website-preview {
                background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                background-size: 200% 200%;
                animation: gradient-streak 1s linear infinite;
                border-radius: var(--border-radius-sm);

                color: transparent;
            }
        }
    }

    .brand-logo-container {
        display: flex;
        justify-content: center;

        .media-item-container {
            width: 215px;
            height: 123px;

            .media-thumnbail {
                height: 100%;
                padding: 15px;
            }
        }
    }

    .arrow-icon {
        width: 20px;
        height: 20px;
        transform: scale(1.2);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.1s ease-in-out;

        &:hover {
            transform: scale(1.4);
        }

        &.disabled {
            cursor: default;
            opacity: 0.5;
            pointer-events: none;
        }
    }

    .logo-variation-container {
        gap: 0px;

        .logo-variation {
            width: 87px;
            height: 47px;
            padding: 5px;
            flex-shrink: 0;
            background-color: var(--grey-100);
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            &.selected {
                border: 2px solid var(--main-pink);
            }
        }
    }

    .brand-search-container {
        position: relative;

        .brands-results {
            position: absolute;
            top: 60px;
            left: 0;
            width: 100%;
            height: 200px;
            background-color: var(--theme-bg-secondary);
            border: 1px solid var(--grey-200);
            border-radius: var(--border-radius-sm);
            overflow: auto;
            z-index: 100;

            .brand-item {
                padding: 10px;
                display: flex;
                gap: 5px;
                align-items: center;
                cursor: pointer;
                transition: all 0.1s ease-in-out;

                img {
                    width: 30px;
                    height: 30px;
                    object-fit: contain;
                    border-radius: 50%;
                    border: 1px solid var(--grey-500);
                }

                p {
                    font-size: var(--text-sm);
                }

                &:hover {
                    background-color: var(--grey-100);
                }
            }

            p {
                margin: 0;
                text-align: center;
            }

            #loading-message {
                margin-top: 90px;
                font-size: var(--text-sm);
                display: none;
            }

            #no-brand-message {
                margin-top: 90px;
                font-size: var(--text-sm);
                display: none;
            }

            &.loading {
                #loading-message {
                    display: block;
                }

                .brand-item {
                    display: none;
                }
            }

            &.empty {
                #no-brand-message {
                    display: block;
                }

                .brand-item {
                    display: none;
                }
            }
        }
    }

    .color-field-container {
        width: 170px;

        label {
            font-size: var(--text-sm);
            text-wrap: nowrap;
        }

        .color-box {
            width: 100%;
        }
    }

    .color-box {
        height: 30px;
        border: 1px solid var(--grey-200);
        border-radius: var(--border-radius-sm);
        position: relative;
        overflow: hidden;

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

        .color-loading-spin {
            display: none;
            position: absolute;
            top: 30%;
            left: 30%;
        }

        path {
            transition: all 0.1s ease-in-out;
        }

        &:hover {
            border-color: var(--grey-500);
        }

        &.loading {
            .color-loading-spin {
                display: block;
            }

            svg {
                display: none;
            }
        }
    }

    .font-dropdown-container {
        .fonts-container {
            position: absolute;
            bottom: 34px;
            left: 0;
        }
    }

    .undo-new-color-icon {
        cursor: pointer;

        path {
            fill: var(--grey-300);
            transition: all 0.1s ease-in-out;

            &:hover {
                fill: var(--grey-500);
            }
        }

        &.disabled {
            cursor: default;
            opacity: 0.5;
            pointer-events: none;
        }
    }

    .modal-dismiss-message {
        background-color: rgba(0, 0, 0, 0.266);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1002;

        .message-container {
            padding: 20px;
            background-color: var(--main-white);
            border-radius: var(--border-radius-sm);

            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        p {
            margin: 0;
            font-size: var(--text-sm);
        }
    }
} */

#create-new-brand-modal-2 {
    .modal-body {
        padding: 30px;
        overflow: hidden;
        position: relative;
    }

    h3 {
        font-size: var(--text-lg);
        font-weight: bold;
        margin: 0 auto;
    }

    .back-btn {
        position: absolute;
        top: 50px;
        left: 30px;
        cursor: pointer;
    }

    .next-step-btn {
        padding: 10px 35px;
        gap: 15px;
        pointer-events: all;
        margin: 0 auto;
        font-weight: bold;

        p {
            margin: 0;
            font-weight: bold;
        }
    }

    #onboarding-steps-container {
        gap: 0px;
        width: 50%;
        height: 60px;
        margin: 0 auto;
        margin-bottom: 30px;

        .step-circle {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            cursor: pointer;

            border: 1px solid var(--grey-300);
            border-radius: 50%;
            width: 30px;
            height: 30px;

            svg {
                opacity: 0;
                margin-top: 2px;
                margin-left: 2px;
            }

            p {
                width: 150px;
                position: absolute;
                font-size: var(--text-sm);
                bottom: -110%;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;

                transition: all 0.1s ease-in-out;
            }

            &.completed {
                background-color: var(--main-pink);
                border: 1px solid var(--main-pink);

                svg {
                    opacity: 1;
                }
            }

            &.current {
                p {
                    font-weight: bold;
                }
            }

            &:hover {
                p {
                    font-weight: bold;
                }
            }

            &.disabled {
                cursor: default;
                pointer-events: none;

                p {
                    font-weight: normal;
                }
            }
        }

        .step-line {
            width: 100%;
            height: 1px;
            background-color: var(--grey-300);
            position: relative;

            .completed-line {
                position: absolute;
                top: 0;
                left: 0;
                background-color: var(--main-pink);
                height: 100%;
                width: 0%;
                transition: 0.4s ease-in-out;
            }

            &.completed {
                .completed-line {
                    width: 100%;
                }
            }
        }
    }

    .brand-step {
        height: 700px;
    }

    /* Step 0 */
    .welcome-brand-step {
        align-items: center;
        gap: 20px;
        transition: all 0.3s ease-in-out;

        h3 {
            margin-bottom: 10px;
        }

        h5 {
            font-size: var(--text-md);
            margin: 0;
        }

        #skip-onboarding {
            text-decoration: underline;
            text-align: center;
            color: var(--grey-400);
            cursor: pointer;
            transition: all 0.1s ease-in-out;

            &:hover {
                color: var(--grey-500);
            }

            &.disabled {
                cursor: default;
                opacity: 0.5;
                pointer-events: none;
            }
        }

        .choice-description {
            font-size: var(--text-sm);
            text-align: center;
            margin: 0;
            color: var(--grey-300);
            text-wrap: nowrap;
        }

        .outline-btn {
            padding: 15px 30px;
            gap: 20px;
            color: var(--grey-500);
        }

        .example-brand-logo {
            height: 50px;
            width: 50px;
            border-radius: var(--border-radius-md);
            background-color: var(--grey-500);
            padding: 5px;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .hide-on-skip {
            opacity: 0.4;
            pointer-events: none;
        }
    }

    /* Step 1 */
    .search-brand-step {
        height: 370px;
        align-items: center;
        gap: 20px;
        transition: all 0.3s ease-in-out;

        .search-brand-container {
            width: 100%;
            align-items: center;
            gap: 15px;
            padding: 10px 15px;
            border-radius: var(--border-radius-md);
            border: 1px solid var(--grey-500);
            overflow: hidden;

            input {
                border: none;
                padding: 5px;
                width: 100%;
                font-size: var(--text-md);
            }

            .remove-search-btn {
                width: 20px;
                cursor: pointer;
                display: none;

                path {
                    fill: var(--grey-300);
                    transition: all 0.1s ease-in-out;
                }

                &:hover {
                    path {
                        fill: var(--grey-500);
                    }
                }
            }

            &.input {
                .remove-search-btn {
                    display: block;
                }
            }
        }

        .brand-results-container {
            display: none;
            width: 100%;
            height: 250px;
            border: 1px solid var(--grey-500);
            border-radius: var(--border-radius-md);
            overflow: hidden;

            .brand-item {
                padding: 10px 15px;
                display: flex;
                gap: 15px;
                align-items: center;
                cursor: pointer;
                transition: all 0.1s ease-in-out;

                .brand-logo {
                    width: 30px;
                    height: 30px;
                    flex-shrink: 0;
                    border-radius: 50%;
                    border: 1px solid var(--grey-500);
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }

                .brand-name {
                    width: 100%;
                    font-size: var(--text-md);
                    font-weight: bold;
                }

                .brand-website {
                    color: var(--grey-400);
                    font-size: var(--text-sm);
                }

                &:hover {
                    background-color: var(--grey-100);
                }

                &.loading {
                    .brand-logo {
                        background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                        background-size: 200% 200%;
                        animation: gradient-streak 1s linear infinite;
                        border: 1px solid transparent;

                        img {
                            display: none;
                        }
                    }

                    .brand-name {
                        width: 50%;
                        border-radius: var(--border-radius-sm);
                        background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                        background-size: 200% 200%;
                        animation: gradient-streak 1s linear infinite;
                        border-radius: var(--border-radius-sm);
                        color: transparent;
                    }

                    .brand-website {
                        margin-left: auto;
                        width: 10%;
                        border-radius: var(--border-radius-sm);
                        background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                        background-size: 200% 200%;
                        animation: gradient-streak 1s linear infinite;
                        border-radius: var(--border-radius-sm);
                        color: transparent;
                    }
                }
            }

            .no-results-container {
                display: none;
                align-items: center;

                p {
                    color: var(--grey-400);
                }
            }

            &.no-results {
                display: flex;
                justify-content: center;
                align-items: center;

                .brand-results {
                    display: none;
                }

                .no-results-container {
                    display: flex;
                }
            }
        }

        .or-text {
            margin: 0;
            font-size: var(--text-md);
            font-weight: bold;
            text-align: center;
        }

        .outline-btn {
            padding: 15px 30px;
            gap: 20px;
        }

        &.brand-results {
            .brand-results-container {
                display: flex;
            }

            .or-text,
            #add-brand-manually {
                display: none;
            }
        }
    }

    /* Step 2 */
    .brand-info-step {
        align-items: center;
        gap: 20px;
        transition: all 0.3s ease-in-out;

        input,
        select {
            height: 40px;
            font-size: var(--text-md);
        }

        textarea {
            font-size: var(--text-md);
            border-radius: var(--border-radius-md);
            padding: 15px;
        }

        .brand-logo-container {
            display: flex;
            justify-content: center;

            .media-item-container {
                width: 215px;
                height: 100%;

                .media-thumbnail {
                    height: 100%;
                    width: 100%;
                    padding: 15px;
                }
            }
        }

        .logo-variation-container {
            height: 140px;
            gap: 0px;

            .logo-variation {
                width: 87px;
                height: 47px;
                padding: 5px;
                flex-shrink: 0;
                background-color: var(--grey-100);
                cursor: pointer;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                &.selected {
                    border: 2px solid var(--main-pink);
                }
            }
        }

        .name-container {
            position: relative;
            overflow: hidden;

            input {
                width: 100%;
            }

            #brand-search-btn {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                width: 20px;
                height: 20px;
                cursor: pointer;
                transition: all 0.2s ease-in-out;

                path {
                    fill: var(--grey-300);
                    transition: all 0.1s ease-in-out;
                }

                &.hide {
                    top: 150%;
                }

                &:hover {
                    path {
                        fill: var(--grey-500);
                    }
                }
            }

            #remove-search-btn {
                position: absolute;
                top: 150%;
                right: 10px;
                transform: translateY(-50%);
                width: 20px;
                height: 20px;
                cursor: pointer;
                transition: all 0.2s ease-in-out;

                path {
                    fill: var(--grey-300);
                    transition: all 0.1s ease-in-out;
                }

                &.show {
                    top: 50%;
                }

                &:hover {
                    path {
                        fill: var(--grey-500);
                    }
                }
            }
        }

        .brand-results-container {
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            height: 250px;
            border: 1px solid var(--theme-border);
            border-radius: var(--border-radius-md);
            background-color: var(--theme-bg-primary);
            overflow: hidden;
            z-index: 10;

            .brand-item {
                padding: 10px 15px;
                display: flex;
                gap: 15px;
                align-items: center;
                cursor: pointer;
                transition: all 0.1s ease-in-out;

                .brand-logo {
                    width: 30px;
                    height: 30px;
                    flex-shrink: 0;
                    border-radius: 50%;
                    border: 1px solid var(--grey-500);
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }

                .brand-name {
                    width: 100%;
                    font-size: var(--text-md);
                    font-weight: bold;
                }

                .brand-website {
                    color: var(--grey-400);
                    font-size: var(--text-sm);
                }

                &:hover {
                    background-color: var(--theme-bg-tertiary);
                }

                &.loading {
                    .brand-logo {
                        background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                        background-size: 200% 200%;
                        animation: gradient-streak 1s linear infinite;
                        border: 1px solid transparent;

                        img {
                            display: none;
                        }
                    }

                    .brand-name {
                        width: 50%;
                        border-radius: var(--border-radius-sm);
                        background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                        background-size: 200% 200%;
                        animation: gradient-streak 1s linear infinite;
                        border-radius: var(--border-radius-sm);
                        color: transparent;
                    }

                    .brand-website {
                        margin-left: auto;
                        width: 10%;
                        border-radius: var(--border-radius-sm);
                        background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                        background-size: 200% 200%;
                        animation: gradient-streak 1s linear infinite;
                        border-radius: var(--border-radius-sm);
                        color: transparent;
                    }
                }
            }

            .no-results-container {
                display: none;
                align-items: center;

                p {
                    color: var(--theme-text-secondary);
                }
            }

            &.no-results {
                display: flex;
                justify-content: center;
                align-items: center;

                .brand-results {
                    display: none;
                }

                .no-results-container {
                    display: flex;
                }
            }
        }
    }

    /* Step 3 */
    .brand-style-step {
        gap: 20px;
        transition: all 0.3s ease-in-out;

        .brand-preview {
            .scene-container {
                aspect-ratio: 16/9;
                width: 100%;
                height: 207px;
                border-radius: var(--border-radius-sm);
                background-color: var(--grey-100);
                position: relative;

                &.outro-scene-container {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                }

                &.basic-scene-container {
                    background-image: url('/public/img/basicscenephoto.jpg');
                    background-size: cover;
                }
            }

            .textbox-preview {
                position: absolute;
                left: 0;
                bottom: 10%;
                width: 250px;
                height: 45px;
                background-color: var(--grey-300);
                border-radius: 0 5px 5px 0;
                display: flex;
                justify-content: center;
                align-items: center;

                font-size: var(--text-md);
                margin: 0;
            }

            .logo-preview {
                width: 60%;
                height: 50%;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                &.empty {
                    display: none;
                }
            }

            .brand-website-preview {
                width: 100%;
                margin: 0;
                font-size: var(--text-md);
                text-align: center;
            }

            &.loading {
                .logo-preview {
                    background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                    background-size: 200% 200%;
                    animation: gradient-streak 1s linear infinite;
                    border: 1px solid transparent;
                    border-radius: var(--border-radius-sm);

                    img {
                        display: none;
                    }
                }

                .brand-website-preview {
                    background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                    background-size: 200% 200%;
                    animation: gradient-streak 1s linear infinite;
                    border-radius: var(--border-radius-sm);

                    color: transparent;
                }
            }
        }

        .brand-search-container {
            position: relative;

            .brands-results {
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                height: 200px;
                background-color: white;
                border: 1px solid var(--grey-200);
                border-radius: var(--border-radius-sm);
                overflow: auto;
                z-index: 100;

                .brand-item {
                    padding: 10px;
                    display: flex;
                    gap: 5px;
                    align-items: center;
                    cursor: pointer;
                    transition: all 0.1s ease-in-out;

                    img {
                        width: 30px;
                        height: 30px;
                        object-fit: contain;
                        border-radius: 50%;
                        border: 1px solid var(--grey-500);
                    }

                    p {
                        font-size: var(--text-sm);
                    }

                    &:hover {
                        background-color: var(--grey-100);
                    }
                }

                p {
                    margin: 0;
                    text-align: center;
                }

                #loading-message {
                    margin-top: 90px;
                    font-size: var(--text-sm);
                    display: none;
                }

                #no-brand-message {
                    margin-top: 90px;
                    font-size: var(--text-sm);
                    display: none;
                }

                &.loading {
                    #loading-message {
                        display: block;
                    }

                    .brand-item {
                        display: none;
                    }
                }

                &.empty {
                    #no-brand-message {
                        display: block;
                    }

                    .brand-item {
                        display: none;
                    }
                }
            }
        }

        label {
            font-size: var(--text-sm);
            text-wrap: nowrap;
        }

        .color-field-container {
            width: 40px;
            height: 40px;

            .color-box {
                width: 100%;
                height: 100%;
            }
        }

        .color-box {
            height: 30px;
            border: 1px solid var(--grey-200);
            border-radius: var(--border-radius-sm);
            position: relative;
            overflow: hidden;

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

            .color-loading-spin {
                display: none;
                position: absolute;
                top: 30%;
                left: 30%;
            }

            path {
                transition: all 0.1s ease-in-out;
            }

            &:hover {
                border-color: var(--grey-500);
            }

            &.loading {
                .color-loading-spin {
                    display: block;
                }

                svg {
                    display: none;
                }
            }
        }

        .font-dropdown-container {
            .fonts-container {
                position: absolute;
                bottom: 34px;
                left: 0;
                top: auto;
            }
        }

        .break {
            height: 30px;
        }

        /* Banners / Outros */
        .banner-outro-preview {
            height: 330px;
            z-index: 5;
        }

        .loading-banner-outro-preview {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            z-index: 1;

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

            p {
                margin: 0;
                font-size: var(--text-sm);
                color: var(--grey-300);
            }
        }
    }

    /* Step 4 */
    .agent-setup-step {
        .media-item-container {
            height: 96px;
            width: auto;

            &.missing-media {
                width: auto;
            }
        }

        .banner-outro-preview {
            width: 100%;
            position: relative;
            height: 334px;
            z-index: 5;
        }

        .loading-banner-outro-preview {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 70%;
            z-index: 1;

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

            p {
                margin: 0;
                font-size: var(--text-sm);
                color: var(--grey-300);
            }
        }

        .modal-field {
            input {
                height: 40px;
                font-size: var(--text-md);
            }
        }
    }

    /* Loading Step */
    .loading-brand-step {
        height: 370px;
        align-items: center;
        justify-content: center;
        gap: 20px;
        transition: all 0.3s ease-in-out;
    }

    .modal-dismiss-message {
        background-color: rgba(0, 0, 0, 0.266);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1002;

        .message-container {
            padding: 20px;
            background-color: var(--theme-bg-primary);
            border-radius: var(--border-radius-sm);

            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        p {
            margin: 0;
            font-size: var(--text-sm);
            color: var(--theme-text-secondary);
        }
    }

    .banners-outros-container {
        position: absolute;
        display: none;
        top: 2.5%;
        left: 1.5%;
        width: 97%;
        height: 94%;
        padding: 20px;
        background-color: var(--theme-bg-tertiary);
        border-radius: var(--border-radius-md);
        z-index: 10;

        .banner-outro-item {
            width: 100%;
            border: 1px solid var(--theme-border);
            border-radius: var(--border-radius-sm);
            background-color: var(--theme-bg-primary);
            padding: 10px;

            display: flex;
            align-items: center;
            gap: 10px;

            cursor: pointer;
            transition: all 0.1s ease-in-out;

            .thumbnails-container {
                display: flex;
                gap: 10px;

                img {
                    aspect-ratio: 16/9;
                    height: 130px;
                    object-fit: cover;
                    border-radius: var(--border-radius-sm);
                }
            }

            #select-design-btn {
                width: 150px;
                margin-left: auto;
            }

            &.selected {
                border: 2px solid var(--main-pink);
            }
        }

        &.open {
            display: block;
        }
    }

    @media screen and (max-height: 880px) {
        .brand-step {
            height: 560px;
            overflow: auto;
        }
    }

    @media screen and (max-width: 1200px) {
        .brand-style-step {
            .banner-outro-preview {
                height: 210px;
            }
        }

        .agent-setup-step {
            .banner-outro-preview {
                height: 210px;
            }
        }
    }

    @media screen and (max-width: 990px) {
        #brand-styles-controls {
            flex-direction: column;
            align-items: center;
            gap: 10px;

            .break {
                display: none;
            }
        }
    }

    @media screen and (max-width: 850px) {
        .banner-outro-item {
            flex-direction: column;
            align-items: center;
            gap: 5px;

            #select-design-btn {
                width: 100% !important;
            }
        }
    }

    @media screen and (max-width: 600px) {
        .banner-outro-item {
            .thumbnails-container {
                img {
                    height: 100px;
                }
            }
        }
    }

    @media screen and (max-width: 500px) {
        .modal-dialog {
            width: auto !important;
        }

        .banner-outro-item {
            .thumbnails-container {
                flex-direction: column;
                align-items: center;

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
}

/* Change Banners / Outros Modal */
#banners-outros-modal {
    .banner-outro-item {
        width: 100%;
        border: 1px solid var(--grey-500);
        border-radius: var(--border-radius-sm);
        padding: 10px;

        display: flex;
        align-items: center;
        gap: 10px;

        cursor: pointer;
        transition: all 0.1s ease-in-out;

        .thumbnails-container {
            display: flex;
            gap: 10px;

            img {
                aspect-ratio: 16/9;
                height: 130px;
                object-fit: cover;
                border-radius: var(--border-radius-sm);
            }
        }

        #select-design-btn {
            width: 150px;
            margin-left: auto;
        }

        &.selected {
            border: 2px solid var(--main-pink);
        }
    }

    @media screen and (max-width: 850px) {
        .banner-outro-item {
            flex-direction: column;
            align-items: center;
            gap: 5px;

            #select-design-btn {
                width: 100%;
            }
        }
    }

    @media screen and (max-width: 600px) {
        .banner-outro-item {
            .thumbnails-container {
                img {
                    height: 100px;
                }
            }
        }
    }

    @media screen and (max-width: 500px) {
        .modal-dialog {
            width: auto !important;
        }

        .banner-outro-item {
            .thumbnails-container {
                flex-direction: column;
                align-items: center;

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
}

#profile-banner-outro-edit-modal {
    h5 {
        font-size: var(--text-md);
        font-weight: bold;
        text-align: center;
    }

    .aspect-option {
        width: 150px;
        font-size: var(--text-sm);
        padding: 5px 10px;
        border: 1px solid var(--grey-500);
        border-radius: var(--border-radius-sm);
        text-align: center;
        cursor: pointer;

        transition: all 0.1s ease-in-out;

        &:hover {
            background-color: var(--grey-100);
        }

        &.selected {
            border: 1px solid var(--main-pink);
            background-color: var(--main-pink);
            color: var(--main-white);
        }
    }

    .edit-preview {
        height: 450px;
        background-color: var(--grey-100);
    }

    .info-box {
        justify-content: center;
        align-items: center;
        gap: 10px;
        background-color: var(--theme-bg-tertiary);
        font-size: var(--text-sm);
        padding: 15px;
        border-radius: var(--border-radius-sm);
    }
}

/* New Script Suggestions */
#new-script-suggestions-modal {
    h3 {
        font-size: var(--text-md);
        text-align: center;
    }

    .suggestions {
        gap: 10px;

        .script-suggestion {
            padding: 5px 10px;
            border: 1px solid var(--grey-500);
            font-size: var(--text-sm);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            height: 50px;
            overflow: auto;

            transition: all 0.1s ease-in-out;

            &:hover {
                border: 1px solid var(--main-pink);
            }

            &.selected {
                border: 1px solid var(--main-pink);
            }

            &.loading {
                color: transparent;
                border: 0;

                background-image: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base)) !important;
                background-size: 200% 200% !important;
                animation: gradient-streak 1s linear infinite !important;
            }
        }
    }
}

/* Clip Preview */
#clipPreviewModal {
    .btn-close {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .modal-body,
    .modal-header {
        padding: 10px 0px;
    }

    .clip-preview-nav-btn {
        display: flex;
        gap: 5px;
        align-items: center;
        padding: var(--btn-padding);
        border-radius: var(--border-radius-sm);
        font-size: var(--text-sm);
        cursor: pointer;
        transition: all 0.1s ease-in-out;

        p {
            margin: 0;
        }

        &:hover {
            background-color: var(--theme-bg-primary);
        }

        &.selected {
            background-color: var(--theme-bg-primary);
        }
    }

    .clip-preview-container {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;
        background-image: url(https://videocreationmedia.blob.core.windows.net/creaid/mvp/transparentcell.png);

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            display: none;
        }

        #loading-text {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: var(--text-md);
            z-index: 100;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 8px var(--opacity-black);
        }

        .loading-preview-container {
            display: none;
            height: 100%;
            z-index: 110;
            color: black;
            position: absolute;
            width: 100%;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background-image: url(https://videocreationmedia.blob.core.windows.net/creaid/mvp/transparentcell.png);
        }

        .video-controls {
            position: absolute;
            bottom: 15px;
            left: 0;
            width: 100%;
            padding: 0px 35px;
            cursor: pointer;
            z-index: 100;
            opacity: 0;

            display: flex;
            /* justify-content: space-between; */
            /* gap: 20px; */
            align-items: center;

            transition: all 0.1s ease-in-out;
        }

        .video-controls-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
            z-index: 10;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
            opacity: 0;

            transition: all 0.1s ease-in-out;
        }

        video {
            height: 100%;
            width: 100%;

            &::-webkit-media-controls-enclosure {
                display: none !important;
            }
        }

        .media-btn-container {
            width: 30px;
        }

        .media-btn {
            z-index: 100;
            cursor: pointer;
            transition: all 0.1s ease-in-out;

            &:hover {
                transform: scale(1.1);
            }
        }

        .full-screen-btn {
            z-index: 100;
            cursor: pointer;
            transition: all 0.1s ease-in-out;

            &:hover {
                transform: scale(1.1);
            }
        }

        .cust-progress-bar {
            position: relative;
            width: 65%;
            height: 5px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.4941176471);
            cursor: pointer;
            z-index: 5;
            margin-left: auto;
            margin-right: auto;

            .cust-progress-bar-line {
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                border-radius: 5px 0px 0px 5px;
                background-color: var(--main-white);
                opacity: 0.7;
            }

            .cust-progress-bar-head {
                position: absolute;
                top: -5px;
                left: 50%;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color: var(--main-white);
                transform: translate(-50%);
                cursor: grab;
                z-index: 10;

                &:active {
                    cursor: grabbing;
                }
            }

            .cust-progress-bar-start-head {
                position: absolute;
                left: 25%;
                top: -25px;
                transform: translate(-50%);
                z-index: 10;
                opacity: 1;
                transition: transform 0.1s ease-in-out;
                cursor: grab;

                .clip-start-popover-container {
                    position: relative;

                    .clip-start-popover {
                        position: absolute;
                        top: -13px;
                        left: 50%;
                        opacity: 0;
                        width: 70px;
                        border-radius: 5px;
                        font-size: 11px;
                        padding: 5px;
                        text-align: center;
                        transform: translate(-50%, -50%);
                        color: white;
                        font-weight: 700;
                        background-color: rgba(250, 95, 237, 0.7294117647);
                        transition: opacity 0.1s ease-in-out;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        user-select: none;

                        &:hover {
                            transform: translate(-50%) scale(1.05);
                        }
                    }
                }

                &:hover {
                    .clip-start-popover {
                        opacity: 1;
                    }
                }

                &:active {
                    cursor: grabbing;
                }
            }

            .cust-progress-bar-duration-line {
                position: absolute;
                top: 0;
                height: 100%;
                border-radius: 5px;
                background-color: var(--main-pink);
            }
        }

        &:hover {
            .video-controls {
                opacity: 1;
            }

            .video-controls-overlay {
                opacity: 1;
            }
        }

        &.loading {
            .loading-overlay {
                display: block;
                background: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                background-size: 200% 200%;
                animation: gradient-streak 1s linear infinite;
            }

            #loading-text {
                display: block;
            }
        }
    }

    .clip-preview-tab {
        padding: 10px;
    }

    .fit-setting-btn {
        padding: var(--btn-padding);
        border-radius: var(--border-radius-sm);
        font-size: var(--text-sm);
        cursor: pointer;
        transition: all 0.1s ease-in-out;

        &:hover {
            background-color: var(--theme-bg-primary);
        }

        &.selected {
            background-color: var(--theme-bg-primary);
        }
    }

    #token-amount {
        font-size: var(--text-xsm);
        gap: 2px;
        margin-right: 5px;
        align-items: center;
    }

    &.view-only {
        .clip-preview-nav-btn {
            display: none;
        }

        .clip-preview-tab {
            display: none;
        }

        #video-controller-preview {
            pointer-events: none;
        }
    }

    &.loading {
        .clip-preview-container {
            .loading-overlay {
                display: block;
                background: linear-gradient(90deg, var(--theme-skeleton-base), var(--theme-skeleton-highlight), var(--theme-skeleton-base));
                background-size: 200% 200%;
                animation: gradient-streak 1s linear infinite;
            }

            #video-controller-preview {
                display: none;
            }

            .loading-preview-container {
                display: flex;
            }
        }
    }
}

/* Dashboard Clip Preview */
#project-preview-modal {
    #project-title {
        width: 100%;
        font-size: var(--text-md);
        font-weight: bold;
        text-align: center;
    }

    .modal-content {
        padding: 20px;
    }

    .btn-close {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    .clip-name {
        text-align: center;
    }

    video {
        width: 100%;
        height: 100% !important;
    }
}

/* Create Video Modal */
#create-video-modal {
    h5 {
        text-align: center;
    }

    .modal-field {
        gap: 10px;
    }

    .ratio-container {
        position: relative;
        width: 100%;
        height: fit-content;
        align-items: center;

        .ratio-card {
            width: 100%;
            padding: 10px;
            border: 1.5px solid var(--grey-300);
            border-radius: var(--border-radius-sm);
            align-items: center;

            cursor: pointer;
            transition: all 0.1s ease-in-out;

            .ratio-preview {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 40px;
                background-color: var(--grey-200);
                font-size: var(--text-sm);
                color: var(--grey-500);

                &.l {
                    aspect-ratio: 16/9;
                }

                &.p {
                    aspect-ratio: 9/16;
                }

                &.s {
                    aspect-ratio: 1/1;
                }
            }

            &:hover {
                border: 1.5px solid var(--main-pink);
            }
        }

        .checkmark-icon {
            position: absolute;
            top: 5px;
            right: 10px;
            display: none;
        }

        &.selected {
            .ratio-card {
                border: 2.5px solid var(--main-pink);
            }

            .checkmark-icon {
                display: block;
            }
        }

        button {
            width: 100%;
            height: 40px;
            border-radius: var(--border-radius-sm);
        }
    }

    #create-video-btn {
        height: 40px;
        padding: 0px 25px;

        p {
            margin: 0;
            font-weight: bold;
        }

        .spinner-border {
            display: none;
        }

        &.loading {
            opacity: 0.5;
            pointer-events: none;
            background-color: var(--grey-300);

            #token-amount {
                display: none;
            }

            p {
                display: none;
            }

            .spinner-border {
                display: block;
            }
        }
    }

    @media screen and (max-width: 600px) {
        #aspect-ratios-container {
            flex-direction: column;
            align-items: center;
            height: 200px;
            overflow: auto;

            .ratio-container {
                width: 100%;
                margin-bottom: 10px;

                .ratio-card {
                    width: 100%;
                    padding: 10px;
                    text-align: center;
                }
            }
        }
    }
}

/* Magic Duplicate */
#magic-duplicate-project-modal {
    h3 {
        font-size: 20px;
        font-weight: 600;
        margin: 10px 0px;
        text-align: center;
    }

    h5 {
        font-size: 15px;
        font-weight: 400;
        margin-bottom: 10px;
        text-align: center;
    }

    .duplicate-option {
        width: 100px;
        padding: 5px 15px;
        border-radius: 5px;
        border: 1px solid var(--grey-300);

        cursor: pointer;

        transition: all 0.1s ease;

        p {
            font-size: 12px;
            font-weight: 400;
            text-align: center;

            transition: all 0.1s ease;
        }

        &.selected {
            border: 1px solid var(--main-pink);

            p {
                color: var(--main-pink);
            }
        }
    }
}

/* Post to WB */
#post-to-wb-modal {
    #project-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    .html-content {
        p {
            margin-bottom: 1rem;
        }
    }
}

.delete-project-btn {
    background-color: var(--main-red);
    color: var(--main-white);
    border: 0;
}

/* Color Picker */
#custom-color-picker {
    position: absolute;
    top: 150px;
    left: 0;
    z-index: 10000;

    width: 220px;
    border-radius: 5px;
    border: 0.8px solid var(--grey-200);

    padding: 15px 10px;
    background-color: var(--main-white);

    display: flex;
    flex-direction: column;
    gap: 10px;

    .color-picker-tabs {
        display: flex;
        gap: 10px;

        .picker-tab {
            padding: 5px 10px;
            color: var(--grey-500);
            font-weight: bold;
            font-size: var(--text-sm);
            cursor: pointer;
            transition: all 0.1s ease-in-out;

            &.selected {
                color: var(--main-pink);
            }

            &:hover {
                color: var(--main-pink);
            }
        }
    }

    .break {
        margin: 0;
        background-color: var(--grey-200);
        height: 1px;
        width: 100%;
    }

    .color-canvas {
        position: relative;
        width: 100%;
        height: 80px;
        background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
        border-radius: 5px;
        cursor: pointer;

        .color-canvas-handle {
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2.5px solid var(--main-white);
        }
    }

    .hue-slider {
        position: relative;
        width: 100%;
        height: 14px;
        background-image: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));
        border-radius: 10px;
        cursor: pointer;

        .hue-handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--main-white);
            transition:
                width 0.1s,
                height 0.1s;
        }

        &:hover {
            .hue-handle {
                width: 10px;
                height: 10px;
            }
        }
    }

    .hex-eye-dropper {
        display: flex;
        gap: 5px;

        .preview-color-box {
            height: 30px;
            width: 30px;
            border-radius: 5px;
            border: 0.5px solid var(--grey-200);
            flex-shrink: 0;
            background-color: var(--grey-100);
        }

        .eye-dropper-btn {
            border: 1px solid var(--grey-500);
            padding: 2px;
            width: 30px;
            height: 30px;
            flex-shrink: 0;
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.1s;
            border-radius: 5px;
            cursor: pointer;

            &:hover {
                background-color: var(--grey-100);
            }
        }
    }

    .extra-colors {
        display: flex;
        gap: 5px;
        cursor: pointer;

        .extra-color {
            border-radius: 5px;
            border: 0.5px solid var(--grey-200);
            width: 100%;
            height: 30px;
            cursor: url('/public/img/eye-dropper-cursor.png'), auto;
        }
    }
}

/* Youtube License */
#youtube-licensing-modal {
    h3 {
        font-size: var(--text-md);
        font-weight: bold;
        margin: 0 auto;
    }

    .info-container {
        padding: 10px;
        background-color: var(--grey-50);
        align-items: center;
        justify-content: center;

        p {
            margin: 0;
            font-size: var(--text-sm);
        }

        li {
            font-size: var(--text-sm);
        }
    }

    .outline-input {
        font-size: var(--text-md);
        height: 45px;
        width: 100%;
    }

    .copy-btn {
        height: 45px;
        width: 45px;
        display: flex;
        flex-shrink: 0;
        border: 1px solid var(--grey-500);
        border-radius: var(--border-radius-sm);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.1s ease-in-out;

        #copy-complete {
            display: none;
        }

        &.copy-complete {
            background-color: var(--main-green);

            #copy-complete {
                display: block;

                path {
                    fill: white;
                }
            }

            #copy-icon {
                display: none;
            }
        }

        &:hover {
            background-color: var(--grey-100);

            &.copy-complete {
                background-color: var(--main-green);
            }
        }
    }
}

/* Buy Credits Modal */
#credits-modal {
    #buy-credits-btn {
        height: 40px;
        width: 150px;
    }

    .add-remove-videos-btn {
        display: flex;
        font-size: 2rem;
        width: 60px;
        height: 60px;
        border-radius: var(--border-radius-sm);
        transition: all 0.1s ease-in-out;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &:hover {
            background-color: var(--grey-100);
        }
    }

    #video-count {
        width: 50px;
        text-align: center;
        font-size: 4rem;
        font-weight: bold;
    }

    .ratio-container {
        width: 100%;
        height: fit-content;
        align-items: center;

        .ratio-card {
            position: relative;
            width: 100%;
            padding: 10px;
            border: 1.5px solid var(--grey-300);
            border-radius: var(--border-radius-sm);
            align-items: center;

            cursor: pointer;
            transition: all 0.1s ease-in-out;

            .ratio-preview {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 40px;
                background-color: var(--grey-200);
                font-size: var(--text-sm);

                &.l {
                    aspect-ratio: 16/9;
                }

                &.p {
                    aspect-ratio: 9/16;
                }

                &.s {
                    aspect-ratio: 1/1;
                }
            }

            .checkmark {
                display: none;
                position: absolute;
                top: 10px;
                right: 10px;
                transform: scale(0.8);
            }

            &:hover {
                border: 1.5px solid var(--main-pink);
            }
        }

        &.selected {
            .ratio-card {
                border: 1.5px solid var(--main-pink);

                .checkmark {
                    display: block;
                }
            }
        }

        button {
            width: 100%;
            height: 40px;
            border-radius: var(--border-radius-sm);
        }
    }

    &.disabled {
        .modal-body {
            opacity: 0.5;
            pointer-events: none;
        }
    }
}

/* Agent Modal */
#agent-edit-modal,
#double-agent-modal {
    .modal-body {
        padding: 30px;
    }

    .media-item-container {
        height: 96px;
        width: auto;

        &.missing-media {
            width: auto;
        }
    }

    .banner-outro-preview {
        width: 100%;
        position: relative;
        height: 334px;
        z-index: 5;
    }

    .loading-banner-outro-preview {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 70%;
        z-index: 1;

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

        p {
            margin: 0;
            font-size: var(--text-sm);
            color: var(--grey-300);
        }
    }
}

/* Update Plan */
#update-plan-modal {
    .modal-body {
        min-height: 200px;
        padding: 30px;
        display: flex;
        justify-content: center;
        align-items: center;

        p {
            font-size: var(--text-sm);
            color: var(--theme-text-primary);
        }

        .loading-container {
            display: none;
            justify-content: center;
            align-items: center;
        }

        .update-success-container {
            display: none;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        &.loading {
            #are-you-sure-text,
            #are-you-sure-header {
                display: none;
            }

            .loading-container {
                display: flex;
            }
        }

        &.success {
            #are-you-sure-text,
            #are-you-sure-header {
                display: none;
            }

            .update-success-container {
                display: flex;
            }
        }
    }
}

/* Voice Cloning */
#voice-cloning-modal {
    #recording-box-container {
        width: 100%;
        padding: 20px 50px;
        gap: 10px;
        border: 1px solid var(--grey-500);
        border-radius: var(--border-radius-sm);

        p {
            margin: 0;
            font-size: var(--text-sm);
            color: var(--theme-text-primary);
            text-align: center;
        }

        #audio-waveform {
            display: none;
            width: 100%;
        }

        .play-btn-container {
            display: none;
            position: relative;

            aspect-ratio: 1/1;
            height: 30px;

            background-color: var(--main-pink);
            border-radius: 50%;
            cursor: pointer;

            .btn-icon {
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        &.has-recording {
            #recording-box-header,
            p {
                display: none;
            }

            #audio-waveform,
            .play-btn-container {
                display: block;
            }
        }
    }

    #start-stop-container {
        width: 100%;
        justify-content: center;
        position: relative;

        #rec-req-1 {
            font-size: var(--text-sm);
            color: var(--theme-text-primary);
            font-weight: bold;
        }

        #rec-req-2 {
            font-size: var(--text-sm);
            color: var(--theme-text-primary);
            text-align: right;
        }
    }

    .mic-volume-indication {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: var(--main-pink);
        display: flex;
        gap: 1px;
        align-items: center;
        justify-content: center;

        .loudness-bar {
            width: 5px;
            height: 5px;
            background-color: var(--main-white);
            border-radius: 5px;
        }
    }

    #start-stop-recording {
        &.recording {
            border-color: var(--main-red);
            color: var(--main-red);
        }
    }

    @media screen and (max-width: 600px) {
        .modal-dialog {
            width: auto !important;
        }

        #mic-select-upload-container {
            flex-direction: column;
        }
    }
}

/* Voice / Music Mobile */
#voice-music-mobile-modal {
    .modal-dialog {
        width: auto !important;
    }

    .voice-music-nav {
        width: 100%;

        .nav-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 40px;
            border-radius: var(--border-radius-sm);
            font-size: var(--text-md);
            cursor: pointer;
            transition: all 0.1s ease-in-out;

            &.selected {
                background-color: var(--grey-100);
            }

            &:hover {
                background-color: var(--grey-200);
            }
        }
    }

    .modal-music-card {
        width: 100%;
        border-radius: var(--border-radius-sm);
        border: 1px solid var(--grey-100);
        padding: 10px;

        display: flex;
        align-items: center;
        gap: 10px;

        .thumbnail-play {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 75px;
            height: 50px;
            border-radius: 5px;
            background-color: var(--grey-500);
            overflow: hidden;

            .play-pause-icon {
                cursor: pointer;
                transform: scale(1.5);
                z-index: 5;

                .play-icon {
                    margin-left: 2px;
                    margin-top: -2px;
                }

                .pause-icon {
                    transform: scale(0.9);
                    margin-left: 0.3px;
                    display: none;
                }

                .music-sample-loading {
                    margin-top: 1px;
                    margin-bottom: 2px;
                    margin-left: 1px;
                    display: none;
                }
            }

            img {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: 0.5;
            }
        }

        .use-btn {
            margin-left: auto;
        }

        &.selected {
            border: 1px solid var(--main-pink);

            .use-btn {
                display: none;
            }
        }

        &.playing {
            .thumbnail-play {
                .play-pause-icon {
                    .play-icon {
                        display: none;
                    }

                    .pause-icon {
                        display: block;
                    }
                }
            }
        }

        &.song-loading {
            .thumbnail-play {
                .play-pause-icon {
                    .play-icon {
                        display: none;
                    }

                    .pause-icon {
                        display: none;
                    }

                    .music-sample-loading {
                        display: block;
                    }
                }
            }
        }
    }

    .modal-voice-card {
        width: 100%;
        border-radius: var(--border-radius-sm);
        border: 1px solid var(--grey-100);
        padding: 10px;

        display: flex;
        align-items: center;
        gap: 10px;

        .avatar-sample {
            display: flex;
            justify-content: space-between;

            .avatar-container {
                width: 47px;
                height: 47px;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid var(--grey-100);
                transition: all 0.1s ease-in-out;
                cursor: pointer;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                &:hover {
                    background-color: var(--grey-200);
                }
            }
        }

        .country-name {
            p {
                font-size: var(--text-sm);
            }

            h3 {
                font-size: var(--text-md);
                font-weight: bold;
            }
        }

        .use-btn {
            margin-left: auto;
        }

        &.selected {
            border: 1px solid var(--main-pink);

            .use-btn {
                display: none;
            }
        }
    }

    #close-modal-btn {
        width: 100%;
    }
}

#bulk-image-to-video-modal {
    #image-select {
        height: 400px;
        width: 100%;
        padding: 10px 0px;

        h5 {
            font-size: var(--text-md);
            font-weight: bold;
            text-align: center;
        }

        .media-option {
            aspect-ratio: 16/9;
            height: 137px;
            border-radius: var(--border-radius-sm);
            opacity: 0.6;
            cursor: pointer;
            overflow: hidden;

            transition: all 0.1s ease-in-out;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            &.selected {
                opacity: 1;
                border: 3px solid var(--main-pink);
            }

            &:hover {
                border: 3px solid var(--main-pink);
            }

            &.video {
                pointer-events: none;
                opacity: 0.4;
                cursor: default;
            }
        }

        #no-images-message,
        #loading-images-message {
            text-align: center;
            font-size: var(--text-md);
            color: var(--theme-text-primary);
            margin: 20px 0;
        }

        #loading-images-message {
            display: none;
        }
    }

    #generating-screen {
        height: 200px;

        p {
            font-size: var(--text-sm);
            font-weight: bold;
            text-align: center;
            margin: 0;
        }
    }

    &.loading {
        .modal-overflow {
            display: none;
        }

        #image-select {
            #loading-images-message {
                display: block;
            }
        }
    }
}

#account-info-modal {
    #company-name-container {
        height: 55px;
    }

    .modal-field {
        min-width: 200px;

        input,
        select {
            transition: all 0.1s ease-in-out;

            &.required {
                border: 1px solid var(--main-pink);
            }

            &.error {
                border: 2px solid var(--main-red);
            }
        }
    }

    @media screen and (max-width: 835px) {
        .modal-row {
            flex-direction: column;
        }

        .break {
            &.horizontal {
                display: none;
            }
        }

        #company-name-container {
            height: auto;
        }
    }

    @media screen and (max-width: 600px) {
        .modal-dialog {
            width: auto !important;
        }

        #company-name-container {
            height: auto;
        }

        .modal-field {
            width: 100%;
        }
    }
}

#about-credits-modal {
    .modal-body {
        padding: 30px;
    }

    p,
    li {
        font-size: var(--text-sm);
        color: var(--grey-500);
        margin: 0;
    }

    .filled-btn {
        margin: 0 auto;
        margin-top: 10px;
    }

    #pricing-list-container {
        padding: 20px;
        background-color: var(--grey-50);
        border-radius: var(--border-radius-sm);

        .pricing-list-item {
            padding: 5px 0;
            border-bottom: 1px solid var(--grey-200);

            &:last-child {
                border-bottom: none;
            }

            .credit-amount {
                font-size: var(--text-md);
                text-wrap: nowrap;
            }
        }
    }

    @media screen and (max-width: 600px) {
        .modal-dialog {
            width: auto !important;
        }

        .modal-body {
            padding: 20px;
        }

        #pricing-list-container {
            padding: 10px;
        }
    }
}

#translate-duplicate-modal {
    #generating-screen {
        display: none;
        height: 300px;

        p {
            margin: 0;
        }

        #please-wait-text {
            font-size: var(--text-xsm);
            color: var(--grey-400);
        }
    }

    &.loading {
        #generating-screen {
            display: flex;
        }

        .modal-header,
        .modal-body,
        .modal-footer {
            display: none;
            pointer-events: none;
        }
    }
}

#magic-link-modal {
    .magic-link-listing {
        position: relative;
        width: 150px;
        border: 1px solid var(--grey-300);
        border-radius: var(--border-radius-sm);
        gap: 5px;
        cursor: pointer;

        transition: all 0.1s ease-in-out;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        p {
            margin: 0;
            font-size: var(--text-sm);
            color: var(--grey-500);
            padding: 5px;
        }

        .checkmark {
            position: absolute;
            top: 5px;
            right: 10px;
            display: none;
        }

        &:hover {
            border: 1px solid var(--main-pink);
        }

        &.from-scratch {
            border: 1px dashed var(--grey-300);
            align-items: center;
            justify-content: center;

            &:hover {
                font-weight: bold;
                border: 1px dashed var(--grey-500);
            }
        }

        &.selected {
            border: 1px solid var(--main-pink);

            .checkmark {
                display: block;
            }
        }
    }
}

#social-banner-edit-modal {
    &.open-house {
        .modal-body {
            overflow: auto;
            height: 400px;
            padding-top: 280px;
        }
    }
}

@media screen and (max-width: 600px) {
    #create-new-brand-modal-2 {
        .modal-dialog {
            width: auto !important;
        }

        #onboarding-steps-container {
            display: none;
        }

        #onboarding-break {
            display: none;
        }

        #brand-info-part-1 {
            flex-direction: column;
        }

        .brand-step {
            height: auto;
        }

        .back-btn {
            top: 28px;
        }

        #brand-preview-container {
            flex-direction: column;
        }

        .banner-outro-preview {
            height: 190px !important;
        }

        .banner-outro-item {
            width: 89%;
        }

        #brand-styles-controls {
            flex-direction: column;
            gap: 15px;

            .break {
                display: none;
            }
        }

        #agent-info-container {
            flex-direction: column;
            margin-top: 30px;

            .modal-row {
                flex-direction: column;
            }
        }

        #agent-images-container {
            flex-direction: column;

            .outline-btn {
                display: none;
            }
        }

        #agent-title-field {
            label {
                display: none;
            }
        }
    }

    #clip-browse-modal {
        .modal-dialog {
            width: auto !important;
        }

        .custom-slider {
            display: none;
        }

        .wunderbar-media-container {
            &.medium-view {
                .wunderbar-media-item {
                    width: 92.5% !important;
                }
            }
        }
    }

    #project-preview-modal {
        .modal-dialog {
            width: auto !important;
        }
    }

    #project-folder-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #projects-container {
        flex-direction: column;
    }

    .project-video-container {
        width: 100%;
    }
}

/* Dark theme modal styles */
.dark-theme {
    /* General modal styling */
    .modal-content {
        background-color: var(--theme-bg-secondary);
        color: var(--theme-text-primary);
        border: 1px solid var(--theme-border);
    }

    .modal-header {
        background-color: var(--theme-bg-secondary);
        color: var(--theme-text-primary);
        border-bottom: 1px solid var(--theme-border);
    }

    .modal-body {
        background-color: var(--theme-bg-secondary);
        color: var(--theme-text-primary);

        p {
            color: var(--theme-text-primary);
        }
    }

    .modal-footer {
        background-color: var(--theme-bg-secondary);
        border-top: 1px solid var(--theme-border);

        .close-btn {
            color: var(--theme-text-secondary);
            border: 1px solid var(--theme-border);
            background-color: transparent;

            &:hover {
                color: var(--theme-text-primary);
                border: 1px solid var(--theme-border-hover);
            }
        }
    }

    /* Modal backdrop */
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* Close buttons */
    .btn-close,
    .modal-close-btn {
        filter: invert(1);
    }

    /* Form elements in modals */
    .modal-field {
        input,
        select,
        textarea {
            background-color: var(--theme-bg-secondary);
            color: var(--theme-text-primary);
            border: 1px solid var(--theme-border);

            &:focus {
                background-color: var(--theme-bg-secondary);
                color: var(--theme-text-primary);
                border-color: var(--theme-border-hover);
                box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
            }

            &::placeholder {
                color: var(--theme-text-tertiary);
            }
        }

        label {
            color: var(--theme-text-secondary);
        }
    }

    /* Generic buttons in modals */
    .outline-btn {
        background-color: transparent;
        border: 1px solid var(--theme-border);
        color: var(--theme-text-primary);

        &:hover {
            background-color: var(--theme-bg-tertiary);
            border-color: var(--theme-border-hover);
        }

        &.dark {
            border: 1px solid var(--theme-text-primary);
            color: var(--theme-text-primary);

            &:hover {
                background-color: var(--theme-bg-tertiary);
            }
        }
    }

    /* Breaks/dividers */
    .break {
        background-color: var(--theme-border);
    }

    /* Specific modal components with hardcoded colors */

    /* Save as new button */
    .modal-footer .save-as-new-btn {
        background-color: var(--main-purple);
        color: white;

        &:disabled {
            background-color: var(--theme-bg-tertiary);
            color: var(--theme-text-tertiary);
        }

        &:hover {
            background-color: var(--hover-purple);
        }
    }

    /* Delete project button */
    .delete-project-btn {
        background-color: var(--main-red);
        color: white;
        border: 0;
    }

    /* Brand search results */
    .brands-results,
    .brand-results-container {
        background-color: var(--theme-bg-secondary);
        border: 1px solid var(--theme-border);

        .brand-item {
            &:hover {
                background-color: var(--theme-bg-tertiary);
            }
        }
    }

    /* Modal dismiss message overlay */
    .modal-dismiss-message {
        background-color: rgba(0, 0, 0, 0.6);

        .message-container {
            background-color: var(--theme-bg-secondary);
            color: var(--theme-text-primary);
        }
    }

    /* Color picker elements */
    #custom-color-picker {
        background-color: var(--theme-bg-secondary);
        border: 0.8px solid var(--theme-border);

        .picker-tab {
            color: var(--theme-text-secondary);

            &.selected,
            &:hover {
                color: var(--main-pink);
            }
        }

        .break {
            background-color: var(--theme-border);
        }

        .preview-color-box {
            border: 0.5px solid var(--theme-border);
            background-color: var(--theme-bg-tertiary);
        }

        .eye-dropper-btn {
            border: 1px solid var(--theme-border);
            background-color: transparent;

            &:hover {
                background-color: var(--theme-bg-tertiary);
            }
        }

        .extra-color {
            border: 0.5px solid var(--theme-border);
        }
    }

    /* Clip preview loading elements */
    .clip-preview-container {
        #loading-text {
            color: white;
            text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
        }

        .loading-preview-container {
            color: var(--theme-text-primary);
        }

        &.loading .loading-overlay {
            background: linear-gradient(90deg, var(--theme-bg-tertiary), var(--theme-bg-primary), var(--theme-bg-tertiary));
            background-size: 200% 200%;
            animation: gradient-streak 1s linear infinite;
        }
    }

    /* Progress bar elements */
    .cust-progress-bar {
        background-color: rgba(255, 255, 255, 0.2);

        .cust-progress-bar-line {
            background-color: rgba(255, 255, 255, 0.5);
        }

        .cust-progress-bar-head {
            background-color: #ffffff;
        }

        .clip-start-popover {
            color: white;
            background-color: rgba(250, 95, 237, 0.7);
        }

        .cust-progress-bar-duration-line {
            background-color: #fa5fed;
        }
    }

    /* Loading animations with hardcoded colors - keep these as they are skeleton loaders */
    .loading {
        .brand-logo,
        .logo-preview,
        .brand-website-preview,
        .brand-name,
        .brand-website,
        .script-suggestion {
            background-image: linear-gradient(90deg, var(--theme-bg-tertiary), var(--theme-bg-primary), var(--theme-bg-tertiary)) !important;
            background-size: 200% 200% !important;
            animation: gradient-streak 1s linear infinite !important;
        }
    }

    /* Voice cloning modal specific */
    #voice-cloning-modal {
        #recording-box-container {
            border: 1px solid var(--theme-border);

            p {
                color: var(--theme-text-secondary);
            }
        }

        .play-btn-container {
            background-color: var(--main-pink);
        }

        .mic-volume-indication {
            background-color: var(--main-pink);

            .loudness-bar {
                background-color: var(--main-white);
            }
        }

        #start-stop-recording.recording {
            border-color: var(--main-red);
            color: var(--main-red);
        }
    }

    /* Account info modal error states */
    #account-info-modal {
        .modal-field {
            input,
            select {
                &.required {
                    border: 1px solid var(--main-pink);
                }

                &.error {
                    border: 2px solid var(--main-red);
                }
            }
        }
    }

    /* About credits modal */
    #about-credits-modal {
        p,
        li {
            color: var(--theme-text-secondary);
        }

        #pricing-list-container {
            background-color: var(--theme-bg-tertiary);

            .pricing-list-item {
                border-bottom: 1px solid var(--theme-border);

                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }
}