.storm-diagrams-canvas {
  height: 400px;
  background-color: #3c3c3c;
  background-image: -webkit-linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), -webkit-linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
  background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
}
.storm-diagrams-canvas path {
  stroke: rgba(255, 255, 255, 0.5);
}
.storm-diagrams-canvas .pointui {
  fill: rgba(255, 255, 255, 0.5);
}

.storm-diagrams-canvas {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: move;
  overflow: hidden;
}
.storm-diagrams-canvas .point {
  fill: rgba(255, 255, 255, 0.5);
}
.storm-diagrams-canvas .point.selected {
  fill: #00c0ff;
}
.storm-diagrams-canvas .selector {
  position: absolute;
  background-color: rgba(0, 192, 255, 0.2);
  border: solid 2px #00c0ff;
}
.storm-diagrams-canvas svg {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  overflow: visible;
}
.storm-diagrams-canvas .node-view {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  pointer-events: none;
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}
.storm-diagrams-canvas .node {
  position: absolute;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  cursor: move;
  pointer-events: all;
}
.storm-diagrams-canvas .node.selected > * {
  border-color: #00c0ff !important;
}
@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  from {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.storm-diagrams-canvas path {
  fill: none;
  pointer-events: all;
}
.storm-diagrams-canvas path.selected {
  stroke: #00c0ff !important;
  stroke-dasharray: 10,2;
  -webkit-animation: dash 1s linear infinite;
          animation: dash 1s linear infinite;
}
.storm-diagrams-canvas .port {
  width: 15px;
  height: 15px;
  background: rgba(255, 255, 255, 0.1);
}
.storm-diagrams-canvas .port:hover, .storm-diagrams-canvas .port.selected {
  background: #c0ff00;
}
.storm-diagrams-canvas .basic-node {
  background-color: #1e1e1e;
  border-radius: 5px;
  font-family: Arial;
  color: white;
  border: solid 2px black;
  overflow: visible;
  font-size: 11px;
}
.storm-diagrams-canvas .basic-node .title {
  /*			background-image: linear-gradient(rgba(black,0.1),rgba(black,0.2));*/
  background: rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  white-space: nowrap;
}
.storm-diagrams-canvas .basic-node .title > * {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.storm-diagrams-canvas .basic-node .title .fa {
  padding: 5px;
  opacity: 0.2;
  cursor: pointer;
}
.storm-diagrams-canvas .basic-node .title .fa:hover {
  opacity: 1.0;
}
.storm-diagrams-canvas .basic-node .title .name {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 5px 5px;
}
.storm-diagrams-canvas .basic-node .ports {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}
.storm-diagrams-canvas .basic-node .ports .in, .storm-diagrams-canvas .basic-node .ports .out {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.storm-diagrams-canvas .basic-node .ports .in-port, .storm-diagrams-canvas .basic-node .ports .out-port {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 1px;
}
.storm-diagrams-canvas .basic-node .ports .in-port > *, .storm-diagrams-canvas .basic-node .ports .out-port > * {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.storm-diagrams-canvas .basic-node .ports .in-port .name, .storm-diagrams-canvas .basic-node .ports .out-port .name {
  padding: 0 5px;
}
.storm-diagrams-canvas .basic-node .ports .out-port {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.storm-diagrams-canvas .basic-node .ports .out-port .name {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  text-align: right;
}