:root {
    --qux-sidebar-width: 16rem;
    --qux-sidebar-height: 100vh;
    --qux-sidebar-navbar-height: 5rem;
    --qux-sidebar-background-color: rgb(240, 241, 244);
  }
  @media screen and (max-width: 767px) {
    :root {
      --qux-sidebar-height: var(--qux-sidebar-navbar-height);
    }
  }
  .sidebar {
    align-items: center;
    --bs-navbar-padding-y: 0;
  }
  .sidebar-brand-and-button {
    height: var(--qux-sidebar-navbar-height);
  }
  .sidebar .container-fluid {
    align-items: stretch;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  }
  .sidebar .navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .sidebar .navbar-nav li.hover:hover {
    background: #c8c8c8;
    border-radius: 0.25rem;
  }
  @media screen and (min-width: 768px) {
    .sidebar {
      flex-direction: column;
      min-width: 256px; 
      position: sticky; 
      top: 0; 
      overflow-y: auto;
    }
    .sidebar .container-fluid {
      box-shadow: none !important
    }
    .sidebar-navbar {
      border: 0;
    }
    #nav {
      width: var(--qux-sidebar-width);
      height: var(--qux-sidebar-height);
      background-color: var(--qux-sidebar-background-color);
    }
    .navbar > .container-fluid {
      flex-direction: column;
      align-items: start !important;
    }
    .sidebar .dropup .dropdown-menu.show {
      position: absolute !important;
    }
    .sidebar-field {
      width: 216px;
    }
  }
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    margin-bottom: 0;
    list-style: none;
  }
  @media screen and (min-width: 768px) {
    .sidebar-expand-md {
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .sidebar-expand-md .navbar-toggler {
      display: none;
    }
    .sidebar-expand-md .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
      align-items: stretch;
    }
  }
  #nav-top-left {
    border: none;
  }
  .navbar-brand {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
  .qux-rightside {
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .qux-rightside-header {
    /* alignment with navbar-brand in horizontal mode */
  }
  .qux-rightside-header-title {
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    font-size: 1em;
  }
  @media screen and (max-width: 767px) {
    .qux-rightside-header {
      padding-top: 1.25rem !important;
      padding-bottom: 1.25rem;
    }
    .qux-rightside-header-title {
      margin-bottom: 1.25rem;
    }
  }
  @media screen and (min-width: 768px) {
    .qux-rightside-header-title {
      height: 80px !important;
      margin-bottom: -4px;
    }
  }