body {
  margin: 0;
  font-family: 'Roboto', 'sans-serif';
}
html,
body {
  background-color: lightgray;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  touch-action: none;
}
.overlay {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  display: none;
}
.overlay.visible {
  display: block;
}
.overlay-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.overlay-content.hud {
  pointer-events: none;
}
.tile-up {
  border-left: 1px solid white;
  border-top: 1px solid white;
  border-right: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}
.tile-down {
  border-left: 1px solid lightgray;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
}
.noselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/*
@color-font : #EEE;
@color-font-inverted : #111;
@color-background : #333;
@color-shadow-hi: #555;
@color-shadow-lo: #111;
@color-highlight :  rgba(51,153,255,1);
*/
.tool-panel-shade {
  position: relative;
  height: 11px;
  background: linear-gradient(180deg, #373737 0%, #333333 100%);
  border-top: 1px solid #202020;
}
.tool-panel-shade:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-panel-shade:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/************ Resize decorator ************/
.resizable {
  position: relative;
}
.resizable .handle {
  background-color: #ffffff;
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 1;
  opacity: 0;
}
.resizable .handle.e {
  right: calc(0px - 5px/2);
  top: 12px;
  height: calc(100% - 12px - 12px);
  cursor: e-resize;
}
.resizable .handle.w {
  cursor: w-resize;
  left: calc(0px - 5px/2);
  top: 12px;
  height: calc(100% - 12px - 12px);
}
.resizable .handle.s {
  bottom: calc(0px - 5px/2);
  left: 12px;
  width: calc(100% - 12px - 12px);
  cursor: s-resize;
}
.resizable .handle.n {
  top: calc(0px - 5px/2);
  left: 12px;
  width: calc(100% - 12px - 12px);
  cursor: n-resize;
}
.resizable .handle.ne {
  width: 12px;
  height: 12px;
  right: calc(0px - 12px/2);
  top: calc(0px - 12px/2);
  cursor: ne-resize;
}
.resizable .handle.nw {
  width: 12px;
  height: 12px;
  left: calc(0px - 12px/2);
  top: calc(0px - 12px/2);
  cursor: nw-resize;
}
.resizable .handle.se {
  width: 12px;
  height: 12px;
  right: calc(0px - 12px/2);
  bottom: calc(0px - 12px/2);
  cursor: se-resize;
}
.resizable .handle.sw {
  width: 12px;
  height: 12px;
  left: calc(0px - 12px/2);
  bottom: calc(0px - 12px/2);
  cursor: sw-resize;
}
.drop-targets {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}
.drop-zone-indicator-c {
  background: transparent;
  box-sizing: border-box;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
}
.drop-zone-indicator-c:before {
  filter: blur(9px);
  position: absolute;
  box-sizing: border-box;
  content: "";
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
  border: 0;
}
.drop-zone-indicator-c.hover {
  border: 6px solid #0D64D2;
}
.drop-zone-indicator-c.hover:before {
  border: 12px solid rgba(0, 147, 255, 0.5);
}
.drop-zone-indicator-e {
  background: transparent;
  box-sizing: border-box;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
}
.drop-zone-indicator-e:before {
  filter: blur(9px);
  position: absolute;
  box-sizing: border-box;
  content: "";
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
  border-right: 0;
}
.drop-zone-indicator-e.hover {
  border-right: 6px solid #0D64D2;
}
.drop-zone-indicator-e.hover:before {
  border-right: 12px solid rgba(0, 147, 255, 0.5);
}
.drop-zone-indicator-w {
  background: transparent;
  box-sizing: border-box;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
}
.drop-zone-indicator-w:before {
  filter: blur(9px);
  position: absolute;
  box-sizing: border-box;
  content: "";
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
  border-left: 0;
}
.drop-zone-indicator-w.hover {
  border-left: 6px solid #0D64D2;
}
.drop-zone-indicator-w.hover:before {
  border-left: 12px solid rgba(0, 147, 255, 0.5);
}
.drop-zone-indicator-n {
  background: transparent;
  box-sizing: border-box;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
}
.drop-zone-indicator-n:before {
  filter: blur(9px);
  position: absolute;
  box-sizing: border-box;
  content: "";
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
  border-top: 0;
}
.drop-zone-indicator-n.hover {
  border-top: 6px solid #0D64D2;
}
.drop-zone-indicator-n.hover:before {
  border-top: 12px solid rgba(0, 147, 255, 0.5);
}
.drop-zone-indicator-s {
  background: transparent;
  box-sizing: border-box;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
}
.drop-zone-indicator-s:before {
  filter: blur(9px);
  position: absolute;
  box-sizing: border-box;
  content: "";
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: border 0.2s ease-out;
  transition-delay: 0s;
  border-bottom: 0;
}
.drop-zone-indicator-s.hover {
  border-bottom: 6px solid #0D64D2;
}
.drop-zone-indicator-s.hover:before {
  border-bottom: 12px solid rgba(0, 147, 255, 0.5);
}
.workspace {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  background-color: #333;
  width: 100%;
  height: calc(100% - 25px - 40px);
}
.workspace > .droppable-e {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10px;
}
.workspace > .droppable-w {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
}
.workspace .tool-bar {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 64px;
  height: 100%;
  background-color: #333;
}
.workspace .tool-bar .decoration {
  display: flex;
  box-sizing: border-box;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  position: relative;
  height: 11px;
  background: linear-gradient(180deg, #373737 0%, #333333 100%);
  border-top: 1px solid #202020;
  border-left: 1px solid #202020;
}
.workspace .tool-bar .decoration:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.workspace .tool-bar .decoration:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.workspace .tool-bar .decoration:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.workspace .tool-bar .decoration:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.workspace .tool-bar .content {
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #1e1e1e;
  margin-left: 1px;
  background-color: #555;
}
.workspace .document-box {
  flex-grow: 1;
}
.tool-box.left,
.tool-box.right {
  position: relative;
  height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background-color: #333333;
}
.tool-box.left > .droppable-e,
.tool-box.right > .droppable-e {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10px;
}
.tool-box.left > .droppable-w,
.tool-box.right > .droppable-w {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
}
.tool-box.left > .decoration,
.tool-box.right > .decoration {
  display: flex;
  box-sizing: border-box;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  position: relative;
  height: 11px;
  background: linear-gradient(180deg, #373737 0%, #333333 100%);
  border-top: 1px solid #202020;
  border-left: 1px solid #202020;
}
.tool-box.left > .decoration:before,
.tool-box.right > .decoration:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-box.left > .decoration:before,
.tool-box.right > .decoration:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-box.left > .decoration:before,
.tool-box.right > .decoration:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-box.left > .decoration:before,
.tool-box.right > .decoration:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-box.left > .decoration .icon-container,
.tool-box.right > .decoration .icon-container {
  display: flex;
}
.tool-box.left > .decoration .icon-container svg.icon.arrows-left,
.tool-box.right > .decoration .icon-container svg.icon.arrows-left,
.tool-box.left > .decoration .icon-container svg.icon.arrows-right,
.tool-box.right > .decoration .icon-container svg.icon.arrows-right,
.tool-box.left > .decoration .icon-container svg.icon.close,
.tool-box.right > .decoration .icon-container svg.icon.close {
  cursor: pointer;
  margin-right: 2px;
  width: 9px;
  height: 9px;
}
.tool-box.left > .decoration .icon-container svg.icon.arrows-left:hover,
.tool-box.right > .decoration .icon-container svg.icon.arrows-left:hover,
.tool-box.left > .decoration .icon-container svg.icon.arrows-right:hover,
.tool-box.right > .decoration .icon-container svg.icon.arrows-right:hover,
.tool-box.left > .decoration .icon-container svg.icon.close:hover,
.tool-box.right > .decoration .icon-container svg.icon.close:hover {
  color: #e4e4e4;
}
.tool-icon-group {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #555;
  border: 1px solid #1e1e1e;
  border-top: none;
}
.tool-icon-group:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-icon-group:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-icon-group > .decoration {
  height: 11px;
  width: 100%;
  border: none;
  display: flex;
  justify-content: space-around;
  font-size: 13px;
}
.tool-icon-group .tool-icon-item {
  position: relative;
  width: 100%;
  height: 32px;
  transition: all 0.3s;
}
.tool-icon-group .tool-icon-item .icon-button-container {
  position: relative;
  padding-left: 3px;
  padding-right: 3px;
  box-sizing: border-box;
  height: 28px;
  background-color: #555;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button {
  position: relative;
  border-radius: 3px;
  padding-right: 6px;
  border: 1px solid transparent;
  background-color: #555;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: default;
  width: 100%;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover {
  color: #e4e4e4;
  border: 1px solid #222;
  background: linear-gradient(180deg, #828282 0%, #707070 100%);
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button.active,
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover.active {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #3A3A3A 0%, #383838 100%);
  color: #e4e4e4;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button.active:before,
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover.active:before {
  content: " ";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button.active:after,
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover.active:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button.active:before,
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover.active:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button.active:after,
.tool-icon-group .tool-icon-item .icon-button-container .icon-button:hover.active:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button svg.icon {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  margin-right: 9px;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button.only-icon {
  padding: 0;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button.only-icon svg.icon {
  flex-grow: 1;
  margin: 0;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button.only-icon .label {
  display: none;
}
.tool-icon-group .tool-icon-item .icon-button-container .icon-button > .droppable-s {
  position: absolute;
  height: 20px;
  bottom: 0;
  left: 0;
  right: 0;
}
.tool-icon-group > .droppable-s {
  visibility: hidden;
  position: absolute;
  bottom: 0;
  height: 5px;
  left: 0;
  right: 0;
}
.tool-icon-group .flyout {
  z-index: 2;
}
.tool-icon-group .flyout.e {
  position: absolute;
  left: 100%;
}
.tool-icon-group .flyout.w {
  position: absolute;
  right: 100%;
}
.tool-tab-group {
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  margin-left: 1px;
  margin-bottom: 1px;
}
.tool-tab-group .tab-host {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.tool-tab-group .tab-host:before {
  pointer-events: none;
  border-top: 1px solid #1E1E1E;
  border-left: 1px solid #1E1E1E;
  border-right: 1px solid #1E1E1E;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-tab-group .tab-host .tab-handle-list-container {
  flex-grow: 1;
  display: flex;
  position: relative;
  flex-direction: row;
  height: 19px;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 20px;
  background: linear-gradient(180deg, #3A3A3A 0%, #383838 100%);
}
.tool-tab-group .tab-host .tab-menu-container {
  margin-right: 2px;
}
.tool-tab-group .tab-host .tab-menu-container .command-item {
  padding: 0;
  width: 14px;
}
.tool-tab-group .tab-host .tab-handle {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, #3A3A3A 0%, #383838 100%);
  color: #afafaf;
  height: 18px;
  overflow: hidden;
  pointer: default;
  border-left: 1px solid #202020;
  border-top: 1px solid #202020;
}
.tool-tab-group .tab-host .tab-handle:last-child {
  border-right: 1px solid #202020;
}
.tool-tab-group .tab-host .tab-handle:hover {
  background-color: #555;
  color: #afafaf;
}
.tool-tab-group .tab-host .tab-handle.current {
  color: #afafaf;
  background: #535353;
}
.tool-tab-group .tab-host .tab-handle.current:before {
  content: none;
  border: none;
}
.tool-tab-group .tab-host .tab-handle.current:before {
  content: none;
  border: none;
}
.tool-tab-group .tab-host .tab-handle.current:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-tab-group .tab-host .tab-handle.current:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-tab-group .tab-host .tab-handle.active {
  background: #535353;
  color: #e4e4e4;
  flex-shrink: 0;
}
.tool-tab-group .tab-host .tab-handle.reordering {
  background-color: #555;
  color: #afafaf;
  flex-shrink: 0;
}
.tool-tab-group .tab-host .tab-handle .text {
  flex-shrink: 1;
  line-height: 19px;
  margin-left: 6px;
  margin-right: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.tool-tab-group .tab-host .tab-handle .icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background-size: cover;
  cursor: pointer;
  margin-right: 1px;
}
.tool-tab-group .tab-host .tab-handle:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-tab-group .tab-host .tab-handle:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-tab-group .tab-host .tab-handle:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-tab-group .tab-host .tab-handle:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-tab-group .tab-host .tab-handle-placeholder {
  flex-shrink: 0;
  flex-grow: 0;
  transition: 0.5s all;
  height: 18px;
  width: 5px;
  background-color: #333;
}
.tool-tab-group .tab-host .tab-handle-placeholder.inserted {
  width: 40px;
}
.tool-tab-group .tab-content {
  width: 100%;
  height: calc(100% - 19px);
  position: relative;
  background-color: #555;
  min-height: 80px;
  box-sizing: border-box;
  border-left: 1px solid #202020;
  border-right: 1px solid #202020;
  border-bottom: 1px solid #202020;
}
.tool-tab-group .tab-content .content {
  overflow: hidden;
}
.tool-tab-group .tab-content .content > .html-content {
  background-color: #555;
  overflow: hidden;
}
.tool-tab-group .tab-content > .droppable-s {
  visibility: hidden;
  position: absolute;
  height: 10px;
  bottom: 0;
  left: 0;
  right: 0;
}
.document-tab-group {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  margin-left: 1px;
  margin-bottom: 1px;
}
.document-tab-group .tab-host {
  position: relative;
}
.document-tab-group .tab-host:before {
  pointer-events: none;
  border-top: 1px solid #1E1E1E;
  border-left: 1px solid #1E1E1E;
  border-right: 1px solid #1E1E1E;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.document-tab-group .tab-host .tab-handle-list-container {
  display: flex;
  position: relative;
  flex-direction: row;
  height: 19px;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 20px;
  background: linear-gradient(180deg, #3A3A3A 0%, #383838 100%);
}
.document-tab-group .tab-host .tab-handle {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, #3A3A3A 0%, #383838 100%);
  color: #afafaf;
  height: 18px;
  overflow: hidden;
  pointer: default;
  border-left: 1px solid #202020;
  border-top: 1px solid #202020;
}
.document-tab-group .tab-host .tab-handle:last-child {
  border-right: 1px solid #202020;
}
.document-tab-group .tab-host .tab-handle:hover {
  background-color: #555;
  color: #afafaf;
}
.document-tab-group .tab-host .tab-handle.current {
  color: #afafaf;
  background: #535353;
}
.document-tab-group .tab-host .tab-handle.current:before {
  content: none;
  border: none;
}
.document-tab-group .tab-host .tab-handle.current:before {
  content: none;
  border: none;
}
.document-tab-group .tab-host .tab-handle.current:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.document-tab-group .tab-host .tab-handle.current:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.document-tab-group .tab-host .tab-handle.active {
  background: #535353;
  color: #e4e4e4;
  flex-shrink: 0;
}
.document-tab-group .tab-host .tab-handle.reordering {
  background-color: #555;
  color: #afafaf;
  flex-shrink: 0;
}
.document-tab-group .tab-host .tab-handle .text {
  flex-shrink: 1;
  line-height: 19px;
  margin-left: 6px;
  margin-right: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.document-tab-group .tab-host .tab-handle .close-button {
  position: relative;
  border-radius: 3px;
  border: 1px solid transparent;
  height: 12px;
  margin-right: 2px;
}
.document-tab-group .tab-host .tab-handle .close-button:hover {
  color: #e4e4e4;
  border: 1px solid #222;
  background: linear-gradient(180deg, #828282 0%, #707070 100%);
}
.document-tab-group .tab-host .tab-handle .close-button:hover:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.document-tab-group .tab-host .tab-handle .close-button:hover:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.document-tab-group .tab-host .tab-handle .close-button:hover:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.document-tab-group .tab-host .tab-handle .close-button:hover:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.document-tab-group .tab-host .tab-handle .close-button.active,
.document-tab-group .tab-host .tab-handle .close-button:hover.active {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #3A3A3A 0%, #383838 100%);
  color: #e4e4e4;
}
.document-tab-group .tab-host .tab-handle .close-button.active:before,
.document-tab-group .tab-host .tab-handle .close-button:hover.active:before {
  content: " ";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.document-tab-group .tab-host .tab-handle .close-button.active:after,
.document-tab-group .tab-host .tab-handle .close-button:hover.active:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.document-tab-group .tab-host .tab-handle .close-button.active:before,
.document-tab-group .tab-host .tab-handle .close-button:hover.active:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.document-tab-group .tab-host .tab-handle .close-button.active:after,
.document-tab-group .tab-host .tab-handle .close-button:hover.active:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.document-tab-group .tab-host .tab-handle .close-button svg.icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-size: cover;
  cursor: pointer;
}
.document-tab-group .tab-host .tab-handle:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.document-tab-group .tab-host .tab-handle:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.document-tab-group .tab-host .tab-handle:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.document-tab-group .tab-host .tab-handle:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.document-tab-group .tab-host .tab-handle-placeholder {
  flex-shrink: 0;
  flex-grow: 0;
  transition: 0.5s all;
  height: 18px;
  width: 5px;
  background-color: #333;
}
.document-tab-group .tab-host .tab-handle-placeholder.inserted {
  width: 40px;
}
.document-tab-group .tab-content-container {
  width: 100%;
  height: calc(100% - 19px);
  position: relative;
  background-color: #333;
  min-height: 80px;
  box-sizing: border-box;
  border-left: 1px solid #202020;
  border-right: 1px solid #202020;
  border-bottom: 1px solid #202020;
}
.document-tab-group .tab-content-container .content {
  overflow: hidden;
}
.document-tab-group .tab-content-container .content > .html-content {
  background-color: #333;
  overflow: hidden;
}
.document-tab-group .tab-content-container .tab-content {
  width: 100%;
  height: 100%;
  position: relative;
}
.context-menu-container {
  position: fixed;
  z-index: 100;
}
.context-menu-container .context-menu {
  display: block;
}
.dockit {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.dockit .menu-box {
  display: flex;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  height: 25px;
  width: 100%;
  background-color: #555;
}
.dockit .menu-box:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dockit .menu-box:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dockit .menu-box:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dockit .menu-box:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dockit .context-box {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  height: 40px;
  width: 100%;
  background-color: #555;
}
.dockit .context-box:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dockit .context-box:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dockit .context-box:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dockit .context-box:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dockit .context-box .decoration {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  width: 13px;
}
.dockit .context-box .decoration .icon-drag-vertical {
  position: relative;
  top: 3px;
  font-size: 1.5em;
}
#splash {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}
#splash .splash-content {
  position: absolute;
  width: 800px;
  height: 480px;
  background-color: #EEE;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#splash .splash-content canvas {
  width: 800px;
  heigth: 480px;
}
body {
  color: #a5a5a5;
  font-family: verdana, sans-serif;
  font-size: 11px;
}
.command-item {
  font-size: 10px;
}
svg.icon {
  color: #cecece;
}
input[type="text"],
input[type="number"] {
  display: inline-block;
  font-size: 11px;
  color: white;
  box-sizing: border-box;
  border-left: 1px solid #2C2C2C;
  border-top: 1px solid #2C2C2C;
  border-bottom: 1px solid #2C2C2C;
  border-right: 1px solid #2C2C2C;
  padding: 1px;
  height: 20px;
  vertical-align: middle;
  background-color: #3A3A3A;
  border-radius: 1px;
}
input[type="text"]:focus,
input[type="number"]:focus {
  outline: none;
}
select {
  position: relative;
  color: #e4e4e4;
  padding: 2px 6px 2px 6px;
  border: 1px solid #303030;
  background: linear-gradient(180deg, #757575 0%, #626262 100%);
  border-radius: 3px;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
}
select:focus {
  outline: none;
}
select:active {
  background: #333333;
  border: 1px solid black;
}
select option {
  background-color: #333333;
  color: #E7E7E7;
  height: 20px;
}
.select-wrapper {
  position: relative;
  display: inline-block;
}
.select-wrapper:before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.select-wrapper:after {
  content: " ";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
input[type=range] {
  -webkit-appearance: none;
  background: 0 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: 0;
}
input[type=range]::-ms-track {
  cursor: pointer;
  background: 0 0;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  top: 6px;
  height: 12px;
  width: 12px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-2%20-2%2036%2036%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20spreadMethod%3D%22pad%22%20id%3D%22gradient%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%23B2B2B2%3Bstop-opacity%3A1%3B%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%23656565%3Bstop-opacity%3A1%3B%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M16%2C0L32%2C16L32%2C30L30%2C32L2%2C32L0%2C30L0%2C16L16%2C0z%22%20fill%3D%22url(%23gradient)%22%20stroke%3D%22%233e3e3e%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%0D%0A%3C%2Fsvg%3E");
  background-size: cover;
  cursor: pointer;
  margin-top: -7px;
}
input[type=range]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-2%20-2%2036%2036%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20spreadMethod%3D%22pad%22%20id%3D%22gradient%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%23B2B2B2%3Bstop-opacity%3A1%3B%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%23656565%3Bstop-opacity%3A1%3B%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M16%2C0L32%2C16L32%2C30L30%2C32L2%2C32L0%2C30L0%2C16L16%2C0z%22%20fill%3D%22url(%23gradient)%22%20stroke%3D%22%233e3e3e%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%0D%0A%3C%2Fsvg%3E");
  cursor: pointer;
  margin-top: -7px;
}
input[type=range]::-ms-thumb {
  height: 16px;
  width: 16px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-2%20-2%2036%2036%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20spreadMethod%3D%22pad%22%20id%3D%22gradient%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%23B2B2B2%3Bstop-opacity%3A1%3B%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%23656565%3Bstop-opacity%3A1%3B%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M16%2C0L32%2C16L32%2C30L30%2C32L2%2C32L0%2C30L0%2C16L16%2C0z%22%20fill%3D%22url(%23gradient)%22%20stroke%3D%22%233e3e3e%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%0D%0A%3C%2Fsvg%3E");
  cursor: pointer;
  margin-top: -7px;
}
input[type=range]::-webkit-slider-runnable-track:before {
  content: " ";
  position: absolute;
  z-index: 3;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-bottom: 1px solid #79797996;
  border-left: 1px solid #79797921;
  border-top: 1px solid #79797952;
  border-right: 1px solid #7979793b;
  pointer-events: none;
  border-radius: 2px 6px 6px 2px;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  cursor: pointer;
  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.2);
  background: linear-gradient(0deg, #3E3E3E 0%, #252525 100%);
  border-radius: 4px;
  border-top: 1px solid #242424;
  border-left: 1px solid #242424;
  border-right: 1px solid #242424;
  border-bottom: 1px solid #303030;
}
input[type=range]::-moz-range-track {
  height: 3px;
  cursor: pointer;
  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.2);
  background: linear-gradient(0deg, #3E3E3E 0%, #252525 100%);
  border-radius: 4px;
  border: 0.5px solid #a1a1a1;
}
input[type=range]::-ms-track {
  height: 3px;
  cursor: pointer;
  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.2);
  background: linear-gradient(0deg, #3E3E3E 0%, #252525 100%);
  border-radius: 4px;
  border: 0.5px solid #a1a1a1;
}
input[type=checkbox] {
  position: relative;
  margin: 0;
  margin-right: 5px;
  margin-top: -1px;
  margin-left: 5px;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input[type=checkbox]:focus,
input[type=checkbox]:active {
  outline: none;
}
input[type=checkbox]:before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 0px;
  right: 0px;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  pointer-events: none;
}
input[type=checkbox]:after {
  content: "";
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  background: linear-gradient(0deg, #636363 0%, #6c6c6c 50%, #747474 100%);
  border: 1px solid #303030;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-position: center;
}
input[type=checkbox]:checked:after {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%09%0D%0A%09%3Cg%20transform%3D%22translate(0%2C1)%22%3E%0D%0A%09%3Cg%20transform%3D%22translate(0%2C1)%22%3E%0D%0A%09%09%3Cpath%20d%3D%22M5%2C5L8%2C8L16%2C0%22%20fill%3D%22none%22%20stroke%3D%22%23333333%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22butt%22%2F%3E%20%20%20%0D%0A%09%3C%2Fg%3E%0D%0A%09%3Cpath%20d%3D%22M5%2C5L8%2C8L16%2C0%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22butt%22%2F%3E%20%20%20%0D%0A%09%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E") center center no-repeat, linear-gradient(0deg, #636363 0%, #6c6c6c 50%, #747474 100%);
  background-size: 15px;
  background-position: -4px 0px;
}
button {
  background: darkorange;
  border: 2px solid darkorange;
  border-radius: 0;
  color: #e4e4e4;
  width: 100%;
  margin-bottom: 12px;
  display: block;
  box-sizing: border-box;
  padding: 6px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-weight: bold;
}
button:focus {
  outline: none;
}
button:hover:not(:disabled) {
  background: #ffba66;
  border-color: #ffba66;
}
button:disabled {
  background: transparent;
  color: #cecece;
}
button:active {
  transform: scale(0.95);
}
::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #444444;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #9A9A9A 0%, #6B6B6B 100%);
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
  background: #000;
}
fieldset {
  border: 1px solid #383838;
  border-radius: 2px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
dialog {
  padding: 0;
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  background-color: #535353;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 3px;
  opacity: 0;
  transform: scale(80%);
  transition: 0.2s ease;
}
dialog .decoration {
  background-color: rgba(222, 222, 222, 0.76);
  box-sizing: border-box;
  width: 100%;
  height: 26px;
  padding: 5px;
}
dialog .decoration .title {
  font-size: 14px;
  line-height: 17px;
  color: #333333;
  cursor: default;
}
dialog .decoration .button-close {
  position: absolute;
  border: none;
  right: 3px;
  box-shadow: none;
  top: 3px;
}
dialog .decoration .button-close .icon.delete {
  width: 20px;
  height: 20px;
}
dialog .content-container {
  top: 26px;
  background-color: #f4f4f4;
  padding: 5px;
}
dialog .content-container {
  background-color: #535353;
}
dialog .content-container {
  color: #a5a5a5;
}
dialog .button-container {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  display: flex;
  justify-content: flex-end;
}
dialog .button-container button {
  flex-basis: 0;
  margin: 0;
  min-width: 80px;
  margin-left: 6px;
}
dialog.visible {
  opacity: 1;
  transform: scale(100%);
}
dialog.confirm {
  width: 350px;
}
dialog.alert {
  width: 250px;
}
.noselect {
  user-select: none;
}
.scrollbar-fade:hover {
  transition: background-color 0.5s;
  background-color: #a6a6a6;
}
.scrollbar-thumb-border {
  box-sizing: border-box;
}
body * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.scrollbar {
  cursor: default;
  position: absolute;
  line-height: 16px;
}
.scrollbar.horizontal {
  left: 0;
  right: 16px;
  bottom: 0px;
  height: 16px;
}
.scrollbar.horizontal .button-start {
  position: absolute;
  left: 0;
  background: #444444;
  width: 16px;
  height: 16px;
}
.scrollbar.horizontal .button-start:after {
  position: relative;
  z-index: 1;
  content: "\25C0";
}
.scrollbar.horizontal .button-start:hover {
  transition: background-color 0.5s;
  background-color: #a6a6a6;
}
.scrollbar.horizontal .rail {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 16px;
  background: #444444;
}
.scrollbar.horizontal .rail .thumb {
  position: absolute;
  background: linear-gradient(0deg, #9A9A9A 0%, #6B6B6B 100%);
  border-radius: 6px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
}
.scrollbar.horizontal .rail .thumb:hover {
  transition: background-color 0.5s;
  background-color: #a6a6a6;
}
.scrollbar.horizontal .button-end {
  position: absolute;
  right: 0;
  background: #444444;
  width: 16px;
  height: 16px;
}
.scrollbar.horizontal .button-end:after {
  position: relative;
  z-index: 1;
  content: "\25B6";
}
.scrollbar.horizontal .button-end:hover {
  transition: background-color 0.5s;
  background-color: #a6a6a6;
}
.scrollbar.vertical {
  top: 0;
  right: 0px;
  bottom: 16px;
  width: 16px;
}
.scrollbar.vertical .button-start {
  position: absolute;
  top: 0;
  background: #444444;
  width: 16px;
  height: 16px;
}
.scrollbar.vertical .button-start:after {
  position: relative;
  z-index: 1;
  content: "\25B2";
  left: 2px;
}
.scrollbar.vertical .button-start:hover {
  transition: background-color 0.5s;
  background-color: #a6a6a6;
}
.scrollbar.vertical .rail {
  position: absolute;
  background: #444444;
  top: 16px;
  bottom: 16px;
  width: 16px;
}
.scrollbar.vertical .rail .thumb {
  position: absolute;
  background: linear-gradient(90deg, #9A9A9A 0%, #6B6B6B 100%);
  border-radius: 6px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
}
.scrollbar.vertical .rail .thumb:hover {
  transition: background-color 0.5s;
  background-color: #a6a6a6;
}
.scrollbar.vertical .button-end {
  position: absolute;
  bottom: 0;
  background: #444444;
  width: 16px;
  height: 16px;
}
.scrollbar.vertical .button-end:after {
  position: relative;
  z-index: 1;
  content: "\25BC";
  left: 2px;
}
.scrollbar.vertical .button-end:hover {
  transition: background-color 0.5s;
  background-color: #a6a6a6;
}
.parameter-enum-buttons.ambiguous {
  opacity: 0.5;
}
.parameter-enum-buttons {
  display: flex;
}
.parameter-enum-buttons a.toggle-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 1px;
  margin-right: 2px;
  width: 20px;
  height: 20px;
  padding: 1px;
}
.parameter-enum-buttons a.toggle-button svg.icon {
  color: #e4e4e4;
  width: 18px;
  height: 18px;
}
.parameter-enum-buttons a.toggle-button:not(.flat) {
  color: #e4e4e4;
  border: 1px solid #222;
  background: linear-gradient(180deg, #727272 0%, #606060 100%);
}
.parameter-enum-buttons a.toggle-button:not(.flat):before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.parameter-enum-buttons a.toggle-button:not(.flat):after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.parameter-enum-buttons a.toggle-button:not(.flat):before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.parameter-enum-buttons a.toggle-button:not(.flat):after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.parameter-enum-buttons a.toggle-button:hover {
  border: 1px solid #222;
  background: linear-gradient(180deg, #828282 0%, #707070 100%);
}
.parameter-enum-buttons a.toggle-button:active {
  border: 1px solid #222;
  background: linear-gradient(180deg, #3A3A3A 0%, #383838 100%);
}
.parameter-enum-buttons a.toggle-button:active:before {
  content: " ";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.parameter-enum-buttons a.toggle-button:active:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.parameter-enum-buttons a.toggle-button:active:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.parameter-enum-buttons a.toggle-button:active:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.parameter-enum-buttons a.toggle-button:active > svg.icon {
  color: #e4e4e4;
}
.parameter-enum-buttons a.toggle-button.disabled,
.parameter-enum-buttons a.toggle-button:hover.disabled,
.parameter-enum-buttons a.toggle-button:active.disabled {
  border: 1px solid transparent;
  background: transparent;
  opacity: 0.5;
}
.parameter-enum-buttons a.toggle-button.disabled:not(.flat),
.parameter-enum-buttons a.toggle-button:hover.disabled:not(.flat),
.parameter-enum-buttons a.toggle-button:active.disabled:not(.flat) {
  background: linear-gradient(180deg, #727272 0%, #606060 100%);
}
.parameter-enum-buttons a.toggle-button.checked {
  background: linear-gradient(0deg, #3F3F3F 0%, #373737 100%);
}
.parameter-enum-buttons a.toggle-button.checked:before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  pointer-events: none;
}
.parameter-enum-buttons a.toggle-button.checked:after {
  content: " ";
  position: absolute;
  z-index: 1;
  top: -0.5px;
  left: 0;
  right: 0;
  bottom: -0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 1px;
  pointer-events: none;
}
.parameter-enum-radio input {
  opacity: 0;
  width: 0;
  height: 0;
}
.parameter-enum-radio .radio__control {
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  margin-right: 5px;
}
.parameter-enum-radio .radio__input {
  display: flex;
}
.parameter-enum-radio .radio__input input + .radio__control::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #e4e4e4;
  border-radius: 50%;
  transition: 180ms transform ease-in-out;
  transform: scale(0);
}
.parameter-enum-radio .radio__input input:checked + .radio__control::before {
  transform: scale(1);
}
.parameter-enum-radio .radio__label {
  line-height: 1;
}
.parameter-item.disabled {
  opacity: 0.5;
}
.parameter-item input::-webkit-outer-spin-button,
.parameter-item input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}
.parameter-item input {
  font-size: 12px;
}
.parameter-item label {
  color: #e4e4e4;
}
.parameter-toggle-button.ambiguous {
  opacity: 0.5;
}
.parameter-color.ambiguous .color-selector {
  opacity: 0.5;
}
.parameter-drop-down-slider.ambiguous .drop-down-slider > input {
  opacity: 0.5;
}
.parameter-enum-select label {
  margin-right: 5px;
}
.parameter-drop-down-slider label {
  margin-right: 5px;
}
.parameter-number-slider {
  display: flex;
  align-content: space-between;
}
.parameter-number-slider input[type="range"] {
  width: 100%;
}
.parameter-color .color-selector-container {
  position: relative;
}
.parameter-color .color-selector-container .color-selector {
  width: 25px;
  height: 17px;
  border-radius: 2px;
  border: 1px solid #afafaf;
}
.parameter-color .color-selector-container .photoshop-picker-container {
  position: absolute;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.5s height, 0.5s opacity;
}
.parameter-color .color-selector-container .photoshop-picker-container.visible {
  height: 320px;
  opacity: 1;
}
.parameter-angle canvas {
  float: left;
  margin-right: 12px;
}
.parameter-angle .inputs {
  float: left;
}
.parameter-angle .inputs input[type="number"] {
  border: 1px solid #afafaf;
  border-radius: 2px;
}
.parameter-contour img {
  width: 34px;
  height: 34px;
}
.parameter-gradient {
  width: 170px;
}
.parameter-gradient .box .preview-image-container {
  box-sizing: border-box;
  display: inline-block;
  line-height: 0;
}
.parameter-gradient .box .preview-image-container img {
  max-width: 128px;
  max-height: 16px;
}
.parameter-pattern img {
  width: 64px;
  height: 64px;
  max-width: 64px;
  max-height: 64px;
}
.parameter-pattern label {
  display: none;
}
.parameter-pattern .PanelPattern {
  padding: 4px;
}
.parameter-pattern .PanelPattern .pattern-item-container {
  height: 300px;
  width: 400px;
}
.parameter-pattern .PanelPattern .pattern-item-container > div {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
}
.parameter-pattern .PanelPattern .pattern-item-container > div .pattern-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 2px 0 0;
  width: 64px;
  height: 64px;
}
.parameter-pattern .PanelPattern .pattern-item-container > div .pattern-item.selected {
  background-color: #636363;
}
.parameter-blend-range-slider canvas {
  margin: 5px;
}
.parameter-string-input label {
  margin-right: 8px;
}
.parameter-number-input label {
  margin-right: 8px;
}
.parameter-anchor table div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: none;
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}
.parameter-anchor table div[data-checked="true"] {
  background-color: #3399ff;
}
.parameter-anchor table div .icon {
  width: 20px;
  height: 20px;
}
.parameter-transform-center table {
  border-collapse: collapse;
}
.parameter-transform-center table td {
  line-height: 0;
  padding: 0;
  margin: 0;
}
.parameter-transform-center table button {
  cursor: pointer;
  border: 1px solid black;
  border-radius: 0;
  padding: 0;
  margin: 1px;
  width: 6px;
  height: 6px;
  background: none;
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
}
.parameter-transform-center table button[data-checked="true"] {
  background-color: #333333;
}
.parameter-brush img {
  width: 22px;
  height: 22px;
}
.parameter-item.font-family .preview-text-container,
.parameter-item.font-sub-family .preview-text-container {
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  width: 80px;
}
.parameter-fill-content {
  display: flex;
  align-items: center;
}
.parameter-fill-content label {
  margin-right: 4px;
}
.parameter-fill-content .drop-down-panel .preview-element-container .preview-element {
  display: block;
  width: 24px;
  height: 18px;
  border-style: solid;
  border-color: #2C2C2C;
  border-width: 1px 0 1px 1px;
  background-color: white;
}
.parameter-fill-content .drop-down-panel .preview-element-container .preview-element .icon {
  width: 100%;
  height: 100%;
}
.parameter-fill-content .drop-down-panel .drop-down-panel-container.open {
  background-color: #535353;
  box-sizing: border-box;
  overflow: hidden;
  resize: both;
  min-width: 250px;
  min-height: 350px;
  width: 300px;
  height: 250px;
  max-width: 800px;
  max-height: 600px;
}
.parameter-fill-content .drop-down-panel .drop-down-panel-container.open .fill-switcher-container {
  display: flex;
  height: 12px;
  padding: 10px;
}
.parameter-fill-content .drop-down-panel .drop-down-panel-container.open .fill-switcher-container .toggle-button {
  width: 30px;
  height: 22px;
}
.parameter-fill-content .drop-down-panel .drop-down-panel-container.open .fill-switcher-container .toggle-button svg.icon {
  position: relative;
  top: -0.5px;
  width: 22px;
  height: 22px;
}
.parameter-fill-content .drop-down-panel .drop-down-panel-container.open .fill-switcher-container .toggle-button.checked svg.icon {
  top: 0;
}
.parameter-stroke-style {
  display: flex;
  align-items: center;
}
.parameter-stroke-style .preview-element-container .preview-element {
  display: block;
  width: 48px;
  height: 18px;
  border-style: solid;
  border-color: #2C2C2C;
  border-width: 1px 0 1px 1px;
}
.parameter-path-boolean-op,
.parameter-path-align,
.parameter-path-order {
  display: flex;
}
.parameter-path-boolean-op .drop-down-panel .preview-element-container,
.parameter-path-align .drop-down-panel .preview-element-container,
.parameter-path-order .drop-down-panel .preview-element-container {
  background-color: #535353;
}
.parameter-path-boolean-op .drop-down-panel .preview-element-container .icon,
.parameter-path-align .drop-down-panel .preview-element-container .icon,
.parameter-path-order .drop-down-panel .preview-element-container .icon {
  display: block;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-color: #2C2C2C;
  border-width: 1px 0 1px 1px;
  background-color: #535353;
}
.parameter-path-boolean-op .drop-down-panel .preview-element-container .icon svg,
.parameter-path-align .drop-down-panel .preview-element-container .icon svg,
.parameter-path-order .drop-down-panel .preview-element-container .icon svg {
  width: 100%;
  height: 100%;
}
.parameter-custom-shape {
  display: flex;
}
.parameter-custom-shape img {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
}
.parameter-custom-shape label {
  display: none;
}
.parameter-warp-style {
  display: flex;
  align-items: center;
}
.parameter-warp-style .drop-down-panel .open-anchor {
  left: 0;
}
.parameter-warp-style .drop-down-panel .open-anchor .drop-down-panel-container.open {
  left: 0;
}
.parameter-warp-style .drop-down-panel .preview-element-container {
  display: inline-flex;
  align-items: center;
  border-style: solid;
  border-color: #2C2C2C;
  border-width: 1px 0 1px 1px;
  min-width: 150px;
}
.parameter-warp-style .drop-down-panel .preview-element-container .icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: #535353;
  margin: 0 10px;
}
.parameter-warp-style .drop-down-panel .preview-element-container .icon svg {
  width: 100%;
  height: 100%;
}
.parameter-warp-style .drop-down-panel .preview-element-container label {
  min-height: 24px;
}
.parameter-warp-style .menu .icon {
  width: 24px;
  height: 24px;
}
.parameter-point-array-spline {
  display: flex;
}
.parameter-point-array-spline canvas {
  margin: 5px;
  width: 150px;
  height: 150px;
}
.dock-panels {
  background-color: #f4f4f4;
  padding: 4px;
  height: 100%;
}
.dock-panels .container-buttons input[type="button"] {
  height: 32px;
  width: 32px;
}
.BarTool {
  display: grid;
  grid-template-columns: 29px 29px;
  align-content: space-evenly;
  line-height: 0;
  height: 273px;
  width: 64px;
}
.BarTool div.icon-drawer {
  position: relative;
  float: left;
  padding: 0 2px;
}
.BarTool div.icon-drawer .button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  border-radius: 3px;
  width: 25px;
  height: 25px;
  border: 1px solid transparent;
}
.BarTool div.icon-drawer .button svg.icon {
  width: 15px;
  height: 15px;
}
.BarTool div.icon-drawer .button svg.icon.mask-ellipse {
  width: 18px;
  height: 18px;
}
.BarTool div.icon-drawer .button svg.icon.mask-polygon {
  width: 17px;
  height: 17px;
}
.BarTool div.icon-drawer .button svg.icon.pattern {
  width: 17px;
  height: 17px;
}
.BarTool div.icon-drawer .button svg.icon.clone {
  width: 16px;
  height: 16px;
}
.BarTool div.icon-drawer .button svg.icon.brush {
  width: 17px;
  height: 17px;
}
.BarTool div.icon-drawer .button svg.icon.eraser {
  width: 17px;
  height: 17px;
}
.BarTool div.icon-drawer .button svg.icon.crop {
  width: 18px;
  height: 18px;
}
.BarTool div.icon-drawer .button svg.icon.floodfill {
  width: 17px;
  height: 17px;
}
.BarTool div.icon-drawer .button.selected,
.BarTool div.icon-drawer .button:hover.selected {
  background: linear-gradient(180deg, #3A3A3A 0%, #383838 100%);
}
.BarTool div.icon-drawer .button.selected:before,
.BarTool div.icon-drawer .button:hover.selected:before {
  content: " ";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.BarTool div.icon-drawer .button.selected:after,
.BarTool div.icon-drawer .button:hover.selected:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.BarTool div.icon-drawer .button.selected:before,
.BarTool div.icon-drawer .button:hover.selected:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.BarTool div.icon-drawer .button.selected:after,
.BarTool div.icon-drawer .button:hover.selected:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.BarTool div.icon-drawer .button.selected > svg.icon,
.BarTool div.icon-drawer .button:hover.selected > svg.icon {
  color: #e4e4e4;
}
.BarTool div.icon-drawer .button:hover {
  color: #e4e4e4;
  border: 1px solid #222;
  background: linear-gradient(180deg, #828282 0%, #707070 100%);
}
.BarTool div.icon-drawer .button:hover:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.BarTool div.icon-drawer .button:hover:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.BarTool div.icon-drawer .button:hover:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.BarTool div.icon-drawer .button:hover:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.BarTool div.icon-drawer .children {
  top: 0;
  z-index: -1;
  left: 32px;
  display: none;
  flex-direction: column;
  width: 220px;
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s;
  background-color: #535353;
  box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
}
.BarTool div.icon-drawer .children .child-item {
  display: flex;
  padding: 3px;
  box-sizing: border-box;
  width: 220px;
  height: 27px;
  align-items: center;
}
.BarTool div.icon-drawer .children .child-item.selected {
  background-color: #636363;
}
.BarTool div.icon-drawer .children .child-item:hover {
  color: #e4e4e4;
  background-color: #636363;
}
.BarTool div.icon-drawer .children .child-item .label {
  line-height: 25px;
  margin-left: 7px;
}
.BarTool div.icon-drawer .children .child-item svg.icon {
  width: 20px;
  height: 20px;
}
.BarTool div.icon-drawer svg.icon.children-marker {
  width: 5px;
  height: 5px;
  background-size: 5px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.BarTool div.icon-drawer.open .children {
  z-index: 1;
  left: 32px;
  display: flex;
  opacity: 1;
}
.BarTool div.icon-drawer.open .children .button {
  float: left;
}
.BarSide {
  background-color: #535353;
}
.BarSide .color-selectors {
  position: relative;
  height: 64px;
}
.BarSide .color-selectors .parameter-color:nth-child(1) {
  position: absolute;
  border-radius: 0;
  border: 1px solid gray;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
}
.BarSide .color-selectors .parameter-color:nth-child(1) .color-selector {
  width: 28px;
  height: 28px;
  border-radius: 0;
  border: none;
}
.BarSide .color-selectors .parameter-color:nth-child(2) {
  position: absolute;
  border-radius: 0;
  border: 1px solid gray;
  left: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
}
.BarSide .color-selectors .parameter-color:nth-child(2) .color-selector {
  width: 28px;
  height: 28px;
  border-radius: 0;
  border: none;
}
.BarSide .color-selectors div.swap-arrows svg.icon.swap-arrows {
  color: #e4e4e4;
  position: absolute;
  right: 11px;
  top: 11px;
  width: 9px;
  height: 9px;
}
.BarSide .color-selectors div.swap-arrows:active svg.icon.swap-arrows {
  right: 10px;
  top: 12px;
}
.BarSide .color-selectors .photoshop-picker-container {
  position: absolute;
  bottom: 0;
  left: 50px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.5s height, 0.5s opacity;
}
.BarSide .color-selectors .photoshop-picker-container.visible {
  height: 320px;
  opacity: 1;
}
.BarTop {
  height: 100%;
  display: flex;
  align-items: center;
  background: #535353;
}
.BarTop .tool-bar-content {
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.BarTop svg.icon.tool-bar-icon {
  width: 17px;
  height: 19px;
  margin-left: 10px;
}
.BarTop .parameter-item {
  margin-left: 10px;
}
.BarTop .parameter-item.ambiguous .FontChooser .label {
  color: #f4f4f4;
}
.BarTop .parameter-item.ambiguous .drop-down-slider:not(.visible) input[type=text] {
  color: #f4f4f4;
}
.BarTop .parameter-item.ambiguous .toggle-button {
  opacity: 0.5;
}
.BarTop .parameter-item.ambiguous .color-selector {
  background-color: #f4f4f4 !important;
}
.BarTop .separator {
  margin-left: 10px;
  height: 20px;
  width: 0;
  border-right: 1px solid #383838;
}
.BarTop .parameter-item.parameter-number-input {
  display: flex;
  justify-content: center;
  align-items: center;
}
.BarTop .parameter-item.parameter-number-input input {
  margin-left: 5px;
  width: 5em;
}
.BarTop .parameter-item.parameter-pattern {
  width: 40px;
}
.BarTop .parameter-item.parameter-pattern .preview-image-container {
  width: 25px;
  height: 25px;
}
.BarTop .parameter-item.parameter-pattern .preview-image-container img.preview-image {
  width: 23px;
  height: 23px;
}
.BarTop .parameter-item.parameter-pattern input[type=button] {
  left: 24px;
  height: 25px;
  width: 17px;
}
.BarTop .parameter-item.parameter-pattern .drop-down-panel-container.open {
  left: 0;
  box-shadow: 2px 2px rgba(0, 0, 0, 0.4);
}
.BarTop .parameter-item.parameter-enum-buttons .icon.mask-mode-new,
.BarTop .parameter-item.parameter-enum-buttons .icon.mask-mode-intersect,
.BarTop .parameter-item.parameter-enum-buttons .icon.mask-mode-subtract,
.BarTop .parameter-item.parameter-enum-buttons .icon.mask-mode-union {
  width: 15px;
  height: 15px;
}
.BarTop .parameter-item.parameter-enum-radio {
  display: flex;
  align-items: center;
}
.BarTop .parameter-item.parameter-enum-radio label {
  display: flex;
  align-items: center;
}
.BarTop .parameter-item.parameter-color {
  display: flex;
  align-items: center;
}
.BarTop .parameter-item.parameter-color .label {
  margin-right: 5px;
}
.BarTop .command-item {
  margin-left: 9px;
}
.BarTop .command-item .label {
  margin: 0 3px 0 3px;
}
.BarTop .command-item svg.icon {
  width: 15px;
  height: 15px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(1) {
  margin-left: 12px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(2) {
  margin-left: 3px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(3) {
  margin-left: 3px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(4) {
  margin-left: 12px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(5) {
  margin-left: 3px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(6) {
  margin-left: 3px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(7) {
  margin-left: 12px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(8) {
  margin-left: 3px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(9) {
  margin-left: 3px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(10) {
  margin-left: 12px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(11) {
  margin-left: 3px;
}
.BarTop .tool-bar-content.Transform .command-item:nth-of-type(12) {
  margin-left: 3px;
}
.tool-panel-shade {
  position: relative;
  height: 11px;
  background: linear-gradient(180deg, #373737 0%, #333333 100%);
  border-top: 1px solid #202020;
  border-left: 1px solid #202020;
}
.tool-panel-shade:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tool-panel-shade:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#panel-layers-container {
  height: 100%;
}
body .LayerPanel {
  cursor: url("../lib/libui/assets/cursors/pointer.png") 5 1, auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #e4e4e4;
}
body.dnd-dragging .LayerPanel {
  cursor: url("../lib/libui/assets/cursors/drag.png") 8 4, auto;
}
.LayerPanel,
#LayerPanelDragProxy {
  height: 300px;
  cursor: default;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background-color: #535353;
}
.LayerPanel div.layer-container,
#LayerPanelDragProxy div.layer-container {
  flex-grow: 1;
  overflow-y: scroll;
  overflow-x: hidden;
}
.LayerPanel ul,
#LayerPanelDragProxy ul {
  font-size: 10px;
  padding: 0;
  list-style: none;
}
.LayerPanel ul li,
#LayerPanelDragProxy ul li {
  clear: both;
  position: relative;
}
.LayerPanel ul li.layer-color-red .icon-left,
#LayerPanelDragProxy ul li.layer-color-red .icon-left {
  background-color: darkred;
}
.LayerPanel ul li.layer-color-orange .icon-left,
#LayerPanelDragProxy ul li.layer-color-orange .icon-left {
  background-color: darkorange;
}
.LayerPanel ul li.layer-color-yellow .icon-left,
#LayerPanelDragProxy ul li.layer-color-yellow .icon-left {
  background-color: darkkhaki;
}
.LayerPanel ul li.layer-color-green .icon-left,
#LayerPanelDragProxy ul li.layer-color-green .icon-left {
  background-color: darkgreen;
}
.LayerPanel ul li.layer-color-blue .icon-left,
#LayerPanelDragProxy ul li.layer-color-blue .icon-left {
  background-color: darkblue;
}
.LayerPanel ul li.layer-color-violet .icon-left,
#LayerPanelDragProxy ul li.layer-color-violet .icon-left {
  background-color: darkviolet;
}
.LayerPanel ul li.layer-color-gray .icon-left,
#LayerPanelDragProxy ul li.layer-color-gray .icon-left {
  background-color: darkgray;
}
.LayerPanel ul li > div.item-container,
#LayerPanelDragProxy ul li > div.item-container {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: row;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.LayerPanel ul li > div.item-container .separator-container-above,
#LayerPanelDragProxy ul li > div.item-container .separator-container-above {
  z-index: 1;
  height: 8px;
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  background-color: transparent;
}
.LayerPanel ul li > div.item-container .separator-container-above .separator,
#LayerPanelDragProxy ul li > div.item-container .separator-container-above .separator {
  display: none;
}
.LayerPanel ul li > div.item-container .separator-container-below,
#LayerPanelDragProxy ul li > div.item-container .separator-container-below {
  z-index: 2;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  background-color: transparent;
}
.LayerPanel ul li > div.item-container .separator-container-below.create-clipping-mask,
#LayerPanelDragProxy ul li > div.item-container .separator-container-below.create-clipping-mask {
  cursor: url("../lib/libui/assets/cursors/create-clipping-mask.cur") 6 15, auto;
}
.LayerPanel ul li > div.item-container .separator-container-below.release-clipping-mask,
#LayerPanelDragProxy ul li > div.item-container .separator-container-below.release-clipping-mask {
  cursor: url("../lib/libui/assets/cursors/release-clipping-mask.cur") 6 15, auto;
}
.LayerPanel ul li > div.item-container .separator-container-below:focus,
#LayerPanelDragProxy ul li > div.item-container .separator-container-below:focus {
  outline: 1px solid transparent;
}
.LayerPanel ul li > div.item-container .separator-container-below .separator,
#LayerPanelDragProxy ul li > div.item-container .separator-container-below .separator {
  display: none;
}
.LayerPanel ul li > div.item-container > div.icon-left,
#LayerPanelDragProxy ul li > div.item-container > div.icon-left {
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0px;
  align-items: center;
  border-right: 2px solid rgba(0, 0, 0, 0.1);
  padding: 5px;
}
.LayerPanel ul li > div.item-container > div.icon-left span.visibility-icon-container,
#LayerPanelDragProxy ul li > div.item-container > div.icon-left span.visibility-icon-container {
  margin: 4px;
  width: 14px;
  height: 14px;
}
.LayerPanel ul li > div.item-container > div.icon-left span.visibility-icon-container .icon.visible,
#LayerPanelDragProxy ul li > div.item-container > div.icon-left span.visibility-icon-container .icon.visible {
  color: #e4e4e4;
  width: 14px;
  height: 14px;
}
.LayerPanel ul li > div.item-container > div.icon-left span.visibility-icon-container .icon.invisible,
#LayerPanelDragProxy ul li > div.item-container > div.icon-left span.visibility-icon-container .icon.invisible {
  color: #e4e4e4;
  width: 12px;
  height: 12px;
}
.LayerPanel ul li > div.item-container > div.item,
#LayerPanelDragProxy ul li > div.item-container > div.item {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content {
  min-height: 0px;
  position: relative;
  height: auto;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .button-collapse,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .button-collapse {
  transform: rotate(90deg);
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .button-collapse .icon.arrow-right-mini,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .button-collapse .icon.arrow-right-mini {
  padding: 3px;
  width: 11px;
  height: 11px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container {
  display: flex;
  align-items: center;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .link-mask-bitmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .link-mask-bitmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .link-mask-bitmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .link-mask-bitmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .link-mask-bitmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .link-mask-bitmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .link-mask-vector,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .link-mask-vector,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .link-mask-vector,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .link-mask-vector,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .link-mask-vector,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .link-mask-vector {
  width: 17px;
  height: 17px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .link-mask-bitmap.linked .icon.link,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .link-mask-bitmap.linked .icon.link,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .link-mask-bitmap.linked .icon.link,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .link-mask-bitmap.linked .icon.link,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .link-mask-bitmap.linked .icon.link,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .link-mask-bitmap.linked .icon.link,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .link-mask-vector.linked .icon.link,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .link-mask-vector.linked .icon.link,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .link-mask-vector.linked .icon.link,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .link-mask-vector.linked .icon.link,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .link-mask-vector.linked .icon.link,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .link-mask-vector.linked .icon.link {
  width: 17px;
  height: 17px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape {
  position: relative;
  pointer-events: all;
  line-height: 0;
  border: 1px solid #666;
  background: url("../lib/libui/assets/ui/thumbnail-bg.png") repeat;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape canvas,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape canvas,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape canvas {
  min-width: 25px;
  min-height: 25px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape .icon.layer-shape,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape .icon.layer-shape,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape .icon.layer-shape {
  padding: 1px;
  position: absolute;
  width: 12px;
  height: 12px;
  right: 0;
  bottom: 0;
  background-color: #666;
  color: #EEE;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape.disabled .icon.layer-disabled,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape.disabled .icon.layer-disabled,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape.disabled .icon.layer-disabled {
  color: red;
  pointer-events: none;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .channels-container .thumbnail.text,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text,
.LayerPanel ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text {
  background: none;
  border: 1px solid transparent;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content .icon.arrow-angle-down,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content .icon.arrow-angle-down {
  width: 12px;
  height: 12px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container {
  position: relative;
  padding: 3px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container span.layer-icon-label,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container span.layer-icon-label {
  color: #a5a5a5;
  position: absolute;
  top: 5px;
  left: 6px;
  font-weight: bold;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon {
  width: 24px;
  height: 24px;
  margin: 0;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment {
  background-size: 15px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-levels,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-levels,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-curves,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-curves,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-colorbalance,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-colorbalance,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-channelmixer,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-channelmixer,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-photofilter,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-photofilter,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-brightnesscontrast,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-brightnesscontrast,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-threshold,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-threshold,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-exposure,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-exposure,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-invert,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-invert,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-huesaturation,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-huesaturation,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-gradientmap,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-gradientmap,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-selectivecolor,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-selectivecolor,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-vibrance,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-vibrance,
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-posterize,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.adjustment-posterize {
  width: 35px;
  height: 35px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.text,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.layer-icon-container .layer-icon.text {
  margin: 6px;
  width: 13px;
  height: 13px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content span.layer-label,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content span.layer-label {
  margin-left: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content span.layer-label[contenteditable],
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content span.layer-label[contenteditable] {
  background-color: white;
  border: 1px solid black;
  padding: 2px;
  color: black;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.button-toggle-fx,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.button-toggle-fx {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  right: 0;
  width: 10px;
  height: 100%;
  margin-left: auto;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 100%);
  background-size: 5px, auto;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.button-toggle-fx.collapsed,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.button-toggle-fx.collapsed {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 100%);
  background-size: 5px, auto;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.button-toggle-fx .icon.arrow-up-mini,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.button-toggle-fx .icon.arrow-up-mini {
  width: 9px;
  height: 9px;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content div.button-toggle-fx .icon.arrow-down-mini,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content div.button-toggle-fx .icon.arrow-down-mini {
  width: 9px;
  height: 9px;
}
.LayerPanel ul li > div.item-container.drop-target-above .separator-container-above,
#LayerPanelDragProxy ul li > div.item-container.drop-target-above .separator-container-above {
  display: flex;
  align-items: center;
}
.LayerPanel ul li > div.item-container.drop-target-above .separator-container-above .separator,
#LayerPanelDragProxy ul li > div.item-container.drop-target-above .separator-container-above .separator {
  height: 3px;
  width: 100%;
  background-color: black;
  display: block;
}
.LayerPanel ul li > div.item-container.drop-target-below .separator-container-below,
#LayerPanelDragProxy ul li > div.item-container.drop-target-below .separator-container-below {
  display: flex;
  align-items: center;
}
.LayerPanel ul li > div.item-container.drop-target-below .separator-container-below .separator,
#LayerPanelDragProxy ul li > div.item-container.drop-target-below .separator-container-below .separator {
  height: 3px;
  width: 100%;
  background-color: black;
  display: block;
}
.LayerPanel ul li > div.item-container.drop-target-on .item-content:after,
#LayerPanelDragProxy ul li > div.item-container.drop-target-on .item-content:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 4px solid black;
  content: "";
}
.LayerPanel ul li > div.item-container.drop-target-forbidden,
#LayerPanelDragProxy ul li > div.item-container.drop-target-forbidden {
  cursor: no-drop;
}
.LayerPanel ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 0px;
}
.LayerPanel ul li .fx-drawer,
#LayerPanelDragProxy ul li .fx-drawer {
  padding-left: 0px;
}
.LayerPanel ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 25px;
}
.LayerPanel ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li .fx-drawer {
  padding-left: 25px;
}
.LayerPanel ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 50px;
}
.LayerPanel ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li .fx-drawer {
  padding-left: 50px;
}
.LayerPanel ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 75px;
}
.LayerPanel ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li .fx-drawer {
  padding-left: 75px;
}
.LayerPanel ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 100px;
}
.LayerPanel ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 100px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 125px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 125px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 150px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 150px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 175px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 175px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 200px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 200px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 225px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 225px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 250px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 250px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 275px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 275px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 300px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 300px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 325px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 325px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 350px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 350px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 375px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 375px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 400px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 400px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 425px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 425px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 450px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 450px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li > div.item-container > div.item > div.item-content {
  /* width of visibility icon + i * indent */
  padding-left: 475px;
}
.LayerPanel ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer,
#LayerPanelDragProxy ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li .fx-drawer {
  padding-left: 475px;
}
.LayerPanel ul li.is-base > div.item-container > div.item > div.item-content > span.layer-label,
#LayerPanelDragProxy ul li.is-base > div.item-container > div.item > div.item-content > span.layer-label {
  text-decoration: underline;
}
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content {
  background-color: #636363;
  color: #EEE;
}
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.text.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.text.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.text.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.text.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.bitmap.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.bitmap.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.bitmap.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-bitmap.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-bitmap.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-bitmap.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.mask-vector.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.mask-vector.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.mask-vector.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .channels-container .thumbnail.shape.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-bitmap-container .thumbnail.shape.selected:after,
.LayerPanel ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape.selected:after,
#LayerPanelDragProxy ul li.select-immediate > div.item-container > div.item > div.item-content .mask-vector-container .thumbnail.shape.selected:after {
  --b: 2px;
  /* thickness of the border */
  --c: white;
  /* color of the border */
  --w: 10px;
  /* width of border */
  border: var(--b) solid transparent;
  /* space for the border */
  --g: #0000 90deg,var(--c) 0;
  background: conic-gradient(from 90deg at top var(--b) left var(--b), var(--g)) 0 0, conic-gradient(from 180deg at top var(--b) right var(--b), var(--g)) 100% 0, conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--g)) 0 100%, conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--g)) 100% 100%;
  background-size: var(--w) var(--w);
  background-origin: border-box;
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  top: -3px;
  left: -3px;
  bottom: -3px;
  right: -3px;
  content: "";
}
.LayerPanel ul li .icon.layer-style-new,
#LayerPanelDragProxy ul li .icon.layer-style-new {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 55px;
  right: 15px;
}
.LayerPanel ul li .fx-drawer .fx-item,
#LayerPanelDragProxy ul li .fx-drawer .fx-item,
.LayerPanel ul li.select-immediate .fx-drawer .fx-item,
#LayerPanelDragProxy ul li.select-immediate .fx-drawer .fx-item {
  display: flex;
  align-items: center;
  text-align: left;
  margin-left: 10px;
  line-height: 18px;
}
.LayerPanel ul li .fx-drawer .fx-item:first-child,
#LayerPanelDragProxy ul li .fx-drawer .fx-item:first-child,
.LayerPanel ul li.select-immediate .fx-drawer .fx-item:first-child,
#LayerPanelDragProxy ul li.select-immediate .fx-drawer .fx-item:first-child {
  margin-left: 0;
}
.LayerPanel ul li .fx-drawer .fx-item:last-child,
#LayerPanelDragProxy ul li .fx-drawer .fx-item:last-child,
.LayerPanel ul li.select-immediate .fx-drawer .fx-item:last-child,
#LayerPanelDragProxy ul li.select-immediate .fx-drawer .fx-item:last-child {
  border-bottom: none;
}
.LayerPanel ul li .fx-drawer .fx-item .button,
#LayerPanelDragProxy ul li .fx-drawer .fx-item .button,
.LayerPanel ul li.select-immediate .fx-drawer .fx-item .button,
#LayerPanelDragProxy ul li.select-immediate .fx-drawer .fx-item .button {
  line-height: 0;
}
.LayerPanel ul li .fx-drawer .fx-item .button .icon.visible,
#LayerPanelDragProxy ul li .fx-drawer .fx-item .button .icon.visible,
.LayerPanel ul li.select-immediate .fx-drawer .fx-item .button .icon.visible,
#LayerPanelDragProxy ul li.select-immediate .fx-drawer .fx-item .button .icon.visible {
  opacity: 0;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  display: inline-block;
}
.LayerPanel ul li .fx-drawer .fx-item.active .icon.visible,
#LayerPanelDragProxy ul li .fx-drawer .fx-item.active .icon.visible,
.LayerPanel ul li.select-immediate .fx-drawer .fx-item.active .icon.visible,
#LayerPanelDragProxy ul li.select-immediate .fx-drawer .fx-item.active .icon.visible {
  opacity: 1;
}
.LayerPanel ul li .fx-drawer:not(.master-active) .fx-item.active .icon.visible,
#LayerPanelDragProxy ul li .fx-drawer:not(.master-active) .fx-item.active .icon.visible,
.LayerPanel ul li.select-immediate .fx-drawer:not(.master-active) .fx-item.active .icon.visible,
#LayerPanelDragProxy ul li.select-immediate .fx-drawer:not(.master-active) .fx-item.active .icon.visible {
  opacity: 0.5;
}
.LayerPanel ul li.select-immediate div.drop-target img.layer-icon,
#LayerPanelDragProxy ul li.select-immediate div.drop-target img.layer-icon {
  border: none;
}
.LayerPanel ul li.collapsed li,
#LayerPanelDragProxy ul li.collapsed li {
  display: none;
}
.LayerPanel ul li.collapsed div.item-container > div.item > div.item-content > div.button-collapse,
#LayerPanelDragProxy ul li.collapsed div.item-container > div.item > div.item-content > div.button-collapse {
  transform: initial;
}
.LayerPanel div.property-container,
#LayerPanelDragProxy div.property-container {
  padding: 2px;
}
.LayerPanel div.property-container.disabled input,
#LayerPanelDragProxy div.property-container.disabled input {
  opacity: 0.3;
}
.LayerPanel div.property-container .drop-down-slider input[type="range"],
#LayerPanelDragProxy div.property-container .drop-down-slider input[type="range"] {
  z-index: 3;
}
.LayerPanel div.button-container,
#LayerPanelDragProxy div.button-container {
  height: 27px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.LayerPanel div.button-container .command-item,
#LayerPanelDragProxy div.button-container .command-item {
  margin-left: 4px;
  min-width: 34px;
  margin-bottom: 1px;
}
.LayerPanel div.button-container .command-item svg.icon,
#LayerPanelDragProxy div.button-container .command-item svg.icon {
  width: 13px;
  height: 13px;
}
.LayerPanel div.button-container input[type="button"]:hover,
#LayerPanelDragProxy div.button-container input[type="button"]:hover {
  border: 1px solid lightgray;
}
#panel-path-container {
  width: 300px;
  height: 800px;
}
body .panel-path {
  cursor: url("../lib/libui/assets/cursors/pointer.png") 5 1, auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #535353;
  color: #e4e4e4;
}
body .panel-path .path-container {
  flex-grow: 1;
  overflow-y: scroll;
  overflow-x: hidden;
}
body .panel-path .path-container ul {
  font-size: 10px;
  padding: 0;
  list-style: none;
  margin: 0;
}
body .panel-path .path-container ul li {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: row;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}
body .panel-path .path-container ul li .item-container {
  width: 100%;
}
body .panel-path .path-container ul li .item-container .separator-container-above {
  z-index: 1;
  height: 8px;
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  background-color: transparent;
}
body .panel-path .path-container ul li .item-container .separator-container-above .separator {
  display: none;
}
body .panel-path .path-container ul li .item-container .separator-container-below {
  z-index: 2;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  background-color: transparent;
}
body .panel-path .path-container ul li .item-container .separator-container-below:focus {
  outline: 1px solid transparent;
}
body .panel-path .path-container ul li .item-container .separator-container-below .separator {
  display: none;
}
body .panel-path .path-container ul li .item-container.drop-target-above .separator-container-above {
  display: flex;
  align-items: center;
}
body .panel-path .path-container ul li .item-container.drop-target-above .separator-container-above .separator {
  height: 3px;
  width: 100%;
  background-color: black;
  display: block;
}
body .panel-path .path-container ul li .item-container.drop-target-below .separator-container-below {
  display: flex;
  align-items: center;
}
body .panel-path .path-container ul li .item-container.drop-target-below .separator-container-below .separator {
  height: 3px;
  width: 100%;
  background-color: black;
  display: block;
}
body .panel-path .path-container ul li .item-container .item {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-left: 2px;
}
body .panel-path .path-container ul li .item-container .item .container-thumbnail {
  line-height: 0;
}
body .panel-path .path-container ul li .item-container .item .container-thumbnail canvas.thumbnail {
  position: relative;
  pointer-events: all;
  line-height: 0;
  border: 1px solid #666;
  background-color: white;
}
body .panel-path .path-container ul li .item-container .item .label {
  margin-left: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
body .panel-path .path-container ul li .item-container .item .label[contenteditable] {
  background-color: white;
  border: 1px solid black;
  padding: 2px;
  color: black;
}
body .panel-path .path-container ul li .item-container .item.selected {
  background-color: #636363;
  color: #EEE;
}
body .panel-path .button-container {
  height: 27px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
body .panel-path .button-container .command-item {
  margin-left: 4px;
  min-width: 34px;
  margin-bottom: 1px;
}
body .panel-path .button-container .command-item svg.icon {
  width: 13px;
  height: 13px;
}
body .panel-path .button-container input[type="button"]:hover {
  border: 1px solid lightgray;
}
.drop-down-panel-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 2;
}
.drop-down-panel {
  position: relative;
  border-radius: 1px;
  display: flex;
  align-items: center;
}
.drop-down-panel .box {
  display: flex;
  position: relative;
  background-color: transparent;
}
.drop-down-panel .box .label {
  height: 100%;
  padding: 2px;
}
.drop-down-panel .box .button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  border-top: 1px solid #2C2C2C;
  border-bottom: 1px solid #2C2C2C;
  border-right: 1px solid #2C2C2C;
  border-left: 1px solid #2C2C2C;
  background: linear-gradient(180deg, #757575 0%, #626262 100%);
  border-radius: 0 3px 3px 0;
  box-sizing: border-box;
  padding: 1px;
}
.drop-down-panel .box .button:before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 3px 3px 0;
  pointer-events: none;
}
.drop-down-panel .box .button .icon.arrow-down-mini {
  color: #e4e4e4;
  width: 5px;
  height: 5px;
  padding: 1px 2px;
}
.drop-down-panel .box .preview-image-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #2C2C2C;
  border-bottom: 1px solid #2C2C2C;
  border-right: none;
  border-left: 1px solid #2C2C2C;
}
.drop-down-panel .box .preview-text-container {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: white;
  box-sizing: border-box;
  border-left: 1px solid #2C2C2C;
  border-top: 1px solid #2C2C2C;
  border-bottom: 1px solid #2C2C2C;
  border-right: none;
  padding: 1px;
  height: 20px;
  vertical-align: middle;
  border-radius: 3px 0 0 3px;
}
.drop-down-panel .box:active {
  background: #3A3A3A;
}
.drop-down-panel.visible .button,
.drop-down-panel .button:active {
  background: #3A3A3A;
}
.drop-down-panel.visible .button .icon.arrow-down-mini,
.drop-down-panel .button:active .icon.arrow-down-mini {
  position: relative;
  top: 1px;
}
.drop-down-panel.visible .button:before,
.drop-down-panel .button:active:before {
  content: none;
}
.drop-down-panel .open-anchor {
  position: absolute;
  bottom: 0;
  right: 0;
}
.drop-down-panel .open-anchor .drop-down-panel-container {
  z-index: 9;
  position: absolute;
  top: 0;
  display: none;
}
.drop-down-panel .open-anchor .drop-down-panel-container.open {
  display: block;
  left: -20px;
}
.drop-down-panel .open-anchor .drop-down-panel-container.open:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.drop-down-panel .open-anchor .drop-down-panel-container.open:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.drop-down-panel .open-anchor .drop-down-panel-container.open:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.drop-down-panel .open-anchor .drop-down-panel-container.open:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.drop-down-menu.drop-down-panel {
  display: inline-block;
}
.drop-down-menu.drop-down-panel .drop-down-panel .preview-element-container .preview-element {
  display: block;
  width: 24px;
  height: 18px;
  border-style: solid;
  border-color: #2C2C2C;
  border-width: 1px 0 1px 1px;
  background-color: white;
}
.drop-down-menu.drop-down-panel .drop-down-panel .preview-element-container .preview-element .icon {
  width: 100%;
  height: 100%;
}
.drop-down-slider {
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
}
.drop-down-slider input[type="number"] {
  display: inline-block;
  font-size: 11px;
  color: white;
  box-sizing: border-box;
  border-left: 1px solid #2C2C2C;
  border-top: 1px solid #2C2C2C;
  border-bottom: 1px solid #2C2C2C;
  border-right: none;
  padding: 1px;
  height: 20px;
  width: 40px;
  vertical-align: middle;
  background-color: #3A3A3A;
  border-radius: 3px 0 0 3px;
}
.drop-down-slider input[type="number"]:focus {
  outline: none;
}
.drop-down-slider .button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-top: 1px solid #2C2C2C;
  border-bottom: 1px solid #2C2C2C;
  border-right: 1px solid #2C2C2C;
  border-left: 1px solid #2C2C2C;
  background: linear-gradient(180deg, #757575 0%, #626262 100%);
  border-radius: 0 3px 3px 0;
  box-sizing: border-box;
  padding: 1px;
}
.drop-down-slider .button:before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 3px 3px 0;
  pointer-events: none;
}
.drop-down-slider .button:focus {
  outline: none;
}
.drop-down-slider .button .icon.arrow-down-mini {
  color: #e4e4e4;
  width: 6px;
  height: 6px;
}
.drop-down-slider.visible .button,
.drop-down-slider .button:active {
  background: #3A3A3A;
}
.drop-down-slider.visible .button .icon.arrow-down-mini,
.drop-down-slider .button:active .icon.arrow-down-mini {
  position: relative;
  top: 1px;
}
.drop-down-slider.visible .button:before,
.drop-down-slider .button:active:before {
  content: none;
}
.drop-down-slider .drop-down {
  display: none;
}
.drop-down-slider .drop-down.visible {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 2;
  display: block;
  background-color: #535353;
  height: 13px;
  padding: 4px;
  margin: 0;
  width: inherit;
  padding-bottom: 8px;
}
.drop-down-slider .drop-down.visible:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.drop-down-slider .drop-down.visible:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.drop-down-slider .drop-down.visible:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.drop-down-slider .drop-down.visible:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.drop-down-slider .drop-down input[type="range"] {
  margin: 0;
}
.color-picker-mini {
  width: 200px;
  height: 91px;
  background-color: #535353;
}
.color-picker-mini .ramp {
  cursor: url(../lib/libui/assets/cursors/colorpicker.cur), auto;
}
.color-picker-mini .container-top {
  display: flex;
  flex-direction: row;
}
.color-picker-mini .container-top .container-selectors {
  position: relative;
  width: 40px;
  height: 40px;
}
.color-picker-mini .container-top .container-selectors .parameter-color:nth-child(1) {
  position: absolute;
  border-radius: 0;
  border: 1px solid gray;
  right: 5px;
  bottom: 5px;
  width: 18px;
  height: 18px;
}
.color-picker-mini .container-top .container-selectors .parameter-color:nth-child(1) .color-selector {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: none;
}
.color-picker-mini .container-top .container-selectors .parameter-color:nth-child(1):after {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border: 1px solid white;
}
.color-picker-mini .container-top .container-selectors .parameter-color:nth-child(2) {
  position: absolute;
  border-radius: 0;
  border: 1px solid gray;
  left: 5px;
  top: 5px;
  width: 18px;
  height: 18px;
}
.color-picker-mini .container-top .container-selectors .parameter-color:nth-child(2) .color-selector {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: none;
}
.color-picker-mini .container-top .container-selectors .parameter-color:nth-child(2):after {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border: 1px solid white;
}
.color-picker-mini .container-top .container-selectors.primary-active .parameter-color:nth-child(2) {
  border: 1px solid black;
}
.color-picker-mini .container-top .container-selectors.secondary-active .parameter-color:nth-child(1) {
  border: 1px solid black;
}
.color-picker-mini .parameter-item.parameter-number-input input[type="number"] {
  width: 2em;
}
#panel-windows {
  position: absolute;
  top: 51px;
  bottom: 0;
  left: 0;
  right: 0;
}
.StrokePanel {
  width: 300px;
  padding: 4px;
  background-color: #535353;
}
.StrokePanel .form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.StrokePanel .form-row .parameter-item.parameter-number-slider {
  width: 100%;
  margin: 12px;
}
a.toggle-button {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 1px;
  border: none;
  justify-content: center;
  align-items: center;
}
a.toggle-button.checked {
  background: linear-gradient(0deg, #3F3F3F 0%, #373737 100%);
}
a.toggle-button.checked:before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  pointer-events: none;
}
a.toggle-button.checked:after {
  content: " ";
  position: absolute;
  z-index: 1;
  top: -0.5px;
  left: 0;
  right: 0;
  bottom: -0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 1px;
  pointer-events: none;
}
a.toggle-button svg.icon {
  width: 20px;
  height: 20px;
}
.command-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 3px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 3px;
}
.command-item:not(.flat) {
  color: #e4e4e4;
  border: 1px solid #222;
  background: linear-gradient(180deg, #727272 0%, #606060 100%);
}
.command-item:not(.flat):before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.command-item:not(.flat):after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.command-item:not(.flat):before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.command-item:not(.flat):after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
}
.command-item:hover {
  border: 1px solid #222;
  background: linear-gradient(180deg, #828282 0%, #707070 100%);
}
.command-item:active {
  border: 1px solid #222;
  background: linear-gradient(180deg, #3A3A3A 0%, #383838 100%);
}
.command-item:active:before {
  content: " ";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.command-item:active:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.command-item:active:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  pointer-events: none;
}
.command-item:active:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  pointer-events: none;
}
.command-item:active > svg.icon {
  color: #e4e4e4;
}
.command-item.disabled,
.command-item:hover.disabled,
.command-item:active.disabled {
  border: 1px solid transparent;
  background: transparent;
  opacity: 0.5;
}
.command-item.disabled:not(.flat),
.command-item:hover.disabled:not(.flat),
.command-item:active.disabled:not(.flat) {
  background: linear-gradient(180deg, #727272 0%, #606060 100%);
}
.command-item > div {
  display: flex;
}
.command-item .icon {
  width: 17px;
  height: 17px;
}
.ParagraphPanel {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #535353;
}
.ParagraphPanel .form-row {
  padding: 3px 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ParagraphPanel .form-row.spacer {
  margin-top: 10px;
}
.ParagraphPanel .paragraph-row {
  border-bottom: 1px solid #383838;
}
.ParagraphPanel .paragraph-row .drop-down-slider {
  margin: 0 5px 0 5px;
}
.ParagraphPanel .paragraph-row a.toggle-button {
  width: 24px;
  height: 24px;
}
.ParagraphPanel .paragraph-row .icon.paragraph-left,
.ParagraphPanel .paragraph-row .icon.paragraph-center,
.ParagraphPanel .paragraph-row .icon.paragraph-right,
.ParagraphPanel .paragraph-row .icon.paragraph-justify-last-left,
.ParagraphPanel .paragraph-row .icon.paragraph-justify-last-center,
.ParagraphPanel .paragraph-row .icon.paragraph-justify-last-right,
.ParagraphPanel .paragraph-row .icon.paragraph-justify-all,
.ParagraphPanel .paragraph-row .icon.paragraph-margin-left,
.ParagraphPanel .paragraph-row .icon.paragraph-margin-right,
.ParagraphPanel .paragraph-row .icon.paragraph-space-before,
.ParagraphPanel .paragraph-row .icon.paragraph-space-after,
.ParagraphPanel .paragraph-row .icon.paragraph-indent-first-line {
  width: 24px;
  height: 24px;
}
.ParagraphPanel .paragraph-row .group {
  display: flex;
  justify-content: center;
  align-items: center;
}
.FontChooser .font-item {
  width: 100%;
  padding: 2px 10px 2px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.CharacterPanel {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #535353;
}
.CharacterPanel .form-row {
  padding: 2px 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.CharacterPanel .form-row.spacer {
  margin-top: 10px;
}
.CharacterPanel .font-family-row {
  padding: 7px 2px;
  justify-content: space-around;
  border-bottom: 1px solid #383838;
}
.CharacterPanel .font-family-row .parameter-item:first-child .drop-down-panel .preview-text-container {
  width: 90px;
  justify-content: flex-start;
}
.CharacterPanel .character-row {
  border-bottom: 1px solid #383838;
}
.CharacterPanel .character-row .drop-down-slider {
  margin: 0 5px 0 5px;
}
.CharacterPanel .character-row .icon.character-size,
.CharacterPanel .character-row .icon.character-leading,
.CharacterPanel .character-row .icon.character-tracking,
.CharacterPanel .character-row .icon.character-kerning,
.CharacterPanel .character-row .icon.character-vertical-scaling,
.CharacterPanel .character-row .icon.character-horizontal-scaling,
.CharacterPanel .character-row .icon.character-baseline-shift {
  width: 24px;
  height: 24px;
}
.CharacterPanel .character-row .group {
  display: flex;
  justify-content: center;
  align-items: center;
}
.CharacterPanel .parameter-item .color-selector-container {
  position: relative;
}
.CharacterPanel .parameter-item .color-selector-container .color-selector {
  width: 25px;
  height: 15px;
  border: 1px solid black;
  margin: 0 10px 0 10px;
}
.CharacterPanel .parameter-item .color-selector-container .photoshop-picker-container {
  position: absolute;
  z-index: 1;
  right: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.5s height, 0.5s opacity;
}
.CharacterPanel .parameter-item .color-selector-container .photoshop-picker-container.visible {
  height: 320px;
  opacity: 1;
}
.CharacterPanel .character-style-row {
  padding: 5px;
}
.panel-navigator {
  background-color: #535353;
  width: 100%;
  height: 100%;
}
.panel-navigator .canvas-container {
  position: absolute;
  width: 100%;
  height: calc(100% - 22px);
  margin-bottom: 22px;
  cursor: url("../lib/libui/assets/cursors/pointer.png") 5 1, auto;
}
.panel-navigator .canvas-container.grabbing {
  cursor: url("../lib/libui/assets/cursors/drag.png") 8 4, auto;
}
.panel-navigator canvas.viewport {
  position: absolute;
  padding: 5px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.panel-navigator canvas.thumbnail {
  position: absolute;
  padding: 5px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.panel-navigator .toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-navigator .toolbar .parameter-number-input {
  margin-left: 1px;
}
.panel-navigator .toolbar .parameter-number-input input[type="number"] {
  width: 3em;
  font-size: 9px;
  height: 16px;
  margin-bottom: 1px;
}
.panel-navigator .toolbar div.slider-container {
  display: flex;
  flex-grow: 1;
  align-items: center;
  margin-right: 3px;
}
.panel-navigator .toolbar div.slider-container .parameter-number-slider {
  display: flex;
  flex-grow: 1;
  margin: 0 10px;
}
.panel-navigator .toolbar div.slider-container .icon.mountains.small {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 10px;
}
.panel-navigator .toolbar div.slider-container .icon.mountains.large {
  position: relative;
  top: -1px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
}
.HistoryPanel .item-container {
  overflow-y: scroll;
  background-color: #535353;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  user-select: none;
  cursor: pointer;
}
.HistoryPanel .item-container .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 7px;
  height: 10px;
}
.HistoryPanel .item-container .item .icon {
  color: #e4e4e4;
  width: 20px;
  height: 20px;
  padding-right: 6px;
}
.HistoryPanel .item-container .item .label {
  color: #e4e4e4;
}
.HistoryPanel .item-container .item.active {
  background-color: #636363;
  color: #EEE;
}
.HistoryPanel .item-container .item.redo {
  opacity: 0.5;
}
.HistoryPanel .item-container .item.redo .label {
  font-style: italic;
  font-weight: normal;
}
.HistoryPanel .toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25px;
  background-color: #f4f4f4;
}
.ShapePanel {
  background-color: #f4f4f4;
  padding: 4px;
}
.ShapePanel .shape-item-container {
  border-left: 1px solid lightgray;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
}
.ShapePanel .shape-item-container > div {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  overflow-y: scroll;
}
.ShapePanel .shape-item-container > div .shape-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 2px 0 0;
  width: 32px;
  height: 32px;
  background-color: #F8F8F8;
  border-left: 1px solid white;
  border-top: 1px solid white;
  border-right: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}
.ShapePanel .shape-item-container > div .shape-item.selected {
  background-color: #3399ff;
}
.panel-color {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: initial;
  width: 415px;
}
.panel-color .head {
  background-image: linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%);
  border-bottom: 1px solid #B1B1B1;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 0 rgba(0, 0, 0, 0.02);
  height: 23px;
  line-height: 24px;
  border-radius: 4px 4px 0 0;
  font-size: 13px;
  color: #4D4D4D;
  text-align: center;
}
.panel-color .body {
  padding: 3px;
  display: flex;
}
.panel-color .body .saturation-container {
  width: 256px;
  height: 256px;
  position: relative;
  overflow: hidden;
}
.panel-color .body .hue-container {
  position: relative;
  height: 256px;
  width: 19px;
  margin-left: 10px;
}
.panel-color .body .controls {
  width: 50px;
  margin-left: 10px;
}
.panel-color .body .controls .top {
  display: flex;
}
.panel-color .body .controls .top .previews {
  width: 60px;
}
.panel-color .body .controls .top .previews .swatches {
  border: 1px solid #B3B3B3;
  border-bottom: 1px solid #F0F0F0;
  margin-bottom: 2px;
  margin-top: 1px;
}
.panel-color .body .controls .top .previews .swatches .new {
  height: 34px;
  box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;
}
.panel-color .body .controls .top .previews .swatches .current {
  height: 34px;
  box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;
}
.panel-color .body .controls .top .previews .label {
  font-size: 14px;
  color: #000;
  text-align: center;
}
.panel-color .body .actions {
  flex: 1;
  margin-left: 20px;
}
.panel-color .body .actions .button {
  background-image: linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);
  border: 1px solid #878787;
  border-radius: 2px;
  height: 20px;
  box-shadow: 0 1px 0 0 #EAEAEA;
  font-size: 14px;
  color: #000;
  line-height: 20px;
  text-align: center;
  margin-bottom: 10px;
}
.panel-color .body .actions .accept-button {
  background-image: linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);
  border: 1px solid #878787;
  border-radius: 2px;
  height: 20px;
  box-shadow: 0 1px 0 0 #EAEAEA;
  font-size: 14px;
  color: #000;
  line-height: 20px;
  text-align: center;
  margin-bottom: 10px;
  box-shadow: 0 0 0 1px #878787;
}
.panel-color .fields {
  padding-top: 5px;
  padding-bottom: 9px;
  width: 80px;
  position: relative;
}
.panel-color .fields .divider {
  height: 5px;
}
.panel-color .fields .parameter-item.parameter-number-input input {
  width: 3em;
}
.panel-color .fields .parameter-item.parameter-string-input input {
  width: 6em;
}
.panel-color .fields .fieldSymbols {
  position: absolute;
  top: 5px;
  right: -7px;
  font-size: 13px;
}
.panel-color .fields .symbol {
  height: 20px;
  line-height: 22px;
  padding-bottom: 7px;
}
.panel-color .saturation {
  width: 256px;
  height: 256px;
}
.panel-color .saturation .color {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.panel-color .saturation .color .white {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.panel-color .saturation .color .white .black {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.panel-color .saturation .color .white .pointer {
  position: absolute;
  cursor: default;
}
.panel-color .saturation .circle {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  cursor: hand;
  transform: translate(-2px, -2px);
}
.panel-color .hue {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.panel-color .hue .container {
  margin: 0 2px;
  position: relative;
  height: 100%;
}
.panel-color .hue .pointer {
  z-index: 2;
  position: absolute;
}
.panel-color .hue .pointer .slider {
  margin-top: 1px;
  width: 4px;
  border-radius: 1px;
  height: 8px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  background: #fff;
  transform: translateX(-2px);
}
.panel-color .hue.direction-vertical {
  background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.panel-color .hue .pointer {
  left: 0;
}
.panel-color .pointer .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1px;
  left: 1px;
}
.panel-color .pointer .triangleBorder {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #555;
}
.panel-color .pointer .leftInside {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1px;
  left: 1px;
  transform: translate(-8px, -5px);
}
.panel-color .pointer .rightInside {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1px;
  left: 1px;
  transform: translate(-8px, -5px);
}
.panel-color .pointer .left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #555;
  transform: translate(-13px, -4px);
}
.panel-color .pointer .right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #555;
  transform: translate(20px, -14px) rotate(180deg);
}
.panel-color .picker {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #fff;
  transform: translate(-6px, -6px);
}
.panel-color .black-outline .picker {
  box-shadow: inset 0 0 0 1px #000;
}
.PanelPattern {
  padding: 4px;
  display: flex;
  background-color: #535353;
}
.PanelPattern:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelPattern:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelPattern:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelPattern:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelPattern .pattern-item-container {
  background-color: #535353;
  width: 300px;
  height: 300px;
  padding: 5px;
}
.PanelPattern .pattern-item-container > div {
  height: 100%;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: scroll;
}
.PanelPattern .pattern-item-container > div .pattern-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 2px 0 0;
  width: 32px;
  height: 32px;
}
.PanelPattern .pattern-item-container > div .pattern-item.selected {
  background-color: #636363;
}
.PanelContour {
  background-color: #535353;
  padding: 4px;
  width: 240px;
}
.PanelContour:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelContour:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelContour:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelContour:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelContour .contour-item-container > div {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
}
.PanelContour .contour-item-container > div .contour-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 2px 0 0;
  width: 32px;
  height: 32px;
}
.PanelContour .contour-item-container > div .contour-item.selected {
  background-color: #636363;
}
.PanelGradient {
  padding: 4px;
  display: flex;
  background-color: #535353;
}
.PanelGradient:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelGradient:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelGradient:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelGradient:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.PanelGradient .gradient-item-container {
  background-color: #535353;
  width: 300px;
  height: 300px;
  padding: 5px;
}
.PanelGradient .gradient-item-container > div {
  height: 100%;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: scroll;
}
.PanelGradient .gradient-item-container > div .gradient-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 2px 0 0;
  width: 29px;
  height: 29px;
}
.PanelGradient .gradient-item-container > div .gradient-item.selected {
  background-color: #636363;
}
.panel-brush {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #535353;
}
.panel-brush .config-selector {
  border: 1px solid #333;
  position: absolute;
  top: 10px;
  margin: -4px 0 4px 5px;
  width: 125px;
  bottom: 88px;
}
.panel-brush .config-selector ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.panel-brush .config-selector ul li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #333;
}
.panel-brush .config-selector ul li.separator {
  margin: 5px 0 5px 0;
}
.panel-brush .config-selector ul li .parameter-bool-checkbox {
  display: inline;
}
.panel-brush .config-selector ul li.active {
  background-color: #636363;
  color: #e4e4e4;
}
.panel-brush .config-selector ul li.no-border {
  border-bottom: none;
}
.panel-brush .config-selector ul li label#blending {
  padding: 5px;
  padding-left: 10px;
}
.panel-brush .config-selector ul li label {
  margin-left: 3px;
  display: inline-block;
  padding: 3px 3px 3px 0px;
}
.panel-brush .config-selector ul li input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0 0 0 3px;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
.panel-brush .config {
  position: absolute;
  left: 135px;
  right: 3px;
  top: 5px;
  bottom: 88px;
}
.panel-brush .config fieldset legend {
  font-weight: bold;
}
.panel-brush .config .configuration {
  display: none;
  width: 100%;
  height: 100%;
  margin-top: 5px;
}
.panel-brush .config .configuration.visible {
  display: block;
}
.panel-brush .config .configuration .parameter-preset-brush {
  height: calc(100% - 50px);
}
.panel-brush .config .configuration .parameter-preset-brush .panel-preset-brush {
  height: 100%;
}
.panel-brush .config .configuration > .parameter-item {
  margin: 0 0 5px 0;
}
.panel-brush .config .configuration .parameter-item.parameter-number-slider {
  display: block;
  width: 100%;
}
.panel-brush .config .configuration .parameter-item.parameter-number-slider .row1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.panel-brush .config .configuration .parameter-item.parameter-number-slider .row2 > input {
  width: 100%;
}
.panel-brush .config .configuration .parameter-enum-select select {
  font-size: 12px;
}
.panel-brush .config .configuration .pattern-container {
  display: flex;
}
.panel-brush .config .configuration .pattern-container .parameter-bool-checkbox {
  margin-left: 10px;
}
.panel-brush .config .configuration .flip-jitter-container {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.panel-brush .config .configuration .scatter-container {
  position: relative;
  margin: 5px 0 5px 0;
}
.panel-brush .config .configuration .scatter-container .parameter-bool-checkbox {
  position: absolute;
  left: 70px;
}
.panel-brush .config .configuration .parameter-variation-control {
  padding-bottom: 10px;
  margin-bottom: 3px;
}
.panel-brush .config .configuration .parameter-variation-control .parameter-item.parameer-number-slider {
  margin-bottom: 4px;
}
.panel-brush .config .configuration .parameter-variation-control .row-control {
  display: flex;
  justify-content: space-between;
}
.panel-brush .config .configuration .parameter-variation-control .row-control select {
  font-size: 12px;
  width: 70px;
}
.panel-brush .config .configuration .parameter-variation-control .row-control input {
  font-size: 10px;
}
.panel-brush .preview {
  background-color: #4e4e4e;
  box-sizing: content-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  margin: 4px;
}
.panel-brush .preview:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.panel-brush .preview:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.panel-brush-tip {
  height: 150px;
  overflow-y: scroll;
  line-height: 0;
}
.panel-brush-tip .brush-tip-item {
  cursor: url("../lib/assets/cursors/pointer.png") 5 1, auto;
  position: relative;
  display: inline-block;
  border: 1px solid black;
  width: 32px;
  height: 32px;
  background-color: #333;
}
.panel-brush-tip .brush-tip-item.selected {
  color: #EEE;
  background-color: #3399ff;
}
.panel-brush-tip .brush-tip-item .image {
  position: absolute;
  filter: invert(1);
  top: 0;
  left: 4px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.panel-brush-tip .brush-tip-item .label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  line-height: normal;
  font-size: 8px;
  font-weight: bold;
}
.panel-preset-brush {
  height: 300px;
  width: 100%;
  display: flex;
}
.panel-preset-brush .brush-preset-item-container {
  flex-grow: 1;
  height: 100%;
  overflow-y: scroll;
  background-color: #535353;
  line-height: 0;
}
.panel-preset-brush .brush-preset-item-container > div .brush-preset-item {
  cursor: url("../lib/libui/assets/cursors/pointer.png") 5 1, auto;
  display: flex;
  border-bottom: 1px solid #383838;
  width: 100%;
  height: 32px;
}
.panel-preset-brush .brush-preset-item-container > div .brush-preset-item.selected {
  color: #e4e4e4;
}
.panel-preset-brush .brush-preset-item-container > div .brush-preset-item .thumbnail {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
}
.panel-preset-brush .brush-preset-item-container > div .brush-preset-item .thumbnail .image {
  position: absolute;
  top: 0;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.panel-preset-brush .brush-preset-item-container > div .brush-preset-item .thumbnail .label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  line-height: normal;
  font-size: 8px;
  font-weight: bold;
  color: #e4e4e4;
}
.panel-preset-brush .brush-preset-item-container > div .brush-preset-item .label {
  line-height: 32px;
}
.panel-preset-brush .brush-preset-button-container {
  padding: 0 3px;
}
.panel-swatches {
  padding: 4px;
  display: flex;
  background-color: #535353;
}
.panel-swatches:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-swatches:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-swatches:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-swatches:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-swatches .swatch-item-container {
  background-color: #535353;
  width: 300px;
  height: 300px;
  padding: 5px;
}
.panel-swatches .swatch-item-container > div {
  height: 100%;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: scroll;
}
.panel-swatches .swatch-item-container > div .swatch-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px 1px 0 0;
  width: 16px;
  height: 16px;
}
.panel-swatches .swatch-item-container > div .swatch-item.selected {
  background-color: #636363;
}
.panel-styles {
  height: 100%;
  display: flex;
  background-color: #535353;
}
.panel-styles .style-item-container {
  background-color: #535353;
  width: 100%;
}
.panel-styles .style-item-container > div {
  height: 100%;
  width: 100%;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: scroll;
}
.panel-styles .style-item-container > div .style-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 2px 0 0;
  width: 32px;
  height: 32px;
}
.panel-styles .style-item-container > div .style-item.selected {
  background-color: #636363;
}
.panel-custom-shape {
  padding: 4px;
  display: flex;
  background-color: #535353;
}
.panel-custom-shape .custom-shape-item-container {
  background-color: #535353;
  height: 300px;
  width: 300px;
  padding: 5px;
}
.panel-custom-shape .custom-shape-item-container > div {
  height: 100%;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: scroll;
}
.panel-custom-shape .custom-shape-item-container > div .custom-shape-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 2px 0 0;
  width: 32px;
  height: 32px;
}
.panel-custom-shape .custom-shape-item-container > div .custom-shape-item.selected {
  background-color: #636363;
}
.panel-warp {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #535353;
  padding: 4px;
}
.panel-warp .parameter-item {
  margin: 10px 0;
}
.panel-warp .parameter-warp-style {
  align-items: center;
}
.panel-warp .parameter-warp-style label {
  margin-right: 10px;
}
.panel-warp .parameter-enum-radio {
  display: inline-flex;
  justify-content: center;
}
.panel-warp .parameter-enum-radio label {
  display: inline-flex;
}
.panel-warp .parameter-number-slider {
  display: block;
}
.panel-warp .parameter-number-slider .row1 {
  display: flex;
  justify-content: space-between;
}
.context-menu {
  z-index: 100;
  display: none;
  background-color: #535353;
  margin: 0;
  box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
}
.context-menu.open {
  display: block;
}
ul.menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  cursor: default;
  border: 1px solid #3a3a3a;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  background: #535353;
}
ul.menu .icon {
  width: 18px;
  height: 18px;
}
ul.menu .submenu-indicator {
  float: right;
  margin-right: 5px;
}
ul.menu li.toggle-true > .label:before {
  font-weight: bold;
  margin-right: 4px;
  content: "\2713";
}
ul.menu li.toggle-false > .label:before {
  font-weight: bold;
  margin-right: 4px;
  content: "\2713";
  opacity: 0;
}
ul.menu li.disabled,
ul.menu.disabled:hover {
  opacity: 0.45;
  background-color: transparent;
}
ul.menu li.separator {
  list-style-type: none;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-right: 10px;
  margin-left: 10px;
  height: 1px;
  background-color: #383838;
}
ul.menu li.menu-item {
  display: flex;
  justify-content: space-between;
  list-style: none;
  min-width: 200px;
  height: 20px;
  line-height: 20px;
  color: #cecece;
  font-size: 12px;
  padding: 4px 4px 4px 4px;
}
ul.menu li.menu-item.active {
  color: #e4e4e4;
}
ul.menu li.menu-item .shortcut {
  color: #e4e4e4;
  float: right;
  margin-right: 7px;
}
ul.menu li.menu-item .shortcut .modifier,
ul.menu li.menu-item .shortcut .key {
  padding: 2px;
  border-radius: 2px;
  margin-right: 4px;
  background-color: #444444;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
ul.menu li.menu-item .label {
  display: flex;
  justify-content: flex-start;
  padding-left: 10px;
  padding-right: 10px;
  pointer-events: none;
  white-space: nowrap;
}
ul.menu li.menu-item .label .icon {
  margin-right: 10px;
}
ul.menu li.menu-item:hover {
  background-color: #636363;
}
ul.menu li.menu-item:hover > span {
  color: #e4e4e4;
}
ul.menu li.menu-item a {
  color: #a5a5a5;
  text-decoration: none;
}
ul.menu > li.menu-item {
  position: relative;
}
ul.menu > li.menu-item ul.menu {
  position: absolute;
  top: -3px;
  left: 97%;
}
ul.menu > li.menu-item ul.menu > li.menu-item {
  position: relative;
  min-width: 200px;
  display: flex;
  list-style-type: none;
  cursor: default;
}
ul.menu-bar {
  margin: 0;
  padding: 0;
  color: #e4e4e4;
}
ul.menu-bar .label {
  display: flex;
  justify-content: flex-start;
  padding-left: 10px;
  padding-right: 10px;
  pointer-events: none;
  white-space: nowrap;
}
ul.menu-bar .label .icon {
  margin-right: 10px;
}
ul.menu-bar li.disabled,
ul.menu-bar.disabled:hover {
  opacity: 0.45;
  background-color: transparent;
}
ul.menu-bar li:hover,
ul.menu-bar li.open {
  background-color: #636363;
}
ul.menu-bar li:hover > span,
ul.menu-bar li.open > span {
  color: #e4e4e4;
}
ul.menu-bar > li.menu-item {
  display: inline-block;
  list-style-type: none;
  cursor: default;
  height: 20px;
  line-height: 20px;
}
ul.menu-bar > li.menu-item > ul.menu {
  display: none;
}
ul.menu-bar > li.menu-item.open > ul.menu {
  display: block;
}
ul.menu-bar ul.menu {
  z-index: 10;
  margin: 0;
  padding: 0;
  position: absolute;
}
.modal-overlay {
  width: 100%;
  height: 100%;
}
.modal {
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  background-color: #535353;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}
.modal .decoration {
  background-color: rgba(222, 222, 222, 0.76);
  box-sizing: border-box;
  width: 100%;
  height: 26px;
  padding: 5px;
}
.modal .decoration .title {
  font-size: 14px;
  line-height: 17px;
  color: #333333;
  cursor: default;
}
.modal .decoration .button-close {
  position: absolute;
  border: none;
  right: 3px;
  box-shadow: none;
  top: 3px;
}
.modal .decoration .button-close .icon.delete {
  width: 20px;
  height: 20px;
}
.modal .content-container {
  top: 26px;
  background-color: #f4f4f4;
  padding: 5px;
}
.modal .content-container {
  background-color: #535353;
}
#dialog-fill .dialog-content,
#dialog-stroke .dialog-content {
  display: flex;
  flex-direction: row;
}
#dialog-fill .dialog-content .button-bar-container,
#dialog-stroke .dialog-content .button-bar-container {
  padding: 12px;
  width: 100px;
}
#dialog-fill .dialog-content .button-bar-container button,
#dialog-stroke .dialog-content .button-bar-container button {
  width: 100%;
  margin-bottom: 12px;
  display: block;
  box-sizing: border-box;
}
#dialog-enter-value {
  min-width: 200px;
  min-height: 100px;
}
#dialog-enter-value .content-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
}
#dialog-enter-value .content-container .parameter-number-input input {
  max-width: 100px;
}
#dialog-enter-value .content-container .button-bar-container {
  width: 100px;
}
#dialog-color-picker {
  min-width: 514px;
  min-height: 320px;
}
#dialog-color-picker .photoshop-picker {
  box-shadow: none;
}
#dialog-create-item {
  min-width: 300px;
  min-height: 100px;
}
#dialog-create-item input {
  margin: 10px;
}
#dialog-create-item .button-bar-container {
  height: 50px;
  display: flex;
  padding-right: 10px;
}
#dialog-create-item .button-bar-container button {
  margin-left: 20px;
}
#dialog-editor-contour {
  min-width: 375px;
  min-height: 420px;
}
#dialog-editor-contour .dialog-content {
  padding: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
}
#dialog-editor-contour .dialog-content .presets {
  margin: 9px 0px 9px 12px;
}
#dialog-editor-contour .dialog-content .horizontal-content {
  display: flex;
}
#dialog-editor-contour .dialog-content .horizontal-content .editor-curve {
  width: 260px;
}
#dialog-editor-contour .dialog-content .horizontal-content .button-bar-container {
  width: 110px;
  padding: 10px;
  text-align: center;
}
#dialog-editor-contour .dialog-content .horizontal-content .button-bar-container > button {
  margin-bottom: 7px;
  width: 100%;
}
#dialog-editor-contour .controls td {
  width: 140px;
}
#dialog-editor-contour .controls td input[type=number] {
  width: 4em;
}
#dialog-editor-gradient {
  min-width: 425px;
  min-height: 321px;
}
#dialog-editor-gradient .container-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
#dialog-editor-gradient .container-top .button-bar-container {
  width: 86px;
  text-align: center;
}
#dialog-editor-gradient .container-top .button-bar-container > button {
  margin-bottom: 7px;
  width: 100%;
}
#dialog-editor-gradient .dialog-content {
  padding: 10px;
  width: 400px;
  bottom: 10px;
}
#dialog-editor-gradient .dialog-content .presets {
  margin: 9px 0px 9px 12px;
}
#dialog-adjustment .dialog-content,
#dialog-fill-style .dialog-content {
  display: flex;
  flex-direction: row;
}
#dialog-adjustment .dialog-content .button-bar-container,
#dialog-fill-style .dialog-content .button-bar-container {
  padding: 12px;
  width: 100px;
}
#dialog-adjustment .dialog-content .button-bar-container button,
#dialog-fill-style .dialog-content .button-bar-container button {
  width: 100%;
  margin-bottom: 12px;
  display: block;
  box-sizing: border-box;
}
#dialog-new {
  width: 500px;
  height: 257px;
}
#dialog-new input:invalid {
  border: 1px solid red;
}
#dialog-new .dialog-content {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}
#dialog-new .dialog-content #name-container .parameter-string-input {
  display: table;
  width: 100%;
}
#dialog-new .dialog-content #name-container .parameter-string-input label {
  display: table-cell;
  text-align: right;
  padding-right: 10px;
}
#dialog-new .dialog-content #name-container .parameter-string-input input {
  display: table-cell;
  width: 100%;
  box-sizing: border-box;
}
#dialog-new .dialog-content fieldset {
  margin-top: 10px;
}
#dialog-new .panel-new table td {
  padding: 4px;
}
#dialog-new .panel-new table td .parameter-enum-select select {
  width: 100%;
}
#dialog-new .panel-new table td:nth-child(2) input {
  width: 8em;
}
#dialog-new .button-bar-container {
  padding: 0 12px;
  width: 100px;
}
#dialog-new .button-bar-container button {
  width: 100%;
  margin-bottom: 6px;
  display: block;
  box-sizing: border-box;
}
#dialog-canvas-size {
  width: 500px;
}
#dialog-canvas-size input:invalid {
  border: 1px solid red;
}
#dialog-canvas-size .dialog-content {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}
#dialog-canvas-size .button-bar-container {
  padding: 0 12px;
  width: 100px;
}
#dialog-canvas-size .button-bar-container button {
  width: 100%;
  margin-bottom: 6px;
  display: block;
  box-sizing: border-box;
}
#dialog-canvas-rotate {
  width: 400px;
}
#dialog-canvas-rotate input:invalid {
  border: 1px solid red;
}
#dialog-canvas-rotate .dialog-content {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}
#dialog-canvas-rotate .dialog-content td {
  padding-top: 10px;
}
#dialog-canvas-rotate .button-bar-container {
  padding: 0 12px;
  width: 100px;
}
#dialog-canvas-rotate .button-bar-container button {
  width: 100%;
  margin-bottom: 6px;
  display: block;
  box-sizing: border-box;
}
#dialog-image-size {
  width: 477px;
}
#dialog-image-size input:invalid {
  border: 1px solid red;
}
#dialog-image-size .dialog-content {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}
#dialog-image-size .dialog-content tr td:first-child {
  width: 70px;
}
#dialog-image-size .dialog-content tr td:nth-child(2) {
  width: 70px;
}
#dialog-image-size .dialog-content tr td:nth-child(3) {
  width: 84px;
}
#dialog-image-size .button-bar-container {
  padding: 0 12px;
  width: 100px;
}
#dialog-image-size .button-bar-container button {
  width: 100%;
  margin-bottom: 6px;
  display: block;
  box-sizing: border-box;
}
#dialog-layer-new {
  width: 477px;
}
#dialog-layer-new .dialog-content {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}
#dialog-layer-new .dialog-content tr td {
  padding: 4px;
}
#dialog-layer-new .dialog-content tr td:first-child {
  width: 70px;
}
#dialog-layer-new .dialog-content .parameter-string-input input {
  width: 100%;
}
#dialog-layer-new .dialog-content .parameter-bool-checkbox {
  width: 160px;
}
#dialog-layer-new .button-bar-container {
  padding: 0 12px;
  width: 100px;
}
#dialog-layer-new .button-bar-container button {
  width: 100%;
  margin-bottom: 6px;
  display: block;
  box-sizing: border-box;
}
#dialog-color .dialog-content {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}
#dialog-color .button-bar-container {
  padding: 20px;
  width: 100px;
}
#dialog-color .button-bar-container button {
  width: 100%;
  margin-bottom: 6px;
  display: block;
  box-sizing: border-box;
}
#dialog-path-save .dialog-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
}
#dialog-path-save .dialog-content input[type="text"] {
  min-width: 200px;
}
#dialog-path-save .button-bar-container {
  padding: 10px;
  width: 100px;
}
#dialog-path-save .button-bar-container button {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
#dialog-warp .dialog-content {
  display: flex;
}
#dialog-warp .dialog-content .button-bar-container {
  width: 100px;
}
#dialog-apply-cancel {
  width: 350px;
}
#dialog-apply-cancel .button-bar-container {
  display: flex;
  flex-direction: row-reverse;
}
#dialog-apply-cancel .button-bar-container button {
  margin: 12px;
  width: 100%;
  margin-bottom: 12px;
  display: block;
  box-sizing: border-box;
}
#dialog-splash {
  width: 800px;
  height: 420px;
  box-shadow: none;
}
#dialog-splash .decoration {
  display: none;
}
#dialog-splash .content-container {
  top: 0;
  background-color: #333;
  position: relative;
  height: 418px;
  padding: 0;
}
#dialog-splash .content-container .dialog-content .progress-bar-container {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
}
#dialog-splash .content-container .dialog-content canvas {
  opacity: 0;
  transition: 2s all;
}
#dialog-splash .content-container .dialog-content canvas.visible {
  opacity: 1;
}
#dialog-splash .content-container .version-info-container {
  position: absolute;
  color: white;
  right: 5px;
  top: 5px;
}
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
#dialog-splash .content-container .button-bar-container {
  position: absolute;
  bottom: 33px;
  right: 5px;
  padding: 0 12px;
  width: 100px;
}
#dialog-splash .content-container .button-bar-container button {
  transition: 1s all;
  width: 100%;
  margin-bottom: -10px;
  display: block;
  box-sizing: border-box;
}
#dialog-splash .content-container .button-bar-container button.loading {
  background-color: black;
}
#dialog-splash .content-container .button-bar-container button.loaded {
  animation: pulse 2s infinite;
}
#dialog-exception {
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 400px;
  overflow: hidden;
  resize: both;
}
#dialog-exception .decoration {
  flex: 0 1 26px;
}
#dialog-exception .content-container {
  display: flex;
  flex: 1 1 auto;
  padding-left: 16px;
  padding-right: 16px;
}
#dialog-exception .content-container .dialog-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: flex-end;
}
#dialog-exception .content-container .dialog-content .panel-exception {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
#dialog-exception .content-container .dialog-content .panel-exception .header {
  display: flex;
}
#dialog-exception .content-container .dialog-content .panel-exception .header .icon.bug {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  background-size: cover;
  margin-right: 10px;
}
#dialog-exception .content-container .dialog-content .panel-exception .header h1,
#dialog-exception .content-container .dialog-content .panel-exception .header h3 {
  flex-grow: 1;
  margin: 0;
}
#dialog-exception .content-container .dialog-content .panel-exception input,
#dialog-exception .content-container .dialog-content .panel-exception textarea {
  flex-grow: 0;
  width: 100%;
}
#dialog-exception .content-container .dialog-content .panel-exception textarea {
  resize: none;
  flex-grow: 1;
  height: 133px;
}
#dialog-exception .content-container .button-bar-container {
  display: flex;
  justify-content: flex-end;
  flex: 0 1 36px;
  margin-top: 10px;
  width: 200px;
}
#dialog-exception .content-container .button-bar-container button {
  margin-left: 16px;
  width: 100%;
  margin-bottom: 6px;
}
#dialog-color-range {
  min-width: 500px;
  min-height: 400px;
}
#dialog-color-range .content-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 10px;
}
#dialog-color-range .content-container .parameter-item {
  margin: 0 0 10px 0;
}
#dialog-color-range .content-container .parameter-enum-buttons .toggle-button {
  width: 28px;
  height: 28px;
  padding: 1px;
}
#dialog-color-range .content-container .content-left {
  flex-grow: 1;
}
#dialog-color-range .content-container .content-left .parameter-number-slider {
  display: flex;
}
#dialog-color-range .content-container .content-left .parameter-number-slider .label {
  width: 120px;
}
#dialog-color-range .content-container .content-left .image-view-container {
  width: 100%;
  height: 300px;
}
#dialog-color-range .content-container .content-left .image-view-container .image-view {
  height: 100%;
  width: 100%;
}
#dialog-color-range .content-container .content-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100px;
  margin: 20px 10px;
}
#dialog-layer-effects .inner-content {
  padding: 10px;
  bottom: 10px;
}
#dialog-layer-effects .inner-content input[type=checkbox] {
  vertical-align: middle;
}
#dialog-layer-effects .dialog-content {
  display: flex;
  flex-direction: row;
}
#dialog-layer-effects .dialog-content .button-bar-container {
  width: 90px;
  padding-left: 23px;
}
#dialog-layer-effects .dialog-content .button-bar-container > button {
  width: 100%;
  margin-bottom: 12px;
  display: block;
  box-sizing: border-box;
}
#dialog-layer-effects .dialog-content .style-selector {
  width: 190px;
  margin-right: 10px;
}
#dialog-layer-effects .dialog-content .style-selector ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#dialog-layer-effects .dialog-content .style-selector ul li {
  padding: 5px 0 5px 0;
  border-bottom: 1px solid #383838;
}
#dialog-layer-effects .dialog-content .style-selector ul li.active {
  background-color: #636363;
  color: #e4e4e4;
}
#dialog-layer-effects .dialog-content .style-selector ul li li {
  padding-left: 10px;
  border: none;
}
#dialog-layer-effects .dialog-content .style-selector ul li label#blending {
  padding: 5px;
  padding-left: 10px;
}
#dialog-layer-effects .dialog-content .style-selector ul li label {
  display: inline-block;
  padding: 3px 3px 3px 10px;
}
#dialog-layer-effects .dialog-content .style-selector ul li input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0 5px 0 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
#dialog-layer-effects .dialog-content .style-configuration {
  width: 380px;
}
#dialog-layer-effects .dialog-content .style-configuration .parameter-item {
  float: left;
}
#dialog-layer-effects .dialog-content .style-configuration .parameter-item.parameter-number-slider {
  margin-right: 4px;
}
#dialog-layer-effects .dialog-content .style-configuration .parameter-item.parameter-number-slider input[type="range"] {
  margin-right: 7px;
}
#dialog-layer-effects .dialog-content .style-configuration fieldset legend {
  font-weight: bold;
}
#dialog-layer-effects .dialog-content .style-configuration .configuration {
  position: relative;
  top: -5px;
  height: 400px;
  width: 370px;
  display: none;
}
#dialog-layer-effects .dialog-content .style-configuration .configuration.visible {
  display: block;
}
#dialog-layer-effects .dialog-content .style-configuration .configuration table td:first-child {
  width: 100px;
}
#dialog-layer-effects .dialog-content .style-configuration .configuration table td {
  vertical-align: middle;
  padding: 0px;
}
#dialog-layer-effects .dialog-content .style-configuration .configuration > fieldset {
  width: 100%;
  height: 100%;
}
#dialog-layer-effects .dialog-content .style-configuration .color-selector-container {
  margin-left: 5px;
  height: 16px;
}
#dialog-layer-effects .dialog-content #configuration-blending-options .channel-checkboxes {
  display: inline-block;
}
#dialog-layer-effects .dialog-content #configuration-blending-options .channel-checkboxes div {
  float: left;
}
.editor-curve {
  top: 300px;
  left: 300px;
}
.editor-curve .graph {
  width: 256px;
  height: 256px;
  border: 1px solid black;
}
.editor-curve .graph canvas {
  cursor: default;
}
.editor-curve .graph canvas.hover-path {
  cursor: url(../lib/libui/assets/cursors/cross.cur), auto;
}
.editor-curve .graph canvas.hover-handle {
  cursor: url(../lib/libui/assets/cursors/move.cur), auto;
}
.editor-gradient {
  background-color: #535353;
}
.editor-gradient .graph {
  width: 100%px;
  height: 70px;
}
.editor-gradient .graph canvas {
  width: 100%;
  cursor: default;
}
.editor-gradient .graph canvas.hover-gradient {
  cursor: url(../lib/libui/assets/colorpicker.cur), auto;
}
.editor-gradient .graph canvas.hover-handle {
  cursor: url(../lib/libui/assets/move.cur), auto;
}
.editor-gradient .controls .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}
.editor-gradient .controls .row .item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.panel-adjustment-layer-brightness-contrast {
  width: 230px;
  height: 115px;
  padding: 4px;
}
.panel-adjustment-layer-brightness-contrast .container-brightness,
.panel-adjustment-layer-brightness-contrast .container-contrast {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-adjustment-layer-brightness-contrast .container-brightness input,
.panel-adjustment-layer-brightness-contrast .container-contrast input {
  width: 3em;
}
.panel-adjustment-layer-brightness-contrast .parameter-number-slider {
  width: 100%;
}
.panel-adjustment-layer-brightness-contrast .parameter-number-slider input[type=range] {
  width: 100%;
}
.panel-adjustment-layer-color-balance {
  width: 348px;
  height: 224px;
  padding: 4px;
}
.panel-adjustment-layer-color-balance .container-color-levels {
  display: flex;
  justify-content: center;
  align-items: center;
}
.panel-adjustment-layer-color-balance .container-color-levels input {
  width: 3em;
  margin-left: 5px;
}
.panel-adjustment-layer-color-balance table.table-color-sliders {
  width: 100%;
}
.panel-adjustment-layer-color-balance table.table-color-sliders tr {
  height: 30px;
}
.panel-adjustment-layer-color-balance table.table-color-sliders tr td:nth-child(1) {
  text-align: right;
  padding-right: 10px;
}
.panel-adjustment-layer-color-balance table.table-color-sliders tr td:nth-child(2) .parameter-number-slider {
  width: 100%;
}
.panel-adjustment-layer-color-balance table.table-color-sliders tr td:nth-child(2) .parameter-number-slider input[type=range] {
  width: 100%;
}
.panel-adjustment-layer-color-balance table.table-color-sliders tr td:nth-child(3) {
  text-align: left;
  padding-left: 10px;
}
.panel-adjustment-layer-color-balance .container-tone {
  height: 15px;
  /* display: flex; */
  align-items: center;
  padding-top: 10px;
}
.panel-adjustment-layer-color-balance .container-tone .parameter-enum-radio {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-adjustment-layer-color-balance .container-tone .parameter-enum-radio label {
  display: flex;
  justify-content: center;
  align-items: center;
}
.panel-adjustment-layer-color-balance .container-preserve-luminosity {
  height: 25px;
  display: flex;
  align-items: center;
  padding-left: 5px;
  padding-top: 7px;
}
.panel-adjustment-layer-levels {
  width: 290px;
  height: 275px;
  padding: 4px;
}
.panel-adjustment-layer-levels .container-output-levels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-adjustment-layer-levels .container-input-levels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.panel-adjustment-layer-levels .container-historgram {
  margin: 10px 0;
}
.panel-adjustment-layer-levels input {
  margin-left: 5px;
  width: 3em;
}
.panel-adjustment-layer-levels .parameter-slider-blend-range {
  margin: 10px 0;
}
.panel-adjustment-layer-channel-mixer {
  width: 250px;
  height: 280px;
  padding: 4px;
}
.panel-adjustment-layer-channel-mixer fieldset {
  margin-top: 5px;
}
.panel-adjustment-layer-channel-mixer .container-red,
.panel-adjustment-layer-channel-mixer .container-green,
.panel-adjustment-layer-channel-mixer .container-blue,
.panel-adjustment-layer-channel-mixer .container-constant {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-adjustment-layer-channel-mixer .container-red input,
.panel-adjustment-layer-channel-mixer .container-green input,
.panel-adjustment-layer-channel-mixer .container-blue input,
.panel-adjustment-layer-channel-mixer .container-constant input {
  width: 3em;
}
.panel-adjustment-layer-channel-mixer .container-constant {
  padding: 10px;
  width: initial;
}
.panel-adjustment-layer-channel-mixer .parameter-number-slider {
  width: 100%;
  margin-bottom: 5px;
}
.panel-adjustment-layer-channel-mixer .parameter-number-slider input[type=range] {
  width: 100%;
}
.panel-adjustment-layer-curves {
  width: 280px;
  height: 340px;
  padding: 4px;
}
.panel-adjustment-layer-curves fieldset {
  height: 320px;
}
.panel-adjustment-layer-curves .container-curve-or-map-select {
  position: absolute;
  left: 150px;
  top: 330px;
}
.panel-adjustment-layer-gradient-map {
  width: 319px;
  height: 177px;
  padding: 4px;
}
.panel-adjustment-layer-gradient-map .container-gradient {
  height: 100px;
}
.panel-adjustment-layer-gradient-map .container-gradient .parameter-gradient {
  margin-top: 20px;
}
.panel-adjustment-layer-gradient-map .container-gradient .parameter-gradient .drop-down-panel .box .button {
  left: initial;
  right: 0;
  width: 15px;
  height: 42px;
}
.panel-adjustment-layer-gradient-map .container-gradient .parameter-gradient .drop-down-panel .box .preview-image-container {
  width: 286px;
  height: 42px;
}
.panel-adjustment-layer-gradient-map .container-gradient .parameter-gradient .drop-down-panel .box .preview-image-container img {
  left: 0;
  position: absolute;
  max-width: 270px;
  max-height: 40px;
}
.panel-adjustment-layer-gradient-map .container-options {
  height: 50px;
}
.panel-adjustment-layer-hue-saturation {
  width: 406px;
  height: 270px;
  padding: 4px;
}
.panel-adjustment-layer-hue-saturation .container-hue,
.panel-adjustment-layer-hue-saturation .container-saturation,
.panel-adjustment-layer-hue-saturation .container-lightness {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-adjustment-layer-hue-saturation .container-hue input,
.panel-adjustment-layer-hue-saturation .container-saturation input,
.panel-adjustment-layer-hue-saturation .container-lightness input {
  width: 3em;
}
.panel-adjustment-layer-hue-saturation .parameter-number-slider {
  width: 100%;
}
.panel-adjustment-layer-hue-saturation .parameter-number-slider input[type=range] {
  width: 100%;
}
.panel-adjustment-layer-hue-saturation .container-labels {
  padding: 16px 17px 0px 12px;
  display: flex;
  height: 10px;
  justify-content: space-between;
}
.panel-adjustment-layer-photo-filter {
  width: 250px;
  height: 220px;
  padding: 4px;
}
.panel-adjustment-layer-photo-filter table tr {
  height: 50px;
}
.panel-adjustment-layer-photo-filter .container-density {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-adjustment-layer-photo-filter .container-density input {
  width: 3em;
}
.panel-adjustment-layer-photo-filter .parameter-number-slider {
  width: 100%;
  margin-bottom: 5px;
}
.panel-adjustment-layer-photo-filter .parameter-number-slider input[type=range] {
  width: 100%;
}
.panel-adjustment-layer-posterize {
  width: 95px;
  height: 40px;
  padding: 4px;
  display: flex;
  align-items: center;
}
.panel-adjustment-layer-posterize label {
  margin-right: 5px;
}
.panel-adjustment-layer-posterize input {
  width: 3em;
}
.panel-adjustment-layer-selective-color {
  width: 250px;
  padding: 4px;
}
.panel-adjustment-layer-selective-color .container-cyan,
.panel-adjustment-layer-selective-color .container-magenta,
.panel-adjustment-layer-selective-color .container-yellow,
.panel-adjustment-layer-selective-color .container-black {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-adjustment-layer-selective-color .container-cyan input,
.panel-adjustment-layer-selective-color .container-magenta input,
.panel-adjustment-layer-selective-color .container-yellow input,
.panel-adjustment-layer-selective-color .container-black input {
  width: 3em;
}
.panel-adjustment-layer-selective-color .parameter-number-slider {
  width: 100%;
  margin-bottom: 5px;
}
.panel-adjustment-layer-selective-color .parameter-number-slider input[type=range] {
  width: 100%;
}
.panel-adjustment-layer-selective-color .container-method {
  height: 35px;
  display: flex;
  padding-left: 12px;
  align-items: center;
}
.panel-adjustment-layer-selective-color .container-method .parameter-enum-radio {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-adjustment-layer-selective-color .container-method .parameter-enum-radio label {
  display: flex;
  justify-content: center;
  align-items: center;
}
.panel-adjustment-layer-threshold {
  width: 285px;
  height: 170px;
  padding: 4px;
}
.panel-adjustment-layer-threshold .container-threshold {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.panel-adjustment-layer-threshold .container-histogram {
  display: flex;
  justify-content: center;
}
.panel-adjustment-layer-vibrance {
  width: 230px;
  height: 115px;
  padding: 4px;
}
.panel-adjustment-layer-vibrance .container-vibrance,
.panel-adjustment-layer-vibrance .container-saturation {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-adjustment-layer-vibrance .container-vibrance input,
.panel-adjustment-layer-vibrance .container-saturation input {
  width: 3em;
}
.panel-adjustment-layer-vibrance .parameter-number-slider {
  width: 100%;
}
.panel-adjustment-layer-vibrance .parameter-number-slider input[type=range] {
  width: 100%;
}
.panel-adjustment-layer-exposure {
  width: 230px;
  height: 165px;
  padding: 4px;
}
.panel-adjustment-layer-exposure .container-exposure,
.panel-adjustment-layer-exposure .container-offset,
.panel-adjustment-layer-exposure .container-gamma {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-adjustment-layer-exposure .container-exposure input,
.panel-adjustment-layer-exposure .container-offset input,
.panel-adjustment-layer-exposure .container-gamma input {
  width: 3em;
}
.panel-adjustment-layer-exposure .parameter-number-slider {
  width: 100%;
}
.panel-adjustment-layer-exposure .parameter-number-slider input[type=range] {
  width: 100%;
}
.panel-fill-layer-gradient {
  left: 300px;
  top: 300px;
  width: 210px;
  height: 240px;
  padding: 4px;
}
.panel-fill-layer-gradient table tr {
  height: 28px;
}
.panel-fill-layer-gradient table td:first-child {
  text-align: right;
  width: 25%;
}
.panel-fill-layer-gradient .parameter-item.parameter-bool-checkbox {
  display: inline-block;
}
.panel-fill-layer-pattern {
  width: 250px;
  height: 160px;
  padding: 4px;
}
.panel-fill-layer-solid-color {
  width: 420px;
  height: 305px;
  padding: 4px;
}
.progress-bar {
  position: relative;
  width: 100%;
  height: 20px;
}
.progress-bar .bar {
  color: white;
  overflow: visible;
  height: 100%;
  white-space: nowrap;
  border-radius: 12px;
  background-color: #42a530;
  transition: width 0.5s;
  line-height: 18px;
  padding-left: 10px;
  box-sizing: border-box;
  box-shadow: 5px 5px 10px #000000;
}
.font-family-selector,
.font-subfamily-selector {
  position: relative;
  background: #535353;
  padding: 5px;
  display: flex;
  flex-direction: column;
}
.font-family-selector:before,
.font-subfamily-selector:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.font-family-selector:before,
.font-subfamily-selector:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.font-family-selector .search-bar,
.font-subfamily-selector .search-bar {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  margin-bottom: 5px;
}
.font-family-selector .search-bar .icon,
.font-subfamily-selector .search-bar .icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
.font-family-selector .search-bar .results,
.font-subfamily-selector .search-bar .results {
  margin-left: 4px;
}
.font-family-selector .scroll-container,
.font-subfamily-selector .scroll-container {
  width: 300px;
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}
.font-family-selector .scroll-container .item,
.font-subfamily-selector .scroll-container .item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.font-family-selector .scroll-container .item.selected,
.font-subfamily-selector .scroll-container .item.selected {
  background-color: darkorange;
}
.font-family-selector .scroll-container .item .icon,
.font-subfamily-selector .scroll-container .item .icon {
  color: #333;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
.font-family-selector .scroll-container .item .label,
.font-subfamily-selector .scroll-container .item .label {
  color: #e4e4e4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 160px;
}
.font-family-selector .scroll-container .item .preview,
.font-subfamily-selector .scroll-container .item .preview {
  filter: invert();
}
.font-family-selector .scroll-container .item:hover,
.font-subfamily-selector .scroll-container .item:hover {
  background-color: #666;
}
.panel-gradient-settings {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 30px);
  box-sizing: border-box;
  background-color: #535353;
  padding: 4px;
}
.panel-gradient-settings:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-gradient-settings:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-gradient-settings:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-gradient-settings:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-gradient-settings .PanelGradient {
  flex-grow: 1;
  min-height: 90px;
}
.panel-gradient-settings .PanelGradient .gradient-item-container {
  height: auto;
  width: auto;
}
.panel-gradient-settings .gradient-editor-container .editor-gradient .graph {
  width: 100%;
}
.panel-gradient-settings .gradient-editor-container .editor-gradient .graph canvas {
  width: 100%;
}
.panel-gradient-settings .gradient-editor-container .editor-gradient .controls .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}
.panel-gradient-settings .gradient-editor-container .editor-gradient .controls .row .item {
  display: flex;
  align-items: center;
  width: 80px;
  flex-grow: 1;
  flex-shrink: 0;
}
.panel-gradient-settings .gradient-editor-container .editor-gradient .controls .row .item.trunc {
  width: 60px;
  max-width: 60px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}
.panel-gradient-settings .gradient-editor-container .editor-gradient .controls .row .item:last-child {
  width: 26px;
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 3px;
}
.panel-gradient-settings .gradient-editor-container .editor-gradient .controls .row .item .parameter-color {
  margin-left: 4px;
}
.panel-gradient-settings .gradient-type-container {
  height: 100px;
}
.panel-gradient-settings .gradient-type-container .row {
  display: flex;
  flex-direction: row;
  padding: 3px 0;
  align-items: center;
  height: 20px;
}
.panel-gradient-settings .gradient-type-container .parameter-item {
  margin-right: 5px;
}
.panel-gradient-settings .gradient-type-container .parameter-angle {
  transform: scale(0.5);
}
.panel-gradient-settings .gradient-type-container label {
  margin-right: 3px;
}
.panel-pattern-settings {
  width: 100%;
  height: calc(100% - 30px);
}
.panel-pattern-settings .PanelPattern {
  height: calc(100% - 74px);
}
.panel-pattern-settings .PanelPattern .pattern-item-container {
  height: auto;
  width: auto;
}
.panel-pattern-settings .gradient-type-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.panel-pattern-settings .gradient-type-container .parameter-item {
  margin-right: 5px;
}
.panel-solid-color-settings {
  width: 100%;
  height: calc(100% - 30px);
  box-sizing: border-box;
  background-color: #535353;
  padding: 4px;
}
.panel-solid-color-settings:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-solid-color-settings:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-solid-color-settings:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-solid-color-settings:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-solid-color-settings .panel-swatches {
  height: calc(100% - 10px);
  min-height: 90px;
}
.panel-solid-color-settings .panel-swatches .swatch-item-container {
  height: auto;
  width: auto;
}
.panel-stroke-style {
  display: flex;
  flex-direction: column;
  padding: 6px 5px;
  background-color: #535353;
}
.panel-stroke-style:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-stroke-style:before {
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-stroke-style:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-stroke-style:before {
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel-stroke-style .stroke-selector-container {
  flex-grow: 1;
  background-color: #3A3A3A;
  min-height: 90px;
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid #383838;
}
.panel-stroke-style .stroke-selector-container:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.panel-stroke-style .stroke-selector-container:after {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.panel-stroke-style .stroke-selector-container > div {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.panel-stroke-style .stroke-selector-container > div .stroke-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px 1px 0 0;
  width: 200px;
  height: 24px;
}
.panel-stroke-style .stroke-selector-container > div .stroke-item.selected {
  background-color: #636363;
}
.panel-stroke-style .row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 4px;
}
.panel-stroke-style .row .parameter-enum-buttons a.toggle-button {
  width: 40px;
}
.panel-stroke-style .row .parameter-enum-buttons a.toggle-button svg.icon {
  width: 16px;
  height: 16px;
}
.panel-stroke-style .row.align label,
.panel-stroke-style .row.cap label,
.panel-stroke-style .row.join label {
  min-width: 40px;
}
.panel-stroke-style .row.dash .item {
  display: flex;
  flex-direction: column;
}
.panel-stroke-style .row.dash .item .parameter-number-input {
  margin-left: 0;
}
.panel-stroke-style .row.dash .item .parameter-number-input input {
  margin-left: 0;
  margin-right: 1px;
  width: 34px;
}
.panel-stroke-style .row.dash .item .parameter-number-input input[disabled] {
  opacity: 0.5;
}
.panel-filter-generic {
  width: 100%;
  height: 100%;
  background-color: #535353;
}
.panel-filter-generic .parameter-item {
  margin: 10px;
}
.panel-filter-generic .parameter-item.parameter-number-slider label.prefix {
  min-width: 100px;
}
.panel-filter-generic .parameter-item.parameter-number-slider input[type=number] {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}
.panel-filter-generic .parameter-item.slider label.prefix {
  min-width: 100px;
}
.panel-filter-generic .parameter-item.slider input[type=number] {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}
.panel-filter-generic .parameter-item.parameter-bool-checkbox label.prefix {
  display: inline-block;
  min-width: 100px;
}
.panel-filter-generic .parameter-item.parameter-enum-select label {
  display: inline-block;
  min-width: 100px;
}
.image-view {
  position: relative;
  background-color: #535353;
}
.image-view .canvas-container {
  width: 100%;
  height: calc(100% - 16px);
}
.image-view .canvas-container .scrollbar.vertical {
  bottom: 16px;
}
.image-view .controls-container {
  display: flex;
  height: 16px;
}
.image-view .controls-container select {
  height: 16px;
  font-size: 12px;
  padding: 0;
}
.image-view .controls-container .scrollbar-container {
  flex-grow: 1;
  position: relative;
}
.image-view .controls-container .scrollbar-container .scrollbar.horizontal {
  left: 0;
  right: 17px;
}
.hue-cube {
  width: 100%;
  height: 100%;
}
.hue-cube .horizontal-container {
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  align-items: center;
  height: 100%;
}
.hue-cube .horizontal-container .foreground-background-container {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  width: 50px;
  height: 100%;
}
.hue-cube .horizontal-container .foreground-background-container .foreground-background {
  position: relative;
  margin-top: 8px;
  width: 27px;
  height: 27px;
}
.hue-cube .horizontal-container .foreground-background-container .foreground-background .foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  z-index: 1;
}
.hue-cube .horizontal-container .foreground-background-container .foreground-background .foreground.active {
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.hue-cube .horizontal-container .foreground-background-container .foreground-background .background {
  position: absolute;
  top: 18px/2;
  left: 18px/2;
  width: 18px;
  height: 18px;
}
.hue-cube .horizontal-container .foreground-background-container .foreground-background .background.active {
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.hue-cube .horizontal-container .cube-container {
  flex-grow: 1;
  padding: 10px 0;
  height: 100%;
  box-sizing: border-box;
}
.hue-cube .horizontal-container .cube-container .cube-position-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.hue-cube .horizontal-container .cube-container .cube-position-container .circle {
  pointer-events: none;
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid black;
  border-radius: 50%;
}
.hue-cube .horizontal-container .cube-container .cube-position-container canvas.cube {
  display: block;
  width: 100%;
  height: 100%;
  background-color: green;
}
.hue-cube .horizontal-container .hue-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  margin-right: 10px;
}
.hue-cube .horizontal-container .hue-container .hue-position-container {
  padding: 0 0 0 20px;
  position: relative;
  width: 100%;
  height: 100%;
}
.hue-cube .horizontal-container .hue-container .hue-position-container .arrow {
  pointer-events: none;
  position: absolute;
  color: white;
  width: 10px;
  height: 10px;
}
.hue-cube .horizontal-container .hue-container .hue-position-container .arrow .icon {
  width: 10px;
  height: 10px;
}
.hue-cube .horizontal-container .hue-container .hue-position-container canvas.hue {
  height: 100%;
  width: 19px;
}
html {
  width: 100%;
  height: 100%;
}
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #a5a5a5;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
#app,
.UI {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#contextbar-container {
  width: 100%;
  height: 100%;
  min-width: 500px;
}
#MainContainer {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#ModalOverlayContainer {
  z-index: 4;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.fab {
  pointer-events: all;
  display: inline-flex;
  border-radius: 50%;
  background-color: darkorange;
}
.fab svg {
  color: white;
  width: 30px;
  height: 30px;
  margin: 10px;
}
.fab svg.inactive {
  display: none;
}
.fab.color-secondary {
  background-color: darkgray;
}
.fab.align-left {
  position: absolute;
  left: 0;
}
.fab.align-right {
  position: absolute;
  right: 0;
}
.fab-menu {
  position: absolute;
  right: 0;
  bottom: 0;
}
.fab-menu .item-container {
  display: flex;
  flex-direction: column-reverse;
  opacity: 0;
  transition: all 0.2s;
}
.fab-menu .item-container.open {
  opacity: 1;
}
.fab-menu .fab {
  margin: 0 10px 10px 0;
  box-shadow: 1px 1px #333333;
}
.fab-menu .fab:active {
  position: relative;
  box-shadow: 0 0 #333333;
}
.panel .header {
  max-height: 50px;
  position: sticky;
  top: -1px;
  display: flex;
  justify-content: space-between;
}
.panel .header h1 {
  white-space: nowrap;
  max-width: calc(100% - 130px);
  text-overflow: ellipsis;
}
.panel-node-library {
  pointer-events: all;
  overflow-y: auto;
  border: 10px solid rgba(0, 0, 0, 0.2);
  position: absolute;
  resize: both;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 80vw;
  max-height: calc(80vh - 10px);
  max-width: 900px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  color: white;
}
.panel-node-library .node-category > .name {
  font-size: x-large;
}
.panel-node-library .node-category > .description {
  margin-bottom: 5px;
}
.panel-node-library .node-category > .body {
  display: flex;
  flex-wrap: wrap;
}
.panel-node-library .node-category .node-item {
  padding: 5px;
  display: inline-block;
  width: 120px;
  margin: 0 10px 10px 0;
  border-radius: 5px;
  background-color: #666;
  transition: 0.2s transform;
}
.panel-node-library .node-category .node-item img {
  width: 120px;
  height: 120px;
}
.panel-node-library .node-category .node-item > .name {
  font-size: larger;
  margin-bottom: 5px;
}
.panel-node-library .node-category .node-item:hover {
  transform: scale(1.1);
  background-color: darkorange;
}
.panel-node-parameters {
  pointer-events: all;
  overflow-y: auto;
  border: 10px solid rgba(0, 0, 0, 0.2);
  position: absolute;
  resize: both;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 80vw;
  max-height: calc(80vh - 10px);
  max-width: 500px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  color: white;
}
.panel-node-parameters .parameter-item {
  margin: 10px;
}
.panel-node-parameters .parameter-item.parameter-number-slider label.prefix {
  min-width: 100px;
}
.panel-node-parameters .parameter-item.parameter-number-slider input[type=number] {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}
.panel-node-parameters .parameter-item.slider label.prefix {
  min-width: 100px;
}
.panel-node-parameters .parameter-item.slider input[type=number] {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}
.panel-node-parameters .parameter-item.parameter-bool-checkbox label.prefix {
  display: inline-block;
  min-width: 100px;
}
.panel-node-parameters .parameter-item.parameter-enum-select label {
  display: inline-block;
  min-width: 100px;
}
.panel-node-parameters .parameter-item.parameter-string-input {
  display: flex;
}
.panel-node-parameters .parameter-item.parameter-string-input input[type="text"] {
  width: 100%;
}