@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Rokkitt:wght@200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap");
/*  Global Variables  */
:root {
  --theme-black: #111111;
  --theme-font-family: 'Rokkitt', serif;
  --theme-white: #f3f3f3;
  --theme-accent: #9cd8d7;
  --margin-step: 1em;
  --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --border-color: #cacaca;
  --background-color: #ffffff;
  --background-box-title: #f7f7f7;
  /**
    * Node colors
    */
  --node-request: #DA0063;
  --node-project: #652CB3;
  --node-filter: #12CDD4;
  --node-application: #7a7a7a;
  --node-modifier: #2DC6F0;
  --node-join: #11A1AC;
  --node-split: #11A1AC;
  --node-decision: #2D9BF0;
  --node-event: #DA0063;
  /**
    * Node connectors
    */
  --node-size: 20px;
  --node-input-color: rgb(251, 251, 0);
  --node-output-color: rgb(0, 180, 251);
  --node-delete: rgb(255, 0, 0);
  /**
    * Node paths
    */
  --node-path-main: rgb(70, 130, 180);
  --node-path-hover: rgb(17, 104, 175);
  --node-path-selected: rgb(67, 185, 147);
  /* Standard Breakpoints
    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
    */ }

/*  Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html, body {
  margin: 0px;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  background-color: var(--background-color); }

.flexbox-base, .drawflow .fathym-node .inputs, .drawflow .fathym-node .outputs {
  display: flex;
  justify-content: center;
  align-items: center; }

.flexbox-row {
  flex-direction: column; }

@media only screen and (max-width: 768px) {
  .col {
    width: 50px; }
  .col .drag-item span {
    display: none; }
  #drawflow {
    width: calc(100vw - 51px); } }

@media only screen and (max-width: 768px) {
  .modal-content {
    width: 80%; } }

.parent-drawflow {
  display: flex;
  overflow: hidden;
  touch-action: none;
  outline: none; }

/**
* Canvas
*/
.drawflow {
  width: 100%;
  height: 100%;
  position: relative;
  user-select: none;
  /**
* Parent to clipped path elements
*
* Use this so we can have drop shadows on clipped paths
*/ }
  .drawflow .fathym-node {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    /**
    * Items that sit inside nodes
    */ }
    .drawflow .fathym-node.selected {
      filter: brightness(1.25);
      -webkit-filter: brightness(1.25); }
    .drawflow .fathym-node:hover {
      cursor: move; }
    .drawflow .fathym-node .inputs, .drawflow .fathym-node .outputs {
      flex-direction: row;
      position: absolute;
      z-index: 2; }
    .drawflow .fathym-node .inputs {
      top: calc(5px - var(--node-size)); }
    .drawflow .fathym-node .outputs {
      bottom: calc(5px - var(--node-size)); }
    .drawflow .fathym-node .input, .drawflow .fathym-node .output {
      width: var(--node-size);
      height: var(--node-size);
      background: white;
      border-radius: 50%;
      border: 2px solid black;
      cursor: crosshair;
      margin: 0px 5px; }
      .drawflow .fathym-node .input:hover, .drawflow .fathym-node .output:hover {
        background-color: greenyellow; }
    .drawflow .fathym-node .input {
      background-color: var(--node-input-color); }
    .drawflow .fathym-node .output {
      background-color: var(--node-output-color); }
  .drawflow .node-drop-shadow {
    filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.25)); }
  .drawflow .parent-node {
    position: relative; }

.drawflow-delete {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: var(--node-delete);
  color: white;
  z-index: 4;
  font-size: large;
  border: 2px solid white;
  line-height: 0;
  font-weight: bold;
  border-radius: 50%;
  font-family: monospace;
  cursor: pointer; }

/**
* Position of delete icon
*/
.parent-node .drawflow-delete {
  right: -15px;
  top: -15px; }