@charset "UTF-8";
@font-face {
  font-family: pc-icon;
  src: url("data:application/font-woff;charset=utf-7;base64, ") format("woff");
  font-weight: normal;
  font-style: normal;
}
.font-icon, .pcui-menu-item-content > .pcui-label[data-icon]::before, .pcui-menu-item-has-children > .pcui-menu-item-content > .pcui-label::after, .pcui-treeview-item:not(.pcui-treeview-item-empty) > .pcui-treeview-item-contents::before, .pcui-treeview-item-icon::after, .pcui-select-input-create-new > .pcui-label:last-child::before, .pcui-container.pcui-select-input-list .pcui-label.pcui-selected::after, .pcui-label.pcui-select-input-disabled-value::after, .pcui-label.pcui-select-input-icon::after, .pcui-infobox[data-icon]:not(.pcui-hidden)::before, .pcui-panel.pcui-collapsible > .pcui-panel-header::before, .picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .delete-curve-button::after, .picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .paste-curve-button::after, .picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .copy-curve-button::after, .picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .pcui-button, .pcui-button[data-icon]::before, .pcui-boolean-input.pcui-boolean-input-ticked::after {
  font-family: pc-icon;
}

.font-thin {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 100;
  font-style: normal;
}

.font-light {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-style: normal;
}

.font-regular, .pcui-element {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}

.font-bold {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
}

.fixed-font, .pcui-select-input-tag > .pcui-label, .pcui-container.pcui-select-input-list .pcui-label, .pcui-select-input-value, .pcui-label.pcui-multiple-values::before, .pcui-text-area-input > textarea, .pcui-input-element.pcui-multiple-values::before, .pcui-input-element > input {
  font-family: inconsolatamedium, Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
  font-weight: normal;
  font-size: 12px;
}

/* Apply scrollbar styles globally */
* {
  /* Webkit-based browsers */
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: #202020;
}
*::-webkit-scrollbar-thumb {
  background: rgba(170, 170, 170, 0.5);
}
*::-webkit-scrollbar-thumb:hover {
  background: #f60;
}
*::-webkit-scrollbar-corner {
  background: #282828;
}
* {
  /* Standardized Properties */
}
@supports not selector(::-webkit-scrollbar) {
  * {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(170, 170, 170, 0.5) #202020;
  }
}

.pcui-no-select, .pcui-treeview, .pcui-overlay-inner, .picker-color > .pcui-overlay-content > .pick-opacity, .picker-color > .pcui-overlay-content > .pick-hue, .picker-color > .pcui-overlay-content > .pick-rect, .pcui-color-input, .pcui-canvas, .pcui-button, .pcui-label.pcui-selectable:hover, .pcui-slider {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pcui-flex, .pcui-gridview-radio-container, .pcui-gridview-item, .pcui-gridview-vertical, .pcui-gridview, .pcui-label-group, .pcui-select-input-container-value, .pcui-select-input, .pcui-overlay, .pcui-panel-header > .pcui-panel-sortable-icon, .pcui-vector-input {
  flex-direction: column;
}
.pcui-flex:not(.pcui-hidden), .pcui-gridview-radio-container:not(.pcui-hidden), .pcui-gridview-item:not(.pcui-hidden), .pcui-gridview-vertical:not(.pcui-hidden), .pcui-gridview:not(.pcui-hidden), .pcui-label-group:not(.pcui-hidden), .pcui-select-input-container-value:not(.pcui-hidden), .pcui-select-input:not(.pcui-hidden), .pcui-overlay:not(.pcui-hidden), .pcui-panel-header > .pcui-panel-sortable-icon:not(.pcui-hidden), .pcui-vector-input:not(.pcui-hidden) {
  display: flex;
}

.pcui-grid {
  display: grid;
}

.pcui-scrollable {
  overflow: auto;
}

@keyframes pcui-flash-animation {
  from {
    outline-color: #f60;
  }
  to {
    outline-color: rgba(255, 102, 0, 0);
  }
}
.pcui-element {
  border: 0 solid #aaa;
}
.pcui-element.flash {
  outline: 1px solid #f60;
  animation: pcui-flash-animation 200ms ease-in-out forwards;
}
.pcui-element:focus {
  outline: none;
}
.pcui-element::-moz-focus-inner {
  border: 0;
}

.pcui-element.pcui-hidden {
  display: none;
}

.pcui-input-element {
  display: inline-block;
  border: 1px solid #202020;
  border-radius: 2px;
  box-sizing: border-box;
  margin: 6px;
  min-height: 24px;
  height: 24px;
  background-color: #282828;
  vertical-align: top;
  transition: color 100ms, background-color 100ms, box-shadow 100ms;
  position: relative;
  color: #aaa;
}
.pcui-input-element > input {
  height: 100%;
  width: calc(100% - 16px);
  padding: 0 6px;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}
.pcui-input-element::before {
  color: inherit;
}

.pcui-input-element.pcui-multiple-values::before {
  position: absolute;
  padding: 0 8px;
  content: "...";
  white-space: nowrap;
  top: 5px;
  font-size: 12px;
}

.pcui-input-element:not(.pcui-disabled, .pcui-readonly):hover {
  background-color: #202020;
  color: #fff;
}
.pcui-input-element:not(.pcui-disabled, .pcui-readonly):not(.pcui-error):hover {
  box-shadow: 0 0 2px 1px rgba(255, 102, 0, 0.3);
}
.pcui-input-element:not(.pcui-disabled, .pcui-readonly).pcui-focus {
  background-color: #202020;
  box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.3);
}

.pcui-input-element.pcui-focus::after, .pcui-input-element.pcui-focus::before, .pcui-input-element:hover::after, .pcui-input-element:hover::before {
  display: none;
}

.pcui-input-element.pcui-readonly {
  background-color: rgba(40, 40, 40, 0.7);
  border-color: transparent;
}

.pcui-input-element.pcui-disabled {
  color: rgba(170, 170, 170, 0.5);
}

.pcui-input-element.pcui-error {
  color: #aaa;
  box-shadow: 0 0 0 1px #d34141;
}

.pcui-input-element[placeholder] {
  position: relative;
}
.pcui-input-element[placeholder]::after {
  content: attr(placeholder);
  background-color: #282828;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 8px;
  line-height: 22px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  color: #829193;
  pointer-events: none;
}

.pcui-text-area-input {
  min-height: 48px;
  height: auto;
}
.pcui-text-area-input > textarea {
  resize: none;
  height: 100%;
  width: calc(100% - 16px);
  padding: 0 8px;
  line-height: 22px;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  min-height: 44px;
  min-width: 172px;
}

.pcui-text-area-input.pcui-text-area-input-resizable-none > textarea {
  resize: none;
}

.pcui-text-area-input.pcui-text-area-input-resizable-both > textarea {
  resize: both;
}

.pcui-text-area-input.pcui-text-area-input-resizable-horizontal > textarea {
  resize: horizontal;
}

.pcui-text-area-input.pcui-text-area-input-resizable-vertical > textarea {
  resize: vertical;
}

.pcui-numeric-input-slider-control {
  display: none;
  position: absolute;
  width: 10px;
  height: 10px;
  right: 3px;
  border: 2px solid #202020;
  background-color: #202020;
  border-radius: 100px;
  z-index: 9999;
  transform: translateY(-50%);
  top: 50%;
  cursor: ew-resize;
}

.pcui-numeric-input-slider-control::after {
  content: "\e408";
  font-size: 15px;
  font-family: pc-icon;
  position: absolute;
  left: -5px;
  top: -5px;
  transform: rotateZ(90deg);
}

.pcui-numeric-input-slider-control:hover {
  opacity: 0.5;
  color: #aaa;
}

.pcui-numeric-input-slider-control-active {
  opacity: 1 !important;
  color: #7f7 !important;
}

.pcui-numeric-input-slider-control-hidden {
  display: none !important;
}

.pcui-numeric-input:hover .pcui-numeric-input-slider-control {
  display: block;
}

.pcui-numeric-input.pcui-disabled:hover .pcui-numeric-input-slider-control {
  display: none;
}

.pcui-numeric-input.pcui-disabled .pcui-numeric-input-slider-control,
.pcui-numeric-input.pcui-readonly .pcui-numeric-input-slider-control {
  display: none;
}

.pcui-slider {
  display: inline-flex;
  height: 24px;
  margin: 6px;
  align-items: center;
  touch-action: none;
}
.pcui-slider > .pcui-numeric-input {
  flex: 1;
  margin-left: 0;
}

.pcui-slider-container {
  flex: 3;
}

.pcui-slider-bar {
  position: relative;
  width: calc(100% - 18px);
  height: 4px;
  margin: 9px 8px;
  background-color: #282828;
  border: 1px solid #202020;
}

.pcui-slider-handle {
  position: absolute;
  top: -7px;
  left: 0;
  margin-left: -9px;
  width: 8px;
  height: 16px;
  background-color: rgba(170, 170, 170, 0.5);
  border: 1px solid #202020;
  transition: left 100ms ease;
}
.pcui-slider-handle:hover, .pcui-slider-handle:focus {
  outline: none;
}

.pcui-slider-active .pcui-slider-bar {
  border-color: #202020;
  background-color: #202020;
}
.pcui-slider-active .pcui-slider-handle {
  border-color: #202020;
  background-color: #fff;
  transition: none;
}

.pcui-slider:not(.pcui-disabled, .pcui-readonly) .pcui-slider-handle:focus, .pcui-slider:not(.pcui-disabled, .pcui-readonly) .pcui-slider-handle:hover {
  cursor: ew-resize;
  outline: none;
  border-color: #202020;
  background-color: #fff;
}

.pcui-slider {
  cursor: pointer;
}
.pcui-slider.pcui-slider-active {
  cursor: ew-resize;
}

.pcui-slider.pcui-readonly .pcui-numeric-input {
  flex: 1;
}
.pcui-slider.pcui-readonly .pcui-slider-bar {
  display: none;
}

.pcui-slider.pcui-multiple-values .pcui-slider-handle {
  display: none;
}

.pcui-vector-input {
  flex-direction: row;
  align-items: center;
}
.pcui-vector-input > .pcui-numeric-input {
  flex: 1;
  margin: 6px 3px;
}
.pcui-vector-input > .pcui-numeric-input:first-child {
  margin-left: 0;
}
.pcui-vector-input > .pcui-numeric-input:last-child {
  margin-right: 0;
}

.pcui-boolean-input {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  background-color: #282828;
  color: #fff;
  width: 14px;
  height: 14px;
  line-height: 1;
  overflow: hidden;
  margin: 6px;
  transition: opacity 100ms, background-color 100ms, box-shadow 100ms;
}
.pcui-boolean-input:focus {
  outline: none;
}

.pcui-boolean-input.pcui-boolean-input-ticked {
  background-color: #aaa;
}
.pcui-boolean-input.pcui-boolean-input-ticked::after {
  content: "\e372";
  color: #202020;
  background-color: inherit;
  font-size: 19px;
  display: block;
  margin-top: -2px;
  margin-left: -2px;
}

.pcui-boolean-input:not(.pcui-disabled, .pcui-readonly):hover, .pcui-boolean-input:not(.pcui-disabled, .pcui-readonly):focus {
  cursor: pointer;
  background-color: #202020;
  box-shadow: 0 0 2px 1px rgba(255, 102, 0, 0.3);
}
.pcui-boolean-input:not(.pcui-disabled, .pcui-readonly).pcui-boolean-input-ticked:hover, .pcui-boolean-input:not(.pcui-disabled, .pcui-readonly).pcui-boolean-input-ticked:focus {
  background-color: #aaa;
}

.pcui-boolean-input.pcui-disabled {
  opacity: 0.4;
}

.pcui-boolean-input.pcui-multiple-values::after {
  position: absolute;
  font-size: 17px;
  font-weight: bold;
  color: #aaa;
  left: 4px;
  top: -3px;
  content: "-";
}

.pcui-boolean-input-toggle {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid #202020;
  box-sizing: border-box;
  background-color: #333;
  color: #fff;
  line-height: 1;
  overflow: hidden;
  margin: 6px;
  transition: opacity 100ms, background-color 100ms, box-shadow 100ms;
}
.pcui-boolean-input-toggle:focus {
  outline: none;
}
.pcui-boolean-input-toggle::after {
  content: " ";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: rgba(170, 170, 170, 0.5);
  transition: left 100ms ease, background-color 100ms ease;
}

.pcui-boolean-input-toggle.pcui-boolean-input-ticked {
  border-color: #202020;
}
.pcui-boolean-input-toggle.pcui-boolean-input-ticked::after {
  left: 15px;
  background-color: rgba(131.75, 233.75, 131.75, 0.75);
}

.pcui-boolean-input-toggle:not(.pcui-disabled, .pcui-readonly):hover, .pcui-boolean-input-toggle:not(.pcui-disabled, .pcui-readonly):focus {
  cursor: pointer;
  border-color: #202020;
  background-color: #202020;
  box-shadow: 0 0 2px 1px rgba(255, 102, 0, 0.3);
}
.pcui-boolean-input-toggle:not(.pcui-disabled, .pcui-readonly):hover::after, .pcui-boolean-input-toggle:not(.pcui-disabled, .pcui-readonly):focus::after {
  background-color: #d34141;
}
.pcui-boolean-input-toggle:not(.pcui-disabled, .pcui-readonly).pcui-boolean-input-ticked:hover, .pcui-boolean-input-toggle:not(.pcui-disabled, .pcui-readonly).pcui-boolean-input-ticked:focus {
  border-color: #202020;
  background-color: #202020;
}
.pcui-boolean-input-toggle:not(.pcui-disabled, .pcui-readonly).pcui-boolean-input-ticked::after {
  background-color: #7f7;
}

.pcui-boolean-input-toggle.pcui-readonly {
  opacity: 0.7;
}

.pcui-boolean-input-toggle.pcui-disabled {
  opacity: 0.4;
}

.pcui-boolean-input-toggle.pcui-multiple-values::after {
  left: 8px;
  background-color: rgba(170, 170, 170, 0.25);
}

.pcui-label {
  display: inline-block;
  box-sizing: border-box;
  margin: 6px;
  vertical-align: middle;
  transition: opacity 100ms;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pcui-label.pcui-default-mousedown {
  -webkit-user-select: initial;
     -moz-user-select: initial;
          user-select: initial;
}

.pcui-label.pcui-multiple-values {
  position: relative;
  color: transparent;
}
.pcui-label.pcui-multiple-values::before {
  content: "...";
  color: #aaa;
  white-space: nowrap;
  font-size: 12px;
}

.pcui-label.pcui-error {
  color: #d34141;
}

.pcui-label.pcui-selectable:hover {
  color: #f60;
  text-decoration: underline;
}

.pcui-label[placeholder] {
  position: relative;
}
.pcui-label[placeholder]::after {
  content: attr(placeholder);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 8px;
  color: #999;
  pointer-events: none;
}

.pcui-button {
  display: inline-block;
  border: 1px solid #202020;
  border-radius: 2px;
  box-sizing: border-box;
  background-color: #282828;
  color: #aaa;
  padding: 0 8px;
  margin: 6px;
  height: 28px;
  line-height: 28px;
  max-height: 100%;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: color 100ms, opacity 100ms, box-shadow 100ms;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcui-button[data-icon]::before {
  content: attr(data-icon);
  font-weight: 100;
  font-size: inherit;
  margin-right: 6px;
  vertical-align: middle;
}
.pcui-button[data-icon]:empty::before {
  margin-right: 0;
}

.pcui-button:not(.pcui-disabled, .pcui-readonly):hover, .pcui-button:not(.pcui-disabled, .pcui-readonly):focus {
  color: #fff;
  background-color: #282828;
  box-shadow: 0 0 2px 1px rgba(255, 102, 0, 0.3);
}
.pcui-button:not(.pcui-disabled, .pcui-readonly):active {
  background-color: #202020;
  box-shadow: none;
}

.pcui-button.pcui-readonly {
  opacity: 0.7;
  cursor: default;
}

.pcui-button.pcui-disabled {
  opacity: 0.4;
  cursor: default;
}

.pcui-button.pcui-small {
  height: 24px;
  line-height: 24px;
  font-size: 10px;
}

.pcui-code {
  background: #20292b;
  overflow: auto;
}
.pcui-code .pcui-code-inner {
  color: #f60;
  font-family: inconsolatamedium, Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
  font-weight: normal;
  font-size: 10px;
  white-space: pre;
}

.pcui-container {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.pcui-container.pcui-resizable > .pcui-resizable-handle {
  position: absolute;
  z-index: 1;
  opacity: 0;
  background-color: transparent;
  touch-action: none;
}
.pcui-container.pcui-resizable > .pcui-resizable-handle:hover {
  opacity: 1;
}
.pcui-container.pcui-resizable.pcui-resizable-resizing > .pcui-resizable-handle {
  opacity: 1;
}
.pcui-container.pcui-resizable.pcui-resizable-left > .pcui-resizable-handle, .pcui-container.pcui-resizable.pcui-resizable-right > .pcui-resizable-handle {
  top: 0;
  bottom: 0;
  width: 1px;
  height: auto;
  cursor: ew-resize;
}
.pcui-container.pcui-resizable.pcui-resizable-left > .pcui-resizable-handle {
  left: 0;
  border-left: 3px solid #202020;
}
.pcui-container.pcui-resizable.pcui-resizable-right > .pcui-resizable-handle {
  right: 0;
  border-right: 3px solid #202020;
}
.pcui-container.pcui-resizable.pcui-resizable-top > .pcui-resizable-handle, .pcui-container.pcui-resizable.pcui-resizable-bottom > .pcui-resizable-handle {
  left: 0;
  right: 0;
  width: auto;
  height: 1px;
  cursor: ns-resize;
}
.pcui-container.pcui-resizable.pcui-resizable-top > .pcui-resizable-handle {
  top: 0;
  border-top: 3px solid #202020;
}
.pcui-container.pcui-resizable.pcui-resizable-bottom > .pcui-resizable-handle {
  bottom: 0;
  border-bottom: 3px solid #202020;
}

.pcui-container-dragged {
  outline: 2px solid #fff;
  box-sizing: border-box;
  opacity: 0.7;
  z-index: 1;
}

.pcui-container-dragged-child {
  outline: 1px dotted #f60;
  box-sizing: border-box;
}

.pcui-color-input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 44px;
  height: 24px;
  margin: 6px;
  vertical-align: top;
  cursor: pointer;
  transition: opacity 100ms;
}
.pcui-color-input > .pcui-overlay-clickable {
  position: fixed;
}
.pcui-color-input > div {
  position: absolute;
  inset: 0;
}
.pcui-color-input::after {
  content: " ";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  background-color: transparent;
  border-bottom: 16px solid #202020;
  border-left: 16px solid transparent;
}

.picker-color.c-1 > .pcui-overlay-content > .pick-opacity {
  display: block;
}
.picker-color.c-1 > .pcui-overlay-content > .fields > .field-r {
  display: block;
}
.picker-color.c-2 > .pcui-overlay-content > .fields > .field-hex {
  display: block;
}
.picker-color.c-3 > .pcui-overlay-content {
  width: 298px;
}
.picker-color.c-3 > .pcui-overlay-content > .pick-rect {
  display: block;
}
.picker-color.c-3 > .pcui-overlay-content > .pick-hue {
  display: block;
}
.picker-color.c-3 > .pcui-overlay-content > .pick-opacity {
  display: none;
}
.picker-color.c-3 > .pcui-overlay-content > .fields > .field-g,
.picker-color.c-3 > .pcui-overlay-content > .fields > .field-b {
  display: block;
}
.picker-color.c-4 > .pcui-overlay-content {
  width: 320px;
}
.picker-color.c-4 > .pcui-overlay-content > .pick-opacity {
  display: block;
}
.picker-color.c-4 > .pcui-overlay-content > .fields > .field-a {
  display: block;
}
.picker-color > .pcui-overlay-content {
  border: 1px solid #000;
  width: 320px;
  height: 162px;
  white-space: nowrap;
  transition: none;
}
.picker-color > .pcui-overlay-content > .pick-rect {
  position: relative;
  display: none;
  float: left;
  width: 146px;
  height: 146px;
  border: 1px solid #000;
  box-sizing: border-box;
  margin: 8px 0 8px 8px;
  background-color: #f00;
  touch-action: none;
  cursor: crosshair;
}
.picker-color > .pcui-overlay-content > .pick-rect > .white {
  position: absolute;
  width: 144px;
  height: 144px;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.01) 100%);
}
.picker-color > .pcui-overlay-content > .pick-rect > .black {
  position: absolute;
  width: 144px;
  height: 144px;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgb(0, 0, 0) 100%);
}
.picker-color > .pcui-overlay-content > .pick-rect > .handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -7px 0 0 -7px;
  border: 1px solid #000;
  outline: 1px solid #fff;
}
.picker-color > .pcui-overlay-content > .pick-hue {
  position: relative;
  display: none;
  float: left;
  width: 14px;
  height: 146px;
  margin: 8px 0 8px 8px;
  border: 1px solid #000;
  box-sizing: border-box;
  touch-action: none;
  cursor: crosshair;
  background: #000;
  background: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 16.67%, rgb(0, 255, 0) 33.33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 66.67%, rgb(255, 0, 255) 83.33%, rgb(255, 0, 0) 100%);
}
.picker-color > .pcui-overlay-content > .pick-hue > .handle {
  position: absolute;
  top: 0;
  left: -3px;
  width: 16px;
  height: 4px;
  margin: -3px 0 0;
  border: 1px solid #000;
  outline: 1px solid #fff;
}
.picker-color > .pcui-overlay-content > .pick-opacity {
  position: relative;
  display: none;
  float: left;
  width: 12px;
  height: 144px;
  margin: 8px 0 8px 8px;
  border: 1px solid #000;
  touch-action: none;
  cursor: crosshair;
  background: #000;
  background: linear-gradient(to bottom, #fff 0%, #000 100%);
}
.picker-color > .pcui-overlay-content > .pick-opacity > .handle {
  position: absolute;
  top: 0;
  left: -3px;
  width: 16px;
  height: 4px;
  margin: -3px 0 0;
  border: 1px solid #000;
  outline: 1px solid #fff;
}
.picker-color > .pcui-overlay-content > .fields {
  float: left;
  width: 106px;
  height: 154px;
  margin: 0 0 0 8px;
  padding: 4px;
}
.picker-color > .pcui-overlay-content > .fields > .field {
  display: none;
  width: 100px;
}

.pcui-color-input.pcui-multiple-values > div {
  display: none;
}

.pcui-color-input.pcui-readonly {
  cursor: default;
}
.pcui-color-input.pcui-readonly::after {
  display: none;
}

.pcui-color-input.pcui-disabled {
  opacity: 0.4;
  cursor: default;
}

.pcui-color-input:not(.pcui-disabled, .pcui-readonly):hover, .pcui-color-input:not(.pcui-disabled, .pcui-readonly):focus {
  box-shadow: 0 0 2px 1px rgba(255, 102, 0, 0.3);
}
.pcui-color-input:not(.pcui-disabled, .pcui-readonly):hover::after, .pcui-color-input:not(.pcui-disabled, .pcui-readonly):focus::after {
  border-bottom-color: #202020;
}
.pcui-color-input:not(.pcui-disabled, .pcui-readonly):active {
  box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.3);
}

.pcui-gradient {
  display: inline-block;
  flex: 1;
  height: 24px;
  box-sizing: border-box;
  margin: 6px;
  transition: opacity 100ms, box-shadow 100ms;
  border: 1px solid #202020;
  background-color: #282828;
}
.pcui-gradient > .pcui-canvas {
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.pcui-gradient.pcui-disabled,
.pcui-gradient.pcui-multiple-values {
  opacity: 0.4;
}

.pcui-gradient:not(.pcui-disabled, .pcui-readonly, .pcui-multiple-values):hover, .pcui-gradient:not(.pcui-disabled, .pcui-readonly, .pcui-multiple-values):focus {
  cursor: pointer;
  box-shadow: 0 0 2px 1px rgba(255, 102, 0, 0.3);
}
.pcui-gradient:not(.pcui-disabled, .pcui-readonly, .pcui-multiple-values):active {
  box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.3);
}

.picker-gradient > .pcui-overlay-content {
  width: 343px;
  height: 262px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel {
  height: 100%;
  font-size: 11px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .show-selected-position {
  position: absolute;
  width: 18px;
  min-height: 17px !important;
  height: 17px !important;
  top: 14px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  text-align: center;
  color: #9ba1a3;
  background-color: #2c393c;
  border-radius: 2px;
  justify-content: center;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .show-selected-position > .show-selected-position-input {
  width: inherit;
  text-align: center;
  justify-content: center;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .anchor-crosshair {
  position: absolute;
  top: 41.5px;
  pointer-events: none;
  background: none;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .anchor-crosshair > .crosshair-bar {
  background: #293538;
  width: 1px;
  height: 29px;
  position: absolute;
  top: -34px;
  left: 8px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .anchor-crosshair > .show-crosshair-position {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  font-family: inconsolatamedium, Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
  line-height: 22px;
  position: absolute;
  width: 18px;
  min-height: 17px !important;
  height: 17px !important;
  top: 14px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  text-align: center;
  color: #9ba1a3;
  background-color: #2c393c;
  border-radius: 2px;
  justify-content: center;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-gradient {
  width: 321px;
  height: 28px;
  display: block;
  padding: 8px 10px 0 11px;
  background-color: #2c393c;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-gradient .crosshair-active {
  cursor: none;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-anchors {
  width: 320px;
  height: 28px;
  display: block;
  padding: 0 10px 0 11px;
  background-color: #2c393c;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer {
  padding: 5px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-header {
  display: none;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content {
  display: flex;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .pcui-label {
  align-self: center;
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 19px;
  align-content: center;
  height: 20px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .pcui-select-input {
  align-self: center;
  width: 162px;
  height: 22px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .pcui-numeric-input {
  align-self: center;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .pcui-button {
  width: 22px;
  height: 22px;
  vertical-align: bottom;
  margin: 0;
  margin-right: 8px;
  margin-top: 6px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .copy-curve-button {
  border-color: #2c393c;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .copy-curve-button::after {
  content: "\e351";
  position: absolute;
  top: 4px;
  left: 218px;
  font-size: 15px;
  text-align: center;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .paste-curve-button {
  border-color: #2c393c;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .paste-curve-button::after {
  content: "\e348";
  position: absolute;
  top: 4px;
  left: 248px;
  font-size: 15px;
  text-align: center;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .delete-curve-button {
  border-color: #2c393c;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .picker-gradient-footer > .pcui-panel-content > .delete-curve-button::after {
  content: "\e125";
  position: absolute;
  top: 4px;
  left: 278px;
  font-size: 15px;
  text-align: center;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel {
  height: 156px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-header {
  display: none;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-content > .color-rect {
  margin: 5px 10px 10px;
  width: 140px;
  height: 140px;
  cursor: crosshair;
  position: relative;
  float: left;
  border-width: 1px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-content > .color-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid #000;
  outline: 1px solid #fff;
  pointer-events: none;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-content > .hue-rect,
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-content > .alpha-rect {
  margin: 5px 10px 10px 0;
  width: 20px;
  height: 140px;
  cursor: crosshair;
  border-width: 1px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-content > .hue-handle,
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-content > .alpha-handle {
  position: absolute;
  width: 20px;
  height: 4px;
  border: 1px solid rgb(92, 82, 79);
  outline: 1px solid #fff;
  pointer-events: none;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-content > .fields {
  display: inline-block;
  margin: 3px 0 0;
  width: 112px;
  height: 145px;
  vertical-align: top;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-content > .fields > .pcui-numeric-input {
  margin: 2px 0;
  width: 108px;
}
.picker-gradient > .pcui-overlay-content > .picker-gradient-panel > .color-panel > .pcui-panel-content > .fields > .pcui-text-input {
  margin: 2px 0;
  min-height: 22px;
  min-width: 111px;
}

.pcui-panel {
  background-color: #333;
}

.pcui-panel-header {
  background-color: #202020;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding-left: 10px;
  flex-shrink: 0;
  align-items: center;
}

.pcui-panel-header-title {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  color: inherit;
  font-size: inherit;
  white-space: inherit;
  margin: 0 auto 0 0;
}

.pcui-panel-content {
  flex: 1;
}

.pcui-panel.pcui-collapsible {
  transition: height 100ms, width 100ms;
}
.pcui-panel.pcui-collapsible > .pcui-panel-header {
  cursor: pointer;
}
.pcui-panel.pcui-collapsible > .pcui-panel-header::before {
  content: "\e179";
  font-size: 14px;
  margin-right: 10px;
  text-align: center;
  color: #f60;
}
.pcui-panel.pcui-collapsible > .pcui-panel-header:hover {
  color: #fff;
}
.pcui-panel.pcui-collapsible > .pcui-panel-header:hover::before {
  color: #fff;
}
.pcui-panel.pcui-collapsible.pcui-panel-normal > .pcui-panel-header::before {
  content: "\e183";
  font-weight: 200;
}
.pcui-panel.pcui-collapsible > .pcui-panel-content {
  transition: visibility 100ms;
}
.pcui-panel.pcui-collapsible.pcui-collapsed {
  overflow: hidden;
}
.pcui-panel.pcui-collapsible.pcui-collapsed > .pcui-panel-content {
  visibility: hidden;
}
.pcui-panel.pcui-collapsible.pcui-collapsed > .pcui-panel-header::before {
  content: "\e180";
}
.pcui-panel.pcui-collapsible.pcui-collapsed.pcui-panel-normal > .pcui-panel-header::before {
  content: "\e184";
}
.pcui-panel.pcui-collapsible.pcui-collapsed.pcui-panel-horizontal > .pcui-panel-header {
  width: 2048px;
  transform: rotate(90deg);
  transform-origin: 0% 100%;
}
.pcui-panel.pcui-collapsible.pcui-collapsed.pcui-panel-horizontal > .pcui-panel-header::before {
  content: "\e177";
}
.pcui-panel.pcui-collapsible.pcui-collapsed.pcui-panel-horizontal.pcui-panel-normal > .pcui-panel-header::before {
  content: "\e181";
}
.pcui-panel.pcui-collapsible.pcui-collapsed.pcui-panel-horizontal > .pcui-panel-content {
  transition: none;
}

.pcui-panel.pcui-resizable.pcui-collapsible.pcui-collapsed > .pcui-resizable-handle {
  display: none;
}
.pcui-panel.pcui-resizable.pcui-resizable-resizing {
  transition: none;
}
.pcui-panel.pcui-resizable.pcui-resizable-resizing > .pcui-panel-content {
  transition: none;
}

.pcui-panel-header > .pcui-panel-sortable-icon {
  color: rgba(170, 170, 170, 0.5);
  transition: color 100ms;
  flex-direction: row;
  align-items: center;
  margin: 0 10px 0 0;
  height: 100%;
}
.pcui-panel-header > .pcui-panel-sortable-icon::before {
  content: " ";
  border-left: 1px solid #333;
  margin-right: 10px;
  height: calc(100% - 14px);
  flex-shrink: 0;
}
.pcui-panel-header > .pcui-panel-sortable-icon::after {
  content: ".. .. ..";
  white-space: normal;
  width: 12px;
  line-height: 5px;
  overflow: hidden;
  height: 24px;
  font-size: 22px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.pcui-panel:not(.pcui-disabled, .pcui-readonly) > .pcui-panel-header > .pcui-panel-sortable-icon:hover {
  color: #fff;
  cursor: move;
}

.pcui-panel:not(.pcui-collapsible) > .pcui-panel-header > .pcui-panel-sortable-icon::before {
  display: none;
}

.pcui-panel-remove {
  align-self: flex-end;
  order: 100;
}
.pcui-panel-remove::before {
  line-height: 30px;
}

.pcui-panel.pcui-readonly .pcui-panel-remove {
  display: none;
}

.pcui-panel-header > .pcui-button {
  flex-shrink: 0;
  margin: 1px;
  background-color: transparent;
  border: 0;
}

.pcui-panel.pcui-disabled > .pcui-panel-header {
  background-color: rgb(44.4, 44.4, 44.4);
  color: #999;
}

.pcui-subpanel {
  box-sizing: border-box;
  margin: 6px;
  border: 1px solid #202020;
  border-radius: 2px;
  background-color: #282828;
  color: #aaa;
  font-size: 12px;
}
.pcui-subpanel .pcui-button {
  background-color: #333;
  border-color: #202020;
}
.pcui-subpanel .pcui-button:not(.pcui-disabled, .pcui-readonly):hover, .pcui-subpanel .pcui-button:not(.pcui-disabled, .pcui-readonly):focus {
  background-color: #333;
}
.pcui-subpanel .pcui-button:not(.pcui-disabled, .pcui-readonly):active {
  background-color: #282828;
}

.pcui-overlay {
  width: auto;
  height: auto;
  inset: 0;
  z-index: 101;
  transition: opacity 100ms, visibility 100ms;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.pcui-overlay-inner {
  position: absolute;
  width: auto;
  height: auto;
  inset: 0;
  background-color: rgba(32, 32, 32, 0.7);
}

.pcui-overlay-clickable > .pcui-overlay-inner {
  cursor: pointer;
}

.pcui-overlay-transparent > .pcui-overlay-inner {
  background-color: transparent;
}

.pcui-overlay-content {
  background-color: #333;
  transition: width 100ms, height 100ms, margin-left 100ms, margin-top 100ms;
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.15);
}

.pcui-divider {
  height: 1px;
  background-color: #282828;
  margin: 6px 0;
}

.pcui-infobox {
  box-sizing: border-box;
  margin: 6px;
  padding: 12px;
  border: 1px solid #202020;
  border-radius: 2px;
  background-color: #282828;
  color: #aaa;
  font-size: 12px;
}
.pcui-infobox :first-child {
  color: #fff;
  margin-bottom: 2px;
}
.pcui-infobox[data-icon]:not(.pcui-hidden) {
  display: grid;
  grid: auto-flow/min-content 1fr;
}
.pcui-infobox[data-icon]:not(.pcui-hidden)::before {
  content: attr(data-icon);
  font-weight: 100;
  font-size: 16px;
  margin-right: 12px;
  vertical-align: middle;
  grid-column: 1;
  grid-row: 1/3;
}

.pcui-select-input {
  box-sizing: border-box;
  margin: 6px;
  border-radius: 2px;
  min-width: 0;
}

.pcui-select-input-container-value {
  background-color: #282828;
  transition: box-shadow 100ms, opacity 100ms;
}

.pcui-select-input-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: box-shadow 100ms;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.pcui-select-input-value:not(.pcui-hidden) {
  display: block;
}
.pcui-select-input-value {
  margin: 0;
  padding: 0 24px 0 8px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  transition: background-color 100ms, color 100ms;
}

.pcui-label.pcui-select-input-value {
  margin: 0;
}

.pcui-select-input-textinput {
  margin: 0;
}

.pcui-select-input-textinput:not(.pcui-disabled, .pcui-readonly, .pcui-error).pcui-focus, .pcui-select-input-textinput:not(.pcui-disabled, .pcui-readonly, .pcui-error):hover {
  box-shadow: none;
}

.pcui-label.pcui-select-input-icon {
  position: absolute;
  right: 6px;
  color: rgba(170, 170, 170, 0.5);
  pointer-events: none;
  transition: color 100ms;
  margin: 0;
  height: 24px;
  line-height: 24px;
}
.pcui-label.pcui-select-input-icon::after {
  content: "\e159";
  vertical-align: middle;
}

.pcui-select-input-has-disabled-value .pcui-container.pcui-select-input-list .pcui-label.pcui-selected::after {
  font-family: inherit;
  content: "fallback";
  color: #fff;
  font-size: 10px;
  position: absolute;
  right: 6px;
}

.pcui-label.pcui-select-input-disabled-value::after {
  content: "\e133" !important;
  position: absolute;
  right: 6px;
}

.pcui-select-input.pcui-open .pcui-select-input-shadow {
  box-shadow: 0 0 2px 1px rgba(255, 102, 0, 0.3);
}
.pcui-select-input.pcui-open .pcui-select-input-value {
  color: #fff;
  background-color: #202020;
}
.pcui-select-input.pcui-open .pcui-select-input-icon::after {
  color: #fff;
  content: "\e157";
}

.pcui-container.pcui-select-input-list {
  position: absolute;
  z-index: 1;
  top: 100%;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: #202020;
}
.pcui-container.pcui-select-input-list .pcui-label:not(.pcui-hidden) {
  display: block;
}
.pcui-container.pcui-select-input-list .pcui-label {
  font-size: 12px;
  height: 22px;
  line-height: 22px;
  padding: 0 24px 0 6px;
  margin: 0;
  transition: background-color 100ms, color 100ms;
}
.pcui-container.pcui-select-input-list .pcui-label.pcui-selected {
  color: #fff;
}
.pcui-container.pcui-select-input-list .pcui-label.pcui-selected::after {
  content: "\e133";
  color: rgba(170, 170, 170, 0.5);
  position: absolute;
  right: 6px;
}

.pcui-select-input-fit-height .pcui-select-input-list {
  top: initial;
  bottom: 100%;
}
.pcui-select-input-fit-height .pcui-select-input-shadow {
  top: initial;
  bottom: 0;
}

.pcui-select-input-tags:not(.pcui-select-input-tags-empty) {
  margin-top: 1px;
  flex-wrap: wrap;
}

.pcui-select-input-tag {
  background-color: #202020;
  align-items: center;
  border-radius: 2px;
  border: 1px solid #aaa;
  margin-right: 2px;
  margin-top: 2px;
  min-width: 0;
  height: 18px;
}
.pcui-select-input-tag > * {
  margin: 0;
  background-color: transparent;
  border: 0;
}
.pcui-select-input-tag > .pcui-label {
  padding: 0 5px 0 8px;
}
.pcui-select-input-tag > .pcui-button {
  padding: 0 5px;
  height: 18px;
  line-height: 18px;
  flex-shrink: 0;
}
.pcui-select-input-tag > .pcui-button:not(.pcui-disabled, .pcui-readonly):hover {
  box-shadow: none;
  color: #d34141;
}

.pcui-select-input-tag-not-everywhere > .pcui-label {
  opacity: 0.5;
}
.pcui-select-input-tag-not-everywhere > .pcui-label::before {
  content: "*";
  margin-right: 5px;
}

.pcui-select-input:not(.pcui-disabled, .pcui-readonly) .pcui-select-input-container-value:hover .pcui-select-input-shadow {
  box-shadow: 0 0 2px 1px rgba(255, 102, 0, 0.3);
}
.pcui-select-input:not(.pcui-disabled, .pcui-readonly) .pcui-select-input-container-value:hover .pcui-select-input-icon {
  color: rgba(170, 170, 170, 0.5);
}
.pcui-select-input:not(.pcui-disabled, .pcui-readonly).pcui-focus .pcui-select-input-shadow {
  box-shadow: 0 0 2px 1px rgba(255, 102, 0, 0.3);
}
.pcui-select-input:not(.pcui-disabled, .pcui-readonly).pcui-focus .pcui-select-input-icon {
  color: rgba(170, 170, 170, 0.5);
}
.pcui-select-input:not(.pcui-disabled, .pcui-readonly) .pcui-select-input-value:hover {
  color: #fff;
  background-color: #202020;
  cursor: pointer;
}
.pcui-select-input:not(.pcui-disabled, .pcui-readonly) .pcui-select-input-list > *:hover,
.pcui-select-input:not(.pcui-disabled, .pcui-readonly) .pcui-select-input-list > .pcui-select-input-label-highlighted {
  background-color: #202020;
  color: #fff;
  cursor: pointer;
}

.pcui-select-input-create-new > .pcui-label {
  padding-right: 6px;
}
.pcui-select-input-create-new > .pcui-label:last-child {
  flex-shrink: 0;
  margin-left: auto;
}
.pcui-select-input-create-new > .pcui-label:last-child::before {
  content: "\e120";
  margin-right: 6px;
}

.pcui-select-input.pcui-disabled {
  opacity: 0.4;
}

.pcui-select-input .pcui-label.pcui-disabled {
  opacity: 0.4;
}

.pcui-select-input.pcui-readonly .pcui-select-input-icon {
  display: none;
}
.pcui-select-input.pcui-readonly.pcui-select-input-multi .pcui-select-input-container-value {
  display: none;
}
.pcui-select-input.pcui-readonly.pcui-select-input-multi .pcui-select-input-tag > .pcui-button {
  display: none;
}
.pcui-select-input.pcui-readonly.pcui-select-input-allow-input:not(.pcui-select-input-multi) {
  opacity: 0.7;
}
.pcui-select-input.pcui-readonly.pcui-select-input-allow-input:not(.pcui-select-input-multi) .pcui-select-input-textinput::after {
  display: none;
}

@keyframes animation-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.pcui-spinner {
  display: inline-block;
  margin: 6px;
  vertical-align: middle;
}
.pcui-spinner > path {
  animation-name: animation-spin;
  animation-duration: 750ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center;
}
.pcui-spinner.pcui-error > path {
  animation: none;
  fill: rgb(255, 32.3, 32.3);
}
.pcui-spinner.pcui-error > path.pcui-spinner-highlight {
  fill: #ff7777;
}

.pcui-progress {
  height: 4px;
  background-color: #202020;
  transition: opacity 100ms;
  width: 100%;
}
.pcui-progress .pcui-progress-inner {
  width: 0%;
  height: inherit;
  background: #f60;
  background: linear-gradient(135deg, #ff6600 0%, #ff6600 25%, rgb(168.3, 67.32, 0) 26%, rgb(168.3, 67.32, 0) 50%, #ff6600 51%, #ff6600 75%, rgb(168.3, 67.32, 0) 76%, rgb(168.3, 67.32, 0) 100%);
  background-position: 0 0;
  background-size: 24px 24px;
  background-repeat: repeat;
  animation: pcui-progress-background 1000ms linear infinite;
}

.pcui-progress.pcui-error .pcui-progress-inner {
  background: #f60;
  background: linear-gradient(135deg, #ff7777 0%, #ff7777 25%, rgb(255, 32.3, 32.3) 26%, rgb(255, 32.3, 32.3) 50%, #ff7777 51%, #ff7777 75%, rgb(255, 32.3, 32.3) 76%, rgb(255, 32.3, 32.3) 100%);
  background-position: 0 0;
  background-size: 24px 24px;
  background-repeat: repeat;
  animation: none;
}

@keyframes pcui-progress-background {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 24px 0;
  }
}
.pcui-treeview {
  min-width: -moz-max-content;
  min-width: max-content;
}

.pcui-treeview-item {
  position: relative;
  padding-left: 24px;
}
.pcui-treeview-item::before {
  content: " ";
  position: absolute;
  background-color: rgb(45.5, 45.5, 45.5);
  width: 2px;
  left: 14px;
  top: -12px;
  bottom: 12px;
}
.pcui-treeview-item:last-child::before {
  height: 25px;
  bottom: auto;
}

.pcui-treeview-item.pcui-disabled > .pcui-treeview-item-contents > .pcui-treeview-item-text {
  opacity: 0.4;
}

.pcui-treeview-item-contents {
  position: relative;
  color: #aaa;
  margin-left: 3px;
  border: 1px solid transparent;
  align-items: center;
  height: 24px;
  box-sizing: border-box;
}
.pcui-treeview-item-contents:hover {
  cursor: pointer;
  color: #fff;
  background-color: #282828;
}
.pcui-treeview-item-contents:hover > .pcui-treeview-item-icon {
  color: #fff;
}

.pcui-treeview-item-icon {
  color: rgba(170, 170, 170, 0.5);
  margin: 0 2px 0 0;
  flex-shrink: 0;
}
.pcui-treeview-item-icon::before {
  content: " ";
  position: absolute;
  background-color: rgb(45.5, 45.5, 45.5);
  left: -12px;
  top: 10px;
  width: 24px;
  height: 2px;
}
.pcui-treeview-item-icon::after {
  content: attr(data-icon);
  display: inline-block;
  vertical-align: sub;
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.pcui-treeview-item-text {
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: opacity 100ms;
  padding-right: 8px;
  color: inherit;
}

.pcui-treeview-item-contents.pcui-treeview-item-selected {
  background-color: #202020;
  color: #fff;
}
.pcui-treeview-item-contents.pcui-treeview-item-selected > .pcui-treeview-item-icon {
  color: #fff;
}

.pcui-treeview-item:not(.pcui-treeview-item-empty) > .pcui-treeview-item-contents::before {
  content: "\e120";
  position: absolute;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  color: #aaa;
  background-color: #282828;
  top: 0;
  left: -24px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  margin: 3px;
  cursor: pointer;
  z-index: 1;
}
.pcui-treeview-item:not(.pcui-treeview-item-empty).pcui-treeview-item-open > .pcui-treeview-item-contents::before {
  content: "\e121";
}

.pcui-treeview:not(.pcui-treeview-filtering) .pcui-treeview-item:not(.pcui-treeview-item-open, .pcui-treeview-item-empty) > .pcui-treeview-item {
  display: none;
}

.pcui-treeview-item-dragged > .pcui-treeview-item-contents {
  background-color: rgba(40, 40, 40, 0.5);
  color: #fff;
}

.pcui-treeview-drag-handle {
  position: fixed;
  width: 32px;
  height: 20px;
  top: 0;
  bottom: 0;
  z-index: 4;
  margin-top: -1px;
  margin-left: -1px;
}
.pcui-treeview-drag-handle.before {
  border-top: 4px solid #f60;
  padding-right: 8px;
  height: 24px;
}
.pcui-treeview-drag-handle.inside {
  border: 4px solid #f60;
}
.pcui-treeview-drag-handle.after {
  border-bottom: 4px solid #f60;
  padding-right: 8px;
  height: 24px;
}

.pcui-treeview-item-contents::after {
  content: " ";
  display: block;
  clear: both;
}

.pcui-treeview-item.pcui-treeview-item-rename > .pcui-treeview-item-contents > .pcui-treeview-item-text {
  display: none;
}
.pcui-treeview-item.pcui-treeview-item-rename > .pcui-treeview-item-contents > .pcui-text-input {
  margin: 0;
  flex-grow: 1;
  box-shadow: none !important;
  border: 0;
  background-color: transparent;
}
.pcui-treeview-item.pcui-treeview-item-rename > .pcui-treeview-item-contents > .pcui-text-input > input {
  font-family: inherit;
  font-size: 14px;
  padding: 0;
}

.pcui-treeview.pcui-treeview-filtering .pcui-treeview-item {
  padding-left: 0;
}
.pcui-treeview.pcui-treeview-filtering .pcui-treeview-item::before {
  display: none;
}
.pcui-treeview.pcui-treeview-filtering .pcui-treeview-item:not(.pcui-treeview-filtering-result) > .pcui-treeview-item-contents {
  display: none;
}
.pcui-treeview.pcui-treeview-filtering .pcui-treeview-item-contents {
  margin-left: 0;
}

.pcui-treeview-filtering-result .pcui-treeview-item-contents::before,
.pcui-treeview-filtering-result .pcui-treeview-item-icon::before {
  display: none;
}

.pcui-label-group {
  align-items: center;
  flex-flow: row nowrap;
  margin: 6px;
}
.pcui-label-group > .pcui-label:first-child {
  width: 100px;
  flex-shrink: 0;
  margin: 0;
}
.pcui-label-group > .pcui-element:not(:first-child) {
  margin: 0 0 0 6px;
}
.pcui-label-group > .pcui-element:nth-child(2):not(.pcui-not-flexible) {
  flex: 1;
}
.pcui-label-group > .pcui-vector-input > .pcui-numeric-input {
  margin-top: 0;
  margin-bottom: 0;
}

.pcui-label-group-align-top > .pcui-label:first-child {
  align-self: flex-start;
  margin-top: 4px;
}

.pcui-label-group.pcui-disabled > .pcui-label:first-child {
  opacity: 0.4;
}

.pcui-gridview {
  flex-flow: row wrap;
  align-content: flex-start;
}

.pcui-gridview-vertical {
  flex-direction: column;
  align-content: flex-start;
}

.pcui-gridview-item {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 104px;
}
.pcui-gridview-item:not(.pcui-disabled) {
  cursor: pointer;
}
.pcui-gridview-item:not(.pcui-disabled):not(.pcui-gridview-item-selected, .pcui-gridview-radiobtn, .pcui-gridview-radiobtn-selected):hover {
  background-color: #202020;
}

.pcui-gridview-item-selected {
  background-color: #202020;
}

.pcui-gridview-item-text {
  max-width: 100px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0 2px;
}

.pcui-gridview-radio-container {
  box-sizing: border-box;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 104px;
}
.pcui-gridview-radio-container :not(.pcui-disabled) {
  cursor: pointer;
}

.pcui-menu {
  position: absolute;
  z-index: 401;
  inset: 0;
  width: auto;
  height: auto;
}

.pcui-menu-items {
  position: fixed;
  top: 0;
  left: 0;
}

.pcui-menu-item {
  position: relative;
  background-color: #202020;
  width: auto;
}

.pcui-menu-item-children {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 1;
  left: 100%;
  top: 0;
  opacity: 0;
  transition: opacity 100ms, visibility 100ms;
  visibility: hidden;
}

.pcui-menu-item:hover > .pcui-menu-item-children {
  opacity: 1;
  visibility: visible;
}

.pcui-menu-item-has-children > .pcui-menu-item-content > .pcui-label {
  padding-right: 32px;
}
.pcui-menu-item-has-children > .pcui-menu-item-content > .pcui-label::after {
  content: "\e160";
  position: absolute;
  right: 6px;
}

.pcui-menu-item-content {
  min-width: 158px;
  color: rgba(170, 170, 170, 0.5);
  border-bottom: 1px solid #242424;
  cursor: pointer;
}
.pcui-menu-item-content:hover {
  color: #fff;
  background-color: rgba(170, 170, 170, 0.5);
}
.pcui-menu-item-content > .pcui-label {
  transition: none;
}

.pcui-menu-item:last-child > .pcui-menu-item-content {
  border-bottom: none;
}

.pcui-menu-item-content > .pcui-label {
  color: inherit;
}
.pcui-menu-item-content > .pcui-label[data-icon]::before {
  content: attr(data-icon);
  font-weight: 100;
  font-size: inherit;
  margin-right: 6px;
  vertical-align: middle;
}

.pcui-menu-item.pcui-disabled .pcui-menu-item-content {
  cursor: default;
}
.pcui-menu-item.pcui-disabled .pcui-menu-item-content:hover {
  color: rgba(170, 170, 170, 0.5);
  background-color: transparent;
}
.pcui-menu-item.pcui-disabled .pcui-menu-item-content > .pcui-label {
  cursor: default;
  opacity: 0.4;
}

.pcui-radio-button {
  display: inline-block;
  position: relative;
  background-color: #202020;
  color: #fff;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  overflow: hidden;
  margin: 6px;
  transition: opacity 100ms, background-color 100ms, box-shadow 100ms;
}
.pcui-radio-button::before {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  width: 16px;
  min-width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #202020;
}
.pcui-radio-button::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  min-width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white;
}

.pcui-radio-button-selected::before {
  width: 16px;
  min-width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid white;
}
.pcui-radio-button-selected::after {
  content: "";
  display: block;
}

.pcui-radio-button.pcui-readonly {
  opacity: 0.7;
}

.pcui-radio-button.pcui-disabled {
  opacity: 0.4;
}

.pcui-radio-button:not(.pcui-disabled, .pcui-readonly):hover {
  cursor: pointer;
}
.pcui-radio-button:not(.pcui-disabled, .pcui-readonly):hover::before {
  background-color: #202020;
}

.pcui-array-input {
  margin: 6px;
  min-width: 0;
}
.pcui-array-input > .pcui-numeric-input {
  margin: 0 0 6px;
}

.pcui-array-input.pcui-array-empty > .pcui-numeric-input {
  margin: 0;
}

.pcui-array-input-item > * {
  margin-top: 1px;
  margin-bottom: 1px;
}
.pcui-array-input-item > *:first-child:not(.pcui-not-flexible, .pcui-panel-header) {
  flex: 1;
}
.pcui-array-input-item > .pcui-button {
  margin-left: -3px;
  margin-right: 0;
  background-color: transparent;
  border: 0;
}

.pcui-array-input-item-asset > .pcui-button {
  margin-top: 36px;
}

.pcui-array-input.pcui-readonly .pcui-array-input-item-delete {
  display: none;
}

.tooltips {
  position: absolute;
  background-color: #181818;
  border-radius: 3px;
  padding: 1px;
}

.tooltips-content {
  color: #b3aaac;
  margin: 2px;
}

.panel {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  background-color: #333;
}
.panel > .panel-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px;
  background-color: #282828;
}
.panel > .panel-header > .panel-header-icon {
  font-family: pc-icon;
  font-weight: bold;
  font-size: 13px;
  color: #f60;
}
.panel > .panel-header > .panel-header-label {
  color: #fff;
  font-weight: bold;
  flex-grow: 1;
}
.panel .panel-header-button {
  font-family: pc-icon;
  font-weight: bold;
  font-size: 13px;
  color: #f60;
  padding: 4px;
  flex-grow: 0;
  flex-shrink: 0;
  border-radius: 4px;
  text-align: center;
}
.panel .panel-header-button svg {
  color: #f60;
}
.panel .panel-header-button:hover {
  color: #ff9900;
  background-color: #181818;
  cursor: pointer;
}
.panel .panel-header-spacer {
  flex-grow: 1;
  padding: 0px;
  margin: 0px;
}

.menu-panel {
  position: absolute;
}
.menu-panel::not(.pcui-hidden) {
  display: flex;
}
.menu-panel {
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: #282828;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.8));
  will-change: transform;
}

.menu-row {
  display: flex;
  flex-direction: row;
  min-width: 180px;
  align-items: center;
  height: 32px;
  padding: 0px 8px;
}
.menu-row svg {
  color: #aaa;
}
.menu-row:hover:not(.pcui-disabled) {
  background-color: #181818;
  cursor: pointer;
}
.menu-row:hover:not(.pcui-disabled) > .menu-row-text, .menu-row:hover:not(.pcui-disabled) .menu-row-postscript, .menu-row:hover:not(.pcui-disabled) .menu-row-icon {
  color: #fff;
}
.menu-row:hover:not(.pcui-disabled) svg {
  color: #fff;
}
.menu-row.pcui-disabled > .menu-row-text, .menu-row.pcui-disabled .menu-row-postscript, .menu-row.pcui-disabled .menu-row-icon {
  color: rgba(170, 170, 170, 0.5);
}
.menu-row.pcui-disabled svg {
  color: rgba(170, 170, 170, 0.5);
}
.menu-row > .pcui-boolean-input {
  background-color: #181818;
  border-radius: 2px;
}
.menu-row > .pcui-boolean-input.pcui-boolean-input-ticked {
  background-color: #f60;
}
.menu-row > .pcui-boolean-input.pcui-boolean-input-ticked::after {
  color: #fff;
}

.menu-row-icon {
  font-family: "pc-icon" !important;
}

.menu-row-text {
  flex-grow: 1;
}

.menu-row-postscript {
  color: rgba(170, 170, 170, 0.5);
}

.menu-row-separator {
  height: 1px;
  background-color: #555;
}

#menu {
  position: absolute;
}

#menu-bar {
  transition: width 0.1s ease;
  position: absolute;
  top: 24px;
  left: 24px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #333;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#app-icon {
  width: 54px;
  font-family: "pc-icon";
  cursor: pointer;
}

#menu-arrow {
  display: none;
}

#menu-container {
  display: flex;
  flex-direction: column;
}

#menu-bar-options {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.menu-icon {
  width: 16px;
  height: 16px;
  padding: 16px 10px;
  margin: 0px;
  flex-grow: 1;
  color: #aaa;
  cursor: pointer;
}
.menu-icon:hover {
  color: #fff;
  background-color: #282828;
}

.menu-option {
  padding: 16px 20px;
  margin: 0px;
  flex-grow: 1;
  text-align: center;
  text-overflow: clip;
  background-color: #333;
  cursor: pointer;
}
.menu-option:hover {
  color: #fff;
  background-color: #282828;
}

.collapsed #menu-bar {
  width: 90px;
}
.collapsed #menu-collapse {
  display: none;
}
.collapsed #menu-arrow {
  display: block;
}
.collapsed .menu-option {
  display: none;
}

#scene-panel {
  top: 102px;
  left: 24px;
  width: 320px;
}

.collapsed #scene-panel {
  display: none;
}

.splat-list-container {
  max-height: 300px;
  overflow: auto;
}

#view-panel {
  top: 50%;
  transform: translate(0, -50%);
  right: 102px;
  width: 320px;
  flex-direction: column;
}
#view-panel:not(.pcui-hidden) {
  display: flex;
}
#view-panel > .view-panel-row {
  display: flex;
  flex-direction: row;
  padding: 2px;
  height: 28px;
}
#view-panel > .view-panel-row > .view-panel-row-label {
  flex-grow: 1;
}
#view-panel > .view-panel-row > .view-panel-row-toggle {
  background-color: #282828;
}
#view-panel > .view-panel-row > .view-panel-row-toggle::after {
  background-color: #b3aaac;
}
#view-panel > .view-panel-row > .view-panel-row-toggle.pcui-boolean-input-ticked {
  background-color: #f60;
}
#view-panel > .view-panel-row > .view-panel-row-toggle.pcui-boolean-input-ticked::after {
  background-color: white;
}
#view-panel > .view-panel-row > .view-panel-row-slider {
  margin: 0px;
}
#view-panel > .view-panel-row > .view-panel-row-slider > .pcui-slider-container > .pcui-slider-bar > .pcui-slider-handle {
  background-color: #b3aaac;
  border-radius: 3px;
}
#view-panel > .view-panel-row > .view-panel-row-pickers {
  display: flex;
  flex-direction: row;
  margin: 2px 2px;
  width: 185px;
  justify-content: space-between;
}
#view-panel > .view-panel-row > .view-panel-row-pickers > .view-panel-row-picker {
  margin: 0px 0px;
  padding: 0px;
  height: 24px;
}
#view-panel > .view-panel-row > .view-panel-row-select {
  width: 187px;
  margin: 0;
}

#color-panel {
  top: 50%;
  transform: translate(0, -50%);
  right: 102px;
  width: 320px;
  flex-direction: column;
}
#color-panel:not(.pcui-hidden) {
  display: flex;
}
#color-panel > .color-panel-row {
  display: flex;
  flex-direction: row;
  padding: 2px;
  height: 28px;
}
#color-panel > .color-panel-row > .color-panel-row-label {
  flex-grow: 1;
}
#color-panel > .color-panel-row > .color-panel-row-picker {
  margin: 0px 0px;
  padding: 0px;
  height: 24px;
}
#color-panel > .color-panel-row > .color-panel-row-slider {
  width: 220px;
  margin: 0px;
}
#color-panel > .color-panel-row > .color-panel-row-slider > .pcui-slider-container > .pcui-slider-bar > .pcui-slider-handle {
  background-color: #b3aaac;
  border-radius: 3px;
}
#color-panel > .color-panel-control-row {
  display: flex;
  flex-direction: row;
  background-color: #282828;
}

.splat-list {
  min-height: 80px;
  padding: 4px 0px;
}
.splat-list .splat-item {
  display: flex;
  flex-direction: row;
  padding: 2px;
}
.splat-list .splat-item:hover:not(.selected).visible {
  cursor: pointer;
}
.splat-list .splat-item.selected {
  background-color: #202020;
}
.splat-list .splat-item #splat-edit {
  margin: 0;
  flex-grow: 1;
  flex-shrink: 1;
}
.splat-list .splat-item .splat-item-text {
  flex-grow: 1;
  flex-shrink: 1;
}
.visible .splat-list .splat-item .splat-item-text:hover:not(.selected) {
  color: #fff;
}
.selected .splat-list .splat-item .splat-item-text {
  color: #fff;
}
.splat-list .splat-item .splat-item-visible {
  flex-grow: 0;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #aaa;
  cursor: pointer;
}
.visible .splat-list .splat-item .splat-item-visible {
  color: #aaa;
}
.splat-list .splat-item .splat-item-visible:hover {
  color: #fff;
}
.splat-list .splat-item .splat-item-delete {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  color: #aaa;
  cursor: pointer;
}
.splat-list .splat-item .splat-item-delete:hover {
  color: #fff;
}

#transform {
  display: flex;
  flex-direction: column;
  background-color: #333;
  padding: 0px 6px 12px 6px;
}

.transform-row {
  height: 32px;
  line-height: 32px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
}

.transform-label {
  width: 70px;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0px;
}

.transform-axis-label {
  text-align: center;
}

.transform-expand {
  flex-grow: 1;
}

#transform > div > div.pcui-vector-input {
  margin: 0px;
  gap: 10px;
  height: 22px;
}

#transform > div > div.pcui-numeric-input {
  margin: 0px;
  height: 22px;
  line-height: 22px;
}
#transform > div > div.pcui-numeric-input > input {
  padding: 0px;
  margin: 0px 0px 0px 4px;
  height: 22px;
}

#transform > div > div > div.pcui-numeric-input {
  margin: 0px;
  height: 22px;
  line-height: 22px;
}
#transform > div > div > div.pcui-numeric-input > input {
  padding: 0px;
  margin: 0px 0px 0px 4px;
  height: 22px;
}

#bottom-toolbar {
  position: absolute;
  left: 50%;
  bottom: 24px;
  height: 54px;
  transform: translate(-50%, 0);
  padding: 0px 8px;
  border-radius: 8px;
  background-color: #282828;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bottom-toolbar-button, .bottom-toolbar-tool, .bottom-toolbar-toggle {
  width: 38px;
  height: 38px;
  margin: 0px 1px;
  padding: 0px;
  border: 0px;
  border-radius: 2px;
}
.bottom-toolbar-button::before, .bottom-toolbar-tool::before, .bottom-toolbar-toggle::before {
  font-size: 16px !important;
  line-height: 100%;
}
.bottom-toolbar-button svg, .bottom-toolbar-tool svg, .bottom-toolbar-toggle svg {
  color: #b3aaac;
}

.bottom-toolbar-separator {
  width: 2px;
  height: 38px;
  margin: 0px 10px;
  background-color: #333;
}

.bottom-toolbar-button svg {
  color: #b3aaac;
}

.bottom-toolbar-tool {
  background-color: #333;
}
.bottom-toolbar-tool svg {
  color: #b3aaac;
}
.bottom-toolbar-tool.active {
  color: white;
  background-color: #f60 !important;
}
.bottom-toolbar-tool.active svg {
  color: white;
}
.bottom-toolbar-tool.disabled {
  background-color: #282828;
}
.bottom-toolbar-tool.disabled svg {
  color: #7c7678;
}

.bottom-toolbar-toggle.active::before {
  color: #f60;
}
.bottom-toolbar-toggle.active svg {
  color: #f60;
}

#right-toolbar {
  position: absolute;
  right: 24px;
  top: 50%;
  width: 54px;
  transform: translate(0, -50%);
  padding: 8px 0px;
  border-radius: 8px;
  background-color: #282828;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#right-toolbar #right-toolbar-mode-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#right-toolbar #right-toolbar-mode-toggle svg {
  width: 20px;
  height: 20px;
}
#right-toolbar > .right-toolbar-button, #right-toolbar .right-toolbar-tool, #right-toolbar .right-toolbar-toggle {
  width: 38px;
  height: 38px;
  margin: 1px 1px;
  padding: 0px;
  border: 0px;
  border-radius: 2px;
}
#right-toolbar > .right-toolbar-button::before, #right-toolbar .right-toolbar-tool::before, #right-toolbar .right-toolbar-toggle::before {
  font-size: 16px !important;
  line-height: 100%;
}
#right-toolbar > .right-toolbar-button svg, #right-toolbar .right-toolbar-tool svg, #right-toolbar .right-toolbar-toggle svg {
  color: #b3aaac;
}
#right-toolbar > .right-toolbar-separator {
  width: 38px;
  height: 2px;
  margin: 4px 0px;
  background-color: #444;
}
#right-toolbar > .right-toolbar-button svg {
  color: #b3aaac;
}
#right-toolbar > .right-toolbar-tool {
  background-color: #333;
}
#right-toolbar > .right-toolbar-tool svg {
  color: #b3aaac;
}
#right-toolbar > .right-toolbar-tool.active {
  color: white;
  background-color: #f60 !important;
}
#right-toolbar > .right-toolbar-tool.active svg {
  color: white;
}
#right-toolbar > .right-toolbar-tool.disabled {
  background-color: #282828;
}
#right-toolbar > .right-toolbar-tool.disabled svg {
  color: #7c7678;
}
#right-toolbar > .right-toolbar-toggle.active::before {
  color: #f60;
}
#right-toolbar > .right-toolbar-toggle.active svg {
  color: #f60;
}

#select-toolbar {
  position: absolute;
  left: 50%;
  bottom: 100px;
  height: 54px;
  transform: translate(-50%, 0);
  padding: 0px 8px;
  border-radius: 8px;
  background-color: #333;
}
#select-toolbar:not(.pcui-hidden) {
  display: flex;
}
#select-toolbar {
  flex-direction: row;
  align-items: center;
}
#select-toolbar .select-toolbar-button {
  height: 38px;
  padding: 0px 16px;
  border-radius: 2px;
}

#data-panel {
  width: 100%;
  height: 320px;
}

#data-panel-popup-container {
  position: absolute;
  left: 50px;
  top: 50px;
}

#data-panel-popup-label {
  background-color: #282828;
  color: #fff;
}

#data-controls-container {
  width: 256px;
  flex-grow: 0;
  flex-shrink: 0;
  overflow-y: auto;
}

#data-controls {
  width: 100%;
}

.control-parent {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.control-label {
  width: 100px;
  flex-shrink: 0;
  flex-grow: 0;
  line-height: 32px;
  margin: 0px 6px 0px 6px;
}

.control-element {
  flex-shrink: 0;
  flex-grow: 0;
}

.control-element-expand {
  flex-grow: 1;
}

.control-element.pcui-boolean-input {
  margin-top: 10px;
}

#histogram-container {
  flex-grow: 1;
  flex-shrink: 1;
}

#histogram-canvas {
  image-rendering: pixelated;
}

#histogram-svg {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#popup {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  pointer-events: all;
}
#popup #popup-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 320px;
  max-width: 480px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background-color: #333;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.8));
  will-change: transform;
}
#popup #popup-dialog #popup-header {
  height: 32px;
  line-height: 32px;
  margin: 0px;
  padding: 0px 8px;
  font-weight: bold;
  color: #fff;
  background-color: #202020;
}
#popup #popup-dialog #popup-text {
  text-wrap: wrap;
  text-align: center;
  padding: 20px 10px;
  color: #fff;
}
#popup #popup-dialog #popup-text::before {
  font-family: "pc-icon";
  font-size: 16px;
  margin: 0px 10px;
  color: #fff;
}
#popup #popup-dialog #popup-text.error::before {
  content: "\e218";
  color: #fb222f;
}
#popup #popup-dialog #popup-text.info::before {
  content: "\e400";
}
#popup #popup-dialog #popup-text.yesno::before {
  content: "\e138";
}
#popup #popup-dialog #popup-text.okcancel::before {
  content: "\e138";
}
#popup #popup-dialog #popup-link-row {
  margin: 20px 10px;
}
#popup #popup-dialog #popup-link-row:not(.pcui-hidden) {
  display: flex;
}
#popup #popup-dialog #popup-link-row #popup-link-text {
  width: 360px;
  height: 32px;
  line-height: 32px;
  background-color: #282828;
  text-align: center;
}
#popup #popup-dialog #popup-link-row #popup-link-text a {
  color: #f60;
  font-weight: bold;
  font-size: 14px;
  text-decoration-line: none;
}
#popup #popup-dialog #popup-link-row #popup-link-copy {
  width: 32px;
  height: 32px;
  line-height: 24px;
  font-family: "pc-icon";
}
#popup #popup-dialog #popup-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 6px;
}
#popup #popup-dialog #popup-buttons .popup-button {
  height: 40px;
  width: 120px;
  border-radius: 4px;
  background-color: #202020;
}
#popup #popup-dialog #popup-buttons .popup-button:hover {
  color: #fff;
  background-color: #f60;
}

#mode-toggle {
  position: absolute;
  left: calc(50% - 60px);
  top: 0px;
  width: 120px;
  padding: 0px 8px;
  border-radius: 0px 0px 8px 8px;
  background-color: #282828;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#mode-toggle.centers-mode #rings-icon, #mode-toggle.centers-mode #rings-text {
  display: none;
}
#mode-toggle.rings-mode #centers-icon, #mode-toggle.rings-mode #centers-text {
  display: none;
}
#mode-toggle #centers-icon {
  color: #f60;
}
#mode-toggle #rings-icon {
  color: #f60;
}
#mode-toggle:hover {
  color: #fff;
}

.settings-dialog {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  pointer-events: all;
}
.settings-dialog #dialog {
  position: absolute;
  width: 400px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background-color: #333;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.8));
  will-change: transform;
}
.settings-dialog #dialog #header {
  height: 32px;
  margin: 0;
  padding: 0px 12px;
  background-color: #202020;
}
.settings-dialog #dialog #header #icon {
  vertical-align: middle;
  color: #FFAF50;
}
.settings-dialog #dialog #header #text {
  margin: 0;
  padding: 0px 12px;
  line-height: 32px;
  font-weight: bold;
  color: #fff;
}
.settings-dialog #dialog #content {
  min-height: 100px;
  padding: 12px;
}
.settings-dialog #dialog #content .row {
  line-height: 24px;
  padding-bottom: 8px;
}
.settings-dialog #dialog #content .row:not(.pcui-hidden) {
  display: flex;
}
.settings-dialog #dialog #content .row .label {
  width: 140px;
  margin: 0px;
  flex-grow: 0;
  flex-shrink: 0;
}
.settings-dialog #dialog #content .row .select, .settings-dialog #dialog #content .row .color-picker, .settings-dialog #dialog #content .row .slider, .settings-dialog #dialog #content .row .text-input, .settings-dialog #dialog #content .row .boolean, .settings-dialog #dialog #content .row .text-area {
  margin: 0;
  flex-grow: 1;
}
.settings-dialog #dialog #content .row .boolean {
  margin: 5px 0 0 0;
  flex-grow: 0;
}
.settings-dialog #dialog #content .row .slider .pcui-slider-bar {
  margin-right: 0px;
  width: calc(100% - 9px);
}
.settings-dialog #dialog #content .row .vector-input {
  margin: 0;
  flex-grow: 1;
}
.settings-dialog #dialog #content .row .vector-input div.pcui-numeric-input {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 22px;
}
.settings-dialog #dialog #content .row .vector-input div.pcui-numeric-input > .pcui-numeric-input-slider-control::after {
  top: -6px;
}
.settings-dialog #dialog #footer {
  display: flex;
  justify-content: center;
  padding-bottom: 4px;
}
.settings-dialog #dialog #footer .button {
  width: 120px;
  height: 30px;
  border-radius: 4px;
}
.settings-dialog #dialog #footer .button:hover {
  color: #fff;
  background-color: #f60;
}

#spinner-container {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  pointer-events: all;
  cursor: progress;
}
#spinner-container .spinner::before, #spinner-container .spinner::after {
  border: 2px solid;
  border-left: none;
  box-sizing: border-box;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  transform-origin: 0% 50%;
  animation: spinner-spin 1s linear 0s infinite;
  border-width: 3px;
  border-color: #aaa;
}
#spinner-container .spinner::before {
  width: 15px;
  height: 30px;
  border-radius: 0 30px 30px 0;
}
#spinner-container .spinner::after {
  width: 8px;
  height: 16px;
  border-radius: 0 16px 16px 0;
  animation-direction: reverse;
}
@keyframes spinner-spin {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

#progress-container {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  pointer-events: all;
  cursor: progress;
}
#progress-container #dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background-color: #333;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.8));
  will-change: transform;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#progress-container #dialog #header {
  height: 32px;
  line-height: 32px;
  margin: 0px;
  padding: 0px 8px;
  font-weight: bold;
  color: #aaa;
  background-color: #202020;
}
#progress-container #dialog #content {
  width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
#progress-container #dialog #content #text {
  width: 100%;
  text-wrap: wrap;
  color: #aaa;
}
#progress-container #dialog #content #bar {
  width: 100%;
  height: 12px;
  margin: 16px 0px 0px 0px;
  border: 1px solid #282828;
  border-radius: 6px;
  background-color: #505050;
}
#progress-container .pulsate {
  animation-name: color;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: ease;
}
@keyframes color {
  to {
    background-color: #404040;
  }
}

#export-popup {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  pointer-events: all;
}
#export-popup #dialog {
  position: absolute;
  width: 380px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background-color: #333;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.8));
  will-change: transform;
}
#export-popup #dialog #header {
  height: 32px;
  line-height: 32px;
  margin: 0px;
  padding: 0px 12px;
  font-weight: bold;
  color: #fff;
  background-color: #202020;
}
#export-popup #dialog #header #icon {
  vertical-align: middle;
  color: #FFAF50;
}
#export-popup #dialog #content {
  min-height: 60px;
  padding: 12px;
}
#export-popup #dialog #content .row {
  height: 24px;
  line-height: 24px;
  padding-bottom: 8px;
}
#export-popup #dialog #content .row:not(.pcui-hidden) {
  display: flex;
}
#export-popup #dialog #content .row .label {
  margin: 0px;
  flex-grow: 1;
  width: 180px;
}
#export-popup #dialog #content .row .select, #export-popup #dialog #content .row .color-picker, #export-popup #dialog #content .row .slider, #export-popup #dialog #content .row .text-entry {
  margin: 0px;
  width: 100%;
}
#export-popup #dialog #content .row .text-input {
  margin: 0px;
  width: 100%;
}
#export-popup #dialog #footer {
  display: flex;
  justify-content: center;
  padding-bottom: 4px;
}
#export-popup #dialog #footer .button {
  width: 120px;
  height: 30px;
  border-radius: 4px;
}
#export-popup #dialog #footer .button:hover {
  color: #fff;
  background-color: #f60;
}

#timeline-panel {
  flex-direction: column;
}
#timeline-panel:not(.pcui-hidden) {
  display: flex;
}
#timeline-panel > #controls-wrap {
  display: flex;
  flex-direction: row;
  background-color: #333;
  justify-content: center;
  padding: 1px;
}
#timeline-panel > #controls-wrap > #button-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#timeline-panel > #controls-wrap > #button-controls > .button {
  font-family: pc-icon;
  font-weight: bold;
  font-size: 13px;
  width: 36px;
  height: 24px;
  margin: 1px;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 0;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
}
#timeline-panel > #controls-wrap > #button-controls > .button:hover {
  color: #ff9900;
  cursor: pointer;
  box-shadow: none;
  border-color: rgba(255, 153, 0, 0.5333333333);
}
#timeline-panel > #controls-wrap > .spacer {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  justify-content: flex-end;
}
#timeline-panel > #controls-wrap > .spacer > #settings-controls {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-right: 1px;
}
#timeline-panel > #controls-wrap > .spacer > #settings-controls > #speed {
  margin: 0;
  width: 80px;
}
#timeline-panel > #controls-wrap > .spacer > #settings-controls > #totalFrames {
  margin: 0;
  width: 80px;
}
#timeline-panel > #controls-wrap > .spacer > #settings-controls > #smoothness {
  margin: 0;
  width: 60px;
}
#timeline-panel > #frame-slider {
  height: 24px;
  margin: 0px;
}
#timeline-panel > #frame-slider > .pcui-numeric-input {
  display: none;
  flex-grow: 0;
  margin: 0;
}
#timeline-panel > #frame-slider > .pcui-numeric-input > input {
  width: 40px;
}
#timeline-panel > #ticks {
  height: 38px;
  background-color: #181818;
}
#timeline-panel > #ticks > #ticks-area {
  width: 100%;
  height: 100%;
}
#timeline-panel > #ticks > #ticks-area > .time-label {
  position: absolute;
  font-size: 12px;
  bottom: 1px;
  transform: translate(-50%, 0);
  padding: 2px;
  pointer-events: none;
  color: #b3aaac;
}
#timeline-panel > #ticks > #ticks-area > .time-label.cursor {
  color: white;
  background-color: #f60;
  padding: 2px 6px;
  border-radius: 4px;
}
#timeline-panel > #ticks > #ticks-area > .time-label.key {
  background-color: #FFAF50;
  bottom: 22px;
  width: 8px;
  height: 8px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  cursor: pointer;
  pointer-events: auto;
}
#timeline-panel > #ticks > #ticks-area > .time-label.dragging {
  cursor: ew-resize;
}

* {
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overscroll-behavior: none;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-height: 100%;
  background-color: #333;
  overflow: hidden;
  touch-action: none;
}

#app-container {
  width: 100%;
  height: 100%;
}

#editor-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

#main-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

#sep-container {
  background-color: #202020;
}

#sep-container > span {
  color: white;
}

#coord-space-toggle.active {
  background-color: #282828 !important;
  color: #f60;
}

#file-selector {
  display: none;
}

#file-menu {
  position: absolute;
}

.file-menu-item span {
  padding: 6px;
  color: #aaa !important;
  font-size: 14px;
}

#shortcuts-panel {
  background-color: #282828;
}

#shortcuts-container {
  margin: 10px;
}

.shortcut-key {
  width: 80px;
  text-align: right;
}

.shortcut-header {
  background-color: #202020;
}

#app-label {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #fff;
  text-shadow: 1px 1px 4px black;
}

#cursor-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #fff;
  text-shadow: 1px 1px 4px black;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
}
#cursor-label:hover {
  border: 1px solid #f60;
  background-color: rgba(0, 0, 0, 0.25);
}

.select-svg {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

#view-cube-container {
  position: absolute;
  width: 140px;
  height: 140px;
  right: 0px;
  top: 0px;
  pointer-events: none;
}

#mask-canvas {
  display: none;
  position: absolute;
  opacity: 0.4;
}

#canvas-container {
  width: 100%;
  display: flex;
  border: 0;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

#tools-container {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

#canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

#tooltips-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#top-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pcui-input-element[placeholder]::after {
  color: rgba(170, 170, 170, 0.5);
}

.pcui-vector-input {
  margin-left: 6px;
  margin-right: 6px;
}

/* scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #20292b;
}

::-webkit-scrollbar-thumb {
  background: #5b7073;
}

::-webkit-scrollbar-thumb:hover {
  background: #f60;
}

::-webkit-scrollbar-corner {
  background: #2c393c;
}

.font-thin {
  font-family: "Proxima Nova Thin", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 100;
  font-style: normal;
}

.font-light {
  font-family: "Proxima Nova Light", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-style: normal;
}

.font-regular {
  font-family: "Proxima Nova Regular", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}

.font-bold {
  font-family: "Proxima Nova Bold", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
}