/* Show a hamburger icon, for toggler in navbar */
.menutoggler {
  width: 25px;
  height: 2px;
  background-color: white;
  margin: 5px 0;
}

.nav-item .tab-close {
  display: none;
  cursor: pointer;
  line-height: 1;
}

.nav-item:hover .tab-close {
  display: inline-block;
}

/* Prevent nav links from wrapping to multiple lines */
/* remove or make it desktop-only */
@media (min-width: 768px) {
  #monthTabs .nav-link {
    white-space: nowrap;
  }
}


/* looks like a form-control but for actions */
.action-box {
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  /* same as .form-control */
  padding: .75rem;
  background: var(--bs-body-bg);
  /* matches your theme */
  text-align: center;
}

.action-box .btn {
  margin-bottom: .25rem;
}

/* Prevent clicks inside the canvas from propagating */
#viewport,
#viewport canvas {
  pointer-events: auto;
  touch-action: none;
}

#viewport canvas {
  position: relative;
  z-index: 2;
}

nav.col-auto {
  /*height: 100%;*/
  min-height: 100vh;
  overflow: visible;
}

#collapseWidthExample {
  height: auto !important;
}

#viewport {
  width: 100%;
  height: 650px;
  position: relative;
  overflow: hidden;

  /* Fusion-ish soft gradient */
  background: linear-gradient(to bottom,
      #f0f0f0 0%,
      /* top brighter */
      #cbcbcb 45%,
      #b5b5b5 100%
      /* bottom darker */
    );
}