@itsthecsguy/linework 0.0.0-stage → 0.1.0

package/assets/drawio/styles/grapheditor.css

@@ -0,0 +1,4501 @@
+:root {
+	--ge-panel-color: #f1f3f4;
+	--toolbar-color: #f1f3f4;
+	--workspace-color: #ececec;
+	--dark-toolbar-color: #1e2022;
+	--inactive-color: #e4e4e4;
+	--active-color: #c4c4c4;
+	--primary-color: #c2e7ff;
+	--primary-hover-color: #abcfe7;
+	--accent-color: #e1e9f7;
+	--accent-hover-color: #d8e5f8;
+	--accent-text-color: #0b57d0;
+	--border-color: #dadada;
+	--highlight-color: #e2e2e2;
+	--scrollbar-hover-color: #959798;
+	--text-color: #3F3F3F;
+	--dark-color: #121212;
+	--ge-dark-panel-color: #1B1D1E;
+	--dark-border-color: #333333;
+	--dark-text-color: #C0C0C0;
+	--dark-accent-color: #003555;
+	--dark-accent-text-color: #52a5f6;
+	--dark-active-accent-color: #004A77;
+	--dark-inverse-active-color: #c4c4c4;
+	--dark-highlight-color: #000000;
+	--dark-header-color: #1B1D1E;
+	/* Dialogs, windows and comments */
+	--dialog-color: #f0f0f0;
+	--dark-dialog-color: #2a2a2a;
+	--strong-text-color: #1d1d1f;
+	--dark-strong-text-color: #e5e5e7;
+	--secondary-text-color: #6e6e73;
+	--dark-secondary-text-color: #a0a0a0;
+	--faint-text-color: #8e8e93;
+	--dark-faint-text-color: #7a7a7e;
+	/* Input fields, cards and chips */
+	--field-color: #ffffff;
+	--dark-field-color: #1c1c1e;
+	--field-border-color: #d2d2d7;
+	--dark-field-border-color: #48484a;
+	--strong-border-color: #b9b9be;
+	--dark-strong-border-color: #5a5a5e;
+	/* Buttons of dialogs and windows in dark mode */
+	--dark-button-border-color: rgba(255, 255, 255, 0.15);
+	--card-color: #ffffff;
+	--dark-card-color: #2c2c2e;
+	--soft-color: whitesmoke;
+	--dark-soft-color: #3a3a3c;
+	--soft-hover-color: #f0f0f2;
+	--dark-soft-hover-color: #3a3a3c;
+	/* Accents (selected and focused states) */
+	--focus-color: #0071e3;
+	--dark-focus-color: #0a84ff;
+	--mention-color: #0a4bb0;
+	--dark-mention-color: #7eb1ff;
+	--mention-background-color: #e8f0fe;
+	--dark-mention-background-color: #10325f;
+	--selected-color: #d4e4f7;
+	--selected-hover-color: #c4d8f0;
+	--active-item-color: lightgray;
+	--dark-active-item-color: darkgray;
+	/* Status */
+	--error-color: #b62623;
+	--dark-error-color: #ffffff;
+	--error-background-color: #eacccc;
+	--dark-error-background-color: #a20025;
+	/* Misc */
+	--scrollbar-color: #e2e2e2;
+	--dark-scrollbar-color: #2c2c2c;
+	--prop-stripe-color: #fcfcfc;
+	--prop-accent-color: #D9E1F2;
+	--prop-accent-text-color: #305496;
+}
+
+/* System colors (systemColors in Editor.configure): derives the grays from
+   the CSS system colors Canvas and CanvasText, which the browser resolves
+   for the color scheme where they are used. With the default Canvas and
+   CanvasText of Chrome, the mixes give the fixed colors above. Accent,
+   selection and status colors are unchanged. Not used with forced colors,
+   where high-contrast.css applies. */
+@media (forced-colors: none) {
+	:root.geSystemColors {
+		--ge-panel-color: color-mix(in srgb, CanvasText 5%, Canvas);
+		--toolbar-color: color-mix(in srgb, CanvasText 5%, Canvas);
+		--workspace-color: color-mix(in srgb, CanvasText 7.5%, Canvas);
+		--inactive-color: color-mix(in srgb, CanvasText 10.5%, Canvas);
+		--active-color: color-mix(in srgb, CanvasText 23%, Canvas);
+		--border-color: color-mix(in srgb, CanvasText 14.5%, Canvas);
+		--highlight-color: color-mix(in srgb, CanvasText 11.5%, Canvas);
+		--scrollbar-hover-color: color-mix(in srgb, CanvasText 41%, Canvas);
+		--text-color: color-mix(in srgb, CanvasText 75%, Canvas);
+		--dialog-color: color-mix(in srgb, CanvasText 6%, Canvas);
+		--strong-text-color: color-mix(in srgb, CanvasText 88.5%, Canvas);
+		--secondary-text-color: color-mix(in srgb, CanvasText 56.5%, Canvas);
+		--faint-text-color: color-mix(in srgb, CanvasText 44%, Canvas);
+		--field-color: Canvas;
+		--field-border-color: color-mix(in srgb, CanvasText 17%, Canvas);
+		--strong-border-color: color-mix(in srgb, CanvasText 27%, Canvas);
+		--card-color: Canvas;
+		--soft-color: color-mix(in srgb, CanvasText 4%, Canvas);
+		--soft-hover-color: color-mix(in srgb, CanvasText 5.5%, Canvas);
+		--active-item-color: color-mix(in srgb, CanvasText 17%, Canvas);
+		--scrollbar-color: color-mix(in srgb, CanvasText 11.5%, Canvas);
+		--prop-stripe-color: color-mix(in srgb, CanvasText 1%, Canvas);
+		--dark-color: Canvas;
+		--dark-toolbar-color: color-mix(in srgb, CanvasText 6%, Canvas);
+		--ge-dark-panel-color: color-mix(in srgb, CanvasText 4.5%, Canvas);
+		--dark-header-color: color-mix(in srgb, CanvasText 4.5%, Canvas);
+		--dark-border-color: color-mix(in srgb, CanvasText 14%, Canvas);
+		--dark-text-color: color-mix(in srgb, CanvasText 73%, Canvas);
+		--dark-inverse-active-color: color-mix(in srgb, CanvasText 75%, Canvas);
+		--dark-dialog-color: color-mix(in srgb, CanvasText 10%, Canvas);
+		--dark-strong-text-color: color-mix(in srgb, CanvasText 89%, Canvas);
+		--dark-secondary-text-color: color-mix(in srgb, CanvasText 60%, Canvas);
+		--dark-faint-text-color: color-mix(in srgb, CanvasText 44%, Canvas);
+		--dark-field-color: color-mix(in srgb, CanvasText 4%, Canvas);
+		--dark-field-border-color: color-mix(in srgb, CanvasText 23%, Canvas);
+		--dark-strong-border-color: color-mix(in srgb, CanvasText 30%, Canvas);
+		--dark-button-border-color: color-mix(in srgb, CanvasText 15%, transparent);
+		--dark-card-color: color-mix(in srgb, CanvasText 11%, Canvas);
+		--dark-soft-color: color-mix(in srgb, CanvasText 17%, Canvas);
+		--dark-soft-hover-color: color-mix(in srgb, CanvasText 17%, Canvas);
+		--dark-active-item-color: color-mix(in srgb, CanvasText 64%, Canvas);
+		--dark-error-color: CanvasText;
+		--dark-scrollbar-color: color-mix(in srgb, CanvasText 11%, Canvas);
+	}
+}
+
+.geEditor * {
+	forced-color-adjust: none;
+}
+
+.geEditor {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, ui-sans-serif, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+	color-scheme: light dark;
+	position: absolute;
+	overflow: hidden;
+	font-size: 14px;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	display: grid;
+	grid-template-rows: min-content min-content 1fr min-content;
+	grid-template-columns: min-content min-content 1fr min-content;
+}
+
+html.geFullscreen,
+.geEditor,
+.mxWindow,
+.geDialogTitle,
+.geShapePicker,
+.geDialogFooter,
+.geSidebarTooltip {
+	background-color: light-dark(var(--ge-panel-color), var(--ge-dark-panel-color));
+}
+
+.geEditor>svg,
+div[id*="dgeMermaidOutput-"] {
+	position: absolute;
+	margin: -9999px 0 0 -9999px;
+	z-index: -1;
+}
+
+.geEditor>#geInfo {
+	grid-column: 1 / -1;
+	grid-row: 1 / -1;
+}
+
+.geSimpleMainMenu,
+.geEditor>.geMenubarContainer {
+	grid-column: 1 / -1;
+	grid-row: 1;
+	width: 100%;
+	height: 60px;
+	margin-top: 4px;
+}
+
+.geCompactMode .geAppIcon,
+.geCompactMode .geFilenameContainer,
+.geSimple .geMenubarContainer:not(.geMinimal *),
+.geCompactMode .geButtonContainer:not(.geAtlas *, .geEmbed *),
+.geSimple>.geToolbarContainer:not(.geSimpleMainMenu, .geSketch *),
+.geSketch>.geToolbarContainer:has(.geToolbar) {
+	display: none;
+}
+
+.geEditor.geAtlas>.geMenubarContainer,
+.geEditor.geCompactMode>.geMenubarContainer {
+	margin-top: 0;
+	height: 30px;
+}
+
+.geEditor.geCompactMode>.geToolbarContainer:not(.geSketch *, .geAtlas *) {
+	padding-left: 8px;
+}
+
+.geEditor.geSimple>.geToolbarContainer:not(.geVerticalToolbar) {
+	padding: 0 10px;
+	height: 50px;
+}
+
+.geEditor.geSketch>.geToolbarContainer:not(.geVerticalToolbar) {
+	height: 44px;
+}
+
+.geSketchMainMenu {
+	left: 10px;
+	top: 10px;
+}
+
+.geEditor:not(.geSimple) .geSimpleMainMenu {
+	display: none;
+}
+
+.geEditor.geCompactMode>.geMenubarContainer>.geMenubar {
+	padding-left: 4px;
+	top: 0;
+}
+
+.geToolbarContainer:not(.geVerticalToolbar) {
+	height: 38px;
+}
+
+.geEditor>.geToolbarContainer:not(.geSketch *) {
+	grid-column: 1 / -1;
+	grid-row: 2;
+	padding: 0 8px 0 16px;
+	width: 100%;
+}
+
+.geEditor.geClassic>.geToolbarContainer {
+	border-top-style: solid;
+	border-top-width: 1px;
+	border-bottom-style: solid;
+	border-bottom-width: 1px;
+}
+
+.geEditor>.geSidebarContainer:not(.geFormatContainer) {
+	min-height: 0;
+	grid-column: 1;
+	grid-row: 3;
+}
+
+.geEditor>.geSidebarContainer.geFormatContainer {
+	min-height: 0;
+	grid-column: 4;
+	grid-row: 3;
+}
+
+.geEditor>.geHsplit {
+	grid-column: 2;
+	grid-row: 3;
+	z-index: 2;
+}
+
+.geEditor>.geDiagramContainer {
+	min-height: 0;
+	margin-left: -10px;
+	grid-column: 3;
+	grid-row: 3;
+}
+
+.geEmbedInline>div.geDiagramContainer {
+	margin-left: 0;
+}
+
+/* The color window of the inline toolbar stays */
+.geInlineNoUi .geToolbarContainer,
+.geInlineNoUi .mxWindow:not(.geColorWindow) {
+	display: none !important;
+}
+
+.geEditor>.geTabContainer {
+	grid-column: 1 / -1;
+	grid-row: 4;
+	width: 100%;
+}
+
+.geSmallAppIcon {
+	padding: 0 4px 0 8px;
+}
+
+.geAtlas .geSmallAppIcon {
+	padding-left: 8px;
+}
+
+.geAppIcon {
+	display: block;
+	position: absolute;
+	top: 10px;
+	left: 16px;
+	width: 32px;
+	height: 36px;
+	border-radius: 4px;
+	background-color: rgb(240, 135, 5);
+	background-position: center center;
+	background-repeat: no-repeat;
+	transition: 0.1s linear;
+	cursor: pointer;
+	background-size: 100%;
+	opacity: 0.9;
+}
+
+.geMenubar {
+	top: 28px;
+	width: 100%;
+	height: 30px;
+	display: flex;
+	position: absolute;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0px 2px 0px 58px;
+}
+
+.geFilenameContainer {
+	position: absolute;
+	right: 260px;
+	left: 60px;
+	top: 4px;
+	height: 26px;
+	display: block;
+	margin-left: 0px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.geFilename {
+	padding: 3px 4px;
+	display: inline;
+	font-size: 18px;
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.geEditor,
+.geEditor tr.mxPopupMenuItemHover,
+.geEditor tr.mxPopupMenuItem {
+	color: light-dark(var(--text-color), var(--dark-text-color));
+}
+
+:where(.geEditor *):not(svg *, .mxCellEditor *, .mxRubberband) {
+	border-color: light-dark(var(--border-color), var(--dark-border-color));
+}
+
+:where(.geEditor button):not(svg *),
+:where(.geEditor select):not(svg *),
+:where(.geEditor input):not(svg *),
+:where(.geEditor textarea):not(svg *) {
+	color: light-dark(var(--text-color), var(--dark-text-color));
+	background-color: transparent;
+	border: 1px solid;
+	border-radius: 4px;
+	padding: 2px;
+}
+
+.geEditor input:not(svg *, .geButton) {
+	background-color: light-dark(var(--field-color), var(--dark-toolbar-color));
+}
+
+.geHsplit {
+	background: linear-gradient(light-dark(var(--dark-accent-text-color), var(--accent-text-color)), light-dark(var(--dark-accent-text-color), var(--accent-text-color))) no-repeat left/2px 100%;
+	transition: opacity 0.1s linear 0.1s;
+	cursor: ew-resize;
+	width: 10px;
+	opacity: 0;
+}
+
+.geHsplit:hover {
+	opacity: 1;
+}
+
+.geDialog .geToolbarContainer,
+.geSketch .geToolbarContainer:not(.mxWindow *) {
+	position: absolute;
+}
+
+.geSketch .geHsplit,
+.geSketch .geTabContainer {
+	display: none;
+}
+
+.geSketch .geToolbarContainer:not(.geDialog *, .mxWindow *),
+.geSketch .mxWindow,
+.geEditor.geMinimal .mxPopupMenu,
+.geMinimal .mxWindow,
+.geMinimal .geTabItem {
+	background-color: light-dark(var(--toolbar-color), var(--dark-toolbar-color));
+}
+
+.geMinimal .geMenubarContainer,
+.geToolbar {
+	display: flex;
+	align-items: center;
+	flex-grow: 1;
+}
+
+.geMinimal .geMenubarContainer {
+	border-bottom-style: solid;
+	border-bottom-width: 1px;
+	box-sizing: border-box;
+	padding: 8px;
+	height: 48px;
+	margin: 0;
+}
+
+.geToolbarContainer,
+.geFormatTitleContainer {
+	margin: 0;
+	display: flex;
+	box-sizing: border-box;
+	align-items: center;
+}
+
+.geFormatTitleContainer {
+	justify-content: center;
+}
+
+.geButton,
+.geHelpIcon:not(.geTitle *),
+.mxPopupMenuItem>div:not(:has(img)),
+.geTitle,
+.geBtnStepper>div {
+	position: relative;
+}
+
+.geFreehandMode,
+.geFreehandMode *,
+.gePolygonMode,
+.gePolygonMode * {
+	cursor: crosshair !important;
+}
+
+.geDarkMode .geButton,
+.geDarkMode .geHelpIcon:not(.geTitle *),
+.geDarkMode .mxPopupMenuItem>div:not(:has(img)),
+.geDarkMode .geButtonContainer .geButton.geRoundButton img:not(.geAdaptiveAsset),
+.geDarkMode .geAdaptiveAsset,
+.geDarkMode .geTitle,
+.geDarkMode .geBtnStepper>div,
+.geDarkMode .geColorDropper,
+.geDarkMode .geStyleMenuItem,
+.geDarkMode .gePropHeader>.gePropHeaderCell:first-child,
+.geDarkMode .geStyleBtn .geAdaptiveAsset.geArrow,
+.geAtlas .geMenubar .geButtonContainer .geButton:empty,
+.geAtlas .geMenubar .geButtonContainer .geButton:has(> span.geCommentsBadge:only-child),
+.geAtlas .geMenubar .geButtonContainer .geButton .geAdaptiveAsset:not(.geDarkMode *),
+.geAtlas .geMenubar .geButtonContainer .geButton img:last-child {
+	filter: invert(1);
+	outline: none;
+}
+
+/* Keyboard focus ring of the inverted controls above: the inverse of the focus
+   color shows the focus color, else the color of the control is used. The
+   outline shows in forced colors. */
+.geDarkMode .geButton:focus-visible,
+.geDarkMode .geHelpIcon:not(.geTitle *):focus-visible,
+.geDarkMode .geAdaptiveAsset:focus-visible,
+.geDarkMode .geTitle:focus-visible,
+.geDarkMode .geTitle.geFocusRing,
+.geDarkMode .geTitle .geLibraryButton:focus-visible,
+.geDarkMode .gePropHeader>.gePropHeaderCell:focus-visible,
+.geAtlas .geMenubar .geButtonContainer .geButton:empty:focus-visible,
+.geAtlas .geMenubar .geButtonContainer .geButton:has(> span.geCommentsBadge:only-child):focus-visible {
+	outline: 2px solid currentColor;
+	outline: 2px solid rgb(from var(--dark-focus-color) calc(255 - r) calc(255 - g) calc(255 - b));
+}
+
+/* Cancels out the inversion for the badge in the atlas menubar */
+.geAtlas .geMenubar .geButtonContainer span.geCommentsBadge {
+	filter: invert(1);
+}
+
+.geDarkMode .geStyleBtn .geAdaptiveAsset.geArrow {
+	color: black;
+}
+
+.geDarkMode .geButtonContainer .geButton.geRoundButton img:last-child {
+	filter: none;
+}
+
+.geMinimal .geButtonContainer .geButton {
+	margin: 0;
+}
+
+.gePrimaryBtn {
+	background-color: light-dark(var(--primary-color), var(--dark-accent-color));
+	box-shadow: none;
+	border: none;
+}
+
+.geFormatTitleContainer {
+	height: 34px;
+	margin-bottom: 12px;
+}
+
+.geFormatTitle {
+	background: light-dark(var(--inactive-color), var(--dark-highlight-color));
+	border-bottom-style: solid;
+	border-left-style: solid;
+	border-width: 1px;
+	display: inline-flex;
+	text-overflow: ellipsis;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	font-size: 13px;
+	cursor: pointer;
+	height: 100%;
+	flex: 1;
+}
+
+.geFormatTitle.geActiveFormatTitle {
+	background: transparent;
+	border-bottom-style: none;
+}
+
+.geFormatTitle:first-child {
+	border-left-style: none;
+}
+
+.geTitle,
+.geFormatTitle>div {
+	font-weight: 500;
+}
+
+.geFormatTitle>div {
+	display: inline;
+	text-align: center;
+	white-space: nowrap;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 6px;
+}
+
+.gePageTab>div.geButton {
+	width: 20px !important;
+}
+
+.gePageTab:hover,
+.gePageGroupTab:hover {
+	background-color: light-dark(var(--highlight-color), var(--dark-border-color));
+	opacity: 1;
+}
+
+.geFormatContent {
+	margin-left: 12px;
+	margin-right: 8px;
+}
+
+div.geActivePage {
+	background-color: light-dark(var(--accent-color), var(--dark-accent-color));
+	color: light-dark(var(--accent-text-color), var(--dark-accent-text-color));
+}
+
+div.geActivePage:hover {
+	background-color: light-dark(var(--accent-hover-color), var(--dark-active-accent-color));
+}
+
+.geGraphStylePreview {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 88px;
+	height: 76px;
+	cursor: pointer;
+	margin: 2px 6px;
+	overflow: hidden;
+	border-radius: 8px;
+	opacity: 0.7;
+}
+
+.geSwitcher {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	position: relative;
+}
+
+/* The dots are 24px apart, the spacing of small targets in WCAG 2.5.8 */
+.geSwitcher>.geSwitcherDot {
+	display: inline-block;
+	width: 6px;
+	height: 6px;
+	margin-left: 8px;
+	margin-right: 8px;
+	border-radius: 3px;
+	cursor: pointer;
+	border: 1px solid rgb(181, 182, 183);
+}
+
+.geGraphStylePreview>div {
+	position: relative;
+	pointer-events: none;
+	width: 60px;
+	height: 60px;
+}
+
+.mxPopupMenuIcon img,
+.geStyleBtn .geAdaptiveAsset,
+.geGraphStylePreview:active {
+	opacity: 0.75;
+}
+
+.geSidebarContainer:has(.geSidebarFooter)>div:first-child {
+	position: relative;
+	overflow: hidden auto;
+	left: 0px;
+	top: 0px;
+	right: 0px;
+	box-sizing: border-box;
+	max-height: calc(100% - 44px);
+}
+
+.geSidebarFooter {
+	position: absolute;
+	overflow: hidden;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	max-height: 100%;
+	padding-top: 2px;
+	height: 44px;
+	width: 100%;
+}
+
+.geSidebarFooter .gePrimaryBtn {
+	padding: 8px 12px;
+	margin: 0px;
+}
+
+.geSidebarFooter .gePrimaryBtn span {
+	font-size: 18px;
+	margin-right: 5px;
+}
+
+html body.geEditor .gePrimaryBtn:hover:not([disabled]) {
+	background-color: light-dark(var(--primary-hover-color), var(--dark-active-accent-color));
+	box-shadow: none;
+	border: none;
+}
+
+.geStatus {
+	padding: 4px 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.geButtonGroup {
+	display: inline-flex;
+	align-items: center;
+	height: 24px;
+	border-radius: 6px;
+	margin-right: 6px;
+	padding: 3px 8px;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .11), inset 0 -1px 0 0 rgba(0, 0, 0, .08), 0 1px 2px 0 rgba(0, 0, 0, .04);
+}
+
+.geDarkMode .geButtonGroup {
+	border-style: solid;
+    border-width: 1px;
+}
+
+.geButtonGroup .geButton {
+	background-size: 22px;
+	margin: 0 4px;
+}
+
+.geTabItem.geTabZoom {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-right: 16px;
+	width: 50px;
+	right: 0px;
+	bottom: 0px;
+	box-sizing: content-box;
+	background-position: right 6px center;
+	background-repeat: no-repeat;
+	background-size: 13px;
+	z-index: 1;
+	cursor: pointer;
+}
+
+.geButton>span {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 13px;
+}
+
+html body.geSimple .mxWindow {
+	z-index: 3;
+	font-size: 12px;
+}
+
+html body.geSimple table.mxWindow {
+	font-size: 12px;
+}
+
+.geSimple .geStatus>div {
+	max-width: 100%;
+	box-sizing: border-box;
+	text-overflow: ellipsis;
+}
+
+.geSimple .geBtn button {
+	min-width: 72px !important;
+}
+
+.geSimple div.geToolbarContainer a.geButton:not(.geSketch *) {
+	margin: 0px;
+	padding: 0 2px 4px 2px;
+}
+
+html body.geSimple div.geToolbarContainer a.geColorBtn {
+	margin: 2px;
+}
+
+.geToolbarContainer.geDialogToolbar {
+	position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    height: 32px;
+    overflow: hidden;
+    padding: 3px 4px 4px;
+    border-width: 1px 0px 0px;
+    border-style: solid;
+    white-space: nowrap;
+}
+
+.geSimpletable.mxWindow td.mxWindowPane button.geColorBtn {
+	padding: 0px;
+	box-sizing: border-box;
+}
+
+html body.geSimple .geMenuItem {
+	font-size: 14px;
+	text-decoration: none;
+	font-weight: normal;
+	padding: 6px 10px 6px 10px;
+	border: none;
+	border-radius: 5px;
+	color: light-dark(var(--text-color), var(--dark-text-color));
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .11), inset 0 -1px 0 0 rgba(0, 0, 0, .08), 0 1px 2px 0 rgba(0, 0, 0, .04);
+}
+
+html body div.mxPopupMenu {
+	border-radius: 5px;
+	border: 1px solid #c0c0c0;
+	padding: 5px 0 5px 0;
+	box-shadow: 0px 4px 17px -4px rgba(96, 96, 96, 1);
+}
+
+html table.mxPopupMenu td.mxPopupMenuItem {
+	font-size: 14px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+
+html tr.mxPopupMenuItem,
+html td.mxPopupMenuItem {
+	transition-property: none !important;
+}
+
+/* Menu items with the keyboard focus have the hover style (see
+   mxPopupMenu.addItem), the outline shows in forced colors */
+table.mxPopupMenu tr:focus {
+	outline: 1px solid transparent;
+	outline-offset: -1px;
+}
+
+html body td.mxWindowTitle {
+	padding-right: 14px;
+}
+
+html body.geEditor.geDarkMode *,
+html body .mxWindow.geDarkMode {
+	box-shadow: none !important;
+}
+
+html body.geDarkMode .mxCellEditor {
+	color: #f0f0f0;
+}
+
+html body.geDarkMode.geEditor div.mxPopupMenu {
+	border: 1px solid var(--dark-border-color);
+	background-color: var(--ge-dark-panel-color);
+}
+
+html body.geDarkMode.geEditor div.mxPopupMenu.geToolbarMenu {
+	box-shadow: 0px 0px 3px 1px #d1d1d1;
+}
+
+.geTabContainer {
+	border-left-color: var(--dark-border-color);
+	border-right-color: var(--dark-border-color);
+}
+
+html body.geDarkMode.geEditor div.mxPopupMenu hr {
+	background-color: var(--dark-border-color);
+}
+
+.geDragPreview {
+	border: 1px dashed light-dark(black, #cccccc);
+}
+
+.geEditor .geTemplate {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 12px;
+	position: relative;
+	cursor: pointer;
+	margin: 5px;
+	height: 135px;
+	width: 135px;
+	font-size: 14pt;
+	border-width: 2px;
+	border-style: dashed;
+	border-color: transparent;
+}
+
+.geTemplate.geTemplateSelected {
+	border-color: light-dark(var(--dark-accent-text-color), var(--accent-text-color));
+}
+
+div.geTemplatePreview {
+	position: absolute;
+	display: inline-flex;
+	background-origin: content-box;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center center;
+	opacity: 0.7;
+	padding: 8px;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.geTemplate:has(span) .geTemplatePreview {
+	opacity: 0.2;
+}
+
+.geTemplateSelected .geTemplatePreview {
+	opacity: 1 !important;
+}
+
+.geTemplate span {
+	position: absolute;
+	display: inline-block;
+	padding: 2px 8px;
+	user-select: none;
+	border-radius: 8px;
+	background: rgba(255, 255, 255, 0.7);
+	max-width: 80%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: 1.3em;
+	text-align: center;
+}
+
+.geGenerateDiagramForm {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+.geGenerateDiagramDescription {
+	position: absolute;
+	font-family: sans-serif;
+	outline: none;
+	inset: 0px 0px 38px;
+	resize: none;
+	font-size: 12px;
+	border: none;
+	margin: 8px;
+}
+
+.geBtn.geGenerateDiagramButton {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+	left: 0px;
+	margin: 8px;
+}
+
+.geTemplateSelected.geTemplateHasPreview span {
+	display: none;
+}
+
+.geEditor .geTemplate .geButton.geRoundButton {
+	position: absolute;
+	background: white;
+	margin: 0;
+	padding: 2px;
+	opacity: 1 !important;
+	width: 16px;
+	height: 16px;
+	right: 0px;
+	top: 0px;
+}
+
+.geTemplate .geGenerateDiagramForm .geButton.geRoundButton {
+    margin: -6px -6px 0 0;
+    padding: 2px !important;
+}
+
+.geDarkMode .geTemplate {
+	color: #000000;
+}
+
+html body.geDarkMode.geEditor button.geAdaptiveAsset:hover:not([disabled]) {
+	background-color: #fff;
+}
+
+html body.geDarkMode.geEditor button.geAdaptiveAsset:not([disabled]) {
+	border-color: #a2a2a2;
+}
+
+.geDarkMode .geInsertTablePicker,
+.geDarkMode .geInsertTablePicker * {
+	border-color: var(--dark-border-color);
+}
+
+html body.geDarkMode .geSketch .geToolbarContainer {
+	border-style: solid;
+}
+
+body.geDarkMode .geInverseAdaptiveAsset,
+.geDarkMode .geCommentUserImg {
+	filter: none !important
+}
+
+.geAdaptiveAsset {
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+html body.geDarkMode .geFooterContainer,
+html body.geDarkMode .geFooterContainer td {
+	border-color: var(--dark-border-color);
+}
+
+html body.geDarkMode .geFooterContainer a {
+	background-color: none;
+}
+
+html body.geDarkMode .geBigStandardButton {
+	border: 1px solid var(--dark-border-color);
+}
+
+html body.geDarkMode .geFooterContainer td:hover,
+html body.geDarkMode #geFooterItem1:hover,
+html body.geDarkMode .geBigStandardButton:hover {
+	background-color: var(--dark-highlight-color);
+}
+
+html body.geDarkMode.geEditor table.mxPopupMenu tr.mxPopupMenuItemHover {
+	background-color: var(--dark-highlight-color);
+}
+
+html body.geDarkMode.geEditor .geBaseButton:hover {
+	background-color: var(--dark-color);
+}
+
+html body.geDarkMode .geToolbarContainer .geSeparator {
+	background-color: var(--dark-border-color);
+}
+
+html body.geDarkMode table.mxPopupMenu hr {
+	border-color: var(--dark-border-color);
+	background-color: var(--dark-color);
+}
+
+html body.geDarkMode .geDialog,
+html body.geDarkMode div.mxWindow,
+html body div.mxWindow.geDarkMode {
+	background-color: var(--dark-dialog-color);
+	border-color: #838383;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Buttons of dialogs and windows have a border that shows on their color, as
+   the border color of the editor is almost the color of dialogs and windows.
+   Selects with the geBtn class keep the border of fields and its focus color. */
+html body.geDarkMode .geDialog .geBtn:not(.gePrimaryBtn, select),
+html body.geDarkMode div.mxWindow .geBtn:not(.gePrimaryBtn, select),
+html body div.mxWindow.geDarkMode .geBtn:not(.gePrimaryBtn, select) {
+	border-color: var(--dark-button-border-color);
+}
+
+.mxCellEditor {
+	font-family: initial;
+}
+
+.geDialog,
+html div.mxWindow,
+.geSketch .geToolbarContainer:not(.geDialog *, .mxWindow *) {
+	border-radius: 12px;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.geSketch .geToolbarContainer:not(.geDialog *, .mxWindow *) {
+	border-style: solid;
+	border-width: 1px;
+	padding: 6px;
+}
+
+div td.mxWindowTitle {
+	border-bottom-style: solid;
+	border-bottom-width: 1px;
+	font-size: 13px;
+	height: 22px;
+}
+
+/* The title buttons are 24px targets (WCAG 2.5.8) with the icon in the middle,
+   and the margin keeps the height they had with a padding of 4px */
+.mxWindowTitle>div>img:not(.geHelpIcon) {
+	box-sizing: border-box;
+	width: 24px;
+	height: 24px;
+	margin-top: -3px;
+	margin-bottom: -3px;
+	object-fit: none;
+}
+
+/* Help icons in titles, eg. of the AI window, are 16px with the padding of a
+   24px target */
+.mxWindowTitle>div>img.geHelpIcon {
+	padding: 4px;
+}
+
+/* Dock preview overlay shown during window drag */
+.geDockPreview {
+	position: fixed;
+	z-index: 9999;
+	background-color: rgba(41, 182, 242, 0.15);
+	border: 2px solid rgba(41, 182, 242, 0.6);
+	pointer-events: none;
+	display: none;
+	transition: opacity 0.15s ease-in-out;
+	box-sizing: border-box;
+}
+
+/* Docked window styles */
+html div.mxWindow.mxWindowDocked {
+	z-index: 2 !important;
+}
+
+.geBackground {
+	background-color: light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5));
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	opacity: 1;
+	backdrop-filter: blur(2px);
+}
+
+.geDialog,
+.geBackground,
+.geEditor .picker-dialog,
+.geEditor .picker-dialog-bg {
+	z-index: 10002;
+}
+
+.geEditor input[type=text]::-ms-clear {
+	display: none;
+}
+
+.geButtonContainer {
+	padding-right: 14px;
+	display: inline-flex;
+	align-items: center;
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
+.geMenubar .geButtonContainer {
+	margin-top: -42px;
+}
+
+.geToolbarContainer .geButtonContainer {
+	padding-right: 0px;
+}
+
+.geButtonContainer .gePrimaryBtn:not(.geEmbedBtn) {
+	margin: 0 4px;
+	width: auto;
+	height: 32px;
+}
+
+.geButtonContainer .gePrimaryBtn .geButton {
+	background-position: left center;
+	padding: 0 2px 0 24px;
+	width: auto;
+}
+
+.geEditor .geTabItem {
+	border-width: 1px;
+	border-top-style: solid;
+}
+
+.geEditor div.mxTooltip {
+	background-color: light-dark(var(--ge-panel-color), var(--ge-dark-panel-color));
+	color: light-dark(var(--text-color), var(--dark-text-color));
+	box-shadow: 1px 1px 2px 0px #ddd;
+	font-size: 11px;
+	padding: 6px;
+}
+
+.geSimpleMainMenu {
+	justify-content: start;
+	border-bottom-style: solid;
+	border-bottom-width: 1px;
+	padding: 0 12px;
+	height: 48px;
+	gap: 8px;
+	top: 0px;
+}
+
+.geSimpleMainMenu .geButton:not(.geZoomInput) {
+	background-size: 24px;
+}
+
+.geSketch .geToolbarContainer .geButton:not(.geZoomInput, .gePageMenu, .geFooterToolbar *) {
+	background-size: 22px;
+}
+
+.geSketch .geFooterToolbar:not(.geEmbedInline *) {
+	bottom: 12px;
+	right: 12px;
+}
+
+.geSketch .geFooterToolbar>* {
+	margin: 0;
+}
+
+.geSketchMainMenu {
+	left: 10px;
+	top: 10px;
+}
+
+.geEmbed .geMenubarContainer:not(.geMinimal *) {
+	padding: 0 28px 0 16px;
+}
+
+.geEditor.geClassic .geMenubarContainer {
+	padding-left: 4px;
+}
+
+.geSidebarContainer a,
+.geMenubarContainer a,
+.geToolbar a {
+	text-decoration: none;
+}
+
+.geMenubarContainer,
+.geToolbarContainer,
+.geDiagramContainer,
+.geSidebarContainer {
+	overflow: hidden;
+	white-space: nowrap;
+	position: relative;
+}
+
+div.geFormatContainer {
+	overflow-y: auto;
+	font-size: 12px;
+	width: 240px;
+}
+
+.geDiagramContainer {
+	background-color: light-dark(var(--workspace-color), var(--ge-dark-panel-color));
+	font-size: 0px;
+	outline: none;
+}
+
+/* Diagram that got the focus with the keyboard (see EditorUi.init). A sticky
+   overlay as the canvas covers outlines inside of the diagram and the panels
+   cover outlines outside of it. The outline shows in forced colors. */
+.geDiagramContainer.geFocusVisible::before {
+	content: '';
+	display: block;
+	position: sticky;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-shadow: inset 0 0 0 2px light-dark(var(--focus-color), var(--dark-focus-color));
+	outline: 2px solid transparent;
+	outline-offset: -2px;
+	pointer-events: none;
+}
+
+.geDiagramContainer.geRulerContainer {
+	margin: 14px 0 0 4px;
+}
+
+.geSketch .geDiagramContainer.geRulerContainer,
+.geMinimal .geDiagramContainer.geRulerContainer {
+	margin-left: 14px;
+}
+
+.geRuler {
+	background: light-dark(#ffffff, var(--dark-color));
+}
+
+.geBackgroundPage {
+	box-shadow: 0px 0px 3px 0px #a0a0a0;
+}
+
+.geEditor .geHint {
+	background-color: light-dark(var(--ge-panel-color), var(--ge-dark-panel-color));
+	border-color: light-dark(var(--border-color), var(--dark-border-color));
+	box-shadow: 1px 1px 2px 0px #ddd;
+	border-style: solid;
+	border-width: 1px;
+	padding: 4px 16px 4px 16px;
+	border-radius: 3px;
+	opacity: 0.8;
+	font-size: 9pt;
+}
+
+.geHint img {
+	opacity: 0.7;
+}
+
+.geStatus>* {
+	overflow: hidden;
+	white-space: nowrap;
+	vertical-align: middle;
+	display: inline-block;
+	font-size: 12px;
+}
+
+.geStatus {
+	display: inline-flex;
+	align-items: center;
+	white-space: nowrap;
+	min-width: 0;
+	height: 100%;
+}
+
+.geStatus *[data-action] {
+	cursor: pointer;
+}
+
+.geStatus img {
+	max-width: 16px;
+	vertical-align: bottom;
+}
+
+.geStatus div {
+	border-radius: 4px;
+}
+
+.geStatus div+div {
+	margin-left: 8px;
+}
+
+.geStatus .geStatusBox {
+	font-size: 10px;
+	padding: 2px 4px;
+	border-style: solid;
+	border-width: 1px;
+}
+
+.geStatus .geStatusAlert {
+	padding: 4px 10px;
+	background-color: light-dark(var(--error-background-color), var(--dark-error-background-color));
+	color: light-dark(var(--error-color), var(--dark-error-color)) !important;
+}
+
+.geStatusDiv {
+	text-overflow: ellipsis;
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	flex-shrink: 0;
+}
+
+.geEmbed.geMinimal .geMenubarContainer .geStatusDiv {
+	flex-shrink: 1;
+	min-width: 0;
+}
+
+.geEmbed.geMinimal .geMenubarContainer .geButtonGroup {
+	flex-shrink: 1;
+	overflow: hidden;
+	min-width: 0;
+}
+
+.geEmbed.geAtlas>.geMenubarContainer>.geStatusDiv,
+.geClassic.geEmbed.geCompactMode>.geMenubarContainer>.geStatusDiv {
+	position: fixed;
+    right: 16px;
+    top: 6px;
+}
+
+.geClassic.geEmbed.geCompactMode>.geMenubarContainer>.geStatusDiv {
+    top: 6px;
+}
+
+.geEmbed.geAtlas>.geMenubarContainer>.geStatusDiv {
+    top: 12px;
+}
+
+html body div.geBtn.geSmallBanner {
+	border-radius: 20px;
+	font-size: inherit;
+	padding: 6px 12px 6px 20px;
+	display: flex;
+	height: auto;
+	bottom: 4px;
+}
+
+.geSpinnerStatus {
+	position: absolute;
+    white-space: nowrap;
+    border-radius: 6px;
+	color: #ffffff;
+	background: #4B4243;
+	transform: translate(-50%, -50%);
+    box-shadow: light-dark(#dddddd, transparent) 2px 2px 3px 0px;
+	padding: 6px 10px;
+	font-size: 9pt;
+    z-index: 2000000000;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+	cursor: default;
+}
+
+.geSmallBanner .geLibraryButton {
+	background-color: light-dark(var(--primary-hover-color), var(--dark-active-accent-color));
+	filter: brightness(0.9);
+	margin-left: 6px;
+	opacity: 0.5;
+}
+
+.geSmallBanner .geLibraryButton:hover {
+	background-color: light-dark(var(--primary-hover-color), var(--dark-active-accent-color));
+	opacity: 1;
+}
+
+.geAlert {
+	position: absolute;
+	white-space: nowrap;
+	padding: 14px;
+	background-color: #f2dede;
+	border: 1px solid #ebccd1;
+	color: #a94442;
+	border-radius: 3px;
+	-webkit-box-shadow: 2px 2px 3px 0px #ddd;
+	-moz-box-shadow: 2px 2px 3px 0px #ddd;
+	box-shadow: 2px 2px 3px 0px #ddd;
+}
+
+.geColorDropper {
+	position: relative;
+	cursor: pointer;
+	width: auto;
+	height: 14px;
+	opacity: 0.7;
+	right: -20px;
+	top: -1px;
+}
+
+.geBtn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	font-weight: 550;
+	height: 30px;
+	margin: 0 0 0 8px;
+	min-width: 72px;
+	outline: 0;
+	padding: 0 8px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.geBtn.geBanner {
+	display: block;
+	position: absolute;
+	bottom: 10px;
+	left: 50%;
+	max-width: 90%;
+	white-space: nowrap;
+	cursor: pointer;
+	font-size: 16px;
+	padding: 18px 34px 30px 20px;
+	font-weight: bold;
+	transform: translate(-50%, 0%);
+	transition: 1000ms;
+	box-shadow: rgb(221, 221, 221) 1px 1px 2px 0px;
+}
+
+.geBtn:hover:not([disabled]),
+.geBtn:focus {
+	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+/* Keyboard focus ring of buttons, eg. More Shapes and the buttons of dialogs:
+   an outline in the focus color that also shows next to primary buttons and in
+   dark mode, which removes all shadows, inside of the button so that areas
+   that scroll do not clip it, eg. the content of dialogs */
+.geBtn:focus-visible,
+.geCollapsibleTitle:focus-visible,
+.geTab:focus-visible,
+.geFormatTitle:focus-visible,
+.geGraphStylePreview:focus-visible {
+	outline: 2px solid light-dark(var(--focus-color), var(--dark-focus-color));
+	outline-offset: -2px;
+}
+
+/* The page tabs clip the ring of their menu button */
+.gePageTab .geButton:focus-visible,
+.gePageGroupTab .geButton:focus-visible {
+	outline-offset: -2px;
+}
+
+/* Keyboard focus of a label that stands for its container, which also contains
+   other controls, eg. the name of a page tab or of a library (see
+   Editor.addFocusRing) */
+.geFocusRing {
+	outline: 2px solid light-dark(var(--focus-color), var(--dark-focus-color));
+	outline-offset: -2px;
+}
+
+.geFocusLabel:focus-visible {
+	outline: none;
+}
+
+.geShapePicker {
+	position: absolute;
+	width: 142px;
+	border-radius: 10px;
+	border-style: solid;
+	border-width: 1px;
+	padding: 6px 0 8px 0;
+	text-align: center;
+	box-shadow: 0px 0px 3px 1px #d1d1d1;
+	white-space: normal;
+}
+
+.geBtnStepper {
+	display: inline-block;
+	border-radius: 3px;
+	border-style: solid;
+	border-width: 1px;
+}
+
+.geBtnStepper>div {
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: 18px;
+	position: relative;
+	padding: 1px 0 0 0;
+}
+
+.geBtnStepper>div:active {
+	background-color: #4d90fe;
+}
+
+.geColorBtn {
+	padding: 0px;
+}
+
+.geStyleBtn {
+	display: inline-flex;
+	position: relative;
+	box-sizing: border-box;
+	border-radius: 4px;
+	height: 22px;
+	width: 64px;
+	border-width: 1px;
+	border-style: solid;
+	margin: 2px;
+	padding: 0;
+}
+
+.geStyleBtn>span {
+	position: absolute;
+	display: block;
+	text-align: center;
+	top: 3px;
+	left: 3px;
+	right: 13px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.geStyleBtn .geAdaptiveAsset {
+	background-size: 18px 18px;
+	flex-grow: 1;
+}
+
+.geStyleBtn .geAdaptiveAsset>div.gePatternPreview {
+	height: 1px;
+	border-color: black;
+	border-width: 1px;
+	margin-left: -6px;
+}
+
+.geStyleMenuItem {
+	display: flex;
+	align-items: center;
+	padding: 4px 8px;
+}
+
+.geStyleBtn .geAdaptiveAsset>div {
+	background-repeat: no-repeat;
+	background-position: center;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+td.mxPopupMenuIcon .geStyleMenuItem {
+	margin: auto;
+}
+
+td.mxPopupMenuIcon .geStyleMenuItem>div {
+	background-position: bottom left;
+	background-repeat: repeat-x;
+	border-color: black;
+	border-width: 1px;
+	margin: 8px 0;
+	height: 1px;
+	width: 100%;
+}
+
+.geStyleBtn .geAdaptiveAsset.geArrow {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	font-size: 12px;
+	padding-right: 8px;
+	position: relative;
+	align-items: center;
+	justify-content: center;
+	background-position: right;
+	box-sizing: border-box;
+}
+
+.geStyleLabel {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 180px;
+}
+
+.geFullWidthElement {
+	width: 212px;
+	/* Keeps 3px for the focus ring where the scrollbar of .geFormatContainer
+	   narrows the panel, which would otherwise clip it at the right edge */
+	max-width: calc(100% - 3px);
+}
+
+.geBtn[disabled],
+.geButton[disabled] {
+	opacity: 0.3;
+}
+
+.geButton.gePageMenu {
+	background-position: right center;
+	padding: 0 18px 0 10px;
+	background-size: 18px;
+}
+
+.geButton.gePageMenu>span {
+	padding: 0px;
+	max-width: 160px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.geSimple .geButton.geZoomInput:not(.geSketch *, .geMinimal *) {
+	border-style: solid;
+	font-size: 12px;
+}
+
+.geButton.geZoomInput {
+    cursor: initial;
+    font-size: 14px;
+    border-style: none;
+    border-color: #000000;
+    padding: 0px 16px 0px 2px;
+    background-position: right 2px center;
+    text-align: center;
+    height: 28px;
+    width: 62px;
+}
+
+.geClassic .geZoomInput {
+	padding-top: 1px;
+}
+
+.geSimple .geButton.geZoomInput {
+	height: 20px;
+}
+
+.geSketch .geZoomInput {
+	border-style: none;
+}
+
+.geAlertLink {
+	color: #843534;
+	font-weight: 700;
+	text-decoration: none;
+}
+
+.geMenubarContainer .geItem {
+	border-radius: 6px;
+	padding: 4px 8px;
+	cursor: default;
+}
+
+.geEditor .geItem:active:not(.mxDisabled, [disabled]):not(.geStatus),
+.geEditor .geBtn:active:not([disabled]),
+.geEditor .geStatus.geStatusAction:active,
+.geEditor .geTitle:active,
+.geEditor .geButton:active:not(.mxDisabled, .mxDisabled *, [disabled], .geBtn *),
+.geEditor .geHelpIcon:active,
+.geEditor button:active:not([disabled], .geBigButton, .geShareBtn),
+.geEditor .geFormatTitle:active,
+.geEditor .geBtnStepper>div:active,
+.geEditor .geTab:active:not(.mxDisabled, [disabled]),
+.geDarkMode .mxPopupMenuItem>div:not(:has(img)),
+.geTitle,
+.geBtnStepper>div,
+.geHelpIcon,
+.geStatus>div:not(.geStatusAlert) {
+	opacity: 0.75;
+}
+
+.geEditor .geButton:not(.mxDisabled, .mxDisabled *, [disabled]) {
+	opacity: 0.65;
+}
+
+/* Shows the keyboard focus ring of buttons at full strength like the hover */
+.geEditor .geButton:focus-visible:not(.mxDisabled, .mxDisabled *, [disabled]) {
+	opacity: 1;
+}
+
+.geItem:hover:not(.mxDisabled, [disabled]),
+.geBtn:hover:not([disabled]),
+.geBtnStepper>div:hover,
+.geHelpIcon:hover,
+.geColorDropper:hover,
+.geTitle>div>img:hover,
+.geFormatTitle.geActiveFormatTitle,
+.geHint img:hover,
+.geGraphStylePreview:hover,
+.geActiveItem:not(.geButton *, .geButton *),
+.gePageTab .geButton:hover:not([disabled]),
+.geButtonGroup .geButton:hover:not([disabled]),
+button:hover:not([disabled], .geBigButton, .geShareBtn),
+select:hover:not([disabled]),
+.geColorBtn:hover:not([disabled]),
+.geStyleBtn:hover:not([disabled]),
+table.mxPopupMenu tr.mxPopupMenuItemHover,
+.geTitle:hover,
+.geButton:hover:not(.mxDisabled, .mxDisabled *, [disabled], .gePageTab *, .geSimpleMainMenu *, .geBtn *, .geButtonGroup *, .geAdaptiveAsset, .gePrimaryBtn) {
+	opacity: 1;
+}
+
+.gePaletteDragging .geTitle:hover {
+	opacity: inherit;
+	background-color: inherit;
+}
+
+.geTitle.gePaletteDragPlaceholder {
+	visibility: hidden;
+}
+
+/* The dragged tabs are empty slots where they are dropped, with the lines of
+   the group that a page joins (see EditorUi.setTabDragGroup) */
+.gePageTab.gePageTabDragPlaceholder>*,
+.gePageGroupTab.gePageTabDragPlaceholder>* {
+	visibility: hidden;
+}
+
+.gePageTab.gePageTabDragPlaceholder,
+.gePageGroupTab.gePageTabDragPlaceholder {
+	background-color: light-dark(var(--highlight-color), var(--dark-border-color));
+}
+
+button:hover:not([disabled], .geBigButton, .geShareBtn),
+select:hover:not([disabled]),
+.geColorBtn:hover:not([disabled]),
+.geStyleBtn:hover:not([disabled]),
+table.mxPopupMenu tr.mxPopupMenuItemHover {
+	background-color: light-dark(var(--highlight-color), var(--dark-border-color));
+}
+
+.geTitle:hover,
+.geButton:hover:not(.mxDisabled, .mxDisabled *, [disabled], .gePageTab *, .geSimpleMainMenu *, .geBtn *, .geButtonGroup *, .geAdaptiveAsset, .gePrimaryBtn) {
+	background-color: light-dark(var(--highlight-color), white);
+}
+
+.geGraphStylePreview:hover,
+.geItem:hover:not([disabled]) {
+	background-color: light-dark(var(--highlight-color), var(--dark-highlight-color));
+}
+
+.geActiveItem:not(.geButton *, .geButton *) {
+	background-color: light-dark(var(--active-item-color), var(--dark-active-item-color));
+}
+
+.mxDisabled:hover {
+	background-color: inherit !important;
+}
+
+a.geStatus>div {
+	display: inline-flex;
+	align-items: center;
+}
+
+.geSidebarContainer:not(.geFormatContainer, .mxWindowPane *) {
+	border-right-style: solid;
+	border-right-width: 1px;
+}
+
+.geClassic .geSidebarContainer:not(.geFormatContainer)>div {
+	padding: 0 4px;
+}
+
+.geFormatContainer:not(.mxWindowPane *) {
+	border-left-style: solid;
+	border-left-width: 1px;
+}
+
+.geSidebarContainer {
+	box-sizing: border-box;
+}
+
+.geSidebarContainer button {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.geToolbarEnd {
+	margin-left: 8px;
+	flex-grow: 0;
+	order: 1;
+}
+
+.geToolbarContainer.geVerticalToolbar {
+	flex-direction: column;
+	max-height: 100%;
+	left: 10px;
+	top: 50%;
+	transition: transform 0.1s ease-out;
+}
+
+.geToolbarContainer.geVerticalToolbar:not(.geEmbedInline *) {
+	transform: translate(0, -50%);
+}
+
+.geVerticalToolbar.geCollapsedToolbar {
+	top: auto;
+	bottom: 12px;
+	transform: none !important;
+}
+
+.geToolbarContainer.geVerticalToolbar>* {
+	display: flex;
+	overflow: visible;
+	margin: 2px 0;
+}
+
+.geVerticalToolbar.geCollapsedToolbar>* {
+	margin: 0;
+	width: 24px !important;
+}
+
+.geVerticalToolbar>.geButton {
+	width: 34px;
+	height: 34px;
+}
+
+.geVerticalToolbar .geItem {
+	position: relative;
+	border-radius: 6px;
+}
+
+.geShortcutKey {
+	position: absolute;
+	font-size: 8px;
+	opacity: 0.4;
+	bottom: -2px;
+	right: 1px;
+}
+
+.geToolbar {
+	height: 100%;
+}
+
+.geButton>div:not(.geShortcutKey) {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	background-position: left 2px center;
+	background-repeat: no-repeat;
+	background-size: 18px;
+}
+
+.geButton,
+.geTitle,
+.geItem {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: 18px;
+	white-space: nowrap;
+	z-index: 1;
+	padding: 2px;
+}
+
+.geItem {
+	overflow: hidden;
+}
+
+.geButton,
+.geTitle {
+	color: black;
+	border-radius: 6px;
+	box-sizing: border-box;
+	margin: 2px;
+}
+
+.geSidebarText {
+	margin: 4px 8px;
+	text-align: center;
+	font-size: 11px;
+	padding: 6px 0px 0px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	cursor: default;
+}
+
+.geButton:not([disabled], .geZoomInput),
+.geTitle:not([disabled]),
+.geItem:not([disabled]) {
+	cursor: pointer;
+}
+
+.geButton {
+	height: 28px;
+	flex-shrink: 0;
+	flex-grow: 0;
+}
+
+.mxPopupMenuItem:empty:has(+ .mxPopupMenuItem:empty),
+.mxPopupMenuItem:empty + .mxPopupMenuItem:empty {
+	display: none;
+}
+
+.mxPopupMenuIcon>img.geButton:empty {
+	width: 22px;
+}
+
+.geButton:empty:not(.geVerticalToolbar *, .geZoomInput, .geTemplate *, .geSidebarTooltip *),
+.geButton:has(> span.geCommentsBadge:only-child):not(.geVerticalToolbar *, .geZoomInput, .geTemplate *, .geSidebarTooltip *) {
+	width: 28px;
+}
+
+.geButton[disabled] {
+	cursor: default;
+}
+
+.geShapePicker>* {
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+	padding: 1px;
+}
+
+.geButton.geRoundButton:not(.geEmbed.geCompactMode .geButtonContainer .geButton) {
+	background-size: 24px 24px;
+	justify-content: center;
+	box-sizing: content-box;
+	border-radius: 50%;
+	padding: 6px;
+}
+
+.geSketch .geButton.geRoundButton {
+	padding: 4px;
+}
+
+.geRoundButton img {
+	width: 26px;
+	border-radius: 50%;
+}
+
+/* Account icon: a div with a background-image (set in App.updateButtonContainer).
+   The default silhouette also carries geAdaptiveAsset so it inverts in dark mode
+   via the generic .geDarkMode .geAdaptiveAsset rule; a real account picture
+   (geUserPhoto) is cover-fitted and never inverted. See #5364. The selector
+   outweighs ".geButton > div" (which would stretch the div to width/height 100%). */
+.geButton.geRoundButton > .geUserAvatar {
+	width: 26px;
+	height: 26px;
+	border-radius: 50%;
+	background-position: center center;
+	background-repeat: no-repeat;
+	/* Scale the SVG silhouette to fill the box like the original <img> did
+	   (.geRoundButton img { width: 26px }); without this it falls back to the
+	   image's intrinsic 24px and renders too small. See #5364. */
+	background-size: contain;
+}
+
+.geButton.geRoundButton > .geUserPhoto {
+	background-size: cover;
+}
+
+/* In dark mode the parent .geButton already inverts its whole subtree
+   (.geDarkMode .geButton), which lightens the default silhouette. So the avatar
+   must NOT invert again via geAdaptiveAsset, or it double-inverts back to dark
+   (the #5364 bug). A real photo, conversely, must counter the parent invert so it
+   is never rendered as a negative. */
+.geDarkMode .geUserAvatar.geAdaptiveAsset {
+	filter: none;
+}
+
+.geDarkMode .geUserPhoto {
+	filter: invert(1);
+}
+
+.geSeparator {
+	display: inline-block;
+	background-color: #e5e5e5;
+	margin-left: 6px;
+	margin-right: 6px;
+	height: 20px;
+	width: 1px;
+}
+
+.geHelpIcon {
+	width: 16px;
+	margin: 0 4px;
+	vertical-align: text-bottom
+}
+
+.geFormatSection {
+	padding: 6px 0;
+	position: relative;
+	white-space: nowrap;
+	border-top: 1px solid light-dark(var(--border-color), var(--dark-border-color));
+}
+
+.geFormatSection:first-child {
+	border-top: none;
+}
+
+.geFormatSection:last-child {
+	padding-bottom: 0;
+}
+
+.geFormatSection select {
+	position: absolute;
+	text-align: center;
+	text-overflow: ellipsis;
+	height: 24px;
+	border-radius: 4px;
+}
+
+.geFormatSection table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+.geFormatSection table td {
+	vertical-align: middle;
+	max-width: 50%;
+	width: 50%;
+	padding: 0 0 0 2px;
+}
+
+.geFormatSection table td select {
+	position: relative;
+}
+
+.geFormatSection *:empty:not(input),
+.geToolbarContainer *:not(input) {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.geFormatSection input:not([type="checkbox"], [type="radio"]),
+.geFormatSection button {
+	box-sizing: border-box;
+	height: 24px;
+	border-radius: 4px;
+}
+
+.geFormatSection input:not([type="checkbox"], [type="radio"]) {
+	text-align: right;
+}
+
+.geFormatSectionTitle {
+	padding: 0px 0 6px 0;
+	white-space: nowrap;
+	overflow: hidden;
+	width: 210px;
+	font-weight: bold;
+}
+
+/* Icon that a style rule of the page sets the value of a Format panel entry
+   (BaseFormatPanel.addStyleRuleHint), which opens the rules when clicked */
+.geStyleRuleHint {
+	display: inline-flex;
+	align-items: center;
+	margin-left: 4px;
+	vertical-align: middle;
+	flex-shrink: 0;
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+}
+
+.geStyleRuleHint[role="button"]:hover {
+	color: light-dark(var(--focus-color), var(--dark-focus-color));
+}
+
+/* The title has a gap between its children */
+.geCollapsibleTitle .geStyleRuleHint {
+	margin-left: 0;
+}
+
+.geCollapsibleTitle {
+	cursor: pointer;
+	-webkit-user-select: none;
+	user-select: none;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 6px 0;
+	font-weight: bold;
+	font-size: 12px;
+}
+
+.geCollapsibleTitle::before {
+	content: '';
+	display: inline-block;
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 4px 0 4px 6px;
+	border-color: transparent transparent transparent light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+	transition: transform 0.15s ease;
+	flex-shrink: 0;
+}
+
+.geCollapsibleTitle.geExpanded::before {
+	transform: rotate(90deg);
+}
+
+.geCollapsibleContent {
+	position: relative;
+}
+
+.geCollapsibleContent.geCollapsed {
+	display: none;
+}
+
+.geFormatEntry {
+	display: flex;
+	position: relative;
+	align-items: center;
+	white-space: nowrap;
+	/* clip (not hidden) plus a small margin so the focus ring of a left-aligned
+	   checkbox is not cut off. The label self-truncates via .geStyleLabel, so
+	   this only needs to clip content overflowing to the right; the 2px bleed
+	   lands in the 12px .geFormatContent left margin with no layout shift. */
+	overflow: clip;
+	overflow-clip-margin: 4px;
+	min-height: 28px;
+}
+
+.geFormatEntry .geColorBtn {
+	position: absolute;
+	left: 166px;
+}
+
+.geFormatEntry input {
+	box-sizing: border-box;
+}
+
+.geFormatEntry input[type="checkbox"] {
+	margin: 0 8px 0 0;
+}
+
+/* Shapes in windows and in the shapes panel of the minimal theme without
+   windows (windows=0), with room for the library buttons */
+.mxWindowPane .geSidebarContainer,
+.geEditor>.geSidebarContainer .geSidebarContainer {
+	position: absolute;
+	width: 100% !important;
+	top: 0;
+	bottom: 28px;
+}
+
+.mxWindowPane .geSidebarContainer.geFormatContainer {
+	bottom: 0;
+}
+
+.geEditor>div>.geMenubarContainer {
+	border-bottom-style: solid;
+	border-bottom-width: 1px;
+}
+
+.geTabContainer {
+	box-sizing: border-box;
+	white-space: nowrap;
+	overflow: hidden;
+	padding: 0 20px 0 12px;
+	display: flex;
+	height: 32px;
+	z-index: 1;
+}
+
+.geMinimal .geTabContainer .geZoomInput {
+	margin-left: auto;
+}
+
+.geTabContainer .geZoomInput {
+	margin: auto -16px auto 0;
+	font-size: 12px;
+	width: 56px;
+}
+
+.geTabScroller {
+	display: inline-block;
+	position: relative;
+	white-space: nowrap;
+	overflow: hidden;
+	overflow-x: auto;
+	margin: 0 8px;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	left: 0px;
+}
+
+.geTab .geButton {
+	border-radius: 50%;
+	margin-left: 0px;
+}
+
+.gePageTab:not(.geActivePage) .geButton {
+	display: none;
+}
+
+.gePageTab:not(.geActivePage) {
+	padding-right: 16px;
+}
+
+.gePageTab {
+	padding: 0px 0px 0px 16px;
+}
+
+/* Page groups (see EditorUi.createTabForPageGroup): the tab of a group and
+   the tabs of its pages are underlined and between lines, with a gap to the
+   tabs outside of the group, and the groups without the current page are
+   darker like the inactive tabs of the Format panel */
+.gePageTabGrouped,
+.gePageGroupTab {
+	box-shadow: inset 0 -2px 0 light-dark(var(--strong-border-color), var(--dark-strong-border-color));
+}
+
+.gePageTab.gePageTabCollapsed {
+	display: none;
+}
+
+.gePageGroupTab {
+	vertical-align: top;
+	margin-left: 4px;
+	padding: 0px 2px 0px 4px;
+	font-weight: 600;
+	border-left: 1px solid light-dark(var(--strong-border-color), var(--dark-strong-border-color));
+}
+
+.gePageGroupEnd {
+	margin-right: 4px;
+	border-right: 1px solid light-dark(var(--strong-border-color), var(--dark-strong-border-color));
+}
+
+.gePageGroupInactive:not(:hover, .geActivePage) {
+	background-color: light-dark(var(--inactive-color), var(--dark-highlight-color));
+}
+
+.gePageGroupTab>div.geButton {
+	width: 20px !important;
+}
+
+/* Disclosure triangle of a group like in the collapsible sections of dialogs
+   (.geCollapsibleTitle), which is not like the menu button of the tabs */
+.gePageGroupExpandedIcon,
+.gePageGroupCollapsedIcon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.gePageGroupExpandedIcon::before,
+.gePageGroupCollapsedIcon::before {
+	content: '';
+	border-style: solid;
+	border-width: 4px 0 4px 6px;
+	border-color: transparent transparent transparent light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+}
+
+.gePageGroupExpandedIcon::before {
+	transform: rotate(90deg);
+}
+
+/* The group of the current page cannot be collapsed */
+.gePageGroupCurrent>.gePageGroupExpandedIcon {
+	opacity: 0.4;
+}
+
+.gePageGroupTab:not(:hover, :focus-within)>div.geButton:last-child {
+	opacity: 0;
+}
+
+.geControlTab {
+	width: 30px;
+	margin: 0 4px;
+}
+
+.geTab {
+	height: 100%;
+	box-sizing: border-box;
+	text-overflow: ellipsis;
+	font-size: 13px;
+	display: inline-flex;
+	align-items: center;
+	cursor: move;
+}
+
+.geSidebar {
+	transform-origin: top left;
+	padding: 4px 6px 8px 14px;
+	overflow: hidden;
+	white-space: normal;
+}
+
+.geEditor .geSearchSidebar {
+	box-sizing: border-box;
+	padding: 8px 4px 4px 4px;
+	width: 100%;
+}
+
+.geTitle {
+	display: flex;
+	font-size: 13px;
+	background-repeat: no-repeat;
+	background-position: 2px 50%;
+	background-size: 20px;
+	border-radius: 14px;
+	padding: 8px 0px 8px 22px;
+	margin: 2px 4px 4px 4px;
+	cursor: default;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	justify-content: start;
+	align-items: center;
+	height: 30px;
+}
+
+.geTitle>span {
+	flex-grow: 1;
+	flex-shrink: 1;
+	width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.geSidebarContainer .geDropTarget {
+	border: 2px dotted currentcolor;
+	border-radius: 10px;
+	text-align: center;
+	font-size: 12px;
+	color: light-dark(#5f5f63, #a0a0a0);
+	padding: 6px;
+	margin: 4px 6px 4px 0;
+}
+
+.geTitle>div {
+	display: flex;
+	flex-grow: 0;
+	padding-right: 4px;
+}
+
+.geLibraryButton {
+	position: relative;
+	border-radius: 50%;
+	padding: 5px;
+	width: 14px;
+	cursor: pointer;
+	margin: 0px 1px;
+	opacity: 0.75;
+}
+
+.geLibraryButton:hover {
+	background-color: var(--active-color);
+}
+
+/* Keyboard focus ring of the buttons in the titles of libraries */
+.geLibraryButton:focus-visible {
+	outline: 2px solid light-dark(var(--focus-color), var(--dark-focus-color));
+	opacity: 1;
+}
+
+.geTitle .geButton {
+	border: 1px solid transparent;
+	padding: 3px;
+	border-radius: 2px;
+}
+
+.geTitle .geButton:hover {
+	border: 1px solid gray;
+}
+
+.geSidebar .geItem,
+.geShapePicker .geItem {
+	overflow: hidden;
+	display: inline-block;
+	padding: 2px;
+	border-radius: 4px;
+	transition: transform 100ms ease-out;
+	opacity: 0.75;
+}
+
+.geSidebar .geItem:active,
+.geShapePicker .geItem:active {
+	transform: scale(0.8, 0.8);
+}
+
+.geSidebarTooltip {
+	position: absolute;
+	overflow: hidden;
+	border-width: 1px;
+	border-style: solid;
+	box-shadow: 0 2px 6px 2px rgba(60, 64, 67, .15);
+	border-radius: 6px;
+}
+
+.geSidebarTooltip .geButton {
+	position: absolute;
+	padding: 2px;
+	margin: 0;
+	right: 2px;
+	top: 2px;
+	width: 20px;
+	height: 20px;
+}
+
+.geDialog {
+	position: absolute;
+	background-color: light-dark(var(--dialog-color), var(--dark-dialog-color));
+	line-height: 1em;
+	overflow: hidden;
+	padding: 24px;
+	border: light-dark(none, 1px solid rgba(255, 255, 255, 0.1));
+	left: 50%;
+	top: 50%;
+	max-height: 100%;
+	max-width: 100%;
+	transform: translate(-50%, -50%);
+	box-sizing: border-box;
+}
+
+/* Tall dialogs: cap the content area to the dialog's content box and let
+   it scroll. The close button (.geButton) is a positioned-absolute sibling
+   of the content so it stays at the top-right regardless of scroll. */
+.geDialog > :first-child {
+	max-height: 100%;
+	overflow-y: auto;
+	box-sizing: border-box;
+}
+
+.geDialog > .geButton {
+	top: 8px !important;
+	right: 8px !important;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background-size: 10px;
+	background-position: center;
+	background-repeat: no-repeat;
+	opacity: 0.5;
+	transition: opacity 0.1s ease, background-color 0.1s ease;
+}
+
+.geDialog > .geButton:hover {
+	opacity: 0.8;
+	background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+}
+
+.geDialog input[type="text"],
+.geDialog input[type="number"],
+.geDialog textarea,
+.geDialog select {
+	border-radius: 6px;
+	border: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15));
+	background-color: light-dark(var(--field-color), var(--dark-field-color));
+	padding: 4px 8px;
+	font-size: 13px;
+	outline: none;
+	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.geDialog input[type="text"]:focus,
+.geDialog input[type="number"]:focus,
+.geDialog textarea:focus,
+.geDialog select:focus {
+	border-color: light-dark(var(--focus-color), var(--dark-focus-color));
+	box-shadow: 0 0 0 3px light-dark(color-mix(in srgb, var(--focus-color) 25%, transparent), color-mix(in srgb, var(--dark-focus-color) 25%, transparent));
+}
+
+/* Some dialog selects carry .geBtn for its sizing; keep the button font
+   weight off so all selects in a dialog render alike */
+.geDialog select {
+	font-weight: normal;
+}
+
+/* Dialog titles: a plain <h3>, styled centrally - dialogs must not set
+   inline title styles. flex-shrink matters for titles in flex columns */
+.geDialog h3 {
+	width: 100%;
+	text-align: center;
+	margin: 0 0 16px;
+	flex-shrink: 0;
+}
+
+/* Dialog form sections and layout */
+.geDialogSection {
+	background: light-dark(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.05));
+	border: 1px solid light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+	border-radius: 8px;
+	padding: 10px 12px;
+	margin-bottom: 10px;
+}
+
+.geDialogSection > input[type="checkbox"],
+.geDialogSection > input[type="radio"] {
+	margin-top: 6px !important;
+}
+
+.geDialogSection > input[type="checkbox"]:first-child,
+.geDialogSection > input[type="radio"]:first-child {
+	margin-top: 0 !important;
+}
+
+.geDialogFormRow {
+	display: flex;
+	align-items: center;
+	min-height: 28px;
+	column-gap: 8px;
+}
+
+.geDialogFormLabel {
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+	min-width: 100px;
+	flex-shrink: 0;
+}
+
+.geDialogFormRow input[type="text"],
+.geDialogFormRow input[type="number"],
+.geDialogFormRow select,
+.geDialogFormRow textarea {
+	flex: 1;
+	min-width: 0;
+	/* The row's column-gap owns the spacing - class margins (e.g. .geBtn's
+	   margin-left) must not shift controls off the label column */
+	margin-left: 0;
+}
+
+/* Rows whose content spans multiple lines (stacked controls, wrapping
+   hint text): top-align the label with the first content line instead
+   of centering it against the whole block */
+.geDialogFormRowTop {
+	align-items: flex-start;
+}
+
+.geDialogFormRowTop > .geDialogFormLabel {
+	padding-top: 4px;
+}
+
+/* Marks a required field of a dialog that is still empty or invalid, like
+   the style key of a step in the action dialog (.geAnimationFieldWarn) */
+.geDialog .geDialogFieldWarn {
+	border-color: light-dark(#e6a700, #ffcc4d) !important;
+	box-shadow: 0 0 0 1px light-dark(rgba(230, 167, 0, 0.25), rgba(255, 204, 77, 0.25));
+}
+
+/* Explanatory hint text describing what an option does - never for the
+   current value of an entry, which stays in the regular text style */
+.geDialogHint {
+	font-size: 12px;
+}
+
+/* Gray text in dialogs with at least 4.5:1 on their background (the secondary
+   text color has 4.45:1 on the light dialog color and gray 3.5:1) */
+.geDialogHint, .geSecondaryText {
+	color: light-dark(#5f5f63, var(--dark-secondary-text-color));
+}
+
+/* Home screen (HomeDialog): the Google Drive diagrams draw.io can open */
+.geHome {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	line-height: normal;
+}
+
+/* Only the nav and the grid scroll: as a scroll container (.geDialog >
+   :first-child), Home would clip the focus rings at its edges */
+.geDialog > div.geHome {
+	overflow: visible;
+}
+
+.geHome .geHomeHeader {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	flex: 0 0 auto;
+	padding-bottom: 16px;
+}
+
+.geHome .geHomeTitle {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 16px;
+	font-weight: 600;
+	white-space: nowrap;
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+}
+
+.geHome .geHomeTitle img {
+	width: 24px;
+	height: 24px;
+}
+
+.geHome input.geHomeSearch {
+	flex: 1 1 auto;
+	min-width: 0;
+	max-width: 420px;
+	height: 32px;
+	margin-left: auto;
+	padding: 0 14px;
+	box-sizing: border-box;
+	border-radius: 16px;
+	border: 1px solid light-dark(var(--field-border-color), var(--dark-field-border-color));
+	background: light-dark(var(--field-color), var(--dark-field-color));
+	color: inherit;
+}
+
+/* Same ring as the cards in every browser (Firefox draws a thick outline) */
+.geHome input.geHomeSearch:focus {
+	outline: 1px solid transparent;
+	border-color: light-dark(var(--focus-color), var(--dark-focus-color));
+	box-shadow: 0 0 0 3px light-dark(color-mix(in srgb, var(--focus-color) 35%, transparent), color-mix(in srgb, var(--dark-focus-color) 35%, transparent));
+}
+
+.geHome .geHomeNewButton {
+	flex: 0 0 auto;
+	margin: 0;
+}
+
+.geHome .geHomeBody {
+	display: flex;
+	flex: 1 1 auto;
+	gap: 16px;
+	min-height: 0;
+}
+
+.geHome .geHomeNav {
+	display: flex;
+	flex-direction: column;
+	flex: 0 0 200px;
+	gap: 2px;
+	min-height: 0;
+	min-width: 0;
+	/* Scrolls in short dialogs, with room for the focus rings */
+	overflow-y: auto;
+	padding: 3px;
+	margin: -3px;
+}
+
+.geHome .geHomeNavItem {
+	flex: 0 0 auto;
+	padding: 7px 12px;
+	border: none;
+	border-radius: 16px;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	text-align: left;
+	overflow-wrap: anywhere;
+	cursor: pointer;
+}
+
+.geHome .geHomeNavItem:hover {
+	background: light-dark(var(--soft-hover-color), var(--dark-soft-hover-color));
+}
+
+.geHome .geHomeNavItem[aria-current="true"] {
+	background: light-dark(var(--selected-color), color-mix(in srgb, var(--dark-focus-color) 20%, transparent));
+	font-weight: 600;
+}
+
+/* Same ring as buttons (see .geBtn:focus-visible), in the room for the rings
+   of the nav and main parts */
+.geHome .geHomeNavItem:focus-visible,
+.geHome .geHomeCard:focus-visible {
+	outline: 2px solid light-dark(var(--focus-color), var(--dark-focus-color));
+	outline-offset: 1px;
+}
+
+.geHome .geHomeNavSeparator {
+	margin: 8px 12px;
+	border-top: 1px solid light-dark(var(--border-color), var(--dark-border-color));
+}
+
+.geHome .geHomeNavFooter {
+	margin-top: auto;
+	padding: 12px 12px 0 12px;
+	overflow-wrap: anywhere;
+}
+
+.geHome .geHomeMain {
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow-y: auto;
+	padding: 3px;
+}
+
+.geHome .geHomeHint {
+	margin: 0 0 12px 0;
+}
+
+.geHome .geHomeGrid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+	gap: 16px;
+}
+
+.geHome .geHomeCard {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	padding: 0;
+	overflow: hidden;
+	border: 1px solid light-dark(var(--field-border-color), var(--dark-field-border-color));
+	border-radius: 12px;
+	background: light-dark(var(--card-color), var(--dark-card-color));
+	color: inherit;
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+}
+
+.geHome .geHomeCard:hover {
+	border-color: light-dark(var(--strong-border-color), var(--dark-strong-border-color));
+}
+
+.geHome .geHomeThumb {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 112px;
+	overflow: hidden;
+	background: light-dark(var(--soft-color), var(--dark-soft-color));
+}
+
+.geHome .geHomeThumb img {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.geHome .geHomeThumb img.geHomePlaceholder {
+	width: 40px;
+	height: 40px;
+	opacity: 0.35;
+}
+
+.geHome .geHomeCardText {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	min-width: 0;
+	padding: 8px 10px 10px 10px;
+}
+
+.geHome .geHomeCardTitle,
+.geHome .geHomeCardMeta {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: normal;
+}
+
+.geHome .geHomeCardTitle {
+	font-weight: 600;
+}
+
+.geHome .geHomeCardMeta {
+	font-size: 12px;
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+}
+
+.geHome .geHomeAddCard {
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	min-height: 160px;
+	padding: 12px;
+	border-style: dashed;
+	text-align: center;
+	color: light-dark(var(--accent-text-color), var(--dark-accent-text-color));
+}
+
+.geHome .geHomeAddIcon {
+	font-size: 28px;
+	line-height: 1;
+}
+
+.geHome .geHomeSkeleton {
+	pointer-events: none;
+}
+
+.geHome .geHomeSkeleton .geHomeThumb,
+.geHome .geHomeSkeleton .geHomeCardTitle,
+.geHome .geHomeSkeleton .geHomeCardMeta {
+	animation: geHomePulse 1.2s ease-in-out infinite;
+}
+
+.geHome .geHomeSkeleton .geHomeCardTitle,
+.geHome .geHomeSkeleton .geHomeCardMeta {
+	height: 12px;
+	border-radius: 4px;
+	background: light-dark(var(--soft-color), var(--dark-soft-color));
+}
+
+.geHome .geHomeSkeleton .geHomeCardTitle {
+	width: 70%;
+}
+
+.geHome .geHomeSkeleton .geHomeCardMeta {
+	width: 40%;
+}
+
+@keyframes geHomePulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.45; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.geHome .geHomeSkeleton .geHomeThumb,
+	.geHome .geHomeSkeleton .geHomeCardTitle,
+	.geHome .geHomeSkeleton .geHomeCardMeta {
+		animation: none;
+	}
+}
+
+.geHome .geHomeStatus {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+	padding: 48px 16px;
+	text-align: center;
+}
+
+.geHome .geHomeStatusTitle {
+	font-size: 16px;
+	font-weight: 600;
+}
+
+.geHome .geHomeMore {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	padding: 16px 0 4px 0;
+}
+
+/* Narrow dialogs: the nav becomes a scrolling row above the grid */
+.geHome.geHomeNarrow .geHomeHeader {
+	flex-wrap: wrap;
+}
+
+.geHome.geHomeNarrow input.geHomeSearch {
+	order: 3;
+	flex-basis: 100%;
+	max-width: none;
+	margin-left: 0;
+}
+
+.geHome.geHomeNarrow .geHomeBody {
+	flex-direction: column;
+	gap: 8px;
+}
+
+.geHome.geHomeNarrow .geHomeNav {
+	flex: 0 0 auto;
+	flex-direction: row;
+	overflow-x: auto;
+}
+
+.geHome.geHomeNarrow .geHomeNavItem {
+	white-space: nowrap;
+}
+
+.geHome.geHomeNarrow .geHomeNewButton {
+	margin-left: auto;
+}
+
+.geHome.geHomeNarrow .geHomeNavSeparator,
+.geHome.geHomeNarrow .geHomeNavFooter {
+	display: none;
+}
+
+.geHome.geHomeNarrow .geHomeGrid {
+	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+	gap: 12px;
+}
+
+/* Actions shown as links: the Home hint and the Allow access dialog */
+.geHomeAccess .geHomeLinks {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px;
+	margin-top: 16px;
+}
+
+.geHome .geHomeLink,
+.geHomeAccess .geHomeLink {
+	padding: 0;
+	border: none;
+	background: none;
+	color: light-dark(var(--accent-text-color), var(--dark-accent-text-color));
+	font: inherit;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.geHome .geHomeLink:hover,
+.geHomeAccess .geHomeLink:hover {
+	background: none;
+}
+
+.geDialogCheckRow {
+	display: flex;
+	align-items: center;
+	min-height: 28px;
+}
+
+/* Uniform vertical spacing between rows in a section, regardless of row type */
+.geDialogSection > .geDialogFormRow,
+.geDialogSection > .geDialogCheckRow,
+.geDialogSection > .geDialogInlineFields {
+	margin-top: 6px;
+}
+
+.geDialogSection > .geDialogFormRow:first-child,
+.geDialogSection > .geDialogCheckRow:first-child,
+.geDialogSection > .geDialogInlineFields:first-child {
+	margin-top: 0;
+}
+
+.geDialogCheckRow input[type="checkbox"],
+.geDialogCheckRow input[type="radio"] {
+	margin: 0 8px 0 0;
+	flex-shrink: 0;
+}
+
+.geDialogCheckRow label {
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+	cursor: pointer;
+}
+
+.geDialogCheckRow select {
+	margin-left: 8px;
+	flex: 1;
+	min-width: 0;
+}
+
+.geDialogInlineFields {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+}
+
+.geDialogInlineField {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex: 1;
+	min-width: 0;
+}
+
+.geDialog .geCollapsibleTitle {
+	margin-top: 4px;
+}
+
+/* The title of an Advanced section has the space between sections above and
+   below it (see EditorUi.addAdvancedSection) */
+.geDialog .geCollapsibleContent {
+	margin-top: 10px;
+}
+
+.geDialogInlineField label {
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+	white-space: nowrap;
+}
+
+.geDialogInlineField input[type="text"],
+.geDialogInlineField input[type="number"] {
+	flex: 1;
+	min-width: 0;
+}
+
+.geDialog.geInlineDialog {
+	padding: 0px;
+	left: auto;
+	transform: none;
+	z-index: 4;
+}
+
+.geTransDialog {
+	position: absolute;
+	overflow: hidden;
+}
+
+.geDialogTitle {
+	box-sizing: border-box;
+	white-space: nowrap;
+	border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+	font-size: 13px;
+	font-weight: 600;
+	text-align: center;
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+}
+
+.geDialogFooter {
+	white-space: nowrap;
+	text-align: right;
+	box-sizing: border-box;
+	border-top: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+}
+
+.geMoreShapesSectionHeader {
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: light-dark(#5f5f63, var(--dark-secondary-text-color));
+	background-color: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
+	padding: 8px 12px 8px 16px;
+	border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+	user-select: none;
+}
+
+.geMoreShapesItem {
+	display: flex;
+	align-items: center;
+	padding: 6px 0 6px 16px;
+	cursor: pointer;
+	font-size: 13px;
+	line-height: normal;
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+	transition: background-color 0.1s ease;
+}
+
+.geMoreShapesItem:hover {
+	background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.07));
+}
+
+.geMoreShapesItem.geMoreShapesItemSelected {
+	background-color: light-dark(var(--selected-color), color-mix(in srgb, var(--dark-focus-color) 20%, transparent));
+}
+
+.geMoreShapesItem.geMoreShapesItemSelected:hover {
+	background-color: light-dark(var(--selected-hover-color), color-mix(in srgb, var(--dark-focus-color) 25%, transparent));
+}
+
+.geMoreShapesItem input[type="checkbox"] {
+	margin: 0 8px 0 0;
+	flex-shrink: 0;
+}
+
+.geMoreShapesItem span {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.geMoreShapesPreview {
+	border-left: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+}
+
+.geMoreShapesPreview img {
+	background-color: #ffffff;
+}
+
+.geMoreShapesFooterChecks {
+	display: inline-flex;
+	align-items: center;
+	gap: 16px;
+	width: 204px;
+	flex-shrink: 0;
+}
+
+.geMoreShapesFooterCheck {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 13px;
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+	cursor: pointer;
+	user-select: none;
+}
+
+.geMoreShapesFooterCheck input[type="checkbox"] {
+	margin: 0;
+	flex-shrink: 0;
+}
+
+.geEditor .geBaseButton {
+	padding: 10px;
+	border-radius: 6px;
+	cursor: pointer;
+	border-width: 1px;
+	border-style: solid;
+}
+
+.geEditor .geBaseButton:hover {
+	background-color: #ececec;
+}
+
+.geEditor button.geBigButton {
+	color: #ffffff;
+	border: none;
+	padding: 4px 10px;
+	font-size: 14px;
+	white-space: nowrap;
+	border-radius: 3px;
+	background-color: #0052cc;
+	cursor: pointer;
+	transition: background-color 0.1s ease-out;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.geEditor button.geBigButton:hover {
+	background-color: #0065ff;
+}
+
+.geEditor button.geBigButton:active {
+	background-color: #0747a6;
+}
+
+html body .geBigStandardButton {
+	color: #344563;
+	background-color: rgba(9, 30, 66, 0.08);
+}
+
+html body .geBigStandardButton:hover {
+	background-color: rgba(9, 30, 66, 0.13);
+}
+
+html body .geBigStandardButton:active {
+	background-color: #F8C382;
+	color: #600000;
+}
+
+@media print {
+	div.geNoPrint {
+		display: none !important;
+	}
+}
+
+html div.mxRubberband {
+	border-color: light-dark(#0000DD, white);
+	background-color: light-dark(#99ccff, var(--dark-border-color));
+}
+
+.geDarkMode div.mxRubberband {
+	border-style: dashed;
+}
+
+.geEditor div.mxPopupMenu {
+	box-shadow: 0px 0px 2px #C0C0C0;
+	background-color: var(--ge-panel-color);
+	background-image: none;
+	border-radius: 4px;
+	border-style: solid;
+	border-width: 1px;
+	border-color: lightgray;
+	padding: 3px;
+}
+
+.geEditor div.mxPopupMenu.geToolbarMenu {
+	border-radius: 10px;
+	box-shadow: 0px 0px 3px 1px #d1d1d1;
+	padding: 10px 14px 12px 14px;
+	background-color: light-dark(var(--ge-panel-color), var(--ge-dark-panel-color));
+}
+
+.geToolbarMenu tr.mxPopupMenuItemHover {
+	background-color: transparent !important;
+}
+
+.geToolbarMenu input[type="checkbox"] {
+	margin: 0 6px 0 0;
+}
+
+.geToolbarMenu label {
+	font-size: 13px;
+}
+
+.geSearchSidebar input {
+	font-size: 12px;
+	box-sizing: border-box;
+	border-radius: 18px;
+	width: 100%;
+	outline: none;
+	padding: 6px 20px 6px 10px
+}
+
+/* Status messages for screen readers that are not shown (see EditorUi.announce) */
+.geLiveRegion {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+/* Cells of the page as a tree (see TextOutlineWindow), with the colors of
+   the layers and page tabs. The window collapses the groups itself. */
+.geTextOutline {
+	position: absolute;
+	inset: 0;
+	overflow: auto;
+	padding: 6px 0;
+	box-sizing: border-box;
+	font-size: 12px;
+	line-height: 16px;
+	user-select: none;
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+}
+
+.geTextOutline ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.geTextOutline li {
+	outline: none;
+}
+
+.geTextOutlineItem {
+	display: flex;
+	align-items: center;
+	height: 26px;
+	margin: 0 6px;
+	padding-right: 8px;
+	border-radius: 6px;
+	white-space: nowrap;
+	cursor: default;
+}
+
+.geTextOutlineItem:hover {
+	background-color: light-dark(var(--highlight-color), var(--dark-border-color));
+}
+
+.geTextOutline li[aria-selected="true"] > .geTextOutlineItem {
+	background-color: light-dark(var(--accent-color), var(--dark-accent-color));
+	color: light-dark(var(--accent-text-color), var(--dark-accent-text-color));
+}
+
+.geTextOutline li[aria-selected="true"] > .geTextOutlineItem:hover {
+	background-color: light-dark(var(--accent-hover-color), var(--dark-active-accent-color));
+}
+
+.geTextOutline li:focus-visible > .geTextOutlineItem {
+	outline: 2px solid light-dark(var(--focus-color), var(--dark-focus-color));
+	outline-offset: -2px;
+}
+
+.geTextOutlineToggle {
+	flex: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	margin-right: 2px;
+	border-radius: 4px;
+}
+
+.geTextOutlineToggle img {
+	width: 16px;
+	height: 16px;
+	opacity: 0.55;
+	cursor: pointer;
+	transition: transform 0.15s ease;
+}
+
+.geTextOutlineToggle:hover img {
+	opacity: 1;
+}
+
+.geTextOutline li[aria-expanded="false"] > .geTextOutlineItem .geTextOutlineToggle img {
+	transform: rotate(-90deg);
+}
+
+.geTextOutlineName {
+	flex: 0 1 auto;
+	min-width: 24px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.geTextOutlineLayer > .geTextOutlineItem .geTextOutlineName {
+	font-weight: 600;
+}
+
+/* Shrinks before the name */
+.geTextOutlineKind {
+	flex: 0 1000 auto;
+	min-width: 0;
+	margin-left: 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 11px;
+}
+
+.geTextOutlineArrow {
+	flex: none;
+	margin-right: 5px;
+}
+
+.geTextOutlineKind,
+.geTextOutlineArrow,
+.geTextOutlineEmpty {
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+}
+
+.geTextOutline li[aria-selected="true"] > .geTextOutlineItem .geTextOutlineKind,
+.geTextOutline li[aria-selected="true"] > .geTextOutlineItem .geTextOutlineArrow {
+	color: inherit;
+	opacity: 0.75;
+}
+
+.geTextOutline > .geBtn {
+	display: block;
+	margin: 8px auto;
+}
+
+.geTextOutlineEmpty {
+	padding: 24px 12px;
+	text-align: center;
+}
+
+/* Same ring as the search of the Home dialog, the outline shows in forced colors */
+.geSearchSidebar input:focus {
+	outline: 1px solid transparent;
+	border-color: light-dark(var(--focus-color), var(--dark-focus-color));
+	box-shadow: 0 0 0 3px light-dark(color-mix(in srgb, var(--focus-color) 35%, transparent), color-mix(in srgb, var(--dark-focus-color) 35%, transparent));
+}
+
+.geSearchSidebar>div {
+	margin-bottom: 4px;
+}
+
+.geSearchSidebar>div>img.geAdaptiveAsset {
+	position: relative;
+	top: 4px;
+	left: -24px;
+	height: 16px;
+	opacity: 0.75;
+	cursor: pointer;
+}
+
+html table.mxPopupMenu {
+	border-collapse: collapse;
+	margin: 0px;
+}
+
+html td.mxPopupMenuItem {
+	padding: 7px 30px 7px 30px;
+	font-size: 10pt;
+}
+
+html td.mxPopupMenuIcon {
+	background-color: transparent;
+	padding: 0px;
+}
+
+table.mxPopupMenu tr {
+	font-size: 4pt;
+}
+
+table.mxPopupMenu hr {
+	color: light-dark(var(--border-color), var(--dark-border-color));
+	background-color: light-dark(var(--border-color), var(--dark-border-color));
+	border: none;
+	height: 1px;
+}
+
+html td.mxWindowTitle {
+	color: light-dark(var(--text-color), var(--dark-text-color));
+	background-image: none;
+	padding: 4px;
+}
+
+table.geProperties {
+	table-layout: fixed;
+}
+
+table.geProperties tr td,
+table.geProperties tr th {
+	height: 21px;
+}
+
+.gePropValue {
+	width: 100%;
+    overflow: hidden;
+	white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.gePropHeader,
+.gePropRow {
+	border: 1px solid light-dark(var(--border-color), var(--dark-border-color));
+}
+
+.gePropHeader>.gePropHeaderCell {
+	border-top: 0;
+	border-bottom: 0;
+	text-align: left;
+	width: 50%;
+}
+
+.gePropHeader>.gePropHeaderCell:first-child {
+	border-left: none;
+}
+
+.gePropHeader>.gePropHeaderCell:last-child {
+	border-right: none;
+}
+
+/* The dark mode filter only inverts the text and fold arrow of the header
+   cells. Inverting the row would also invert its collapsed borders in Safari,
+   whose invert also darkens #e5e5e5 to #0d0d0d instead of #1a1a1a. */
+.gePropHeader {
+	background-color: light-dark(#e5e5e5, #1a1a1a);
+	color: black;
+}
+
+/* The second cell has no fold arrow, so its text needs no filter, which
+   the contrast checks of assistive tools cannot see (white like the first) */
+.geDarkMode .gePropHeader>.gePropHeaderCell:nth-child(2) {
+	color: #ffffff;
+}
+
+/* Shortcuts in menus with enough contrast on the menu and its highlight */
+.geMenuShortcut {
+	color: light-dark(#5f5f63, #a0a0a0);
+}
+
+.gePropRowCell {
+	vertical-align: middle;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	max-width: 50%;
+}
+
+.gePropHeaderCell:nth-child(2),
+.gePropRowCell:nth-child(2) {
+	border-left: 1px solid light-dark(var(--border-color), var(--dark-border-color));
+}
+
+.gePropRow>.gePropRowCell {
+	background-color: light-dark(var(--field-color), var(--ge-dark-panel-color));
+}
+
+.gePropRowAlt>.gePropRowCell {
+	background-color: light-dark(var(--prop-stripe-color), var(--ge-dark-panel-color));
+}
+
+.gePropRowDark>.gePropRowCell {
+	background-color: light-dark(var(--field-color), var(--ge-dark-panel-color));
+	color: light-dark(var(--prop-accent-text-color), var(--dark-text-color));
+	font-weight: bold;
+}
+
+.gePropRowDarkAlt>.gePropRowCell {
+	background-color: light-dark(var(--prop-accent-color), var(--dark-highlight-color));
+	color: light-dark(var(--prop-accent-text-color), var(--dark-text-color));
+	font-weight: bold;
+}
+
+.gePropEditor input:invalid {
+	border: 1px solid red;
+}
+
+/* Comments CSS */
+.geCommentsWin {
+	user-select: none;
+	height: 100%;
+	margin-bottom: 10px;
+	overflow: auto;
+	font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+}
+
+.geCommentsToolbar {
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	overflow: hidden;
+	border-width: 1px 0px 0px 0px;
+	border-style: solid;
+	white-space: nowrap;
+}
+
+.geCommentsList {
+	position: absolute;
+	overflow: auto;
+	left: 0px;
+	right: 0px;
+	top: 0px;
+	scroll-behavior: smooth;
+}
+
+.geCommentContainer {
+	position: relative;
+	padding: 10px 12px 8px 12px;
+	margin: 7px 8px;
+	min-height: 50px;
+	display: block;
+	background-color: light-dark(var(--card-color), var(--dark-card-color));
+	border: 1px solid light-dark(var(--field-border-color), var(--dark-field-border-color));
+	border-radius: 10px;
+	white-space: nowrap;
+	box-shadow: 0 1px 3px light-dark(rgba(60, 64, 67, 0.08), rgba(0, 0, 0, 0.25));
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+}
+
+.geCommentHeader {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	height: 32px;
+}
+
+.geCommentUserImg {
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	flex: 0 0 auto;
+	background-color: light-dark(var(--soft-color), var(--dark-soft-color));
+}
+
+.geCommentHeaderTxt {
+	overflow: hidden;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.geCommentUsername {
+	overflow: hidden;
+	white-space: nowrap;
+	font-size: 12.5px;
+	font-weight: 600;
+	text-overflow: ellipsis;
+}
+
+.geCommentDate {
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+	overflow: hidden;
+	white-space: nowrap;
+	font-size: 11px;
+	text-overflow: ellipsis;
+}
+
+.geCommentDate::first-letter {
+	text-transform: uppercase;
+}
+
+.geCommentTxt {
+	font-size: 13px;
+	padding-top: 6px;
+	white-space: normal;
+	min-height: 12px;
+	overflow-wrap: break-word;
+	user-select: text;
+	cursor: text;
+}
+
+.geCommentEditTxtArea {
+	margin-top: 6px;
+	font: inherit;
+	font-size: 13px !important;
+	min-height: 12px;
+	max-width: 100%;
+	min-width: 100%;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 6px 8px;
+	border: 1px solid light-dark(var(--field-border-color), var(--dark-field-border-color));
+	border-radius: 8px;
+	background-color: light-dark(var(--field-color), var(--dark-field-color));
+	color: inherit;
+	outline: none;
+	user-select: text;
+	transition: border-color .15s, box-shadow .15s;
+}
+
+.geCommentEditTxtArea:focus {
+	border-color: light-dark(var(--focus-color), var(--dark-focus-color));
+	box-shadow: 0 0 0 2px light-dark(color-mix(in srgb, var(--focus-color) 15%, transparent), color-mix(in srgb, var(--dark-focus-color) 25%, transparent));
+}
+
+.geCommentEditBtns {
+	width: 100%;
+	box-sizing: border-box;
+	padding-top: 6px;
+	display: flex;
+	justify-content: flex-end;
+	gap: 6px;
+}
+
+.geCommentEditBtn {
+	padding: 4px 12px !important;
+	margin-left: 0;
+	border-radius: 6px;
+}
+
+.geCommentActions {
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+	font-size: 11.5px;
+}
+
+.geCommentActionsList {
+	list-style-type: none;
+	margin: 0px;
+	padding: 6px 0 0 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2px;
+}
+
+.geCommentAction {
+	display: inline-block;
+	padding: 0;
+}
+
+.geCommentAction:first-child {
+	margin-left: -8px;
+}
+
+.geCommentActionLnk {
+	cursor: pointer;
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+	text-decoration: none;
+	display: inline-block;
+	padding: 3px 8px;
+	border-radius: 6px;
+	transition: background-color .15s, color .15s;
+}
+
+.geCommentActionLnk:hover {
+	text-decoration: none;
+	background-color: light-dark(var(--soft-hover-color), var(--dark-soft-hover-color));
+	color: light-dark(var(--focus-color), var(--dark-focus-color));
+}
+
+.geCheckedBtn {
+	background-color: #ccc;
+	border-top: 1px solid black !important;
+	border-left: 1px solid black !important;
+}
+
+.geCommentBusyImg {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}
+
+div.geCommentEditTxtArea {
+	white-space: pre-wrap;
+	overflow-wrap: break-word;
+	cursor: text;
+}
+
+/* Chip that shows and jumps to the shape a comment is anchored to,
+   matching the selector chips in the animation dialog */
+.geCommentAnchorRow {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding-top: 8px;
+	min-width: 0;
+}
+
+.geCommentAnchorChip {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	min-height: 22px;
+	padding: 1px 10px;
+	border-radius: 999px;
+	border: 1px solid light-dark(var(--field-border-color), var(--dark-field-border-color));
+	background-color: light-dark(var(--soft-color), var(--dark-soft-color));
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+	font-size: 11.5px;
+	font-weight: 500;
+	max-width: 100%;
+	min-width: 0;
+	white-space: nowrap;
+	box-sizing: border-box;
+	text-decoration: none;
+	cursor: default;
+	transition: background-color .15s, border-color .15s, color .15s;
+}
+
+.geCommentAnchorChip svg {
+	flex: 0 0 auto;
+	display: block;
+}
+
+.geCommentAnchorChip > span {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+a.geCommentAnchorChip {
+	cursor: pointer;
+}
+
+a.geCommentAnchorChip:hover {
+	background-color: light-dark(var(--soft-hover-color), var(--dark-field-border-color));
+	border-color: light-dark(var(--strong-border-color), var(--dark-strong-border-color));
+	color: light-dark(var(--focus-color), var(--dark-focus-color));
+	text-decoration: none;
+}
+
+.geCommentAnchorChipDeleted {
+	border-style: dashed;
+	background-color: transparent;
+	color: light-dark(var(--faint-text-color), var(--dark-faint-text-color));
+	font-style: italic;
+}
+
+.geCommentAnchorAttach {
+	border-style: dashed;
+	background-color: transparent;
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+}
+
+a.geCommentAnchorAttach:hover {
+	background-color: transparent;
+}
+
+/* Disclosure caret on the attach chip (opens the anchor type menu) */
+.geCommentAnchorAttach::after {
+	content: "";
+	display: inline-block;
+	width: 5px;
+	height: 5px;
+	margin-left: 2px;
+	border: solid currentColor;
+	border-width: 0 1.4px 1.4px 0;
+	transform: translateY(-2px) rotate(45deg);
+	opacity: .55;
+}
+
+.geCommentMentionRow svg {
+	vertical-align: middle;
+	margin-right: 6px;
+}
+
+/* Toolbar and editing area of the small markup editor (notes, tooltips) */
+.geMarkupToolbar {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	flex-shrink: 0;
+	margin-bottom: 6px;
+}
+
+a.geMarkupTbBtn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 24px;
+	height: 24px;
+	padding: 0 6px;
+	box-sizing: border-box;
+	border-radius: 6px;
+	font-size: 12.5px;
+	line-height: 1;
+	cursor: pointer;
+	color: light-dark(var(--text-color), var(--dark-text-color));
+	user-select: none;
+}
+
+a.geMarkupTbBtn:hover {
+	background-color: light-dark(var(--soft-hover-color), var(--dark-soft-hover-color));
+}
+
+a.geMarkupTbBtn.geActiveItem {
+	background-color: light-dark(var(--mention-background-color), var(--dark-mention-background-color));
+	color: light-dark(var(--mention-color), var(--dark-mention-color));
+}
+
+a.geMarkupSourceBtn {
+	margin-left: auto;
+	font-size: 11.5px;
+}
+
+/* Overrides the floating note box styles for the WYSIWYG editing area */
+.geNoteBox.geMarkupWysiwyg {
+	position: static;
+	min-width: 0;
+	max-width: none;
+	max-height: none;
+	box-shadow: none;
+	z-index: auto;
+	overflow: auto;
+	background: light-dark(var(--field-color), var(--dark-field-color));
+	color: inherit;
+	border-color: light-dark(var(--field-border-color), var(--dark-field-border-color));
+	cursor: text;
+}
+
+.geNoteBox.geMarkupWysiwyg:focus {
+	outline: none;
+	border-color: light-dark(var(--mention-color), var(--dark-mention-color));
+}
+
+/* Dims the diagram while picking a point or area for a comment anchor */
+.geCommentAnchorPicking > svg {
+	opacity: 0.4;
+	transition: opacity .15s ease;
+}
+
+/* Shapes carry their own cursor styles so the crosshair is forced on
+   everything while picking */
+.geCommentAnchorPicking,
+.geCommentAnchorPicking * {
+	cursor: crosshair !important;
+}
+
+/* Rubberband preview while framing an area for a comment anchor */
+.geCommentAnchorPickPreview {
+	position: absolute;
+	border: 1.5px dashed light-dark(var(--focus-color), var(--dark-focus-color));
+	background-color: light-dark(color-mix(in srgb, var(--focus-color) 8%, transparent), color-mix(in srgb, var(--dark-focus-color) 12%, transparent));
+	border-radius: 2px;
+	pointer-events: none;
+	z-index: 1;
+}
+
+/* Canvas of a client that follows the view of a collaborator */
+.geDiagramContainer.geFollowingView {
+	box-shadow: inset 0 0 0 2px light-dark(var(--focus-color), var(--dark-focus-color));
+}
+
+/* Pulse marker shown after jumping to a point anchor */
+.geCommentAnchorMarker {
+	position: absolute;
+	width: 12px;
+	height: 12px;
+	margin: -6px 0 0 -6px;
+	border-radius: 50%;
+	background-color: light-dark(var(--focus-color), var(--dark-focus-color));
+	pointer-events: none;
+	z-index: 1;
+	animation: geCommentAnchorPulse 0.9s ease-out 2;
+}
+
+@keyframes geCommentAnchorPulse {
+	0% {
+		box-shadow: 0 0 0 0 light-dark(color-mix(in srgb, var(--focus-color) 50%, transparent), color-mix(in srgb, var(--dark-focus-color) 60%, transparent));
+	}
+	100% {
+		box-shadow: 0 0 0 18px transparent;
+	}
+}
+
+.geCommentAnchorRemove {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	margin: 0 -5px 0 1px;
+	border-radius: 50%;
+	font-size: 13px;
+	font-style: normal;
+	line-height: 1;
+	cursor: pointer;
+	color: light-dark(var(--faint-text-color), var(--dark-faint-text-color));
+	transition: background-color .15s, color .15s;
+}
+
+.geCommentAnchorRemove:hover {
+	background-color: light-dark(var(--inactive-color), var(--dark-strong-border-color));
+	color: light-dark(var(--strong-text-color), var(--dark-strong-text-color));
+}
+
+.geCommentMention {
+	color: light-dark(var(--mention-color), var(--dark-mention-color));
+	background-color: light-dark(var(--mention-background-color), var(--dark-mention-background-color));
+	border-radius: 4px;
+	padding: 0px 3px;
+	font-weight: 500;
+	white-space: nowrap;
+}
+
+.geCommentMentionMenu {
+	position: absolute;
+	z-index: 2;
+	max-width: calc(100% - 24px);
+	overflow: hidden;
+	padding: 4px;
+	box-sizing: border-box;
+	background-color: light-dark(var(--field-color), var(--dark-field-color));
+	border: 1px solid light-dark(var(--field-border-color), var(--dark-field-border-color));
+	border-radius: 10px;
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.geCommentMentionRow {
+	padding: 4px 8px;
+	cursor: pointer;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 12px;
+	border-radius: 6px;
+}
+
+.geCommentMentionRow:hover,
+.geCommentMentionRowSelected {
+	background-color: light-dark(var(--soft-hover-color), var(--dark-soft-hover-color));
+}
+
+.geCommentMentionImg {
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	vertical-align: middle;
+	margin-right: 6px;
+	background-color: light-dark(var(--soft-color), var(--dark-soft-color));
+}
+
+/* Inline icon variant of the avatar, eg. for groups without a photo */
+span.geCommentMentionImg {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+}
+
+span.geCommentMentionImg svg {
+	margin: 0;
+}
+
+.geCommentMentionGroupTag {
+	display: inline-block;
+	margin-left: 6px;
+	padding: 0px 6px;
+	border-radius: 999px;
+	border: 1px solid light-dark(var(--field-border-color), var(--dark-strong-border-color));
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+	font-size: 10px;
+	line-height: 14px;
+	vertical-align: middle;
+}
+
+.geCommentMentionMail {
+	color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+	padding-left: 6px;
+	font-size: 11px;
+}
+
+/* Element+class selector to win over the generic .geButton>span rule */
+span.geCommentsBadge {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	min-width: 10px;
+	height: 14px;
+	line-height: 14px;
+	border-radius: 7px;
+	padding: 0px 2px;
+	background-color: #d74134;
+	color: #ffffff;
+	font-size: 9px;
+	font-weight: bold;
+	text-align: center;
+	overflow: visible;
+	pointer-events: none;
+}
+
+/* Cancels out the inversion of the toolbar button in dark mode */
+.geDarkMode .geCommentsBadge {
+	filter: invert(1);
+}
+
+.geAspectDlgListItem {
+	width: 120px;
+	height: 120px;
+	display: inline-block;
+	border: 3px solid #F0F0F0;
+	border-radius: 5px;
+	padding: 5px;
+	margin: 2px 2px 20px 2px;
+}
+
+.geAspectDlgListItem:hover {
+	border: 3px solid #c5c5c5;
+}
+
+.geAspectDlgListItemSelected {
+	border: 3px solid #3b73af;
+}
+
+.geAspectDlgListItemSelected:hover {
+	border: 3px solid #405a86;
+}
+
+.geAspectDlgListItemText {
+	text-overflow: ellipsis;
+	max-width: 100%;
+	min-height: 2em;
+	overflow: hidden;
+	text-align: center;
+	margin-top: 10px;
+}
+
+.geAspectDlgList {
+	min-height: 184px;
+	white-space: nowrap;
+	overflow-x: auto;
+}
+
+.geStripedTable {
+	border-collapse: collapse;
+	width: 100%;
+	table-layout: fixed;
+}
+
+.geStripedTable td,
+.geStripedTable th {
+	border: 1px solid #ddd;
+	text-align: left;
+	padding: 2px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.geStripedTable tr:nth-child(odd) {
+	background-color: #f2f2f2;
+}
+
+.geStripedTable tr:hover {
+	background-color: #ddd;
+}
+
+.geStripedTable th {
+	padding-top: 4px;
+	padding-bottom: 4px;
+	background-color: #bbb;
+}
+
+.geNotification-box {
+	display: flex;
+	text-align: center;
+	position: relative;
+	cursor: pointer;
+	margin-right: 6px;
+	width: 20px;
+	order: -1;
+}
+
+.geNotification-bell {
+	animation: geBellAnim 1s 1s both;
+}
+
+.geNotification-bell * {
+	display: block;
+	margin: 0 auto;
+	background-color: light-dark(var(--secondary-text-color), var(--dark-secondary-text-color));
+}
+
+.geBell-top {
+	width: 2px;
+	height: 2px;
+	border-radius: 1px 1px 0 0;
+}
+
+.geBell-middle {
+	width: 12px;
+	height: 12px;
+	margin-top: -1px;
+	border-radius: 7px 7px 0 0;
+}
+
+.geBell-bottom {
+	position: relative;
+	z-index: 0;
+	width: 16px;
+	height: 1px;
+}
+
+.geBell-bottom::before,
+.geBell-bottom::after {
+	content: '';
+	position: absolute;
+	top: -4px;
+}
+
+.geBell-bottom::before {
+	left: 1px;
+	border-bottom-width: 4px;
+	border-right: 0 solid transparent;
+	border-left: 4px solid transparent;
+}
+
+.geBell-bottom::after {
+	right: 1px;
+	border-bottom-width: 4px;
+	border-right: 4px solid transparent;
+	border-left: 0 solid transparent;
+}
+
+.geBell-rad {
+	width: 3px;
+	height: 2px;
+	margin-top: 0.5px;
+	border-radius: 0 0 2px 2px;
+	animation: geRadAnim 1s 2s both;
+}
+
+.geNotification-count {
+	position: absolute;
+	z-index: 1;
+	top: -5px;
+	right: -4px;
+	width: 13px;
+	height: 13px;
+	line-height: 13px;
+	font-size: 8px;
+	border-radius: 50%;
+	background-color: #ff4927;
+	color: #FFF;
+	animation: geZoomAnim 1s 1s both;
+}
+
+@keyframes geBellAnim {
+	0% {
+		transform: rotate(0);
+	}
+
+	10% {
+		transform: rotate(30deg);
+	}
+
+	20% {
+		transform: rotate(0);
+	}
+
+	80% {
+		transform: rotate(0);
+	}
+
+	90% {
+		transform: rotate(-30deg);
+	}
+
+	100% {
+		transform: rotate(0);
+	}
+}
+
+@keyframes geRadAnim {
+	0% {
+		transform: translateX(0);
+	}
+
+	10% {
+		transform: translateX(5px);
+	}
+
+	20% {
+		transform: translateX(0);
+	}
+
+	80% {
+		transform: translateX(0);
+	}
+
+	90% {
+		transform: translateX(-5px);
+	}
+
+	100% {
+		transform: translateX(0);
+	}
+}
+
+@keyframes geZoomAnim {
+	0% {
+		opacity: 0;
+		transform: scale(0);
+	}
+
+	50% {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+.geNotifPanel {
+	height: 300px;
+	width: 300px;
+	background-color: #fff;
+	border-radius: 3px;
+	overflow: hidden;
+	box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
+	transition: all .5s ease-in-out;
+	position: absolute;
+	right: 100px;
+	top: 42px;
+	z-index: 150;
+}
+
+.geNotifPanel .header {
+	background-color: light-dark(#cecece, #424242);
+	color: light-dark(#707070, #ccc);
+	font-size: 15px;
+}
+
+.geNotifPanel .header .title {
+	display: block;
+	text-align: center;
+	line-height: 30px;
+	font-weight: 600;
+}
+
+.geNotifPanel .header .closeBtn {
+	position: absolute;
+	line-height: 30px;
+	cursor: pointer;
+	right: 15px;
+	top: 0;
+}
+
+.geNotifPanel .notifications {
+	position: relative;
+	background-color: light-dark(transparent, #707070);
+	height: 270px;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.geNotifPanel .notifications .line {
+	position: absolute;
+	top: 0;
+	left: 27px;
+	height: 100%;
+	width: 3px;
+	background-color: #EBEBEB;
+}
+
+.geNotifPanel .notifications .notification {
+	position: relative;
+	z-index: 2;
+	margin: 25px 20px 25px 43px;
+}
+
+.geNotifPanel .notifications .notification:nth-child(n+1) {
+	animation: geHere-am-i 0.5s ease-out 0.4s;
+	animation-fill-mode: both;
+}
+
+.geNotifPanel .notifications .notification:hover {
+	color: #1B95E0;
+	cursor: pointer;
+}
+
+.geNotifPanel .notifications .notification .circle {
+	box-sizing: border-box;
+	position: absolute;
+	height: 11px;
+	width: 11px;
+	background-color: #fff;
+	border: 2px solid #1B95E0;
+	box-shadow: 0 0 0 3px #fff;
+	border-radius: 6px;
+	top: 0;
+	left: -20px;
+}
+
+.geNotifPanel .notifications .notification .circle.active {
+	background-color: #1B95E0;
+}
+
+.geNotifPanel .notifications .notification .time {
+	display: block;
+	font-size: 11px;
+	line-height: 11px;
+	margin-bottom: 2px;
+}
+
+.geNotifPanel .notifications .notification p {
+	font-size: 15px;
+	line-height: 20px;
+	margin: 0;
+}
+
+.geNotifPanel .notifications .notification p b {
+	font-weight: 600;
+}
+
+@-webkit-keyframes geHere-am-i {
+	from {
+		transform: translate3d(0, 50px, 0);
+		opacity: 0;
+	}
+
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes geHere-am-i {
+	from {
+		transform: translate3d(0, 50px, 0);
+		opacity: 0;
+	}
+
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+.geTempTree {
+	margin: 0;
+	padding: 0;
+}
+
+.geTempTree,
+.geTempTreeActive,
+.geTempTreeNested {
+	list-style-type: none;
+	transition: all 0.5s;
+}
+
+.geTempTreeCaret {
+	box-sizing: border-box;
+	cursor: pointer;
+	user-select: none;
+	padding: 6px;
+	width: 100%;
+	transition: all 0.5s;
+}
+
+.geTempTreeCaret::before {
+	content: "\25B6";
+	display: inline-block;
+	font-size: 10px;
+	margin-right: 6px;
+}
+
+.geTempTreeCaret-down::before {
+	transform: rotate(90deg);
+}
+
+.geTempTreeNested {
+	height: 0;
+	opacity: 0;
+}
+
+.geTempTreeActive {
+	height: 100%;
+	opacity: 1;
+}
+
+.geTempTreeActive,
+.geTempTreeNested {
+	padding-left: 15px;
+}
+
+.geTempTreeActive>li,
+.geTempTreeNested>li {
+	box-sizing: border-box;
+	padding: 3px;
+	width: 100%;
+	cursor: pointer;
+	user-select: none;
+	transition: all 0.5s;
+}
+
+/*Electron Window Controls*/
+#geWindow-controls {
+	display: grid;
+	grid-template-columns: repeat(3, 30px);
+	position: absolute;
+	top: 2px;
+	right: 3px;
+	height: 22px;
+	-webkit-app-region: no-drag;
+}
+
+#geWindow-controls .button {
+	grid-row: 1 / span 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	user-select: none;
+}
+
+#min-button {
+	grid-column: 1;
+}
+
+#max-button,
+#restore-button {
+	grid-column: 2;
+}
+
+#close-button {
+	grid-column: 3;
+}
+
+#geWindow-controls .button.dark:hover {
+	background-color: rgba(255, 255, 255, 0.1);
+}
+
+#geWindow-controls .button.dark:active {
+	background-color: rgba(255, 255, 255, 0.2);
+}
+
+#geWindow-controls .button.white:hover {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
+#geWindow-controls .button.white:active {
+	background-color: rgba(0, 0, 0, 0.2);
+}
+
+#close-button:hover {
+	background-color: #E81123 !important;
+}
+
+#close-button:active {
+	background-color: #F1707A !important;
+}
+
+#restore-button {
+	display: none !important;
+}
+
+.geMaximized #restore-button {
+	display: flex !important;
+}
+
+.geMaximized #max-button {
+	display: none;
+}
+
+.geAtlas .geMenubarContainer:not(.geDarkMode *),
+.geAtlas .gePrimaryBtn.geEmbedBtn:not(.geDarkMode *) {
+	background-color: #1868db;
+	color: #ffffff;
+}
+
+.geAtlas .gePrimaryBtn.geEmbedBtn:not(.geDarkMode *) {
+	border: black;
+}
+
+.geAtlas .gePrimaryBtn.geEmbedBtn:hover:not(.geDarkMode *, [disabled]) {
+	background-color: #1558bc !important;
+}
+
+.geAtlas .geMenubarContainer .geItem:hover:not(.geDarkMode *) {
+	background-color: rgba(9, 30, 66, 0.48) !important;
+}
+
+.geAtlas .geMenubar .geButtonContainer {
+	margin-top: 0px;
+}
+
+.geAtlas .geStatus,
+.geAtlas .geStatus>div:not(.geStatusAlert) {
+	opacity: 1;
+}
+
+.geAtlas .geMenubar .geButtonContainer .geButton {
+	margin: 0;
+	opacity: 0.85;
+}
+
+.geAtlas .geMenubar .geButtonContainer .geButton:hover {
+	background-color: transparent;
+	opacity: 1 !important;
+}
+
+.geEditor.geAtlas>.geMenubarContainer {
+	height: 40px;
+}
+
+.geEditor.geAtlas>.geMenubarContainer .geMenubar {
+	padding-left: 12px;
+	height: 100%;
+	top: 0;
+}
+
+.geAtlas .geMenubarContainer .geItem {
+	padding-left: 12px;
+	padding-right: 12px;
+}
+
+.geEditor *::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+.geEditor *::-webkit-scrollbar-track {
+	background-clip: padding-box;
+	border: solid transparent;
+	border-width: 1px;
+}
+
+.geEditor *::-webkit-scrollbar-corner {
+	background-color: transparent;
+}
+
+.geEditor *::-webkit-scrollbar-thumb {
+	background-color: light-dark(var(--scrollbar-color), var(--dark-scrollbar-color));
+	background-clip: padding-box;
+	border: solid transparent;
+	border-radius: 4px;
+}
+
+.geEditor *::-webkit-scrollbar-thumb:hover {
+	background-color: light-dark(var(--scrollbar-hover-color), var(--dark-border-color));
+}
+
+[draggable="true"] {
+	transform: translate(0, 0);
+	z-index: 0;
+}