html, body {
   min-height: 100vh;
   overflow-x: hidden;  /* prevent horizontal scroll */
   overflow-y: auto;    /* enable vertical scroll */
   margin: 0;
   padding: 0;
}
#menu-btn {
   position: fixed;
   top: 15px;
   left: 15px;
   z-index: 1100;
   width: 40px;
   height: 36px;
   background-color: #222;
   border: none;
   border-radius: 4px;
   padding: 5px 8px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   cursor: pointer;
}

#menu-btn .icon-bar {
   width: 100%;
   height: 4px;
   background-color: #fff;
   margin: 3px 0;
}

#sidebar {
   position: absolute;
   top: 10px;
   left: -175px;
   width: 175px;
   background-color: #f5f5f5;
   overflow: visible;
   z-index: 1000;
   padding-top: 48px;
   transition: left 0.3s ease;
   box-shadow: 2px 0 8px rgba(0,0,0,0.2);
}

#sidebar a {
   color: #000;
   padding: 12px 20px;
   display: block;
   text-decoration: none;
}

#sidebar a:hover {background-color: #000; color:white;}
.submenu-arrow:hover {color:white;}
#sidebar a:hover .submenu-arrow {
   border-left-color: white;
}

.has-submenu {position: relative;}
@media (min-width: 768px) {
   .submenu {
      display: none;
      position: absolute;
      top: 0;
      left: 100%;
      width: 200px;
      background-color: #eee;
      z-index: 1050;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
   }
   .has-submenu {position: relative;}
   .has-submenu.open > .submenu {display: block;}
}

.has-submenu > a {
   display: block;
   padding: 10px 15px;
   background-color: #ddd;
   color: #000;
   text-decoration: none;
}

.has-submenu > a:hover {background-color: #fff;}

.submenu a {
   display: block;
   padding: 10px 15px;
   background-color: #f0f0f0;
   color: #000;
   text-decoration: none;
}

.submenu a:hover {
   background-color: white;
   color: black;
}

.submenu-arrow {
   float: right;
   margin-top: 6px;
   width: 0;
   height: 0;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   border-left: 5px solid #000;
}
.submenu .has-submenu > a {
   padding-left: 30px;
}
.submenu .submenu .has-submenu > a {
   padding-left: 45px;
}
.submenu .submenu .submenu .has-submenu > a {
   padding-left: 60px;
}
#sidebar .has-submenu.open > a {
   background-color: black;
   color: white;
}

#sidebar .has-submenu.open > a .submenu-arrow {
   border-left-color: white;
}
@media (max-width: 767px) {
   .submenu {
      display: none;
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      background-color: #eee;
      margin-left: 10px;
      z-index: 1000;
   }

   .has-submenu.open > .submenu {display: block;}
   /* .submenu a {padding-left: 30px;}
   .has-submenu .submenu .submenu a {padding-left: 45px;} */
   #sidebar {
      width: 100%;
      max-width: none;
      left: -100%; /* fully off screen */
   }
  
}