/* ===== Base ===== */
html, body { height: 100%; }
body {
  width: auto;                 /* was 300px */
  margin: 0;
  padding: 0;
  min-width: 360px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: small;
  background: rgb(18, 36, 66); /* prevent white sliver under content */
}

/* ===== Column container (menu + footer) ===== */
div#menuBox {
  min-width: 350px;
  min-height: 100%;
  margin: 0 auto;
  box-sizing: border-box;

  /* visual */
  background-color: rgb(18, 36, 66);
  background-image: url("../images/small-makedoc-logos-menu.png");
  background-repeat: no-repeat;
  background-position: 85% 96%;
  border-top: 1px solid rgb(18, 36, 66);
  border-right: 0;
  border-bottom: 0;            /* was 24px solid ... (caused fixed gap) */

  /* layout */
  display: flex;
  flex-direction: column;
}

/* ===== Top logo area ===== */
div#logoBox {
  float: none;                  /* stack, don't push content to the right */
  width: auto;
  height: auto;
}
div#logoBox img {
  height: 7rem;
  margin: 0 0 10px 20px;        /* keep your left spacing */
  padding: 0;
  display: block;
}

/* ===== Scrollable menu area ===== */
div#menuBox div#menuInnerBox {
  flex: 1 1 auto;               /* fill remaining height down to footer */
  min-height: 0;                /* critical for flex scrollers */
  overflow: auto;
  margin: 0;
  box-sizing: border-box;

  /* visual frame; avoid heavy seam at footer */
  border: 2px solid rgb(18, 36, 66);
  border-bottom-width: 0;

  /* replaces the old non-scrolling border-bottom on #menuBox */
  padding-bottom: 24px;
}

/* ===== Footer (always visible) ===== */
#menuFooter {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 11px;
  color: #cfd8dc;
  background: rgb(18, 36, 66);
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}

/* ===== Controls / search area ===== */
div#menuBox div#menuInnerBox div#expandCollapseButtonsBox {
  clear: both;
  margin: 2px 2px;
}
div#menuBox div#menuInnerBox div#expandCollapseButtonsBox img {
  cursor: pointer;
  margin: 1px;
}
div#menuBox div#menuInnerBox div#expandCollapseButtonsBox div#searchBarPlaceholder {
  padding-top: 0;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}
div#menuBox div#menuInnerBox div#expandCollapseButtonsBox div#searchBarPlaceholder div#searchBar {
  display: flex;
  align-items: center;
  padding-left: 14px;
  padding-top: 10px;
}
div#menuBox div#menuInnerBox div#expandCollapseButtonsBox div#searchBarPlaceholder input[type="text"] {
  height: 27px;
}
div#menuBox div#menuInnerBox div#expandCollapseButtonsBox div#searchBarPlaceholder input[type="image"] {
  height: 27px;
  padding-bottom: 3px;
  padding-right: 15px;
}
div#menuBox div#menuInnerBox div#expandCollapseButtonsBox div#searchBarPlaceholder ul {
  border: none;
}

/* ===== Menu lists ===== */
div#menuBox div#menuInnerBox ul#menu,
div#menuBox div#menuInnerBox ul#intro,
div#menuBox div#menuInnerBox ul#menu ul,
div#menuBox div#menuInnerBox ul#intro ul,
div#menuBox div#menuInnerBox ul#menu ul li,
div#menuBox div#menuInnerBox ul#intro ul li {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
div#menuBox div#menuInnerBox ul#menu,
div#menuBox div#menuInnerBox ul#intro {
  margin: 0;
}
div#menuBox div#menuInnerBox ul#menu ul.submenu,
div#menuBox div#menuInnerBox ul#intro ul.submenu {
  margin: 3px auto 3px 15px;
}

/* ===== Items / selection ===== */
div#menuBox div#menuInnerBox ul#menu li div.liInfoBox,
div#menuBox div#menuInnerBox ul#intro li div.liInfoBox {
  padding-left: 5px;
  display: flex;
  align-items: center;
}
div#menuBox div#menuInnerBox ul#menu li div.liInfoBox.selected {
  background-color: #96CDD7;
}
div#menuBox div#menuInnerBox ul#menu li div.liInfoBox.selected span {
  color: #ffffff;
}

/* REPLACED: tighter button box; center icon and remove float/padding */
div#menuBox div#menuInnerBox ul#menu li div.liInfoBox div.buttonBox,
div#menuBox div#menuInnerBox ul#intro li div.liInfoBox div.buttonBox {
  width: 18px;                 /* fixed clickable area */
  height: 18px;
  margin-right: 10px;
  padding: 0;                  /* was padding-bottom: 10px */
  display: flex;               /* center the icon */
  align-items: center;
  justify-content: center;
  float: none;                 /* was float: left */
}

/* REPLACED: actually size the arrow image */
div#menuBox div#menuInnerBox ul#menu li div.liInfoBox div.buttonBox img,
div#menuBox div#menuInnerBox ul#intro li div.liInfoBox div.buttonBox img {
  width: 14px;                 /* pick 12–14px to taste */
  height: 14px;
  margin: 0;                   /* was margin-top: 5px */
  display: block;
  max-width: none;             /* guard against global img{width:100%} */
}

div#menuBox div#menuInnerBox ul#menu li div.liInfoBox div.linkBox,
div#menuBox div#menuInnerBox ul#intro li div.liInfoBox div.linkBox {
  width: auto;
  height: 23px;
  line-height: 23px;
  white-space: nowrap;
}
div#menuBox div#menuInnerBox ul#menu li div.liInfoBox div.linkBox div.a { border: none; }

div#menuBox div#menuInnerBox ul#menu li.mainItem,
div#menuBox div#menuInnerBox ul#intro li.mainItem {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 1rem;
  text-align: left;
}

/* ===== Links / text ===== */
div#menuBox div#menuInnerBox ul#menu a {
  text-decoration: none;
}
div#menuBox div#menuInnerBox ul#menu a:hover span,
div#menuBox div#menuInnerBox ul#intro a:hover span {
  text-decoration: underline;
}
div#menuBox div#menuInnerBox ul#menu span,
div#menuBox div#menuInnerBox ul#intro span {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
}
div#menuBox div#menuInnerBox ul#menu li.mainItem span {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
div#menuBox div#menuInnerBox ul#menu li.mainItem li span {
  font-family: Tahoma;
}
div#menuBox div#menuInnerBox ul#menu li li.notFolder span :hover {
  font-weight: normal;
  background-color: darkorange;
}
div#menuBox div#menuInnerBox ul#menu img {
  vertical-align: middle;
  border: none;
}