.vue-flowchart {
  width: 100%;
  height: 100%; }

.storm-flow-canvas {
  position: relative;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  display: flex;
  cursor: move;
  overflow: hidden; }
  .storm-flow-canvas svg {
    position: absolute;
    height: 100%;
    width: 100%;
    transform-origin: 0 0;
    overflow: visible; }
  .storm-flow-canvas .node-view {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    transform-origin: 0 0; }
  .storm-flow-canvas .node {
    position: absolute;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    user-select: none;
    cursor: move;
    pointer-events: all; }
    .storm-flow-canvas .node.selected > * {
      border-color: #00c0ff;
      box-shadow: 0 0 10px rgba(0, 192, 255, 0.5); }

@keyframes dash {
  from {
    stroke-dashoffset: 24; }
  to {
    stroke-dashoffset: 0; } }
  .storm-flow-canvas path {
    fill: none;
    stroke: black;
    pointer-events: all; }
    .storm-flow-canvas path.selected {
      stroke: #00c0ff !important;
      stroke-dasharray: 10,2;
      animation: dash 1s linear infinite; }
  .storm-flow-canvas .port {
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.1); }
    .storm-flow-canvas .port:hover, .storm-flow-canvas .port.selected {
      background: #c0ff00; }
  .storm-flow-canvas .basic-node {
    background-color: #1e1e1e;
    border-radius: 5px;
    font-family: Arial;
    color: white;
    border: solid 2px black;
    overflow: hidden;
    font-size: 11px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
    .storm-flow-canvas .basic-node .title {
      /*			background-image: linear-gradient(rgba(black,0.1),rgba(black,0.2));*/
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      white-space: nowrap; }
      .storm-flow-canvas .basic-node .title > * {
        align-self: center; }
      .storm-flow-canvas .basic-node .title .fa {
        padding: 5px;
        opacity: 0.2;
        cursor: pointer; }
        .storm-flow-canvas .basic-node .title .fa:hover {
          opacity: 1.0; }
      .storm-flow-canvas .basic-node .title .name {
        flex-grow: 1;
        padding: 5px 5px; }
    .storm-flow-canvas .basic-node .ports {
      display: flex;
      background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)); }
      .storm-flow-canvas .basic-node .ports .in, .storm-flow-canvas .basic-node .ports .out {
        flex-grow: 1;
        display: flex;
        flex-direction: column; }
      .storm-flow-canvas .basic-node .ports .in-port, .storm-flow-canvas .basic-node .ports .out-port {
        display: flex;
        margin-top: 1px; }
        .storm-flow-canvas .basic-node .ports .in-port > *, .storm-flow-canvas .basic-node .ports .out-port > * {
          align-self: center; }
        .storm-flow-canvas .basic-node .ports .in-port .name, .storm-flow-canvas .basic-node .ports .out-port .name {
          padding: 0 5px; }
      .storm-flow-canvas .basic-node .ports .out-port {
        justify-content: flex-end; }
        .storm-flow-canvas .basic-node .ports .out-port .name {
          justify-content: flex-end;
          text-align: right; }

.iframe {
  pointer-events: none;
  background-color: grey; }