@charset "UTF-8";
/**
* Style Type
*
* Global Styles
*/
@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");
/**
* Style Type
*
* Main Structural Styles
*/
/**
* Main container wrapper
*/
:host {
  /**
* Main canvas where we drag nodes to
*/
  /**
* Sidenav
*/
  /**
* Header
*/
  /**
* Drag items from side nav
*/
  /**
* Tab menu
*/ }
  :host .wrapper {
    width: 100%;
    height: calc(100vh - 67px);
    display: flex; }
  :host #drawflow {
    display: flex;
    position: relative;
    width: calc(100vw - 301px);
    height: calc(100% - 50px);
    top: 40px;
    background-size: 25px 25px;
    /*
    * background grid lines
    */
    background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px) !important; }
  :host .col {
    overflow: auto;
    width: 300px;
    height: 100%;
    border-right: 1px solid var(--border-color); }
  :host header {
    height: 66px;
    border-bottom: 1px solid var(--border-color);
    padding-left: 20px; }
  :host header h2 {
    margin: 0px;
    line-height: 66px; }
  :host header a {
    color: black; }
  :host .drag-item {
    line-height: 50px;
    border-bottom: 1px solid var(--border-color);
    padding-left: 20px;
    cursor: move;
    user-select: none;
    font-family: var(--theme-font-family);
    font-weight: bold;
    transition: 0.5s ease-in-out;
    flex-direction: row; }
    :host .drag-item:hover {
      background-color: gray;
      color: white; }
  :host .tab-menu {
    position: absolute;
    height: 40px;
    display: block;
    background: white;
    width: 100%; }
  :host .tab-menu ul {
    padding: 0px;
    margin: 0px;
    line-height: 40px; }
  :host .tab-menu ul li {
    display: inline-block;
    margin-left: 10px;
    border-right: 1px solid var(--border-color);
    padding-right: 10px;
    line-height: 40px;
    cursor: pointer; }
  :host .tab-menu ul li.selected {
    font-weight: bold; }

/**
* Style Type
*
* Node Path Styles
*/
.drawflow svg {
  z-index: 0;
  position: absolute;
  overflow: visible !important; }

.drawflow .main-path {
  fill: none;
  stroke-width: 5px;
  stroke: var(--node-path-main); }

.drawflow .connection {
  position: absolute;
  pointer-events: none; }
  .drawflow .connection .main-path {
    fill: none;
    stroke-width: 5px;
    stroke: var(--node-path-main);
    pointer-events: all; }
  .drawflow .connection .error {
    stroke: red !important; }
  .drawflow .connection .main-path:hover {
    stroke: var(--node-path-hover);
    cursor: pointer; }
  .drawflow .connection .main-path.selected {
    stroke: var(--node-path-selected); }
  .drawflow .connection .point {
    cursor: move;
    stroke: black;
    stroke-width: 2;
    fill: white;
    pointer-events: all; }
    .drawflow .connection .point .selected, .drawflow .connection .point:hover {
      fill: var(--node-path-hover); }

/**
* Style Type
*
* Node Shape Styles
*/
/**
* Base styling for nodes
*/
.base, .request, .project, .filter, .application, .modifier, .join, .split, .decision, .event {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: white; }

/**
* Base styling for icons
*/
.icon-base, .request-icon, .project-icon, .filter-icon, .application-icon, .modifier-icon, .join-icon, .split-icon, .decision-icon, .event-icon {
  margin-right: 5px; }

/**
* Create shaped icon
*/
.gap > * {
  margin: 14px; }

.basic-node, .request, .project, .filter, .application, .modifier {
  min-height: 30px;
  width: 100px;
  border-radius: 7px; }

.request {
  background-color: var(--node-request); }

.request-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-request); }

.project {
  color: white;
  background-color: var(--node-project); }

.project-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-project); }

.filter {
  background-color: var(--node-filter); }

.filter-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-filter); }

.application {
  background-color: var(--node-application); }

.application-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-application); }

.modifier {
  background-color: var(--node-modifier); }

.modifier-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-modifier); }

/**
* Plus shape
*/
.join {
  background-color: var(--node-join);
  height: 100px;
  width: 100px;
  clip-path: polygon(0 25%, 25% 25%, 25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%); }

.join-icon {
  height: 20px;
  width: 20px;
  clip-path: polygon(0 25%, 25% 25%, 25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%);
  background-color: var(--node-join); }

/**
* X shape
*/
.split {
  width: 100px;
  height: 100px;
  clip-path: polygon(25% 0, 0 25%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 75% 100%, 100% 75%, 75% 50%, 100% 25%, 75% 0, 49% 25%);
  background-color: var(--node-split); }

.split-icon {
  height: 20px;
  width: 20px;
  clip-path: polygon(25% 0, 0 25%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 75% 100%, 100% 75%, 75% 50%, 100% 25%, 75% 0, 49% 25%);
  background-color: var(--node-split); }

/**
* Diamond shape
*/
.decision {
  background-color: var(--node-decision);
  height: 100px;
  width: 100px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

.decision-icon {
  height: 20px;
  width: 20px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: var(--node-decision); }

/**
* Circle shape
*/
.event {
  border-radius: 50%;
  background-color: var(--node-event);
  width: 60px;
  height: 60px; }

.event-icon {
  height: 20px;
  width: 20px;
  clip-path: circle(50%);
  background-color: var(--node-event); }

/**
* Style Type
*
* Node Structural Styles
*/
.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; }

.launch-btn-test {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px; }

/*  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: #fafafa;
  --background-box-title: #f7f7f7;
  --canvas-background-color: rgb(17, 161, 172);
  /**
    * Node colors
    */
  --node-request: #00df1e;
  --node-project: #9558eb;
  --node-filter: #12CDD4;
  --node-application: #696964;
  --node-modifier: #2DC6F0;
  --node-join: #1180ac;
  --node-split: #913daa;
  --node-decision: #c3ce2a;
  --node-event: #da4500;
  /**
    * 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
    */ }

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

.container {
  display: flex;
  flex-flow: row;
  height: 100%;
  min-height: 100%;
  padding: 10px; }

/*  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-column {
  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%; } }

/**
* Style Type
*
* Node Shape Styles
*/
/**
* Base styling for nodes
*/
.base, .request, .project, .filter, .application, .modifier, .join, .split, .decision, .event {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: white; }

/**
* Base styling for icons
*/
.icon-base, .request-icon, .project-icon, .filter-icon, .application-icon, .modifier-icon, .join-icon, .split-icon, .decision-icon, .event-icon {
  margin-right: 5px; }

/**
* Create shaped icon
*/
.gap > * {
  margin: 14px; }

.basic-node, .request, .project, .filter, .application, .modifier {
  min-height: 30px;
  width: 100px;
  border-radius: 7px; }

.request {
  background-color: var(--node-request); }

.request-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-request); }

.project {
  color: white;
  background-color: var(--node-project); }

.project-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-project); }

.filter {
  background-color: var(--node-filter); }

.filter-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-filter); }

.application {
  background-color: var(--node-application); }

.application-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-application); }

.modifier {
  background-color: var(--node-modifier); }

.modifier-icon {
  height: 7px;
  width: 20px;
  clip-path: inset(0% 0% 0% 0% round 5px);
  background-color: var(--node-modifier); }

/**
* Plus shape
*/
.join {
  background-color: var(--node-join);
  height: 100px;
  width: 100px;
  clip-path: polygon(0 25%, 25% 25%, 25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%); }

.join-icon {
  height: 20px;
  width: 20px;
  clip-path: polygon(0 25%, 25% 25%, 25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%);
  background-color: var(--node-join); }

/**
* X shape
*/
.split {
  width: 100px;
  height: 100px;
  clip-path: polygon(25% 0, 0 25%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 75% 100%, 100% 75%, 75% 50%, 100% 25%, 75% 0, 49% 25%);
  background-color: var(--node-split); }

.split-icon {
  height: 20px;
  width: 20px;
  clip-path: polygon(25% 0, 0 25%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 75% 100%, 100% 75%, 75% 50%, 100% 25%, 75% 0, 49% 25%);
  background-color: var(--node-split); }

/**
* Diamond shape
*/
.decision {
  background-color: var(--node-decision);
  height: 100px;
  width: 100px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

.decision-icon {
  height: 20px;
  width: 20px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: var(--node-decision); }

/**
* Circle shape
*/
.event {
  border-radius: 50%;
  background-color: var(--node-event);
  width: 60px;
  height: 60px; }

.event-icon {
  height: 20px;
  width: 20px;
  clip-path: circle(50%);
  background-color: var(--node-event); }

/**
* Style Type
*
* Main Structural Styles
*/
/**
* Main container wrapper
*/
:host {
  /**
* Main canvas where we drag nodes to
*/
  /**
* Sidenav
*/
  /**
* Header
*/
  /**
* Drag items from side nav
*/
  /**
* Tab menu
*/ }
  :host .wrapper {
    width: 100%;
    height: calc(100vh - 67px);
    display: flex; }
  :host #drawflow {
    display: flex;
    position: relative;
    width: calc(100vw - 301px);
    height: calc(100% - 50px);
    top: 40px;
    background-size: 25px 25px;
    /*
    * background grid lines
    */
    background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px) !important; }
  :host .col {
    overflow: auto;
    width: 300px;
    height: 100%;
    border-right: 1px solid var(--border-color); }
  :host header {
    height: 66px;
    border-bottom: 1px solid var(--border-color);
    padding-left: 20px; }
  :host header h2 {
    margin: 0px;
    line-height: 66px; }
  :host header a {
    color: black; }
  :host .drag-item {
    line-height: 50px;
    border-bottom: 1px solid var(--border-color);
    padding-left: 20px;
    cursor: move;
    user-select: none;
    font-family: var(--theme-font-family);
    font-weight: bold;
    transition: 0.5s ease-in-out;
    flex-direction: row; }
    :host .drag-item:hover {
      background-color: gray;
      color: white; }
  :host .tab-menu {
    position: absolute;
    height: 40px;
    display: block;
    background: white;
    width: 100%; }
  :host .tab-menu ul {
    padding: 0px;
    margin: 0px;
    line-height: 40px; }
  :host .tab-menu ul li {
    display: inline-block;
    margin-left: 10px;
    border-right: 1px solid var(--border-color);
    padding-right: 10px;
    line-height: 40px;
    cursor: pointer; }
  :host .tab-menu ul li.selected {
    font-weight: bold; }

/**
* Style Type
*
* Node Path Styles
*/
.drawflow svg {
  z-index: 0;
  position: absolute;
  overflow: visible !important; }

.drawflow .main-path {
  fill: none;
  stroke-width: 5px;
  stroke: var(--node-path-main); }

.drawflow .connection {
  position: absolute;
  pointer-events: none; }
  .drawflow .connection .main-path {
    fill: none;
    stroke-width: 5px;
    stroke: var(--node-path-main);
    pointer-events: all; }
  .drawflow .connection .error {
    stroke: red !important; }
  .drawflow .connection .main-path:hover {
    stroke: var(--node-path-hover);
    cursor: pointer; }
  .drawflow .connection .main-path.selected {
    stroke: var(--node-path-selected); }
  .drawflow .connection .point {
    cursor: move;
    stroke: black;
    stroke-width: 2;
    fill: white;
    pointer-events: all; }
    .drawflow .connection .point .selected, .drawflow .connection .point:hover {
      fill: var(--node-path-hover); }

/**
* Style Type
*
* Node Structural Styles
*/
.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; }

.launch-btn-test {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px; }

/*# sourceMappingURL=global-scss.min.css.map */