* {
  box-sizing: border-box; }

html {
  height: 100%;
  min-height: 100%;
  overflow: hidden; }

body {
  margin: 0 auto;
  height: 100%;
  min-height: 100%;
  background: #111; }

.nodeEditorRootWrapper {
  user-select: none;
  touch-action: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  resize: both; }
  .nodeEditorRootWrapper .layout {
    position: relative;
    width: 100%;
    height: 100%;
    background: #161c25;
    overflow: hidden; }
    .nodeEditorRootWrapper .layout .scene {
      position: absolute;
      background-color: #161c25;
      background-size: 100px 100px;
      z-index: 1;
      background-image: linear-gradient(to right, #222a36 1px, transparent 1px), linear-gradient(to bottom, #222a36 1px, transparent 1px); }
    .nodeEditorRootWrapper .layout .sceneUI {
      width: 100%;
      height: 100%;
      position: relative;
      pointer-events: none !important;
      z-index: 20000; }
      .nodeEditorRootWrapper .layout .sceneUI g {
        pointer-events: none; }
        .nodeEditorRootWrapper .layout .sceneUI g .line {
          stroke-linecap: round;
          transition: stroke 0.3s; }
        .nodeEditorRootWrapper .layout .sceneUI g .lineBg {
          animation: dashMove 2s linear infinite;
          stroke-linecap: round; }
        .nodeEditorRootWrapper .layout .sceneUI g .lineTemp {
          stroke-linecap: round; }

@keyframes dashMove {
  to {
    stroke-dashoffset: 0; } }
    .nodeEditorRootWrapper .layout .contextMenuWrapper {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 50000;
      overflow: hidden;
      pointer-events: none;
      user-select: none;
      font-family: monospace; }
      .nodeEditorRootWrapper .layout .contextMenuWrapper ul {
        width: 280px;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 3px;
        list-style: none;
        background: #1d2633;
        border: 1px solid #273546;
        border-radius: 8px;
        box-shadow: 0 4px 15px #1d2633; }
        .nodeEditorRootWrapper .layout .contextMenuWrapper ul li {
          font-size: 13px;
          transition: background 0.3s;
          background: #303f52;
          padding: 7px;
          position: relative;
          color: #c6d7ee;
          border-radius: 5px;
          margin-bottom: 3px; }
          .nodeEditorRootWrapper .layout .contextMenuWrapper ul li:last-child {
            margin-bottom: 0; }
          .nodeEditorRootWrapper .layout .contextMenuWrapper ul li:has(ul):before {
            transition: color 0.3s;
            content: '>';
            display: inline;
            position: absolute;
            right: 7px;
            color: #c6d7ee;
            font-weight: bold; }
          .nodeEditorRootWrapper .layout .contextMenuWrapper ul li:has(ul):after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 110%;
            height: 100%;
            z-index: 300000; }
          .nodeEditorRootWrapper .layout .contextMenuWrapper ul li:has(ul).toLeft:after {
            left: -10%; }
          .nodeEditorRootWrapper .layout .contextMenuWrapper ul li ul {
            display: none;
            position: absolute;
            z-index: 20; }
          .nodeEditorRootWrapper .layout .contextMenuWrapper ul li:hover {
            background: #3b4c62; }
            .nodeEditorRootWrapper .layout .contextMenuWrapper ul li:hover:before {
              color: #798ba6; }
            .nodeEditorRootWrapper .layout .contextMenuWrapper ul li:hover > ul {
              display: flex; }
      .nodeEditorRootWrapper .layout .contextMenuWrapper .menuRoot {
        position: absolute;
        pointer-events: all; }
  .nodeEditorRootWrapper .debugNode {
    position: absolute;
    background: rgba(0, 128, 0, 0.4);
    z-index: 10000; }
  .nodeEditorRootWrapper .node {
    background: #324154;
    width: 250px;
    height: 170px;
    border-radius: 7px;
    position: absolute;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1; }
    .nodeEditorRootWrapper .node.selected {
      box-shadow: 0 0 0 2px #526883;
      background: #3b4c62;
      z-index: 10001 !important; }
    .nodeEditorRootWrapper .node .slot {
      border: 3px solid #4c5f77;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      position: relative;
      cursor: pointer; }
      .nodeEditorRootWrapper .node .slot:before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(2);
        transform-origin: center center;
        cursor: pointer; }
      .nodeEditorRootWrapper .node .slot.hasConnection {
        background: #4c5f77; }
    .nodeEditorRootWrapper .node .slotExec {
      width: 20px;
      height: 20px;
      display: inline-block;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='4,4 16,4 22,12 16,20 4,20' fill='none' stroke='%234c5f77' stroke-width='3' stroke-linejoin='round'/></svg>");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      cursor: pointer;
      border: 0; }
      .nodeEditorRootWrapper .node .slotExec.hasConnection {
        background: transparent;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='4,4 16,4 22,12 16,20 4,20' fill='%23ffffff' stroke='%234c5f77' stroke-width='3' stroke-linejoin='round'/></svg>"); }
    .nodeEditorRootWrapper .node .nodeTitle {
      height: 35px;
      background: #425a7b;
      color: #90a8c7;
      text-align: center;
      font-size: 14px;
      font-family: monospace;
      display: flex;
      align-items: center;
      justify-content: center; }
    .nodeEditorRootWrapper .node .execFlowWrapper {
      height: 32px;
      min-height: 32px;
      display: flex;
      justify-content: space-between;
      background: #253245; }
      .nodeEditorRootWrapper .node .execFlowWrapper .execFlowConnectorsWrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 12px;
        width: auto; }
        .nodeEditorRootWrapper .node .execFlowWrapper .execFlowConnectorsWrapper.outputs {
          margin-left: auto; }
    .nodeEditorRootWrapper .node .dataWrapper {
      display: flex;
      height: 100%; }
      .nodeEditorRootWrapper .node .dataWrapper .connectorsWrapper {
        width: 40px;
        min-width: 40px;
        height: 100%;
        background: #2d3b4d;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        padding: 15px 0;
        justify-content: space-between; }
      .nodeEditorRootWrapper .node .dataWrapper .contentWrapper {
        width: 100%;
        height: 100%; }
        .nodeEditorRootWrapper .node .dataWrapper .contentWrapper input {
          user-select: all;
          outline: none;
          border: 0;
          padding: 7px;
          font-size: 12px;
          color: #c6d7ee;
          background: #222a36;
          width: calc(100% - 14px);
          margin: 7px;
          border-radius: 3px; }
          .nodeEditorRootWrapper .node .dataWrapper .contentWrapper input[type="number"] {
            -moz-appearance: textfield; }
            .nodeEditorRootWrapper .node .dataWrapper .contentWrapper input[type="number"]::-webkit-inner-spin-button, .nodeEditorRootWrapper .node .dataWrapper .contentWrapper input[type="number"]::-webkit-outer-spin-button {
              -webkit-appearance: none;
              margin: 0; }