/* Keep sidebar and Dictionaries submenu above .content-document (stacking + flex width). */
.container-menu-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.container-menu-content > #left-menu,
.container-menu-content > .content-menu {
  position: relative;
  z-index: 10;
  flex: 0 0 17rem;
  min-width: 17rem;
  max-width: 22rem;
  align-self: flex-start;
  background-color: #fff;
}

.container-menu-content > .content-document {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.container-menu-content .menu-item.open {
  position: relative;
  z-index: 30;
}

.container-menu-content .menu-item .submenu {
  position: relative;
  z-index: 31;
}

/*
 * expandable-menu.css uses content: '▶' for .menu-item::before. That glyph is missing in many
 * system fonts and shows as or a box. Draw a chevron with borders instead (same open/close idea).
 */
.container-menu-content .menu-item::before {
  content: '';
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-right: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
  vertical-align: middle;
  margin-bottom: 0.15em;
  box-sizing: border-box;
}

.container-menu-content .menu-item.open::before {
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .container-menu-content {
    flex-direction: column;
  }

  .container-menu-content > #left-menu,
  .container-menu-content > .content-menu {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }
}