/* Source: https://github.com/mobify/spline/blob/master/dist/functions/reverse-gradient/_reverse-gradient.scss */
.editor-input-horizontal .editor-input {
  margin-right: 6px;
  display: inline-block; }

.editor-input-horizontal .editor-input:last-child {
  margin-right: 0px; }

.editor-input-vertical .editor-input {
  margin-bottom: 4px; }

.editor-input-vertical .editor-input:last-child {
  margin-bottom: 0px; }

.editor-input-label {
  font-size: 12px; }

.editor-input-label-inline {
  display: inline-block;
  margin-right: 6px; }

.editor-input-text {
  padding: 2px 6px;
  border-radius: 7px;
  color: black;
  font-size: 12px;
  border: 1px solid #454545;
  box-shadow: inset 1px 1px rgba(94, 94, 94, 0.74), inset -1px -1px rgba(189, 189, 189, 0.27);
  font-family: "Noto Sans", sans-serif;
  background: linear-gradient(to bottom, #A5A5A5 0%, #B5B5B5 100%); }

.editor-input-button {
  padding: 2px 6px;
  border-radius: 7px;
  color: black;
  font-size: 12px;
  border: 1px solid #454545;
  box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74), inset 1px 1px rgba(189, 189, 189, 0.27);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background: linear-gradient(to bottom, #A6A6A6 0%, #8E8E8E 100%);
  cursor: default; }
  .editor-input-button:active {
    box-shadow: inset 1px 1px rgba(94, 94, 94, 0.74), inset -1px -1px rgba(189, 189, 189, 0.27);
    background: linear-gradient(to bottom, #A6A6A6 100%, #8E8E8E 0%); }

.editor-input-buttonset-horizontal .editor-input-button {
  display: inline-block;
  margin-right: 0px; }
  .editor-input-buttonset-horizontal .editor-input-button:first-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px; }
  .editor-input-buttonset-horizontal .editor-input-button:last-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left-width: 0px; }
  .editor-input-buttonset-horizontal .editor-input-button:not(:first-child):not(:last-child) {
    border-radius: 0px;
    border-left-width: 0px; }

.editor-input-buttonset-vertical .editor-input-button {
  width: 180px; }
  .editor-input-buttonset-vertical .editor-input-button:first-child {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; }
  .editor-input-buttonset-vertical .editor-input-button:last-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-width: 0px; }
  .editor-input-buttonset-vertical .editor-input-button:not(:first-child):not(:last-child) {
    border-radius: 0px;
    border-top-width: 0px; }

.editor-panel-header, .editor-control-bar {
  box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74), inset 1px 1px rgba(189, 189, 189, 0.27);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background: #686868;
  cursor: default; }

.editor-panel-header {
  font-weight: bold;
  padding: 3px 5px; }

.editor-control-bar {
  box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74), inset 1px 1px rgba(189, 189, 189, 0.27), 0px 1px 1px 0px rgba(54, 54, 54, 0.79);
  z-index: 999;
  padding: 4px 6px; }

/*
    font-family: 'Open Sans', sans-serif;
    font-family: 'Catamaran', sans-serif;
    font-family: 'Noto Sans', sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
*/
body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0px;
  padding: 0px;
  color: black; }

h1 {
  margin: 0px; }

.editor-app {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto 1fr;
  width: 100vw;
  height: 100vh; }
  .editor-app > .header {
    grid-column-start: 1;
    grid-column-end: 3;
    padding: 6px 8px;
    background: linear-gradient(to bottom, #232323 0%, #161616 100%);
    color: #aad400ff; }
    .editor-app > .header .logo {
      margin-right: 8px; }
    .editor-app > .header .name {
      position: relative;
      top: -2px; }
  .editor-app .menu {
    display: grid;
    grid-template-rows: auto 1fr;
    box-sizing: border-box;
    background-color: #010801;
    border-right: 1px solid #454545;
    background: #737373; }
    .editor-app .menu .item-browser {
      box-shadow: inset 1px 1px rgba(94, 94, 94, 0.74), inset -1px -1px rgba(189, 189, 189, 0.27);
      overflow-y: auto; }
      .editor-app .menu .item-browser .item:nth-child(even) {
        font-size: 14px;
        padding: 4px 6px;
        background-color: #797979; }
      .editor-app .menu .item-browser .item:nth-child(odd) {
        font-size: 14px;
        padding: 4px 6px;
        background-color: #737373; }
      .editor-app .menu .item-browser .item .icon {
        position: relative;
        top: 1px;
        margin-right: 6px; }
  .editor-app .canvas {
    box-sizing: border-box;
    padding: 16px;
    background-color: #373737;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.62); }
    .editor-app .canvas .node {
      font-size: 13px;
      display: grid;
      grid-template-columns: auto 8px auto 8px auto;
      grid-template-rows: auto auto 8px;
      position: absolute;
      top: 80px;
      left: 400px; }
      .editor-app .canvas .node .editor-panel-header, .editor-app .canvas .node .background {
        grid-column-start: 2;
        grid-column-end: 5; }
      .editor-app .canvas .node .editor-panel-header {
        cursor: move;
        grid-row-start: 1;
        grid-row-end: 2; }
      .editor-app .canvas .node .background {
        grid-row-start: 2;
        grid-row-end: 4;
        background-color: #737373;
        box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74), inset 1px 1px rgba(189, 189, 189, 0.27), 2px 2px 2px 0px rgba(28, 28, 28, 0.79); }
      .editor-app .canvas .node .inputs, .editor-app .canvas .node .left-connectors, .editor-app .canvas .node .right-connectors {
        grid-row-start: 2;
        grid-row-end: 3;
        z-index: 2; }
      .editor-app .canvas .node .inputs {
        grid-column-start: 3;
        grid-column-end: 4;
        padding: 8px 16px; }
        .editor-app .canvas .node .inputs .label, .editor-app .canvas .node .inputs .box {
          display: inline-block; }
        .editor-app .canvas .node .inputs .label {
          margin-right: 8px; }
      .editor-app .canvas .node .left-connectors, .editor-app .canvas .node .right-connectors {
        z-index: 2; }
        .editor-app .canvas .node .left-connectors .connector, .editor-app .canvas .node .right-connectors .connector {
          margin: 6px 0px; }
          .editor-app .canvas .node .left-connectors .connector .bullet, .editor-app .canvas .node .left-connectors .connector .description, .editor-app .canvas .node .right-connectors .connector .bullet, .editor-app .canvas .node .right-connectors .connector .description {
            display: inline-block; }
          .editor-app .canvas .node .left-connectors .connector .bullet, .editor-app .canvas .node .right-connectors .connector .bullet {
            width: 16px;
            height: 16px;
            background-color: #8d8d8d;
            border: 1px solid #454545;
            border-radius: 8px;
            position: relative;
            top: 5px; }
          .editor-app .canvas .node .left-connectors .connector .description, .editor-app .canvas .node .right-connectors .connector .description {
            font-size: 12px;
            background-color: rgba(180, 180, 180, 0.6);
            padding: 2px 4px;
            border-radius: 4px; }
      .editor-app .canvas .node .left-connectors {
        grid-column-start: 1;
        grid-column-end: 3;
        text-align: right; }
        .editor-app .canvas .node .left-connectors .bullet {
          margin-left: 6px; }
      .editor-app .canvas .node .right-connectors {
        grid-column-start: 4;
        grid-column-end: 6; }
        .editor-app .canvas .node .right-connectors .bullet {
          margin-right: 6px; }