/**
 * Mobile-specific styles
 * These styles override the default styles.css when on mobile devices
 * On mobile, nodes are displayed as a vertical list instead of positioned on canvas
 */
 @media (max-width: 768px) {
  /* VERY OBVIOUS TEST - If you see a red background, mobile.css is loading! */
 
  body {
    overflow: scroll !important;
    height: 100vh !important;
    width: 100vw !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  #mobilea {
    position: absolute !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 1000 !important;
    padding: 0px 30px 0px 15px !important;
    box-sizing: border-box !important;
    padding-top: 20px !important;

  }

  #canvas-root {
    display: none !important;

  }

  .node-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin-bottom: 10px !important;
    max-height: 500px !important;
  }
  .node-frame {
    width: 100% !important;
    height: 100% !important;
  }


  .node-frame {
    width: 100% !important;
    height: 100% !important;
  }

  .node-content {
    width: 100% !important;
    height: 100% !important;
  }
  .node-content-transform {
    width: 100% !important;
    height: 100% !important;
  }


  .node-titlebar {
   display: none !important;
  }

  #bookmarks-bar {
    display: none !important;
  }

  #toolbar {
    display: none !important;
  }

  #toolbar-node-types {
    display: none !important;
  }

}