/* Sidebar styles */
.offcanvas-btn {
  left: 400px;
  visibility: visible;
  margin: 50% 0;
  border-radius: 0 5px 5px 0;
}

/* optional junk to toggle the button text */
.offcanvas-btn span:last-child,
.offcanvas.show .offcanvas-btn span:first-child {
  display: none;
}

.offcanvas.show .offcanvas-btn span:last-child {
  display: inline;
}

.offcanvas-size-xl {
    --bs-offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
    --bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
    --bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
    --bs-offcanvas-width: min(95vw, 250px) !important;
}

/* old remove if possible -->


   .sidebar {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
   }

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

   .sidebar a:hover {
      color: #f1f1f1;
   }

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

   .openbtn {
      font-size: 20px;
      cursor: pointer;
      color: black;
      padding: 10px 15px;
      border: none;
      position:fixed;
      left:0;
      top:30px
   }

   .openbtn:hover {
      background-color: #444;
   }

   #content {
      transition: margin-left 0.5s;
      padding: 16px;
   }

   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

   @media screen and (max-height: 450px) {
      .sidebar {
         padding-top: 15px;
      }
      .sidebar a {
         font-size: 18px;
      }
   }