* {
  padding: 0;
  margin: 0;
  outline: none;
}

svg {
  overflow: visible !important;
}

.overflow {
  overflow: auto;
}

/* textbox */

body {
  overflow: hidden;
}

text {
  user-select: none;
}

tspan {
  user-select: none;
  cursor: text;
}

#cursor {
  stroke: #000;
  stroke-width: 1px;
}

@keyframes blink {
  0% {
    stroke-opacity: 1;
  }

  50% {
    stroke-opacity: 0;
  }

  100% {
    stroke-opacity: 1;
  }
}

.break-line {
  width: 100%;
  border-bottom: 1px solid rgba(116, 116, 116, 0.1);
  margin: 2px 0 2px 0;
}

.blinking-line {
  animation: blink 1.2s step-start infinite;
}

/* textbox */

/* show up/down arrows for input number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

.hide-arrows-input::-webkit-inner-spin-button,
.hide-arrows-input::-webkit-calendar-picker-indicator,
.hide-arrows-input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  opacity: 0 !important;
}


/* label {
  display: block !important;
  margin-bottom: 0 !important;
} */

#gradPicker {
  position: absolute;
  z-index: 99;
}

.shadow {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(117, 117, 117, 0.7));
  filter: drop-shadow(3px 3px 2px rgba(117, 117, 117, 0.7));
  /* Similar syntax to box-shadow */
}

/* .zoompan-viewport {
  position: relative;
  display: flex;
  overflow: hidden;
  width: calc(100% - var(--scrollbarsWidth) * 1px);
  height: calc(100% - var(--scrollbarsWidth) * 1px);
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.zoompan-canvas {
  flex: none;
  transform-origin: center;
  backface-visibility: hidden;
}

.zoompan-track-x {
  position: absolute;
  bottom: 0;
  left: 0;
  right: calc(var(--scrollbarsWidth) * 1px);
  height: calc(var(--scrollbarsWidth) * 1px);
  background: rgba(0, 0, 0, 0.3);
  touch-action: none;
}

.zoompan-track-y {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--scrollbarsWidth) * 1px);
  bottom: calc(var(--scrollbarsWidth) * 1px);
  background: rgba(0, 0, 0, 0.3);
  touch-action: none;
}

.zoompan-thumb-x {
  position: absolute;
  height: inherit;
  background: rgba(255, 255, 255, 0.5);
}

.zoompan-thumb-y {
  position: absolute;
  width: inherit;
  background: rgba(255, 255, 255, 0.5);
} */


/* ::-webkit-scrollbar {
    width: var(--x1);
    height: var(--x1);
    background: transparent;
    position: absolute;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--z3);
}

::-webkit-scrollbar-corner {
    background: transparent;
} */

:root,
.inverted-undo {
  /* red */
  /* yellow */
  /* green */
  --z0: #111827;
  --a0: #2a1c26;
  --b0: #2a2429;
  --c0: #162730;
  --z1: #1e2433;
  --a1: #421f24;
  --b1: #45322a;
  --c1: #1c3b3b;
  --z2: #2b313f;
  --a2: #5a2122;
  --b2: #60422b;
  --c2: #1f4f47;
  --z3: #393e4c;
  --a3: #71231f;
  --b3: #7b522a;
  --c3: #226452;
  --z4: #474c59;
  --a4: #89221c;
  --b4: #976328;
  --c4: #227a5e;
  --z5: #565a66;
  --a5: #a22018;
  --b5: #b47424;
  --c5: #20906a;
  --z6: #656974;
  --a6: #bb1b13;
  --b6: #d1861d;
  --c6: #1ba776;
  --z7: #747782;
  --a7: #d4100b;
  --b7: #f0990f;
  --c7: #0ebf82;
  --z8: #848790;
  --a8: #e62b18;
  --b8: #ffa723;
  --c8: #31ce8f;
  --z9: #94969f;
  --a9: #ee5035;
  --b9: #ffb146;
  --c9: #59d49c;
  --z10: #a4a6ae;
  --a10: #f66d50;
  --b10: #ffbc63;
  --c10: #76dbaa;
  --z11: #b4b7bd;
  --a11: #fb866c;
  --b11: #ffc67d;
  --c11: #8fe0b7;
  --z12: #c5c7cc;
  --a12: #ff9f88;
  --b12: #ffd197;
  --c12: #a7e6c5;
  --z13: #d6d8db;
  --a13: #ffb7a5;
  --b13: #ffdbb1;
  --c13: #bdecd3;
  --z14: #e7e9eb;
  --a14: #ffcfc3;
  --b14: #ffe6cb;
  --c14: #d2f1e1;
  --z15: #f9fafb;
  --a15: #fee6e1;
  --b15: #fef1e5;
  --c15: #e8f6ef;

  --d0: #152239;
  --e0: #181e39;
  --f0: #1f1d39;
  --g0: #291d30;
  --d1: #1a3050;
  --e1: #202651;
  --f1: #2f2251;
  --g1: #43223b;
  --d2: #1d3d69;
  --e2: #282e69;
  --f2: #3f2769;
  --g2: #5e2647;
  --d3: #1e4c82;
  --e3: #303782;
  --f3: #502b82;
  --g3: #7a2953;
  --d4: #1e5a9d;
  --e4: #383f9d;
  --f4: #622e9d;
  --g4: #962a5f;
  --d5: #1c69b8;
  --e5: #4047b8;
  --f5: #7430b8;
  --g5: #b32a6c;
  --d6: #1779d4;
  --e6: #4750d4;
  --f6: #8732d4;
  --g6: #d12678;
  --d7: #0b89f0;
  --e7: #4e59f0;
  --f7: #9933f0;
  --g7: #ef2085;
  --d8: #3797ff;
  --e8: #6366ff;
  --f8: #aa43ff;
  --g8: #ff3892;
  --d9: #62a3ff;
  --e9: #7e78ff;
  --f9: #b85fff;
  --g9: #ff5c9f;
  --d10: #7fafff;
  --e10: #958aff;
  --f10: #c477ff;
  --g10: #ff78ac;
  --d11: #98bbfe;
  --e11: #a99cff;
  --f11: #cf8fff;
  --g11: #ff91b9;
  --d12: #aec8fe;
  --e12: #bbafff;
  --f12: #daa5ff;
  --g12: #ffa8c6;
  --d13: #c3d4fd;
  --e13: #cdc2fe;
  --f13: #e3bbfe;
  --g13: #ffbed4;
  --d14: #d7e2fd;
  --e14: #ddd6fd;
  --f14: #ebd1fd;
  --g14: #ffd4e1;
  --d15: #eaeffc;
  --e15: #ece9fc;
  --f15: #f3e8fc;
  --g15: #fde9ef;
  -webkit-font-smoothing: antialiased;
  --shadow-bg: 0 var(--x2) var(--x4) var(--z0);
  --shadow: 0 var(--x1) var(--x8) rgba(0, 0, 0, 0.4);
  --accent0: var(--d0);
  --comp0: var(--g0);
  --accent1: var(--d1);
  --comp1: var(--g1);
  --accent2: var(--d2);
  --comp2: var(--g2);
  --accent3: var(--d3);
  --comp3: var(--g3);
  --accent4: var(--d4);
  --comp4: var(--g4);
  --accent5: var(--d5);
  --comp5: var(--g5);
  --accent6: var(--d6);
  --comp6: var(--g6);
  --accent7: var(--d7);
  --comp7: var(--g7);
  --accent8: var(--d8);
  --comp8: var(--g8);
  --accent9: var(--d9);
  --comp9: var(--g9);
  --accent10: var(--d10);
  --comp10: var(--g10);
  --accent11: var(--d11);
  --comp11: var(--g11);
  --accent12: var(--d12);
  --comp12: var(--g12);
  --accent13: var(--d13);
  --comp13: var(--g13);
  --accent14: var(--d14);
  --comp14: var(--g14);
  --accent15: var(--d15);
  --comp15: var(--g15);

}

.inverted {
  --z0: #ffffff;
  --a0: #ffebe5;
  --b0: #fff5e9;
  --c0: #edfaf3;
  --z1: #ececee;
  --a1: #ffd2c6;
  --b1: #ffeace;
  --c1: #d7f5e4;
  --z2: #dadade;
  --a2: #ffbaa7;
  --b2: #ffdfb3;
  --c2: #c1efd5;
  --z3: #c8c8ce;
  --a3: #ffa28a;
  --b3: #ffd399;
  --c3: #aae9c7;
  --z4: #b6b6be;
  --a4: #fe886d;
  --b4: #ffc87f;
  --c4: #92e2b9;
  --z5: #a4a5ae;
  --a5: #f76e51;
  --b5: #ffbd64;
  --c5: #78dcab;
  --z6: #93949e;
  --a6: #ef5135;
  --b6: #ffb247;
  --c6: #5ad59d;
  --z7: #82838f;
  --a7: #e62c18;
  --b7: #ffa723;
  --c7: #31ce8f;
  --z8: #727380;
  --a8: #d30d0a;
  --b8: #ef980e;
  --c8: #0dbe81;
  --z9: #616371;
  --a9: #b91612;
  --b9: #cf841c;
  --c9: #18a574;
  --z10: #525463;
  --a10: #9e1a17;
  --b10: #b17122;
  --c10: #1d8c68;
  --z11: #424555;
  --a11: #851b1a;
  --b11: #935e26;
  --c11: #1e745b;
  --z12: #333647;
  --a12: #6c1b1c;
  --b12: #764c27;
  --c12: #1d5d4e;
  --z13: #25283a;
  --a13: #53191e;
  --b13: #5a3a27;
  --c13: #1a4742;
  --z14: #171b2d;
  --a14: #3b1620;
  --b14: #3e2a26;
  --c14: #153236;
  --z15: #080c21;
  --a15: #221320;
  --b15: #231a23;
  --c15: #0f1e2a;

  --d0: #eff3ff;
  --e0: #f2eeff;
  --f0: #f9ecff;
  --g0: #ffedf3;
  --d1: #dbe5ff;
  --e1: #e2d9ff;
  --f1: #f0d5ff;
  --g1: #ffd7e5;
  --d2: #c7d8ff;
  --e2: #d1c5ff;
  --f2: #e7bfff;
  --g2: #ffc1d6;
  --d3: #b2caff;
  --e3: #bfb2ff;
  --f3: #dda8ff;
  --g3: #ffabc8;
  --d4: #9bbdff;
  --e4: #ac9eff;
  --f4: #d290ff;
  --g4: #ff93bb;
  --d5: #81b0ff;
  --e5: #978bff;
  --f5: #c679ff;
  --g5: #ff7aad;
  --d6: #63a3ff;
  --e6: #7f78ff;
  --f6: #b960ff;
  --g6: #ff5da0;
  --d7: #3897ff;
  --e7: #6366ff;
  --f7: #ab44ff;
  --g7: #ff3992;
  --d8: #0788f0;
  --e8: #4d58f0;
  --f8: #9932f0;
  --g8: #ef1e85;
  --d9: #1077d2;
  --e9: #444ed2;
  --f9: #842fd2;
  --g9: #cf2277;
  --d10: #1466b5;
  --e10: #3b44b5;
  --f10: #702cb5;
  --g10: #b02369;
  --d11: #165599;
  --e11: #323a99;
  --f11: #5d2899;
  --g11: #91235c;
  --d12: #15467e;
  --e12: #29317e;
  --f12: #4a247e;
  --g12: #74214f;
  --d13: #143664;
  --e13: #212764;
  --f13: #381f64;
  --g13: #581e42;
  --d14: #11284b;
  --e14: #181e4b;
  --f14: #271a4b;
  --g14: #3c1a36;
  --d15: #0d1a33;
  --e15: #101633;
  --f15: #161433;
  --g15: #21142a;
  -webkit-font-smoothing: auto;
  --shadow-bg: 0 var(--x2) var(--x4) var(--z3);
  --shadow: 0 var(--x1) var(--x8) rgba(0, 0, 0, 0.1);
  --accent0: var(--d0);
  --comp0: var(--g0);
  --accent1: var(--d1);
  --comp1: var(--g1);
  --accent2: var(--d2);
  --comp2: var(--g2);
  --accent3: var(--d3);
  --comp3: var(--g3);
  --accent4: var(--d4);
  --comp4: var(--g4);
  --accent5: var(--d5);
  --comp5: var(--g5);
  --accent6: var(--d6);
  --comp6: var(--g6);
  --accent7: var(--d7);
  --comp7: var(--g7);
  --accent8: var(--d8);
  --comp8: var(--g8);
  --accent9: var(--d9);
  --comp9: var(--g9);
  --accent10: var(--d10);
  --comp10: var(--g10);
  --accent11: var(--d11);
  --comp11: var(--g11);
  --accent12: var(--d12);
  --comp12: var(--g12);
  --accent13: var(--d13);
  --comp13: var(--g13);
  --accent14: var(--d14);
  --comp14: var(--g14);
  --accent15: var(--d15);
  --comp15: var(--g15);
}

:root {
  --x1: 4px;
  --x2: 8px;
  --x3: 12px;
  --x4: 16px;
  --x5: 20px;
  --x6: 24px;
  --x7: 28px;
  --x8: 62px;
  --x9: 36px;
  --x10: 40px;
  --x11: 44px;
  --x12: 48px;
  --x13: 52px;
  --x14: 56px;
  --x15: 60px;
  --x16: 64px;
  --x17: 32px;
  --mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --panel-width: var(--x10);
  --transition-duration: 200ms;
  --transition: all var(--transition-duration) ease;
}

#panzoom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 0;
}

#svgcanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

#workarea {
  display: block;
  position: absolute;
  top: var(--x8);
  left: var(--x12);
  bottom: var(--x10);
  right: var(--panel-width);
  background-color: #fff;
  overflow: auto;
  align-items: center;
  justify-content: center;
  transition: transform 500ms cubic-bezier(0.13, 0.66, 0.24, 0.92);
  border: 1px solid #ccc;
}

#panels {
  position: absolute;
  border-right: none;
  width: var(--panel-width);
  height: calc(100% - var(--x8) - 32px);
  top: var(--x8);
  bottom: 0;
  right: 0;
  z-index: 2;
  line-height: 0;
  background-color: #fff;
}

#tools_left {
  position: absolute;
  border-right: none;
  width: var(--x12);
  top: var(--x8);
  bottom: 0;
  left: 0;
  z-index: 2;
  line-height: 0;
  background-color: #fff;
}

.tool_button {
  height: 35px;
  width: var(--x12);
  cursor: pointer;
  line-height: 50px;
  text-align: center;
}

.tool_button img {
  padding: 3px;
  border: 1px solid rgba(0, 0, 0, 0);
}

.tool_button img.active {
  border: 1px solid #99d1ff;
  background-color: #cce8ff;
}

#option_bar img {
  border: 1px solid transparent;
}

#option_bar img.active {
  border: 1px solid #99d1ff;
  background-color: #cce8ff;
}

#option_bar img.disable {
  opacity: 0.5;
}

.inverted .tool_button svg {
  fill: var(--z13);
}

.tool_button:hover {
  transform: scale(1);
}

.tool_button:hover svg {
  fill: var(--z13);
}

.tool_button.current {
  /* transform: scale(1.4); */
}

.tool_button svg {
  vertical-align: center;
  fill: var(--z5);
}

.tool_button.current svg {
  fill: var(--accent8);
}

.tool_button.current svg {
  fill: var(--accent7);
}


.tool_button.disabled svg {
  background-color: #aaa;
  cursor: not-allowed;
  fill: var(--z3);
  pointer-events: none;
}

#color_tools #tool_fill .color_block>div {
  position: absolute;
  top: 0;
  left: 0;
}

#color_tools #tool_fill .color_block #fill_bg,
#color_tools #tool_stroke .color_block #stroke_bg {
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  right: 1px;
}

#stroke_color:after {
  content: '';
  position: absolute;
  display: block;
  left: var(--x1);
  right: var(--x1);
  top: var(--x1);
  bottom: var(--x1);
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--z13);
}

#tool_switch {
  cursor: pointer;
  width: 11px;
  height: 11px;
  position: absolute;
  top: -5px;
  right: 0;
}

#tool_switch svg {
  fill: var(--z6);
}

/* #tool_switch:hover svg {
    fill: var(--z15);
} */

#stroke_color:hover:after {
  box-shadow: 0 0 0 1px var(--z15);
}

.color_block {
  width: var(--x5);
  height: var(--x5);
  overflow: hidden;
  border: solid var(--z12) 1px;
  cursor: pointer;
}

.color_block svg {
  width: 22px;
  height: 22px;
}

#tool_stroke .color_block>div {
  position: absolute;
  bottom: 0;
  right: 0;
}

#color_tools {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 12px 6px 0 6px;
}

#color_tools {
  width: auto;
  height: auto;
}

#tool_fill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#tool_fill.active,
#tool_stroke.active {
  z-index: 2;
}

#tool_stroke {
  top: 14px;
  left: 14px;
}

#tool_fill,
#tool_stroke,
#tool_canvas {
  box-shadow: 0 0 0 1px var(--z0);
  position: absolute;
}

#tool_canvas .color_block {
  width: 58px;
  height: 38px;
}

#tool_canvas .color_block svg {
  width: auto;
  height: auto;
}

#color_canvas_tools,
#fill_bg,
#stroke_bg {
  background: var(--z15) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;
}

/* Ruler */

#rulers>div {
  position: absolute;
  background: #fff;
  z-index: 1;
  overflow: hidden;
  -webkit-font-smoothing: none;
}

#rulers #ruler_corner {
  top: var(--x8);
  left: var(--x12);
  width: var(--x4);
  height: var(--x4);
  z-index: 2;
  /* border-radius: var(--x2) 0 0 0; */
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  background-color: #fff;
}

#ruler_x {
  height: var(--x4);
  top: var(--x8);
  /* left: var(--x12); */
  left: 0;
  right: var(--panel-width);
  overflow: hidden;
  /* border-radius: var(--x2); */
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

#ruler_y {
  width: var(--x4);
  /* top: var(--x8); */
  top: 0;
  left: var(--x12);
  bottom: var(--x10);
  overflow: hidden;
  /* border-radius: var(--x2); */
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#tools_bottom {
  position: absolute;
  left: var(--x12);
  right: 0;
  bottom: 0;
  height: var(--x10);
  overflow: visible;
  background-color: #fff;
  z-index: 2;
}

#zoom_panel,
#zoom_select {
  padding: var(--x2) 0;
  right: calc(var(--panel-width) + var(--x2));
  position: absolute;
  cursor: pointer;
  width: 100px;
}

#zoom_label:after {
  content: '';
}

#zoom_select {
  opacity: 0;
  z-index: 100;
}

#zoom_select:hover+div {
  opacity: 1;
}

#zoom_label {
  position: absolute;
  background: transparent;
  width: 100%;
  margin: 0;
}

#zoom_panel .caret {
  margin-top: -5px;
}

#zoom_label img,
#zoom_label svg {
  width: var(--x4);
  height: var(--x4);
}

#zoomLabel {
  width: var(--x4);
  height: var(--x4);
  cursor: pointer;
}

#zoomLabel svg {
  fill: var(--z10);
  position: relative;
  top: 2px;
}

#zoom_label input {
  -webkit-appearance: none;
  color: var(--z10);
  font-size: 13px;
  height: auto;
  width: var(--x12);
  padding: 0;
  cursor: default;
  position: absolute;
  background: transparent;
  border: none;
  top: 2px;
  left: var(--x6);
  pointer-events: none;
}

#zoom_label select {
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#zoom_label span {
  top: 0;
  left: 0;
}

#menu_bar {
  padding: 0 0 0 8px;
  position: relative;
  z-index: 3;
  height: calc(var(--x8) - 32px);
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #ebebeb;
}

#menu_bar.active .menu.open .menu_list {
  display: block;
}

.menu {
  position: relative;
  z-index: 105;   /* above #option_bar (101) so menu-bar dropdowns sit over the option bar */
  color: var(--z3);
  display: inline-block;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.menu_title {
  cursor: pointer;
  display: inline-block;
  z-index: 10;
  color: #000;
  position: relative;
  line-height: calc(var(--x8) - 32px);
  padding: 0 var(--x3);
  vertical-align: top;
  user-select: none;
}

.menu .menu_title:hover {
  background: #ccc;
}

.menu_list .separator {
  margin: var(--x1) 0;
  border-top: solid var(--z14) 1px;
}

.menu_list {
  position: absolute;
  left: 0;
  top: calc(var(--x8) - 32px);
  white-space: nowrap;
  background: var(--z15);
  padding: var(--x2) 0;
  border-radius: 0 var(--x2) var(--x2) var(--x2);
  box-shadow: var(--shadow);
  width: 250px;
}


#menu_bar.active .menu.open .menu_title {
  background: var(--z15);
  color: var(--z1);
}

.inverted #menu_bar.active .menu.open .menu_title {
  background: var(--z0);
  color: var(--z15);
}

.menu .menu_list {
  display: none;
  position: absolute;
}

.menu_list .menu_item {
  position: relative;
  line-height: var(--x6);
  padding: var(--x1) var(--x16) var(--x1) var(--x6);
  cursor: pointer;
  color: var(--z3);
}

.menu_list input[type=file] {
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  background: red;
  z-index: 100;
}


.menu_list .menu_item.tool_button {
  background: transparent;
  border: none;
  margin: 0;
  padding: var(--x1) var(--x16) var(--x1) var(--x6);
  height: auto;
  width: auto;
}

.menu_list .menu_item.push_button_pressed:before {
  content: '✔';
  position: absolute;
  display: block;
  left: 6px;
  top: var(--x1);
}

.menu_list .menu_item:hover,
.menu_list .menu_item.push_button_pressed:hover {
  background: var(--accent15);
  color: #000;
}

.menu_list .menu_item.disabled:hover,
.menu_list .menu_item.push_button_pressed.disabled:hover {
  background: transparent;
  color: var(--z3);
}

.menu_list .menu_item.push_button_pressed {
  background: transparent;
  border: none;
  width: auto;
  height: auto;
  margin: 0;
}

.menu_list .menu_item span {
  display: block;
  position: absolute;
  right: var(--x2);
  padding: 0 var(--x2);
  background: var(--z14);
  top: 50%;
  transform: translate(0, -50%);
  text-align: center;
  font-size: 12px;
  line-height: var(--x6);
  border-radius: var(--x1);
  font-weight: 600;
}

.menu_list .menu_item:not(.disabled):hover span {
  background: var(--accent13);
}

#modal_donate {
  display: none;
}

.menu-right {
  margin-left: auto;
}

.menu-right button {
  background: transparent;
  line-height: var(--x5);
}

.menu-right button:hover {
  background: transparent;
}

.menu-right button:active {
  box-shadow: none;
  outline: none;
}

.menu-right button:hover svg {
  fill: var(--z12);
}

.menu-right svg {
  fill: var(--z5);
}

.inverted .menu-right svg {
  fill: var(--z10);
}

#option_bar {
  /* padding: 0 0 0 10px; */
  width: 100%;
  left: 0;
  top: 30px;
  position: absolute;
  /* lift the option bar's stacking context ABOVE the floating right dock (z-index:100) so its
     fixed "more" overflow panel isn't covered by the dock; the menu bar is lifted higher (105)
     so its dropdowns still sit over the option bar. */
  z-index: 101;
  height: calc(var(--x8) - 30px);
  display: flex;
  background-color: #fff;
}

.option_button {
  /* height: var(--x17);
  width: var(--x17); */
  cursor: pointer;
  line-height: 43px;
  text-align: center;
  /* transform: scale(0.8); */
}

.option_input {
  display: flex;
  align-items: center;
}

.option_input label {
  margin-left: 5px;
  margin-right: 5px;
}

.option_input input {
  width: 60px;
  height: 18px;
}

.option_input select {
  height: 22px;
}

.option_input_number_list {
  width: 40px !important;
  z-index: 1;
  padding-left: 5px;
  border: none;
}

.option_select_number_list {
  width: 64px !important;
  margin-left: -46px;
  padding-left: 5px;
}

/* .menu_item {
  position: relative;
  padding: 8px 12px;
  cursor: pointer;
}

.has_submenu:hover .submenu {
  display: block;
} */

.submenu {
  display: none !important;
  position: absolute !important;
  left: 100%;
  top: 0;
  background-color: white;
  border: 1px solid #ccc;
  min-width: 253px;
  z-index: 1000;
}

/* .submenu_item {
  padding: 8px 12px;
  cursor: pointer;
}

.submenu_item:hover {
  background-color: #f0f0f0;
} */

.has_submenu:hover .submenu {
  display: block !important;
}
/* sk-navbar (moved out of engine JS / 41-Viewer footer builder) */
.sk-navbar {
  width: calc(100% - 40px);
  height: 50px;
  background-color: #333;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.sk-navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  transition: transform 0.3s;
  justify-content: flex-start;
}
.sk-navbar li {
  display: inline-block;
  padding: 0 15px;
  color: white;
  line-height: 50px;
  user-select: none;
  cursor: grab;
  white-space: nowrap;
}