.react-flow {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.react-flow__renderer,
.react-flow__pane,
.react-flow__selectionpane {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.react-flow__pane {
  z-index: 1;
}

.react-flow__renderer {
  z-index: 4;
}

.react-flow__selectionpane {
  z-index: 5;
}

.react-flow__selection {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}

.react-flow__edges {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}

.react-flow__edge {
  pointer-events: all;
}

.react-flow__edge.inactive {
    pointer-events: none;
  }

.react-flow__edge.selected .react-flow__edge-path {
      stroke: #555;
    }

.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }

@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}

.react-flow__edge-path {
  fill: none;
  stroke: #b1b1b7;
  stroke-width: 1;
}

.react-flow__edge-text {
  font-size: 10px;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.react-flow__edge-textbg {
  fill: white;
}

.react-flow__connection {
  pointer-events: none;
}

.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }

.react-flow__connection-path {
  fill: none;
  stroke: #b1b1b7;
  stroke-width: 1;
}

.react-flow__nodes {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 3;
}

.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  cursor: grab;
}

.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
}

.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover {
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  }

.react-flow__node-input {
  background: #fff;
  border-color: #0041d0;
}

.react-flow__node-input.selected,
  .react-flow__node-input.selected:hover {
    box-shadow: 0 0 0 0.5px #0041d0;
  }

.react-flow__node-input .react-flow__handle {
    background: #0041d0;
  }

.react-flow__node-default {
  background: #fff;
  border-color: #1a192b;
}

.react-flow__node-default.selected,
  .react-flow__node-default.selected:hover {
    box-shadow: 0 0 0 0.5px #1a192b;
  }

.react-flow__node-default .react-flow__handle {
    background: #1a192b;
  }

.react-flow__node-output {
  background: #fff;
  border-color: #ff0072;
}

.react-flow__node-output.selected,
  .react-flow__node-output.selected:hover {
    box-shadow: 0 0 0 0.5px #ff0072;
  }

.react-flow__node-output .react-flow__handle {
    background: #ff0072;
  }

.react-flow__nodesselection {
  z-index: 3;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin: left top;
  pointer-events: none;
}

.react-flow__nodesselection-rect {
    position: absolute;
    background: rgba(0, 89, 220, 0.08);
    border: 1px dotted rgba(0, 89, 220, 0.8);
    pointer-events: all;
  }

.react-flow__handle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #555;
  border: 1px solid white;
  pointer-events: none;
  border-radius: 100%;
}

.react-flow__handle.connectable {
    pointer-events: all;
    cursor: crosshair;
  }

.react-flow__handle-bottom {
  top: auto;
  left: 50%;
  bottom: -4px;
  transform: translate(-50%, 0);
}

.react-flow__handle-top {
  left: 50%;
  top: -4px;
  transform: translate(-50%, 0);
}

.react-flow__handle-left {
  top: 50%;
  left: -4px;
  transform: translate(0, -50%);
}

.react-flow__handle-right {
  right: -4px;
  top: 50%;
  transform: translate(0, -50%);
}

.react-flow__minimap {
  position: absolute;
  z-index: 5;
  bottom: 10px;
  right: 10px;
  background-color: #fff;
}

.react-flow__controls {
  position: absolute;
  z-index: 5;
  bottom: 10px;
  left: 10px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}

  .react-flow__controls-button {
    background: #fefefe;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 5px;
  }

  .react-flow__controls-button svg {
      width: 100%;
    }

  .react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.react-hint {
	padding: 5px;
	position: absolute;
	z-index: 9999;
	cursor: default;
	animation: .5s fadeIn;
}

.react-hint__content {
	padding: 10px;
	border-radius: 5px;
	background: #000;
	color: #fff;
}

.react-hint:after {
	content: '';
	width: 0;
	height: 0;
	margin: auto;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 5px solid transparent;
}

.react-hint--top:after {
	top: auto;
	border-bottom: none;
	border-top-color: #000;
}

.react-hint--left:after {
	left: auto;
	border-right: none;
	border-left-color: #000;
}

.react-hint--right:after {
	right: auto;
	border-left: none;
	border-right-color: #000;
}

.react-hint--bottom:after {
	bottom: auto;
	border-top: none;
	border-bottom-color: #000;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

*{
    margin: 0;
    padding: 0;
}

.diagram-container{
    background: #333333;
    width: 100%;
    height: 100%;
}

.network-policy-viewer-canvas {
    /*height: 100%;*/
    background-color: rgb(60, 60, 60);
    background-size: 50px 50px;
    display: flex;
    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);
}

.react-flow__node.react-flow__node-default {
    background-color: rgb(0, 192, 255);
    border-radius: 5px;
    font-family: sans-serif;
    color: white;
    border: solid 2px black;
    overflow: visible;
    font-size: 11px;
    padding: 0;
    width: auto;
}

.react-flow__node.react-flow__node-default.selected {
    border: solid 2px rgb(0, 192, 255);
}

.react-flow__node-default .react-flow__handle.port {
    top:0;
    left: 0;
    transform: none;
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 0;
    position: static;
}

.react-flow__node-default .port:hover {
    background: rgb(192, 255, 0);
}

.react-flow__node-default .port.react-flow__handle-connecting:hover {
    background: rgb(255, 64, 0);
}

.react-flow__node-default .port.react-flow__handle-invalid:hover {
    background: rgb(255, 64, 0);
}

.react-flow__node-default .port.react-flow__handle-connecting.react-flow__handle-valid:hover {
    background: rgb(192, 255, 0);
}

.react-flow__edge-path.path-default {
    stroke-width: 2px;
}
.react-tabs {
  -webkit-tap-highlight-color: transparent;
}

.react-tabs__tab-list {
  border-bottom: 1px solid #aaa;
  margin: 0 0 10px;
  padding: 0;
}

.react-tabs__tab {
  display: inline-block;
  border: 1px solid transparent;
  border-bottom: none;
  bottom: -1px;
  position: relative;
  list-style: none;
  padding: 6px 12px;
  cursor: pointer;
}

.react-tabs__tab--selected {
  background: #fff;
  border-color: #aaa;
  color: black;
  border-radius: 5px 5px 0 0;
}

.react-tabs__tab--disabled {
  color: GrayText;
  cursor: default;
}

.react-tabs__tab:focus {
  outline: none;
}

.react-tabs__tab:focus:after {
  content: '';
  position: absolute;
  height: 5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  background: #fff;
}

.react-tabs__tab-panel {
  display: none;
}

.react-tabs__tab-panel--selected {
  display: block;
}

/*!
 * "Fork me on GitHub" CSS ribbon v0.2.3 | MIT License
 * https://github.com/simonwhitaker/github-fork-ribbon-css
*/

.github-fork-ribbon {
  width: 12.1em;
  height: 12.1em;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
  font-size: 13px;
  text-decoration: none;
  text-indent: -999999px;
}

.github-fork-ribbon.fixed {
  position: fixed;
}

.github-fork-ribbon:hover, .github-fork-ribbon:active {
  background-color: rgba(0, 0, 0, 0.0);
}

.github-fork-ribbon:before, .github-fork-ribbon:after {
  /* The right and left classes determine the side we attach our banner to */
  position: absolute;
  display: block;
  width: 15.38em;
  height: 1.54em;

  top: 3.23em;
  right: -3.23em;
  box-sizing: content-box;
  transform: rotate(45deg);
}

.github-fork-ribbon:before {
  content: "";

  /* Add a bit of padding to give some substance outside the "stitching" */
  padding: .38em 0;

  /* Set the base colour */
  background-color: #a00;

  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));

  /* Add a drop shadow */
  box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);

  pointer-events: auto;
}

.github-fork-ribbon:after {
  /* Set the text from the data-ribbon attribute */
  content: attr(data-ribbon);

  /* Set the text properties */
  color: #fff;
  font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.54em;
  text-decoration: none;
  text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
  text-align: center;
  text-indent: 0;

  /* Set the layout properties */
  padding: .15em 0;
  margin: .15em 0;

  /* Add "stitching" effect */
  border-width: .08em 0;
  border-style: dotted;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.github-fork-ribbon.left-top, .github-fork-ribbon.left-bottom {
  right: auto;
  left: 0;
}

.github-fork-ribbon.left-bottom, .github-fork-ribbon.right-bottom {
  top: auto;
  bottom: 0;
}

.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after {
  right: auto;
  left: -3.23em;
}

.github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
  top: auto;
  bottom: 3.23em;
}

.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
  transform: rotate(-45deg);
}

.react-tabs__tab-list {
    margin: 0;
    background: #272822;
    color: #f8f8f2;
}

.react-tabs__tab--selected {
    background: #272822;
    color: #f8f8f2;
}

/*# sourceMappingURL=main.f292ddb5c5dd0b960e97.css.map*/