:root {
    --mantis-primary: var(--eplus-primary, #1677ff);
    --mantis-primary-dark: var(--eplus-primary, #0958d9);
    --mantis-primary-soft: var(--eplus-table-head-bg, #dcf6ff);
    --mantis-primary-selected: var(--eplus-table-chrome-bg, #dcf6ff);
    --mantis-primary-selected-text: var(--eplus-table-chrome-text, #014480);
    --mantis-text: var(--eplus-text, #262626);
    --mantis-text-secondary: var(--eplus-text-muted, #595959);
    --mantis-text-disabled: color-mix(in srgb, var(--mantis-text-secondary) 58%, transparent);
    --mantis-border: var(--eplus-border, #d9d9d9);
    --mantis-divider: var(--eplus-divider, #f0f0f0);
    --mantis-surface: var(--eplus-surface, #ffffff);
    --mantis-surface-elevated: var(--eplus-surface-muted, #f5f5f5);
    --mantis-background: var(--eplus-bg, #fafafb);
    --mantis-hover: var(--eplus-hover, #f5f5f5);
    --mantis-hover-text: var(--eplus-hover-text, var(--mantis-text));
    --mantis-error: #d32f2f;
    --mantis-font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mantis-shadow: rgba(20, 20, 20, 0.12);
    --mantis-input-background: var(--eplus-input-bg, #ffffff);
    --mantis-canvas-background: var(--eplus-bg-soft, #ffffff);
}

:root[data-eplus-theme="dark"] {
    --mantis-primary: var(--eplus-primary, #1677ff);
    --mantis-primary-dark: var(--eplus-primary, #0958d9);
    --mantis-primary-soft: color-mix(in srgb, var(--mantis-primary) 18%, transparent);
    --mantis-primary-selected: var(--eplus-table-chrome-bg, #014480);
    --mantis-primary-selected-text: var(--eplus-table-chrome-text, #48d0ff);
    --mantis-text: var(--eplus-text, rgba(255, 255, 255, 0.92));
    --mantis-text-secondary: var(--eplus-text-muted, rgba(255, 255, 255, 0.68));
    --mantis-text-disabled: color-mix(in srgb, var(--mantis-text-secondary) 58%, transparent);
    --mantis-border: var(--eplus-border, rgba(255, 255, 255, 0.16));
    --mantis-divider: var(--eplus-divider, rgba(255, 255, 255, 0.1));
    --mantis-surface: var(--eplus-surface, #111a2c);
    --mantis-surface-elevated: var(--eplus-surface-muted, #17233a);
    --mantis-background: var(--eplus-bg, #0b1220);
    --mantis-hover: var(--eplus-hover, #014480);
    --mantis-hover-text: var(--eplus-hover-text, rgba(255, 255, 255, 0.96));
    --mantis-error: #ff4d4f;
    --mantis-shadow: rgba(0, 0, 0, 0.38);
    --mantis-input-background: var(--eplus-input-bg, #0f172a);
    --mantis-canvas-background: var(--eplus-bg-soft, #0f172a);
}

body.geEditor {
    background: var(--mantis-background);
    color: var(--mantis-text);
    font-family: var(--mantis-font);
    font-size: 14px;
    letter-spacing: 0;
}

.geMenubarContainer,
.geToolbarContainer,
.geSidebarContainer,
.geFooterContainer {
    font-family: var(--mantis-font);
}

.geMenubarContainer {
    background: var(--mantis-surface);
    border-bottom: 1px solid var(--mantis-divider);
}

.geMenubarContainer .geItem,
.geToolbar .geItem {
    border-radius: 4px;
    color: var(--mantis-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.geMenubarContainer .geItem:hover,
.geToolbarContainer .geItem:hover {
    background: var(--mantis-hover);
    color: var(--mantis-text);
}

.geToolbarContainer {
    background: var(--mantis-surface);
    border-bottom: 1px solid var(--mantis-divider);
}

.geToolbar {
    background: var(--mantis-surface);
    border-top: 0;
    box-shadow: none;
}

.geToolbarContainer .geSeparator {
    background: var(--mantis-divider);
}

.geToolbarContainer .geButton,
.geToolbarContainer .geLabel {
    align-items: center;
    background: transparent;
    border-radius: 4px;
    border-color: transparent;
    display: inline-flex;
    justify-content: center;
    opacity: 0.86;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        opacity 120ms ease,
        filter 120ms ease;
}

.geToolbarContainer .geButton:hover,
.geToolbarContainer .geLabel:hover {
    background: var(--mantis-hover);
    border-color: var(--mantis-border);
    opacity: 1;
}

.geToolbarContainer .geButton .geSprite,
.geToolbarContainer .geLabel .geSprite,
.geToolbarContainer .geButton img,
.geToolbarContainer .geLabel img {
    opacity: 0.9;
    transition: filter 120ms ease, opacity 120ms ease;
}

.geToolbarContainer .geButton:active,
.geToolbarContainer .geLabel:active {
    background: var(--mantis-primary-soft);
    border-color: var(--mantis-primary);
}

.geDiagramContainer,
.geDiagramBackdrop {
    background-color: var(--mantis-canvas-background);
    border-color: var(--mantis-divider);
}

.geBackgroundPage {
    box-shadow: 0 1px 4px var(--mantis-shadow);
}

.geSidebarContainer {
    background: var(--mantis-surface);
    border-color: var(--mantis-divider);
}

.geSidebar {
    background: var(--mantis-surface);
    border-bottom-color: var(--mantis-divider);
}

.geSidebarContainer .geTitle {
    background: var(--mantis-surface);
    border-bottom-color: var(--mantis-divider);
    color: var(--mantis-text);
    font-family: var(--mantis-font);
    font-size: 13px;
    font-weight: 500;
}

.geSidebarContainer .geTitle:hover {
    background: var(--mantis-hover);
}

.geSidebar .geItem {
    border-radius: 4px;
}

.geSidebar .geItem:hover {
    background: var(--mantis-primary-soft);
    border-color: var(--mantis-primary) !important;
}

.geHsplit,
.geVsplit {
    background-color: var(--mantis-divider);
}

.geFooterContainer {
    background: var(--mantis-surface);
    border-top-color: var(--mantis-divider);
}

.geFooterContainer a {
    color: var(--mantis-primary);
    font-family: var(--mantis-font);
    font-size: 13px;
    font-weight: 500;
}

.geFooterContainer td {
    border-color: var(--mantis-divider);
}

.geFooterContainer td:hover {
    background: var(--mantis-hover);
}

.geBtn {
    min-width: 72px;
    height: 32px;
    padding: 0 12px;
    background: var(--mantis-surface);
    border: 1px solid var(--mantis-border);
    border-radius: 4px;
    box-shadow: none;
    color: var(--mantis-text);
    font-family: var(--mantis-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 30px;
    text-transform: none;
}

.geBtn:hover,
.geBlack:hover {
    background: var(--mantis-hover);
    border-color: #bfbfbf;
    box-shadow: none;
    color: var(--mantis-text);
}

.gePrimaryBtn,
.geBlueBtn {
    background: var(--mantis-primary);
    border-color: var(--mantis-primary);
    color: #ffffff !important;
}

.gePrimaryBtn:hover,
.geBlueBtn:hover {
    background: var(--mantis-primary-dark);
    border-color: var(--mantis-primary-dark);
    color: #ffffff !important;
}

.geDangerBtn {
    background: var(--mantis-error);
    border-color: var(--mantis-error);
    color: #ffffff;
}

.geBtn:focus-visible,
.geColorBtn:focus-visible {
    outline: 2px solid rgba(8, 125, 193, 0.25);
    outline-offset: 1px;
}

.geBtn:disabled,
.gePrimaryBtn:disabled,
.geDangerBtn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.mxPopupMenu,
.geMenubarMenu,
.geToolbarMenu {
    background: var(--mantis-surface) !important;
    border: 1px solid var(--mantis-divider) !important;
    border-radius: 6px;
    box-shadow: 0 4px 16px var(--mantis-shadow) !important;
    color: var(--mantis-text);
    font-family: var(--mantis-font);
}

.mxPopupMenuItem {
    color: var(--mantis-text-secondary);
    font-size: 13px;
}

.mxPopupMenuItemHover {
    background: var(--mantis-hover) !important;
    color: var(--mantis-text) !important;
}

.mxWindow {
    background: var(--mantis-surface) !important;
    border: 1px solid var(--mantis-divider) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px var(--mantis-shadow) !important;
    color: var(--mantis-text);
    font-family: var(--mantis-font);
}

.mxWindowTitle {
    background: var(--mantis-surface) !important;
    border-bottom: 1px solid var(--mantis-divider) !important;
    color: var(--mantis-text) !important;
    font-family: var(--mantis-font);
    font-size: 14px;
    font-weight: 600;
}

.geDialog,
.geDialog table,
.geDialog input,
.geDialog select,
.geDialog textarea {
    font-family: var(--mantis-font);
}

.geDialog input[type="text"],
.geDialog input[type="number"],
.geDialog select,
.geDialog textarea,
.mxWindow input[type="text"],
.mxWindow select,
.mxWindow textarea {
    border: 1px solid var(--mantis-border);
    border-radius: 4px;
    background: var(--mantis-input-background);
    color: var(--mantis-text);
    font-size: 13px;
    outline: 0;
}

.geDialog input:focus,
.geDialog select:focus,
.geDialog textarea:focus,
.mxWindow input:focus,
.mxWindow select:focus,
.mxWindow textarea:focus {
    border-color: var(--mantis-primary);
    box-shadow: 0 0 0 2px rgba(8, 125, 193, 0.16);
}

.geSidebarContainer,
.geDiagramContainer,
.mxWindowPane {
    scrollbar-color: var(--mantis-border) transparent;
    scrollbar-width: thin;
}

.geSidebarContainer::-webkit-scrollbar,
.geDiagramContainer::-webkit-scrollbar,
.mxWindowPane::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.geSidebarContainer::-webkit-scrollbar-thumb,
.geDiagramContainer::-webkit-scrollbar-thumb,
.mxWindowPane::-webkit-scrollbar-thumb {
    background: var(--mantis-border);
    border: 2px solid transparent;
    border-radius: 4px;
    background-clip: padding-box;
}

.geSidebarContainer input:not([type="checkbox"]):not([type="radio"]),
.geSidebarContainer select,
.geSidebarContainer textarea,
.geFormatContainer input:not([type="checkbox"]):not([type="radio"]),
.geFormatContainer select,
.geFormatContainer textarea {
    background-color: var(--mantis-input-background) !important;
    background-image: none !important;
    border: 1px solid var(--mantis-border) !important;
    box-shadow: none !important;
    color: var(--mantis-text) !important;
    color-scheme: light dark;
}

.geSidebarContainer input:not([type="checkbox"]):not([type="radio"])::placeholder,
.geSidebarContainer textarea::placeholder,
.geFormatContainer input:not([type="checkbox"]):not([type="radio"])::placeholder,
.geFormatContainer textarea::placeholder {
    color: var(--mantis-text-disabled) !important;
    opacity: 1;
}

.geSidebarContainer input[type="checkbox"],
.geSidebarContainer input[type="radio"],
.geFormatContainer input[type="checkbox"],
.geFormatContainer input[type="radio"] {
    accent-color: var(--mantis-primary);
}

.geSidebarContainer button:not(.eplus-shape-btn):not(.eplus-shape-tab):not(.eplus-shape-drawer-close):not(.eplus-palette-show-more),
.geFormatContainer button,
.geFormatContainer input[type="button"],
.geFormatContainer input[type="submit"],
.geFormatContainer .geBtn,
.geFormatContainer .geColorBtn {
    background-color: var(--mantis-input-background) !important;
    background-image: none !important;
    border: 1px solid var(--mantis-border) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--mantis-text) !important;
}

.geSidebarContainer button:not(.eplus-shape-btn):not(.eplus-shape-tab):not(.eplus-shape-drawer-close):not(.eplus-palette-show-more):hover,
.geFormatContainer button:hover,
.geFormatContainer input[type="button"]:hover,
.geFormatContainer input[type="submit"]:hover,
.geFormatContainer .geBtn:hover,
.geFormatContainer .geColorBtn:hover {
    background-color: var(--mantis-hover) !important;
    border-color: var(--mantis-primary) !important;
    color: var(--mantis-hover-text) !important;
}

.geSidebarContainer .eplus-palette-show-more {
    background: transparent !important;
    border: 0 !important;
    color: var(--mantis-primary) !important;
}

.geSidebarContainer .eplus-palette-show-more:hover {
    color: var(--mantis-primary-dark) !important;
    text-decoration: underline;
}

.geSidebarContainer .eplus-local-palette-meta {
    color: var(--mantis-text-secondary) !important;
}

.geFormatContainer .geFormatMuted {
    color: var(--mantis-text-secondary) !important;
}

:root[data-eplus-theme="dark"] .geToolbarContainer img,
:root[data-eplus-theme="dark"] .geMenubarContainer img,
:root[data-eplus-theme="dark"] .geSidebarContainer img {
    opacity: 0.9;
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geButton,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--mantis-text-secondary) !important;
    opacity: 0.92 !important;
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geButton .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .geButton img,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel img {
    filter: invert(1) brightness(1.55) contrast(0.92) saturate(0.72);
    opacity: 0.92 !important;
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geButton .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel .geSprite {
    background-color: currentColor !important;
    background-image: none !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 18px 18px !important;
    filter: none !important;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-formatpanel {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 4h18v16H3V4zm2 2v12h5V6H5zm7 0v5h7V6h-7zm0 7v5h7v-5h-7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 4h18v16H3V4zm2 2v12h5V6H5zm7 0v5h7V6h-7zm0 7v5h7v-5h-7z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-zoomin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3a7 7 0 0 1 5.6 11.2l4.1 4.1-1.4 1.4-4.1-4.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm1 2v2h2v2h-2v2H9v-2H7V9h2V7h2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3a7 7 0 0 1 5.6 11.2l4.1 4.1-1.4 1.4-4.1-4.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm1 2v2h2v2h-2v2H9v-2H7V9h2V7h2z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-zoomout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3a7 7 0 0 1 5.6 11.2l4.1 4.1-1.4 1.4-4.1-4.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM7 9h6v2H7V9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3a7 7 0 0 1 5.6 11.2l4.1 4.1-1.4 1.4-4.1-4.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM7 9h6v2H7V9z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-undo {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7h8a5 5 0 1 1 0 10h-4v-2h4a3 3 0 1 0 0-6H7v4L2 8l5-5v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7h8a5 5 0 1 1 0 10h-4v-2h4a3 3 0 1 0 0-6H7v4L2 8l5-5v4z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-redo {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 7H9a5 5 0 1 0 0 10h4v-2H9a3 3 0 1 1 0-6h8v4l5-5-5-5v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 7H9a5 5 0 1 0 0 10h4v-2H9a3 3 0 1 1 0-6h8v4l5-5-5-5v4z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-delete {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm3 2v8h2v-8H9zm4 0v8h2v-8h-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm3 2v8h2v-8H9zm4 0v8h2v-8h-2z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-tofront,
:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-toback,
:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-duplicate {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7h10v10H7V7zm-4 4h2v8h8v2H3V11zm8-8h10v10h-2V5h-8V3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7h10v10H7V7zm-4 4h2v8h8v2H3V11zm8-8h10v10h-2V5h-8V3z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-fillcolor {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 2 5 10a5 5 0 1 0 10 0l-2-2 3-3-3-3zm-1.4 3.4L13 6.8 8.1 11.7A3 3 0 1 0 13 14l2 2H9l2.6-10.6zM3 20h18v2H3v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 2 5 10a5 5 0 1 0 10 0l-2-2 3-3-3-3zm-1.4 3.4L13 6.8 8.1 11.7A3 3 0 1 0 13 14l2 2H9l2.6-10.6zM3 20h18v2H3v-2z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-strokecolor {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m4 16 1 4 4-1 9.8-9.8-5-5L4 14v2zm11.2-13.2 5 5 1.4-1.4a2 2 0 0 0 0-2.8l-2.2-2.2a2 2 0 0 0-2.8 0l-1.4 1.4zM3 22h18v-2H3v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m4 16 1 4 4-1 9.8-9.8-5-5L4 14v2zm11.2-13.2 5 5 1.4-1.4a2 2 0 0 0 0-2.8l-2.2-2.2a2 2 0 0 0-2.8 0l-1.4 1.4zM3 22h18v-2H3v2z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-shadow {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 5h11v11H5V5zm3 13h10V8h2v12H8v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 5h11v11H5V5zm3 13h10V8h2v12H8v-2z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-connection,
:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-straight {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 11h13.2l-3.6-3.6L15 6l6 6-6 6-1.4-1.4 3.6-3.6H4v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 11h13.2l-3.6-3.6L15 6l6 6-6 6-1.4-1.4 3.6-3.6H4v-2z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-orthogonal,
:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-horizontalelbow,
:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-verticalelbow {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 5h6v2H7v10h6v-3l6 4-6 4v-3H5V5zm10 0h4v8h-2V7h-2V5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 5h6v2H7v10h6v-3l6 4-6 4v-3H5V5zm10 0h4v8h-2V7h-2V5z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-plus,
:root[data-eplus-theme="dark"] .geToolbarContainer .geSprite-insert {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4z'/%3E%3C/svg%3E");
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geButton:hover img,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel:hover img,
:root[data-eplus-theme="dark"] .geSidebar .geItem:hover img {
    opacity: 1;
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geButton:hover,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel:hover,
:root[data-eplus-theme="dark"] .geToolbarContainer .geButton:active,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel:active {
    background: var(--mantis-hover) !important;
    border-color: var(--mantis-primary) !important;
    color: var(--mantis-hover-text) !important;
    opacity: 1 !important;
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geButton:hover .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel:hover .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .geButton:active .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel:active .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .geButton:hover img,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel:hover img,
:root[data-eplus-theme="dark"] .geToolbarContainer .geButton:active img,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel:active img {
    filter: invert(63%) sepia(95%) saturate(1365%) hue-rotate(160deg) brightness(103%) contrast(102%);
    opacity: 1 !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer .geItem svg,
:root[data-eplus-theme="dark"] .geToolbarContainer svg {
    color: var(--mantis-text);
}

:root[data-eplus-theme="dark"] body,
body[data-eplus-theme="dark"],
body.eplus-theme-dark {
    background: var(--mantis-background) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .geMenubarContainer,
:root[data-eplus-theme="dark"] .geToolbarContainer,
:root[data-eplus-theme="dark"] .geSidebarContainer,
:root[data-eplus-theme="dark"] .geFooterContainer,
:root[data-eplus-theme="dark"] .geMenubar,
:root[data-eplus-theme="dark"] .geToolbar,
:root[data-eplus-theme="dark"] .geSidebar,
:root[data-eplus-theme="dark"] .geHsplit,
:root[data-eplus-theme="dark"] .geVsplit {
    background: var(--mantis-surface) !important;
    color: var(--mantis-text) !important;
    border-color: var(--mantis-divider) !important;
    box-shadow: none !important;
}

:root[data-eplus-theme="dark"] .geDiagramBackdrop {
    background: var(--mantis-background) !important;
    border-color: var(--mantis-divider) !important;
}

:root[data-eplus-theme="dark"] .geDiagramContainer {
    background: var(--mantis-canvas-background) !important;
}

:root[data-eplus-theme="dark"] .geDiagramContainer > div,
:root[data-eplus-theme="dark"] .geDiagramContainer svg,
:root[data-eplus-theme="dark"] .geDiagramContainer canvas {
    background-color: var(--mantis-canvas-background) !important;
}

:root[data-eplus-theme="dark"] .geBackgroundPage {
    background: var(--mantis-canvas-background) !important;
    box-shadow: 0 2px 10px var(--mantis-shadow) !important;
}

:root[data-eplus-theme="dark"] .geBackgroundPage + div,
:root[data-eplus-theme="dark"] .geDiagramContainer .mxGraph,
:root[data-eplus-theme="dark"] .geDiagramContainer .mxGraphBackground,
:root[data-eplus-theme="dark"] .geDiagramContainer .mxWindowPane {
    background-color: var(--mantis-canvas-background) !important;
}

:root[data-eplus-theme="dark"] .geMenubarContainer a,
:root[data-eplus-theme="dark"] .geToolbar a,
:root[data-eplus-theme="dark"] .geSidebarContainer a,
:root[data-eplus-theme="dark"] .geMenubarContainer .geItem,
:root[data-eplus-theme="dark"] .geToolbar .geItem,
:root[data-eplus-theme="dark"] .geToolbar .geButton,
:root[data-eplus-theme="dark"] .geToolbar .geLabel,
:root[data-eplus-theme="dark"] .geFooterContainer a {
    color: var(--mantis-text-secondary) !important;
}

:root[data-eplus-theme="dark"] .geMenubarContainer .geItem:hover,
:root[data-eplus-theme="dark"] .geToolbarContainer .geItem:hover,
:root[data-eplus-theme="dark"] .geToolbarContainer .geButton:hover,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel:hover,
:root[data-eplus-theme="dark"] .geFooterContainer td:hover {
    background: var(--mantis-hover) !important;
    border-color: var(--mantis-border) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .geToolbarContainer .mxDisabled,
:root[data-eplus-theme="dark"] .geToolbarContainer .mxDisabled:hover,
:root[data-eplus-theme="dark"] .geToolbarContainer .geButton.mxDisabled,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel.mxDisabled {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--mantis-text-disabled) !important;
    opacity: 0.58 !important;
}

:root[data-eplus-theme="dark"] .geToolbarContainer .mxDisabled .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .geButton.mxDisabled .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel.mxDisabled .geSprite,
:root[data-eplus-theme="dark"] .geToolbarContainer .mxDisabled img,
:root[data-eplus-theme="dark"] .geToolbarContainer .geButton.mxDisabled img,
:root[data-eplus-theme="dark"] .geToolbarContainer .geLabel.mxDisabled img {
    filter: invert(1) brightness(0.72) contrast(0.9) saturate(0);
    opacity: 0.62 !important;
}

:root[data-eplus-theme="dark"] .geToolbarContainer .geSeparator {
    background: var(--mantis-divider) !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer .geTitle {
    background: var(--mantis-surface-elevated) !important;
    color: var(--mantis-text) !important;
    border-color: var(--mantis-divider) !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer .geTitle:hover,
:root[data-eplus-theme="dark"] .geSidebar .geItem:hover {
    background: var(--mantis-primary-soft) !important;
    color: var(--mantis-text) !important;
    border-color: var(--mantis-primary) !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer,
:root[data-eplus-theme="dark"] .geSidebarContainer > div,
:root[data-eplus-theme="dark"] .geSidebarContainer .geSidebar,
:root[data-eplus-theme="dark"] .geSidebarContainer .geSidebarFooter,
:root[data-eplus-theme="dark"] .geSidebarContainer .sidebar-bottom-space {
    background-color: var(--mantis-surface) !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer input,
:root[data-eplus-theme="dark"] .geSidebarContainer .geSearchBox,
:root[data-eplus-theme="dark"] .geSidebarContainer .geSearchInput {
    background-color: var(--mantis-input-background) !important;
    border-color: var(--mantis-border) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer input:not([type="checkbox"]):not([type="radio"]),
:root[data-eplus-theme="dark"] .geSidebarContainer select,
:root[data-eplus-theme="dark"] .geSidebarContainer textarea,
:root[data-eplus-theme="dark"] .geFormatContainer input:not([type="checkbox"]):not([type="radio"]),
:root[data-eplus-theme="dark"] .geFormatContainer select,
:root[data-eplus-theme="dark"] .geFormatContainer textarea,
:root[data-eplus-theme="dark"] .mxWindow input:not([type="checkbox"]):not([type="radio"]),
:root[data-eplus-theme="dark"] .mxWindow select,
:root[data-eplus-theme="dark"] .mxWindow textarea,
:root[data-eplus-theme="dark"] .geDialog input:not([type="checkbox"]):not([type="radio"]),
:root[data-eplus-theme="dark"] .geDialog select,
:root[data-eplus-theme="dark"] .geDialog textarea {
    appearance: auto;
    background-color: var(--mantis-input-background) !important;
    background-image: none !important;
    border: 1px solid var(--mantis-border) !important;
    box-shadow: none !important;
    color: var(--mantis-text) !important;
    color-scheme: dark;
}

:root[data-eplus-theme="dark"] .geSidebarContainer input:not([type="checkbox"]):not([type="radio"])::placeholder,
:root[data-eplus-theme="dark"] .geFormatContainer input:not([type="checkbox"]):not([type="radio"])::placeholder,
:root[data-eplus-theme="dark"] .mxWindow input:not([type="checkbox"]):not([type="radio"])::placeholder,
:root[data-eplus-theme="dark"] .geDialog input:not([type="checkbox"]):not([type="radio"])::placeholder,
:root[data-eplus-theme="dark"] .geSidebarContainer textarea::placeholder,
:root[data-eplus-theme="dark"] .geFormatContainer textarea::placeholder,
:root[data-eplus-theme="dark"] .mxWindow textarea::placeholder,
:root[data-eplus-theme="dark"] .geDialog textarea::placeholder {
    color: var(--mantis-text-disabled) !important;
    opacity: 1;
}

:root[data-eplus-theme="dark"] .geSidebarContainer input[type="checkbox"],
:root[data-eplus-theme="dark"] .geSidebarContainer input[type="radio"],
:root[data-eplus-theme="dark"] .geFormatContainer input[type="checkbox"],
:root[data-eplus-theme="dark"] .geFormatContainer input[type="radio"],
:root[data-eplus-theme="dark"] .mxWindow input[type="checkbox"],
:root[data-eplus-theme="dark"] .mxWindow input[type="radio"],
:root[data-eplus-theme="dark"] .geDialog input[type="checkbox"],
:root[data-eplus-theme="dark"] .geDialog input[type="radio"] {
    accent-color: var(--mantis-primary);
    color-scheme: dark;
}

:root[data-eplus-theme="dark"] .geSidebarContainer button:not(.eplus-shape-btn):not(.eplus-shape-tab):not(.eplus-shape-drawer-close):not(.eplus-palette-show-more),
:root[data-eplus-theme="dark"] .geFormatContainer button,
:root[data-eplus-theme="dark"] .mxWindow button,
:root[data-eplus-theme="dark"] .geDialog button,
:root[data-eplus-theme="dark"] .geFormatContainer .geBtn,
:root[data-eplus-theme="dark"] .geFormatContainer .geColorBtn {
    background: var(--mantis-input-background) !important;
    background-image: none !important;
    border: 1px solid var(--mantis-border) !important;
    box-shadow: none !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer button:not(.eplus-shape-btn):not(.eplus-shape-tab):not(.eplus-shape-drawer-close):not(.eplus-palette-show-more):hover,
:root[data-eplus-theme="dark"] .geFormatContainer button:hover,
:root[data-eplus-theme="dark"] .mxWindow button:hover,
:root[data-eplus-theme="dark"] .geDialog button:hover,
:root[data-eplus-theme="dark"] .geFormatContainer .geBtn:hover,
:root[data-eplus-theme="dark"] .geFormatContainer .geColorBtn:hover {
    background: var(--mantis-hover) !important;
    border-color: var(--mantis-primary) !important;
    color: var(--mantis-hover-text) !important;
}

:root[data-eplus-theme="dark"] .geFormatContainer,
:root[data-eplus-theme="dark"] .geFormatContainer > div,
:root[data-eplus-theme="dark"] .geFormatContainer table,
:root[data-eplus-theme="dark"] .geFormatContainer td,
:root[data-eplus-theme="dark"] .geFormatContainer .geTitle,
:root[data-eplus-theme="dark"] .geFormatContainer .gePanel,
:root[data-eplus-theme="dark"] .geFormatContainer .geStylePanel {
    background-color: var(--mantis-surface) !important;
    border-color: var(--mantis-divider) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .geFormatContainer div,
:root[data-eplus-theme="dark"] .geFormatContainer span,
:root[data-eplus-theme="dark"] .geFormatContainer label,
:root[data-eplus-theme="dark"] .geFormatContainer td,
:root[data-eplus-theme="dark"] .geFormatContainer font {
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .geFormatContainer .geTitle,
:root[data-eplus-theme="dark"] .geFormatContainer .geLabel,
:root[data-eplus-theme="dark"] .geFormatContainer .geHint,
:root[data-eplus-theme="dark"] .geFormatContainer .geSectionTitle,
:root[data-eplus-theme="dark"] .geFormatContainer .geFormatMuted {
    color: var(--mantis-text-secondary) !important;
}

:root[data-eplus-theme="dark"] .geFormatContainer input,
:root[data-eplus-theme="dark"] .geFormatContainer select,
:root[data-eplus-theme="dark"] .geFormatContainer textarea,
:root[data-eplus-theme="dark"] .geFormatContainer button {
    background-color: var(--mantis-input-background) !important;
    border-color: var(--mantis-border) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer button:not(.eplus-shape-btn):not(.eplus-shape-tab):not(.eplus-shape-drawer-close):not(.eplus-palette-show-more),
:root[data-eplus-theme="dark"] .geFormatContainer button,
:root[data-eplus-theme="dark"] .geFormatContainer input[type="button"],
:root[data-eplus-theme="dark"] .geFormatContainer input[type="submit"],
:root[data-eplus-theme="dark"] .geFormatContainer .geBtn {
    appearance: none;
    background-color: var(--mantis-input-background) !important;
    background-image: none !important;
    border: 1px solid var(--mantis-border) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer button:not(.eplus-shape-btn):not(.eplus-shape-tab):not(.eplus-shape-drawer-close):not(.eplus-palette-show-more):hover,
:root[data-eplus-theme="dark"] .geFormatContainer button:hover,
:root[data-eplus-theme="dark"] .geFormatContainer input[type="button"]:hover,
:root[data-eplus-theme="dark"] .geFormatContainer input[type="submit"]:hover,
:root[data-eplus-theme="dark"] .geFormatContainer .geBtn:hover {
    background-color: var(--mantis-hover) !important;
    border-color: var(--mantis-primary) !important;
    color: var(--mantis-hover-text) !important;
}

:root[data-eplus-theme="dark"] .geSidebarTooltip,
:root[data-eplus-theme="dark"] .mxPopupMenu,
:root[data-eplus-theme="dark"] .geMenubarMenu,
:root[data-eplus-theme="dark"] .geToolbarMenu,
:root[data-eplus-theme="dark"] .mxWindow,
:root[data-eplus-theme="dark"] .mxWindowPane,
:root[data-eplus-theme="dark"] .geDialog {
    background: var(--mantis-surface) !important;
    border-color: var(--mantis-border) !important;
    color: var(--mantis-text) !important;
    box-shadow: 0 8px 24px var(--mantis-shadow) !important;
}

:root[data-eplus-theme="dark"] .mxWindowTitle,
:root[data-eplus-theme="dark"] .geDialogTitle,
:root[data-eplus-theme="dark"] .geDialog .geTitle {
    background: var(--mantis-surface-elevated) !important;
    border-color: var(--mantis-divider) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .mxPopupMenuItem,
:root[data-eplus-theme="dark"] .mxPopupMenuItem td,
:root[data-eplus-theme="dark"] .geDialog table,
:root[data-eplus-theme="dark"] .geDialog td,
:root[data-eplus-theme="dark"] .mxWindow table,
:root[data-eplus-theme="dark"] .mxWindow td,
:root[data-eplus-theme="dark"] .mxWindowPane div,
:root[data-eplus-theme="dark"] .geSidebarContainer div,
:root[data-eplus-theme="dark"] .geSidebarContainer span,
:root[data-eplus-theme="dark"] .geFooterContainer td {
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .mxPopupMenuItemHover,
:root[data-eplus-theme="dark"] .mxPopupMenuItem:hover {
    background: var(--mantis-hover) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] input,
:root[data-eplus-theme="dark"] select,
:root[data-eplus-theme="dark"] textarea,
:root[data-eplus-theme="dark"] button:not(.gePrimaryBtn):not(.geBlueBtn):not(.geDangerBtn),
:root[data-eplus-theme="dark"] .geColorBtn {
    background: var(--mantis-input-background) !important;
    border-color: var(--mantis-border) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] input::placeholder,
:root[data-eplus-theme="dark"] textarea::placeholder {
    color: var(--mantis-text-disabled) !important;
}

:root[data-eplus-theme="dark"] option {
    background: var(--mantis-input-background) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .geBtn,
:root[data-eplus-theme="dark"] .geBlack {
    background: var(--mantis-input-background) !important;
    border-color: var(--mantis-border) !important;
    color: var(--mantis-text) !important;
    box-shadow: none !important;
}

:root[data-eplus-theme="dark"] .geBtn:hover,
:root[data-eplus-theme="dark"] .geBlack:hover {
    background: var(--mantis-hover) !important;
    border-color: var(--mantis-primary) !important;
    color: var(--mantis-text) !important;
}

:root[data-eplus-theme="dark"] .gePrimaryBtn,
:root[data-eplus-theme="dark"] .geBlueBtn {
    background: var(--mantis-primary) !important;
    border-color: var(--mantis-primary) !important;
    color: #ffffff !important;
}

:root[data-eplus-theme="dark"] .gePrimaryBtn:hover,
:root[data-eplus-theme="dark"] .geBlueBtn:hover {
    background: var(--mantis-primary-dark) !important;
    border-color: var(--mantis-primary-dark) !important;
}

:root[data-eplus-theme="dark"] .geStatusMessage {
    background: rgba(31, 153, 45, 0.14) !important;
    border-color: rgba(31, 153, 45, 0.32) !important;
    color: #8be295 !important;
}

:root[data-eplus-theme="dark"] .geStatusAlert,
:root[data-eplus-theme="dark"] .geAlert {
    background: rgba(255, 77, 79, 0.14) !important;
    border-color: rgba(255, 77, 79, 0.34) !important;
    color: #ffb4b5 !important;
    box-shadow: 0 8px 24px var(--mantis-shadow) !important;
}

:root[data-eplus-theme="dark"] .geHint {
    background: var(--mantis-surface-elevated) !important;
    border-color: var(--mantis-border) !important;
    color: var(--mantis-text) !important;
    box-shadow: 0 6px 18px var(--mantis-shadow) !important;
}

:root[data-eplus-theme="dark"] .geSidebarContainer::-webkit-scrollbar,
:root[data-eplus-theme="dark"] .geDiagramContainer::-webkit-scrollbar,
:root[data-eplus-theme="dark"] .mxWindowPane::-webkit-scrollbar,
:root[data-eplus-theme="dark"] textarea::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

:root[data-eplus-theme="dark"] .geSidebarContainer::-webkit-scrollbar-thumb,
:root[data-eplus-theme="dark"] .geDiagramContainer::-webkit-scrollbar-thumb,
:root[data-eplus-theme="dark"] .mxWindowPane::-webkit-scrollbar-thumb,
:root[data-eplus-theme="dark"] textarea::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border: 2px solid transparent;
    border-radius: 4px;
    background-clip: padding-box;
}

/*
 * Tooltips.
 *
 * mxGraph's own common.css draws div.mxTooltip as a bright #FFFFCC note with a
 * black border - the last surface in the editor still using its 2006 styling.
 * It is legible in dark mode but glares, and it was the one pop-up the dark
 * theme had never been extended to. Matched here to the same surface the
 * dialogs and menus use.
 */
:root[data-eplus-theme="dark"] div.mxTooltip {
    background: var(--mantis-surface, #17223a);
    border-color: var(--mantis-border, rgba(255, 255, 255, 0.16));
    color: var(--mantis-text, #e6ebf1);
    box-shadow: 0 6px 18px var(--mantis-shadow);
}