/**
* Style Type
*
* Global Styles
*/

// @import url('./css/app.css');
@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');
@import './main-structure.scss';
@import './node-path.scss';
@import './node-shapes.scss';
@import './node-structure.scss';
// @import url('./css/app.css');

/*  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: rgb(18, 148, 199);
    --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 {
  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 {
  // @extend .flexbox-base;
  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;
}

@mixin box-shadow  {
    -webkit-box-shadow: 0 2px 15px 2px var(--border-color);
    box-shadow: 0 2px 15px 2px var(--border-color); 
}

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