#project-data-sidenav {
  position: fixed;
  top: 72px;
  bottom: 0;
  left: 65px;
  width: 224px;
  background-color: #f4f4f4;
  font-family: var(--font-family);
  overflow-x: hidden;
  overflow-y: scroll;
  transition: 0.5s;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  user-select: none;
  padding: 0;
  margin: 0;
  z-index: 21;
}
#project-data-sidenav::-webkit-scrollbar { /* Hide scrollbar in WebKit */
  width: 0;
  height: 0;
}

.project-data-sidebar-item {
  list-style: none;
  padding: 8px 8px 8px 24px;
  font-size: 16px;
  display: block;
  transition: 0.3s;
  cursor: pointer;
}
/* Common styles for hover and active */
.project-data-sidebar-item:hover,
.project-data-sidebar-item.project-data-sidenav-active {
  padding-left: 16px;
  background-color: rgba(0, 133, 255, 0.06);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  color: var(--font-color-inactive);
}

/* Active-only style */
.project-data-sidebar-item.project-data-sidenav-active {
  border-left: 8px solid #0084FF;
}

.project-data-sidebar-item:hover, .project-data-sidebar-item.project-data-sidenav-active {
  color: #0084FF;
}

.project-data-sidebar-group {
  display: none; /* Hide all groups */
  list-style-type: none; /* Remove default bullets */
  padding-left: 5px;
}

.project-data-sidebar-header {
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  padding-left: 24px;
}

.project-data-sidebar-nav-disabled, .disabled-wrong-stage {
  display: none;
}

.project-data-sidebar-item-disabled-by-filter {
    opacity: 0.4;
}

.project-data-sidebar-item-disabled-by-filter:hover {
    opacity: 0.65;
}

#div-calculate, #set-debug-areas, #reset-debug-areas {
  padding: 8px 24px 8px 24px;
  height: 40px;
  width: 120px;
  font-size: 16px;
  color: black;
  background: #73CD8B;
  border-radius: 6px;
  border: none;
  text-align: center;
  display: block;
  font-weight: 600;
  margin-right: 5px;
}

#div-calculate:hover {
  background: #5bb975;
  color: black;
}

#div-calculate.invalid-model {
  background: #ce3660;
  color: #fff;
}

#div-calculate.invalid-model:hover {
  background: #a52a4a;
  color: #fff;
}

#div-calculate.invalid-model .hide-on-mobile::after, #div-calculate.invalid-model .hide-on-desktop::after {
  content: "!";
}

button.fixed-nav-button {
  display: block;
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 52px;
  height: 52px;
  margin: 0;
  background: var(--dark-black);
  border-radius: 6px;
  opacity: 0.6;
  z-index: 51;
  font-size: 20px;
}

.debugsidebar {
  height: 100%;
  width: 0px;
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  background-color: #f0f8ff;
  overflow-x: hidden;
  transition: 0.005s;
  padding-top: 60px;
}

.debugsidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.debugsidebar a:hover {
  color: #000;
}

.debugsidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.dragborder { /*note: not visible, so have to have different colored 'panels' to make it visible*/
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: w-resize;
}

table.debugtable tr td:first-child {
  background: pink;
  width: 20px;
}

table.debugtable tr td:nth-child(2) { /* won't quite work if we have a 4th or 6th element */
  background: white;
  width: 20%;
}

table.debugtable tr td {
  font-size: 11px;
  border-bottom: 1px solid lightgray;
}

table.debugtable tr td.logerror {
  background: red;
}

@media screen and (max-width: 992px) {
  #project-data-sidenav {
    top: 56px;
    width: 0; /* We toggle the sidenav's visibility by setting its width */
    left: 0; /* We also toggle the sidenav's left attribute, so that it "sticks" to the expanding main sidenav */
  }

  #div-calculate {
    width: 50px;
    padding-left: 5px;
    padding-right: 8px;
  }

  .control-button.mobile-only-icon{
    padding-left: 8px;
    padding-right: 8px;
  }

}