:root {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

.ck-editor__editable {
    width: 100%;
    height: 200px;
}

.ck.ck-balloon-panel,
.ck.ck-dropdown__panel,
.ck.ck-tooltip,
.ck.ck-toolbar,
.ck.ck-content .ck-editor__editable {
    z-index: 99999 !important;
}

.ck-editor__editable {
    resize: vertical !important;
    overflow: auto !important;
    min-height: 100px;
}

.ck.ck-editor__editable > .ck-placeholder::before {
    color: #ccc !important;
    opacity: 1 !important;
}

.ck .ck-toolbar {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border: 2px solid #afbdcf !important;
    padding-top: 8px !important;
}

.ck-restricted-editing_mode_standard {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-width: 0 !important;
    border-left-width: 2px !important;
    border-right-width: 2px !important;
    border-bottom-width: 2px !important;
    border-color: #afbdcf !important;
}

.ck.ck-editor .ck.ck-content.ck-editor__editable,
.ck.ck-editor .ck.ck-toolbar {
    background-color: transparent !important;
}

[data-theme="dark"] .ck.ck-editor {
    --ck-color-base-background: #1e1e1e;
    --ck-color-base-foreground: #2d2d2d;
    --ck-color-base-text: #e0e0e0;
    --ck-color-base-border: #444;
    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: #3d3d3d;
    --ck-color-button-on-background: #0d47a1;
    --ck-color-button-on-hover-background: #1565c0;
    --ck-color-button-default-active-background: #3d3d3d;
    --ck-color-button-default-active-shadow: #2d2d2d;
    --ck-color-button-on-active-background: #0d47a1;
    --ck-color-button-on-active-shadow: #0a3a7a;
    --ck-color-button-disabled-background: #2d2d2d;
    --ck-color-button-save: #4caf50;
    --ck-color-button-cancel: #f44336;
    --ck-color-dropdown-panel-background: #1e1e1e;
    --ck-color-dropdown-panel-border: #444;
    --ck-color-input-background: #2d2d2d;
    --ck-color-input-border: #444;
    --ck-color-input-text: #e0e0e0;
    --ck-color-input-disabled-background: #2d2d2d;
    --ck-color-input-disabled-border: #444;
    --ck-color-input-disabled-text: #888;
    --ck-color-list-background: #1e1e1e;
    --ck-color-list-button-hover-background: #3d3d3d;
    --ck-color-list-button-on-background: #0d47a1;
    --ck-color-list-button-on-text: #fff;
    --ck-color-list-button-on-background-focus: #0d47a1;
    --ck-color-panel-background: #1e1e1e;
    --ck-color-panel-border: #444;
    --ck-color-toolbar-background: #1e1e1e;
    --ck-color-toolbar-border: #444;
    --ck-color-tooltip-background: #2d2d2d;
    --ck-color-tooltip-text: #e0e0e0;
    --ck-color-engine-placeholder-text: #888;
    --ck-color-upload-bar-background: #0d47a1;
    --ck-color-link-default: #64b5f6;
    --ck-color-link-selected-background: #0d47a1;
    --ck-color-link-fake-selection: #0d47a1;
    --ck-color-highlight-background: #ffd700;
    --ck-color-table-focused-cell-background: #2d2d2d;
    --ck-color-table-selected-cell-background: #0d47a1;
    --ck-color-table-selection-cursor: #fff;
    --ck-color-table-selection-marker: #0d47a1;
}

    [data-theme="dark"] .ck.ck-editor .ck.ck-button {
        color: #e0e0e0 !important;
    }

        [data-theme="dark"] .ck.ck-editor .ck.ck-button:hover {
            background-color: #3d3d3d !important;
        }

        [data-theme="dark"] .ck.ck-editor .ck.ck-button.ck-on {
            background-color: #0d47a1 !important;
            color: #fff !important;
        }

            [data-theme="dark"] .ck.ck-editor .ck.ck-button.ck-on:hover {
                background-color: #1565c0 !important;
            }

    [data-theme="dark"] .ck.ck-editor .ck.ck-dropdown__panel {
        background-color: #1e1e1e !important;
        border-color: #444 !important;
    }

    [data-theme="dark"] .ck.ck-editor .ck.ck-list {
        background-color: #1e1e1e !important;
    }

    [data-theme="dark"] .ck.ck-editor .ck.ck-list__item .ck.ck-button {
        color: #e0e0e0 !important;
    }

        [data-theme="dark"] .ck.ck-editor .ck.ck-list__item .ck.ck-button:hover {
            background-color: #3d3d3d !important;
        }

        [data-theme="dark"] .ck.ck-editor .ck.ck-list__item .ck.ck-button.ck-on {
            background-color: #0d47a1 !important;
            color: #fff !important;
        }

    [data-theme="dark"] .ck.ck-editor .ck.ck-input {
        background-color: #2d2d2d !important;
        border-color: #444 !important;
        color: #e0e0e0 !important;
    }

        [data-theme="dark"] .ck.ck-editor .ck.ck-input:focus {
            border-color: #0d47a1 !important;
        }

    [data-theme="dark"] .ck.ck-editor .ck.ck-dropdown .ck-dropdown__arrow {
        color: #e0e0e0 !important;
    }

    [data-theme="dark"] .ck.ck-editor .ck.ck-toolbar__separator {
        background-color: #444 !important;
    }

    [data-theme="dark"] .ck.ck-editor .ck.ck-content.ck-editor__editable {
        color: #e0e0e0 !important;
    }

        [data-theme="dark"] .ck.ck-editor .ck.ck-content.ck-editor__editable:focus {
            border-color: #0d47a1 !important;
        }

        [data-theme="dark"] .ck.ck-editor .ck.ck-content.ck-editor__editable .ck-placeholder::before {
            color: #888 !important;
        }

    [data-theme="dark"] .ck.ck-editor .ck.ck-balloon-panel {
        background-color: #1e1e1e !important;
        border-color: #444 !important;
    }

        [data-theme="dark"] .ck.ck-editor .ck.ck-balloon-panel .ck.ck-toolbar {
            background-color: #1e1e1e !important;
        }

        [data-theme="dark"] .ck.ck-editor .ck.ck-balloon-panel .ck.ck-button {
            color: #e0e0e0 !important;
        }

            [data-theme="dark"] .ck.ck-editor .ck.ck-balloon-panel .ck.ck-button:hover {
                background-color: #3d3d3d !important;
            }

            [data-theme="dark"] .ck.ck-editor .ck.ck-balloon-panel .ck.ck-button.ck-on {
                background-color: #0d47a1 !important;
            }

    [data-theme="dark"] .ck.ck-editor .ck.ck-color-table {
        background-color: #1e1e1e !important;
    }

        [data-theme="dark"] .ck.ck-editor .ck.ck-color-table .ck.ck-color-grid__tile {
            border-color: #444 !important;
        }

            [data-theme="dark"] .ck.ck-editor .ck.ck-color-table .ck.ck-color-grid__tile:hover {
                border-color: #0d47a1 !important;
            }

        [data-theme="dark"] .ck.ck-editor .ck.ck-color-table .ck.ck-button {
            color: #e0e0e0 !important;
        }

            [data-theme="dark"] .ck.ck-editor .ck.ck-color-table .ck.ck-button:hover {
                background-color: #3d3d3d !important;
            }

    [data-theme="dark"] .ck.ck-editor .ck.ck-table-form {
        background-color: #1e1e1e !important;
    }

        [data-theme="dark"] .ck.ck-editor .ck.ck-table-form .ck.ck-labeled-field-view__status {
            color: #888 !important;
        }

    [data-theme="dark"] .ck.ck-editor .ck.ck-media-form {
        background-color: #1e1e1e !important;
    }

    [data-theme="dark"] .ck.ck-editor .ck.ck-source-editing-area {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

        [data-theme="dark"] .ck.ck-editor .ck.ck-source-editing-area textarea {
            background-color: #1e1e1e !important;
            color: #e0e0e0 !important;
            border-color: #444 !important;
        }

[data-theme="dark"] .ck.ck-balloon-panel {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-balloon-rotator {
        background-color: #1e1e1e !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-balloon-rotator__navigation {
        background-color: #2d2d2d !important;
        border-color: #444 !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-balloon-rotator__counter {
        color: #e0e0e0 !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-link-form {
        background-color: #1e1e1e !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-labeled-field-view .ck.ck-label {
        color: #e0e0e0 !important;
        background-color: #1e1e1e !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-input {
        background-color: #2d2d2d !important;
        border-color: #444 !important;
        color: #e0e0e0 !important;
    }

        [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-input:focus {
            border-color: #0d47a1 !important;
            box-shadow: 0 0 0 1px #0d47a1 !important;
        }

        [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-input.ck-input-text_empty {
            background-color: #2d2d2d !important;
        }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-list {
        background-color: #2d2d2d !important;
        border-color: #444 !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-list__item {
        border-color: #444 !important;
    }

        [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-list__item .ck.ck-button {
            color: #e0e0e0 !important;
        }

            [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-list__item .ck.ck-button:hover {
                background-color: #3d3d3d !important;
            }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-switchbutton .ck.ck-button__toggle {
        background-color: #444 !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-switchbutton .ck.ck-button__toggle__inner {
        background-color: #1e1e1e !important;
        border-color: #666 !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-switchbutton.ck-on .ck.ck-button__toggle {
        background-color: #0d47a1 !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-switchbutton.ck-on .ck.ck-button__toggle__inner {
        background-color: #fff !important;
        transform: translateX(18px) !important;
    }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-button-save {
        color: #4caf50 !important;
    }

        [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-button-save:hover {
            background-color: rgba(76, 175, 80, 0.2) !important;
        }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-button-cancel {
        color: #f44336 !important;
    }

        [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-button-cancel:hover {
            background-color: rgba(244, 67, 54, 0.2) !important;
        }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-button {
        color: #e0e0e0 !important;
    }

        [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-button:hover {
            background-color: #3d3d3d !important;
        }

        [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-button:active {
            background-color: #3d3d3d !important;
        }

    [data-theme="dark"] .ck.ck-balloon-panel .ck.ck-labeled-field-view__status {
        color: #ff6b6b !important;
    }

[data-theme="dark"] .ck.ck-balloon-panel_arrow_ne::before,
[data-theme="dark"] .ck.ck-balloon-panel_arrow_nw::before,
[data-theme="dark"] .ck.ck-balloon-panel_arrow_ne::after,
[data-theme="dark"] .ck.ck-balloon-panel_arrow_nw::after {
    border-bottom-color: #1e1e1e !important;
}

[data-theme="dark"] .ck.ck-balloon-panel_arrow_se::before,
[data-theme="dark"] .ck.ck-balloon-panel_arrow_sw::before,
[data-theme="dark"] .ck.ck-balloon-panel_arrow_se::after,
[data-theme="dark"] .ck.ck-balloon-panel_arrow_sw::after {
    border-top-color: #1e1e1e !important;
}

[data-theme="dark"] .ck-source-editing-area {
    background-color: #1e1e1e !important;
}

    [data-theme="dark"] .ck-source-editing-area textarea {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border-color: #444 !important;
    }

        [data-theme="dark"] .ck-source-editing-area textarea:focus {
            border-color: #0d47a1 !important;
            outline: none !important;
            box-shadow: 0 0 0 1px #0d47a1 !important;
        }