.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 290px;
  min-height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
}

.slideout-menu-left,
.slideout-menu-right {
  position: fixed;
  top: 0;
  bottom: 0;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

@media screen and (max-width: 991px) {
  .slideout-panel {
    position: relative;
    z-index: 1;
    will-change: transform;
    min-height: 100vh;
    background-color: var(--bs-body-bg);
  }

    .slideout-panel:before {
      content: '';
      display: block;
      background-color: rgba(0,0,0,0);
      transition: background-color 0.5s ease-in-out;
    }

  .slideout-open .slideout-panel:before {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 99;
  }
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.mobile-open .slideout-menu {
  display: block !important;
}

.slideout-menu,
.slideout-menu .submenu {
  background-color: #fff;
}

  /* Submenu */
  .slideout-menu .submenu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    width: 290px;
    height: 100%;
    overflow: hidden;
    transition: all 0.1s ease;
    -webkit-transform: translate(-290px);
    -ms-transform: translate(-290px);
    transform: translate(-290px);
  }

    .slideout-menu .submenu.show {
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      transform: translate(0);
    }

  /*.slideout-menu ul,
.slideout-menu li,
.slideout-menu a {
  outline: none !important;
}*/

  /* Navbar items */
  .slideout-menu .nav-item {
    font-size: var(--bs-body-font-size);
    border-bottom: 1px solid var(--bs-border-color-translucent);
  }

    .slideout-menu .nav-item .nav-link-toggle {
      text-align: center;
      border: 0;
      padding-left: .75rem;
      padding-right: .75rem;
      border-left: 1px solid var(--bs-border-color-translucent);
      background-color: #fff;
    }

  .slideout-menu .nav-link {
    width: 100%;
    padding: 0.5rem
  }

  .slideout-menu .nav-item.has-child {
    display: flex;
  }

    .slideout-menu .nav-item.has-child > .nav-link {
      width: 100%;
    }


  .slideout-menu .nav-link,
  .slideout-menu .nav-link:hover,
  .slideout-menu .nav-link:active,
  .slideout-menu .nav-link:focus {
    color: var(--psc-nav-link-color);
  }

  .slideout-menu .nav-item:hover .nav-link {
    color: var(--psc-nav-link-hover-color);
    background-color: var(--psc-nav-link-hover-bg);
  }

  .slideout-menu .nav-item.active .nav-link,
  .slideout-menu .nav-item.active-child .nav-link {
    color: var(--psc-nav-link-active-color);
    background-color: var(--psc-nav-link-active-bg);
  }



  .slideout-menu .nav-item .nav-link:focus,
  .slideout-menu .nav-item .nav-link:active {
    color: inherit;
    background-color: var(--psc-nav-link-hover-bg);
  }

  /* Back button */
  .slideout-menu .nav-item.nav-back-link {
    border-bottom: 1px solid var(--bs-border-color-translucent);
  }

    .slideout-menu .nav-item.nav-back-link .nav-link {
      border-radius: 0 !important;
      border: none;
      text-align: left;
    }
