@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 {
  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%; } }