style.css

html, body {
  /* margin:0px;
  height:100%;
  width:100%;
  position:fixed; */
  overflow: hidden; /* Hide scrollbars */ 
  font-family: 'Open Sans';
  touch-action: none;
}

  #wrapper {
    /* overflow-x: hidden; */
    width: 100%;
 }

#navbar{
  z-index: 900;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
  z-index: 500;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper ul {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
  overflow: hidden;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}


  div.node{
    display: inline-block;
    width:auto;
    
  }
  
  p{
    margin:0px;
  }
  
  .dot circle {
    fill: lightsteelblue;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
  
  .dot circle.dragging {
    fill: red;
    stroke: brown;
  }
  
  .axis line {
    fill: none;
    stroke: #ddd;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
  }

  .node{
    /* width: 100%;
    height: 100%;
    text-align: left; */
    position: absolute;
    width:auto;
    /* text-align: left; */
    /* overflow: hidden; */
    white-space:nowrap;
    /* -webkit-user-modify: read-write;
      overflow-wrap: break-word;
      -webkit-line-break: after-white-space; */
  
    font-size: inherit;
    /* transition-timing-function: linear; */
  }

  
  .node svg{
    position: absolute;
    left:0px;
    top:0px;
    /* transition-timing-function: linear; */
    /* transition-duration: inherit; */
  }

  .node svg path {
    cursor: pointer;
  }
   .node .np-n-c.img{
    transition-duration: inherit;
  } 
/*  .node img{
    transition-duration: inherit;

  } */

  .node h1{
    font-size: 1.5em;
    font-weight: bold;
  }
  .node h2{
    font-size: 1.4em;
    font-weight: bold;
  }
  .node h3{
    font-size: 1.35em;
    font-weight: bold;
  }
  .node h4{
    font-size: 1.3em;
  }
  .node h5{
    font-size: 1.25em;
    font-style:italic; 
  }
  .node h6{
    font-size: 1.1em;
    font-style:oblique; 
  }


  .node.selected{
    /* fill:red;
    color:red; */
    border:1px solid black;
    z-index: 100;
  }
  
.node blockquote{
    margin-inline-start: 1em;
    margin-inline-end: 0px;
}
.node ol,ul{
    padding-inline-start: 1em;
    padding-inline-start: 1em;
}

  /* .inside_node{
    
  } */
  #container{
  
    width: 100%;
    height:100%;
  }
  #container.drag-hover{
    background-color: #aaa;
  }
  
  #text{
    resize: none;
      /* overflow: hidden; */
      min-height: 50px;
      max-height: 100px;
  }
  
  .custom-file-upload {
      border: 1px solid #ccc;
      display: inline-block;
      padding: 6px 12px;
      cursor: pointer;
  }
  input[type="file"] {
      display: none;
  }


  /*
===================================================================§§
  */

  .notification-top {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    /* Rest of your styling */
    border: 1px solid black;
    background-color: white;
    z-index: 1000;
  }
  .notification-bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    /* Rest of your styling */
    border: 1px solid black;
    background-color: white;
    z-index: 1000;
  }
  
  #node_container{
    /* transition-duration: 0.2s; */
    display: block;
    position: absolute;
  }

  .node{
    /* display: block; */
    /* white-space: pre; */
    position: absolute;
    /* transition-duration: 0.2s; */
    user-select: none; /* CSS3 (little to no support) */
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: none; /* Gecko (Firefox) */
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */  
  }
  .node.zoom{
    transition-duration: 0.2s;
  }

  a.node_a{
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
  }

  a.local{
    cursor:pointer;
  }

  .ui-rotatable-handle{
    width: 20px;
    height: 20px;
    position: absolute;
    left:-20px;
    bottom:-20px;
    /* border-radius: 6px; */
    /* border-width: 1.5px; */
    /* border-style: solid; */
    /* border-color: rgb(0,0,0); */

    content: url(img/r.svg);

    z-index: 10000;

    cursor:grab;
  }
  .ui-rotatable-disabled .ui-rotatable-handle{
    display: none;
  }

  .node img{
    transition-duration:inherit;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none; 
  }

  #select-box{
    position: absolute;
    border: 1px solid black;
    z-index: 10000;
    display: none;
  }

  #copydiv{
    position: absolute;
    left:-10000px;
    top:-100000px;
    opacity: 0;
  }


.horizontal-scrollable > .row {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
  
.horizontal-scrollable > .row > .col {
    display: inline-block;
    float: none;
}



/* https://getbootstrap.com/docs/5.0/examples/sidebars/# */
body {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: hidden;
}
body > * {
  flex-shrink: 0;
  min-height: -webkit-fill-available;
}

.b-example-divider {
  width: 1.5rem;
  height: 100%;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.bi {
  vertical-align: -.125em;
  pointer-events: none;
  fill: currentColor;
}

.dropdown-toggle { outline: 0; }

.nav-flush .nav-link {
  border-radius: 0;
}

.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, .65);
  background-color: transparent;
  border: 0;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, .85);
  background-color: #d2f4ea;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  display: inline-flex;
  padding: .375rem .5rem;
  margin-top: 0px;
  margin-left: 1.25rem;
  text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #d2f4ea;
}

.scrollarea {
  overflow-y: auto;
}

.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }

/* ----- */

#modal-list{
  max-height: 60vh;
  overflow-y: scroll;
}

/* ------------------------------- */
#np-places-header button{
  padding: 0.4rem;
}

.places-place{
  max-width: 8em;
  overflow: hidden;
}
.places-folder{
  max-width: 8em;
  overflow: hidden;
}


/* -------------- */

#searchSideBar{
  width: 18rem;
  transition-duration: 0.25s;
  z-index: 900;
}

#searchSideBar.toggled{
  margin-right:-18rem;
}

#search-toggle{
  position: relative;
  margin-left: -32px;
  width:32px;
  border-radius: 48%;
}

#searchResultContainer{
  overflow-y: auto;
}

.np-sr-row .col{
  text-overflow: ellipsis;
  white-space:nowrap;
  overflow: hidden;
  max-height: 3rem;
}

.np-sr-row .bi-folder-symlink{
  font-size: 180%;
  border-radius: 0.4rem;
  padding: 0.2rem;
}

/* .np-sr-row .bi-folder-symlink:hover{
  background-color: black;
  color:white;
} */

.node.np-search-preview{
  border: 2px dotted orange;
}

.np-search-place-preview{
  background-color: orange;
}

/*----------------*/

/*
.np-n-c{
}
*/

.np-n-tooltip{
  display: none;
  height:3rem;
  font-size: 1rem;
  margin-top: -3rem;
  border-radius: 0.3rem;
  /* border:1px solid black; */
  vertical-align: middle;
  text-align: center;
  padding: 0.125rem;

}
.selected .np-n-tooltip{
  display:flex;
  align-items: center;
  /* transition-duration: 0.5s; */
}

.np-n-t-btn{
/*--*/
background-color: #fff;
height: 2em;
width: 2em;
border: 2px solid #ccf;
border-radius: 999px;
position: relative;
vertical-align: middle;
margin-right: 0.33em;
}
.np-n-t-btn:hover,.np-n-btn:focus{
  /* background-color:#ccc */
  background-color: #eef;
}

.np-n-tooltip input{
  height: 1.3em;
  width: 1.3em;
  margin: 0.1em;
}

.np-n-t-ta:hover{
  background-color: #eef;
}

.np-n-t-ta-selected{
  /* */
  background-color: #ccf;
}


input[type="color"]{
  background-color:white;
  border:none;
  margin-right: 0.2em;
  width:1.8em;
  height:1.8em;
  padding:0;
  margin-right: 0.33em;
}
/* -webkit */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;    
}

input[type="color"]::-webkit-color-swatch {
  border: none;  
  border-radius: 500%;
}
/* firefox */
input[type=color]::-moz-focus-inner {
  border: none;
  padding: 0;
  border-radius: 500%;
}

input[type=color]::-moz-color-swatch {
  border: none;
  border-radius: 500%;
}


/* ----------- */
#np-history-header button{
  padding: 0.4rem;
}

#historyContainer{
  max-height: 60vh;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

#historyContainer div{
  /* width: 100%; */
  width:15rem;
  /* max-height: 10vh;
  overflow-y: hidden; */
}

.np-h-r-c{
  /* width: 100%; */
  max-height: 3rem;
  overflow: hidden;
}


/* ----------------------- */

.grid-align-line{
  position: absolute;
  z-index: 900;
  border: 1px dashed lightgreen;
}



#freehandField {
  /* opacity: 0.1; */
  /* background-color: #000; */
  background-color: transparent;
  z-index: 1000;
  position: absolute;
  left: 0px;
  top:0px;

  cursor: crosshair;
}

#freehandField svg{
  opacity: 1;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;

  /* z-index: -100; */
}

/*
#freehandField svg path{
  fill:none;
  
  width:auto;
}
*/
.svg{
  pointer-events: none;
}

.svg .ui-rotatable-handle, .svg .ui-icon{
  pointer-events: all;
}

.svg .np-n-tooltip{
  pointer-events:all;
}

.svg path{
  pointer-events: visiblePainted;
}


/* -------- */
#scale-box{
  margin-left: -7vh;
  width: 5vh;
  bottom: 2vh;
}