/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

html {
	font-size: 16px;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	font-size: 90%;
	line-height: 1.4;
	background: var(--editor-bg);
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

kbd {
	background: var(--button-bg);
	display: inline-block;
	vertical-align: middle;
	border-radius: 0.5em;
	padding: 0.2em 0.5em;
	font-size: 0.9em;
	color: var(--editor-text-color);
	margin: 0 0.25em;
	letter-spacing: 0.01em;
}

:root {
	--bg-default: #f0f0f0;

	/* Moqups Blue */
	--mq-blue: var(--mq-blue-500);

	/* Moqups logo blue */
	--mq-brand-blue: #1181f1;

	/*
		Moqups Blue (light)
		Obtained at 0.33 interpolation between
		Moqups Blue and White (in RGB space)
	*/
	--mq-blue-light: #a8cdf6;

	/*
		The stroke color around normal (unlocked) objects.
		Applies to object highlighting, individual border, etc.
	 */
	--normal-stroke: var(--mq-blue);
	--active-stroke: var(--mq-orange-600);
	--locked-stroke: var(--mq-editor-grey-400);
	--semiselection-stroke: var(--mq-blue-600);

	/*
		Base editor visual assistance colors
	*/
	--guide-accent: cyan;
	--snap-accent: fuchsia;
	--text-selection: #40a2ff77;

	/*
		The stroke color for locked objects.
		Applies to object highlighting, individual border, etc.
	 */
	--lock-stroke: var(--mq-pink-500);
	--lock-icon-color: var(--mq-white);

	/*
		Accent color for Symbols.
	 */
	--symbol-accent: #8946e0;
	--symbol-text-color: #8946e0;
	--symbol-light: var(--mq-purple-100);

	/*
		Accent color for sticky objects.
	 */
	--sticky-accent: var(--mq-yellow-700);

	/*
		Interactions distinct color
	 */
	--interaction-accent: #08aa5f;
	--interaction-accent--dark: #079251;
	--interaction-bg: #08aa5f20;

	--hotspot-border-color: #00ff88;
	--hotspot-bg: #00ff88aa;

	/*
		Premium features accent
	*/
	--premium-accent: var(--mq-purple-500);
	--premium-text-color: var(--mq-white);

	/*
		New features accent
	 */
	--new-accent: var(--mq-yellow-700);
	--new-text-color: var(--mq-editor-grey-950);

	/*
		Border radius of elements in the welcome modal
		(including modal itself).
	 */
	--welcome-border-radius: 6px;
	--welcome-template-border-radius: 12px;
	--welcome-padding-x: 40px;
	--welcome-padding-y: 25px;

	/*
		Border radius of inputs in the inspector
	 */
	--inspector-border-radius: 4px;
	--modal-border-radius: 24px;

	/*
		Base size for icons in inspector
	 */
	--inspector-icon-size: 16px;

	/*
		Unify left sidebar toolbars size
	 */
	--sidebar-header-height: 36px;

	/*
		Comments sizing
	 */
	--max-comment-height: 420px;

	/* Moqups 2023 Color Palette */

	/* 
 	--mq-font-main: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
   	*/

	--mq-font-display: 'Figtree', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
		sans-serif;
	--mq-font-mono: Consolas, Monaco, Courier, 'Courier New', monospace;

	--mq-editor-grey-25: #f7f8f9;
	--mq-editor-grey-50: #eaeaf0;
	--mq-editor-grey-100: #dfe1e7;
	--mq-editor-grey-200: #d6d9dd;
	--mq-editor-grey-300: #ced2d7;
	--mq-editor-grey-400: #a8afb7;
	--mq-editor-grey-500: #848d93;
	--mq-editor-grey-600: #6c757f;
	--mq-editor-grey-700: #525960;
	--mq-editor-grey-800: #40444a;
	--mq-editor-grey-850: #33373c;
	--mq-editor-grey-900: #2e3237;
	--mq-editor-grey-950: #26292d;
	--mq-editor-grey-975: #1e1e1f;

	--mq-grey-25: #f7f8f9;
	--mq-grey-50: #eef1f5;
	--mq-grey-100: #dee4eb;
	--mq-grey-200: #c9d3dd;
	--mq-grey-300: #9fafc1;
	--mq-grey-400: #798da3;
	--mq-grey-500: #677d92;
	--mq-grey-600: #5a6e81;
	--mq-grey-700: #465666;
	--mq-grey-800: #3b4754;
	--mq-grey-900: #29323d;
	--mq-grey-950: #22272f;

	--mq-blue-50: #f1f7fd;
	--mq-blue-100: #e2f1ff;
	--mq-blue-200: #badcff;
	--mq-blue-300: #73baff;
	--mq-blue-400: #40a2ff;
	--mq-blue-500: #1071f2;
	--mq-blue-600: #1068dd;
	--mq-blue-700: #185dcb;
	--mq-blue-800: #183eac;
	--mq-blue-900: #40487c;

	--mq-yellow-50: #fffde7;
	--mq-yellow-200: #fef69b;
	--mq-yellow-500: #ffe533;
	--mq-yellow-700: #fcc223;
	--mq-yellow-800: #dda624;
	--mq-yellow-900: #a17013;

	--mq-orange-50: #fbeae8;
	--mq-orange-100: #ffcfbd;
	--mq-orange-400: #ff7b45;
	--mq-orange-500: #ff6624;
	--mq-orange-600: #f45f20;

	--mq-pink-50: #ffe9ee;
	--mq-pink-100: #ffc8d0;
	--mq-pink-300: #f85f6a;
	--mq-pink-400: #f54c52;
	--mq-pink-500: #f0373e;

	--mq-green-100: #def0c3;
	--mq-green-500: #8acd25;
	--mq-green-700: #63a90f;
	--mq-green-900: #1e7300;

	--mq-purple-50: #efebff;
	--mq-purple-100: #ded6ff;
	--mq-purple-200: #c6b9fe;
	--mq-purple-300: #a48ffe;
	--mq-purple-400: #8468fb;
	--mq-purple-500: #7656f3;
	--mq-purple-600: #5e39ec;
	/* ... */
	--mq-purple-900: #3d3365;

	--mq-white: #fff;
	--mq-black: #000;
	--mq-transparent: #0000;

	--mq-transition: cubic-bezier(0.23, 1, 0.32, 1);

	--mq-box-shadow: 0 5px 9px -1px #0000001a, 0 3px 6px -1px #0000000f;
	--mq-box-shadow-xs: 0 1px 1px 0 #0000001a, 0 1px 1px 0 #0000001a;
	--mq-box-shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
	--mq-box-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	--mq-box-shadow-lg: 0 8px 12px -2px #0000001a, 0 4px 8px -3px #0000001a;
	--mq-box-shadow-xl: 0 8px 40px -2px #00000050, 0 4px 32px -3px #0000001a;

	--mq-box-shadow-inset: 0 3px 2px -2px #00000033 inset, 3px 0 2px -2px #00000033 inset;
	--mq-box-shadow-inset-sm: 2px 2px 3px -1px #00000015 inset;

	--mq-checkerboard: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX////MzMw46qqDAAAAE0lEQVQI12P4f4CBKMxg/4EYDAAFkR1NiYvv7QAAAABJRU5ErkJggg==);

	/* States */

	--success-text-color: var(--mq-green-900);
	--warning-text-color: var(--mq-yellow-900);
	--error-text-color: var(--mq-pink-400);
	--info-text-color: var(--mq-editor-grey-800);

	--success-bg: #8acd2537;
	--warning-bg: #ffe53345;
	--error-bg: #f54c5245;
	--info-bg: #73baff37;

	/* filter inverting colors for png font previews in dark modes - adds to invert value */
	--font-preview-invert: 0;

	--toolbar-size: 36px;
	--toolbar-gap: 3px;
	--toolbar-icon-size: 16px;

	/* Universal stencil colors */
	--stencil-chart1: var(--mq-blue-500);
	--stencil-chart2: var(--mq-blue-400);
	--stencil-chart3: var(--mq-blue-300);

	/*
		Comments notification colors
	 */
	--unread-comment-color: var(--mq-orange-400);
	--unread-comment-text-color: var(--mq-white);
}

:root,
html[data-theme='light'] {
	--editor-bg: var(--mq-editor-grey-25);
	--editor-border-color: var(--mq-editor-grey-100);
	--editor-hover-color: var(--mq-editor-grey-50);

	--editor-icon-color: var(--mq-grey-700);
	--editor-icon-color-tone: var(--mq-editor-grey-400);
	--editor-text-color: var(--mq-grey-800);
	--editor-text-muted-color: var(--mq-editor-grey-500);
	--editor-header-color: var(--mq-editor-grey-900);

	--editor-active-color: var(--mq-blue-500);
	--editor-active-bg: var(--mq-white);

	--input-bg: var(--mq-white);
	--input-border-color: var(--mq-editor-grey-300);
	--input-border-hover-color: var(--mq-editor-grey-200);
	--input-text-color: var(--mq-editor-grey-800);
	--input-icon-color: var(--mq-editor-grey-500);
	--input-accent-color: var(--mq-blue-500);

	--switch-bg: var(--mq-editor-grey-50);
	--switch-active-bg: var(--mq-white);

	--button-bg: var(--mq-editor-grey-50);
	--button-alt-bg: var(--button-bg);
	--button-text-color: var(--mq-editor-grey-700);
	--button-hover-color: var(--mq-editor-grey-100);

	--button-primary-bg: var(--mq-blue-500);
	--button-primary-text-color: var(--mq-white);
	--button-primary-hover-color: var(--mq-blue-700);

	--button-secondary-bg: #1071f21b;
	--button-secondary-text-color: var(--mq-blue-500);
	--button-secondary-hover-color: #1071f22e;

	--button-login-bg: var(--mq-white);
	--button-login-text-color: var(--mq-editor-grey-700);
	--button-login-border-color: var(--mq-editor-grey-200);

	--modal-bg: var(--mq-white);
	--welcome-bg: var(--mq-editor-grey-25);
	--welcome-hover-color: var(--mq-editor-grey-25);

	/* stencil thumbnail colors */
	--stencil-color: var(--mq-editor-grey-800);
	--stencil-color2: var(--mq-editor-grey-500);
	--stencil-color-light: var(--mq-white);
	--stencil-tone1: var(--mq-white);
	--stencil-tone2: var(--mq-editor-grey-50);
	--stencil-tone3: var(--mq-editor-grey-200);
	--stencil-tone4: var(--mq-editor-grey-400);

	/* stencil container colors */
	--stencil-bg: var(--mq-white);
	--stencil-hover-color: rgba(159, 175, 193, 0.1);
	--stencil-border-color: var(--mq-editor-grey-50);
	--stencil-header-color: var(--mq-blue-500);

	--link-color: var(--mq-blue-500);
	--link-active-color: var(--mq-blue-600);
	--folder-color: var(--mq-blue-300);

	--hint-bg: var(--mq-editor-grey-700);
	--hint-text-color: var(--mq-white);
	--hint-xl-bg: var(--mq-blue-500);

	--editor-menu-bg: var(--mq-white);
	--editor-menu-hover-color: var(--mq-editor-grey-25);
	--editor-menu-border-color: var(--mq-editor-grey-50);

	--editor-highlight-bg: var(--mq-editor-grey-50);
	--editor-selection-bg: #1071f233;
	--editor-semiselection-bg: #1071f21b;
	--editor-selection-text-color: var(--editor--text-color);

	--toolbar-bg: var(--mq-white);
	--toolbar-text-color: var(--mq-editor-grey-800);
	--toolbar-selection-bg: #1071f21b;
	--toolbar-border-color: var(--mq-editor-grey-50);

	--presence-bg: var(--mq-white);

	--stage-bg: var(--mq-grey-50);
	--stage-text: var(--mq-editor-grey-400);
}

/* Classic Theme */
html[data-theme='classic'] {
	--mq-blue: #006ce5;

	--editor-bg: #f5f5f5;
	--editor-border-color: #d2d2d2;
	--editor-hover-color: #fcfcfc;

	--editor-icon-color: #505050;
	--editor-icon-color-tone: #aaa;
	--editor-text-color: #444;
	--editor-text-muted-color: #999;
	--editor-header-color: #222;

	--editor-active-color: #006ce5;
	--editor-active-bg: #fff;

	--input-bg: #fff;
	--input-border-color: #c8c8c8;
	--input-border-hover-color: #aaa;
	--input-text-color: #222;
	--input-icon-color: #888;
	--input-accent-color: #006ce5;

	--switch-bg: #e9e9e9;
	--switch-active-bg: #fff;

	--button-bg: #eee;
	--button-alt-bg: var(--button-bg);
	--button-text-color: #333;
	--button-hover-color: #dedede;

	--button-primary-bg: #006ce5;
	--button-primary-text-color: #fff;
	--button-primary-hover-color: #065ec3;

	--button-secondary-bg: #006be51b;
	--button-secondary-text-color: #006ce5;
	--button-secondary-hover-color: #006be52e;

	--button-login-bg: #fff;
	--button-login-text-color: #333;
	--button-login-border-color: #d1d1d1;

	--modal-bg: #fff;
	--welcome-bg: #eee;
	--welcome-hover-color: #f8f8f8;

	/* stencil thumbnail colors */
	--stencil-color: #444;
	--stencil-color2: #888;
	--stencil-color-light: #fff;
	--stencil-tone1: #fff;
	--stencil-tone2: #eee;
	--stencil-tone3: #ccc;
	--stencil-tone4: #aaa;
	--stencil-tone4: #aaa;

	/* stencil container colors */
	--stencil-bg: #fff;
	--stencil-hover-color: rgba(187, 187, 187, 0.1);
	--stencil-border-color: #eee;
	--stencil-header-color: #006ce5;

	--link-color: #006ce5;
	--link-active-color: #105aae;
	--folder-color: #86d6fa;

	--hint-bg: #333;
	--hint-text-color: #eee;
	--hint-xl-bg: #006ce5;

	--editor-menu-bg: #fff;
	--editor-menu-hover-color: #f8f8f8;
	--editor-menu-border-color: #eee;

	--editor-highlight-bg: #eee;
	--editor-selection-bg: #006be533;
	--editor-semiselection-bg: #006be51b;
	--editor-selection-text-color: var(--editor-text-color);

	--toolbar-bg: #f8f8f8;
	--toolbar-text-color: #333;
	--toolbar-selection-bg: #006be51b;
	--toolbar-border-color: #d9d9d9;

	--presence-bg: #fff;

	--stage-bg: #eee;
	--stage-text: #aaa;
}

/* Dark Theme */
html[data-theme='dark'] {
	color-scheme: dark;

	--mq-checkerboard: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEVmZmZEREThwlUuAAAAE0lEQVQI12P4f4CBKMxg/4EYDAAFkR1NiYvv7QAAAABJRU5ErkJggg==);

	--bg-default: var(--mq-editor-grey-900);

	--interaction-accent: #09b967;

	--symbol-text-color: var(--mq-purple-300);
	--symbol-light: var(--mq-purple-900);

	--editor-bg: var(--mq-editor-grey-900);
	--editor-border-color: var(--mq-editor-grey-800);
	--editor-hover-color: var(--mq-editor-grey-800);

	--editor-icon-color: var(--mq-editor-grey-400);
	--editor-icon-color-tone: var(--mq-editor-grey-600);
	--editor-text-color: var(--mq-editor-grey-300);
	--editor-text-muted-color: var(--mq-editor-grey-500);
	--editor-header-color: var(--mq-editor-grey-100);

	--editor-active-color: var(--mq-white);
	--editor-active-bg: var(--mq-editor-grey-700);

	--input-bg: var(--mq-editor-grey-800);
	--input-border-color: var(--mq-editor-grey-700);
	--input-border-hover-color: var(--mq-editor-grey-600);
	--input-text-color: var(--mq-editor-grey-200);
	--input-icon-color: var(--mq-editor-grey-400);
	--input-accent-color: var(--mq-blue-300);

	--switch-bg: var(--mq-editor-grey-950);
	--switch-active-bg: var(--mq-editor-grey-700);

	--button-bg: var(--mq-editor-grey-800);
	--button-alt-bg: var(--mq-editor-grey-850);
	--button-text-color: var(--mq-editor-grey-100);
	--button-hover-color: var(--mq-editor-grey-700);

	--button-primary-bg: var(--mq-blue-500);
	--button-primary-text-color: var(--mq-editor-grey-25);
	--button-primary-hover-color: var(--mq-blue-600);

	--button-secondary-bg: var(--mq-editor-grey-100);
	--button-secondary-text-color: var(--mq-editor-grey-800);
	--button-secondary-hover-color: var(--mq-editor-grey-300);

	--button-login-bg: var(--modal-bg);
	--button-login-text-color: var(--mq-editor-grey-200);
	--button-login-border-color: var(--mq-editor-grey-200);

	--modal-bg: var(--mq-editor-grey-900);
	--welcome-bg: var(--mq-editor-grey-850);
	--welcome-hover-color: var(--mq-editor-grey-800);

	/* stencil thumbnail colors */
	--stencil-color: var(--mq-editor-grey-300);
	--stencil-color2: var(--mq-editor-grey-400);
	--stencil-color-light: var(--mq-editor-grey-100);
	--stencil-color-dark: var(--mq-editor-grey-900);
	--stencil-tone1: var(--mq-editor-grey-800);
	--stencil-tone2: var(--mq-editor-grey-700);
	--stencil-tone3: var(--mq-editor-grey-600);
	--stencil-tone4: var(--mq-editor-grey-500);

	/* stencil container colors */
	--stencil-bg: var(--mq-editor-grey-950);
	--stencil-hover-color: rgba(90, 90, 96, 0.1);
	--stencil-border-color: var(--mq-editor-grey-850);
	--stencil-header-color: var(--mq-editor-grey-300);

	--success-text-color: var(--mq-green-500);
	--info-text-color: var(--mq-editor-grey-300);
	--warning-text-color: var(--mq-yellow-700);

	--link-color: var(--mq-blue-400);
	--link-active-color: var(--mq-blue-300);
	--folder-color: var(--mq-blue-200);

	--hint-bg: var(--mq-editor-grey-800);
	--hint-text-color: var(--mq-editor-grey-100);
	--hint-xl-bg: var(--mq-blue-500);

	--editor-menu-bg: var(--mq-editor-grey-950);
	--editor-menu-hover-color: var(--mq-editor-grey-900);
	--editor-menu-border-color: var(--mq-editor-grey-850);

	--editor-highlight-bg: var(--mq-editor-grey-700);
	--editor-selection-bg: #525960aa;
	--editor-semiselection-bg: var(--mq-editor-grey-800);
	--editor-selection-text-color: var(--mq-white);

	--toolbar-bg: var(--mq-editor-grey-800);
	--toolbar-text-color: var(--mq-editor-grey-200);
	--toolbar-selection-bg: var(--mq-editor-grey-700);
	--toolbar-border-color: var(--mq-editor-grey-700);

	--presence-bg: var(--mq-editor-grey-600);

	--stage-bg: var(--mq-editor-grey-975);
	--stage-text: var(--mq-editor-grey-600);

	--font-preview-invert: 1;
}

/* =============================================================================
   Window layout
   ========================================================================== */

#stage-wrapper {
	position: absolute;
	/*
	    WARNING:
	    Do not convert these into ems as they will cause stroke
	    subpixel issues for at least Gecko based browser
	    on non-retina displays
    */
	top: 50px;
	bottom: 0;
	left: 0;
	right: 0;
	/*z-index: 20;*/
}

#sidebar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 50;
	border-right: 1px solid var(--editor-border-color);
	box-sizing: border-box;
	width: 250px;
}

#sidebar.viewer {
	width: 200px;
}

#right-sidebar {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--editor-bg);
	border-left: 1px solid var(--editor-border-color);
	width: 250px;
	box-sizing: border-box;
}

#right-sidebar.collapsed {
	display: none;
}

#main-stage {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 250px;
	left: 250px;
	z-index: 20;
	background-color: var(--stage-bg);
}

.canvas-stage {
	overflow: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	outline: none;

	/* 
		Prevent browsers from navigating away 
		when scrolling at the edges of the page.
	*/
	overscroll-behavior: none;

	/*
		Disable all default browser gestures,
		since we handle one- and two-finger gestures ourselves.

		See the CanvasPinch plugin.
	 */
	touch-action: none;
}

.canvas-stage.view-mode {
	/*
		In view mode, handle two-finger gestures,
		but allow the browser's default one-finger panning.
	 */
	touch-action: pan-x pan-y;
}

/*
	Set the origin of the SVG canvas to its top-left corner,
	so that when we `transform` it (for pinch-zoom gestures)
	we can factor into the `matrix()` the preferred origin
	at the pointer coordinates.

	This happens in the CanvasPinch plugin.
 */
.canvas-svg {
	transform-origin: 0 0;
}

.canvas-svg.hidden {
	opacity: 0;
}

.connecting,
.connecting .stencil {
	cursor: crosshair !important;
}

.stencil-selection,
.stencil-selection .stencil {
	cursor: crosshair !important;
}

.pan {
	cursor: grab !important;
}

.panning {
	cursor: grabbing !important;
}

.pan .stencil {
	cursor: grab !important;
}

.panning .stencil {
	cursor: grabbing !important;
}

#stage-state {
	text-align: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2em;
	color: var(--editor-text-color);
	font-weight: 200;
	z-index: 10;
}

#toolbar-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	z-index: 52;
	border-bottom: 1px solid var(--editor-border-color);
	box-sizing: border-box;
	background: var(--editor-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#toolbar {
	/* On webkit browsers (Safari) when 50% is a float value,
	 the positioning is made with sub-pixel values,
	 and on devices devicePixelRatio is larger than one (mac)
	 this leads to blurry display of icons and text
	transform: translateX(calc(-50% + 0.5px));
	height: 100%;
	z-index: 5;
	white-space: nowrap;
	position: absolute;
	left: 50%;
	top: 0;*/
}

#main-menu {
}

#sidebar-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 250px;
}

/*! Hint.css - v2.4.1 - 2016-11-08
* http://kushagragour.in/lab/hint/
* Copyright (c) 2016 Kushagra Gour */

/*-------------------------------------*  HINT.css - A CSS tooltip library
\*-------------------------------------*/
/**
 * HINT.css is a tooltip library made in pure CSS.
 *
 * Source: https://github.com/chinchang/hint.css
 * Demo: http://kushagragour.in/lab/hint/
 *
 * Release under The MIT License
 *
 */
/**
 * source: hint-core.scss
 *
 * Defines the basic styling for the tooltip.
 * Each tooltip is made of 2 parts:
 *  1) body (:after)
 *  2) arrow (:before)
 *
 * Classes added:
 *  1) hint
 */
@media (hover: hover), (any-hover: hover), (-moz-touch-enabled: 0) {
	[class*='hint--'] {
		position: relative;
		display: inline-block;
		/**
   * tooltip arrow
   */
		/**
   * tooltip body
   */
	}
	[class*='hint--']:before,
	[class*='hint--']:after {
		position: absolute;
		transform: translate3d(0, 0, 0);
		visibility: hidden;
		opacity: 0;
		z-index: 1000000;
		pointer-events: none;
		transition: 0.3s ease;
		transition-delay: 0ms;
	}
	[class*='hint--']:not(.hint--disabled):hover:before,
	[class*='hint--']:not(.hint--disabled):hover:after {
		visibility: visible;
		opacity: 1;
	}
	[class*='hint--']:hover:before,
	[class*='hint--']:hover:after {
		transition-delay: 100ms;
	}
	[class*='hint--']:before {
		content: '';
		position: absolute;
		background: transparent;
		border: 6px solid transparent;
		z-index: 1000001;
	}
	[class*='hint--']:after {
		background: var(--hint-bg);
		border-radius: 2px;
		color: var(--hint-text-color);
		border: 1px solid rgba(255, 255, 255, 0.1);
		padding: 7px 8px;
		font-size: 12px;
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-weight: normal;
		line-height: 12px;
		white-space: nowrap;
	}
	[class*='hint--'][aria-label]:after {
		content: attr(aria-label);
	}
	[class*='hint--'][data-hint]:after {
		content: attr(data-hint);
	}

	[aria-label='']:before,
	[aria-label='']:after,
	[data-hint='']:before,
	[data-hint='']:after {
		display: none !important;
	}

	/**
 * source: hint-position.scss
 *
 * Defines the positoning logic for the tooltips.
 *
 * Classes added:
 *  1) hint--top
 *  2) hint--bottom
 *  3) hint--left
 *  4) hint--right
 */
	/**
 * set default color for tooltip arrows
 */
	.hint--top-left:before {
		border-top-color: var(--hint-bg);
	}

	.hint--top-right:before {
		border-top-color: var(--hint-bg);
	}

	.hint--top:before {
		border-top-color: var(--hint-bg);
	}

	.hint--bottom-left:before {
		border-bottom-color: var(--hint-bg);
	}

	.hint--bottom-right:before {
		border-bottom-color: var(--hint-bg);
	}

	.hint--bottom:before {
		border-bottom-color: var(--hint-bg);
	}

	.hint--left:before {
		border-left-color: var(--hint-bg);
	}

	.hint--right:before {
		border-right-color: var(--hint-bg);
	}

	/**
 * top tooltip
 */
	.hint--top:before {
		margin-bottom: -11px;
	}

	.hint--top:before,
	.hint--top:after {
		bottom: 100%;
		left: 50%;
	}

	.hint--top:before {
		left: calc(50% - 6px);
	}

	.hint--top:after {
		transform: translateX(-50%);
	}

	.hint--top:hover:before {
		transform: translateY(-8px);
	}

	.hint--top:hover:after {
		transform: translateX(-50%) translateY(-8px);
	}

	/**
 * bottom tooltip
 */
	.hint--bottom:before {
		margin-top: -11px;
	}

	.hint--bottom:before,
	.hint--bottom:after {
		top: 100%;
		left: 50%;
	}

	.hint--bottom:before {
		left: calc(50% - 6px);
	}

	.hint--bottom:after {
		transform: translateX(-50%);
	}

	.hint--bottom:hover:before {
		transform: translateY(8px);
	}

	.hint--bottom:hover:after {
		transform: translateX(-50%) translateY(8px);
	}

	/**
 * right tooltip
 */
	.hint--right:before {
		margin-left: -11px;
		margin-bottom: -6px;
	}

	.hint--right:after {
		margin-bottom: -14px;
	}

	.hint--right:before,
	.hint--right:after {
		left: 100%;
		bottom: 50%;
	}

	.hint--right:hover:before {
		transform: translateX(8px);
	}

	.hint--right:hover:after {
		transform: translateX(8px);
	}

	/**
 * left tooltip
 */
	.hint--left:before {
		margin-right: -11px;
		margin-bottom: -6px;
	}

	.hint--left:after {
		margin-bottom: -14px;
	}

	.hint--left:before,
	.hint--left:after {
		right: 100%;
		bottom: 50%;
	}

	.hint--left:hover:before {
		transform: translateX(-8px);
	}

	.hint--left:hover:after {
		transform: translateX(-8px);
	}

	/**
 * top-left tooltip
 */
	.hint--top-left:before {
		margin-bottom: -11px;
	}

	.hint--top-left:before,
	.hint--top-left:after {
		bottom: 100%;
		left: 50%;
	}

	.hint--top-left:before {
		left: calc(50% - 6px);
	}

	.hint--top-left:after {
		transform: translateX(-100%);
	}

	.hint--top-left:after {
		margin-left: 12px;
	}

	.hint--top-left:hover:before {
		transform: translateY(-8px);
	}

	.hint--top-left:hover:after {
		transform: translateX(-100%) translateY(-8px);
	}

	/**
 * top-right tooltip
 */
	.hint--top-right:before {
		margin-bottom: -11px;
	}

	.hint--top-right:before,
	.hint--top-right:after {
		bottom: 100%;
		left: 50%;
	}

	.hint--top-right:before {
		left: calc(50% - 6px);
	}

	.hint--top-right:after {
		transform: translateX(0);
	}

	.hint--top-right:after {
		margin-left: -12px;
	}

	.hint--top-right:hover:before {
		transform: translateY(-8px);
	}

	.hint--top-right:hover:after {
		transform: translateY(-8px);
	}

	/**
 * bottom-left tooltip
 */
	.hint--bottom-left:before {
		margin-top: -11px;
	}

	.hint--bottom-left:before,
	.hint--bottom-left:after {
		top: 100%;
		left: 50%;
	}

	.hint--bottom-left:before {
		left: calc(50% - 6px);
	}

	.hint--bottom-left:after {
		transform: translateX(-100%);
	}

	.hint--bottom-left:after {
		margin-left: 12px;
	}

	.hint--bottom-left:hover:before {
		transform: translateY(8px);
	}

	.hint--bottom-left:hover:after {
		transform: translateX(-100%) translateY(8px);
	}

	/**
 * bottom-right tooltip
 */
	.hint--bottom-right:before {
		margin-top: -11px;
	}

	.hint--bottom-right:before,
	.hint--bottom-right:after {
		top: 100%;
		left: 50%;
	}

	.hint--bottom-right:before {
		left: calc(50% - 6px);
	}

	.hint--bottom-right:after {
		transform: translateX(0);
	}

	.hint--bottom-right:after {
		margin-left: -12px;
	}

	.hint--bottom-right:hover:before {
		transform: translateY(8px);
	}

	.hint--bottom-right:hover:after {
		transform: translateY(8px);
	}

	/**
 * source: hint-sizes.scss
 *
 * Defines width restricted tooltips that can span
 * across multiple lines.
 *
 * Classes added:
 *  1) hint--small
 *  2) hint--medium
 *  3) hint--large
 *
 */
	.hint--small:after,
	.hint--medium:after,
	.hint--large:after {
		white-space: normal;
		line-height: 1.4em;
		word-wrap: break-word;
	}

	.hint--small:after {
		width: 80px;
	}

	.hint--medium:after {
		width: 150px;
	}

	.hint--large:after {
		width: 300px;
	}

	/**
 * source: hint-theme.scss
 *
 * Defines basic theme for tooltips.
 *
 */
	[class*='hint--'] {
		/**
   * tooltip body
   */
	}
	[class*='hint--']:after {
		/* text-shadow: 0 -1px 0px black;*/
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
	}

	/**
 * source: hint-color-types.scss
 *
 * Contains tooltips of various types based on color differences.
 *
 * Classes added:
 *  1) hint--error
 *  2) hint--warning
 *  3) hint--info
 *  4) hint--success
 *
 */
	/**
 * Error
 */
	.hint--error:after {
		background-color: #b34e4d;
		text-shadow: 0 -1px 0px #592726;
	}

	.hint--error.hint--top-left:before {
		border-top-color: #b34e4d;
	}

	.hint--error.hint--top-right:before {
		border-top-color: #b34e4d;
	}

	.hint--error.hint--top:before {
		border-top-color: #b34e4d;
	}

	.hint--error.hint--bottom-left:before {
		border-bottom-color: #b34e4d;
	}

	.hint--error.hint--bottom-right:before {
		border-bottom-color: #b34e4d;
	}

	.hint--error.hint--bottom:before {
		border-bottom-color: #b34e4d;
	}

	.hint--error.hint--left:before {
		border-left-color: #b34e4d;
	}

	.hint--error.hint--right:before {
		border-right-color: #b34e4d;
	}

	/**
 * Warning
 */
	.hint--warning:after {
		background-color: #c09854;
		text-shadow: 0 -1px 0px #6c5328;
	}

	.hint--warning.hint--top-left:before {
		border-top-color: #c09854;
	}

	.hint--warning.hint--top-right:before {
		border-top-color: #c09854;
	}

	.hint--warning.hint--top:before {
		border-top-color: #c09854;
	}

	.hint--warning.hint--bottom-left:before {
		border-bottom-color: #c09854;
	}

	.hint--warning.hint--bottom-right:before {
		border-bottom-color: #c09854;
	}

	.hint--warning.hint--bottom:before {
		border-bottom-color: #c09854;
	}

	.hint--warning.hint--left:before {
		border-left-color: #c09854;
	}

	.hint--warning.hint--right:before {
		border-right-color: #c09854;
	}

	/**
 * Info
 */
	.hint--info:after {
		background-color: #3986ac;
		text-shadow: 0 -1px 0px #1a3c4d;
	}

	.hint--info.hint--top-left:before {
		border-top-color: #3986ac;
	}

	.hint--info.hint--top-right:before {
		border-top-color: #3986ac;
	}

	.hint--info.hint--top:before {
		border-top-color: #3986ac;
	}

	.hint--info.hint--bottom-left:before {
		border-bottom-color: #3986ac;
	}

	.hint--info.hint--bottom-right:before {
		border-bottom-color: #3986ac;
	}

	.hint--info.hint--bottom:before {
		border-bottom-color: #3986ac;
	}

	.hint--info.hint--left:before {
		border-left-color: #3986ac;
	}

	.hint--info.hint--right:before {
		border-right-color: #3986ac;
	}

	/**
 * Success
 */
	.hint--success:after {
		background-color: #458746;
		text-shadow: 0 -1px 0px #1a321a;
	}

	.hint--success.hint--top-left:before {
		border-top-color: #458746;
	}

	.hint--success.hint--top-right:before {
		border-top-color: #458746;
	}

	.hint--success.hint--top:before {
		border-top-color: #458746;
	}

	.hint--success.hint--bottom-left:before {
		border-bottom-color: #458746;
	}

	.hint--success.hint--bottom-right:before {
		border-bottom-color: #458746;
	}

	.hint--success.hint--bottom:before {
		border-bottom-color: #458746;
	}

	.hint--success.hint--left:before {
		border-left-color: #458746;
	}

	.hint--success.hint--right:before {
		border-right-color: #458746;
	}

	/**
 * source: hint-always.scss
 *
 * Defines a persisted tooltip which shows always.
 *
 * Classes added:
 *  1) hint--always
 *
 */
	.hint--always:after,
	.hint--always:before {
		opacity: 1;
		visibility: visible;
	}

	.hint--always.hint--top:before {
		transform: translateY(-8px);
	}

	.hint--always.hint--top:after {
		transform: translateX(-50%) translateY(-8px);
	}

	.hint--always.hint--top-left:before {
		transform: translateY(-8px);
	}

	.hint--always.hint--top-left:after {
		transform: translateX(-100%) translateY(-8px);
	}

	.hint--always.hint--top-right:before {
		transform: translateY(-8px);
	}

	.hint--always.hint--top-right:after {
		transform: translateY(-8px);
	}

	.hint--always.hint--bottom:before {
		transform: translateY(8px);
	}

	.hint--always.hint--bottom:after {
		transform: translateX(-50%) translateY(8px);
	}

	.hint--always.hint--bottom-left:before {
		transform: translateY(8px);
	}

	.hint--always.hint--bottom-left:after {
		transform: translateX(-100%) translateY(8px);
	}

	.hint--always.hint--bottom-right:before {
		transform: translateY(8px);
	}

	.hint--always.hint--bottom-right:after {
		transform: translateY(8px);
	}

	.hint--always.hint--left:before {
		transform: translateX(-8px);
	}

	.hint--always.hint--left:after {
		transform: translateX(-8px);
	}

	.hint--always.hint--right:before {
		transform: translateX(8px);
	}

	.hint--always.hint--right:after {
		transform: translateX(8px);
	}

	/**
 * source: hint-rounded.scss
 *
 * Defines rounded corner tooltips.
 *
 * Classes added:
 *  1) hint--rounded
 *
 */
	.hint--rounded:after {
		border-radius: 4px;
	}

	/**
 * source: hint-effects.scss
 *
 * Defines various transition effects for the tooltips.
 *
 * Classes added:
 *  1) hint--no-animate
 *  2) hint--bounce
 *
 */
	.hint--no-animate:before,
	.hint--no-animate:after {
		transition-duration: 0ms;
	}

	.hint--bounce:before,
	.hint--bounce:after {
		transition: opacity 0.3s ease, visibility 0.3s ease,
			transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	}
}

/* =============================================================================
   Icons
   ========================================================================== */

.mq-icon {
	display: inline-block;
	overflow: visible;
	vertical-align: middle;
	fill: currentColor;
	width: 1em;
	height: 1em;
}

/*
	Note: we need this so that events that happen on the <use> element inside the SVG
	can be bubbled up to a parent outside of the containing SVG.
	See https://github.com/Evercoder/new-engine/issues/308
 */
.mq-icon use {
	pointer-events: none;
}

.mq-icon-logo {
	width: 2em;
	height: 2em;
	fill: var(--mq-white);
}

.mq-icon-menu-btn {
	transform: translate(1.75em, 0.5em) scale(0.3, 0.3);
}

.mq-icon-chevron-btn {
	height: 1.25em;
	width: 1.25em;
}

/* =============================================================================
   Modals
   ========================================================================== */

.mq-overlay {
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;

	padding: 30px 30px 0;
	overflow: auto;
	/* should go over chart-editor (5000)*/
	z-index: 5001;
	background: rgba(33, 33, 35, 0.8);
}
.mq-overlay-transparent {
	background: transparent;
}
.mq-authorization-modal {
	padding: 0 1em 0.5em;
}

.mq-modal {
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	padding: 8vh 2rem 2vh;
	font-size: 0.875rem;
	overflow: auto;
	max-width: 9999px;
	background: none;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.mq-modal-active {
	display: block;
}

.mq-modal-heading {
	/*border-bottom: 1px solid var(--editor-menu-border-color);*/
	/*font-size: 1.1em;*/
	/*padding: 1em;*/
	padding: 30px 60px 0 30px;
	position: relative;
	color: var(--editor-header-color);
	text-align: left;
	font-weight: 700;
	font-size: 22px;
	font-family: var(--mq-font-display);
}

.mq-modal-img {
	max-height: 12em;
}

.mq-modal-check {
	margin-right: 0.5em;
}

.mq-modal-x {
	position: absolute;
	top: 24px;
	right: 28px;
}

.mq-modal-x:hover {
	cursor: pointer;
	color: var(--editor-active-color);
}

.mq-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	color: var(--editor-text-muted-color);
	border-radius: var(--modal-border-radius);
	background: var(--modal-bg);
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}

.mq-modal-close:hover {
	cursor: pointer;
	color: var(--editor-active-color);
}

.mq-modal-close .mq-icon {
	fill: currentColor;
}

.mq-modal-close:hover .mq-icon {
	fill: var(--editor-active-color);
	color: var(--editor-active-color);
}

.mq-modal-wrapper {
	position: relative;
	flex: none;
	/*max-width: 1200px;*/
	/*padding: 1em;*/
	background: var(--modal-bg);
	box-shadow: var(--mq-box-shadow-xl);
	border-radius: var(--modal-border-radius);
}

.mq-modal-content {
	padding: 20px 30px 30px;
	color: var(--editor-text-color);
}

.mq-modal-footer {
	padding-top: 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.mq__modal__section.mq-modal-footer {
	padding-top: 30px;
}

/* TODO: probably better name here */
.mq-modal-content-compact {
	padding: 0;
}

.mq-small {
	font-size: 0.8em;
	/*font-weight: bold;*/
	margin: 1em 0;
}

/* todo shitty class */
.start-designing-btn {
	margin: 0 auto 0.75em !important;
	max-width: 14em;
	display: block !important;
}

.mq-modal-separator {
	border-bottom: 1px solid var(--editor-menu-border-color);
	width: 100%;
}

.mq-modal-section {
	margin: 20px;
}

.mq-modal-actions {
	padding: 0 20px 20px 20px;
	display: flex;
	flex-direction: row;
}
.mq-modal-actions button:not(:first-of-type) {
	margin-left: 0.5em;
}
.mq-modal-actions--align-right {
	justify-content: flex-end;
}

.mq-modal-actions--spread {
	justify-content: space-between;
}

.mq-modal-actions--no-vpadding {
	padding-bottom: 0;
	padding-top: 0;
}

.mq-modal-dashboard-link {
	padding-top: 10px;
	color: var(--editor-text-muted-color);
}

.mq-modal-dashboard-link a {
	opacity: 0.9;
}

.mq-modal-privacy-details span {
	display: block;
	font-size: 0.9em;
	color: var(--editor-text-muted-color);
}

.mq-modal-checkbox-label {
	margin-left: 0.5em;
}

.mq-modal-grey-text {
	color: var(--editor-text-muted-color);
	margin-top: 1.8em;
}

.mq-modal-title {
	font-family: var(--mq-font-display);
	font-size: 30px;
	line-height: 1.22;
	margin-right: 1em;
	font-weight: 700;
}

.mq-modal-nudger {
	padding: 0 0.5em 0 0;
}

.mq-modal-nudger--guests .mq-modal-title {
	margin-right: 1.5em;
}
.mq-modal-nudger--guests .mq-modal-img {
	margin-right: 2em;
}

/*
	Nudger: Soft Object Limit
	-------------------------
 */
.mq-modal-nudger--soft-limit {
}

.mq-modal-nudger--soft-limit .mq-modal-nudger__hero {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
}

.mq-modal-nudger--soft-limit .mq-modal-img {
	align-self: center;
	margin: 0 0 1em;
}

.mq-modal-mb-0 {
	margin-bottom: 0;
}

.mq-modal-upgrade-benefits {
	margin-top: 1em;
}

.mq-modal-margin-right {
	margin-right: 3em;
}

.mq-modal-margin-bottom {
	margin-bottom: 0.5em;
}

/* =============================================================================
   New type of modal (e.g. sharing and new project )
   ========================================================================== */

.mq__modal .mq-modal-content {
	padding: 30px 0;
}

.mq__modal__close {
	color: var(--editor-text-color);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.mq__modal__close:hover {
	color: var(--editor-active-color);
}

.mq__modal__title {
	margin: 0;
	padding: 0;
	font-family: var(--mq-font-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--editor-header-color);
}

.mq__modal__subtitle {
	font-size: 0.85em;
	color: var(--editor-text-muted-color);
	padding-bottom: 1.25em;
	display: block;
}

.mq__modal__heading {
	color: var(--editor-text-color);
	font-weight: bold;
	font-size: 14px;
	margin: 0;
}

.mq__modal__footer {
	color: var(--editor-text-muted-color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 6px 0px 4px 0px;
}

.mq__modal__footer__link {
	margin-top: 20px;
	text-align: center;
}

.mq__modal__footer__link span + a {
	margin-left: 5px;
	display: inline-block;
}

.mq__modal__footer a:focus {
	text-decoration: underline;
}

.mq__modal__subheading {
	color: var(--editor-text-muted-color) !important;
	font-size: 10px;
	text-transform: uppercase;
}

.mq__modal__subtext {
	padding: 0 0 0.5em 0;
	color: var(--editor-text-muted-color) !important;
	font-weight: bold;
	font-size: 11px;
}

/* New modals don't use headings for now */
.mq__modal .mq-modal-heading {
	display: none;
}

.mq__modal__separator {
	border-bottom: 1px solid var(--editor-menu-border-color);
	width: 100%;
	padding-top: 20px;
}

.mq__modal__section {
	padding: 10px 30px 0 30px;
}

.mq__modal__saml__error__section {
	padding: 0px 30px 10px 30px;
}

.mq__modal__saml__error__section .mq__modal__subtitle {
	font-size: 14px;
	color: #000;
	margin: 1em 0;
	line-height: 1.5;
}

.mq__modal__auth__section {
	padding: 30px 0px 5px 0px;
}

.mq__modal__no__account__section {
	padding: 5px 0px 30px 0px;
}

.mq__modal__section__first {
	padding-top: 0;
}

.mq__modal__section h2 {
	margin: 0;
}
.new__account__modal {
	position: relative;
}

.new__account__modal .mq__modal__section {
	color: #3b4753;
	padding: 36px 30px 0px 259px;
	width: 100%;
}

.new__account__modal .mq__modal__subtitle {
	font-size: 0.875rem;
	padding-bottom: 0;
}

/*.mq__modal .mq-modal-content .new__account__modal {*/
/*	max-width: 1090px;*/
/*	width: 1120px;*/
/*	min-width: 800px;*/
/*}*/
.new__account__sidebar {
	border-radius: 24px 0 0 24px;
	position: absolute;
	top: -30px;
	bottom: -30px;
	background: #1071f2;
	width: 230px;
}

.new__account__sidebar__logo {
	position: absolute;
	fill: #fff;
	z-index: 10;
	top: 42px;
	width: 100%;
	height: 24px;
}

.new__account__sidebar__bg {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	object-fit: contain;
	display: inline-block;
	width: 100%;
}
.new__account__sidebar span {
	font-size: 1.1em;
	font-weight: 400;
	margin: 0 0 1em 0;
	color: var(--editor-text-color);
}

.new__account__content .mq__modal__title {
	margin: -30px 0 10px 0;
	color: var(--editor-text-color);
}

.login__content .mq__modal__title {
	margin-top: 5px;
	color: var(--editor-text-color);
}

.mq__modal__actions {
}

.mq__modal__actions button {
	font-size: 15px;
}

/* =============================================================================
   Specific modals style
   ========================================================================== */

.mq__modal--creator .mq__input--lg input {
	padding: 1em 0.7em;
	font-size: 15px;
	border-radius: calc(var(--inspector-border-radius) * 1.5);
}

.mq__modal--creator .mq__modal__section__first {
	padding-bottom: 1em;
}

.mq__input.mq__input--lg {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.mq__input--lg label {
	display: none;
}

.mq__modal .mq-message {
	margin-top: 1em;
	font-size: 13px;
}

.invite__modal .mq__input label {
	margin-bottom: 0;
}

.mq__modal__nudger {
	font-size: 18px;
}

.mq__modal__nudger .mq-modal-x {
	margin: 0em;
}

.mq__modal__nudger .mq__modal__img {
	max-height: 10em;
}

.mq__modal__nudger .mq__modal__title {
	font-size: 1.5em;
	color: #3b4754;
}

/* Invite members to your team Modal */

.mq__modal__rounded {
	border-radius: 17px;
}

.mq__modal__inverted-bg {
	background-color: #107fee;
}

.mq__modal__no-padding {
	margin-top: -30px;
	margin-bottom: -30px;
}

.mq__modal__item-rounded-right {
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

.mq__modal__text-white {
	color: white;
}

.mq__modal__padding-vertical {
	padding: 1.5em 0;
}

.mq__modal__min-width {
	min-width: 375px;
}

.mq__modal__img-invite {
	max-width: 21.9em;
}

@media (max-width: 767px) {
	.mq-modal {
		padding: 1rem;
	}
}

@media (--phone) {
	.mq-modal {
		padding: 1rem;
	}
}

/* Extension Colorpicker override */

html #mq-colorpick-container {
	z-index: 55;
}

html #mq-magnifying-glass {
	width: 120px;
	height: 120px;
	border: 1px solid var(--editor-border-color);
	border-radius: var(--inspector-border-radius);
}
html #mq-color-picker-rectangle {
	border-radius: var(--inspector-border-radius);
	border: 1px solid var(--editor-border-color);
	margin-bottom: 5px;
}

html #mq-colorpicker-modal {
	background: var(--editor-bg);
	border: 1px solid var(--editor-border-color);
	box-shadow: var(--mq-box-shadow-md);
	color: var(--editor-text-color);
	border-radius: var(--inspector-border-radius);
	width: 16em;
}

html #mq-colorpicker-modal-header {
	background: none;
	padding: 5px 10px 0;
	border-bottom: 0;
	font-size: 12px;
}

html #mq-colorpicker-modal-header-close {
	right: 7px;
	font-size: 20px;
	color: var(--link-color);
}

html #mq-colorpicker-modal-header-close:hover {
	cursor: pointer;
}

html #mq-colorpicker-modal-body {
	font-size: 12px;
}

/* Message dialog */

.mq-message-dialog .mq-btn {
	margin-right: 0.5em;
}

.mq-message-dialog .mq-btn.pull-right:not(.preserve-margin) {
	margin-right: 0;
}

/* /Message dialog */

/* =============================================================================
   Buttons
   ========================================================================== */

.mq-btns {
	margin: 1em 0;
}

.mq-btn {
	-webkit-user-select: none;
	user-select: none;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	text-align: center;
	/*padding: 0.25em 1em;*/
	padding: 0.4em 1em 0.4em 1em;
	margin: 0;
	color: var(--button-primary-text-color);
	background-color: var(--button-primary-bg);
	text-decoration: none;
	border-radius: 0.25em;
	cursor: default;
	transition: background-color 0.1s;
	border: 1px solid var(--button-primary-bg);
	font-size: 1em;
}

.mq-btn-secondary {
	background-color: var(--button-secondary-bg);
	border-color: var(--button-secondary-bg);
	color: var(--button-secondary-text-color);
}

.mq-btn-secondary:hover,
.mq-btn-secondary:focus {
	background-color: var(--button-secondary-hover-color);
}

.mq-btn.link,
.mq-btn.link:hover {
	color: var(--link-color);
	border-color: transparent;
	background: none;
	cursor: pointer;
}

.mq-btn.link:active,
.mq-btn.link:focus {
	background-color: var(--editor-semiselection-bg);
	border-radius: 0;
}

.mq-btn-danger {
	background: var(--error-text-color);
	border: 1px solid var(--error-text-color);
}

.mq-btn-large {
	padding: 0.55em 1em;
}

.mq-btn-hover,
.mq-btn:hover,
.mq-btn:focus {
	background-color: var(--button-primary-hover-color);
	border: 1px solid var(--button-primary-hover-color);
	text-decoration: none;
	color: var(--button-primary-text-color);
}

.mq-btn:focus {
	outline: 0;
}

.mq-btn::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.mq-btn-active,
.mq-btn:active {
	text-decoration: none;
	color: var(--editor-active-color);
	background-color: var(--editor-active-bg);
}

.mq-btn[disabled],
.mq-btn.disabled,
.mq-btn-disabled,
.mq-btn-disabled:hover,
.mq-btn-disabled:focus,
.mq-btn-disabled:active {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
	pointer-events: none;
}

.mq-btn.transparent,
.mq-btn.transparent:hover {
	color: var(--editor-text-color);
	border-color: transparent;
	background: none;
}

.mq-btn.transparent:active,
.mq-btn.transparent:focus {
	background-color: var(--editor-highlight-bg);
	border-radius: 0;
}

.mq-btn.leftside {
	border-radius: 4px 0 0 4px;
}

.mq-btn.rightside {
	border-radius: 0 4px 4px 0;
}

.mq-btn .mq-icon {
	pointer-events: none;
}

.mq-btn-group {
	display: inline-block;
	vertical-align: middle;
}

.mq-btn-group .mq-btn:not(.leftside):not(.rightside) {
	border-radius: 0;
}

.mq-btn-group .mq-btn:not(.leftside) {
	margin-left: -1px;
}

.mq-btn-group .mq-btn {
	float: left;
}

.mq-btn-faded {
	opacity: 0.7;
}

/* =============================================================================
   New button styles
   ========================================================================== */

.mq__button {
	-webkit-user-select: none;
	user-select: none;
	box-sizing: border-box;
	padding: 8px 16px;
	min-width: 6em;
	height: 38px;
	margin: 0;
	color: var(--button-text-color);
	background: var(--button-bg);
	text-decoration: none;
	text-align: center;
	border-radius: calc(var(--inspector-border-radius) * 1.5);
	cursor: pointer;
	transition: background-color 0.1s;
	border: 1px solid transparent;
	font-size: 14px; /* Default size */
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.mq__button:hover,
.mq__button:focus {
	background-color: var(--button-hover-color);
	text-decoration: none;
	outline: none;
}

.mq__button:disabled,
.mq__button--disabled {
	color: var(--editor-text-muted-color);
	background-color: var(--button-bg);
	border: 1px solid var(--button-bg);
	opacity: 0.7;
	pointer-events: none;
	cursor: default;
}

.mq__button--hollow {
	color: var(--button-primary-bg);
	background-color: transparent;
	border: 1px solid var(--button-primary-bg);
}

.mq__button--hollow:hover,
.mq__button--hollow:focus {
	background-color: var(--editor-semiselection-bg);
}

.mq__button--important {
	color: var(--new-text-color);
	background-color: var(--new-accent);
}

.mq__button--important:hover {
	color: var(--new-text-color);
	background-color: var(--new-accent);
	opacity: 0.9;
}

.mq__button--secondary {
	color: var(--button-text-color);
	background-color: transparent;
}

.mq__button--secondary:hover {
	color: var(--editor-active-color);
}

/*
	Button variation: compact
	-------------------------
 */
.mq__button--compact {
	padding: 4px 12px;
	font-size: 12px;
	white-space: nowrap;
	height: 32px;
	min-width: 0;
}

.mq__button--narrow {
	min-width: 3em;
}

/*
	Button icons
	------------
 */
.mq__button .mq-icon {
	fill: currentColor;
	width: 1.25em;
	height: 1.25em;
}

/* =============================================================================
   Custom button styles
   ========================================================================== */

.mq__button__apple svg.mq-icon {
	width: 20px;
	height: 20px;
	fill: var(--stencil-color);
}

.mq__button__google {
	border-radius: 0.4rem;
	height: 40px;
	padding: 1px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.03);
	border: 1px solid var(--button-login-border-color);
	transition: border-color 0.1s ease-out, color 0.1s ease-out;
	background: var(--button-login-bg);
	color: var(--button-login-text-color);
	font-weight: 600;
}

.mq__button__google:hover {
	color: var(--editor-active-color);
	border-color: var(--editor-active-color);
	background-color: var(--editor-semiselection-bg);
}

.mq__button__google:focus {
	background-color: var(--editor-semiselection-bg);
	border-color: var(--editor-active-color);
}

.mq__button__google svg.mq-icon {
	margin-left: -9px;
	width: 36px;
	height: 36px;
	display: inline-block;
}

.mq__button--template-secondary {
	margin-right: 10px;
	white-space: nowrap;
}

.orange__button {
	height: 40px;
	background-color: var(--mq-yellow-500);
	box-shadow: 0px 3px 6px rgba(254, 219, 44, 0.2);
	color: var(--mq-grey-900);
	border-radius: 0.4rem;
	margin-top: 1rem !important;
}

.orange__button:hover,
.orange__button:focus {
	background-color: var(--mq-yellow-700);
}

.blue__button {
	height: 40px;
	background-color: var(--button-primary-bg);
	color: var(--button-primary-text-color);
	border-radius: 0.4rem;
	margin-top: 1rem !important;
}

.blue__button:hover,
.blue__button:focus {
	background-color: var(--button-primary-hover-color);
}

.mq__signup .mq__input label {
	margin-bottom: 0.4rem;
}

.mq__button--primary {
	background-color: var(--button-primary-bg);
	color: var(--button-primary-text-color);
}

.mq__button--primary:hover,
.mq__button--primary:focus {
	color: var(--button-primary-text-color);
	background-color: var(--button-primary-hover-color);
}

.mq__button--secondary {
	background-color: var(--button-secondary-bg);
	color: var(--button-secondary-text-color);
}

.mq__button--secondary:hover,
.mq__button--secondary:focus {
	color: var(--button-secondary-text-color);
	background-color: var(--button-secondary-hover-color);
}

.mq__button--dark {
	background-color: var(--editor-text-color);
	color: var(--editor-bg);
}

.mq__button--dark:hover,
.mq__button--dark:focus {
	background-color: var(--editor-text-color);
	color: var(--editor-bg);
	opacity: 0.9;
}

/* =============================================================================
   Forms
   ========================================================================== */

.mq__signup input[type='text'],
.mq__signup input[type='password'],
.mq__signup input[type='number'],
.mq__signup input[type='email'],
select,
textarea {
	padding: 0.725em 0.75em;
	background-color: var(--input-bg);
}

.mq__signup .mq__input {
	margin-top: 1rem;
}

.mq-file-input {
	position: absolute;
	right: 41px;
	left: 0;
	top: -8px;
	height: 37px;
	font-size: 10px;
	cursor: pointer;
	direction: ltr;
	opacity: 0;
	width: 100px;
	z-index: 2;
}

/* Todo make me pretty */
.mq-input-error {
	color: var(--error-text-color);
	font-size: 0.75rem;
	font-weight: 500;
}

/* =============================================================================
   Alt Forms styles
   ========================================================================== */

.mq__form {
}

.mq__form button[type='submit'] {
	margin-top: 30px;
}
.mq__signup .mq__form button[type='submit'] {
	margin-top: 34px;
}

.mq__input {
	display: flex;
	flex-direction: column;
	margin-top: 0.7rem;
}

.mq__input--readonly input {
	background: #ebebeb;
}

.mq__input label {
	color: var(--editor-text-color);
	font-weight: bold;
	margin-bottom: 0.7rem;
}

.mq__input span {
	color: var(--error-text-color);
	font-size: 0.75rem;
	font-weight: 500;
}

.mq__input input {
	width: 100%;
	border: 1px solid #c0c0c0;
}

.mq__input input:focus,
.mq__input input:hover {
	border: 1px solid #006ce5;
}

.mq__name__input input {
	padding: 1em 0.5em;
}

.mq__terms__checkbox {
	margin-top: 0.4rem;
	font-size: 0.825em;
}

.mq__terms__checkbox label {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	letter-spacing: -0.2px;
}
.mq__terms__checkbox label input[type='checkbox'] {
	margin-right: 0.625em;
	transform: scale(1.125);
	cursor: pointer;
}

.mq__signup {
	color: #3b4753;
}

.mq__signup .mq__terms__checkbox label {
	padding-top: 4px;
	color: var(--editor-text-muted-color);
}

.mq__signup .mq__terms__checkbox a:focus {
	text-decoration: underline;
}

.mq__signup .mq__terms__checkbox label span {
	padding-left: 1px;
}
.mq__signup .mq__terms__checkbox label input[type='checkbox'] {
	padding-top: 4px;
	color: #4a5a6a !important;
}

.mq__terms__checkbox .mq-input-error {
	display: block;
}

.secondary__login__link {
	display: flex;
	justify-content: center;
	flex-grow: 1;
	color: rgb(61, 138, 247);
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	align-items: center;
}

.input__instruction {
	color: var(--editor-text-muted-color);
	font-weight: normal;
	margin-left: 0.3em;
}

/* =============================================================================
   Messages
   ========================================================================== */

.mq-badge {
	vertical-align: middle;
	display: inline-block;
	padding: 0.2em 0.75em;
	background: var(--button-bg);
	color: var(--button-text-color);
	border-radius: 0.25em;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.mq-new {
	/*border: 1px solid currentColor;*/
	color: var(--editor-active-color);
	text-transform: uppercase;
	font-size: 0.7em;
	letter-spacing: 0.05em;
	padding: 0.2em 0.5em;
	display: inline-block;
	margin-right: 0.25em;
	border-radius: 0.25em;
	font-weight: bold;
}

.mq-message {
	margin: 0 0 1em 0;
	padding: 0.75em;
	border-radius: calc(var(--inspector-border-radius) * 1.5);
}

.mq-message--lg {
	padding: 1.25em;
	border-radius: calc(var(--inspector-border-radius) * 3);
}

.mq-message h3 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: bold;
}

.mq-message a {
	text-decoration: underline;
}

.mq-message a:hover,
.mq-message a:focus {
	color: var(--link-active-color);
}

.mq-info {
	color: var(--info-text-color);
	background: var(--info-bg);
}

.mq-success {
	color: var(--success-text-color);
	background: var(--success-bg);
}

.mq-warning {
	color: var(--warning-text-color);
	background: var(--warning-bg);
}

.mq-warning .mq-icon {
	fill: var(--warning-text-color) !important;
	margin-right: 0.5em;
}

.mq-error {
	color: var(--error-text-color);
	background: var(--error-bg);
}

.mq-warning .mq-error {
	background: transparent;
	border: none;
}

.mq-stencil-alert {
	color: var(--error-text-color);
	background: var(--error-bg);
	text-align: center;
	margin-top: -0.5em;
}

.mq-message-secondary {
	font-size: 0.9em;
	margin: 1em 0;
}

.mq-message ul {
	list-style: disc;
	padding-left: 1em;
}

.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

.animated-0-4s {
	animation-duration: 0.4s;
	animation-fill-mode: both;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fadeInUp {
	animation-name: fadeInUp;
}

@keyframes fadeOutUp {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
}

.fadeOutUp {
	animation-name: fadeOutUp;
}

.mq-loader {
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--stage-bg);
	display: flex;
	justify-content: center;
	align-items: center;
}

.m-loader-container {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 256px;
	height: 256px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.m-loader-text {
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	color: var(--stage-text);
	letter-spacing: -0.2pt;
}

.m-loader {
	width: 96px;
	height: 96px;
}

.moqups-loader {
	width: 7rem;
	height: 7rem;
	position: fixed;
	left: calc(50% - 3.5rem);
	top: calc(50% - 3.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.moqups-loader div {
	width: 5rem;
	height: 4.5rem;
	background-color: var(--mq-brand-blue);
	mask-image: url("data:image/svg+xml,%3Csvg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 136 85\"%3E%3Cpath d=\"M132.8 75.3c-.3 1.2-1 2.2-2 2.9A42.8 42.8 0 0 1 124 82a33.3 33.3 0 0 1-13 2.7c-4.2 0-8.3-1.3-11.5-4-3.2-2.5-4.8-6.8-4.8-12.8A43.9 43.9 0 0 1 96 57.2l3.6-16.5 2.4-11.6a36 36 0 0 0 1-7c0-1.8-.4-3-1.2-3.7a6.5 6.5 0 0 0-4-1c-2.8 0-5.6 1.1-8.7 3.3a24.6 24.6 0 0 0-9.5 14.7L70 80.9a2.5 2.5 0 0 1-2.4 2H51.2a1.2 1.2 0 0 1-1.2-1.5l11-51.5c.6-2.6 1-5.3 1-8 0-1.7-.3-2.9-1.1-3.5a6.2 6.2 0 0 0-4-1c-3 .1-6 1.2-8.4 3.2-5.1 3.7-8.7 9.2-10 15.3L29 81.2a2 2 0 0 1-2 1.6H9.6a1.3 1.3 0 0 1-1.3-1.6L19.8 28l.2-.7c.2-1.7.4-3.4.4-5.1a6.3 6.3 0 0 0-3.1-5.7c-.6-.3-1.3-.5-2-.5-1.7 0-3.5.4-5 1.2a29.4 29.4 0 0 0-9.3 6.8l-.9 1L3.8 7.7a3.8 3.8 0 0 1 1.6-2.4A28.1 28.1 0 0 1 22.1 0c6.4 0 11.3 1.4 14.7 4.4 2.2 1.8 3.8 4.4 4.6 7.2A36 36 0 0 1 66.8 0C70.5 0 74 1 77 3c2.7 1.9 4.3 5 4.7 9.2 3.7-4 8-7.1 13-9.4 4.1-1.8 8.5-2.7 13-2.7 4.2-.1 8.3 1.3 11.5 3.9 3.2 2.6 4.8 6.9 4.8 13a41.6 41.6 0 0 1-1.3 10.5l-.9 4-5 24.2a36 36 0 0 0-1 7c0 1.8.4 3 1.2 3.7 1.2.7 2.6 1 4 1 2.7 0 5.6-1.1 8.6-3.4a30.4 30.4 0 0 0 5.5-5.1.7.7 0 0 1 .8.8l-3.1 15.7Z\" fill=\"%231181F1\"/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 136 85\"%3E%3Cpath d=\"M132.8 75.3c-.3 1.2-1 2.2-2 2.9A42.8 42.8 0 0 1 124 82a33.3 33.3 0 0 1-13 2.7c-4.2 0-8.3-1.3-11.5-4-3.2-2.5-4.8-6.8-4.8-12.8A43.9 43.9 0 0 1 96 57.2l3.6-16.5 2.4-11.6a36 36 0 0 0 1-7c0-1.8-.4-3-1.2-3.7a6.5 6.5 0 0 0-4-1c-2.8 0-5.6 1.1-8.7 3.3a24.6 24.6 0 0 0-9.5 14.7L70 80.9a2.5 2.5 0 0 1-2.4 2H51.2a1.2 1.2 0 0 1-1.2-1.5l11-51.5c.6-2.6 1-5.3 1-8 0-1.7-.3-2.9-1.1-3.5a6.2 6.2 0 0 0-4-1c-3 .1-6 1.2-8.4 3.2-5.1 3.7-8.7 9.2-10 15.3L29 81.2a2 2 0 0 1-2 1.6H9.6a1.3 1.3 0 0 1-1.3-1.6L19.8 28l.2-.7c.2-1.7.4-3.4.4-5.1a6.3 6.3 0 0 0-3.1-5.7c-.6-.3-1.3-.5-2-.5-1.7 0-3.5.4-5 1.2a29.4 29.4 0 0 0-9.3 6.8l-.9 1L3.8 7.7a3.8 3.8 0 0 1 1.6-2.4A28.1 28.1 0 0 1 22.1 0c6.4 0 11.3 1.4 14.7 4.4 2.2 1.8 3.8 4.4 4.6 7.2A36 36 0 0 1 66.8 0C70.5 0 74 1 77 3c2.7 1.9 4.3 5 4.7 9.2 3.7-4 8-7.1 13-9.4 4.1-1.8 8.5-2.7 13-2.7 4.2-.1 8.3 1.3 11.5 3.9 3.2 2.6 4.8 6.9 4.8 13a41.6 41.6 0 0 1-1.3 10.5l-.9 4-5 24.2a36 36 0 0 0-1 7c0 1.8.4 3 1.2 3.7 1.2.7 2.6 1 4 1 2.7 0 5.6-1.1 8.6-3.4a30.4 30.4 0 0 0 5.5-5.1.7.7 0 0 1 .8.8l-3.1 15.7Z\" fill=\"%231181F1\"/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: top center;
	-webkit-mask-position: top center;
	animation: pulse 1.7s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.moqups-loader p {
	line-height: 1;
	margin: 0;
	padding: 0;
	font-size: 0.813rem !important;
	color: var(--stage-text);
	font-weight: 400;
	font-family: 'Helvetica', 'Arial', sans-serif !important;
}

@keyframes pulse {
	from {
		transform: scale(1);
	}
	54% {
		transform: scale(1.1);
	}
	to {
		transform: scale(1);
	}
}

#conversions-tracking {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.object-highlight-path {
	fill: none;
	stroke: var(--normal-stroke);
	stroke-width: 1.75px;
	pointer-events: none;
}

.hidden {
	visibility: hidden;
}

.object-highlight-path-temporary {
	fill: var(--normal-stroke);
	fill-opacity: 0;
	stroke-opacity: 0;
	stroke: var(--normal-stroke);
	stroke-width: 1.75px;
	pointer-events: none;
	animation: oh-highlight ease-in-out 0.6s;
	animation-iteration-count: 2;
}

.object-highlight-path--locked {
	stroke: var(--locked-stroke);
	stroke-width: 1px;
}

.object-highlight-path--symbol {
	stroke: var(--symbol-accent);
	stroke-width: 2px;
}

.object-highlight-path--blink {
	animation: oh-blinking 0.2s step-end 3;
}

.object-highlight-path--sticky {
	stroke-width: 2px;
	stroke: var(--sticky-accent);
}

@keyframes oh-blinking {
	0%,
	100% {
		stroke-opacity: 1;
	}
	50% {
		stroke-opacity: 0;
	}
}

@keyframes oh-highlight {
	0%,
	100% {
		stroke-opacity: 0;
		fill-opacity: 0;
	}
	50% {
		stroke-opacity: 1;
		fill-opacity: 0.4;
	}
}

.disable-pointer-events {
	pointer-events: none;
}

.disable-pointer-events .stencil--easier-to-select {
	pointer-events: none;
}

.disable-pointer-events .stencil__selection-helper {
	pointer-events: none;
}

.stencil.disable-pointer-events {
	/*opacity: 0.25;*/
}

.is-transforming {
	image-rendering: pixelated;
}

/*
	This class makes stencils easier to select by catching pointer events
	on all the painted area of the SVG, even the invisible parts.
	Useful for icons (which may have hollow, unselectable parts).
	Note: Not applied if the stencil is a descendant of a .drag-preview element,
	which has pointer-events:none to enable dropping stencils on stage.
*/
.stencil--easier-to-select {
	pointer-events: painted;
}

.drag-preview .stencil--easier-to-select,
.master-page .stencil--easier-to-select {
	/* Re: https://github.com/Evercoder/new-engine/issues/4552 */
	pointer-events: inherit;
}

.isolated-group-border {
	stroke: var(--normal-stroke);
	stroke-width: 4;
	shape-rendering: crispEdges;
	fill: none;
	pointer-events: none;
	stroke-opacity: 0.25;
}

.isolated-group-border--symbol {
	stroke: var(--symbol-accent);
}

.isolated-group-border--locked {
	stroke: var(--lock-stroke);
}

/* Patches for content editable on Firefox and Safari.
*/

.patch-contenteditable {
	-webkit-user-select: text !important;
	user-select: text !important;
	position: absolute;
	z-index: 1000;
	overflow: hidden;
	transform-origin: 0 0;
}

.patch-contenteditable > div {
	overflow: hidden;
	outline: none;
	box-shadow: var(--normal-stroke) 0px 0px 1px inset;
}

.patch-contenteditable--clean > div {
	box-shadow: none;
}

/*
	When editing the text content of an object,
	don't make the links look like they're clickable
	because they're not.
 */
.state--typing .stencil a,
.state--typing .patch-contenteditable a {
	cursor: inherit;
}

/* Master page layer */
.master-page {
	pointer-events: none;
}

/* enable master page links in viewer */
#canvas-stage.view-mode .master-page a {
	pointer-events: auto;
}

/* =============================================================================
   Various improvements and defaults
   ========================================================================== */

/*
 * Global styles for hyperlinks.
 */

a {
	color: var(--link-color);
	text-decoration: none;
}

a:focus {
	outline: 0;
}

a:hover,
a:active {
	outline: 0;
	text-decoration: underline;
	cursor: pointer;
}

/*
 * Setting global font family, size and color.
 */

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 13px;
}

/*
 * Bold and italic.
 */

b,
strong {
	font-weight: bold;
}

i,
em {
	font-style: italic;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */

pre {
	white-space: pre;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

/* =============================================================================
   Clearfix
   ========================================================================== */

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: ' ';
	clear: both;
	height: 0;
}
/* IE6 IE7 relics
* html .clearfix {
	zoom: 1;
} 
*:first-child + html .clearfix {
	zoom: 1;
} 
*/

/* =============================================================================
   Generic styles
   ========================================================================== */

html,
body {
	height: 100%;
	width: 100%;
	font-size: 16px;
}

body {
	overflow: hidden;

	/* 
		Prevent browsers from navigating away 
		when scrolling at the edges of the page.
	*/
	overscroll-behavior: none;

	/*
		Disable double-tap-to-zoom behavior.
		It makes clicks respond faster on mobile devices.
	 */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent; /* test on mobile safari */

	/*
		For Chinese/Japanese/Korean languages,
		don't break in the middle of the word.
		For non-CJK languages it behaves as `normal`.
	 */
	word-break: keep-all;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500;
	margin: 1em 0 0.5em 0;
}

h1 {
	font-size: 1.5em;
}

h2 {
	font-size: 1.4em;
}

h3 {
	font-size: 1.2em;
}

h4,
h5,
h6 {
	font-size: 1em;
}

p {
	margin: 0.5em 0;
}

hr {
	border: 0;
	color: var(--editor-border-color);
	background: var(--editor-border-color);
	height: 1px;
	padding: 0;
	margin: 1em 0;
}

[hidden] {
	display: none !important;
}

.ellipsis {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 10px 0 0;
}

.resp-img {
	max-width: 100%;
	height: auto;
	display: block;
}

.pull-left {
	float: left;
}

.pull-right {
	float: right;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

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

.scroll-vertical {
	overflow-y: auto;
}

.full-width {
	width: 100%;
}

.drop-shadow {
	box-shadow: var(--mq-box-shadow-md);
}

/* Text selection highlight color */
::selection {
	background: var(--text-selection);
}

/* Addresses textarea overflow and vertical align in all browsers. */

textarea {
	overflow: auto;
	vertical-align: top;
	resize: vertical;
}

label input[type='checkbox'],
label input[type='radio'] {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	accent-color: var(--input-accent-color);
}

input[type='text'],
input[type='password'],
input[type='number'],
input[type='email'],
select,
textarea {
	font-size: 1em;
	box-sizing: border-box;
	border: 1px solid var(--input-border-color);
	background: var(--input-bg);
	/*border:none;*/
	/*background: #ecf0f1;*/
	/*color: #7f8c8d;*/
	/*font-weight: bold;*/
	outline: none;
	padding: 0.5em;
	/*box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.15) inset;*/
	/*box-shadow: 0px 1px 1px rgba(0,0,0,0.1);*/
	color: var(--input-text-color);
	transition: border-color 0.1s;
	border-radius: 0.25em;
}

textarea {
	height: auto;
}

.textarea-compact {
	height: 40px;
	transition: all 0.1s ease-in-out;
}

.textarea-medium {
	height: 80px;
	transition: all 0.1s ease-in-out;
}

.textarea-big {
	height: 160px;
	transition: all 0.1s ease-in-out;
}

input[type='text']:hover,
input[type='number']:hover,
input[type='email']:hover,
input[type='password']:hover,
textarea:hover {
	border-color: var(--input-border-hover-color);
}

input[type='text']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='password']:focus,
textarea:focus {
	/*box-shadow: 0 0 0 1px #006ce5 inset, 0 0 3px 0 #006ce5;*/
	border-color: var(--editor-active-color);
	/*border-color: #94A9C0;*/
}

input[disabled],
select[disabled],
textarea[disabled] {
	cursor: not-allowed;
	color: #7f8c8d;
	background: #ecf0f1;
	border-color: transparent;
}

input.has-error,
select.has-error,
textarea.has-error {
	border-color: #a94442;
}

select {
	padding: 0.25em;
	border: 1px solid #aaa;
	margin: 0;
	vertical-align: top;
}

input::placeholder,
textarea::placeholder {
	color: var(--editor-text-muted-color);
	opacity: 1; /* Firefox */
}
/*
::-webkit-input-placeholder {
	color: #999 !important;
}
:-moz-placeholder {
	color: #999 !important;
}
*/
html[data-os='windows'] .scrollable,
html[data-os='windows'] .contextmenu--scrollable,
.mq-scroll {
	scrollbar-color: var(--input-border-color);
	scrollbar-width: thin;
	/*
	perspective: 1px;
	-webkit-perspective: 1px; 
	*/
}

html[data-os='windows'] .scrollable::-webkit-scrollbar,
html[data-os='windows'] .contextmenu--scrollable::-webkit-scrollbar,
.mq-scroll::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

html[data-os='windows'] .scrollable::-webkit-scrollbar-track,
html[data-os='windows'] .contextmenu--scrollable::-webkit-scrollbar-track,
.mq-scroll::-webkit-scrollbar-track,
html[data-os='windows'] .scrollable::-webkit-scrollbar-corner,
.mq-scroll::-webkit-scrollbar-corner {
	background: transparent;
}

html[data-os='windows'] .scrollable::-webkit-scrollbar-thumb,
html[data-os='windows'] .contextmenu--scrollable::-webkit-scrollbar-thumb,
.mq-scroll::-webkit-scrollbar-thumb {
	background-color: var(--input-border-color);
	border-radius: 3px;
	border: 1px solid transparent;
	box-sizing: content-box;
}

/* --------------------------------- */

/* doamne-ajută! FIXME if necessary */
[disabled] {
	opacity: 0.4 !important;
	pointer-events: none;
}
/*Hides the focus rect for content editable*/
[contenteditable='true'] {
	outline: none;
}
.editing foreignObject [contenteditable='true'] {
	box-shadow: #006ce5 0px 0px 1px inset;
}

.svg-inject {
	display: none;
}

/* SVG Styles */

.blur {
	pointer-events: none;
}
.connector-selected {
	stroke: #cce2fa;
}
.connector-selected.locked {
	stroke: #ffd2cc;
}

.connector-snap {
	fill: rgba(20, 100, 246, 0.25);
	cursor: crosshair;
}

.connector-snap:hover,
.connector-snap.active {
	stroke: var(--normal-stroke);
}

/*
	Drawing state
	-----------------------------------
 */

.drawing,
.drawing .stencil {
	cursor: crosshair;
}

/* Viewer */
.mq-link-ghost {
	display: block;
	z-index: 999;
	position: absolute;
	/*transform-origin: 0 0;*/
}

.mq-link-ghost.ellipse {
	border-radius: 50%;
	overflow: hidden;
}

.mq-link-ghost span {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.3s;
	background: rgba(102, 255, 51, 0.4);
	box-shadow: 0 0 0 1px rgba(57, 230, 0, 0.75);
}

.mq-link-ghost.hover span {
	opacity: 1;
}

.stencil .link-ref {
	text-align: center;
	/*display:table-cell;*/
	display: none;
	white-space: nowrap;
	vertical-align: middle;
	color: var(--hotspot-border-color);
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}

.stencil div,
.stencil-grouped div {
	box-sizing: border-box;
}

.stencil table,
.stencil-grouped table {
	border-collapse: collapse;
	border-spacing: 0;
}

.stencil table p {
	display: inline;
}

/* <p> mean new lines in the grid cell content  */
.grid__table td p {
	display: block;
}

.crispLines {
	text-rendering: optimizeSpeed;
}

line {
	shape-rendering: crispEdges;
}

.stencil {
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
}

.stencil,
.patch-contenteditable {
	/*
		Disable ligatures by default.
		See: https://github.com/Evercoder/new-engine/issues/6937
	 */
	font-variant-ligatures: none;

	/*
		For Chinese/Japanese/Korean languages,
		don't break in the middle of the word.
		For non-CJK languages it behaves as `normal`.
	 */
	word-break: keep-all;
}

.stencil.editing {
	-webkit-user-select: auto;
	user-select: auto;
}

.textselect-mode,
.textselect-mode .stencil {
	-webkit-user-select: text;
	user-select: text;
	cursor: auto;
}

.textselect-mode .mq-link-ghost {
	pointer-events: none;
}

.stencil p,
.patch-contenteditable p {
	margin: 0;
}

.stencil [contenteditable='true'],
.patch-contenteditable [contenteditable='true'] {
	cursor: text;
}

.stencil ul:not([data-checked]),
.patch-contenteditable ul:not([data-checked]) {
	list-style-type: disc;
	margin: 1em 0;
	padding-inline-start: 2.5em;
}

.stencil ol,
.patch-contenteditable ol {
	margin: 1em 0;
	padding-inline-start: 2.5em;
	list-style: decimal;
}

.stencil ul:first-child:not([data-checked]),
.patch-contenteditable ul:first-child:not([data-checked]),
.stencil ol:first-child,
.patch-contenteditable ol:first-child {
	margin-top: 0;
}

.stencil ul:last-child:not([data-checked]),
.patch-contenteditable ul:last-child:not([data-checked]),
.stencil ol:last-child,
.patch-contenteditable ol:last-child {
	margin-bottom: 0;
}

.stencil ul[data-checked],
.patch-contenteditable ul[data-checked] {
	--check-size: 15px;
	--check-margin: 6px;

	list-style: none;

	/*
		Regardless of the user's choice of text alignment
		for checkbox lists, align them to the start of the 
		inline axis (ie. left for LTR and right for RTL)
	 */
	text-align: start !important;

	/*
		Create space at the start of the rows 
		to fit the checkmarks.
	 */
	padding-inline-start: calc(var(--check-size) + var(--check-margin));
}

.stencil ul[data-checked] > li::before,
.patch-contenteditable ul[data-checked] > li::before {
	/*
		Use a negative margin to pull the checkmark
		out of the <li>s bounding rectangle. 

		This allows proper alignment of multi-row text
		and enables us to only toggle the checkmark on and off
		when clicking on the ::before pseudo-element.

		See: https://github.com/Evercoder/quill/commit/36f23aa60233e
	 */
	margin-inline-start: calc(-1 * (var(--check-margin) + var(--check-size)));
	margin-inline-end: var(--check-margin);

	/*
		Create a bit of vertical space around the checkmarks,
		so that they don't get squished together 
		when they're the tallest things in the list item
		(eg. when the font size is very small)
	 */
	padding: calc(0.5 * var(--check-margin)) 0;

	/*
		Set up a vertically-centered square box 
		for the checkmark to sit in as a background...
	 */
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: var(--check-size);
	height: var(--check-size);

	/*
		...making sure it's positioned & scaled correctly.
	 */
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

.stencil ul[data-checked='true'] > li::before,
.patch-contenteditable ul[data-checked='true'] > li::before {
	background-image: url("data:image/svg+xml;utf8,<svg version=%271.1%27 width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 15 15%27><path fill=%27%23006ce5%27 d=%27M7.5,0C3.4,0,0,3.4,0,7.5S3.4,15,7.5,15S15,11.6,15,7.5S11.6,0,7.5,0z M11.2,6.2L7,10.4 c-0.3,0.3-0.8,0.3-1.1,0L3.8,8.3C3.5,8,3.5,7.5,3.8,7.2c0.3-0.3,0.8-0.3,1.1,0l1.6,1.6l3.7-3.7c0.3-0.3,0.8-0.3,1.1,0 C11.5,5.4,11.5,5.9,11.2,6.2z%27/></svg>");
}

.stencil ul[data-checked='false'] > li::before,
.patch-contenteditable ul[data-checked='false'] > li::before {
	background-image: url("data:image/svg+xml;utf8,<svg version=%271.1%27 width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 15 15%27 ><path fill=%27%23565656%27 d=%27M7.5,1C11.1,1,14,3.9,14,7.5S11.1,14,7.5,14S1,11.1,1,7.5S3.9,1,7.5,1 M7.5,0C3.4,0,0,3.4,0,7.5S3.4,15,7.5,15 S15,11.6,15,7.5S11.6,0,7.5,0L7.5,0z%27/></svg>");
}

.stencil h1,
.stencil h2,
.stencil h3,
.stencil h4,
.stencil h5,
.stencil h6,
.stencil b,
.stencil strong,
.patch-contenteditable h1,
.patch-contenteditable h2,
.patch-contenteditable h3,
.patch-contenteditable h4,
.patch-contenteditable h5,
.patch-contenteditable h6,
.patch-contenteditable b,
.patch-contenteditable strong {
	font-weight: bold;
}

.stencil h1,
.patch-contenteditable h1 {
	font-size: 2em;
	margin: 0 0 0 0;
}
.stencil h2,
.patch-contenteditable h2 {
	font-size: 1.5em;
	margin: 0.75em 0;
}
.stencil h3,
.patch-contenteditable h3 {
	font-size: 1.17em;
	margin: 0.83em 0;
}

.hide-hotspots .tmplsvg-hotspot {
	visibility: hidden;
	pointer-events: none;
}

.line {
	overflow: visible !important;
}

/* Fix for #729 / Gecko */

svg {
	overflow: visible;
}
/*
This fixes the abysmal drag performance on Chrome when zoomed in (at least on Retina)
reference: https://developer.mozilla.org/en/docs/Web/CSS/image-rendering
 */
svg image {
	/*image-rendering:-webkit-optimize-contrast;*/
	/*image-rendering:auto;*/
}

foreignObject {
	overflow: hidden;
}

.overflowHidden {
	overflow: hidden;
}

.hit-helper {
	fill: none;
	stroke: none;
	pointer-events: fill;
}

.drag-preview .hit-helper {
	pointer-events: none;
}

.stencil-hidden {
	visibility: hidden;
	pointer-events: none;
}

.stencil-hidden .stencil--easier-to-select {
	pointer-events: none;
}

.canvas--force-redraw {
	display: none !important;
}

/*
	State-dependent cursors
	-----------------------

	When we change between states on the canvas,
	the .canvas-svg element gets its classes toggled.

	DrawingState, in particular, adds a data attribute
	with the currently selected drawing tool.
 */

/*
	In states that allow quick-editing of objects' text,
	make this more obvious by changing the cursor to a caret.
 */
.state--drawing[data-drawingtool='text'] .editable-fo,
.state--typing .editable-fo {
	cursor: text;
}

/*
	Flexbox Layout for HTML inside SVG (via foreignObject)
	------------------------------------------------------
*/

/* Basic elements */

.svglayout {
	display: flex;
}

.svglayout__item {
}

/* Layout modifiers */

.svglayout--hbox {
	overflow-x: hidden;
}
.svglayout--vbox {
}
.svglayout--reversed {
}

.svglayout--spaced {
	justify-content: space-around;
}

.stencil li,
.patch-contenteditable li {
	margin-inline-start: calc(var(--indent-level, 0) * 2em);
}

/* =============================================================================
   Inspector
   ========================================================================== */

.inspector-info {
	background: var(--input-bg);
	padding: 0.75em 1em;
	border-radius: calc(var(--inspector-border-radius) * 2);
	display: flex;
	justify-content: stretch;
	align-items: center;
}

.inspector-info p {
	color: var(--editor-text-muted-color);
	font-size: 12px;
	margin: 0;
	line-height: 1.3;
}

.inspector-info p strong {
	color: var(--editor-text-color);
	display: block;
	padding-bottom: 0.25em;
}

.unselectable {
	-webkit-user-select: none;
	user-select: none;
}

.selectable {
	-webkit-user-select: text;
	user-select: text;
}

.inspector {
	/*font-size: 0.9em;*/
	font-size: 13px;
}

.inspector .mq-icon,
.inspector .mq-input .mq-icon,
.mq-input .mq-icon {
	width: var(--inspector-icon-size);
	height: var(--inspector-icon-size);
	fill: var(--input-icon-color);
	flex: none; /* Safari being dumb */
}

.inspector .connector-input-icon-label {
	width: 3.25em !important;
	height: 1.2em !important;
}

.inspector .connector-input-icon-item-label {
	width: 3.5em !important;
	height: 1.5em !important;
}

.mq-input-menu li:hover .mq-icon {
	fill: var(--editor-active-bg);
}

.highlighted {
	color: var(--editor-active-bg);
	background: var(--editor-active-color);
}

#inspector-align-panel {
	padding: 1px 5px;
	height: 2em;
	font-size: 13px;
	border-bottom: 1px solid var(--editor-border-color);
	opacity: 1;
	position: relative;
	z-index: 1;
}

#inspector-align-panel .mq-icon {
	width: var(--inspector-icon-size);
	height: var(--inspector-icon-size);
}

.inspector .mq-input {
	/*margin: 0 0.5em;*/
	display: flex;
	height: 2em;
}

.mq-input input,
.mq-input-value {
	width: 100%;
	font-size: 13px;
	color: var(--input-text-color);
}

.mq-input:hover .mq-input-value {
	border-color: var(--input-border-hover-color);
}

.mq-input-field .mq-input-value:focus {
	border-color: var(--editor-active-color);
}

.mq-input .mq-input-field .mq-input-value--lg {
	font-size: 15px;
	padding: 1.2em 0.5em;
	border-radius: calc(var(--inspector-border-radius) * 1.5);
}

.mq-input .mq-input-field .mq-input-icon--lg {
	left: 0.35em;
	font-size: 16px;
}

.inspector-panel {
	display: none;
}

.inspector-panel-mini .inspector-btn {
	padding: 0.39em;
}

.inspector-panel-active {
	display: block;
	border-bottom: 1px solid var(--editor-border-color);
}
.inspector-panel-active:last-of-type {
	border-bottom: 1px solid transparent;
}

.inspector-panel-content {
	display: block;
	padding: 2px 0 calc(0.5em - 2px) 0;
}

.inspector-panel-collapsed {
	border-bottom: none;
}

.inspector-panel-collapsed .inspector-panel-content {
	display: none;
}

.inspector-panel-collapsed {
	background: var(--editor-menu-hover-color);
	color: var(--editor-text-muted-color);
	position: relative;
}

.inspector-panel-heading-bar .expand-icon,
.inspector-panel-heading .expand-icon {
	display: none;
}

.inspector-panel-collapsed .expand-icon {
	display: flex;
	position: absolute;
	top: 8px;
	right: 11px;
}

.inspector-panel-collapsed .inspector-panel-heading:hover {
	background: var(--editor-menu-bg);
	color: var(--editor-text-color);
}

.inspector-panel-collapsed .inspector__heading__copy {
	display: none;
}

.inspector-panel-content-section {
	margin: 0.5em 0;
}

.inspector-panel-content-section--outline {
	margin: 0.4em 0;
}

.inspector-panel-content-section--outline div:last-child {
	margin-right: 0.25em;
}

.inspector-panel-content-section--centered {
	align-items: center !important;
}

.inspector-panel-content-section--separated {
	padding-top: 0.4em;
}

.inspector-panel-content-section--separated .inspector__checkbox-input {
	margin-right: 0.35em;
}

.inspector-panel-heading-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.inspector-panel-heading {
	padding: 8px 3em 0em 1em;
	margin: 0;
	background: var(--editor-bg);
	color: var(--editor-text-color);
	flex-grow: 1;
	/*text-transform: uppercase;
	font-size: 10px;*/
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	box-sizing: border-box;
}

.inspector-panel-collapsed .inspector-panel-heading {
	padding: 8px 3em 8px 1em;
	border-bottom: 1px solid var(--editor-border-color);
}

.inspector-subpanel-heading {
	padding: 0.5em 2em;
	margin: 0;
	border-bottom: 1px solid #aaa;
	background: #ddd;
	color: #4a4a4a;
	text-transform: uppercase;
	font-size: 0.75em;
	cursor: pointer;
}
.inspector-subpanel-expanded {
	border-bottom: 1px solid var(--editor-border-color);
	display: block;
}
.inspector-subpanel-collapsed {
	display: none;
}
.inspector-subpanel-top {
	border-top: 1px solid var(--editor-border-color);
}
.inspector-btn {
	/*width: 100%;*/
	vertical-align: middle;
	text-decoration: none;
	padding: 0.285em 0.45em;
	height: 2em;
	/*margin: 0 0.5em;*/
	color: var(--editor-icon-color);
	background: var(--editor-bg);
	border-radius: var(--inspector-border-radius);
	border: 1px solid var(--editor-border-color);
	text-align: center;
	white-space: nowrap;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.1s var(--mq-transition);
}
.interactivity-small-btn {
	vertical-align: middle;
	text-decoration: none;
	padding: 2px 3px;
	padding-top: 3px;
	text-align: center;
	white-space: nowrap;
	color: var(--editor-text-color);
}

.interactivity-small-btn svg {
	display: inline-block;
}

.inspector-interactivity-options .interactivity-small-btn:hover svg {
	fill: var(--interaction-accent);
}

.inspector__heading__copy {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	padding-top: 5px;
	padding-right: 9px;
	gap: 4px;
}

.inspector__heading__copy .inspector-btn {
	width: 20px;
	padding: 0;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--editor-text-color);
	margin-top: 1px;
	margin-bottom: -1px;
}

.inspector__heading__copy .inspector-btn .mq-icon {
	width: 14px;
	height: 14px;
	color: inherit;
	fill: currentColor;
	opacity: 0.6;
}

.inspector__heading__copy .inspector-btn:hover .mq-icon {
	opacity: 1;
}

.inspector-interactivity-options .interactivity-small-btn-toggled {
	background: var(--interaction-accent);
	fill: var(--mq-white);
	border-radius: 2px;
}
.inspector-interactivity-options .interactivity-small-btn-toggled svg,
.inspector-interactivity-options .interactivity-small-btn-toggled:hover svg {
	fill: var(--mq-white);
}

/* make page selection dropdown wider */
.interactivity-page-selection .mq-input-menu {
	width: 202px;
}

.inspector-btn-group {
	display: flex;
	justify-content: stretch;
	align-items: center;
}

.inspector-btn-group:after {
	clear: both;
	display: block;
	content: '';
	height: 0;
	visibility: hidden;
}

.inspector-btn-group .inspector-btn {
	flex-grow: 1;
	border-radius: 0;
	position: relative;
	margin-left: -1px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inspector-btn-group.btn-2 .inspector-btn {
	width: 50%;
}

.inspector-btn-group.btn-3 .inspector-btn {
	width: 33%;
}

.inspector-btn-group.btn-4 .inspector-btn {
	width: 25%;
}

.inspector-btn-group.btn-5 .inspector-btn {
	width: 20%;
}

.inspector-btn-group.btn-6 .inspector-btn {
	width: 16.66%;
}

.inspector-btn-group.btn-7 .inspector-btn {
	width: 14.5%;
}

.inspector-btn-group .inspector-btn.active {
	z-index: 2; /* bring it forward so that we can have different color border */
}

.inspector-btn-group .inspector-btn:first-child {
	border-radius: var(--inspector-border-radius) 0 0 var(--inspector-border-radius);
	margin-left: 0;
}

.inspector-btn-group .inspector-btn:last-child {
	border-radius: 0 var(--inspector-border-radius) var(--inspector-border-radius) 0;
}

.inspector-btn-lock-ratio {
	padding: 0.2em 0;
	left: 6px;
	flex-basis: 24px !important;
}

.inspector-btn.active,
.inspector-btn.active:hover {
	border-color: var(--input-border-hover-color) !important;
	background: var(--editor-active-bg);
	color: var(--editor-active-color);
}

.inspector-btn.active .mq-icon {
	color: var(--editor-active-color);
	fill: var(--editor-active-color);
}

.inspector-btn:hover {
	text-decoration: none;
	background: var(--editor-hover-color);
}

.inspector-btn .mq-icon {
	color: var(--editor-icon-color);
	fill: var(--editor-icon-color);
}

.inspector-btn-transparent {
	padding-top: 0;
	padding-bottom: 0;
	border: 0;
	background: none;
	box-shadow: none;
	/*width: 4em;*/
	text-align: center;
}

.inspector-btn-transparent.active {
	background: var(--editor-semiselection-bg);
}

.inspector-btn-transparent .mq-icon {
	color: var(--editor-icon-color);
	fill: var(--editor-icon-color);
}

.inspector-btn-transparent.active .mq-icon {
	color: var(--editor-active-color);
	fill: var(--editor-active-color);
}

.inspector-btn-inverse {
	vertical-align: middle;
	text-decoration: none;
	padding: 0.5em;
	border-radius: 0.3em;
	border: 1px solid #888;
	text-align: center;
	white-space: nowrap;
	background: #99999e;
	color: #fff;
	font-size: 0.75em;
	text-transform: uppercase;
}

.inspector-btn-inverse:hover {
	text-decoration: none;
	background: #aaa;
}

.inspector-btn-blue {
	vertical-align: middle;
	text-decoration: none;
	padding: 0.3em;
	display: inline-block;
	width: 100%;
	border-radius: 0.3em;
	border: 1px solid #0d47a1;
	text-align: center;
	white-space: nowrap;
	background: #006ce5;
	color: #fff;
}

.inspector-btn-target {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding-top: 1px;
	text-align: center;
	border: 1px solid var(--interaction-accent);
	background: var(--interaction-accent);
	color: var(--mq-white);
	border-radius: var(--inspector-border-radius);
	height: 100%;
	width: 100%;
}

.inspector-btn-target:hover,
.inspector-btn-target:focus {
	border-color: var(--interaction-accent--dark);
}

.inspector-btn-target.active {
	background: var(--mq-orange-500);
	border: 1px solid var(--mq-orange-500);
	color: var(--mq-white);
}

.inspector .inspector-btn-target .mq-icon {
	fill: currentColor;
}

.inspector-target-input {
	cursor: pointer;
}

.inspector-panel-inner-frame {
	text-overflow: ellipsis;
	font-size: 0.9em;
	padding: 0.2em;
}

.inspector-panel-inner-frame > span {
	color: #9e9e9e;
	margin-bottom: 0.5em;
}

.inspector-panel-inner-frame > div {
	margin-bottom: 0.5em;
}
.inspector-btn-transparent-blue {
	vertical-align: middle;
	text-decoration: none;
	padding: 0.3em;
	border: 0;
	text-align: center;
	white-space: nowrap;
	color: #006ce5;
	font-size: 1em;
}

.inspector-btn-transparent-blue:hover {
	text-decoration: none;
	color: #006ce5;
}

.inspector-btn-blue:hover {
	text-decoration: none;
	background: #0d47a1;
}

.inspector-btn-outline {
	padding: 0 0.45em;
	margin-left: 0.25em;
	width: 1em;
}

.inspector-btn-lock-radius {
	padding: 0 0.5em;
	width: 1em;
	z-index: 2;
	position: relative;
	margin: -1.25em auto -1.25em auto;
}

.inspector-btn.hotspots-btn {
	color: #006ce5;
	padding: 0.3em 0.1em;
}
.inspector-el {
	box-sizing: border-box;
	display: inline-block;
}

.el-1-1 {
	width: 100%;
}

.inspector .droplist {
	margin: 0 0.5em;
	vertical-align: middle;
}

.inspector .droplist-input:focus {
	font-family: inherit !important;
}

.inspector .droplist-btn {
	/*color: #333;*/
	/*border-radius: 0 0.25em 0.25em 0;*/
	/*border: 1px solid #c0c0c0;*/
	/*background: linear-gradient(top, #ffffff 0%, #f3f3f3 1px, #e0e0e0 100%);*/

	/*display: inline-block;
	border: 1px solid #b8b8b8;
	box-sizing: border-box;
	*/ /*border-left: none;*/ /*
	border-radius: 0 0.15em 0.15em 0;
	padding: 0 1em;
	text-decoration: none;
	color: inherit;
	background: #fff;
	z-index: 2;*/
}

.inspector .droplist-menu {
	/*border-radius: 0.25em;*/
	/*border-color: #c0c0c0;*/
}

.inspector .droplist-menu.bottom {
	bottom: 100%;
	top: auto;
}

.inspector-color {
	display: inline-block;
	width: 2em;
	height: 2em;
	border-radius: 0.2em;
	vertical-align: middle;
}

.inspector-color-full {
	/*width: 8em;*/
}

.inspector-nowrap {
	white-space: nowrap;
	display: inline-block;
}

.inspector-label {
	flex-basis: 10%;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: 500;
	color: var(--editor-text-muted-color);
	padding-left: 0.4em;
}

.inspector-label.inspector-label--nogrow {
	flex-grow: 0;
	margin-right: 1em;
	min-width: 6em;
	flex-basis: 6em;
}

.flex {
	display: flex;
}

.flex-space-between {
	justify-content: space-between;
	align-items: stretch;
}

.flex-space-around {
	justify-content: space-around;
	align-items: stretch;
}

.flex-col-1 {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.flex-col-1 > * {
	flex-grow: 1;
	flex-basis: 0;
	margin-left: 0.5em;
}

.flex-col-1 > :first-child {
	margin-left: 1em;
}

.flex-col-1 > :last-child {
	/*margin-left: 0;*/
	margin-right: 1em;
}

.flex-col-1 :nth-child(1) {
	/*flex-grow: 1;*/
}

.flex-col-1-inner {
	display: flex;
}

.flex-col-1-inner > * {
	flex-grow: 1;
	flex-basis: 0;
}

.flex-col-1-inner > :first-child {
	/*margin-left: 0.5em;*/
	margin-right: 0.5em;
}

.flex-col-1-inner > :last-child {
	margin-right: 0em;
}

.flex-no-grow {
	flex-grow: 0;
	flex-basis: 1.5em;
	margin-left: 0;
	/*margin-right: -6px;*/
	padding-left: 0;
	padding-right: 0;
}

.flex-col-2-1 {
	display: flex;
}

.flex-col-2-1 > * {
	flex-grow: 1;
	flex-basis: 0;
}

.flex-col-2-1 :nth-child(1) {
	flex-grow: 2;
}

.flex-col-2 {
	flex-grow: 2;
}

.flex-col-3 {
	flex-grow: 2;
	gap: 1em;
}

.flex-col-3 > * {
	flex-grow: 1;
	flex-basis: 0;
}

.flex-exp {
	display: flex;
}

.flex-exp > * {
	flex-grow: 1;
	flex-basis: 0;
}

.inspector-inline-link-btn {
	font-size: 0.9em;
	line-height: 2;
}

.inspector-alert-warning {
	color: #8a6d3b;
	background-color: #fcf8e3;
	border-color: #faebcc;
	border-radius: 0.3em;
	border-width: 1px;
	border-style: solid;
	font-size: 0.9em;
	padding: 0.6em;
}

.inspector-alert-success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
	border-radius: 0.3em;
	border-style: solid;
	border-width: 1px;
	font-size: 0.9em;
	padding: 0.6em;
}

#right-sidebar .inspector {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: auto;
	transform: translateZ(0);
}

.inspector-styles {
	top: 29px !important;
	/* overflow-x -> Useful for any translation-related mishaps (long buttons that trigger overflow) */
	overflow-x: hidden;
}

.inspector-group--centered .inspector-label-wrapper {
	text-align: center;
	padding: 0.3em 0;
}
.inspector-group--centered .inspector-label {
	flex-basis: 100%;
	padding: 0;
}
.inspector-advanced-text-separator {
	position: relative;
	border-top: 1px solid var(--editor-border-color);
	margin: 1em 0;
}
.inspector-advanced-text-separator:after,
.inspector-advanced-text-separator:before {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}
.inspector-advanced-text-separator:after {
	bottom: -1px;
	right: 34px;
	border-color: transparent transparent var(--editor-bg) transparent;
	border-width: 7px;
}

.inspector-advanced-text-separator:before {
	bottom: 0px;
	right: 33px;
	border-color: transparent transparent var(--editor-border-color) transparent;
	border-width: 8px;
}

.inspector-advanced-text-case a {
	padding-left: 4px;
	padding-right: 4px;
}

.inspector-advanced-letter-spacing {
	flex: none;
	width: 56px;
}

.inspector-btn-group.btn-2.inspector-rich-text-buttons {
	margin-right: 0;
}

.inspector-rich-text-buttons .mq-icon {
	width: 1.05em;
	height: 1.05em;
	padding: 0.1em 0;
}

.inspector-rich-text-buttons .inspector-btn {
	height: 1.7em;
}

input[type='text'].inspector-instance-name {
	width: 100%;
	background: transparent;
	border: none !important;
	border-radius: 0 !important;
	color: var(--editor-active-color);
	padding-left: 0 !important;
	font-weight: 500;
	/*emulates a prettier dotted border via https://stackoverflow.com/questions/6250394/how-to-increase-space-between-dotted-border-dots */
	background-image: linear-gradient(
		to right,
		var(--editor-text-muted-color) 40%,
		rgba(255, 255, 255, 0) 20%
	);
	background-position: bottom;
	background-size: 3px 1px;
	background-repeat: repeat-x;
}

.inspector-instance-name--symbol {
	color: var(--symbol-text-color) !important;
}

.inspector-instance-name[disabled] {
	background: transparent !important;
	color: var(--editor-text-muted-color) !important;
}

input[type='text'].inspector-instance-name:focus {
	background-image: linear-gradient(
		to right,
		var(--editor-text-color) 40%,
		rgba(255, 255, 255, 0) 20%
	);
}
input[type='text'].inspector-instance-name:hover {
}

/*---------------- */

.mq-input {
	/*display: flex;*/
	position: relative;
	vertical-align: middle;
}

.mq-input .mq-icon {
	width: 1em;
	height: 1em;
}

.mq-input .mq-input-field,
.mq-input .mq-input-btn {
	/*TODO Check for regressions (Emil) */
	/*display: table-cell;*/
	/*display: flex;*/
	width: 100%;
}

.mq-input .mq-input-field input,
.mq-input .mq-input-field .mq-input-value {
	/*height: 2.4em; */ /*Safari sux balls*/
	height: 2em;
	margin: 0;
	display: flex;
	align-items: center;
}

.mq-input-field {
	position: relative;
	color: var(--input-text-color);
	display: inline-block;
	/*z-index: 2;*/
}

.mq-input-field input,
.mq-input-field .mq-input-value {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	/*width: 7em;*/
	box-sizing: border-box;
	border: 1px solid var(--input-border-color);
	line-height: inherit;
	font-size: 13px;
	padding: 0.2em 0.4em;
	/* box-shadow: 0px 1px 0px 0px #ebebeb inset; */
	border-radius: var(--inspector-border-radius);
	color: inherit;
	background: var(--input-bg);
	display: inline-block;
	transition: border-color 0.2s var(--mq-transition);
}

.mq-input-has-customlabel {
	padding-left: 60px !important;
	width: 100%;
}
.mq-input-has-icon .mq-input-field input,
.mq-input-has-icon .mq-input-field .mq-input-value {
	padding-left: 1.7em;
}

.mq-input-has-unit .mq-input-field input,
.mq-input-has-unit .mq-input-field .mq-input-value {
	padding-right: 1.75em;
}

.mq-input-has-unit.mq-input-has-menu-items .mq-input-unit {
	right: 2.3em;
}

.mq-input-has-unit.mq-input-has-menu-items .mq-input-field input,
.mq-input-has-unit.mq-input-has-menu-items .mq-input-field .mq-input-value {
	padding-right: 3.5em;
}

.mq-input-has-menu-items .mq-input-field .mq-input-value {
	padding-right: 1.5em;
}

/* Lighter color for placeholder values */
.mq-input-has-placeholder .mq-input-value {
	color: #999;
}

/*
	Add VA middle for ellipsis because ellipsis adds overflow hidden
	and .mq-input-value is an inline block
	CSS 2.1 Specs:
		The baseline of an 'inline-block' is the baseline of 
		its last line box in the normal flow, unless it has 
		either no in-flow line boxes or if its 'overflow' property 
		has a computed value other than 'visible', in which case 
		the baseline is the bottom margin edge.
*/
.mq-input-value.ellipsis {
	vertical-align: middle;
}

.mq-input-icon {
	position: absolute;
	left: 0.25em;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 2;
	display: flex;
}

.input-label-svg {
	height: 100.1%;
	width: 68px;
	box-sizing: border-box;
	position: absolute;
	text-align: left;
	top: 0;
	left: 0;
}
.interactivity-input-label {
	color: var(--editor-text-muted-color);
	box-sizing: border-box;
	font-size: 9px;
	width: 50px;
	padding: 0.75em;
	text-transform: uppercase;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.interactivity-event-header {
	display: block;
	color: var(--editor-text-color);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.7em;
	padding: 0.5em 0.5em;
}

.interactivity-target-input {
	max-width: 75%;
}

.interactivity-target-input .mq-input-value {
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 2em;
}

.interactivity-target-input .mq-input-menu li div {
	overflow-wrap: break-word;
	word-break: break-word;
}

.inspector-panel-inner-frame {
}

.interactivity-checkbox {
	accent-color: var(--interaction-accent) !important;
}

.inspector-interactivity {
	display: flex;
	color: var(--editor-text-color);
	flex-direction: column;
	padding: 0.5em 0.8em 0.6em;
	margin: 0.75em 1em;
	background: var(--input-bg);
	box-shadow: var(--mq-box-shadow-sm);
	border-radius: calc(var(--inspector-border-radius) * 1.5);
}

.inspector-interactivity:last-child {
	margin-bottom: 1.25em;
}

.inspector-interactivity.interactivity-update-highlight {
	background-color: var(--interaction-bg);
	transition: background-color 0.5s;
}

.inspector-interactivity-event {
	color: var(--editor-text-muted-color);
	display: flex;
	gap: 3px;
	flex-grow: 1;
	font-size: 0.9em;
	align-items: center;
}

.inspector-interactivity .inspector-panel-content-section {
	display: flex;
	margin: 0;
	justify-content: stretch;
	gap: 0.5em;
}

.inspector-interactivity .inspector-panel-content-section--separated {
	padding-bottom: 0.4em;
}

.inspector-interactivity .inspector-panel-content-section .inspector-info {
	padding: 0.25em 0.5em;
}

.inspector-interactivity-title {
	color: var(--editor-text-color);
	align-items: center;
}

.inspector-interactivity-options {
	flex: none;
}

.inspector-interactivity-options svg {
	fill: var(--editor-text-color);
}

.inspector-interactivity .mq-input {
	flex-grow: 1;
	margin: 0.25em 0 0.35em;
	min-width: 0;
}

.inspector-interactivity .interactivity-btn {
	width: 100%;
	background: var(--interaction-accent);
	border-color: var(--interaction-accent);
	color: var(--mq-white);
	margin: 0.3em 0 0.25em;
	padding: 0.4em 1em;
	border-radius: var(--inspector-border-radius);
	height: 30px;
	box-sizing: border-box;
}

.inspector-interactivity .interactivity-btn:hover,
.inspector-interactivity .interactivity-btn:focus {
	background: var(--interaction-accent--dark);
	border-color: var(--interaction-accent--dark);
}

.inspector-interactivity .interactivity-btn[disabled] {
	background: var(--input-border-color);
	border-color: var(--input-border-color);
	color: var(--editor-text-muted-color);
}

.inspector-interactivity .inspector-btn-target {
	flex: none;
	width: 4em;
	margin: 0.25em 0 0.35em;
	height: auto;
	padding-top: 0;
}

.inspector-interactivity .mq-message {
	font-size: 12px;
	padding: 1em;
	margin: 0.5em 0;
}

.inspector-btn--hotspots {
	width: 100%;
	background: var(--input-bg);
	border-color: var(--input-border-color);
	color: var(--interaction-accent);
	margin: 0em 0 0.5em;
	padding: 0.8em 1em;
	font-weight: 600;
	border-radius: calc(var(--inspector-border-radius) * 1.5);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	height: 32px;
	box-sizing: border-box;
}

.inspector-btn--hotspots:hover,
.inspector-btn--hotspots:focus {
	cursor: pointer;
	background: var(--input-bg);
	border-color: var(--interaction-accent);
}

.inspector-btn--hotspots .mq-icon {
	width: 1em;
	fill: var(--interaction-accent);
}

.mq-input-unit {
	position: absolute;
	top: 50%;
	right: 0.6em;
	left: auto;
	transform: translate(0, -50%);
	z-index: 2;
	font-variant: small-caps;
	font-size: 11px;
	color: var(--input-icon-color);
	opacity: 0.5;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.mq-input-icon:last-child {
	right: 0.5em;
	left: auto;
}

.mq-input-btn {
	display: inline-block;
	border: 1px solid var(--inspector-border-radius);
	border-left: none;
	border-radius: 0 0.15em 0.15em 0;
	padding: 0 1em;
	text-decoration: none;
	color: inherit;
	z-index: 2;
	position: relative;
	background: var(--input-bg);
}

.mq-input-menu {
	font-size: 13px;
	padding: 0;
	overflow: auto;
	list-style: none;
	margin: 0;
	top: 100%;
	position: absolute;
	z-index: 3;
	border-top: none;
	left: 0;
	right: 0;
	color: var(--editor-text-color);
	border-radius: calc(var(--inspector-border-radius) * 2);
	background: var(--input-bg);
	box-shadow: var(--mq-box-shadow);
}

.mq-input-menu.bottom {
	top: auto;
	bottom: 100%;
}

.mq-input-menu li {
	display: block;
	padding: 0.5em 1em;
}

.mq-input-menu li:hover {
	background: var(--editor-active-color);
	color: var(--editor-active-bg);
}

.mq-input-menu li.disabled {
	pointer-events: none;
	opacity: 0.5;
}

.mq-input :focus {
	outline: none;
	/*box-shadow: 0px 0px 0px 1px #006ce5 inset;*/
}

.mq-color-input {
	display: block;
	width: 100%;
	height: 2em;
	border: 1px solid var(--input-border-color);
	background: var(--input-bg);
	padding: 3px 3px 3px 1.8em;
	border-radius: var(--inspector-border-radius);
	position: relative;
	box-sizing: border-box;
}

.mq-color-input .mq-color-swatch {
	background-size: 9px 9px;
}

.mq-color-input .mq-icon {
	height: var(--inspector-icon-size);
	width: var(--inspector-icon-size);
}

.mq-color-input--disabled {
	pointer-events: none;
	opacity: 0.5;
}

.mq-color-swatches {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 2px;
}

.mq-color-swatches.project-palette {
	justify-content: flex-start;
	width: auto;
	gap: 5px;
}

.project__palette__selection {
	padding-top: 0 !important;
}

.project__palette__options .inspector__checkbox-label {
	max-width: 62px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.mq-color-swatch {
	flex-grow: 1;
	flex-basis: 0;
	margin-left: 1px;
	width: 1em;
	background-image: var(--mq-checkerboard);
	background-size: 9px 9px;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

.mq-color-swatch:after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: '';
	pointer-events: none;
	border-radius: 2px;
	border: 1px solid #333;
	opacity: 0.2;
	mix-blend-mode: multiply;
}

.mq-color-swatch.project-palette {
	margin: 0 0 5px 0;
	max-width: calc(2em - 8px);
	flex-basis: auto;
}

.mq-color-swatch.project-palette a {
	height: calc(2em - 8px);
}

.mq-color-swatch:first-child {
	margin-left: 0;
}

.mq-color-swatch a {
	display: block;
	height: calc(2em - 8px);
	border-radius: 0px;
}

.mq-color-input--disabled .mq-color-swatch a,
[disabled] .mq-color-swatch a {
	background: var(--input-bg) !important;
}

.input-blue-text {
	color: #006ce5 !important;
}

.btn-spacer {
	/*width: 4em;*/
	/*padding: 0.25em 0.5em;*/
	flex-basis: 24px;
}

.btn-spacer--lg {
	flex-basis: 48px;
}

.mq-modal-span {
	display: flex;
	padding: 0;
	margin: 0 !important;
}

.mq-modal-span.flex-col-1 > :first-child,
.mq-modal-span.flex-col-1 > :last-child {
	margin: 0;
}

.mq-modal-span.mq-message {
	padding: 0.5em;
	border-radius: 4px;
	margin-bottom: 0.5em !important;
}

label .mq-modal-span {
	font-size: 0.7em;
	text-transform: uppercase;
	color: var(--editor-text-muted-color);
}

.mq-modal-label {
	font-weight: bold;
	font-size: 12px;
	color: var(--editor-text-color);
	margin-bottom: 0.3em !important;
	display: inline-block;
}

.mq-modal-span .mq-input,
.mq-modal-span .inspector-btn {
	font-size: 0.9em;
	margin-bottom: 16px !important;
}

.mq-modal-span .inspector__checkbox {
	margin-bottom: 10px;
}

.mq-modal-span .inspector-btn--lg {
	height: 2.5em;
	font-size: 15px;
}

.mq-modal-content .flex-col-1 {
	gap: 10px;
}

.inspector__panel-section.inspector__replace-color {
	padding-top: 0;
}

.inspector__replace-color {
	color: #777;
}

/*
	React Rewrite
	---------------------------------------------------------
*/

.inspector__panel-content {
}

.inspector__panel-section {
	border-bottom: 1px solid var(--editor-border-color);
	padding: 0.5em 1em;
}

.inspector__panel-section:last-child {
	border-bottom: none;
}

.inspector__panel-section-heading {
	font-weight: normal;
	margin: 0 0 0.5em;
	font-size: 12px;
	color: var(--editor-text-muted-color);
}

.inspector__panel-section-content {
	margin: 0.5em 0;
}

.inspector__panel-section input.inspector__checkbox-input {
	display: inline-block;
	margin-right: 0.3em;
}

.inspector__controls {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	gap: 0.5em;
}

.inspector__controls--vertical {
	flex-direction: column;
	overflow: visible;
	gap: 0;
}

.inspector__controls input {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	box-sizing: border-box;
	border: 1px solid var(--input-border-color);
	line-height: inherit;
	font: inherit;
	padding: 0.2em 0.4em;
	border-radius: 0.2em;
	background: var(--input-bg);
	color: var(--input-text-color);
}

.inspector__controls--vertical > * {
	margin-left: 0;
	margin-top: 0.5em;
}

.inspector__controls--vertical > *:first-child {
	margin-top: 0;
}

.inspector__btn {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	padding: 0.1em 0.45em;
	height: 2em;
	vertical-align: middle;
	text-decoration: none;
	color: var(--editor-text-color);
	border-radius: var(--inspector-border-radius);
	border: 1px solid var(--editor-border-color);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
	background: inherit;
	transition: background-color 0.1s var(--mq-transition);
}

.inspector__btn span {
	display: flex;
	justify-content: center;
	align-items: center;
}

.inspector__btn--borderless {
	border: none;
}

.inspector__btn--nogrow {
	flex-grow: 0;
}

.inspector__btn:hover {
	text-decoration: none;
	background: var(--editor-hover-color);
}

.inspector__btn--active,
.inspector__btn.active,
.inspector__btn.active:hover,
.inspector__btn--active:hover {
	border-color: var(--input-border-hover-color);
	background: var(--editor-active-bg);
	color: var(--editor-active-color);
}

.inspector__btn--borderless.active {
	background: var(--editor-semiselection-bg);
}

.inspector__btn--active .mq-icon,
.inspector__btn.active .mq-icon {
	fill: var(--editor-active-color);
	color: var(--editor-active-color);
}

.inspector__btn:focus {
	outline: none;
}

.inspector__btn__group {
	flex: 1;
	display: flex;
	gap: 0;
}

.inspector__btn__group--auto {
	flex: auto;
	min-width: 0;
}

.inspector__btn__group > .inspector__btn:first-child {
	border-radius: var(--inspector-border-radius) 0 0 var(--inspector-border-radius);
	margin-left: 0;
}

.inspector__btn__group > .inspector__btn:last-child {
	border-radius: 0 var(--inspector-border-radius) var(--inspector-border-radius) 0;
}

.inspector__btn__group .inspector__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	/*border: 1px solid var(--editor-menu-border-color);*/
	margin-left: -1px;
	min-width: 0;
	overflow: hidden;
	flex: 1;
	text-overflow: ellipsis;
}

.inspector__a {
	/*text-decoration: underline;
	text-decoration-style: dotted;*/
	-webkit-appearance: none;
	appearance: none;
	color: var(--link-color);
	padding: 0.1em 0;
	margin: 0 0 0.3em;
	border: none;
	background: transparent;
	cursor: pointer;
}

.inspector__a:hover {
	color: var(--link-active-color);
	/*emulates a prettier dotted border via https://stackoverflow.com/questions/6250394/how-to-increase-space-between-dotted-border-dots */
	background-image: linear-gradient(to right, currentColor 40%, rgba(255, 255, 255, 0) 20%);
	background-position: bottom;
	background-size: 2px 1px;
	background-repeat: repeat-x;
	text-decoration: none;
}

.inspector__a--top {
	margin-top: 0.25em;
}

.chart__type {
	margin-top: 0.4em;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
}

.chart__type li.inspector__btn {
	border-radius: var(--inspector-border-radius);
	margin: 0;
	padding: 0;
}

.chart__type li.uix-list__item--selected {
}

.chart__panel {
	padding: 0;
	margin-top: -0.25em;
}

.chart__panel .inspector__panel-section {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: 0;
}

.chart__panel .inspector__panel-section-heading {
	margin-bottom: 0.5em;
}

.chart__panel .inspector__controls > div {
}
.chart__panel .inspector__controls .dropdown__value {
	width: 4em;
}

#inspector-uiuiui-colorpicker-target .must-popup:not(.gradient-colorpicker) {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.inspector__label {
	flex-basis: 10%;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: 500;
	font-weight: normal;
	color: var(--editor-text-muted-color);
}

.inspector__label--nogrow {
	flex-grow: 0;
	margin-right: 1em;
	min-width: 6em;
	flex-basis: 6em;
}

.inspector__colorpicker__chart-styles {
	background: var(--editor-bg);
	border: 1px solid var(--editor-border-color);
	padding: 0.5em;
	border-radius: var(--inspector-border-radius);
}

.inspector__colorpicker__chart-styles .must-color-picker {
	width: 230px;
}

.inspector__btn__axis__position--start svg {
	transform: rotate(-90deg);
}

.inspector__btn__axis__position--end svg {
	transform: rotate(90deg);
}

.inspector__btn__axis__position--bottom svg {
	transform: rotate(180deg);
}

.inspector__colorpicker {
	display: flex;
	border: 1px solid var(--input-border-color);
	background: var(--input-bg);
	padding: 1px;
	border-radius: var(--inspector-border-radius);
}

.inspector__colorpicker .mq-icon {
	width: var(--inspector-icon-size);
	height: var(--inspector-icon-size);
	padding: 0.2em 0.4em 0.1em 0.3em;
}

.inspector .dropdown__outer {
	padding: 0 0.1em;
}

.inspector .dropdown__outer--fullwidth {
	width: 100%;
}

.inspector .dropdown__outer--fullwidth .inspector__dropdown {
	width: 100%;
}

.inspector .dropdown__outer--fullwidth .dropdown__value {
	flex-grow: 1;
}

.inspector .dropdown__outer .contextmenu {
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
}

.inspector__dropdown {
	height: 100%;
	align-items: center;
}

.inspector__dropdown .dropdown__toggle {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.palette__selector {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	border: 1px solid var(--input-border-color);
	background: var(--input-bg);
	border-radius: var(--inspector-border-radius);
	cursor: pointer;
}

.palette__selector__selected {
	display: flex;
	padding: 3px;
	flex-grow: 1;
}

.palette__toggle {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 0.5em;
}

.palette__toggle .mq-icon {
	width: 0.6em;
	height: 0.6em;
}

.chart__palette__list {
	width: 209px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: var(--input-bg);
	border: 1px solid var(--editor-border-color);
	border-radius: var(--inspector-border-radius);
	z-index: 101;
	padding: 6px 6px 0;
	position: relative;
}
.chart__palette__list:focus {
	outline: none;
}

.chart__palette {
	padding: 0;
	border: none;
	background: transparent;
	width: 45px;
	height: 30px;
	margin-bottom: 6px;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	cursor: pointer;
	border-radius: 3px;
	overflow: hidden; /* So that children don't overflow over the border radius */
}
.chart__palette--selected {
	box-shadow: 0 0 0 3px #1464f6;
}

/*
	Slider and slider UIX styles
*/

.inspector__slider {
	flex-grow: 2;
	margin-right: 0.8em;
	height: 4px;
	background: none;
}

.inspector__slider .uix-slider__progress {
	z-index: 1;
	background: var(--editor-active-color);
	border-radius: 0.25em 0 0 0.25em;
}
.inspector__slider .uix-slider__handle {
	width: 14px;
	height: 14px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--mq-white);
	border: 1px solid var(--editor-text-muted-color);
	box-shadow: var(--mq-box-shadow-sm);
	border-radius: 14px;
}

.inspector__slider .uix-pad {
	height: 4px;
	border-radius: 0.25em;
	background: var(--editor-border-color);
	position: relative;
}

.inspector__controls .uix-pad:focus .uix-pad__handle {
	background: var(--mq-white);
	border: 1px solid var(--editor-text-muted-color);
}

.inspector__slider__input {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.inspector__slider__input .uix-input {
	margin-left: 0.5em;
	flex-basis: 0;
	flex-grow: 1;
}

.inspector__slider__input--label .uix-input input {
	padding-left: 1.2em;
}

/*
	UIX styles
*/

.palette__selector__selected .must-swatch:first-of-type {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}
.palette__selector__selected .must-swatch:last-of-type {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}

.palette__selector .must-swatch {
	height: 18px;
	width: auto;
	overflow: visible;
	border-radius: 0;
	flex: 1;
}

/** Disable the must--light border in this cases **/
.palette__selector .must-swatch::before,
.chart__palette .must-swatch::before {
	box-shadow: 0 0;
}

.chart__palette .must-swatch {
	height: 15px;
	width: 15px;
	border-radius: 0;
}

.uix-input input {
	border: 1px solid var(--input-border-color);
	border-radius: var(--inspector-border-radius);
	color: var(--input-text-color);
	background: var(--input-bg);
	min-height: 2em;
	padding-left: 3px;
	transition: border-color 0.2s var(--mq-transition);
}

.uix-input--numeric span {
	color: var(--input-icon-color);
}

.uix-input input:hover {
	border-color: var(--input-border-hover-color);
}

.uix-input input:focus {
	border-color: var(--editor-active-color);
}

input.must-input {
	border: 1px solid var(--input-border-color);
	border-radius: var(--inspector-border-radius);
	color: var(--input-text-color);
	background: var(--input-bg);
	min-height: 2em;
	padding-left: 4px;
	transition: border-color 0.2s var(--mq-transition);
}

input:hover.must-input {
	border-color: var(--input-border-hover-color);
}

input:focus.must-input {
	border-color: var(--editor-active-color);
}
.uix-input-icon {
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	display: flex;
	align-items: center;
	padding: 0.2em;
}
.uix-input-icon .mq-icon {
	width: 1em;
	height: 1em;
}

.inspector__input.uix-input input:focus {
	border: 1px solid var(--editor-active-color);
}
.inspector__input--has-unit.uix-input input {
	padding-right: 1.3em;
	min-width: 3em;
}

.inspector__input--has-icon.uix-input input {
	padding-left: 1.7em;
	min-width: 3em;
}
.inspector__input--has-icon .mq-icon {
	height: 100%;
	position: absolute;
	left: 1px;
	top: 0;
	bottom: 0;
	padding: 0 0.2em;
}

.inspector__controls .uix-list__item {
	font-weight: normal;
}
.uix-list__item--selected.inspector__btn {
	border-color: var(--input-border-hover-color) !important;
	background: var(--editor-active-bg);
	color: var(--editor-active-color);
}
.uix-list__item--selected.inspector__btn .mq-icon {
	fill: var(--editor-active-color);
}
.uix-popup {
	background: none;
}
.uix-popup:focus {
	outline: none;
}

.uix-colorinput .uix-popup {
	z-index: 500;
	transform: translate(-90%, 0);
}

.inspector__controls .uix-popup {
	z-index: 10;
	box-shadow: 2px 6px 15px rgba(0, 0, 0, 0.25);
}

/* New inspector styles, to be merged with the react rewrite */

/*
	Default Text Settings pane
	---------------------------------------------------------
*/

.default__text__settings__pane .inspector__panel-section-content:first-of-type {
	margin-top: 0;
}

.default__text__settings__pane .inspector__panel-section-content:last-of-type {
	margin-bottom: 0;
}

.font__defaults {
	display: flex;
	justify-content: space-between;
}

.font__defaults .font-family-dropdown {
	margin-left: 0;
}

.font__defaults .mq-input-value {
	white-space: nowrap;
	padding-right: 2.3em;
}

/*
	Page Settings pane
	---------------------------------------------------------
*/

.page__settings__pane .uix-input--numeric {
	max-width: 7em;
}

.page__settings__pane .mq-message {
	margin-bottom: 0;
	font-size: 0.9em;
	color: #4a4a4a;
}

.page__settings__pane .inspector__panel-section-content:first-of-type {
	margin-top: 0;
}

.page__settings__pane .inspector__panel-section-content:first-of-type .dropdown__value {
	padding: 0.6em 0.4em;
}

.page__settings__pane .inspector__panel-section-content:first-of-type .mq-icon {
	margin-left: 1px;
}

.page__settings__pane .inspector__panel-section-content:last-of-type {
	margin-bottom: 0;
}

.page__settings__pane .lock__overlay {
	position: relative;
	margin-left: -1em;
	width: 2em;
	height: 55%;
	border: 1px solid var(--input-border-color);
	border-radius: var(--inspector-border-radius);
	border-left: 0;
}

.page__size__lock {
	position: relative;
	width: 2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.page__size__lock button {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	padding: 0.2em;
	margin: 0.1em 0 0.1em 0.25em;
	background: var(--editor-bg);
	z-index: 2;
}

/*
	 / Page Settings pane
*/

/*
	Padding pane
	---------------------------------------------------------
*/

.padding__pane {
}

.padding__pane .inspector__panel-section {
	position: relative;
	padding: 0;
	margin: 0.2em 2.5em;
}

.padding__pane__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0.75em 1.75em;
	border: 1px solid var(--input-border-color);
	border-radius: calc(var(--inspector-border-radius) * 1.5);
	z-index: -1;
}

.padding__pane .uix-input--numeric {
	max-width: 4em;
}

/*
	 / Padding pane
	---------------------------------------------------------
*/

.inspector__vseparator {
	display: block;
	border-right: 1px solid var(--editor-border-color);
}

.inspector__checkbox {
	display: flex;
	align-items: center;
	color: var(--editor-text-muted-color);
	font-size: 13px;
}

/* when checkbox label is longer than one line */
.inspector__checkbox--long {
	align-items: flex-start;
}

.inspector__checkbox--long input[type='checkbox'].inspector__checkbox-input {
	margin-top: 3px;
}

.inspector__checkbox--checked,
input[type='checkbox'].inspector__checkbox-input:checked + .inspector__checkbox-label {
	color: var(--editor-text-color);
}

input[type='checkbox'].inspector__checkbox-input {
	display: inline-block;
	margin-right: 0.4em;
}

.project__palette__options {
	padding: 0.8em 0;
}

.palette__switch {
	list-style: none;
	margin: 0.5em 0 0;
	padding: 0;
	color: var(--editor-text-color);
	font-size: 13px;
	background: var(--switch-bg);
	border-radius: calc(var(--inspector-border-radius) * 1.5);
	overflow: hidden;
	display: flex;
	box-shadow: var(--mq-box-shadow-inset-sm);
}

.palette__switch li {
	display: block;
	letter-spacing: 0;
	text-align: center;
	width: calc(50% - 4px);
	border: 2px solid transparent;
	background: transparent;
}

.palette__switch li a {
	display: block;
	color: inherit;
	opacity: 0.7;
	padding: 0.25em 0.5em 0.3em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: transparent;
	min-width: 6.5em;
	border-radius: var(--inspector-border-radius);
	transition: background-color 0.2s var(--mq-transition), color 0.2s var(--mq-transition),
		opacity 0.2s var(--mq-transition);
}

.palette__switch li a:hover {
	text-decoration: none;
	opacity: 1;
}

.palette__switch li a.active {
	color: var(--editor-active-color);
	background: var(--switch-active-bg);
	box-shadow: var(--mq-box-shadow-sm);
	opacity: 1;
}

.palette__info {
	color: var(--editor-text-muted-color);
	margin-bottom: 1.2em;
	background: var(--input-bg);
	padding: 0.75em 1em;
	margin: 1em 0;
	border-radius: calc(var(--inspector-border-radius) * 2);
	font-size: 12px;
}

.palette__info p {
	margin: 0;
}

.flip__buttons {
	gap: 0.2em;
}

.flip__buttons .inspector__btn {
	padding: 0.38em 0.45em;
}

.inspector .dropdown__outer--new {
	border-radius: var(--inspector-border-radius);
}

.inspector__dropdown--new ul {
	width: 230px;
}

.inspector__dropdown--new .dropdown__value {
	padding: 0.3em 0.4em;
}

.inspector__dropdown--new .dropdown__toggle {
	border: none;
	padding: 0 0.45em;
}

.inspector__dropdown--new .dropdown__toggle .mq-icon {
	width: 0.6em !important;
	height: 0.6em !important;
}

.inspector__input--new.uix-input input {
	padding-top: calc(0.3em - 1px);
	padding-bottom: calc(0.3em - 1px);
	border-radius: var(--inspector-border-radius);
}

.inspector__colorpicker--new {
	border-radius: var(--inspector-border-radius);
}

.inspector__colorpicker--new .mq-icon {
	padding: 0.1em 0;
}

.inspector__colorpicker--new .mq-color-swatch {
	width: auto;
	border-radius: 2px;
	overflow: hidden;
}

.inspector__colorpicker--new .mq-color-swatch a {
	height: calc(2em - 8px);
	border-radius: 0px;
}

/* ============================= */

.inspector__inspect {
	display: flex;
	flex-direction: column;
	max-height: 100%;
	height: 100%;
}

.inspector__inspect--noselection > div p {
	padding: 15px 10px 0 10px;
	color: var(--editor-text-color);
}

.inspector__empty {
	opacity: 0.5;
}

.inspect__separator {
	width: 100%;
	border-bottom: 1px solid var(--editor-border-color);
}

.inspect__title {
	padding: 10px 10px 10px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 20px;
	color: var(--editor-text-color);
	-webkit-user-select: text;
	user-select: text;
}

.inspector__inspect--noselection .inspect__title {
	color: var(--editor-text-color);
}

.inspector .inspect__title span {
	height: 1.75em;
	width: 1.75em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.inspector .inspect__title svg {
	width: 0.9em;
	height: 0.9em;
	padding: 0.4em;
	cursor: pointer;
}

.inspector .inspect__title svg:hover {
	fill: var(--editor-active-color);
}

.inspect__properties {
	display: flex;
	flex-direction: column;
	background-color: var(--editor-bg);
	flex-grow: 1;
}

.inspect__properties__hint {
	display: flex;
	align-items: center;
	background: var(--editor-bg);
	color: var(--editor-text-muted-color);
	background: var(--input-bg);
	padding: 0.75em 1em;
	border-radius: calc(var(--inspector-border-radius) * 2);
	display: flex;
	justify-content: stretch;
	align-items: center;
	margin: 0.75em 1em;
	font-size: 13px;
}

.inspect__properties__hint span {
	font-size: 12px;
	line-height: 1.3;
}

.inspect__properties__hint strong {
	color: var(--editor-text-color);
}

.inspector .inspect__properties__hint svg {
	height: 32px;
	width: 32px;
	margin-right: 1em;
	flex: none;
}

.inspect__property__set {
	padding: 0 1em;
}

.inspect__properties__style {
	padding-top: 0.6em;
	padding-bottom: calc(0.6em + 1px);
}

.inspect__page__colors {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	width: auto;
	gap: 5px;
}

.inspect__page__colors:not(:last-of-type) {
	margin-bottom: 5px;
}

.inspect__page__colors li {
	width: calc(1.6em - 4px);
	height: calc(1.6em - 4px);
}

.inspect__page__colors a {
	display: inline-block;
	width: calc(1.6em - 4px);
	height: calc(1.6em - 4px);
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
	border-radius: 2px;
}

.inspect__code {
	padding: 0.5em 1em;
	-webkit-user-select: text;
	user-select: text;
	font-family: Consolas, Monaco, Courier, 'Courier New', monospace;
	line-height: 1.5;
	color: var(--editor-text-muted-color);
}

/* Allow user to select code values easier */
.inspect__code span {
	-webkit-user-select: all;
	user-select: all;
}

.inspect__code ::selection {
	background: var(--editor-semiselection-bg);
}

.inspect__code .hljs-selector-class {
	color: var(--editor-text-color);
}

.inspect__code .hljs-attribute {
	color: var(--editor-text-muted-color);
}

.inspect__code .hljs-built_in,
.inspect__code .hljs-string {
	color: var(--mq-purple-400);
}

.inspect__code .hljs-keyword,
.inspect__code .hljs-number {
	color: var(--mq-orange-500);
}

.inspect__code code {
	font-size: 11px;
	word-break: break-word;
}

.inspector__copy__code {
	font-weight: normal;
}

.inspect__code__options {
	display: flex;
	justify-content: stretch;
	align-items: center;
	gap: 0.5em;
	padding: 1em 1em 0.5em;
}

.inspect__code__options .mq__button {
	flex-grow: 1;
	border-color: var(--input-border-color);
	font-size: 1em;
	padding: 0.4em;
	min-height: 32px;
	height: 32px;
}

.inspect__code__options .codetype__dropdown {
	font-size: 1em;
	padding: 0 0.4em;
	min-height: 32px;
	height: 32px;
	box-sizing: border-box;
	display: flex;
	border-radius: calc(var(--inspector-border-radius) * 1.5);
	background: var(--button-bg);
	border: 1px solid var(--input-border-color);
}

.inspect__code__options .codetype__dropdown:hover {
	background: var(--button-hover-color);
}

.inspector__property--label {
	width: 35%;
	min-width: 35%;
	color: var(--editor-text-muted-color);
	text-transform: capitalize;
	padding: 0.2em 0;
}

.inspector__property {
	font-size: 0.9em;
}

.inspector__property ul {
	width: 100%;
	min-width: 0; /* Prevents ul from exceeding parent width (being flex and all) */
}

.inspector__property ul li {
	display: flex;
	align-items: center;
	justify-content: stretch;
	padding: 0.2em 0.2em;
}

.inspect__iconmeta {
	padding: 0.3em 0 0.5em;
	font-size: 11px;
	color: var(--editor-text-muted-color);
}

.inspect__iconmeta a {
	text-decoration: underline;
	color: var(--editor-text-color);
}

.inspector__property--actionable {
	display: flex;
	flex-grow: 1;
	color: var(--editor-text-color);
	cursor: pointer;
	border-radius: 3px;
	margin-left: -0.2em;
}

.inspector__property--actionable:hover,
.inspector__property--actionable:focus {
	background: var(--editor-semiselection-bg);
}

.inspector__property--value {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.inspector__property--colorpreview {
	display: inline-block;
	height: 1em;
	width: 1em;
	min-height: 1em;
	min-width: 1em;
	box-sizing: border-box;
	border-radius: 2px;
	margin-right: 0.25em;
}

.inspector__colorpicker .must-swatch-button {
	height: 100%;
	padding: 1px;
	background: none;
}

.inspector__colorpicker .must-swatch {
	min-width: 3em;
	max-width: 6em;
	width: auto;
	height: 100%;
}

.codetype__dropdown__menu,
.codetype__dropdown {
	font-size: 0.9em;
}
.codetype__dropdown {
	color: var(--editor-text-color);
}

.codetype__dropdown__menu.dropdown__menu .contextmenu__item__label {
	padding: 0.5em 1em;
	font-size: 13px;
}

.letter__avatar {
	text-align: center;
	line-height: 2em;
	min-width: 2em;
	max-width: 2em;
	height: 2em;
	display: inline-block;
	border-radius: 50%;
	margin-right: 0.75em;
	color: white;
	background-color: #007ee5;
}

/* =============================================================================
   Avatars
   ========================================================================== */

.avatar {
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	/*margin-right: 0.5em;*/
}

.avatar.small {
	width: 20px;
	height: 20px;
}

.avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	vertical-align: baseline;
}

.avatar.big {
	width: 50px;
	height: 50px;
}

.avatar.bigger {
	width: 70px;
	height: 70px;
}

.avatar-full {
	width: 100%;
	height: auto;
	margin-bottom: 0.5em;
	cursor: pointer;
}

.avatar-list {
	min-width: 400px;
}

.avatar-list .avatar {
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	float: left;
	cursor: pointer;
}

.avatar-list .avatar img {
	transition: all 0.1s ease-in-out;
}

.avatar-list .avatar:hover img {
	border: 2px solid #003863;
	box-sizing: border-box;
}

.avatar.presence img {
	box-sizing: border-box;
	border: 2px solid #e6e6e6;
}

.avatar.presence.online {
	position: relative;
}

.avatar.presence.online img {
	border: 2px solid #006ce5;
}

.avatar.presence.online:after {
	position: absolute;
	width: 6px;
	height: 6px;
	background: #4daa48;
	top: 15%;
	left: 85%;
	content: ' ';
	border-radius: 50%;
	border: 2px solid #fff;
	transform: translate(-50%, -50%);
}

/*
	Profile card
	----------------------------------------------------------------------
*/

.mq-profile-card {
	position: relative;
	display: inline-block;
	color: var(--editor-text-color);
	-webkit-user-select: text;
	user-select: text;
}

.mq-profile-card-compact {
	display: block;
}

.mq-profile-card-mini .mq-profile-card-name {
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.mq-profile-card-compact:hover .mq-profile-card-name {
	/*background: var(--editor-highlight-bg);*/
}

.mq-profile-card-compact .mq-profile-card-avatar {
	margin-right: 0.2em;
}

.mq-profile-card-expanded {
	position: absolute;
	padding: 1em;
	display: flex;
	align-items: center;
	/* same as context menu, unify? */
	background: var(--input-bg);
	box-shadow: var(--mq-box-shadow-md);
	border: 1px solid var(--input-border-color);
	z-index: 1000;
	border-radius: calc(var(--inspector-border-radius) * 2);
	opacity: 0;
	transition: opacity 0.15s 0.2s, visibility 0s 0.2s;
	left: 0;
	top: 1.75em;
	visibility: hidden;
}

.mq-profile-card:hover .mq-profile-card-expanded {
	opacity: 1;
	transition: all 0.15s 0.7s;
	visibility: visible;
}

.mq-profile-card-expanded.visible {
	opacity: 1;
	transition: opacity 0.15s 0.7s;
	visibility: visible;
}

.mq-profile-card-avatar {
	width: 1.25em;
	height: 1.25em;
	overflow: hidden;
}

.mq-profile-card-name {
	font-weight: bold;
	display: inline-block;
	padding: 0 4px;
	border-radius: 4px;
	max-width: 130px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mq-profile-card-info .mq-icon {
	fill: var(--editor-icon-color);
	width: 0.8em;
	margin-right: 0.25em;
}

.mq-profile-card-email {
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.mq-profile-card-expanded .mq-profile-card-avatar {
	display: block;
	width: 4em;
	height: 4em;
	float: left;
}

.mq-profile-card-expanded .mq-profile-card-name {
	display: block;
	margin: 0;
	padding: 0;
	max-width: 180px;
}

.mq-profile-card-expanded {
	/*overflow: hidden;*/
	text-overflow: ellipsis;
	font-size: 12px;
}

.mq-profile-card-expanded .mq-profile-card-avatar + span {
	margin-left: 1em;
	display: block;
}

.mq-profile-card-mini {
	width: calc(100% - 3.1em);
}

.mq-profile-card-mini .mq-profile-card-expanded {
	max-width: 13em;
	text-align: center;
	padding: 0.5em;
	flex-direction: column;
}

.mq-profile-card-mini .mq-profile-card-expanded .mq-profile-card-avatar {
	float: none;
	display: block;
	margin: 0 auto 0.5em;
}

.mq-profile-card-mini .mq-profile-card-expanded .mq-profile-card-avatar + span {
	margin-left: 0;
}

/* Mention dropdown */

.mq-mentions-dropdown {
	width: 200px;
	border-radius: 4px;
	padding: 6px 0 8px;
	position: absolute;
	background: var(--input-bg);
	z-index: 1;
	right: 0;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

.mention-list {
	font-size: 0.9em;
}

.mq-mentions-dropdown input {
	width: calc(100% - 8px);
	background: var(--input-bg);
	border: 1px solid transparent;
	font-size: 13px;
	padding: 5px;
	margin: 0 4px 6px;
}

.mq-mentions-dropdown .mention {
	/*margin: 2px 0;*/
	padding: 0.25em 0.5em;
	cursor: pointer;
	font-size: 13px;
}

.mq-mentions-dropdown .mention .avatar.presence img {
	border: 0;
}

.mq-mentions-dropdown .mention .mq-profile-card,
.mq-mentions-dropdown .mention .mq-profile-card-compact {
	color: var(--editor-text-color);
	font-size: 13px;
	margin: 0;
	width: auto;
}

.mq-mentions-dropdown .mention .mq-profile-card-name,
.mq-mentions-dropdown .mention .mq-profile-card-compact:hover .mq-profile-card-name {
	background: none;
	color: inherit;
}

.mq-mentions-dropdown .mention .mq-profile-card-expanded {
	display: none;
}

.mq-mentions-dropdown .mention:first-child {
	border-top: 1px solid var(--input-border-color);
}

.mq-mentions-dropdown .mention.focused {
	color: var(--editor-active-bg);
	background: var(--editor-active-color);
}

.mq-mentions-dropdown .mention.focused .mq-profile-card-compact {
	color: var(--editor-active-bg);
}

.mention .mq-profile-card-compact .mq-profile-card-name {
	overflow: hidden;
	font-weight: normal;
	text-overflow: ellipsis;
	max-width: 12em;
	vertical-align: middle;
	white-space: nowrap;
}

/* Smart Textarea */

.smart-textarea-tools {
	position: absolute;
	bottom: 0.4em;
	right: 0.55em;
}

.smart-textarea-button {
	cursor: pointer;
	color: var(--editor-text-color);
}

.smart-textarea-button .mq-icon {
	vertical-align: middle;
}

.smart-textarea-button:hover {
	color: var(--link-color);
}

.smart-textarea-button > .mq-button {
	width: 1.2em;
	height: 1.2em;
}

.markdown-info .mq-icon {
	stroke: currentColor;
	width: 1.25em;
	height: 1em;
	padding: 0.5em 0.5em 0 0;
}

/**
 * Define color variables and shapes for each style
 */

.comment-style-circle {
	/* blue */
	--mq-comment-background-color: rgb(13, 110, 245);
	--mq-comment-color: #fff;
	--mq-comment-highlight-color: rgba(13, 110, 245, 0.25);
}

.comment-style-circle.shape,
.comment-marker.comment-style-circle > .comment-marker-animation-helper::before,
.comment-marker.comment-style-circle > .comment-marker-animation-helper::after {
	border-radius: 50%;
}

.comment-style-rhombus {
	/* green */
	--mq-comment-background-color: rgb(74, 156, 46);
	--mq-comment-color: #fff;
	--mq-comment-highlight-color: rgba(74, 156, 46, 0.25);
}

.comment-marker.comment-style-rhombus,
.comment-marker-highlight.comment-style-rhombus {
	width: 43px;
	height: 43px;
}

.comment-marker-index.comment-style-rhombus {
	width: 30px;
	height: 30px;
	line-height: 2.5em;
}

.comment-style-rhombus.shape,
.comment-marker.comment-style-rhombus > .comment-marker-animation-helper::before,
.comment-marker.comment-style-rhombus > .comment-marker-animation-helper::after {
	aspect-ratio: 1;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.comment-style-star {
	/* yellow/gold */
	--mq-comment-background-color: rgb(246, 202, 75);
	--mq-comment-color: #000;
	--mq-comment-highlight-color: rgba(246, 202, 75, 0.25);
}

.comment-style-star.shape,
.comment-marker.comment-style-star > .comment-marker-animation-helper::before,
.comment-marker.comment-style-star > .comment-marker-animation-helper::after {
	aspect-ratio: 1;
	clip-path: polygon(
		100% 50%,
		87.67% 60.09%,
		93.3% 75%,
		77.58% 77.58%,
		75% 93.3%,
		60.09% 87.67%,
		50% 100%,
		39.91% 87.67%,
		25% 93.3%,
		22.42% 77.58%,
		6.7% 75%,
		12.33% 60.09%,
		0% 50%,
		12.33% 39.91%,
		6.7% 25%,
		22.42% 22.42%,
		25% 6.7%,
		39.91% 12.33%,
		50% 0%,
		60.09% 12.33%,
		75% 6.7%,
		77.58% 22.42%,
		93.3% 25%,
		87.67% 39.91%
	);
}

.comment-marker.comment-style-star,
.comment-marker-highlight.comment-style-star {
	width: 37px;
	height: 37px;
}

.comment-marker-index.comment-style-star {
	width: 26px;
	height: 26px;
	line-height: 2.2em;
}

.comment-style-square {
	/* purple */
	--mq-comment-background-color: rgb(141, 106, 248);
	--mq-comment-color: #fff;
	--mq-comment-highlight-color: rgba(141, 106, 248, 0.25);
}

.comment-style-square.shape,
.comment-marker.comment-style-square > .comment-marker-animation-helper::before,
.comment-marker.comment-style-square > .comment-marker-animation-helper::after {
	border-radius: 0;
}

.comment-style-hexagon {
	/* red */
	--mq-comment-background-color: rgb(219, 94, 60);
	--mq-comment-color: #fff;
	--mq-comment-highlight-color: rgba(219, 94, 60, 0.25);
}

.comment-style-hexagon.shape,
.comment-marker.comment-style-hexagon > .comment-marker-animation-helper::before,
.comment-marker.comment-style-hexagon > .comment-marker-animation-helper::after {
	aspect-ratio: 0.8; /* cos(30deg) */
	clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
	height: initial;
}

/* Adjustments for tip of comment popover to prevent popover from moving while adjustin
 comment style */

.comment-thread:has(.comment-marker.comment-style-hexagon) .comment-popover {
	top: calc(-5em - 8.5px);
}

.comment-thread:has(.comment-marker.comment-style-rhombus) .comment-popover {
	top: calc(-5em - 9px);
}

.comment-thread:has(.comment-marker.comment-style-star) .comment-popover {
	top: calc(-5em - 3px);
}

/* 
	Attached style for square, circle, rhombus, hexagon and star comment styles
	===============================================================
 */
.comment-marker.comment-style-circle.attached::after,
.comment-marker.comment-style-square.attached::after,
.comment-marker.comment-style-hexagon.attached::after,
.comment-marker.comment-style-star.attached::after,
.comment-marker.comment-style-rhombus.attached::after {
	--rotation: 0deg;
	--scale: 1;
	content: '';
	display: block;
	position: absolute;
	bottom: 50%;
	left: calc(50% - 10px);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 13px solid var(--mq-comment-background-color, var(--mq-blue));
	transform: scaleX(var(--scale)) rotate(var(--rotation)) translateY(-7px);
	transform-origin: bottom center;
	transition: transform 0.2s var(--mq-transition), border-color 0.2s ease-in-out;
}

/* Make pseudo element longer pointier for larger styles */
.comment-marker.comment-style-star.attached::after {
	border-bottom-width: 16px;
}

.comment-marker.comment-style-rhombus.attached::after {
	border-bottom-width: 14px;
}

.comment-marker.comment-style-circle.attached-top::after,
.comment-marker.comment-style-square.attached-top::after,
.comment-marker.comment-style-hexagon.attached-top::after,
.comment-marker.comment-style-star.attached-top::after,
.comment-marker.comment-style-rhombus.attached-top::after {
	--rotation: 180deg;
}

.comment-marker.comment-style-circle.attached-bottom::after,
.comment-marker.comment-style-square.attached-bottom::after,
.comment-marker.comment-style-hexagon.attached-bottom::after,
.comment-marker.comment-style-star.attached-bottom::after,
.comment-marker.comment-style-rhombus.attached-bottom::after {
	--rotation: 0deg;
}

.comment-marker.comment-style-circle.attached-left::after,
.comment-marker.comment-style-square.attached-left::after,
.comment-marker.comment-style-hexagon.attached-left::after,
.comment-marker.comment-style-star.attached-left::after,
.comment-marker.comment-style-rhombus.attached-left::after {
	--rotation: 90deg;
}

.comment-marker.comment-style-circle.attached-right::after,
.comment-marker.comment-style-square.attached-right::after,
.comment-marker.comment-style-hexagon.attached-right::after,
.comment-marker.comment-style-star.attached-right::after,
.comment-marker.comment-style-rhombus.attached-right::after {
	--rotation: 90deg;
	--scale: -1;
}
/*
	Hexagon attached styles
 */

.comment-marker.comment-style-hexagon.attached-left::after {
	left: calc(50% - 4px);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}

.comment-marker.comment-style-hexagon.attached-right::after {
	left: calc(50% - 12px);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}

/*
	Rhombus attached styles
	===============================================================
 */

.comment-marker.comment-style-rhombus.attached-top .comment-marker-index {
	clip-path: polygon(50% 0, 100% 50%, 65% 100%, 35% 100%, 0 50%);
}

.comment-marker.comment-style-rhombus.attached-bottom .comment-marker-index {
	clip-path: polygon(35% 0, 65% 0, 100% 50%, 50% 100%, 0 50%);
}

.comment-marker.comment-style-rhombus.attached-right .comment-marker-index {
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 65%, 0 35%);
}

.comment-marker.comment-style-rhombus.attached-left .comment-marker-index {
	clip-path: polygon(50% 0, 100% 35%, 100% 65%, 50% 100%, 0 50%);
}

/*
	Style for pseudoelement for resolved attached comments
	===============================================================
 */
.comment-marker.attached.resolved::after {
	border-bottom-color: var(--mq-editor-grey-300);
}

/* Comments */

.comments-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 101;
	pointer-events: none;
}

.comments-layer.dragging-comment {
	pointer-events: none;
}

.comments-layer.dragging-comment .comment-marker {
	pointer-events: none;
}

.canvas-stage.view-mode .comments-layer {
	z-index: 1000;
}

.comment-thread {
	position: absolute;
	top: 0;
	left: 0;
}

.comments-layer > div:has(.comment-thread.view-mode) {
	z-index: 1000;
}

.comments-layer > div:has(.comment-thread.view-mode.expanded) {
	z-index: 1001;
}

.comment-marker {
	font-size: 0.9em;
	position: relative;
	width: 34px;
	height: 34px;
	pointer-events: all;
	text-align: center;
	font-weight: 400;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition-property: color, background-color, transform, opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

/*
 	The hexagon shape doesn't have a 1:1 aspect ratio, so adjust margin
 */

.comment-marker.comment-style-hexagon {
	height: initial;
}

.comment-marker-index.comment-style-hexagon.shape {
	line-height: 2.5em;
}

.comment-marker-highlight {
	width: 34px;
	height: 34px;
	color: var(--mq-white);
	background-color: rgba(41, 50, 61, 0.2);
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

.comment-marker.unread .comment-marker-highlight {
	background-color: rgba(76, 175, 80, 0.25);
}

.comment-marker.unread .comment-marker-highlight:hover {
	background-color: rgba(67, 160, 71, 0.35);
}
.comment-marker.unsaved .comment-marker-highlight {
	background-color: rgba(255, 102, 36, 0.25);
}

.comment-marker.unsaved .comment-marker-highlight:hover {
	background-color: rgba(255, 102, 36, 0.35);
}

.comment-resolved-icon {
	display: none;
}

.comment-resolved-icon.resolved {
	display: block;
	position: absolute;
	left: 3px;
	top: -23px;
	z-index: 1;
	fill: var(--mq-comment-background-color, var(--mq-blue));
	width: 20px;
	height: 20px;
	animation-name: bounceInNoTranslate;
	animation-duration: 0.7s;
	animation-delay: 0s;
}

.comments-layer.show-unresolved > .comment-thread:not(.expanded) .resolved:not(.hide) {
	display: none;
}

.comments-layer.show-resolved > .comment-thread:not(.expanded) .unresolved:not(.hide) {
	display: none;
}

.comments-layer.show-unread > .comment-thread:not(.expanded) .read {
	display: none;
}

.comments-layer.show-mentions .comment-thread:not(.expanded) .nomentions:not(.hide) {
	display: none;
}

.comments-layer.show-style.show-style-circle
	.comment-thread:not(.expanded)
	.comment-marker:not(.comment-style-circle) {
	display: none;
}

.comments-layer.show-style.show-style-rhombus
	.comment-thread:not(.expanded)
	.comment-marker:not(.comment-style-rhombus) {
	display: none;
}

.comments-layer.show-style.show-style-star
	.comment-thread:not(.expanded)
	.comment-marker:not(.comment-style-star) {
	display: none;
}

.comments-layer.show-style.show-style-square
	.comment-thread:not(.expanded)
	.comment-marker:not(.comment-style-square) {
	display: none;
}

.comments-layer.show-style.show-style-hexagon
	.comment-thread:not(.expanded)
	.comment-marker:not(.comment-style-hexagon) {
	display: none;
}

.comment-marker.hide {
	animation-name: bounceOut;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
	animation-fill-mode: forwards;
}

.comment-marker > .comment-marker-highlight:hover {
	background-color: var(--mq-comment-highlight-color, rgba(0, 113, 243, 0.25));
}

.comment-marker.resolved > .comment-marker-highlight {
	background-color: rgba(41, 50, 61, 0.1);
}

.comment-marker.resolved > .comment-marker-highlight:hover {
	background-color: rgba(207, 216, 220, 0.55);
}

.comment-marker:active {
	opacity: 0.5;
}

.comment-marker-index {
	width: 24px;
	height: 24px;
	line-height: 2em;
	background: var(--mq-comment-background-color, var(--mq-blue));
	font-size: 0.75rem;
	font-weight: 800;
	/*border: 1px solid #fff;*/
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	transition-property: color, background-color, transform;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	color: var(--mq-comment-color, var(--mq-white));
}

.comment-marker-index span {
	position: relative;
	z-index: 3;
	color: var(--mq-comment-color, var(--mq-white));
}

.comment-marker.resolved span {
	color: var(--mq-editor-grey-700);
}

.comment-marker.resolved .comment-marker-index {
	background: var(--mq-editor-grey-300);
	color: var(--mq-editor-grey-700);
}

.comment-popover {
	pointer-events: all;
	z-index: 2;
	position: relative;
	top: -5em;
	left: 2em;
	width: 340px;
	max-height: var(--max-comment-height);
	display: flex;
	flex-direction: column;
	/*overflow: hidden;*/
	min-height: 4em;
	background-color: var(--modal-bg);
	box-shadow: var(--mq-box-shadow-xl);
	border-radius: calc(var(--inspector-border-radius) * 3);
	animation-name: genie;
	animation-duration: 0.2s;
	animation-timing-function: var(--mq-transition);
}

.comment-popover.right {
	right: 370px;
	left: initial;
}

.comment-popover .comment-row {
	background: transparent;
	margin: 0 !important;
	padding: 0.8em 1.25em 0.35em;
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--editor-menu-border-color);
}

@keyframes comment-highlight {
	0% {
		background: transparent;
	}
	50% {
		background: var(--editor-semiselection-bg);
	}
	100% {
		background: transparent;
	}
}

.comment-popover .comment-row.selected {
	animation: comment-highlight 1s var(--mq-transition);
}

.comment-popover .comment-row:hover {
	cursor: default;
	border-bottom: 1px solid var(--editor-menu-border-color);
}

.comment-popover .comment-row:last-child,
.comment-popover .comment-row:last-child:hover {
	border-bottom: none;
}

.comment-popover .comment-read-status {
	top: 17px;
	left: 5px;
	width: 6px;
	height: 6px;
}

.comment-popover .comment-time {
	top: 13px;
	right: 20px;
}

.comment-popover .mq-profile-card-avatar {
	width: 1.5em;
	height: 1.5em;
}

.comment-popover .mq-profile-card-expanded .mq-profile-card-avatar {
	width: 3em;
	height: 3em;
}

.comment-popover .comment-row:last-of-type:not(:only-child) .mq-profile-card-expanded {
	top: auto;
	bottom: 1.75em;
}

.comment-popover .comment-content {
	font-size: 13px;
}

@media (max-width: 900px) {
	.comment-popover {
		width: 300px;
	}
	.comment-popover.right {
		right: 328px;
	}

	.comment-input-footer button {
		padding-left: 6px;
		padding-right: 6px;
	}
}

@media (max-width: 500px) {
	.comment-popover {
		width: 250px;
	}
	.comment-popover.right {
		right: 278px;
	}
	.comment-input-footer button {
		padding-left: 4px;
		padding-right: 4px;
	}
}

.comment-popover:after,
.comment-popover:before {
	right: 100%;
	top: 22px;
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.comment-popover.bottom {
	left: -50%;
	top: -22px;
}

.comment-popover.bottom:after,
.comment-popover.bottom:before {
	display: none;
}

.comment-popover.right:after,
.comment-popover.right:before {
	left: 100%;
	right: initial;
}

.comment-popover:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: var(--modal-bg);
	border-width: 8px;
	margin-top: 15px;
}
.comment-popover.right:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: var(--modal-bg);
	border-width: 8px;
	margin-top: 15px;
}

@keyframes genie {
	0% {
		opacity: 0;
		transform-origin: -5% 15%;
		transform: translate(0%, 0%) scale(0.3, 0.3);
	}

	100% {
		opacity: 1;
		transform-origin: 0 0;
		transform: translate(0, 0) scale(1, 1);
	}
}

.comment-popover-header {
	padding: 0.5em 1.25em;
	font-size: 1em;
	min-height: 24px;
	font-size: 13px;
	display: flex;
	align-items: center;
	position: relative;
	font-weight: normal;
	color: var(--editor-text-color);
	border: 2px solid;
	border-image-slice: 1;
	border-width: 1px;
	border-image-source: linear-gradient(
		to right,
		var(--modal-bg) 0%,
		var(--editor-menu-border-color) 5%
	);
	border-left: 0;
	border-right: 0;
	border-top: 0;
}

.comment-thread-replies {
	overflow: auto;
	overscroll-behavior-y: contain;
	overflow-x: hidden;
	margin-bottom: 0;
}
/* hide margin set in place of hidden comment-input when editing comments above */
.comment-popover:not(:has(> .comment-input)) .comment-thread-replies {
	margin-bottom: 1em;
}

.comment-style-button {
	width: 12px;
	height: 12px;
	background: var(--mq-comment-background-color, var(--mq-blue));
}

.comment-style-button__menu {
	z-index: 100;
	position: absolute;
	left: 10%;
	top: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-align: center;
	transform: translate(-50%, 0);
	white-space: nowrap;
	color: var(--toolbar-text-color);
	background: var(--modal-bg);
	box-shadow: var(--mq-box-shadow-lg);
	border-radius: calc(var(--inspector-border-radius) * 1.5);
	border: 1px solid var(--toolbar-border-color);
	height: var(--toolbar-size);
	padding: 0 calc(var(--toolbar-gap) * 2);
	gap: calc(var(--toolbar-gap) * 1);
}

.comment-style-button__menu-button {
	height: calc(var(--toolbar-size) - calc(var(--toolbar-gap) * 2.5));
	min-width: calc(var(--toolbar-size) - calc(var(--toolbar-gap) * 2.5));
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
	cursor: pointer;
	background: transparent;
	border: none;
	border-radius: 4px;
}

.comment-row,
.comment-group {
	position: relative;
	display: flex;
	color: var(--editor-text-color);
	flex-direction: column;
	padding: 10px 7px 10px 10px;
	margin: 9px;
	background: var(--editor-bg);
	border-radius: calc(var(--inspector-border-radius) * 2);
	border: 1px solid var(--editor-bg);
}

.comment-group {
	padding: 0;
}

.comment-group .comment-row {
	background: transparent;
	border-radius: 0;
	border: none;
	margin: 0;
	transition: background-color 0.05s linear;
}

.comment-group > .comment-row:first-child {
	border-top-left-radius: calc(var(--inspector-border-radius) * 2);
	border-top-right-radius: calc(var(--inspector-border-radius) * 2);
}

.comment-group > .comment-row:only-child,
.comment-replies .comment-row:last-child {
	margin-bottom: 0;
	border-bottom-left-radius: calc(var(--inspector-border-radius) * 2);
	border-bottom-right-radius: calc(var(--inspector-border-radius) * 2);
}

.comment-group:has(.comment-replies) .comment-row:first-child {
	padding-bottom: 8px;
}

.comment-group:has(.comment-replies .comment-row) {
	background: var(--editor-menu-bg);
	border-color: var(--editor-border-color);
	margin-bottom: 14px;
}

.comment-group--search .comment-replies::before {
	content: '···';
	font-size: 16px;
	margin: 0 auto;
	color: var(--editor-text-muted-color);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 10px;
	width: 10px;
}

.comment-group--search > .comment-row {
	opacity: 0.75;
}

.comment-replies .comment-row + .comment-row {
	margin-bottom: 0;
}

.comment-replies button {
	position: sticky;
	top: -1px;
	z-index: 9;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	left: 0;
	width: 100%;
	text-align: left;
	padding-left: 10px;
	background: var(--editor-bg);
	color: var(--link-color);
	border: 0;
	font-size: 12px;
	border-top: 1px solid transparent;
}

.comment-group:has(.comment-replies .comment-row) .comment-replies button {
	background: var(--editor-menu-bg);
	border-color: var(--editor-menu-border-color);
}

.comment-replies button:last-child {
	border-bottom: 0;
	border-bottom-left-radius: calc(var(--inspector-border-radius) * 2);
	border-bottom-right-radius: calc(var(--inspector-border-radius) * 2);
}

.comment-replies button:hover,
.comment-group:has(.comment-replies .comment-row) .comment-replies button:hover {
	cursor: pointer;
	color: var(--link-active-color);
}

.comment-group .comment-row:hover {
	cursor: pointer;
	background: var(--editor-semiselection-bg);
}

.comment-row + .comment-row {
	margin-bottom: 0.5em;
}

.comment-row + .section-header {
	margin-top: 12px !important;
}

.comment-row:last-child {
	margin-bottom: 9px;
}

.comment-row .mq-profile-card {
	display: flex;
	width: calc(100% - 30px);
	font-size: 11px;
	margin-bottom: 0.5em;
}

.comment-row .mq-profile-card-compact {
	display: flex;
	align-items: center;
	width: 100%;
}

.comment-row .mq-profile-card-avatar {
	flex: none;
	overflow: hidden;
}

.comment-row .mq-profile-card-name {
	color: var(--editor-text-color);
}

.mq-comments {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: stretch;
}

.mq-comments-header {
}

.mq-comments-actions {
	display: flex;
	gap: 0.5em;
	padding: 0.3em 9px 0.3em;
	justify-content: space-between;
	box-sizing: border-box;
	border-bottom: 1px solid var(--editor-menu-border-color);
	height: var(--sidebar-header-height);
	align-items: center;
}

.mq-comments-actions-right {
	display: flex;
	gap: 0.3em;
	align-items: center;
}

.mq-comments-actions-right > a,
.mq-comments-actions-right > div,
.mq-comments-actions-right > div > a {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mq-comments-actions-right > a:hover .mq-icon,
.mq-comments-actions-right > div > a:hover .mq-icon {
	color: var(--editor-text-color);
	fill: var(--editor-text-color);
}

.mq-comments-actions-right .mq-icon {
	font-size: 16px;
	width: 1em;
	height: 1em;
	color: var(--editor-active-color);
	fill: var(--editor-active-color);
}

.mq-comments-actions-right .mq-icon.disabled {
	color: var(--editor-text-muted-color);
	fill: var(--editor-text-muted-color);
}

.mq-sidebar-header-button {
	border: 0;
	color: var(--button-text-color);
	padding: 0.3em 0.1em;
	font-weight: 500;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-radius: var(--inspector-border-radius);
	gap: 0.4em;
	white-space: nowrap;
	font-size: 13px;
	overflow: hidden;
}

.mq-sidebar-header-button:hover {
	color: var(--editor-active-color);
}

.mq-comments-tabs {
	list-style: none;
	margin: 9px 9px 0;
	padding: 0;
	color: var(--editor-text-color);
	font-size: 13px;
	background: var(--editor-bg);
	border-radius: calc(var(--inspector-border-radius) * 1.5);
	overflow: hidden;
	display: flex;
	box-shadow: var(--mq-box-shadow-inset-sm);
}

.mq-comments-tabs li {
	display: block;
	letter-spacing: 0;
	text-align: center;
	width: calc(50% - 4px);
	border: 3px solid transparent;
	background: transparent;
}

.mq-comments-tabs li a {
	display: block;
	color: inherit;
	opacity: 0.7;
	padding: 0.25em 0.5em 0.3em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: transparent;
	min-width: 5em;
	border-radius: var(--inspector-border-radius);
	transition: background-color 0.2s var(--mq-transition), color 0.2s var(--mq-transition),
		opacity 0.2s var(--mq-transition);
}

.mq-comments-tabs li a:hover {
	text-decoration: none;
	opacity: 1;
}

.mq-comments-tabs li a.selected {
	color: var(--editor-active-color);
	background: var(--switch-active-bg);
	box-shadow: var(--mq-box-shadow-sm);
	opacity: 1;
}

.mq-comments-contents {
	overflow: auto;
	will-change: scroll-position;
	flex-grow: 1;
}

.mq-comments-filter {
	padding: 0 9px;
	height: var(--sidebar-header-height);
	font-size: 0.95em;
	border-bottom: 1px solid var(--editor-menu-border-color);
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	vertical-align: middle;
}

.mq-comments-filter .mq-link-dropdown-current a {
	margin-left: 0px;
	text-align: left;
	color: var(--editor-active-color);
	text-decoration: none;
}

.mq-comments-filter .mq-link-dropdown-current a:hover {
	text-decoration: none;
}

.mq-comments-filter--page {
	color: var(--editor-text-color);
	background-image: linear-gradient(
		to right,
		var(--editor-text-muted-color) 40%,
		rgba(255, 255, 255, 0) 20%
	);
	background-position: bottom;
	background-size: 3px 1px;
	background-repeat: repeat-x;
}

.mq-comments-filter--page:hover {
	text-decoration: none;
}

.mq-comments-filter .mq-link-dropdown-current::after {
	color: var(--editor-active-color);
}

#comments-sidebar-pane .section-header {
	color: var(--stencil-header-color) !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#comments-sidebar-pane .section-header .expand {
	margin-left: 0.4em;
}

#comments-sidebar-pane .section-header .page-title {
	flex-grow: 1;
}

#comments-sidebar-pane .section-header .comment-read-status {
	flex: none;
}

.comment-row:hover .comment-time {
	display: none;
}

.comment-time.editing {
	display: none;
}

.mq-comments-sidebar .comment-row .comment-time {
	right: 0.2em;
}

.mq-comments-contents .comment-row:hover .comment-time {
	display: block;
}

.comment-row:hover .comment-actions {
	display: block;
}

.comment-row .no-body {
	color: var(--editor-text-muted-color);
}

.comment-row .no-session {
	font-size: 0.9em;
}

.comment-read-status {
	width: 9px;
	height: 9px;
	z-index: 9;
	border-radius: 50%;
	position: absolute;
	top: -4px;
	left: -4px;
	transition: background-color 0.2s var(--mq-transition);
}

.comment-read-status.unread {
	background-color: var(--unread-comment-color);
}

.comment-read-status.read {
	background-color: transparent;
}

.comment-info {
	overflow-wrap: break-word;
	word-break: break-word;
}

.comment-content {
	display: block;
	color: var(--editor-text-color);
	font-size: 12px;
}

.comment-content .mq-profile-card {
	display: inline-flex;
	font-size: 14px;
	width: auto;
	margin: 0;
}

.comment-content .mq-profile-card-name {
	padding: 0;
	font-weight: 500;
	color: var(--editor-active-color);
}

.comment-content ul,
.comment-content ol {
	/*list-style-position: inside;*/
	/*margin-bottom: 0.5em;*/
	padding-left: 2em;
}

.comment-content ul {
	list-style-type: disc;
}
.comment-content ol {
	list-style-type: decimal;
}

.comment-content ul ul,
.comment-content ol ul {
	list-style-type: circle;
}

.comment-content ul ol,
.comment-content ol ol {
	list-style-type: lower-roman;
}

.comment-thread code {
	font-family: Consolas, Monaco, Courier, 'Courier New', monospace;
	font-size: 0.9em;
	color: var(--editor-text-muted-color);
	padding: 0 3px;
}

.comment-thread pre code {
	padding: 0;
}

.comment-thread code span {
	color: var(--editor-text-color);
}

.comment-thread code .hljs-built_in,
.comment-thread code .hljs-number {
}

.comment-thread code .hljs-string,
.comment-thread code .hljs-keyword {
	color: var(--mq-purple-400);
}

/*automatically resize linked images in comments*/
.comment-content img {
	max-width: 100%;
}

.comment-content table {
	width: 100%;
}

.comment-content tr {
}

.comment-content thead {
	font-weight: bold;
}

.comment-content td,
.comment-content th {
	border: 1px solid var(--editor-border-color);
	padding: 3px 6px;
	font-size: 1em;
}

.comment-content th {
	color: var(--editor-text-color);
	border-bottom-width: 1px;
	background: rgba(0, 0, 0, 0.1);
}

.comment-content tr:nth-child(2n) {
	background: rgba(0, 0, 0, 0.05);
}

.comment-content p .emoji-native {
	font-size: 1.4em;
	line-height: 14px;
	vertical-align: middle;
	position: relative;
	bottom: 1px;
}

.comment-content a {
	overflow-wrap: break-word;
	word-break: break-word;
}

.no-comments {
	text-align: center;
	font-size: 0.9em;
}

.comment-content .name {
	font-weight: 500;
	padding-bottom: 0.3em;
}

.comment-content .comment-input {
	padding: 0;
}

.comment-content blockquote {
	padding-left: 5px;
	border-left: 2px solid #e0e0e0;
}

.comment-time {
	/* text-transform: uppercase; */
	color: var(--editor-text-muted-color);
	font-size: 0.7em;
	opacity: 0.75;
	position: absolute;
	top: 8px;
	right: 9px;
}

.comment-actions {
	display: none;
	font-size: 13px;
	position: absolute;
	top: 10px;
	right: 20px;
}

.comment-actions.editing {
	display: block;
}

.comment-actions a {
	display: inline-block;
	margin-left: 0.8em;
	font-size: 0.9em;
}

.comment-input {
	padding: 1em 1.25em;
	background-color: var(--modal-bg);
	border-radius: calc(var(--inspector-border-radius) * 3);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.comment-info .comment-input {
	padding: 0.5em 0;
}

.comment-input .keyboard-shortcut {
	font-size: 86%;
	margin-left: 0.25em;
	color: var(--editor-text-muted-color);
}

.comment-input .cancel-edit-link {
	margin-right: 1em;
}

.no-comment-permission {
	white-space: normal;
	line-height: 1.2;
	color: var(--editor-text-color);
	font-size: 13px;
	text-align: left;
	justify-content: flex-start;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	margin: 0 calc(var(--toolbar-gap) * 2);
	padding-bottom: 1.5em;
}

.comment-input textarea {
	height: 5.5em;
	min-height: 5.5em;
	padding-bottom: 2em;
	background: var(--input-bg);
	font-size: 14px;
	max-height: calc(var(--max-comment-height) / 2);
}

.comment-input-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.comment-input-footer--left {
	display: flex;
	justify-content: flex-start;
	gap: 0.4em;
}

.comment-input-footer--right {
	flex-grow: 1;
	display: flex;
	justify-content: flex-end;
	gap: 0.4em;
}

.comment-input-footer button {
	max-width: 122px;
}

.comment-input-footer button span {
	min-width: 0;
	text-overflow: ellipsis;
	overflow: hidden;
}

.comment-unread-sidebar-badge {
	background: var(--unread-comment-color);
	color: var(--unread-comment-text-color);
	border-radius: 0.5em;
	padding: 1px 3px 1px 3px;
	border: 1px solid var(--editor-menu-bg);
	position: absolute;
	top: 2px;
	right: 3px;
	font-size: 10px;
	min-height: 0 !important;
	cursor: pointer;
}

.comment-thread-actions {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}

.comment-thread-actions > button {
	height: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0 1em;
	float: left;
	color: inherit;
	cursor: pointer;
	border: none;
	background: transparent;
}

.comment-thread-actions .navigation-icon .mq-icon {
	width: 12px;
	height: 12px;
}

.comment-thread-actions > button .mq-icon {
	fill: currentColor;
	height: 14px;
	width: 14px;
}

.comment-thread-actions > button.navigation-icon .mq-icon {
}

.comment-thread-actions > button.trash-icon .mq-icon {
}

.comment-thread-actions > button:hover .mq-icon {
	fill: var(--editor-active-color);
}

.comment-thread-actions > button.trash-icon:hover .mq-icon {
	fill: var(--error-text-color);
}

.comment-composer {
	position: relative;
	margin-bottom: 0.75em;
}

.comment-preview {
	min-height: 5.5em;
}

.comment-preview a {
	overflow-wrap: break-word;
	word-break: break-word;
}

.comment-preview .label {
	position: absolute;
	top: -1em;
	right: 0;
	font-size: 0.75em;
	margin: 0 0 4px 0;
	color: var(--editor-text-muted-color);
}

.comment-preview p,
.comment-preview .label + * {
	margin-top: 0;
}

.mq-comment-color-swatch {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	vertical-align: middle;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	margin-top: -2px;
}

.mq-comment-color-definition {
	font-family: Consolas, Monaco, monospace;
	color: var(--editor-text-color);
	font-size: 0.9em;
}

.mq-comment-preview-btn {
	white-space: nowrap;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
}

@keyframes bounceIn {
	0% {
		transform: translate(-50%, -50%) scale3d(1, 1, 1);
	}

	20% {
		transform: translate(-50%, -50%) scale3d(1.2, 1.2, 1.2);
	}

	40% {
		transform: translate(-50%, -50%) scale3d(0.9, 0.9, 0.9);
	}

	60% {
		transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1);
	}

	80% {
		transform: translate(-50%, -50%) scale3d(0.97, 0.97, 0.97);
	}

	100% {
		transform: translate(-50%, -50%) scale3d(1, 1, 1);
	}
}

@keyframes bounceInNoTranslate {
	0% {
		transform: scale3d(0, 0, 0);
	}

	20% {
		transform: scale3d(1.2, 1.2, 1.2);
	}

	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		transform: scale3d(1.1, 1.1, 1.1);
	}

	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}

.bounceIn {
	animation-name: bounceIn;
	animation-duration: 0.6s;
	animation-delay: 0.2s;
}

@keyframes bounceOut {
	0% {
		transform: translate(-50%, -50%) scale3d(1, 1, 1);
	}

	20% {
		transform: translate(-50%, -50%) scale3d(1.4, 1.4, 1.4);
	}

	40% {
		transform: translate(-50%, -50%) scale3d(1.4, 1.4, 1.4);
	}

	50% {
		transform: translate(-50%, -50%) scale3d(0.9, 0.9, 0.9);
	}

	60% {
		transform: translate(-50%, -50%) scale3d(0.7, 0.7, 0.7);
		opacity: 1;
	}

	80% {
		transform: translate(-50%, -50%) scale3d(0.2, 0.2, 0.2);
	}

	99% {
		transform: translate(-50%, -50%) scale3d(0, 0, 0);
	}

	100% {
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
	}
}

.bounceOut {
	animation-name: bounceOut;
	animation-duration: 0.6s;
	animation-delay: 0.3s;
}

.greenRipple {
	animation-name: greenRipple;
	animation-duration: 4s;
	animation-timing-function: ease-out;
	animation-iteration-count: 4;
}

@keyframes greenRippleTransform {
	0% {
		transform: scale(0.7);
		opacity: 1;
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}

/*
Step 1: First circle shows up
*/

@keyframes greenRipple {
	/*0 0 0 0px rgba(76,175,80,0.3)*/

	0% {
		box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.3), 0 0 0 0px rgba(76, 175, 80, 0),
			0 0 0 0px rgba(76, 175, 80, 0), 0 0 0 0px rgba(76, 175, 80, 0);
	}

	10% {
		box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.3), 0 0 0 2px rgba(76, 175, 80, 0.3),
			0 0 0 5px rgba(76, 175, 80, 0.3), 0 0 0 7px rgba(76, 175, 80, 0.3);
	}

	40% {
		box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.3), 0 0 0 5px rgba(76, 175, 80, 0),
			0 0 0 10px rgba(76, 175, 80, 0), 0 0 0 15px rgba(76, 175, 80, 0);
	}
	100% {
		box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.3), 0 0 0 7px rgba(76, 175, 80, 0),
			0 0 0 25px rgba(76, 175, 80, 0), 0 0 0 25px rgba(76, 175, 80, 0);
	}
}

.comment-marker.unread .comment-marker-animation-helper::before,
.comment-marker.unread .comment-marker-animation-helper::after {
	animation-name: greenRippleTransform;
}

.comment-marker-animation-helper::before,
.comment-marker-animation-helper::after {
	position: absolute;
	content: '';
	width: inherit;
	height: inherit;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background-color: rgba(76, 175, 80, 0.4);
	animation-duration: 4s;
	animation-timing-function: ease-out;
	opacity: 0;
}

.comment-marker-animation-helper::before {
	animation-delay: 1s;
}

/* Comments sidebar */

.mq-comments-sidebar {
	position: absolute;
	top: 0em;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
	color: var(--editor-text-color);
}

.comment-sidebar-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.7em;
	padding-right: 0;
}

.comment-sidebar-actions a {
	margin-left: 0.65em;
	display: flex;
}

/*TODO Get rid of this once @DB BPTLs the styles*/
.comment-sidebar-actions a:hover .mq-icon {
	fill: var(--editor-active-color);
}

.comment-sidebar-actions a.active .mq-icon {
	fill: var(--editor-active-color);
}

.comment-sidebar-actions a.disabled .mq-icon {
	fill: var(--editor-icon-color);
	opacity: 0.5;
}

.comment-sidebar-actions a.disabled:hover .mq-icon {
	fill: var(--editor-active-color);
	opacity: 1;
}

.state--zooming .comments-layer {
	opacity: 0;
}

.notification__options {
	--spacing: 15px;

	position: absolute;
	min-width: 230px;
	max-width: 270px;
	padding: var(--spacing) 0;
	background: var(--modal-bg);
	border-radius: 8px;
	border: 1px solid var(--editor-border-color);
	box-shadow: var(--mq-box-shadow);
	z-index: 100;
	font-size: 13px;
	font-variant: initial;
	color: var(--editor-text-color);
	text-transform: none;
}

.notification__options__content {
	padding: 0 var(--spacing);
}

.notification__options__footer {
	padding: calc(var(--spacing) / 1.5) var(--spacing) 0 var(--spacing);
}

.notification__options__footer--bordered {
	border-top: 1px solid var(--editor-menu-border-color);
}

/* Override any thread anchor styles */
.notification__options__footer a {
	height: initial;
	display: inline;
	padding: 0;
	float: initial;
	color: var(--link-color);
}

.notification__options__content p {
	margin-top: 0;
	color: var(--editor-text-muted-color);
}

.notification__options__content h5 {
	font-weight: bold;
	margin-top: 0;
}

.notification__options__content button {
	margin: 0.5em 0;
}

.notification__options__toggle {
	margin: 0 0 0.5em;
}

.notification__options label {
	display: flex;
	align-items: center;
	margin: 0.25em 0;
}

.notification__options label:last-of-type {
	margin-bottom: calc(var(--spacing) / 1.5);
}

.notification__options label input {
	margin-right: 0.6em;
	accent-color: var(--editor-text-color);
}

.notification__options svg {
	width: 16px;
	height: 16px;
	margin-right: 0.5em;
}

.follow__disabled {
	color: var(--editor-text-muted-color);
	opacity: 0.5;
}

.notification__toggle {
	font-size: 8px;
	margin-right: 14px;
}

/*End of comments*/

.mq-logo-btn {
	background: var(--mq-blue);
	border: 0;
	border-right: 1px solid var(--mq-blue);
	color: var(--mq-white);
	padding: 1px;
	display: inline-block;
	z-index: 1;
	position: relative;
}

.mq-logo-btn:hover {
	cursor: pointer;
}

#main-menu:hover .mq-logo-btn .mq-icon,
#main-menu .mq-logo-btn.active .mq-icon {
	transform: scale(1.2, 1.2);
}

.mq-logo-btn .mq-icon {
	width: 52px;
	height: 49px;
	transition: transform 0.2s;
	pointer-events: none;
}

.mq-logo-btn use {
	fill: currentColor;
}

.mq-megamenu {
	font-size: 0.875rem;
	padding: 1em;
	max-width: calc(100vw - 2em);
	overflow: auto;
	display: flex;
	align-items: stretch;
	background: var(--editor-bg);
	border: 1px solid var(--editor-border-color);
	border-left: 0;
	box-shadow: var(--mq-box-shadow-md);
	line-height: 2;
	position: absolute;
	white-space: nowrap;
	top: 100%;
	border-bottom-right-radius: calc(var(--inspector-border-radius) * 2);
}

.mq-megamenu-section {
	min-width: 15em;
	min-height: 16em;
	padding: 0 1em 0 1em;
	border-right: 1px solid var(--editor-border-color);
	display: inline-block;
	vertical-align: top;
}

.mq-megamenu-section:first-of-type {
	padding-left: 0;
}

.mq-megamenu-section:last-of-type {
	border-right: none;
	padding-right: 0;
}

.mq-megamenu-section h3 {
	text-transform: uppercase;
	margin: 0;
	font-weight: bold;
	font-size: 0.7em;
	color: var(--editor-text-muted-color);
	margin-bottom: 0.5em;
}

/*Usability: Makes the whole menu item clickable/tapable instead of just the link*/
.mq-megamenu-section li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--editor-text-color);
}

.mq-megamenu-section li a.disabled {
	color: var(--editor-text-color);
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

.mq-megamenu-section li a:hover.disabled {
	text-decoration: none;
}

.mq-megamenu-section li em {
	height: 100%;
	font-style: normal;
	font-size: 0.8em;
	color: var(--editor-text-muted-color);
}

.mq-megamenu-section li a:hover,
.mq-megamenu-section li a:focus {
	text-decoration: none;
	color: var(--link-color);
}

.moqups-about {
	padding-top: 1em;
	margin-top: 1.5em;
	border-top: 1px solid var(--editor-menu-border-color);
	line-height: 1.25;
	font-size: 0.9em;
}

.moqups-about h4 {
	font-size: 1.2em;
	letter-spacing: 0.2px;
	font-weight: bold;
	margin: 0.4em 0 0.2em;
}

.moqups-about small {
	font-size: 0.9em;
	color: var(--editor-text-color);
}

.moqups-about .qr-code {
	padding: 4px;
	background: var(--mq-white);
	border-radius: 4px;
	float: left;
	margin-right: 0.75em;
	box-shadow: var(--mq-box-shadow-xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.moqups-about .mq-icon {
	width: 62px;
	height: 62px;
}

.moqups-about .weight {
	font-size: 1.2em;
	/*font-weight: bold;*/
	/*clear: left;*/
}

.moqups-about .guidance {
	padding-top: 1em;
	margin-bottom: 0em;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--editor-text-muted-color);
	clear: left;
}

.moqups-about .weight span {
	font-weight: normal;
	font-size: 0.8em;
}

#breadcrumbs {
	width: calc(250px - 54px);
	margin-left: 5px;
}

.breadcrumbs {
	font-size: 0.8em;
	padding: 2px 1px 1px 3em;
	position: relative;
	border-radius: var(--inspector-border-radius);
}

.breadcrumbs.no-privacy-ui {
	padding: 2px 1px 1px 1px;
}

.breadcrumbs.offline {
	background: linear-gradient(to left, var(--editor-bg) 0%, var(--error-bg) 100%);
}

.breadcrumbs .project-privacy {
	position: absolute;
	top: 0;
	left: 0.25em;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 2.5em;
	height: 3em;
	padding-right: 0.5em;
	border: none;
	background: none;
	color: var(--link-color);
}

.breadcrumbs:not(.view-mode) .project-privacy:hover {
	cursor: pointer;
	color: var(--link-active-color);
}

.breadcrumbs .project-privacy .mq-icon {
	width: 1.5em;
	height: 1.5em;
}

.breadcrumbs .project-privacy-red .mq-icon {
	color: var(--error-text-color);
	fill: var(--error-text-color);
}

.breadcrumbs .title-wrapper {
	display: block;
	transition: all 0.35s;
	border-radius: var(--inspector-border-radius);
}

.breadcrumbs .title-wrapper.saving {
	color: var(--warning-text-color);
	background: var(--warning-bg);
}

.breadcrumbs .title-wrapper.saved {
	color: var(--success-text-color);
	background: var(--success-bg);
}

.breadcrumbs .project-title {
	font-weight: 500;
	font-size: 13px;
	line-height: 1.2;
	cursor: default;
	box-sizing: border-box;
	padding: 0 5px;
	margin: 0;
	border: 1px solid transparent;
}

.breadcrumbs .current-page-title {
	display: block;
	line-height: 1.2;
	font-size: 12px;
	box-sizing: border-box;
	cursor: default;
	padding: 0 5px;
	margin: 2px 0 0;
	border: 1px solid transparent;
	color: var(--editor-text-muted-color);
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.breadcrumbs .title-wrapper:not(.view-mode):hover {
	background-color: var(--editor-semiselection-bg);
	cursor: text;
}

.breadcrumbs .current-page-title .mq-icon {
	width: 0.5em;
	height: 0.5em;
}

input.title-rename-input {
	padding: 0 5px;
	border-radius: var(--inspector-border-radius);
	font-size: 13px;
	line-height: 1.2;
	box-sizing: border-box;
	width: 100%;
	background: var(--input-bg);
	color: var(--input-text-color);
	border: 1px solid var(--input-border-color);
	margin: 0;
	box-shadow: var(--mq-box-shadow);
}

.breadcrumbs input.title-rename-input:last-child {
	margin: 2px 0 0;
	font-size: 12px;
}

.breadcrumbs .breadcrumbs-page-title {
	display: flex;
}
.breadcrumbs .breadcrumbs-page-label {
	color: var(--mq-white);
	border-radius: 3px;
	max-width: 84px;
	padding-right: 4px;
	padding-left: 4px;
	float: left;
	margin-right: 5px;
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
}

/* TOOLBAR */

.mq-zone {
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--editor-text-color);
}

.mq-zone-left {
	z-index: 4;
	justify-content: flex-start;
}

.mq-zone-center {
	z-index: 3;
	position: relative;
	flex-grow: 1;
}

.mq-zone-right {
	justify-content: flex-end;
	padding-right: 0.2em;
}

.top-announcement #toolbar-wrapper {
	height: 100px;
}
.top-announcement #toolbar-wrapper .mq-zone {
	top: 50px;
	background-color: var(--editor-bg);
}
.top-announcement #stage-wrapper {
	top: 100px;
}
.top-announcement .toolbar-notification {
	left: 0;
}

.toolbar-notification {
	position: absolute;
	top: 0;
	left: 54px;
	padding: 0 50px;
	right: 0;
	box-sizing: border-box;
	min-height: 50px;
	overflow: hidden;
	z-index: 90;
	display: flex;
	align-items: center;
	line-height: 1.2;
	justify-content: center;
	text-align: center;
	text-overflow: ellipsis;
	color: var(--mq-white);
	background: var(--mq-blue-500);
	gap: 0.4em;
}

.toolbar-notification span {
}

.toolbar-close {
	position: absolute;
	right: 0;
	top: 0;
	height: 50px;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.toolbar-notification--danger {
	background: var(--mq-orange-500);
}

.toolbar-notification a {
	color: inherit;
	font-weight: bold;
	text-decoration: underline;
	transition: opacity 0.2s var(--mq-transition);
}

.toolbar-notification a:hover {
	opacity: 0.8;
}

.toolbar-notification em {
	font-size: 1.5em;
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
}

.toolbar-notification .mq-icon {
	fill: currentColor;
}

.mq-zone-right.view-mode {
	padding-right: 0.6em;
}

.mq-zone-right--expanded.view-mode {
}

.mq-zone-center {
	color: var(--editor-text-color);
}

.mq-zone-center.view-mode {
}

.mq-zone-center--contracted.view-mode {
}

.mq-zone-center.no-session .mq-toolbar-separator {
	width: 1.5em;
}

.mq-toolbar {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	white-space: nowrap; /* Keeps items from wrapping on low res */
}

.mq-toolbar-section {
	display: inline-block;
}

.mq-toolbar-btn {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	pointer-events: all;
	display: flex;
	flex-direction: column;
	align-items: center;
	vertical-align: middle;
	line-height: 1;
	min-width: 4.4em;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 0.2em;
	transition: opacity 0.15s ease-in, color 0.1s var(--mq-transition);
	text-align: center;
	background: none;
}

.mq-toolbar-btn[disabled] {
	pointer-events: none;
}

.mq-toolbar-btn.compact {
	min-width: 3.5em;
}

.mq-toolbar-btn.active {
	/*border-color: var(--editor-active-color);*/
	background: var(--editor-active-bg);
	color: var(--editor-active-color);
	/*box-shadow: var(--mq-box-shadow-inset);*/
}

.mq-toolbar-btn.mq-inspect-btn.active {
	border-color: transparent;
	background: transparent;
	color: var(--editor-active-color);
	box-shadow: none;
}

.mq-toolbar-btn.active .mq-icon,
.mq-toolbar-btn.mq-inspect-btn.active .mq-icon,
.mq-toolbar-btn.active .must-icon,
.mq-toolbar-btn.mq-inspect-btn.active .must-icon {
	color: currentColor;
	fill: currentColor;
}

.mq-toolbar-btn:hover {
	text-decoration: none;
	color: var(--editor-active-color);
}

.mq-toolbar-btn:hover .mq-icon,
.mq-toolbar-btn:hover .must-icon {
	color: currentColor;
	fill: currentColor;
}

.mq-toolbar-btn .mq-icon {
	width: 24px;
	height: 24px;
	margin: 0 auto;
	display: block;
	color: var(--editor-icon-color);
	fill: currentColor;
	transition: color 0.1s var(--mq-transition);
}

.mq-toolbar-btn .must-icon {
	font-size: 24px; /* em @must icon sizing */
	color: var(--editor-icon-color);
}

.mq-toolbar-btn .mq-icon-menu {
	padding-right: 0.75em;
}

.mq-toolbar-dropdown {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

.mq-toolbar-dropdown-menu {
	position: absolute;
	top: 100%;
	padding: 1em;
	background: var(--editor-menu-bg);
}

.mq-sidebar-dropdown {
	position: relative;
	vertical-align: middle;
}
.mq-sidebar-dropdown span {
	font-size: 0.9em;
}

.mq-toolbar-btn span {
	font-size: 10px;
	margin-top: 4px;
	/*display: none;*/
}

.mq-toolbar-separator {
	display: inline-block;
	width: 2em;
	height: 2em;
	position: relative;
}

.mq-toolbar-separator:before {
	content: ' ';
	position: absolute;
	top: 4px;
	bottom: 4px;
	width: 1px;
	left: calc(50% - 1px);
	background: var(--editor-border-color);
}

.mq-separator-label {
	text-transform: uppercase;
	color: var(--editor-text-muted-color);
	font-size: 0.6em;
}

.mq-page-nav-button {
	min-width: 2.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 4px;
	height: 30px;
}

.mq-page-counter {
	display: inline-block;
	vertical-align: middle;
	font-size: 13px;
	padding: 0 0.25em 0 0;
	white-space: nowrap;
}

.mq-page-counter input {
	text-align: center;
	display: inline-block;
	width: 3em;
	padding: 0.25em;
}

.mq-page-counter input.compact {
	width: 2em;
}

.toolbar__fl__message {
	position: fixed;
	top: 5em;
	left: 50%;
	width: 780px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 3em 1em 1.5em;
	border-radius: 10px;
	box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.09);
	background: #fff;
	font-size: 16px;
	min-width: 500px;
}

.toolbar__fl__message p:first-of-type {
	margin-top: 0;
}
.toolbar__fl__message p:last-of-type {
	margin-bottom: 0;
}

.toolbar__fl__message .head {
	font-weight: bold;
}

.toolbar__fl__message .info {
	font-size: 0.7em;
	color: #929292;
}

.toolbar__fl__message .mq__button {
	height: 40px;
	font-size: 0.8em;
	font-weight: bold;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.toolbar__fl__message .mq__button:nth-of-type(2) {
	margin-left: 0.8em;
}

.toolbar__fl__message .mq__button__google {
	box-shadow: none;
	font-weight: normal;
	height: 40px;
	padding: 1px 8px;
}

.toolbar__fl__message .mq__button__google svg.mq-icon {
	margin-left: -7px;
}

.fl__message__toggle {
	display: flex;
	position: absolute;
	right: 0.75em;
	top: 0.75em;
}

.toolbar__fl__actions {
	display: flex;
	align-items: center;
}

.toolbar__auth__button {
	padding: 0 0.5em;
	font-weight: bold;
	white-space: nowrap;
}

.vertical-icon-menu {
	text-align: center;
	color: var(--editor-text-color);
	height: 100%;
	/*text-transform: uppercase;*/
	position: relative;
	width: 54px;
	/*font-weight: 500;*/
	background: var(--editor-bg);
}

.vertical-icon-menu__label {
	font-size: 9px;
	letter-spacing: -0.02em;
}

.vertical-icon-menu > li {
	display: block;
	padding: 0;
	position: relative;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	/*border-bottom: 1px solid #bbb;*/
	/*transition: all 0.2s;*/
}

.vertical-icon-menu > .active {
	background: var(--editor-menu-bg);
	color: var(--editor-active-color);
	border-color: var(--editor-border-color);
	/*box-shadow: 0px 1px 2px rgba(0,0,0,0.3);*/
}

/* Anti-OCD for @emiltamas */
.vertical-icon-menu > li:first-child {
	border-top: none;
}

.vertical-icon-menu > li > button {
	display: block;
	color: inherit;
	padding: 7px 0 5px;
	text-decoration: none;
	line-height: 1;
	background: none;
	border: none;
	width: 54px;
}

.vertical-icon-menu > li > button:hover {
	cursor: pointer;
}

.vertical-icon-menu > li > button > span {
	display: inline-block;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 10px;
	min-height: 11px; /* safari cutting out fonts fix */
	margin-top: 2px;
}

.vertical-icon-menu > li > button > .comment-unread-sidebar-badge {
	width: auto;
	min-width: 1em;
	max-width: 2em;
	height: 1em;
}

.vertical-icon-menu .mq-icon {
	display: block;
	margin: 0 auto 2px;
	padding: 0;
	width: 24px;
	height: 24px;
	stroke: none;
	color: var(--editor-icon-color);
	fill: var(--editor-icon-color);
	transition: color 0.2s var(--mq-transition), fill 0.2s var(--mq-transition);
}

.vertical-icon-menu > .active .mq-icon {
	color: var(--editor-active-color);
	fill: var(--editor-active-color);
}

.vertical-icon-menu > li:not(.active) > button:hover,
.vertical-icon-menu > li:not(.active) > button:hover .mq-icon {
	/*color: var(--editor-active-color);
	fill: var(--editor-active-color);*/
}

.vertical-icon-menu > .active:after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 1px;
	background: var(--editor-menu-bg);
	z-index: 2;
	content: '';
}

#sidebar .vertical-icon-menu {
	float: left;
	position: relative;
	z-index: 10;
	margin-top: 0.25rem;
}

#sidebar .moqups-whats-new-link .mq-icon {
	fill: var(--mq-orange-500);
	width: 1.8em;
	height: 1.8em;
}

#sidebar .vertical-icon-menu.sidebar-bottom-actions {
	position: absolute;
	background: transparent;
	height: auto;
	bottom: 0;
}

#sidebar .vertical-icon-menu.sidebar-bottom-actions > li {
	padding-top: 1em;
}

#sidebar .vertical-icon-menu .mq-sidebar-add-template {
	display: flex;
	padding: 0.5em 0 0.45em;
	border: none;
}

#sidebar .vertical-icon-menu .mq-sidebar-add-template span {
	flex-grow: 1;
	display: flex;
}

#sidebar .vertical-icon-menu .mq-sidebar-add-template button {
	transition: all 0.2s ease-in-out;
	transition-delay: 0.05s;
	display: block;
	width: 100%;
	flex-grow: 1;
	padding: 0.5em 0;
	background: none;
	border: none;
}

#sidebar .vertical-icon-menu .mq-sidebar-add-template svg {
	color: var(--link-color);
	fill: var(--link-color);
	margin: auto;
	width: 24px;
	height: 24px;
	padding: 1px;
}

#sidebar .vertical-icon-menu .mq-sidebar-add-template button:hover {
	cursor: pointer;
}

#sidebar .vertical-icon-menu .mq-sidebar-add-template button:hover svg {
	color: var(--link-active-color);
	fill: var(--link-active-color);
}

#sidebar-content {
	height: 100%;
	position: relative;
	background: var(--editor-menu-bg);
	border-left: 1px solid var(--editor-border-color);
	box-sizing: border-box;
	/*padding: 0.5em;*/
	margin-left: 54px;
}
/*Need a better way to handle this...ideally without increasing to 50px margin left*/
.sidebar-content-viewer-mode {
	margin-left: 0 !important;
}

#sidebar.collapsed {
	width: auto !important;
	border-bottom: 0 !important;
}

#sidebar.collapsed #sidebar-content,
#sidebar.collapsed .mq-sidebar-resize,
#sidebar.collapsed .vertical-icon-menu > li.active:after {
	display: none;
}

.sidebar-pane {
	height: 100%;
	display: none;
	font-size: 0.875rem;
}

.sidebar-pane-active {
	display: block;
}

.force-visible {
	display: block !important;
}

.sidebar-pane-header {
	padding: 0 9px;
	min-height: var(--sidebar-header-height);
	border-bottom: 1px solid var(--editor-menu-border-color);
	background: var(--editor-menu-bg);
	box-sizing: border-box;
	display: flex;
	gap: 5px;
	justify-content: stretch;
	align-items: center;
}

.sidebar-pane-header .mq-searchbox {
	width: 100%;
	margin: 9px 0;
}
/*
.scrollable {
	overflow-y: scroll;
}
*/
.disable-pointer-events {
	pointer-events: none;
}

.sidebar-pane-header--absolute {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

.sidebar-pane-header-label {
	color: var(--editor-text-color);
	text-transform: uppercase;
	font-size: 10px;
	min-height: 24px;
}

.mq-sidebar-open-pages + .sidebar-pane-header-label {
	border-top: 1px solid var(--editor-menu-border-color);
}

.sidebar-pane-info-box {
	border-radius: calc(var(--inspector-border-radius) * 2);
	background-color: var(--editor-menu-hover-color);
	/*background: linear-gradient(to bottom, rgb(248, 248, 248) 0%, rgba(255, 255, 255, 0) 100%);*/
	color: var(--editor-text-color);
	margin: 0.75em 9px 0;
	padding: 0.75em 1em;
	display: block;
}

.sidebar-pane-info-box h3 {
	font-size: 12px;
	font-weight: 500;
	margin: 0;
}

.sidebar-pane-info-box p {
	font-size: 12px;
	font-weight: normal;
	color: var(--editor-text-muted-color);
}

.sidebar-pane-info-box a {
	font-size: 12px;
	font-weight: 500;
	display: inline-block;
	border-radius: 3px;
	background-color: var(--button-primary-bg);
	padding: 4px 10px;
	margin-top: 0.5em;
	color: var(--button-primary-text-color);
}

.sidebar-pane-info-box a .mq-icon {
	fill: var(--button-primary-text-color);
}

.sidebar-pane-info-box a:hover {
	text-decoration: none;
	background-color: var(--button-primary-hover-color);
}

.mq-sidebar-info-popover {
	margin-top: 0.25em;
}

.mq-sidebar-info-popover .mq-icon {
	fill: #c0c0c0;
	width: 1.25em;
	height: 1.25em;
}

.mq-sidebar-info-popover:hover .mq-icon {
	fill: #006be5;
}

#icons-sidebar-pane .mq-link-dropdown {
	text-align: left;
	padding: 0.5em 0 0.5em 0;
}

.mq-sidebar-info {
	color: var(--editor-text-color);
	padding: 1em;
	text-align: center;
}

.sidebar-pane-header .mq-link-dropdown {
	font-size: 13px;
	max-width: 16em;
	/*flex-grow: 1;*/
}

.sidebar-pane-content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	overflow: auto;
}

#sidebar-content.has-stencil-counter .sidebar-pane-content {
	bottom: 68px;
}

.sidebar-footer {
	z-index: 9;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.sidebar-pane-header select,
.sidebar-pane-header input {
	width: 100%;
}

.mq-sidebar-list {
	text-align: center;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

.mq-sidebar-sub-list {
	/*margin-left: 1.5em;*/
}

.sidebar-pane-content-outline:not(.searching)
	.mq-sidebar-list-page:not(.expanded)
	> .mq-sidebar-list-page__inner
	> .mq-sidebar-sub-list,
.sidebar-pane-content-outline.searching .mq-sidebar-list-page:not(.matches),
.sidebar-pane-content-outline.searching
	.mq-sidebar-list-page.matches:not(.expanded)
	> .mq-sidebar-list-page__inner
	> .mq-sidebar-sub-list {
	display: none;
}

.mq-sidebar-sub-list.hidden {
	display: none;
}

.sidebar-pane-content-outline .expand,
.sidebar-pane-content-outline .mq-sidebar-list-page-label {
	padding-left: 4px;
}

.sidebar-pane-content-outline .expand + .mq-sidebar-list-page-label {
	padding-left: 2px;
}

.mq-outline-icon {
	width: 12px;
	height: 12px;
	margin: 2px; /* to fill 16px box */
	align-items: center;
	display: flex;
	flex: none;
	--icon-c-main: currentColor;
}

.mq-outline-icon:not(.expand .mq-outline-icon) {
	opacity: 0.5;
}

.mq-outline-interactivity-marker {
	width: 12px;
	height: 12px;
	margin: 2px; /* to fill 16px box */
	align-items: center;
	display: flex;
	flex: none;
	color: var(--interaction-accent);
}

#stencil-sidebar-pane .section-header,
#comments-sidebar-pane .section-header {
	position: relative;
	font-weight: 500;
	font-size: 11px;
	color: var(--link-color);
	white-space: nowrap;
	/*We'll see*/
	/*text-transform: uppercase;*/
	text-align: left;
	padding: 0.3em 9px;
	box-sizing: content-box;
	background: var(--editor-menu-bg);
	border-bottom: 1px solid var(--editor-menu-border-color);
	border-top: 1px solid var(--editor-menu-border-color);
	/*
		Small hack so the rows with uneven column numbers don't get gut
	+-----------------+
	|  Section header |
	+--------+--------+
	|        |        |
	|        |        |
	|        |        |
	+-----------------+
	|        |        |
	|        |        |
	|        |        |
	+--------+        <----+
	|  Section header |    |
	+-----------------+    |
						   +
	*/
	margin-top: -1px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#stencil-sidebar-pane .section-header:hover,
#comments-sidebar-pane .section-header:hover {
	background-color: var(--editor-menu-hover-color);
}

#stencil-sidebar-pane .expand,
#comments-sidebar-pane .expand,
#icons-sidebar-pane .expand {
	width: 10px;
	height: 10px;
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.1s ease-in;
	transform: rotate(0deg);
}

#stencil-sidebar-pane .expand.collapsed,
#comments-sidebar-pane .expand.collapsed,
#icons-sidebar-pane .expand.collapsed {
	transform: rotate(90deg);
}

#stencil-sidebar-pane .expand .mq-icon,
#comments-sidebar-pane .expand .mq-icon,
#icons-sidebar-pane .expand .mq-icon {
	width: 10px;
	height: 10px;
	fill: var(--editor-text-color);
}

#stencil-sidebar-pane .mq-sidebar-list {
	background: var(--stencil-bg);
}

#stencil-sidebar-pane .mq-sidebar-list-item {
	border-color: var(--stencil-border-color);
}

#stencil-sidebar-pane .mq-sidebar-list-item:hover {
	background-color: var(--stencil-hover-color);
}

#stencil-sidebar-pane .section-header {
	color: var(--stencil-header-color);
}

.section-header-collapsed-extra-results {
	font-size: 10px;
	max-width: 60px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: normal;
	text-transform: lowercase;
	border-radius: 14px;
	margin-left: 6px;
	margin-right: auto;
	padding: 0 4px;
	background: var(--new-accent);
	color: var(--new-text-color);
	height: 14px;
	white-space: nowrap;
	line-height: 1.4;
}

#stencil-sidebar-pane .mq-sidebar-list.collapsed {
	display: none;
}
.comment-unread-sidebar-number {
	background: var(--unread-comment-color);
	color: var(--unread-comment-text-color);
	border-radius: 0.4em;
	padding: 0 0.3em;
	font-size: 10px;
}

.mq-sidebar-list-item {
	float: left;
	width: 50%;
	height: 0;
	padding-bottom: 50%;
	box-sizing: border-box;
	border-bottom: 1px solid var(--editor-menu-border-color);
	position: relative;
	cursor: pointer;
}

.mq-sidebar-list-item:hover {
	background-color: var(--editor-menu-hover-color);
}

.mq-sidebar-list-item:nth-child(2n + 1) {
	border-right: 1px solid var(--editor-menu-border-color);
}

.extra-rows-1 .mq-sidebar-list-item {
	width: 33.33%;
	padding-bottom: 33.33%;
	border-right: 1px solid var(--editor-menu-border-color);
}

.extra-rows-1 .mq-sidebar-list-item:nth-child(3n) {
	border-right: none;
}

.extra-rows-2 .mq-sidebar-list-item {
	width: 25%;
	padding-bottom: 25%;
	border-right: 1px solid var(--editor-menu-border-color);
}

.extra-rows-2 .mq-sidebar-list-item:nth-child(4n) {
	border-right: none;
}

.mq-sidebar-list-item .mq-icon {
	width: 60px;
	height: 40px;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--mq-black);
}

.mq-sidebar-list-item.mq-sidebar-icon-item {
	width: 33.33%;
	padding-bottom: 33.33%;
	border-right: 1px solid var(--editor-menu-border-color);
}

.mq-sidebar-list-item.mq-sidebar-icon-item:nth-child(3n) {
	border-right: none;
}

.extra-rows-1 .mq-sidebar-list-item.mq-sidebar-icon-item {
	width: 25%;
	padding-bottom: 25%;
	border-right: 1px solid var(--editor-menu-border-color);
}

.extra-rows-1 .mq-sidebar-list-item.mq-sidebar-icon-item:nth-child(4n) {
	border-right: none;
}

.extra-rows-2 .mq-sidebar-list-item.mq-sidebar-icon-item {
	width: 20%;
	padding-bottom: 20%;
	border-right: 1px solid var(--editor-menu-border-color);
}

.extra-rows-2 .mq-sidebar-list-item.mq-sidebar-icon-item:nth-child(5n) {
	border-right: none;
}

.mq-sidebar-template-item {
	overflow: hidden;
}

.mq-sidebar-icon-item .mq-icon {
	width: 50%;
	height: 50%;
	top: 50%;
	left: 50%;
}

.mq-sidebar-image-item img {
	max-width: 80%;
	max-height: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.mq-sidebar-template-item img {
	max-width: 180%;
	max-height: 100%;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5, 0.5);
	pointer-events: none;
}

.mq-sidebar-image-item strong,
.mq-sidebar-template-item strong {
	position: absolute;
	top: 2%;
	left: 2%;
	width: 1em;
	height: 1em;
	font-size: 115%;
	background: #fff;
	color: #000;
	text-align: center;
	line-height: 1em;
	font-weight: 500;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	transition: opacity 0.15s;
	border-radius: 5px;
}

.mq-sidebar-image-item:hover strong,
.mq-sidebar-template-item:hover strong {
	pointer-events: all;
	opacity: 1;
}

.sidebar-pane-content-pages {
	padding: 0.5em;
}

.mq-sidebar-list-no-content {
	font-size: 12px;
	color: var(--editor-text-muted-color);
	background-color: var(--editor-bg);
	border-radius: calc(var(--inspector-border-radius) * 1.5);
	display: block;
	padding: 0.75em 1em;
	margin: 0.75em 9px;
	text-align: center;
}

.mq-sidebar-list-separator {
	font-size: 12px;
	font-style: italic;
	color: var(--editor-text-muted-color);
	display: block;
	text-align: center;
}

.mq-sidebar-list-no-content strong {
	color: var(--editor-text-color);
}

.mq-sidebar-list-no-content a {
	display: inline-block;
	padding: 5px;
}

.mq-sidebar-list-no-content--pinned {
	padding: 0.2em;
	color: var(--editor-text-muted-color);
	width: 100%;
}

/*
	PageList / Outline items
	------------------------

	In the comments below, we use `outline` to
	refer to both the Pages and the Outline panes.

	The top-level hierarchy is:

		.mq-sidebar-list-page
			.mq-sidebar-list-page__inner
				.mq-sidebar-list-page__title
 */

/*
	The wrapper element for each item in the outline.
	(Containing both the item and its children)
 */
.mq-sidebar-list-page {
	text-align: left;
	display: block;
	overflow: visible;
	position: relative;
	cursor: default;
}

/*
	Unintuitively, due to how the Outline panel
	is built with Mustache templates, the outermost wrapper
	(.mq-sidebar-list-page) will not update its classes
	based on changes to an item's state. Therefore, we delegate
	these classes to an inner wrapper.

	The following classes on .mq-sidebar-list-page are, however,
	updated from JavaScript (outline-delegate.js):

		* .selected
		* .expanded
		* .matches
 */
.mq-sidebar-list-page__inner {
}

/*
	Icons, in general, need to be filled with the same color
	as the text next to them.
 */
.mq-sidebar-list-page .mq-icon {
	fill: currentColor;
	width: 14px;
	height: 14px;
}

/*
	A "line" in outline,
	which does not contain the item's children.
	This is the default state.
 */
.mq-sidebar-list-page__title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	-webkit-user-select: none;
	user-select: none;
	color: var(--editor-text-color);
	position: relative;
	height: 2em;
}

/*
	A hidden item in the outline will be grayed out,
	and so will all the item's children.
 */
.mq-sidebar-list-page__inner--hidden .mq-sidebar-list-page__title {
	color: var(--editor-text-muted-color) !important;
	opacity: 0.75;
}

/* 
	Somehow I predicted text color var before color labeling 
	and it works with non-colored pages, but keeping an eye on this one.
*/
.mq-sidebar-list-page__inner--hidden .mq-sidebar-list-page__title.selected {
	color: var(--text-color) !important;
}

.mq-sidebar-list-page__inner--hidden .mq-sidebar-list-page__title .page .mq-icon {
	opacity: 0.75;
}

.mq-sidebar-list--targetselection
	.mq-sidebar-list-page__title:not(.mq-sidebar-list-page__title--folder):not(
		.mq-sidebar-list-page__title--master
	):not(.mq-sidebar-list-page__title--deleted):hover {
	cursor: crosshair;
	outline: 1px var(--interaction-accent) solid;
	outline-offset: -1px;
}

.mq-sidebar-list--targetselection .mq-page-context-button {
	visibility: hidden !important;
	pointer-events: none;
}

@keyframes blinkTarget {
	0% {
		background: var(--interaction-bg);
	}
	100% {
		background: transparent;
	}
}

.mq-sidebar-list--targetselection li {
	background: transparent;
	animation: blinkTarget 0.8s;
	animation-timing-function: ease-in-out;
}

/*
	Selected state of a normal item in the outline.

	1. The item's children should have a lighter background,
	if they themselves are not selected.

	2. The item itself (the row) should be colored
	in the blue accent color (--mq-blue).
 */

/*
	This applies to the item's children,
	only relevant to the Outline pane.
 */
.mq-sidebar-list-page__title {
}

/*
	...and this applies to the item itself.
 */

/*
	1. in the Outline panel, a bit of a drilldown
	to select the topmost __title element
*/
.mq-sidebar-list-page.selected >
	.mq-sidebar-list-page__inner >
	.mq-sidebar-list-page__title,

/* 2. in the Pages panel */
.mq-sidebar-list-page__title.selected {
	--bg-color: var(--editor-selection-bg);
	--text-color: var(--editor-selection-text-color);
	--icon-color: var(--editor-bg);
	background-color: var(--bg-color);
	color: var(--text-color);
}

/* in dark mode use darkColor variable */
html[data-theme='dark'] .mq-sidebar-list-page__title.selected {
	--text-color: var(--dark-color) !important;
	--icon-color: var(--editor-selection-text-color);
}

.mq-sidebar-assets-grid-item.selected {
}

.mq-sidebar-list-page.selected .mq-sidebar-list-page__title {
	background-color: var(--editor-semiselection-bg);
}

.mq-sidebar-page-label-menu .contextmenu__item__label {
	padding: 9px;
	min-width: 150px;
}

/* separate label colors from context menu item selection color */
.contextmenu__item:hover > .contextmenu__item__label .mq-page-label-color-row-item div {
	border: 1px solid rgba(255, 255, 255, 0.9);
}

.contextmenu__item:hover > .contextmenu__item__label .mq-page-label-menu-item div {
	outline: 1px solid rgba(255, 255, 255, 0.7);
	background: var(--input-bg);
}

.mq-sidebar-page-label-menu__dropdown {
	display: flex;
	margin-top: 6px;
}

.dropdown__menu__option .mq-page-label-color-row-item + span,
.mq-sidebar-page-label-menu__dropdown-title {
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mq-sidebar-page-label-menu__dropdown .mq-page-label-color-row-item {
	margin-right: 4px;
}

.mq-sidebar-page-label-menu__dropdown .mq-page-label-color-row-item div {
	width: 20px;
	height: 20px;
}

.dropdown__menu__option .mq-page-label-color-row-item {
	margin-right: 8px;
}

.dropdown__menu__option .mq-page-label-color-row-item div {
	width: 20px;
	height: 20px;
}

.mq-page-label-color-row-item svg {
	width: 16px;
	height: 16px;
	fill: var(--mq-white) !important;
}

.mq-page-label-color-row-item .inverted svg {
	fill: var(--mq-black) !important;
}

/*
	Selected state of a symbol item in the outline.

	1. The item's children should have a lighter background,
	if they themselves are not selected.

	2. The item itself (the row) should be colored
	in the symbol accent color (--symbol-accent).

	It has precedence over the default (blue) style!
 */

/*
	Color the item's children...
 */

/* Either all children of a selected symbol */
.mq-sidebar-list-page.selected
	.mq-sidebar-list-page__inner--symbol
		.mq-sidebar-list-page__title,

/*
	...or the children of a selected item from inside a symbol
	(which might be of another color otherwise!)
*/
.mq-sidebar-list-page__inner--symbol
	.mq-sidebar-list-page.selected
		.mq-sidebar-list-page__title {
	background-color: var(--symbol-light);
	color: var(--symbol-text-color);
}

.mq-sidebar-list-page__inner--symbol .mq-sidebar-list-page__title {
	color: var(--symbol-text-color);
}

/*
	...while this applies to the item itself.
 */
.mq-sidebar-list-page.selected
	> .mq-sidebar-list-page__inner--symbol
	> .mq-sidebar-list-page__title,
.mq-sidebar-list-page__inner--symbol
	.mq-sidebar-list-page.selected
	> .mq-sidebar-list-page__inner
	> .mq-sidebar-list-page__title {
	background-color: var(--symbol-accent);
	color: var(--mq-white);
}

.mq-sidebar-list-page.selected .page .mq-icon,
.mq-sidebar-list-page__title.selected .page .mq-icon {
	fill: var(--icon-color);
}

.mq-sidebar-list-page.selected .has-master,
.mq-sidebar-list-page__title.selected .has-master {
	color: currentColor;
}

.mq-sidebar-list-page__title .expand,
.mq-sidebar-list-page.selected .folder .mq-icon {
	fill: var(--editor-text-color);
}

.mq-sidebar-list-page__title .expand,
.mq-sidebar-list-page__title .folder {
	margin-right: 4px;
	text-align: center;
}

.mq-sidebar-list-page__title .expand,
.mq-sidebar-list-page__title .folder .mq-icon {
	width: 16px;
	height: 16px;
	fill: var(--folder-color);
}

.mq-sidebar-list-page__title .expand {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0;
	width: 16px;
	height: 16px;
	flex: none;
	fill: var(--editor-text-color);
}

.mq-sidebar-list-page__title .page,
.mq-sidebar-list-page__title .folder {
	margin-right: 4px;
	max-height: 100%;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mq-sidebar-list-page__title .page .mq-icon {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	fill: var(--input-bg);
	stroke: var(--editor-icon-color-tone);
}

.mq-sidebar-list-page__title .expand .mq-icon {
	width: 0.6em;
	height: 0.6em;
}

.mq-sidebar-list-controls {
	margin: 0 0 0.5em 0;
}

.mq-sidebar-list-page.droptarget .mq-sidebar-list-page__title {
	background: none !important;
	color: var(--editor-active-color);
}
.targeting .mq-sidebar-list-page {
	cursor: crosshair !important;
}

.mq-page-context-button-group {
	position: absolute;
	right: 0.5em;
	top: 50%;
	transform: translate(0, -50%);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
}

.mq-page-context-button {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0.1em;
	opacity: 0.5;
	/*color: #333;*/
	visibility: hidden;
	pointer-events: none;
}

.mq-page-context-button:hover {
	opacity: 0.8;
}

/*
	* Don't allow locking objects inside groups from the Outline panel.
	* Don't allow locking objects inside symbols.
*/
.mq-sidebar-sub-list .mq-lock-class,
.mq-sidebar-list-page__inner--symbol-contained .mq-lock-class {
	display: none;
}

/*
	When a list item is selected, icons should be white-based
	rather than black based. We have two different selectors
	due to a slight inconsistency between the Outline and the Pages tab.
 */
.mq-sidebar-list-page.selected
	> .mq-sidebar-list-page__inner
	> .mq-sidebar-list-page__title
	.mq-page-context-button,
.mq-sidebar-list-page__title.selected .mq-page-context-button {
	color: var(--selection-text-color);
}

.mq-page-context-button .mq-icon {
	fill: currentColor;
}

html:not(.unselectable) .mq-sidebar-list-page__title:hover .mq-page-context-button {
	visibility: visible;
	pointer-events: inherit;
}

.mq-page-context-button--active {
	visibility: visible;
	pointer-events: inherit;
	opacity: 1;
}

.mq-sidebar-list-page-label {
	display: flex;
	margin-right: 2.75em;
	align-items: center;
	gap: 2px;
	flex-grow: 1;
}

.mq-page-label-color-row {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 290px;
}

.page-label__select {
	margin-left: 0;
	max-width: none;
}

.label__selected {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-grow: 1;
	cursor: pointer;
}

.label__selected svg:last-of-type {
	margin-left: auto;
}

.label__selected span {
	margin-left: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}

.mq-page-label-color-row-item.mq-page-label-selected div {
	outline: 2px solid var(--editor-active-color);
	outline-offset: 2px;
}

.mq-page-label-color-row-item,
.mq-page-label-menu-item {
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.mq-page-label-color-row-item.mq-page-label-used div:after {
	content: '';
	background: var(--mq-white);
	width: 10px;
	height: 2px;
	/*transform: rotate(45deg);*/
	display: inline-block;
	border-radius: 8px;
	box-shadow: var(--mq-box-shadow-xs);
	color: var(--mq-white);
	text-align: center;
}

.mq-page-label-color-row-item div,
.mq-page-label-menu-item div {
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border-radius: 3px;
	border: 1px solid transparent;
	display: flex;
	align-items: center;
	position: relative;
	justify-content: center;
}

.mq-page-label-color-row-item div:hover {
	border: 1px solid rgba(125, 125, 125, 0.25);
}

.mq-page-label-menu-item div {
	margin-right: 8px;
	width: 16px;
	height: 16px;
}

.mq-page-label-menu-item .mq-icon {
	width: 14px;
	height: 14px;
	fill: var(--mq-white) !important;
}

.mq-page-label-menu-item .inverted .mq-icon {
	fill: var(--mq-black) !important;
}

.mq-page-label-item-title {
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 200px;
}

.mq-sidebar-list-page__title-container {
	display: flex;
}

.mq-sidebar-list-page__title-container .mq-sidebar-list-page__title {
	flex-grow: 1;
	width: calc(100% - 3px); /* subtract the label border width */
}

.mq-page-label-border {
	display: flex;
}

.mq-page-label-border div {
	width: 3px;
	height: 24px;
	align-items: center;
	justify-content: center;
}

.mq-page-label-filter-dropdown {
	width: 16px;
	margin-right: -2px;
	margin-left: 1px;
	color: var(--editor-text-color);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mq-page-label-filter-dropdown:hover {
	cursor: pointer;
	color: var(--editor-active-color);
}

.mq-page-label-filter-dropdown.mq-page-label-filter-dropdown-disabled a {
	color: var(--editor-text-muted-color);
	cursor: default;
	pointer-events: none;
}

.mq-page-label-filter-dropdown.mq-page-label-filter-dropdown-disabled {
	cursor: default;
}

.mq-page-label-filter-dropdown__with-nr {
	width: 32px;
	background: var(--editor-selection-bg);
	color: var(--editor-selection-text-color);
	font-size: 12px;
	border-radius: 5px;
	padding: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: -2px;
	margin-left: 1px;
	gap: 3px;
}

.mq-page-label-filter-dropdown__with-nr svg {
	font-size: 14px;
}

.mq-page-label-filter-dropdown__with-nr:hover {
	cursor: pointer;
}

/* mysterious empty div creating a gap */
.mq-page-label-filter-dropdown__with-nr > div {
	display: none;
}

/*
.mq-sidebar-list-page__title.parent:not(.mq-sidebar-list-page__title--folder) {
	font-weight: 600;
}

.mq-sidebar-list-page__title.parent:not(.mq-sidebar-list-page__inner--symbol):not(.selected) {
	color: var(--editor-header-color);
}
*/

.mq-sidebar-list-page-label.ellipsis span {
	text-overflow: ellipsis;
	overflow: hidden;
}

/* Assets don't need a lot of margin right (no controls like pin/hide) */
.mq-sidebar-list-page--asset .mq-sidebar-list-page__title .mq-sidebar-list-page-label {
	margin-right: 1em;
}

.mq-sidebar-list-page--page .mq-sidebar-list-page__title .mq-sidebar-list-page-label {
	margin-right: 0em;
}

.mq-sidebar-list-page--page
	.mq-sidebar-list-page__inner--hidden
	.mq-sidebar-list-page__title
	.mq-sidebar-list-page-label {
	margin-right: 1.25em;
}

/* Larger margin right on page item hover so buttons are visible (pin/visibility) */
.mq-sidebar-list-page--page .mq-sidebar-list-page__title:hover .mq-sidebar-list-page-label {
	margin-right: 2.75em;
}

.mq-sidebar-list-page-label .has-master {
	font-size: 0.7em;
	color: #006be5;
	float: left;
	width: 1.25em;
	height: 1.25em;
	line-height: 1.25em;
	margin-top: 0.3em;
	margin-right: 0.3em;
	text-align: center;
	border-radius: 2px;
	border: 1px solid currentColor;
	vertical-align: middle;
}

.mq-sidebar-list-page-label .has-master:after {
	content: 'M';
}

.mq-sidebar-list-page-label .divider {
	font-weight: 200;
	opacity: 0.5;
}

.mq-sidebar-list-item-label {
	display: inline-block;
	position: absolute;
	bottom: 0.5em;
	left: 0.5em;
	right: 0.5em;
	font-size: 11px;
	line-height: 14px;
	color: var(--editor-text-color);
	max-height: 2.5em;
	text-overflow: ellipsis;
	overflow: hidden;
}

.mq-sidebar-list-item-badge {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	pointer-events: none;
	background: var(--new-accent);
	font-weight: 600;
	color: var(--new-text-color);
	padding: 0.1em 0.3em;
	border-radius: 0.25em;
	font-size: 9px;
}

.no-content {
	padding: 1em;
	font-size: 90%;
	text-align: center;
}

.mq-sidebar-header-controls {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
}

.mq-sidebar-header-controls a {
	color: var(--editor-text-color);
	cursor: pointer;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mq-sidebar-header-controls a:hover {
	color: var(--editor-active-color);
	cursor: pointer;
	text-decoration: none;
}

.mq-sidebar-header-controls a span {
	vertical-align: middle;
	display: flex;
	align-items: center;
	font-size: 11px;
	line-height: 1.2;
	height: 16px;
	letter-spacing: 0;
}

.mq-sidebar-header-controls a span .mq-icon {
	margin-right: 3px;
}

.mq-sidebar-header-controls .mq-icon {
	vertical-align: middle;
	font-size: 16px;
	color: var(--editor-text-color);
	fill: var(--editor-text-color);
}

.mq-sidebar-header-controls a:hover .mq-icon {
	color: var(--editor-active-color);
	fill: var(--editor-active-color);
}

.mq-sidebar-header-controls .controls-right {
	flex-grow: 1;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	margin-right: -3px;
}
.mq-sidebar-header-controls .controls-right a:last-child {
	margin-left: -3px;
}

.mq-sidebar-header-button {
}

.mq-sidebar-header-button:first-child {
}

.mq-sidebar-header-button:hover {
	cursor: pointer;
	text-decoration: none;
}

.mq-sidebar-header-button .mq-icon {
	width: 16px;
	height: 16px;
}

.mq-sidebar-header-button:hover .mq-icon {
}

.nowrap {
	white-space: nowrap;
}

.outline-item-highlight {
	position: absolute;
	z-index: 22;
	border: solid 2px #006ce5;
	pointer-events: none;
	box-sizing: border-box;
}

.mq-sidebar-resize {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: 0.25em;
	cursor: ew-resize;
}

.mq-sidebar-resize:hover,
.mq-sidebar-resize.active {
	/*background-color: rgba(0,108,299,0.25);*/
}

.mq-sidebar-resize-right {
	right: 0;
}

.mq-sidebar-resize-left {
	left: 0;
}

.mq-sidebar-list.mq-sidebar-list--unfocused
	.mq-sidebar-list-page.selected
	.mq-sidebar-list-page__title,
.mq-sidebar-list.mq-sidebar-list--unfocused .mq-sidebar-list-page__title.selected {
	background-color: var(--editor-semiselection-bg);
	color: var(--editor-text-color) !important;
}

.drag-preview {
	position: fixed;
	z-index: 998;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.icon-target-ghost {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	transform-origin: 0 0;
}

.icon-target-ghost:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #006ce5;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
	border: 1px solid #fff;
	display: block;
	box-sizing: border-box;
	content: ' ';
}

#sidebar-popup-wrapper {
	position: relative;
}

.comment-sidebar-tabs {
	display: flex;
}

.comment-sidebar-tabs a {
	margin: 0;
	color: var(--editor-active-color);
	background-color: var(--editor-menu-bg);
	border: 1px solid var(--editor-active-color);
	padding: 0.2em 0.6em;
	font-size: 0.6em;
	text-transform: uppercase;
	box-sizing: border-box;
	text-decoration: none;
	min-width: 6em;
	text-align: center;
}

.comment-sidebar-tabs a.selected {
	color: var(--editor-menu-bg);
	background-color: var(--editor-active-color);
}

.comment-sidebar-tabs a:first-of-type {
	border-bottom-left-radius: 2px;
	border-top-left-radius: 2px;
}

.comment-sidebar-tabs a:last-of-type {
	border-bottom-right-radius: 2px;
	border-top-right-radius: 2px;
}

.comment-sidebar-tabs-big {
	width: 100%;
	height: 35px;
	border-bottom: 1px solid #eeeeee;
	box-sizing: border-box;
}

.comment-sidebar-tabs-big a {
	margin: 0 auto;
	color: #333333;
	background-color: #fff;
	/* border:1px solid #006be5; */
	display: inline-block;
	/*padding: 0.2em 0 0.5em 0;*/
	font-size: 13px;
	/* text-transform: uppercase; */
	box-sizing: border-box;
	text-decoration: none;
	/* margin-top: 1em; */
	min-width: 6em;
	text-align: center;
	width: 32%;
	height: 100%;
	line-height: 2.3;
}

.comment-sidebar-tabs-big a.selected {
	border-bottom: 3px solid #006be5;
}

:root {
	--must-border-radius: 2px;
	--must-box-shadow: 0px 8px 6px rgba(0, 0, 0, 0.15);
	--must-scrollbar-width: 9px;

	--must-mq-white: #fff;
	--must-mq-black: #000;

	--must-mq-blue: #006ce5;

	--must-mq-grey-10: #f7f6f6;
	--must-mq-grey-20: #ebebeb;
	--must-mq-grey-30: #d6d6d6;
	--must-mq-grey-40: #c0c0c0;
	--must-mq-grey-50: #aaa;
	--must-mq-grey-60: #929292;
	--must-mq-grey-70: #7a7a7a;
	--must-mq-grey-90: #444;
	--must-mq-grey-100: #232323;

	--must-font-main: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

	--must-font-mono: monospace;
	--must-checkerboard: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAACRFdLHAAAAmUlEQVQ4EeVTWw7AIAjDXcn730DP5KxJCR/NQjKXfcgPr1IEtbTWhk2ptdoFg1LGFDi9dzPAIA5ZaaQKGYAFC8SL4SwCBIkkCkknhEORQeckH9AayUbkg45NGZfVTEbtvWMwnoPxNGMa6FtjC+hXw6Rb7wf+uMcPhlHPLN4SbXVbzEWdPmIserIPJJQvTO1I/V6FO3CH20e+AXluTDqe7hKAAAAAAElFTkSuQmCC);
	--must-bg-checkerboard: var(--must-checkerboard) top left / 10px;
	--must-paint-none: linear-gradient(
		-45deg,
		white 0,
		white calc(50% - 1px),
		red calc(50% - 1px),
		red calc(50% + 1px),
		white calc(50% + 1px),
		white 100%
	);

	--must-transition: cubic-bezier(0.23, 1, 0.32, 1);
}

input.must-input,
.must-button {
	margin: 0;
	width: auto;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-family: var(--must-font-main);
	letter-spacing: inherit;
	padding: 0.5em 1em;
	box-sizing: border-box;
	border-radius: var(--must-border-radius);
	border: 1px solid;
	transition: all 0.4s var(--must-transition);
}

.must-button--bare {
	padding: 0;
	border: none;
	border-radius: 0;
	line-height: 1;
	background: transparent;
}

input.must-input {
	margin: 0;
	font-family: var(--must-font-main);
	font-size: 13px;
	padding: 3px 3px 3px 5px;
	min-height: 22px; /*28px*/
	border: 1px solid var(--must-mq-grey-30);
	border-radius: 4px;
	color: var(--must-mq-grey-100);
}

input.must-input:hover {
	border-color: var(--must-mq-grey-50);
}

input.must-input:focus {
	border-color: var(--must-mq-blue);
	outline: none;
}

/*
	Create an invisible input that stretches
	across the parent element. The parent needs 
	to be positioned (e.g. position: relative).

	Use case: overlay an invisible <input type='file'/>
	on top of a custom upload button.
 */
input.must-input--overlaid {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 1px;
	opacity: 0;
	cursor: pointer;
}

.must-input-unit {
	position: absolute;
	top: 50%;
	right: 0.8em;
	left: auto;
	transform: translate(0, -50%);
	z-index: 10;
	font-variant: small-caps;
	font-size: 0.9em;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.must-icon {
}

/*
	Utility: screen-reader-only text
	See: https://piccalil.li/quick-tip/visually-hidden/
 */
.must-sr-only {
	border: 0;
	clip: rect(0 0 0 0);
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/*
	Unobtrusive scrollbar for a container.
 */

.must-lite-sb {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.05);
}

.must-lite-sb::-webkit-scrollbar {
	width: var(--must-scrollbar-width);
	height: var(--must-scrollbar-width);
}

.must-lite-sb::-webkit-scrollbar-track {
	background-color: transparent;
	margin: -2px 0;
}

.must-lite-sb::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.25);
	border: 2px solid rgba(0, 0, 0, 0);
	border-radius: 8px;
	background-clip: padding-box;
}

.must-btn {
	border: 1px solid currentColor;
	background: #fff;
	padding: 0.25em 0.5em;
	cursor: default;
}

.must-btn[disabled] {
	pointer-events: none;
}

.must-btn:hover {
	color: royalblue;
}

.must-btn:active,
.must-btn:focus {
	color: tomato;
}

.must-btn--link {
	text-decoration: underline;
}

.must-swatch {
	--size: 18px;
	--radius: 2px;
	--paint: transparent;
	position: relative;
	background: var(--must-bg-checkerboard);
	background-position: center center;
	background-size: auto 50%;
	width: var(--size);
	height: var(--size);
	border-radius: var(--radius);
	overflow: hidden;
	font-family: var(--must-font-main);
}

.must-swatch::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	background: var(--paint);
	border-radius: inherit;
	z-index: 1;
}

.must-swatch--opaque {
	/*
		For fully opaque solid colors, 
		don't render the checkerboard background
		underneath (should boost performance).
	 */
	background: none;
}

.must-swatch--light::before {
	/*
		Show a border around light swatches
	 */
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}

/*
	Swatch: <none> color
	--------------------
 */
.must-swatch--none {
	background: var(--mq-white);
}

.must-swatch--none::before {
	background: transparent;
}

.must-swatch--none::after {
	content: ' ';
	background: var(--mq-pink-400);
	border-radius: 2px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	height: 2px;
	display: block;
	font-size: 0.813rem;
	top: calc(50% - 1px);
	left: 0;
	transform-origin: center;
	transform: rotate(45deg);
}

/*
	Swatch: indeterminate color
	---------------------------
 */
.must-swatch--indeterminate {
	background: var(--mq-grey-200);
}

.must-swatch--indeterminate::before {
	background: transparent;
}

.must-swatch--indeterminate::after {
	color: var(--mq-grey-500);
	content: '?';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	font-size: 0.813rem;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	font-weight: bold;
	line-height: 1;
}

.icon-plus-swatch .must-swatch--indeterminate::after {
	content: ' ';
}

.must-handle {
	/* Positioning */
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	/* Sizing */
	width: var(--size);
	height: var(--size);
	-webkit-user-select: none;
	user-select: none;
	transform: translate(-50%, -50%);
	transform-origin: 0 0;
	border-radius: 50%;
	/* Appearance */
	background: var(--mq-white);
	--size: 0.75rem;
}

.must-handle:focus {
	z-index: 30;
	border: 1px solid var(--mq-blue);
	outline: none;
	box-shadow: 0 0 0 1px var(--mq-white);
}

.must-handle:focus-visible {
	z-index: 30;
	border: 1px solid var(--mq-blue);
	outline: none;
	box-shadow: 0 0 0 1px var(--mq-white);
}

.must-handle::before {
	position: absolute;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
	content: '';
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
}

.must-handle::after {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	content: '';
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--handle-color, transparent);
}

.must-handle--selected {
	z-index: 20;
	--handle-color: var(--mq-blue);
}

.must-handle--selected::after {
	width: 50%;
	height: 50%;
}

.must-handle--removed {
	animation-name: removed;
	animation-duration: 200ms;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes removed {
	0% {
		transform: scale(1) translate(-50%, -50%);
		opacity: 1;
	}

	100% {
		transform: scale(0) translate(-50%, -50%);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.must-handle--removed {
		animation-duration: 0.01ms;
	}
}

.must-handle-tooltip {
	font-family: var(--mq-font-main);
	font-size: 0.75rem;
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	padding: 0.25rem 0.4375rem;
	-webkit-user-select: none;
	user-select: none;
	transform: translate(-50%, calc((100% + var(--handle-size, 1em) * 0.5 + 0.5rem) * -1));
	white-space: nowrap;
	pointer-events: none;
	color: var(--mq-grey-100);
	border-radius: 0.25rem;
	background: var(--mq-grey-900);
}

.must-pad {
	/* Positioning re: handle */
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 70.71%;
	border-radius: 0.1875rem;
	outline: none;
	background: var(--background);
	--background: var(--must-mq-grey-10);
	/*
		Make taps faster.
	 */
	touch-action: none;
	-webkit-touch-callout: none;
}

.must-pad:focus-within {
	z-index: 100;
}

.must-pad:focus {
	outline: none;
}

.must-pad:focus .must-handle::before {
	top: -0.125rem;
	right: -0.125rem;
	bottom: -0.125rem;
	left: -0.125rem;
	border: 0.125rem solid var(--must-mq-blue);
}

.must-pad:focus-visible .must-handle::before {
	top: -0.125rem;
	right: -0.125rem;
	bottom: -0.125rem;
	left: -0.125rem;
	border: 0.125rem solid var(--must-mq-blue);
}

.must-slider {
	height: 1rem;
	padding-bottom: 0;
	background: var(--mq-grey-100);
}

.must-hsv {
	-webkit-user-select: none;
	user-select: none;
}

.must-hsv .must-slider {
	height: 1rem;
}

.must-pad--spectrum {
	/* Add a different aspect ratio. */
	padding-bottom: 75%;
	/* Render HSV spectrum for `--hue` value */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)),
		linear-gradient(to right, hsl(var(--hue, 0), 100%, 100%), hsl(var(--hue, 0), 100%, 50%));
	/* The hue to display */
	--hue: 0;
}

.must-slider--hue {
	/*
		Render rainbow gradient
	 */
	background: linear-gradient(
		to right,
		hsl(0, 100%, 50%),
		hsl(60, 100%, 50%),
		hsl(120, 100%, 50%),
		hsl(180, 100%, 50%),
		hsl(240, 100%, 50%),
		hsl(300, 100%, 50%),
		hsl(360, 100%, 50%)
	);
}

.must-slider--opacity {
	background: linear-gradient(to right, var(--color-start), var(--color-end)),
		var(--must-bg-checkerboard);
	background-size: auto, 0.6875rem;
	--color-start: rgb(0, 0, 0, 0);
	--color-end: rgb(0, 0, 0, 1);
}

.must-swatch-button {
	padding: 0;
	border: none;
}

.must-icon {
	display: inline-block;
	overflow: visible;
	vertical-align: middle;
	fill: currentColor;
	width: 1em;
	height: 1em;
}

/*
	Note: we need this so that events that happen on the <use> element inside the SVG
	can be bubbled up to a parent outside of the containing SVG.
	See https://github.com/Evercoder/new-engine/issues/308
 */
.must-icon use {
	pointer-events: none;
}

.must-color-palette {
	margin: 0;
}

.must-color-palette__title {
	font-size: 0.6875rem;
	line-height: 1rem;
	display: flex;
	width: 100%;
	max-width: 11.25rem;
	margin: 0rem 0 0.5rem -0.25rem;
	padding: 0rem 0;
	cursor: pointer;
	transition: all 0.08s linear;
	text-align: left;
	text-indent: -0.25rem;
	color: var(--mq-grey-500);
	border: none;
	background: none;
	align-items: center;
}

.must-color-palette__title:hover {
	color: var(--mq-grey-600);
}

.must-color-palette__title .must-icon {
	font-size: 1rem;
	line-height: 0;
	display: inline-block;
	fill: currentColor;
}

.must-color-palette__title .must-icon.must-icon__chevron {
	transition: transform 0.08s linear;
	transform: rotate(-90deg);
}

.must-color-palette__title.open .must-icon.must-icon__chevron {
	transform: rotate(0);
}

.must-color-palette__title .must-icon.must-icon__folder {
	margin: 0 0.5625rem 0 0;
}

.must-color-palette__content {
	margin-bottom: 0.1875rem;
}

.must-numeric {
	/*font-family: var(--must-font-mono);*/
}

input.must-color-text {
	width: 100%;
	letter-spacing: -0.1px;
}

.must-pad--radial {
	border-radius: 50%;
	--background: var(--mq-grey-100);
}

.must-slider--radial {
	border: calc(var(--handle-size) * 0.5) solid var(--background);
	--handle-size: 1em;
}

.must-slider--radial .must-handle {
	--size: var(--handle-size);
}

.must-gradient-controls {
	display: flex;
	flex-grow: 1;
	justify-content: flex-end;
	gap: 0.3125rem;
}

.must-slider--gradient-angle {
	box-sizing: border-box;
	width: 1.875rem;
	height: 1.875rem;
	margin: 0 auto;
	padding-bottom: 0;
	--handle-size: 0.5rem;
}

input.must-input--gradient-angle {
	width: 4rem;
}

.must-gradient-controls .must-button-group {
	display: flex;
}

.must-gradient-controls .must-button-group > :not(:first-child) {
	width: 1.8125rem;
	border-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.must-gradient-controls .must-button-group > :not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.must-gradient-controls .must-button {
	display: flex;
	width: 1.875rem;
	max-height: 1.875rem;
	padding: 0 0;
	text-align: center;
	border-color: var(--mq-grey-300);
	border-radius: 0.25rem;
	background: var(--mq-grey-100);
	align-items: center;
	justify-content: center;
}

.must-gradient-controls .must-button:hover {
	cursor: pointer;
	background: var(--mq-white);
}

.must-gradient-controls .must-button:active {
	box-shadow: inset 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
}

.must-gradient-controls .must-button .must-icon {
	display: block;
	fill: var(--mq-grey-900);
}

.must-gradient-controls .must-input {
	max-height: 1.875rem;
	padding: 0 0.5rem;
}

.must-pad--gradient-center {
	box-sizing: border-box;
	width: 1.875rem;
	height: 1.875rem;
	margin: 0 auto;
	padding-bottom: 0;
}

.must-pad--gradient-center .must-handle {
	--size: 0.5rem;
}

.must-color-footer {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 0.25rem;
}

input.must-input--opacity {
	width: 100%;
	max-width: 3rem;
	flex-shrink: 0;
}

button.must-button--edit-swatch {
	position: relative;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 0;
	flex-grow: 0;
	flex-shrink: 0;
}

button.must-button--edit-swatch:hover {
	cursor: pointer;
}

button.must-button--edit-swatch .must-swatch {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	transition: transform 0.1s ease-in;
	border-radius: 0.25rem;
}

button.must-button--edit-swatch:hover .must-swatch {
	transform: scale(1.08);
}

button.must-button--edit-swatch .must-icon {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.must-color-footer .must-swatch {
	border-radius: 0.25rem;
	--size: 1.875rem;
	flex-grow: 0;
	flex-shrink: 0;
}

.must-color-footer .must-swatch--indeterminate::after {
	content: ' ';
}

.must-button__eyedropper {
	font-size: 1rem;
	width: 1.5rem;
	margin: 0 -0.3125rem 0 0.1875rem;
	border-radius: 0.25rem;
	flex-shrink: 0;
}

.must-button__eyedropper:hover {
	cursor: pointer;
}

.must-button__eyedropper .must-icon {
	transition: all 0.1s var(--mq-transition);
	fill: var(--mq-grey-900);
}

.must-button__eyedropper:hover .must-icon {
	fill: var(--mq-blue);
}

.must-swatches-panel {
	font-family: var(--mq-font-main);
	overflow-y: auto;
	box-sizing: border-box;
	height: 17.8125rem;
	margin: 0 -0.75rem 0.625rem;
	padding: 0 0 0 0.75rem;
}

.must-swatch-row {
	display: flex;
	max-width: calc(var(--popup-width) - var(--must-scrollbar-width) - 0.75rem);
	margin-right: 0rem;
	margin-bottom: 0rem;
	flex-wrap: wrap;
}

.must-swatch-row:last-child {
	margin-bottom: 0;
}

.must-swatch-row > * {
	margin: 0 0.25rem 0.25rem 0;
}

/* Normal Swatches */
.must-swatch-row .must-swatch-button {
	border-radius: 0.3125rem;
}

.must-swatch-row .must-swatch {
	--size: 1.125rem;
	--radius: 0.125rem;
}

/* Small Swatches */
.must-swatches-panel--sm .must-swatch-row {
	margin-bottom: 0rem;
}

.must-swatches-panel--sm .must-color-palette__content {
	margin-bottom: 0.3125rem;
}

.must-swatches-panel--sm .must-swatch-row > * {
	margin: 0 0.125rem 0.125rem 0;
}

.must-swatches-panel--sm .must-swatch-row .must-swatch-button {
	border-radius: 0.125rem;
}

.must-swatches-panel--sm .must-swatch-row .must-swatch {
	--size: 0.9375rem;
	--radius: 0.125rem;
}

/* Large Swatches */
.must-swatches-panel--lg .must-swatch-row {
	margin-bottom: 0rem;
}

.must-swatches-panel--lg .must-swatch-row > * {
	margin: 0 0.375rem 0.375rem 0;
}

.must-swatches-panel--lg .must-color-palette__content {
	margin-bottom: 0.125rem;
}

.must-swatches-panel--lg .must-swatch-row .must-swatch-button {
	border-radius: 0.25rem;
}

.must-swatches-panel--lg .must-swatch-row .must-swatch {
	--size: 1.5rem;
	--radius: 0.25rem;
}

.must-swatch-row .must-swatch-button:hover {
	cursor: pointer;
}

.must-swatches-panel__resizer {
	position: relative;
	width: calc(100% + 1.5rem);
	height: 0.5rem;
	margin: 0.625rem -0.75rem -0.625rem;
	cursor: row-resize;
	background: var(--mq-white);
}

.must-swatches-panel__resizer::before {
	position: absolute;
	top: 0;
	left: calc(50% - 0.75rem);
	width: 1.5rem;
	height: 0.3125rem;
	content: '';
	border-bottom: 0.125rem solid var(--mq-grey-300);
}

.must-swatches-panel__resizer::after {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 0.125rem;
	content: '';
	border-top: 0.063rem solid var(--mq-grey-100);
}

.must-popup {
	position: fixed;
	z-index: 100;
	box-sizing: border-box;
	padding: var(--spacing);
	border: 0.0625rem solid var(--mq-grey-200);
	border-radius: 0.375rem;
	outline: none;
	background: var(--mq-white);
	/*overflow: hidden;*/
	box-shadow: var(--mq-box-shadow);
	--spacing: 0.75rem;
}

.must-popup__header {
	font-family: var(--mq-font-main);
	font-size: 0.8125rem;
	display: flex;
	margin: calc(var(--spacing) * -1) calc(var(--spacing) * -1) 0;
	padding: 0.625rem var(--spacing);
	flex-wrap: nowrap;
	align-items: center;
}

.must-popup__header[data-must-draggable] {
	cursor: move;
	-webkit-user-select: none;
	user-select: none;
}

.must-popup__header .must-icon {
	fill: var(--mq-grey-900);
}

.must-popup__header .must-button:hover {
	cursor: pointer;
}

.must-popup__header .must-button:hover .must-icon {
	fill: var(--mq-blue);
}

.must-popup__title {
	font-size: 1em;
	font-weight: bold;
	line-height: 1rem;
	margin: 0;
	color: var(--mq-grey-900);
	flex-grow: 1;
}

.must-tab-bar {
	display: flex;
	-webkit-user-select: none;
	user-select: none;
	border-bottom: 0.0625rem solid var(--mq-grey-200);
	border-radius: 0rem;
}

.must-tab-bar > * {
	flex: 1 1 0;
}

.must-tab-bar--pill {
	padding: 0.125rem;
	color: var(--mq-grey-800);
	border: none;
	border-radius: 0.375rem;
	background: var(--mq-grey-100);
}

.must-tab-bar--pill .must-tab-button {
	padding: 0.4375rem 0;
	border-bottom: none;
	border-radius: 0.25rem;
	transition: background-color 0.2s var(--mq-transition);
}

.must-tab-bar--pill .must-tab-button::after {
	display: none;
}

.must-tab-bar--pill .must-tab-button--active {
	background: var(--mq-white);
	box-shadow: 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.2);
}

.must-tab-button {
	font-size: 0.75rem;
	position: relative;
	overflow-y: hidden;
	margin-bottom: -0.0625rem;
	padding: 0.625rem 0 0.75rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: none;
	background: transparent;
}

.must-tab-button:active {
	color: inherit;
}

.must-tab-button .must-icon {
	vertical-align: top;
}

.must-tab-button::after {
	position: absolute;
	right: 0;
	bottom: 0rem;
	left: 0;
	height: 0.0625rem;
	content: '';
	transition: all 0.4s var(--mq-transition);
	background-color: transparent;
}

.must-tab-button:not(.must-tab-button--active):hover {
	cursor: pointer;
}

.must-tab-button:not(.must-tab-button--active):hover::after {
	background-color: var(--mq-grey-400);
}

/*
	Focused tab should always come on top
	so that its outline doesn't get truncated.
 */
.must-tab-button:focus {
	z-index: 1;
}

.must-tab-button:focus-visible {
	z-index: 1;
}

.must-tab-button--active {
	color: var(--mq-blue);
}

.must-tab-button--active::after {
	height: 0.125rem;
	background-color: var(--mq-blue);
}

.must-gradient-slider {
	position: relative;
	/* Positioning */
	height: 1rem;
	margin-top: 0.625rem;
	/* Interactivity */
	touch-action: none;
}

.must-gradient-slider:focus-within {
	z-index: 100;
}

.must-gradient-slider .must-handle:not(.must-handle--selected) {
	--size: 0.5rem;
}

.must-gradient-preview {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: '';
	border-radius: 0.1875rem;
	background: linear-gradient(to right, var(--stops)), var(--must-bg-checkerboard);
	--stops: transparent 0, transparent 100%;
}

.must-gradient-slider__add {
	position: absolute;
	top: 100%;
	left: -9999px;
	display: flex;
	width: 100%;
	padding: 0;
	border: none;
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.must-gradient-slider__add .must-icon {
	display: block;
	margin-right: 0.25em;
}

.must-gradient-slider__add:focus {
	left: 0;
	outline: 1px dotted;
}

.must-gradient-slider__add:focus-visible {
	left: 0;
	outline: 1px dotted;
}

/*
	Hide tooltip immediately when beginning
	the 'remove stop' animation.
 */
.must-handle--removed ~ .must-handle-tooltip {
	display: none;
}

/*
	Increase tappable area on touchscreens.
 */
@media (pointer: coarse) {
	.must-gradient-slider .must-handle::before {
		position: absolute;
		top: -0.3125rem;
		right: -0.3125rem;
		bottom: -0.3125rem;
		left: -0.3125rem;
		content: '';
		border-radius: 50%;
	}
}

.must-color-picker {
	font-family: var(--mq-font-main);
}

.must-color-picker .must-hsv .must-pad {
	margin: 0 0 0.625rem;
}

.must-color-picker .must-pad--radial {
	margin: 0;
}

.must-color-picker .must-gradient-controls {
	margin: 0.625rem 0;
	justify-content: space-between;
}

.must-color-picker .must-tab-bar {
	margin: 0 -0.75rem 0.625rem;
	padding: 0 0.75rem;
}

.must-color-picker .must-tab-button .must-icon {
	color: var(--mq-grey-700);
	--size: 1.3334;
}

.must-color-picker .must-tab-button--active .must-icon {
	color: var(--mq-blue);
}

.must-color-well {
	position: relative;
	--padding: 0.125rem;
}

.must-color-well > .must-swatch {
	position: absolute;
	top: var(--padding);
	right: var(--padding);
	bottom: var(--padding);
	left: var(--padding);
	--size: auto;
}

.must-color-well > .must-svg-swatch {
	position: absolute;
	top: var(--padding);
	left: var(--padding);
	width: calc(100% - var(--padding) * 2);
	height: calc(100% - var(--padding) * 2);
}

.must-toolbar {
	display: flex;
	justify-content: space-between;
	background-color: var(--bg-default);
}

.must-avatar {
	border-radius: 50%;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.must-avatar__img {
	width: 100%;
	height: 100%;
}

.must-avatar--size-lg {
	width: 5em;
	height: 5em;
}

.must-avatar--size-md {
	width: 3em;
	height: 3em;
}

.must-avatar--size-sm {
	width: 1.5em;
	height: 1.5em;
}

.must-kbd {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-family: var(--must-font-main);
	color: var(--editor-text-color);
}

.must-kbd span {
	margin: auto 0;
	font-size: 12px;
	max-width: 230px;
}

.must-kbd--keys {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 3px;
}

.must-kbd--key {
	background-color: var(--editor-highlight-bg);
	padding: 4px;
	font-size: 11px;
	border-radius: 4px;
	min-width: 13px;
	text-align: center;
	height: 15px;
}

.must-kbd--group {
	width: 280px;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

.must-kbd--group > span {
	font-family: var(--must-font-main);
	color: var(--editor-text-color);
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 2px;
}

.must-kbd--group > .must-kbd--group-separator {
	padding-top: 0;
	border-bottom: 1px solid var(--editor-border-color);
}

.must-kbd--group-content {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

@keyframes bump {
	from {
		opacity: 0;
		transform: translate(var(--tx), var(--ty)) scale(0);
	}
	43% {
		transform: translate(var(--tx), var(--ty)) scale(1.04);
	}
	to {
		opacity: 1;
		transform: translate(var(--tx), var(--ty)) scale(1);
	}
}

.must-help-tooltip {
	--tx: 0;
	--ty: 0;
	--tooltip-transition: cubic-bezier(0, 0, 0.2, 1);
	z-index: 10000;
	position: absolute;
	width: 190px;
	background-color: var(--hint-xl-bg);
	border-radius: 12px;
	color: var(--mq-white);
	font-family: var(--must-font-main);
	padding: 20px 16px 20px 16px;
	text-align: center;
	will-change: transform;
	transform: translate(var(--tx), var(--ty));
	animation: bump 0.2s ease backwards;
	transition: transform 0.24s ease, left 0.24s ease, top 0.24s ease;
}

.must-help-tooltip--right {
	--tx: 0.625rem;
	--ty: -50%;
}
.must-help-tooltip--top {
	--tx: -50%;
	--ty: calc(-100% - 0.625rem);
}
.must-help-tooltip--left {
	--tx: calc(-100% - 0.625rem);
	--ty: -50%;
}
.must-help-tooltip--bottom {
	--tx: -50%;
	--ty: 0.625rem;
}
.must-help-tooltip--bottom-right {
	--tx: calc(-100% + 1.375rem);
	--ty: 0.625rem;
}

.must-help-tooltip:before {
	content: ' ';
	position: absolute;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 14px;
	height: 14px;
	background-color: var(--hint-xl-bg);
	transition: left 0.1s ease;
}

.must-help-tooltip--bottom:before {
	top: 0;
	left: 50%;
}

.must-help-tooltip--bottom-right:before {
	top: 0;
	left: calc(100% - 22px);
}

.must-help-tooltip--top:before {
	top: 100%;
	left: 50%;
}

.must-help-tooltip--right:before {
	top: 50%;
	left: 0%;
}

.must-help-tooltip--left:before {
	top: 50%;
	left: 100%;
}

.must-help-tooltip--shortcut {
	opacity: 0.7;
	font-size: 15px;
	padding-left: 5px;
}

.must-help-tooltip--description {
	opacity: 0.7;
	padding-top: 10px;
	font-size: 13px;
	margin-block-start: 0;
	margin-block-end: 0;
}

.must-help-tooltip--title {
	font-weight: bold;
	font-size: 15px;
}

.chart__legenditem {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	min-width: 0;
}

.chart__legendcolor {
	width: 0.7em;
	height: 0.7em;
	/* in 2024 we have to make sure that circles are round... */
	width: round(nearest, 0.7em, 0.5px);
	height: round(nearest, 0.7em, 0.5px);
	margin-right: 0.5em;
	background: black;
	border-radius: 2em;
	display: flex;
	flex: none;
}

.chart__legendlabel {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	line-height: 1.5;
}

.chart__legend foreignObject {
	pointer-events: none;
}

.chart__legendcontent {
	width: 100%;
	height: 100%;
	gap: 1em;
}

/*
	A variation on the label style: this one
	is outline with a white border.
 */
.chart__label--outlined {
	stroke: white;
	stroke-width: 2px;
	paint-order: stroke;
	stroke-linejoin: round;
}

/* pixel perfect axis text centering */
.chart__label,
.chart__axislabels text {
	transform: translateY(1px);
}

.page__thumbnail {
	width: 160px;
	pointer-events: none !important;
	padding: 0;
	margin: 0;
}

.page__thumbnail__title {
	font-size: 13px;
	color: var(--editor-text-color);
	padding-bottom: calc(1em - 1px);
}

.page__thumbnail__image {
	width: 160px;
	border-radius: 2px;
	overflow: hidden;
}

.page__thumbnail__image > iframe {
	border: 1px solid var(--editor-menu-border-color);
}

.page__thumbnail__arrow {
	right: 94%;
	top: 50%;
	position: absolute;
	pointer-events: none;
}

.page__thumbnail__arrow::before,
.page__thumbnail__arrow::after {
	content: ' ';
	position: absolute;
	top: 0;
	right: 0;
	height: 0;
	width: 0;
	border: solid transparent;
}

.page__thumbnail__arrow::before {
	border-color: rgba(230, 230, 230, 0);
	border-right-color: var(--editor-menu-border-color);
	border-width: 9px;
	margin-top: -9px;
}
.page__thumbnail__arrow::after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: var(--input-bg);
	border-width: 8px;
	margin-top: -8px;
}

.page__thumbnail .breadcrumbs {
	padding: 0;
	margin: 1em 0 0 0;
	display: inline-block;
}

.page__thumbnail .breadcrumbs-page-label {
	display: inline-block;
	float: none;
}

.mq-sidebar-assets-list {
	text-align: center;
	overflow-y: scroll;
	overflow-x: hidden;
	font-size: 0.75rem;
	line-height: 1.75;
	padding: 1px 0;
	-webkit-tap-highlight-color: transparent;
}

.mq-sidebar-assets-list div:nth-child(even) {
	background-image: linear-gradient(var(--editor-menu-hover-color) 50%, transparent 0);
	background-size: auto 3.5em;
	background-origin: content-box;
}

.mq-sidebar-assets-list.droptarget div:nth-child(even) {
	box-shadow: inset 2px 0 0 #006ce5, inset -2px 0 0 #006ce5;
}

.mq-sidebar-assets-contextmenu-container {
	width: 100%;
}

#assets-list.droptarget .mq-sidebar-list,
#template-assets-list.droptarget .mq-sidebar-list {
	box-shadow: 2px 0px 0px 0px var(--link-color) inset, -2px 0px 0px 0px var(--link-color) inset,
		0px 2px 0px 0px var(--link-color) inset;
}

.assets-header {
	height: 35px;
	display: flex;
}

.assets-header .assets-view {
	margin-left: auto;
}

.assets-header-upload-button-container {
	display: inline;
}

.sidebar-header-assets-label .context-menu-item-title {
	justify-content: flex-start;
}

.mq-sidebar-header-controls {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	justify-content: space-evenly;
	gap: 6px;
}

.mq-sidebar-header-controls .sidebar-header-assets-label .mq-link-dropdown-current > a {
	color: var(--editor-header-color);
	text-decoration: none;
}

.mq-sidebar-header-controls .mq-link-dropdown-current:after {
	color: var(--editor-header-color);
}

.mq-sidebar-header-controls .sidebar-header-assets-label .mq-link-dropdown-current:hover > a,
.mq-sidebar-header-controls .mq-link-dropdown-current:hover:after {
	color: var(--editor-active-color);
}

.folder-preview {
	margin: auto;
	display: inline-block;
	overflow: visible;
	vertical-align: middle;
	width: 128px;
	height: 128px;
	fill: var(--folder-color);
}

.tooltip.tooltip--assets .rc-tooltip-inner {
	border-radius: calc(var(--inspector-border-radius) * 2);
	border: 1px solid var(--editor-menu-border-color);
	background-color: var(--input-bg);
	color: var(--editor-text-muted-color);
	box-shadow: var(--mq-box-shadow-lg);
	padding: 1em;
}

.tooltip.tooltip--assets .assets-arrow {
	border-color: var(--input-bg) !important;
}

.tooltip.tooltip--assets hr {
	background-color: var(--editor-text-muted-color);
	opacity: 0.25;
	margin: 0.5em 0;
}

.tooltip.tooltip--assets .highlight {
	color: var(--editor-text-color);
}

.asset-thumbnail-container {
	display: flex;
	flex-direction: column;
	max-width: 240px;
	min-width: 180px;
}

.page__thumbnail__arrow.assets-arrow {
	right: 95.5%;
}

.asset-thumbnail-container .no-thumb {
	min-width: 240px;
}

.asset-thumbnail-container .thumb {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	max-width: 240px;
}

.asset-thumbnail-placeholder {
	min-height: 180px;
}

.mq-sidebar-assets-grid {
	margin: 0.5em;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(77px, 1fr));
	gap: 0.5em;
}

.mq-sidebar-assets-grid-item {
}

.mq-sidebar-assets-grid.shrink .mq-sidebar-assets-grid-item {
	color: var(--link-color);
}

.mq-sidebar-assets-grid.shrink .mq-sidebar-assets-grid-item .folder .mq-icon {
}

.mq-sidebar-assets-grid.shrink .mq-sidebar-assets-grid-item .thumb-container {
}

.mq-sidebar-asset-item--inner {
	display: flex;
	flex-direction: column;
	margin: 0em;
}

.mq-sidebar-assets-grid-item:hover {
	cursor: pointer;
}

.mq-sidebar-assets-grid-item:hover .thumb-container,
.mq-sidebar-assets-grid-item:hover .folder {
	border-color: var(--editor-semiselection-bg);
}

.mq-sidebar-assets-grid-item.droptarget {
	box-shadow: none;
}

.mq-sidebar-assets-grid-item.droptarget .folder {
	border-color: var(--link-color);
}

.mq-sidebar-assets-grid-item .title {
	text-align: center;
	color: var(--editor-text-color);
	padding: 4px;
	font-size: 11px;
}

.mq-sidebar-assets-grid-item .thumb-container,
.mq-sidebar-assets-grid-item .folder {
	border-radius: var(--inspector-border-radius);
	background-color: var(--editor-bg);
	border: 2px solid var(--editor-bg);
	position: relative;
}

.mq-sidebar-assets-grid-item .thumb-container:before,
.mq-sidebar-assets-grid-item .folder:before {
	content: '';
	display: block;
	padding-top: 100%;
}

.mq-sidebar-assets-grid-item .folder .mq-icon {
	fill: var(--folder-color);
	position: absolute;
	width: 48px;
	height: 48px;
	top: calc(50% - 24px);
	left: calc(50% - 24px);
}

.mq-sidebar-assets-grid-item img {
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	object-fit: scale-down;
}

.mq-sidebar-header-controls .primary-action {
	white-space: nowrap;
}

.mq-sidebar-assets-grid-item .title-rename-input {
	margin-top: 6px;
}

.mq-sidebar-assets-grid-item.selected .title span {
	color: var(--editor-active-color);
}

.mq-sidebar-assets-grid-item.selected .thumb-container,
.mq-sidebar-assets-grid-item.selected .folder {
	border-color: var(--editor-active-color);
}

.mq-assets-thumb {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.mq-assets-container {
	display: flex;
	z-index: 0;
}

.mq-assets-no-items-dragsource {
	margin: 3px;
}

.has-stencil-counter .mq-assets-sidebar {
	bottom: 45px;
}

/* Search box */
.mq-searchbox {
	position: relative;
}

.mq-searchbox input {
	box-sizing: border-box;
	width: 100%;
	line-height: inherit;
	font-family: inherit;
	font-size: 14px;
	background: var(--input-bg);
	border: 1px solid var(--input-border-color);
	display: block;
	border-radius: 0.25em;
	padding: 0.2em 1.75em;
	height: 2em;
}

.mq-searchbox input:placeholder-shown {
	overflow: hidden;
	text-overflow: ellipsis;
}

.mq-searchbox input:focus {
	/*box-shadow: 0px 0px 0px 1px var(--editor-active-color);*/
	/*border-color: transparent;*/
	outline: none;
}

.mq-searchbox .mq-icon {
	fill: var(--editor-text-color);
	color: var(--editor-text-color);
}

.mq-searchbox .mq-icon:first-child {
	transform: translate(0, -50%);
	position: absolute;
	top: 50%;
	left: 0.35em;
	width: 16px;
	height: 16px;
	pointer-events: none;
}

.mq-searchbox .clear {
	transform: translate(0, -50%) scale(0, 0);
	transition: transform 0.2s;
	position: absolute;
	top: 50%;
	right: 0.25em;
	width: 12px;
	height: 12px;
	padding: 4px;
}

.mq-searchbox .clear:hover {
	cursor: pointer;
	color: var(--editor-active-color);
	fill: var(--editor-active-color);
}

.mq-searchbox.has-content .clear {
	transform: translate(0, -50%) scale(1, 1);
}

.mq-search {
	font-size: 0.9em;
}

.mq-search input {
	font-weight: 300;
	border-radius: 1.25em;
	padding: 0.25em 1.75em !important;
}

.mq-search .mq-icon {
	width: 1em;
	height: 1em;
	stroke: #999;
	fill: none;
}

.mq-search input:focus ~ .mq-icon {
	stroke: #006ce5;
}

/*
    PAGE SETUP
    ----------
/*
    The app container takes the full height of the browser window.
    (100vh = 100% of the viewport's height).
    You can also use the `min-height` property instead
    if you want to ensure the app is at least
    as big as the browser window, but not constrain it beyond that.
*/
/*
    FLEXBOX LAYOUT
    --------------

    We're using the BEM naming methodology (http://getbem.com/naming/).
    Block:
        .layout
    Elements:
        .layout__item
    Modifiers:
        .layout__item--fixed-size
        .layout__item--grow,
        et cetera
*/
/*
    The basic building block is a layout container that will distribute
    its child elements either horizontally or vertically.
*/
.layout {
	display: flex;
}

.layout--absolute {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/*
    The children of a layout container may be laid either horizontally
    or vertically, depending on the `flex-direction` property.
    Here we create two modifiers for the .layout box
*/
.layout--hbox {
	flex-direction: row;
}
.layout--hbox-reverse {
	flex-direction: row-reverse;
}
.layout--vbox {
	flex-direction: column;
}
/*
    A layout that stretches all child elements to the same size.
    This is useful for things like sidebars for which we might want
    to have a background that stretches all the way down.
    (Even if the sidebar only has a little content)
*/
.layout--stretch {
	align-items: stretch;
}
/*
    The alternative to stretching the child elements is to align
    them in some way. In some situations, such as in headers that
    contain logos and navigation menus, you may want to align all
    children centrally.
*/
.layout--middle {
	align-items: center;
}
/*
    Align children to the top.
*/
.layout--top {
	align-items: flex-start;
}

/*
    Align children to the bottom.
*/
.layout--bottom {
	align-items: flex-end;
}

/*
    In situation where we need children to 'float' at opposite directions of the layout,
    we can use the `justify-content` property to push them to the edges.
*/
.layout--spread {
	justify-content: space-between;
}
/*
    We might want to move the children towards the end of the container
*/
.layout--end {
	justify-content: flex-end;
}
.layout--wrap {
	flex-wrap: wrap;
}

.layout--centered {
	justify-content: space-around;
}

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

/*
    This is the only element we need in a layout block.
    By default, a `layout__item` does not need to do anything special.
    It has `flex: 0 1 auto` which is a shorthand for:
        - flex-grow: 0
        - flex-shrink: 1
        - flex-basis: auto
    We do however set `overflow: hidden` on it, so that we can enable
    scrolling on items that need it (see modifiers below).
*/
.layout__item {
	flex: 0 1 auto;
	overflow: hidden;
}

/*
    This is a layout item that permits its children to overflow
*/
.layout__item--overflow {
	overflow: visible;
}

/*
    A layout item that grows to fill the available space.
*/
.layout__item--grow {
	flex-grow: 1;
}
/*
    A layout item that shows a scrollbar in case its content overflows
*/
.layout__item--scroll {
	overflow-y: auto;
	overflow-x: hidden;
}
/*
    A layout item that maintains a fixed size.
    (Either width or height, depending on how the items are laid out)
    This is accomplished by setting both `flex-grow` and `flex-shrink` to 0,
    in effect disabling the flexibility on the item.
*/
.layout__item--fixed-size {
	flex-grow: 0;
	flex-shrink: 0;
	box-sizing: border-box;
}
/*
    For items with a fixed size, we control that size by setting the
    `flex-basis` property rather than the `width` or `height` property.
    Below, we define a couple of sizes that are used throughout the layout.
*/
.layout__item--width-medium {
	flex-basis: 16em;
}
.layout__item--height-small {
	flex-basis: 3.5em;
	max-height: 3.5em;
}

.layout__item--width-10 {
	flex-basis: 10%;
}

.layout__item--width-15 {
	flex-basis: 15%;
}

.layout__item--width-20 {
	flex-basis: 20%;
}

.layout__item--width-25 {
	flex-basis: 25%;
}

.layout__item--width-30 {
	flex-basis: 30%;
}

.layout__item--width-35 {
	flex-basis: 35%;
}

.layout__item--width-40 {
	flex-basis: 40%;
}

.layout__item--width-45 {
	flex-basis: 45%;
}

.layout__item--width-50 {
	flex-basis: 50%;
}

.layout__item--width-55 {
	flex-basis: 55%;
}

.layout__item--width-60 {
	flex-basis: 60%;
}

.layout__item--width-65 {
	flex-basis: 65%;
}

.layout__item--width-70 {
	flex-basis: 70%;
}

.layout__item--width-75 {
	flex-basis: 75%;
}

.layout__item--width-80 {
	flex-basis: 80%;
}

.layout__item--width-85 {
	flex-basis: 85%;
}

.layout__item--width-90 {
	flex-basis: 90%;
}

.layout__item--full-width {
	flex-basis: 100%;
}

.layout__item--position-relative {
	position: relative;
}

/*
    In general, you'd want to adjust how the app lays out when viewed
    on small devices.
    Below is a minimal example of turning all flex layouts to normal block layouts.
*/
/*@media (max-width: 40em) {
    .layout {
        display: block;
    }

    .layout__item {
        max-height: auto !important;
    }
}*/

.mq-sidebar-list-react {
	font-size: 0.75rem;
	line-height: 2em;
	padding: 0;

	/* zebra background */
	background-image: linear-gradient(var(--editor-menu-hover-color) 50%, transparent 0);
	background-size: auto 4em;
	background-origin: content-box;
}

.mq-sidebar-list-react
	.mq-sidebar-list-page.expanded
	> .mq-sidebar-list-page__inner
	> .mq-sidebar-list-page__title
	.expand
	.mq-outline-icon,
.mq-sidebar-list-react
	.mq-sidebar-list-page.expanded
	> .mq-sidebar-list-page__title
	.expand
	.mq-icon {
	transform: rotate(90deg);
}

.mq-sidebar-list-react .mq-sidebar-list-page-input-wrapper {
	width: 100%;
}

.mq-sidebar-list-page-input-wrapper input.title-rename-input {
	padding: 2px 5px;
}

.mq-sidebar-open-pages {
	max-height: 200px;
}

.mq-sidebar-contextmenu-container {
	height: 100%;
}

.mq-sidebar-open-pages .sidebar-pane-header-label {
	border-top: none;
}
.mq-sidebar-open-pages .sidebar-pane-header-label .mq-icon {
	width: 1.25em;
	height: 1.25em;
	fill: var(--editor-active-color);
}

.mq-sidebar-header-controls .delete-permanently .mq-icon {
	fill: var(--error-text-color);
	color: var(--error-text-color);
}

.mq-sidebar-list-pages {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.has-stencil-counter .mq-sidebar-list-pages {
	bottom: 45px;
}

.zoom__bar {
	margin-right: 0.5em;
}

.zoom__bar__level {
	width: 3.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
	font-weight: bold;
	padding: 0;
}

.zoom__bar__level--fit {
	color: #006ce5;
}

@media (max-width: 1096px) {
	.zoom__bar button:last-child,
	.zoom__bar .ft__button__separator {
		display: none;
	}
	.zoom__bar button:nth-child(3) {
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		display: block;
	}
}

@media (--tablet) {
	.zoom__bar button:last-child,
	.zoom__bar .ft__button__separator {
		display: none;
	}
	.zoom__bar button:nth-child(3) {
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		display: block;
	}
}

@media (max-width: 767px) {
	.zoom__bar__level {
		display: none;
	}
}

@media (--phone) {
	.zoom__bar__level {
		display: none;
	}
}

.floating__toolbar__wrapper {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	margin: 16px;
	z-index: 50;

	/* text color */
	--c-fg: var(--editor-text-color);
	--c-fg-disabled: var(--editor-border-color);

	/* background color */
	--c-bg: var(--editor-bg);
	--c-bg-hover: var(--editor-active-bg);

	--c-border: var(--editor-border-color);
}

.ft__button__group {
	height: 2.4em;
	display: flex;
	align-items: stretch;
	font-size: 14px;
	color: var(--c-fg);
	background-color: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 6px;
}

.ft__button__group > button {
	min-width: 2.4em;
	color: var(--c-fg);
	background-color: var(--c-bg);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.14s cubic-bezier(0.23, 1, 0.32, 1);
}

.ft__button__group > button:first-of-type {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.ft__button__group > button:last-of-type {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

.ft__button__group > button svg {
	fill: currentColor;
}

.ft__button__group > button:hover {
	color: var(--editor-active-color);
	background-color: var(--c-bg-hover);
}

.ft__button__group > button:focus {
	outline: none;
}

.ft__button__group > button svg {
	width: 16px;
	height: 16px;
}

.ft__button__group[disabled],
.ft__button__group > button[disabled] {
	/* 
		TODO: This undoes a global [disabled] style, 
		but ideally such a far-reaching style should not exist 
	*/
	opacity: 1 !important;
	color: var(--c-fg-disabled);
}

.ft__button__separator {
	height: 100%;
	border-right: 1px solid var(--c-border);
	opacity: 0.5;
}

.fullscreen-notification {
	display: none;
	opacity: 1;
	transition: opacity 0.2s;
	position: fixed;
	top: 5em;
	left: 50%;
	transform: translate(-50%, 0);
	background: rgba(0, 0, 0, 0.6);
	padding: 1em;
	border-radius: 0.5em;
	color: var(--mq-white);
	font-size: 1.2em;
	z-index: 10000;
}

body.fullscreen .fullscreen-notification {
	display: block;
}

body.fullscreen .fullscreen-notification.dismiss {
	opacity: 0;
	pointer-events: none;
}

body:-full-screen .fullscreen-notification {
	display: none;
}

body:-moz-full-screen .fullscreen-notification {
	display: none;
}

body:-webkit-full-screen .fullscreen-notification {
	display: none;
}

body.fullscreen .fullscreen-nav-arrow {
	display: block;
}

.fullscreen-nav-arrow {
	display: none;
	position: fixed;
	height: 40%;
	width: 5%;
	font-size: 5rem;
	top: 30%;
	z-index: 25;
}

.fullscreen-nav-arrow a {
	pointer-events: none;
	opacity: 0;
	display: block;
	top: 50%;
	position: fixed;
	transform: translate(0, -50%);
	transition: opacity 0.15s;
	line-height: 1;
}

@media (hover: hover), (any-hover: hover), (-moz-touch-enabled: 0) {
	.fullscreen-nav-arrow:hover a {
		opacity: 1;
		pointer-events: visible;
	}
}

.fullscreen-nav-arrow a:active .mq-icon,
.fullscreen-nav-arrow a .mq-icon:active {
	fill: var(--editor-active-color);
}

.canvas-stage:-webkit-full-screen {
	background: var(--stage-bg);
}

.canvas-stage:fullscreen,
.canvas-stage:-webkit-full-screen {
	background: var(--stage-bg);
}

body.fullscreen #stage-wrapper {
	top: 0;
}

/*body.fullscreen #sidebar {
	display: none;
}*/

body.fullscreen #toolbar-wrapper {
	position: fixed;
	transition: top ease-in 0.15s 0.05s;
	top: -50px;
}

body.fullscreen #toolbar-wrapper:hover,
body.fullscreen #toolbar-wrapper.menu-shown {
	top: 0px;
}

body.fullscreen #toolbar-wrapper.hidden {
	display: none;
}

body.fullscreen #toolbar-wrapper:hover #toolbar-hit-detection {
	height: 10px;
	bottom: -10px;
}

#toolbar-hit-detection {
	display: none;
}

body.fullscreen #toolbar-hit-detection {
	position: absolute;
	bottom: -25px;
	width: 100%;
	height: 25px;
	display: block;
	left: 0;
}
/* For some reason Autoprefixer doesn't autoprefix this so we need to keep
the prefixed versions in style.css for now
*/
.canvas-stage:-webkit-full-screen {
	background: var(--stage-bg);
}
.canvas-stage:-moz-full-screen {
	background: var(--stage-bg);
}

.prev-arrow {
	left: 15px;
}

.prev-arrow a {
	left: 0;
}

.next-arrow {
	right: 15px;
}

.next-arrow a {
	right: 0;
}