html,
body {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-synthesis: none;
    color: var(--el-text-color-primary);
    background-color: var(--el-bg-color);
}

a {
    text-decoration: none;
}

* {
    outline: none;
    box-sizing: border-box;
}

.layouts {
    width: 100%;
    max-width: var(--layouts-width);
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
}

.layouts-empty {
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

.el-main.layouts-main-scrollbar {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.table-layouts {
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.z-index {
    z-index: 1
}

.z-index-10 {
    z-index: 10;
}

.z-index-100 {
    z-index: 100;
}

.z-index-1000 {
    z-index: 1000;
}

.z-index-10000 {
    z-index: 10000;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar:horizontal {
    height: 6px
}

::-webkit-scrollbar-track {
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    background-color: #E5EAF3;
    border-radius: 10px;
    transition: all .2s ease-in-out
}

::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background-color: #E5EAF3
}

.circular {
    display: inline;
    height: var(--el-loading-spinner-size);
    width: var(--el-loading-spinner-size);
    animation: 2s linear 0s infinite normal none running loading-rotate;
}

.el-text--small {
    --el-link-font-size: var(--el-font-size-extra-small) !important;
}

.el-switch__core .el-switch__action {
    color: var(--el-switch-on-color) !important;
}

.el-switch.is-checked .el-switch__core .el-switch__action {
    color: var(--el-switch-on-color) !important;
}

.el-radio {
    margin-right: 10px !important;
}

.el-button.el-button--success:not(.is-text) {
    --el-button-text-color: var(--el-bg-color);
}

.el-popper.is-red {
    /* Set padding to ensure the height is 32px */
    padding: 6px 12px;
    background: rgb(240, 77, 77);
    color: #FFFFFF;
}

.el-popper.is-red .el-popper__arrow::before {
    background: rgb(240, 77, 77);
    right: 0;
}


.el-messagebox-width {
    .el-message-box__message {
        flex: 1;
        overflow: hidden;
    }
}

.userinfo-menu {
    width: 180px;
    --el-dropdown-menuItem-hover-fill: var(--el-bg-color-page) !important;
    --el-dropdown-menuItem-hover-color: var(--el-text-color-primary) !important;
    --el-text-color-regular: var(--el-text-color-primary) !important;

    .el-dropdown-menu {
        padding: 10px;
    }

    .el-dropdown-menu__item {
        .el-icon {
            color: var(--el-text-color-primary);
            font-size: 16px;
        }

        border-radius: 6px;
    }

    .el-dropdown-menu__item:hover {
        background-color: var(--el-bg-color-page);
    }
}

.el-button--dark {
    --el-button-bg-color: #303133;
    --el-button-text-color: var(--el-color-white);
    --el-button-border-color: #303133;
    --el-button-hover-bg-color: rgb(110, 111, 112);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-border-color: rgb(110, 111, 112);
    --el-button-active-bg-color: rgb(42, 43, 45);
    --el-button-active-border-color: rgb(42, 43, 45);
}

.el-messagebox-payment {

    .el-message-box__header,
    .el-message-box__btns {
        display: none;
    }

    .el-message-box__message {
        flex: 1;
    }

    padding: 0;

    .recharge {
        .close {
            display: block !important;
        }
    }
}

.languare-list {
    .languare-item {
        padding: 6px;
        border-radius: 6px;
        cursor: pointer;

        &:hover {
            color: var(--el-menu-hover-text-color);
            background-color: var(--el-menu-hover-bg-color);
        }
    }

}

.w-e-text-container [data-slate-editor] pre>code {
    text-shadow: none !important;
}

.el-loading-parent--relative {
    .el-loading-spinner {
        --el-loading-spinner-size: 20px;
        --el-color-primary: #FFFFFF;

        .el-loading-text {
            font-size: 12px;
        }
    }
}

.action-dialog {
    --el-dialog-border-radius: 10px;
    --el-messagebox-font-size: 14px;
    --max-height: calc(100vh - 32px);
    max-height: var(--max-height);

    .el-message-box__header {
        padding: 20px;
        margin-right: 0;

        .el-message-box__title {
            font-weight: 600;
        }

        .el-message-box__headerbtn {
            top: 26px;
            right: 12px;
        }
    }

    .el-message-box__message {
        display: flex;
        flex-direction: column;
        padding: 20px;
        max-height: calc(var(--max-height) - 24px - 64px);

        .el-scrollbar {
            display: flex;
            flex-direction: column;

            .el-form.layouts {
                padding-top: 0px;
            }
        }
    }

    .el-dialog__body .item-label {
        width: 140px;
    }

    .el-message-box__btns {
        display: none;
    }
}

.full-action-dialog {
    height: var(--max-height);

    .el-message-box__message {
        height: calc(var(--max-height) - 24px - 64px);
    }
}

.el-form {
    .none-label {
        .el-form-item__label {
            display: none !important;
        }
    }

    .el-form-item__content {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .submit-item {
        .el-form-item__content {
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
    }
}

.el-select {
    .el-select-dropdown__item {
        height: auto;
    }
}

.el-table td.el-table__cell .cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.el-message-box.x-login-message-box {
    --el-messagebox-width: min(980px, 100%);
    --el-messagebox-height: 550px;
    --el-messagebox-padding-primary: 0px;
    --el-messagebox-border-radius: 16px;
    height: var(--el-messagebox-height);

    .el-message-box__message {
        width: 100%;
    }

    .el-message-box__btns {
        display: none;
    }
}

.x-loading-message-box-modal {
    .el-overlay-message-box {
        padding: 0px !important;
    }
}

.el-message-box.x-loading-message-box {
    --el-messagebox-width: 100vw;
    --el-messagebox-height: 100vh;
    --el-messagebox-padding-primary: 0px;
    --el-messagebox-border-radius: 0px;
    height: var(--el-messagebox-height);

    .el-message-box__message {
        height: var(--el-messagebox-height);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }

    .el-message-box__btns {
        display: none;
    }
}

.text-active {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #79FFFF 0%, #0DF283 100%);
}

.bg-active {
    background-image: linear-gradient(to left, #79FFFF 0%, #0DF283 100%);
}

.el-overlay.el-modal-dialog {
    backdrop-filter: blur(6px);
}

.el-dialog.drama-dialog {
    --el-dialog-width: min(100vw, 500px);
    --el-dialog-padding-primary: 0;
    --el-dialog-border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .el-dialog__header {
        padding: 20px;
        border-bottom: 1px solid #262626;
        position: relative;

        .el-dialog__headerbtn {
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;

            .el-dialog__close {
                color: var(--el-text-color-regular);
            }
        }
    }

    .el-dialog__body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .el-dialog__footer {
        display: flex;
        justify-content: center;
        padding: 20px;
        gap: 20px;

        .el-button {
            min-width: 100px;
            font-weight: 600;
        }

        .el-button+.el-button {
            margin-left: 0;
        }
    }
}

.el-dialog.generate-scene-dialog,
.el-dialog.generate-storyboard-dialog {
    --el-dialog-width: min(100vw, 500px);
    --el-dialog-padding-primary: 0;
    --el-dialog-border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .el-dialog__header {
        padding: 20px;
        border-bottom: 1px solid #262626;
        position: relative;

        .el-dialog__headerbtn {
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;

            .el-dialog__close {
                color: var(--el-text-color-regular);
            }
        }
    }

    .el-dialog__body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .el-dialog__footer {
        display: flex;
        justify-content: center;
        padding: 20px;
        gap: 20px;

        .el-button {
            min-width: 100px;
            font-weight: 600;
        }

        .el-button+.el-button {
            margin-left: 0;
        }
    }
}

.tabs-segmented.el-segmented {
    --el-border-radius-base: 8px;
    --el-segmented-bg-color: rgba(30, 30, 30, 0.4) !important;
    --el-border-color: rgba(255, 255, 255, 0.3);
    --el-segmented-item-hover-bg-color: rgba(255, 255, 255, 0.1);
    --el-segmented-item-active-bg-color: rgba(255, 255, 255, 0.1);
    --el-segmented-padding: 4px;
    --el-segmented-item-selected-color: var(--el-bg-color);
    --el-segmented-item-selected-bg-color: #FFFFFF;
    --el-segmented-item-selected-color: var(--el-bg-color);
    font-weight: 600;

    .el-segmented__item {
        padding: 8px 0;
        width: 120px;
    }

    .el-segmented__group {
        gap: 10px;
    }

    // .el-segmented__item-selected {
    // background-image: linear-gradient(to left, #79FFFF 0%, #0DF283 100%);
    // }
}

.prompt-popper {
    .el-mention-dropdown {
        --el-mention-option-height: auto;

        .el-mention-dropdown__list {
            display: flex;
            flex-direction: column;
            gap: 6px;

            .el-mention-dropdown__item {
                display: flex;
                gap: 6px;
                align-items: center;
                justify-content: center;
            }
        }
    }
}

.episode-popover.el-popover {
    --el-popover-bg-color: var(--el-mask-color-extra-light);
    --el-bg-color-overlay: var(--el-popover-bg-color);
    backdrop-filter: blur(6px);
    min-width: 100px !important;

    &.is-light>.el-popper__arrow::before {
        background: var(--el-popover-bg-color);
        backdrop-filter: blur(4px);
    }
}

.el-popper.model-popover {
    --el-popover-bg-color: rgba(30, 30, 30, 0.5);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    --el-popover-border-color: rgba(255, 255, 255, 0.1);
    --el-box-shadow-light: none;

    /* border: 0px solid rgba(255,255,255,0.3); */
    .el-popper__arrow::before {
        background-color: rgba(30, 30, 30, 0.5);
    }
}


.icon-aspect-ratio {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:before {
        content: '';
        display: block;
        border-radius: 4px;
        box-shadow: inset 0 0 0 2px var(--el-text-color-primary);
    }

    &[view="9:16"] {
        &:before {
            width: 14.625px;
            height: 26px;
        }
    }

    &[view="16:9"] {
        &:before {
            width: 26px;
            height: 14.625px;
        }
    }

    &[view="3:4"] {
        &:before {
            width: 19.5px;
            height: 26px;
        }
    }

    &[view="4:3"] {
        &:before {
            width: 26px;
            height: 19.5px;
        }
    }

    &[view="1:1"] {
        &:before {
            width: 26px;
            height: 26px;
        }
    }

    &[view="2:3"] {
        &:before {
            width: 17.333px;
            height: 26px;
        }
    }

    &[view="3:2"] {
        &:before {
            width: 26px;
            height: 17.333px;
        }
    }
}

.input-button {
    backdrop-filter: blur(10px);
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    padding-top: 2px;
    padding-bottom: 2px;

    &-selected {
        background: rgba(255, 255, 255, 0.08);
    }

    &:hover {
        background: rgba(255, 255, 255, 0.16);
    }
}


.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close{
    color: var(--el-color-success) !important;
}