@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../font/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../font/OpenSans-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../font/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../font/OpenSans-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../font/OpenSans-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../font/OpenSans-BoldItalic.ttf') format('truetype');
}
/*--------
    BUTTON
----------*/
.Button {
  background-color: hsla(0, 0%, 90%, 0);
  border: none;
  box-sizing: border-box;
  cursor: default;
  display: flex;
  flex: none;
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  font-size: 1em;
  min-height: 2em;
  min-width: 2em;
  outline: none;
  padding: 0.5em 0.375em;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.Button:hover:not(.disabled) {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.Button:active:not(.disabled) {
  background-color: hsla(0, 0%, 90%, 0.2);
}
.Button .wrapper {
  align-items: center;
  display: inline-flex;
  flex: none;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100%;
}
.Button .wrapper > span {
  flex: none;
  margin: 0 0.125em;
  pointer-events: none;
}
.Button .wrapper > span.hidden {
  display: none;
}
.Button .icon {
  display: inline-block;
  height: 1em;
  width: 1em;
}
.Button .text {
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 1em;
  line-height: 1em;
}
.Button.disabled {
  opacity: 0.5;
  pointer-events: none;
}
/*-----------
    CHECKBOX
-------------*/
.CheckBox {
  align-items: center;
  box-sizing: border-box;
  cursor: default;
  display: inline-flex;
  flex: none;
  flex-flow: row nowrap;
  font-size: 1em;
  justify-content: flex-start;
  line-height: 1em;
  min-height: 2em;
  min-width: 2em;
  padding: 0 /* 0.5em*/;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.CheckBox > input[type=checkbox] {
  display: none;
}
.CheckBox > input[type=checkbox]:checked + .check:before {
  background-color: hsl(0, 0%, 100%);
  content: "";
  display: inline-block;
  height: 0.25em;
  left: 0.125em;
  position: absolute;
  top: 0.5em;
  transform: skewY(45deg);
  width: 0.25em;
}
.CheckBox > input[type=checkbox]:checked + .check:after {
  background-color: hsl(0, 0%, 100%);
  content: "";
  display: inline-block;
  height: 0.25em;
  position: absolute;
  top: 0.375em;
  transform: skewY(-45deg);
  width: 0.5em;
  left: 0.375em;
}
.CheckBox .check {
  background-color: hsl(0, 0%, 25%);
  display: inline-block;
  flex: none;
  font-size: 1em;
  height: 1em;
  margin: 0.5em 0;
  position: relative;
  width: 1em;
}
.CheckBox:hover:not(.disabled) .check {
  background-color: hsl(0, 0%, 28%);
}
.CheckBox .text {
  color: hsl(0, 0%, 100%);
  display: inline-block;
  flex: none;
  font-size: 1em;
  line-height: 1em;
  margin-left: 0.25em;
  pointer-events: none;
}
.CheckBox.disabled {
  opacity: 0.5;
  pointer-events: none;
}
/*---------------
    CONTEXT MENU
-----------------*/
.ContextMenu {
  background-color: hsl(0, 0%, 20%);
  margin: 0 !important;
  min-width: 12em;
  position: absolute;
}
.ContextMenuItem {
  background-color: hsla(0, 0%, 90%, 0);
  border: none;
  box-sizing: border-box;
  cursor: default;
  display: flex;
  flex: none;
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  font-size: 1em;
  min-height: 2em;
  min-width: 2em;
  outline: none;
  padding: 0.5em 0.375em;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ContextMenuItem:hover:not(.disabled) {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.ContextMenuItem:active:not(.disabled) {
  background-color: hsla(0, 0%, 90%, 0.2);
}
.ContextMenuItem .wrapper {
  align-items: center;
  display: inline-flex;
  flex: none;
  flex-flow: row nowrap;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.ContextMenuItem .icon {
  display: inline-block;
  height: 1em;
  width: 1em;
}
.ContextMenuItem .text {
  color: hsl(0, 0%, 100%);
  flex: 1 0 auto;
  display: inline-block;
  font-size: 1em;
  line-height: 1em;
}
.ContextMenuItem .key {
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 1em;
  line-height: 1em;
  opacity: 0.5;
}
.ContextMenuItem span {
  flex: none;
  margin: 0 0.125em;
  pointer-events: none;
}
.ContextMenuItem span.hidden {
  display: none;
}
.ContextMenuItem.disabled {
  opacity: 0.5;
  pointer-events: none;
}
/*-------
    HBOX
---------*/
.HBox {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex: none;
}
.HBox > .flex-None {
  flex: none;
}
.HBox > .flex-Stretch {
  flex: 1 1 auto;
}
.HBox > .flex-Grow {
  flex: 1 0 auto;
}
.HBox > .flex-Shrink {
  flex: 0 1 auto;
}
.HBox.contentAlign-Left {
  justify-content: flex-start;
}
.HBox.contentAlign-Center {
  justify-content: center;
}
.HBox.contentAlign-Right {
  justify-content: flex-end;
}
.HBox.itemsAlign-Top {
  align-items: flex-start;
}
.HBox.itemsAlign-Middle {
  align-items: center;
}
.HBox.itemsAlign-Bottom {
  align-items: flex-end;
}
.HBox.itemsAlign-Stretch {
  align-items: stretch;
}
.HBox.itemsIndent-05 > :not(.hidden) ~ :not(.hidden) {
  margin-left: 0.5em;
}
.HBox.itemsIndent-1 > :not(.hidden) ~ :not(.hidden) {
  margin-left: 1em;
}
.HBox.itemsIndent-2 > :not(.hidden) ~ :not(.hidden) {
  margin-left: 2em;
}
.HBox.itemsIndent-4 > :not(.hidden) ~ :not(.hidden) {
  margin-left: 4em;
}
.HBox.scrollBar-None {
  overflow: hidden;
}
.HBox.scrollBar-Horizontal {
  overflow-x: auto;
  overflow-y: hidden;
}
.HBox.scrollBar-Vertical {
  overflow-x: hidden;
  overflow-y: auto;
}
.HBox.scrollBar-Both {
  overflow: auto;
}
.HBox.wrapping-NoWrap {
  flex-wrap: nowrap;
}
.HBox.wrapping-Wrap {
  flex-wrap: wrap;
}
.HBox.disabled {
  pointer-events: none;
}
.HBox.disabled > *:not(.disabled):not(.HBox):not(.VBox) {
  opacity: 0.5;
}
/*--------
    LABEL
----------*/
.Label {
  align-items: center;
  color: hsl(0, 0%, 100%);
  cursor: default;
  display: inline-flex;
  flex: none;
  font-size: 1em;
  justify-content: center;
  line-height: 1em;
  min-height: 2em;
  padding: 0 /* 0.5em*/;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.Label.title {
  font-size: 1.5em;
  font-weight: lighter;
}
.Label.message {
  line-height: normal;
  white-space: pre-wrap;
}
/*--------
    MODAL
----------*/
.ModalTint {
  align-items: center;
  background-color: hsla(0, 0%, 25%, 0.75);
  flex-flow: column nowrap;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  margin: 0 !important;
  position: absolute;
  top: 0;
  width: 100%;
}
.Modal {
  background-color: hsl(0, 0%, 20%);
  flex: none;
}
/*--------------
    PLACEHOLDER
----------------*/
.Placeholder {
  cursor: default;
  display: inline-block;
  flex: 1 1 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.VBox > .Placeholder {
  height: 100%;
}
.HBox > .Placeholder {
  width: 100%;
}
/*--------------
    RADIOBUTTON
----------------*/
.RadioButton {
  align-items: center;
  box-sizing: border-box;
  cursor: default;
  display: inline-flex;
  flex: none;
  flex-flow: row nowrap;
  font-size: 1em;
  justify-content: flex-start;
  line-height: 1em;
  min-height: 2em;
  min-width: 2em;
  padding: 0 /* 0.5em*/;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.RadioButton input[type=radio] {
  display: none;
}
.RadioButton input[type=radio]:checked + .check:before {
  background-color: hsl(0, 0%, 100%);
  border-radius: 0.3125em;
  content: "";
  display: inline-block;
  height: 0.625em;
  left: 0.1875em;
  position: absolute;
  top: 0.1875em;
  width: 0.625em;
}
.RadioButton .check {
  background-color: hsl(0, 0%, 25%);
  border-radius: 0.5em;
  display: inline-block;
  flex: none;
  font-size: 1em;
  height: 1em;
  margin: 0.5em 0;
  position: relative;
  width: 1em;
}
.RadioButton:hover:not(.disabled) .check {
  background-color: hsl(0, 0%, 28%);
}
.RadioButton .text {
  color: hsl(0, 0%, 100%);
  display: inline-block;
  flex: none;
  font-size: 1em;
  line-height: 1em;
  margin-left: 0.25em;
  pointer-events: none;
}
.RadioButton.disabled {
  opacity: 0.5;
  pointer-events: none;
}
/*--------------
    SCROLL BARS
----------------*/
.VBox,
.HBox,
.TextArea {
  scrollbar-arrow-color: hsla(0, 0%, 90%, 0.2);
  scrollbar-track-color: hsl(0, 0%, 20%);
  scrollbar-base-color: hsla(0, 0%, 90%, 0.1);
  scrollbar-3dlight-color: hsla(0, 0%, 90%, 0.1);
  scrollbar-highlight-color: hsla(0, 0%, 90%, 0.1);
  scrollbar-face-color: hsla(0, 0%, 90%, 0.1);
  scrollbar-shadow-color: hsla(0, 0%, 90%, 0.1);
  scrollbar-darkshadow-color: hsla(0, 0%, 90%, 0.1);
}
.VBox::-webkit-scrollbar,
.HBox::-webkit-scrollbar,
.TextArea::-webkit-scrollbar {
  background-color: transparent;
  height: 1.5em;
  width: 1.5em;
}
.VBox::-webkit-scrollbar-thumb,
.HBox::-webkit-scrollbar-thumb,
.TextArea::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: hsla(0, 0%, 90%, 0);
}
.VBox::-webkit-scrollbar-thumb:hover,
.HBox::-webkit-scrollbar-thumb:hover,
.TextArea::-webkit-scrollbar-thumb:hover {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.VBox::-webkit-scrollbar-thumb:active,
.HBox::-webkit-scrollbar-thumb:active,
.TextArea::-webkit-scrollbar-thumb:active {
  background-color: hsla(0, 0%, 90%, 0.2);
}
.VBox::-webkit-scrollbar-thumb:horizontal,
.HBox::-webkit-scrollbar-thumb:horizontal,
.TextArea::-webkit-scrollbar-thumb:horizontal {
  border-top: 0.5em solid transparent;
}
.VBox::-webkit-scrollbar-thumb:vertical,
.HBox::-webkit-scrollbar-thumb:vertical,
.TextArea::-webkit-scrollbar-thumb:vertical {
  border-left: 0.5em solid transparent;
}
.VBox::-webkit-scrollbar-corner,
.HBox::-webkit-scrollbar-corner,
.TextArea::-webkit-scrollbar-corner {
  background-color: hsl(0, 0%, 20%);
}
/*-----------
    TEXT BOX (and Text Area)
-------------*/
.TextBox {
  background-color: hsl(0, 0%, 25%);
  border: none;
  box-sizing: border-box;
  color: hsl(0, 0%, 100%);
  flex: 1 1 auto;
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  font-size: 1em;
  line-height: 2em;
  min-height: 2em;
  min-width: 2em;
  outline: none;
  overflow: hidden;
  padding: 0 0 0 0.25em;
  width: 100%;
}
.TextBox:hover:not(.disabled) {
  background-color: hsl(0, 0%, 26%);
}
.TextBox:focus:not(.disabled) {
  background-color: hsl(0, 0%, 28%);
  color: #fff;
  outline: none;
}
.TextBox[readonly] {
  cursor: default;
}
.TextBox.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.TextBox::-webkit-inner-spin-button {
  -webkit-filter: invert(100%);
}
.TextArea {
  line-height: normal;
  overflow: auto;
  padding: 0.25em;
  resize: none;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: hsl(0, 0%, 50%);
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: hsl(0, 0%, 50%);
  opacity: 1;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: hsl(0, 0%, 50%);
}
/*----------------
    TOGGLE BUTTON
------------------*/
.ToggleButton {
  align-items: center;
  background-color: hsla(0, 0%, 90%, 0);
  border: none;
  box-sizing: border-box;
  cursor: default;
  display: inline-flex;
  flex-flow: row nowrap;
  flex: none;
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  font-size: 1em;
  justify-content: center;
  min-height: 2em;
  min-width: 2em;
  outline: none;
  padding: 0 0.375em;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ToggleButton input[type=radio] {
  display: none;
}
.ToggleButton:hover:not(.disabled):not(.checked) {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.ToggleButton:active:not(.disabled),
.ToggleButton.checked {
  background-color: hsla(0, 0%, 90%, 0.2);
}
.ToggleButton .icon {
  display: inline-block;
  height: 1em;
  width: 1em;
}
.ToggleButton .text {
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 1em;
  line-height: 1em;
}
.ToggleButton span {
  flex: none;
  margin: 0 0.125em;
  pointer-events: none;
}
.ToggleButton span.hidden {
  display: none;
}
.ToggleButton.disabled {
  opacity: 0.5;
  pointer-events: none;
}
/*-------
    VBOX
---------*/
.VBox {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: none;
}
.VBox > .flex-None {
  flex: none;
}
.VBox > .flex-Stretch {
  flex: 1 1 auto;
}
.VBox > .flex-Grow {
  flex: 1 0 auto;
}
.VBox > .flex-Shrink {
  flex: 0 1 auto;
}
.VBox.contentAlign-Top {
  justify-content: flex-start;
}
.VBox.contentAlign-Middle {
  justify-content: center;
}
.VBox.contentAlign-Bottom {
  justify-content: flex-end;
}
.VBox.itemsAlign-Left {
  align-items: flex-start;
}
.VBox.itemsAlign-Center {
  align-items: center;
}
.VBox.itemsAlign-Right {
  align-items: flex-end;
}
.VBox.itemsAlign-Stretch {
  align-items: stretch;
}
.VBox.itemsIndent-05 > :not(.hidden) ~ :not(.hidden) {
  margin-top: 0.5em;
}
.VBox.itemsIndent-1 > :not(.hidden) ~ :not(.hidden) {
  margin-top: 1em;
}
.VBox.itemsIndent-2 > :not(.hidden) ~ :not(.hidden) {
  margin-top: 2em;
}
.VBox.itemsIndent-4 > :not(.hidden) ~ :not(.hidden) {
  margin-top: 4em;
}
.VBox.scrollBar-None {
  overflow: hidden;
}
.VBox.scrollBar-Horizontal {
  overflow-x: auto;
  overflow-y: hidden;
}
.VBox.scrollBar-Vertical {
  overflow-x: hidden;
  overflow-y: auto;
}
.VBox.scrollBar-Both {
  overflow: auto;
}
.VBox.wrapping-NoWrap {
  flex-wrap: nowrap;
}
.VBox.wrapping-Wrap {
  flex-wrap: wrap;
}
.VBox.disabled {
  pointer-events: none;
}
.VBox.disabled > *:not(.disabled):not(.HBox):not(.VBox) {
  opacity: 0.5;
}
/*---------
    WINDOW
-----------*/
.Window {
  background-color: hsl(0, 0%, 20%);
  box-sizing: border-box;
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  margin: 0;
  min-height: 100%;
  min-width: -moz-min-content;
  min-width: -webkit-min-content;
  padding: 0;
}
html {
  background-color: hsl(0, 0%, 20%);
  height: 100%;
  width: 100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE10+ specific styles go here */
  .Window {
    height: 100%;
  }
}
.hidden {
  display: none;
}
/*.visibility-Hidden {
    visibility: hidden;
}

.visibility-Collapsed {
    display: none;
}*/
.Button {
  align-items: center;
}
.Button,
.TextBox {
  margin: 0;
}
/*---------
    CANVAS
-----------*/
.Canvas {
  overflow: hidden;
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.Canvas svg {
  background-color: hsl(0, 0%, 60%);
  height: 100%;
  image-rendering: pixelated;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.Canvas:after {
  box-shadow: hsla(0, 0%, 0%, 0.55) 0 0 1em inset;
  content: "";
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
#actionMessage {
  background-color: hsla(0, 0%, 20%, 0.5);
  clear: both;
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 0.75em;
  margin: 0 auto;
  padding: 1em;
  position: absolute;
  top: 2em;
}
#rulerModeButton {
  background: hsl(0, 0%, 20%);
  bottom: 1em;
  height: 2.5em;
  position: absolute;
  right: 1em;
}
#rulerModeButton .icon,
#rulerModeButton .text {
  opacity: 0.75;
}
#rulerModeButton:hover {
  background: hsl(0, 0%, 22%);
}
#rulerModeButton:hover .icon,
#rulerModeButton:hover .text {
  opacity: 0.875;
}
#rulerModeButton:active,
#rulerModeButton.checked {
  background: hsl(0, 0%, 25%);
}
#rulerModeButton:active .icon,
#rulerModeButton.checked .icon,
#rulerModeButton:active .text,
#rulerModeButton.checked .text {
  opacity: 1;
}
/*-------------
   Color panel
---------------*/
.Button.colorButton {
  box-sizing: border-box;
  height: 2.5em;
  min-width: 1.75em;
  padding: 0;
  position: relative;
  width: 1.75em;
}
.Button.colorButton:hover:not(.transparent) {
  border: 0.125em solid white;
}
.Button.colorButton.transparent {
  border-top: 1.25em solid hsla(0, 0%, 90%, 0);
  border-right: 0.875em solid hsla(0, 0%, 90%, 0.1);
  border-bottom: 1.25em solid hsla(0, 0%, 90%, 0);
  border-left: 0.875em solid hsla(0, 0%, 90%, 0.1);
  height: 0;
  width: 0;
}
.Button.colorButton.transparent:hover:not(.edit):not(.edit-secondary) {
  border-top: 1.25em solid hsla(0, 0%, 90%, 0.1);
  border-right: 0.875em solid hsla(0, 0%, 90%, 0.2);
  border-bottom: 1.25em solid hsla(0, 0%, 90%, 0.1);
  border-left: 0.875em solid hsla(0, 0%, 90%, 0.2);
}
.Button.colorButton.edit {
  touch-action: none;
}
.Button.colorButton.edit,
.Button.colorButton.edit-secondary {
  border-top-width: 0 !important;
}
.Button.colorButton.edit:after,
.Button.colorButton.edit-secondary:after {
  background-color: hsla(0, 0%, 25%, 0.75);
  color: hsl(0, 0%, 100%);
  font-size: 0.75em;
  position: absolute;
  left: 0;
  line-height: 1em;
  top: 0;
  width: 100%;
}
.Button.colorButton.edit-secondary:after {
  content: 'sec.';
}
.Button.colorButton.edit:after {
  content: 'edit';
}
.Button.colorButton.removing {
  margin-top: -1.5em;
  opacity: 0.5;
  position: absolute;
  transition: opacity 1s;
  z-index: 2;
}
#colorPalette {
  overflow-y: hidden;
}
#colorPalette .colorsContainer::-webkit-scrollbar {
  height: 0.5em;
}
#colorPalette .colorsContainer::-webkit-scrollbar-thumb {
  background-clip: initial;
}
.colorsDragRemove {
  background: hsl(0, 0%, 20%);
  bottom: 2.5em;
  color: #999999;
  display: block;
  height: 2em;
  left: 3em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  z-index: 1;
}
.colorsDragRemove.removing {
  color: hsl(0, 0%, 100%);
}
.CurrentColorElement {
  display: inline-block;
  flex: none;
  height: 2.5em;
  text-align: center;
  width: 3em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.CurrentColorElement .fill {
  color: hsl(0, 0%, 100%);
  height: 1.5em;
  position: relative;
}
.CurrentColorElement .fill:after {
  content: 'fill';
  font-size: 0.75em;
  left: 50%;
  line-height: 1.5rem;
  position: absolute;
  text-shadow: hsl(0, 0%, 20%) 0 0 0.125em;
  transform: translate(-50%);
}
.CurrentColorElement .fill.transparent:before {
  border-top: 0.75em solid hsla(0, 0%, 90%, 0.1);
  border-right: 1.5em solid hsla(0, 0%, 90%, 0.2);
  border-bottom: 0.75em solid hsla(0, 0%, 90%, 0.1);
  border-left: 1.5em solid hsla(0, 0%, 90%, 0.2);
  box-sizing: border-box;
  content: '';
  left: 0;
  position: absolute;
}
.CurrentColorElement .stroke {
  color: hsl(0, 0%, 100%);
  height: 1em;
  position: relative;
}
.CurrentColorElement .stroke:after {
  content: 'stroke';
  font-size: 0.75em;
  left: 50%;
  line-height: 1rem;
  position: absolute;
  text-shadow: hsl(0, 0%, 20%) 0 0 0.125em;
  transform: translate(-50%);
}
.CurrentColorElement .stroke.transparent:before {
  border-top: 0.5em solid hsla(0, 0%, 90%, 0.2);
  border-right: 1.5em solid hsla(0, 0%, 90%, 0.1);
  border-bottom: 0.5em solid hsla(0, 0%, 90%, 0.2);
  border-left: 1.5em solid hsla(0, 0%, 90%, 0.1);
  box-sizing: border-box;
  content: '';
  left: 0;
  position: absolute;
}
.CurrentColorElement.fillOnly .stroke {
  display: none;
}
.CurrentColorElement.fillOnly .fill {
  height: 2.5em;
}
.CurrentColorElement.fillOnly .fill:after {
  font-size: 1em;
  font-weight: 300;
  line-height: 2.5rem;
}
.CurrentColorElement.fillOnly .fill.transparent:before {
  border-top-width: 1.25em;
  border-bottom-width: 1.25em;
}
.ColorPicker {
  background-color: hsl(0, 0%, 20%);
  bottom: 2.5em;
  display: flex;
  flex-flow: column nowrap;
  left: 3em;
  padding-bottom: 0.75em;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ColorPicker .colorText {
  color: #bfbfbf;
  height: 1.5em;
  padding: 0;
  padding-right: 1.25em;
  text-align: center;
  width: 10.5em;
}
.ColorPicker .hsbContainer {
  display: flex;
  flex-flow: row nowrap;
  height: 8em;
}
.ColorPicker canvas {
  display: inline-block;
}
.ColorPicker .sb {
  height: 8em;
  width: 8em;
}
.ColorPicker .h {
  height: 8em;
  width: 1em;
}
.ColorPicker .hTick,
.ColorPicker .sbTick {
  background-color: transparent;
  box-shadow: 0 0 0 0.0625em hsl(0, 0%, 100%), 0 0 0 0.125em hsl(0, 0%, 20%);
  display: inline-block;
  height: 0.5em;
  margin-top: -0.25em;
  pointer-events: none;
  position: absolute;
}
.ColorPicker .hContainer,
.ColorPicker .sbContainer {
  position: relative;
}
.ColorPicker .hContainer {
  padding: 0 0.75em;
}
.ColorPicker .hTick {
  left: 0;
  margin-left: 0.75em;
  width: 1em;
  z-index: 1;
}
.ColorPicker .sbTick {
  margin-left: -0.25em;
  width: 0.5em;
  z-index: 1;
}
.ColorPicker::after {
  background-color: hsla(0, 0%, 20%, 0.25);
  bottom: 0;
  content: "Finish color setup before doing other actions";
  left: 100%;
  padding: 0.5em;
  pointer-events: none;
  position: absolute;
  width: 6em;
}
.ColorPicker ~ .ColorPicker {
  margin-left: 10.5em;
}
/*--------------
    FOOTER
---------------*/
#footer {
  overflow: visible !important;
}
#stylePanel {
  overflow: visible !important;
  position: relative;
  width: 100%;
}
#stylePanel .stylePanelMoreMenu {
  background-color: hsl(0, 0%, 20%);
  bottom: 100%;
  position: absolute;
  right: 0;
}
#stylePanel .stylePanelMoreMenu .Placeholder:first-child {
  display: none;
}
/*----------------
    DOC TAB PANEL
------------------*/
.DocTabPanel {
  overflow: visible !important;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.DocTabPanel:not(:empty) {
  min-width: 6em;
}
.DocTabPanel .DocTab {
  align-items: stretch;
  background-color: hsla(0, 0%, 90%, 0);
  cursor: default;
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 4em;
  max-width: 16em;
  padding: 0 0 0 0.75em;
}
.DocTabPanel .DocTab:hover {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.DocTabPanel .DocTab.current {
  background-color: hsla(0, 0%, 90%, 0.2);
}
.DocTabPanel .DocTab .text {
  align-items: center;
  display: inline-flex;
  flex: 0 1 auto;
  overflow: hidden;
  white-space: nowrap;
}
.DocTabPanel .DocTab .close {
  align-items: center;
  background-color: hsla(0, 0%, 90%, 0);
  display: inline-flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 1.75em;
}
.DocTabPanel .DocTab .close .cross {
  display: inline-block;
  height: 0.75em;
  position: relative;
  width: 0.625em;
}
.DocTabPanel .DocTab .close .cross:before,
.DocTabPanel .DocTab .close .cross:after {
  background-color: hsl(0, 0%, 100%);
  content: "";
  display: inline-block;
  height: 0.75em;
  left: 0.25em;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 0.125em;
}
.DocTabPanel .DocTab .close .cross:before {
  transform: skewX(45deg);
}
.DocTabPanel .DocTab .close .cross:after {
  transform: skewX(-45deg);
}
.DocTabPanel .DocTab .close:hover {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.DocTabPanel .DocTab .close:hover .cross:before,
.DocTabPanel .DocTab .close:hover .cross:after {
  opacity: 1;
}
.DocTabPanel .DocTab .close:active {
  background-color: hsla(0, 0%, 90%, 0.2);
}
.DocTabPanel .docTabExpandMenu {
  background-color: hsl(0, 0%, 20%);
  box-shadow: hsla(0, 0%, 0%, 0.5) 0.125em 0.125em 0.5em;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 100%;
  z-index: 2;
}
.DocTabPanel .docTabExpandMenu .DocTab {
  height: 2em;
}
/*-----------------------------
    DOC TREE (OBJECT BROWSER)
-------------------------------*/
.DocTree {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.DocTree .ContainerNode .nodeContent {
  flex: none;
  margin-left: 1em;
}
.DocTree .ItemNode {
  align-items: center;
  background-color: hsla(0, 0%, 90%, 0);
  color: hsl(0, 0%, 100%);
  display: flex;
  height: 2em;
  line-height: 1em;
  overflow: hidden;
  padding: 0 0 0 1em;
}
.DocTree .ItemNode.selected {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.DocTree .ItemNode.insertTop {
  background-image: linear-gradient(to bottom, hsla(0, 0%, 90%, 0.2), hsla(0, 0%, 90%, 0.2) 30%, hsla(0, 0%, 90%, 0) 30%);
}
.DocTree .ItemNode.insertBottom {
  background-image: linear-gradient(to top, hsla(0, 0%, 90%, 0.2), hsla(0, 0%, 90%, 0.2) 30%, hsla(0, 0%, 90%, 0) 30%);
}
.DocTree .ItemNode .nodeIcon {
  flex: none;
  display: inline-block;
  height: 2em;
  width: 1.25em;
}
.DocTree .ItemNode .nodeIcon:hover {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.DocTree .ItemNode .name {
  align-items: center;
  cursor: default;
  display: inline-flex;
  flex: 1;
  flex-direction: row;
  line-height: normal;
  height: 2em;
  overflow: hidden;
  padding-left: 0.25em;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.DocTree .ItemNode input {
  margin-left: 0.125em;
  padding-left: 0.125em;
}
.DocTree .ItemNode.hidden {
  display: none;
}
.DocTree .ItemNode .menu {
  align-items: center;
  display: inline-flex;
  flex: none;
  height: 2em;
  justify-content: center;
  margin: 0 0 0 1em;
  opacity: 0.5;
  width: 2em;
}
.DocTree .ItemNode .menu:hover {
  background-color: hsla(0, 0%, 90%, 0.1);
  opacity: 1;
}
.DocTree .ItemNode .menu > i {
  display: inline-block;
  height: 1em;
  width: 1em;
}
.DocTree .ItemNode:not(.selected) .menu {
  display: none;
}
.DocTree .ItemNode .TextBox {
  background-color: hsl(0, 0%, 41%);
  flex: 1 1 auto;
  left: 0;
  margin: 0;
  padding: 0 0 0 0.25em;
  position: absolute;
  top: 0;
  width: 100%;
}
.DocTree .DrawingItemNode .icon {
  border: 0.125em solid transparent;
  box-sizing: border-box;
}
.DocTree .DrawingItemNode .icon.noStroke {
  border: none;
}
.DocTree .DrawingItemNode .colorIcon {
  height: 1em;
  margin: 0 0.125em;
  width: 1em;
}
.DocTree .ContainerItemNode .expander {
  opacity: 1;
  position: relative;
}
.DocTree .ContainerItemNode .expander:hover {
  opacity: 1;
}
.DocTree .ContainerItemNode .expander.expanded:after {
  border-top: 0.375em solid transparent;
  border-right: 0.375em solid hsl(0, 0%, 100%);
  border-bottom: 0.375em solid hsl(0, 0%, 100%);
  border-left: 0.375em solid transparent;
  content: "";
  height: 0;
  left: 0.25em;
  position: absolute;
  top: 0.625em;
  width: 0;
}
.DocTree .ContainerItemNode .expander.collapsed:after {
  border-top: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-left: 0.5em solid hsl(0, 0%, 100%);
  content: "";
  height: 0;
  left: 0.5em;
  position: absolute;
  top: 0.5em;
  width: 0;
}
.DocTree .LayerItemNode.locked + .VBox {
  pointer-events: none;
}
.DocTree .LayerItemNode.locked + .VBox .name,
.DocTree .LayerItemNode.locked + .VBox .expander {
  opacity: 0.5;
}
.DocTree .LayerItemNode.locked .name,
.DocTree .LayerItemNode.locked .expander {
  opacity: 0.5;
}
.DocTree .LayerItemNode .hider {
  position: relative;
}
.DocTree .LayerItemNode .hider:after {
  background-color: #666666;
  border: 0.125em solid #666666;
  border-radius: 0.5em;
  box-sizing: border-box;
  content: "";
  height: 1em;
  left: 0.125em;
  opacity: 1;
  position: absolute;
  top: 0.5em;
  width: 1em;
}
.DocTree .LayerItemNode .hider:hover:after {
  background-color: #7a7a7a;
  border-color: #7a7a7a;
}
.DocTree .LayerItemNode .hider.show {
  opacity: 1;
}
.DocTree .LayerItemNode .hider.show:after {
  background-color: hsl(0, 0%, 20%);
  border-color: hsl(0, 0%, 100%);
}
.DocTree .LayerItemNode .locker {
  position: relative;
}
.DocTree .LayerItemNode .locker:before {
  background-color: #666666;
  border: 0.125em solid #666666;
  border-radius: 0.375em;
  box-sizing: border-box;
  content: "";
  height: 0.75em;
  left: 0.25em;
  position: absolute;
  top: 0.5em;
  width: 0.75em;
}
.DocTree .LayerItemNode .locker:after {
  background-color: #666666;
  border: 0.125em solid #666666;
  box-sizing: border-box;
  content: "";
  height: 0.75em;
  left: 0.125em;
  position: absolute;
  top: 0.75em;
  width: 1em;
}
.DocTree .LayerItemNode .locker:hover:before,
.DocTree .LayerItemNode .locker:hover:after {
  background-color: #7a7a7a;
  border-color: #7a7a7a;
}
.DocTree .LayerItemNode .locker.locked:before,
.DocTree .LayerItemNode .locker.locked:after {
  background-color: hsl(0, 0%, 20%);
  border-color: hsl(0, 0%, 100%);
  opacity: 1;
}
.MessageList {
  background: hsl(0, 0%, 20%);
  box-shadow: hsla(0, 0%, 0%, 0.5) 0.125em 0.125em 0.5em;
  position: absolute;
  width: 100%;
}
.MessageList .message {
  cursor: s-resize;
  height: 2em;
  overflow: hidden;
  padding-left: 0.5em;
  position: relative;
}
.MessageList .message .messageText {
  align-items: flex-start;
  cursor: s-resize;
  display: inline !important;
  justify-content: flex-start;
  min-height: initial;
  overflow: hidden;
  padding: 0.5em 0;
  text-overflow: ellipsis;
  user-select: initial;
}
.MessageList .message.expanded {
  cursor: n-resize;
  height: initial;
}
.MessageList .message.expanded .messageText {
  cursor: n-resize;
}
.MessageList .message.error {
  background-color: #701;
}
.MessageList .message.error::before {
  align-items: center;
  content: "ERROR: ";
  display: inline-flex;
  margin-right: 0.5em;
}
.MessageList .message.warn {
  background-color: #741;
}
.MessageList .message.warn::before {
  align-items: center;
  content: "WARNING: ";
  display: inline-flex;
  margin-right: 0.5em;
}
.MessageList .message.info {
  background-color: #147;
}
.MessageList .message.closing {
  height: 0;
  transition: height 1s;
}
.MessageList .message::after {
  background: inherit;
  bottom: 0;
  content: "";
  display: block;
  height: 0.5em;
  left: 0;
  opacity: 0.5;
  position: absolute;
  width: 100%;
}
/*-------------------
    OBJECT BROWSER
--------------------*/
.ObjectBrowser .buttonCollapse,
.ObjectBrowser #rightActions .Button {
  width: 3em;
}
.ObjectBrowser .buttonCollapse .wrapper,
.ObjectBrowser #rightActions .Button .wrapper {
  flex-flow: column;
}
.ObjectBrowser .buttonCollapse .text,
.ObjectBrowser #rightActions .Button .text {
  font-size: 0.75em;
  margin: 0;
  text-align: center;
}
.ObjectBrowser:not(.collapsed) #rightActions {
  display: none;
}
.ObjectBrowser.collapsed {
  flex: none;
  overflow: hidden;
  position: relative;
  width: 3em !important;
}
.ObjectBrowser.collapsed .buttonsPanel > :not(.buttonCollapse) {
  display: none;
}
.ObjectBrowser.collapsed .DocTree {
  display: none;
}
/*----------------
    TOOL PANEL
------------------*/
#toolPanelContainer {
  background-color: hsl(0, 0%, 33%);
  overflow: visible !important;
}
.toolPanelPre {
  background-color: hsl(0, 0%, 30%);
  overflow: visible !important;
}
.helpButton {
  background-color: hsl(0, 0%, 33%);
}
.ToolPanel {
  height: 3em;
  overflow: visible !important;
  position: relative;
}
.ToolPanel.inactive {
  display: none;
}
.ToolPanel .TextBox {
  align-self: center;
  background-color: hsl(0, 0%, 37%);
  flex: none;
  height: 1.5em;
}
.ToolPanel .TextBox:hover:not(.disabled) {
  background-color: hsl(0, 0%, 39%);
}
.ToolPanel .TextBox:focus:not(.disabled) {
  background-color: hsl(0, 0%, 41%);
}
.ToolPanel .CheckBox > .check,
.ToolPanel .RadioButton > .check {
  background-color: hsl(0, 0%, 37%);
}
.ToolPanel .CheckBox:hover:not(.disabled) > .check,
.ToolPanel .RadioButton:hover:not(.disabled) > .check {
  background-color: hsl(0, 0%, 39%);
}
.ToolPanel .CheckBox:active:not(.disabled) > .check,
.ToolPanel .RadioButton:active:not(.disabled) > .check {
  background-color: hsl(0, 0%, 41%);
}
.ToolPanel > *:not(:first-child):not(.toolPanelMoreMenu) {
  margin-left: 1em !important;
  position: relative;
}
.ToolPanel > *:not(:first-child):not(.toolPanelMoreMenu):before {
  background-color: hsl(0, 0%, 100%);
  content: "";
  display: inline-block;
  height: 1.5em;
  left: -0.5625em;
  opacity: 0.25;
  position: absolute;
  top: 0.75em;
  width: 0.0625em;
}
.ToolPanel > .HBox {
  overflow: visible;
}
.ToolPanel.collapsed .Button,
.ToolPanel.collapsed .ToggleButton {
  padding-bottom: 0;
  padding-top: 0;
}
.ToolPanel.collapsed .Button .icon,
.ToolPanel.collapsed .ToggleButton .icon {
  height: 1.5em;
  width: 1.5em;
}
.ToolPanel.collapsed .Button .text,
.ToolPanel.collapsed .ToggleButton .text {
  font-size: 0.75em;
  margin-top: 0.125em;
  text-align: center;
}
.ToolPanel.collapsed .Button .wrapper,
.ToolPanel.collapsed .ToggleButton {
  flex-flow: column;
}
.ToolPanel.collapsed .Button.multilineButton > .wrapper > .text {
  line-height: 0.75em;
}
.toolPanelMoreButton .wrapper {
  flex-direction: row-reverse;
}
.toolPanelMoreMenu {
  background-color: hsl(0, 0%, 33%);
  box-shadow: hsla(0, 0%, 0%, 0.5) 0.125em 0.125em 0.5em;
  flex-wrap: wrap !important;
  height: auto;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1;
}
.toolPanelMoreMenu > * {
  height: 3em;
}
.inputLabel {
  color: hsl(0, 0%, 100%);
}
.Placeholder.separator {
  align-items: center;
  display: inline-flex;
  flex: none;
  height: auto !important;
  position: relative;
}
.Placeholder.separator:after {
  background-color: hsl(0, 0%, 100%);
  content: "";
  display: inline-block;
  height: 1.5em;
  opacity: 0.25;
  left: 50%;
  position: absolute;
  width: 0.0625em;
}
.multilineButton {
  padding: 0 0.375em;
}
.multilineButton > .wrapper > .text {
  font-size: 0.9em;
  text-align: left;
  white-space: pre;
}
.largeButton {
  font-size: 1.2em;
  font-weight: 300;
}
.textToolPanel_italicText {
  font-style: italic;
}
.textToolPanel_lightText {
  font-weight: 300;
}
.textToolPanel_boldText {
  font-weight: 700;
}
.FontFamilyCombo {
  cursor: default;
  overflow: visible !important;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.FontFamilyCombo .SelectedFontItem {
  background-color: hsl(0, 0%, 37%);
  box-sizing: border-box;
  color: hsl(0, 0%, 100%);
  flex: none;
  line-height: 2em;
  height: 2em;
  overflow: hidden;
  padding-left: 0.25em;
  position: relative;
  width: 100%;
}
.FontFamilyCombo .SelectedFontItem:hover:not(.disabled) {
  background-color: hsl(0, 0%, 39%);
}
.FontFamilyCombo .SelectedFontItem:before {
  background-color: hsl(0, 0%, 100%);
  content: "";
  display: inline-block;
  height: 0.25em;
  position: absolute;
  right: 0.875em;
  top: 0.9375em;
  transform: skewY(45deg);
  width: 0.375em;
}
.FontFamilyCombo .SelectedFontItem:after {
  background-color: hsl(0, 0%, 100%);
  content: "";
  display: inline-block;
  height: 0.25em;
  position: absolute;
  right: 0.5em;
  top: 0.9375em;
  transform: skewY(-45deg);
  width: 0.375em;
}
.FontFamilyCombo .fontContainer {
  background-color: hsl(0, 0%, 33%);
  left: 0;
  max-height: 24em;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: calc(100% - 0.5em);
  width: 100%;
  z-index: 2;
}
.FontFamilyCombo .fontContainer .FontFamilyItem {
  background-color: hsla(0, 0%, 90%, 0);
  color: hsl(0, 0%, 100%);
  cursor: default;
  flex: none;
  height: 2em;
  line-height: 2em;
  padding: 0 0 0 0.25em;
  width: 100%;
}
.FontFamilyCombo .fontContainer .FontFamilyItem:hover {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.Button.checked {
  background-color: hsla(0, 0%, 90%, 0.2);
}
/*----------------
    TOOL SELECTOR
------------------*/
.toolToggle {
  flex-direction: column;
  min-height: 3em;
  min-width: 3em;
  padding: 0.375em 0.5em;
  width: 3em;
}
.toolToggle .icon {
  height: 2em;
  margin: 0.125em 0 !important;
  width: 2em;
}
.toolToggle .text {
  font-size: 0.75em;
  line-height: 0.75rem;
  margin: 0.125rem 0 !important;
}
.toolToggle .wrapper {
  flex-direction: column;
  padding: 0;
}
.ToolSelector {
  overflow: visible !important;
  position: relative;
}
.ToolSelector .toolSelectorMoreMenu {
  background-color: hsl(0, 0%, 20%);
  box-shadow: hsla(0, 0%, 0%, 0.5) 0.125em 0.125em 0.5em;
  left: 100%;
  margin-top: -6em;
  position: absolute;
  z-index: 1;
}
/*------------
    TOOL TIP
--------------*/
.ToolTip {
  display: flex;
  max-height: 75%;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ToolTip .container {
  overflow: hidden;
  transition: width 0.75s;
  width: 0;
}
.ToolTip .container > * {
  width: 24em;
}
.ToolTip.visible .container {
  width: 24em;
}
.ToolTip.left {
  flex-direction: row;
}
.ToolTip.left .arrow {
  border-top: 1em solid transparent;
  border-right: 1em solid hsla(0, 0%, 25%, 0.75);
  border-bottom: 1em solid transparent;
  height: 0;
  position: relative;
  width: 0;
}
.ToolTip .container {
  background-color: hsla(0, 0%, 25%, 0.75);
  box-shadow: hsla(0, 0%, 0%, 0.5) 0.125em 0.125em 0.5em;
  color: hsl(0, 0%, 100%);
  flex-direction: column;
  display: flex;
  font-size: 0.75em;
  padding: 0.25em;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.ToolTip .container ol,
.ToolTip .container ul {
  margin: 0;
  padding: 0 0 0 1.5em;
}
.ToolTip .container ol li:not(:first-child),
.ToolTip .container ul li:not(:first-child) {
  margin-top: 0.5em;
}
.ToolTip .container img {
  height: 18em;
  width: 24em;
}
.ToolTip .title {
  flex: none;
  font-weight: 300;
  font-size: 1.375em;
  padding: 0.375 0.25em 0.75em 0.25em;
}
.ToolTip .content {
  flex: 1 1 auto;
  max-width: 24em;
  overflow-x: hidden;
  overflow-y: auto;
}
.ToolTip .close,
.ToolTip .doNotShow {
  cursor: pointer;
  display: inline-block;
  pointer-events: all;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ToolTip .close {
  float: right;
  font-size: 1.2em;
  font-weight: 300;
  text-decoration: none;
}
.ToolTip .close:hover {
  text-decoration: underline;
}
.ToolTip .doNotShow {
  flex: none;
  padding: 0.25em;
  text-align: right;
  text-decoration: underline;
}
.ToolTip .content::-webkit-scrollbar {
  background-color: transparent;
  height: 1.5em;
  width: 1.5em;
}
.ToolTip .content::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: hsla(0, 0%, 100%, 0.1);
  opacity: 0.25;
}
.ToolTip .content::-webkit-scrollbar-thumb:hover {
  background-color: hsla(0, 0%, 100%, 0.13);
}
.ToolTip .content::-webkit-scrollbar-thumb:active {
  background-color: hsla(0, 0%, 100%, 0.18);
}
.ToolTip .content::-webkit-scrollbar-thumb:horizontal {
  border-top: 0.5em solid transparent;
}
.ToolTip .content::-webkit-scrollbar-thumb:vertical {
  border-left: 0.5em solid transparent;
}
.ToolTip .content::-webkit-scrollbar-corner {
  background-color: hsl(0, 0%, 20%);
}
html {
  font-size: 1em;
}
body {
  font-size: 100%;
}
/* Responsive */
html {
  font-size: 1em;
}
@media screen and (max-width: 30em), (max-height: 22.5em) {
  html {
    font-size: 75%;
  }
}
@media screen and (max-width: 15em) {
  html {
    font-size: 50%;
  }
}
.inputTouchEdit {
  font-size: 1.5em;
  left: 50%;
  margin: 0 !important;
  min-width: 4em;
  position: fixed;
  top: 25%;
  transform: translate(-50%, 0);
  z-index: 2;
}
.inputTouchEditLabel {
  font-size: 1.5em;
  left: 50%;
  margin: -2em 0 0 0 !important;
  min-width: 4em;
  position: fixed;
  top: 25%;
  transform: translate(-50%, 0);
  z-index: 2;
}
.inputTouchEditLabel.numberTouchEditLabel {
  margin: -3.5em 0 0 0 !important;
}
.inputTouchEditFade {
  background-color: hsl(0, 0%, 20%);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
.numberTouchEditButton {
  background-color: hsla(0, 0%, 20%, 0.5);
  font-size: 1.5em;
  left: 50%;
  position: fixed;
  top: 25%;
  transform: translate(-50%, 0);
  width: 4em;
  z-index: 3;
}
.numberTouchEditButton.up {
  transform: translate(-50%, -100%);
}
.numberTouchEditButton.down {
  transform: translate(-50%, 100%);
}
.logo {
  padding: 0 0.375em;
}
.logo .wrapper > .icon {
  height: 2.25em;
  position: relative;
  top: -0.1875em;
  width: 6.75em;
}
.logo .wrapper > .text {
  font-size: 1.8em;
  font-weight: 300;
}
.logo.collapsed .icon {
  height: 2em;
  top: 0;
  width: 2em;
}
#header {
  overflow: visible !important;
}
#header.collapsed .Button:not(.logo),
#header.collapsed .ToggleButton {
  padding-bottom: 0;
  padding-top: 0;
}
#header.collapsed .Button:not(.logo) .icon,
#header.collapsed .ToggleButton .icon {
  height: 1.5em;
  width: 1.5em;
}
#header.collapsed .Button:not(.logo) .wrapper,
#header.collapsed .ToggleButton .wrapper {
  flex-flow: column;
}
#header.collapsed .Button:not(.logo) .text,
#header.collapsed .ToggleButton .text {
  font-size: 0.75em;
  margin-top: 0.125em;
}
#header.collapsed .windowControls .Button .icon {
  height: 1em;
  width: 1em;
}
.windowDrag {
  -webkit-app-region: drag;
  text-align: center;
}
.windowDrag:before {
  color: hsl(0, 0%, 100%);
  content: "...";
  line-height: 2em;
  opacity: 0.25;
}
#extraButton .icon {
  height: 2em;
  width: 2em;
}
.VBox::-webkit-scrollbar-thumb,
.HBox::-webkit-scrollbar-thumb {
  background-color: hsla(0, 0%, 90%, 0.1);
}
.VBox::-webkit-scrollbar-thumb:hover,
.HBox::-webkit-scrollbar-thumb:hover {
  background-color: hsla(0, 0%, 90%, 0.2);
}
.startScreen_logo {
  background-image: url(img/inker_logo_32.svg);
  height: 2.5em;
  width: 7.5em;
}
.startScreen_verticalLine {
  background-color: hsl(0, 0%, 100%);
  opacity: 0.1;
  width: 0.0625em;
}
.StartScreen .leftPanel {
  background-color: #292929;
}
.StartScreen .leftPanel .ToggleButton,
.StartScreen .leftPanel .Button {
  height: 2.5em;
}
.StartScreen .leftPanel .ToggleButton.checked {
  background-color: hsl(0, 0%, 20%);
}
.StartScreen .leftPanel .ToggleButton:not(.checked):hover,
.StartScreen .leftPanel .Button:hover {
  background-color: hsl(0, 0%, 20%);
}
.StartScreen .rightPanel .Label {
  font-weight: 300;
}
.Modal {
  max-width: 100%;
}
.NewDocModal .Label {
  font-weight: 300;
}
.Button .icon,
.ToggleButton .icon {
  background-size: auto 100% !important;
}
.errorText {
  color: hsl(5, 75%, 70%);
}
.uppercased {
  text-transform: uppercase;
}
.action {
  color: hsl(0, 0%, 85%);
}
.action:hover {
  color: hsl(0, 0%, 100%);
}
.Modal {
  box-shadow: hsla(0, 0%, 0%, 0.55) 0 0 1em;
}
.ContextMenu {
  box-shadow: hsla(0, 0%, 0%, 0.5) 0.125em 0.125em 0.5em;
}
.Label.disabled {
  opacity: 0.5;
}
.pay {
  background-color: rgba(119, 170, 85, 0.25);
  position: relative;
}
.pay:hover:not(.disabled) {
  background-color: rgba(134, 178, 105, 0.325);
}
.pay:active:not(.disabled) {
  background-color: rgba(147, 185, 121, 0.4);
}
.pay::after {
  background-color: #7a5;
  border-radius: 50%;
  color: hsl(0, 0%, 100%);
  content: "$";
  display: block;
  height: 1em;
  line-height: 1em;
  position: absolute;
  right: 0.125em;
  text-align: center;
  top: 0.125em;
  width: 1em;
}
.developer {
  background-color: rgba(85, 102, 153, 0.25);
}
.developer:hover:not(.disabled) {
  background-color: rgba(105, 119, 163, 0.325);
}
.developer:active:not(.disabled) {
  background-color: rgba(121, 134, 172, 0.4);
}
:root:not(.developer-mode) .developer {
  display: none;
}
.unstable {
  background-color: rgba(170, 136, 85, 0.25);
  position: relative;
}
.unstable:hover:not(.disabled) {
  background-color: rgba(178, 149, 105, 0.325);
}
.unstable:active:not(.disabled) {
  background-color: rgba(185, 159, 121, 0.4);
}
.unstable::before {
  border-bottom-color: #a85;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-style: solid;
  border-width: 1em 0.5em;
  box-sizing: content-box;
  content: "";
  display: block;
  position: absolute;
  right: 0.125em;
  top: -1em;
  width: 0;
}
.unstable::after {
  color: hsl(0, 0%, 100%);
  content: "!";
  display: block;
  height: 1em;
  line-height: 1em;
  position: absolute;
  right: 0.125em;
  text-align: center;
  top: 0.125em;
  width: 1em;
}
.helpArticle {
  cursor: text;
  user-select: initial;
  -webkit-user-select: initial;
  -moz-user-select: initial;
}
.helpArticle h1 {
  font-weight: 300;
}
.helpArticle h1:not(:first-child) {
  margin-top: 1.5em;
}
.helpArticle h4 {
  margin-bottom: 0;
}
.helpArticle a {
  color: hsl(0, 0%, 100%);
}
.helpArticle p {
  margin: 0;
  padding: 0;
}
.helpArticle img {
  max-width: 100%;
}
.helpArticle table {
  border-collapse: collapse;
  margin-left: 1em;
}
.helpArticle table td {
  padding: 0.25em 0.5em;
  text-align: center;
}
.helpArticle table tr:nth-child(2n) {
  background-color: hsla(0, 0%, 100%, 0.05);
}
.Window {
  min-width: 100%;
  opacity: 0;
  overflow: hidden;
}
.Window.loaded {
  opacity: 1;
  transition: opacity 0.5s ease-in;
  -moz-transition: opacity 0.5s ease-in;
}
#loadingHeader {
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  font-weight: 300;
  margin-top: 10%;
  text-align: center;
}
#loadingStatus {
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  font-size: 0.75em;
  text-align: center;
}
#loadingSlide {
  border-radius: 0.0625em;
  height: 0.0625em;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 8em;
}
#loadingSlide:before {
  animation: loadingSlide 4s linear infinite;
  background-color: hsl(0, 0%, 100%);
  content: "";
  display: block;
  height: 100%;
  left: -100%;
  opacity: 0.75;
  position: absolute;
  top: 0;
  width: 25%;
}
#loadingSlide:after {
  background-image: linear-gradient(90deg, hsl(0, 0%, 20%), hsla(0, 0%, 20%, 0) 50%, hsla(0, 0%, 20%, 0) 95%, hsl(0, 0%, 20%));
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#errorList {
  color: #a32;
  bottom: 0;
  position: absolute;
  right: 0;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  width: 24em;
  white-space: pre-wrap;
}
#errorList:empty {
  display: none;
}
#versionLabel {
  color: hsl(0, 0%, 50%);
  display: none;
}
html {
  /*background-color: white;

    &.loaded {
        background-color: @color-back;
        color: @color-fore;
        transition: background-color 0.5s ease-in, color 0.5s ease-in;
    }*/
  background-color: hsl(0, 0%, 20%);
  color: hsl(0, 0%, 100%);
}
@keyframes loadingSlide {
  0% {
    left: -25%;
  }
  50% {
    left: 75%;
  }
  100% {
    left: 175%;
  }
}