#toc div, #settings .sep, #settings .wr, #settings .wrh, #settings .kanb, #settings .font-serif, #settings .cs-font, #settings .dis, #settings .bg-color, #settings .font-size, .menu-left button,
.menu-right button, .menu-left,
.menu-right {
  display: flex;
}

#toc div a, #settings .sep li, #settings .wr li, #settings .wrh li, #settings .kanb li, #settings .font-serif li, #settings .cs-font li, #settings .dis li, #settings .bg-color li, #settings .font-size li, .menu-content, .menu-right button.help a, .menu-left button a,
.menu-right button a {
  flex: 1 1 auto;
}

#settings .font-serif, #settings .cs-font, #settings .dis, #settings .font-size {
  align-items: baseline;
}

.menu-left,
.menu-right {
  position: fixed;
  top: 5px;
  z-index: 10;
}
.menu-left button,
.menu-right button {
  color: inherit;
  cursor: pointer;
  align-items: center;
  border: #999 1px solid;
  border-radius: 5px;
  box-sizing: border-box;
  justify-content: center;
  float: left;
  font-size: 2rem;
  height: 2.5rem;
  margin: 0 0.3rem 0 0;
  min-width: 2.7rem;
  opacity: 0.6;
  overflow: hidden;
  padding: 0.1rem;
  white-space: nowrap;
}
.menu-left button:hover, .menu-left button.opac1,
.menu-right button:hover,
.menu-right button.opac1 {
  opacity: 1;
}
.menu-left button img,
.menu-right button img {
  width: 2rem;
  height: 2rem;
}

.menu-left {
  left: 5px;
  max-width: 60%;
}

.menu-right {
  right: 5px;
  max-width: 40%;
  flex-wrap: wrap-reverse;
  justify-content: right;
}
.menu-right button {
  margin: 0 0 0 0.2rem;
}
.menu-right button.langs {
  font-size: 1.2rem;
  padding: 0 0.3em;
}
.menu-right button.help {
  padding: 0;
}
.menu-right button.help a {
  text-decoration: none;
}
.menu-right .menu-content {
  right: 0;
}
.menu-right .menu-content li {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 10px;
}
.menu-right .menu-content li:not(.inact):hover, .menu-right .menu-content li.cur {
  padding: 2px 8px;
  border-width: 2px;
  border-style: solid;
}

.menu-content {
  position: absolute;
  border: 1px solid;
  border-color: #fff;
  box-shadow: inset 1px 1px #999, inset -1px -1px #999, 0 8px 16px 0 rgba(0, 0, 0, 0.1);
  top: 100%;
  min-height: 5vh;
  max-height: 85vh;
  min-width: 10rem;
  width: -moz-max-content;
  width: max-content;
  max-width: 85vw;
  overflow-y: scroll;
  scrollbar-width: thin;
}
.menu-content::-webkit-scrollbar {
  width: 7px;
}
.menu-content p {
  opacity: 0.75;
  padding: 0.2rem 0;
  text-indent: 0;
}
.menu-content ul {
  margin: auto;
  padding: 0;
}
.menu-content li {
  cursor: pointer;
  padding: 2px;
}
.menu-content li:not(.inact):hover, .menu-content li.cur {
  padding: 0;
  border-width: 2px;
  border-style: solid;
}
.menu-content .b {
  font-weight: bold;
}

#settings {
  padding: 5px 5px 10px;
}
#settings ul {
  padding-bottom: 0.3rem;
}
#settings .font-size {
  margin: auto;
  padding: 0;
  list-style: outside none none;
}
#settings .font-size li {
  text-align: center;
}
#settings .bg-color {
  justify-content: stretch;
  margin: auto;
  padding: 5px 0 10px;
  list-style: outside none none;
}
#settings .bg-color li {
  text-align: center;
  line-height: 1.8em;
}
#settings .font-serif, #settings .cs-font, #settings .dis {
  align-items: center;
  list-style: outside none none;
  margin: auto;
  padding: 0;
}
#settings .font-serif li, #settings .cs-font li, #settings .dis li {
  text-align: center;
  line-height: 1.5;
}
#settings #cs-pnm {
  font-family: "Ponomar Unicode", serif;
}
#settings #cs-trd {
  font-family: "Triodion Unicode", serif;
}
#settings .sep, #settings .wr, #settings .wrh, #settings .kanb {
  align-items: center;
  list-style: outside none none;
  margin: auto;
  padding: 0;
  text-align: center;
  gap: 0 2px;
}
#settings .wr {
  text-align: left;
  flex-flow: column wrap;
  flex: 1 1 auto;
  align-items: stretch;
}
#settings .kanb {
  text-align: left;
}

#toc {
  max-height: 90vh;
  max-width: 90vw;
  overflow-x: auto;
}
#toc div {
  white-space: nowrap;
}
#toc div a {
  color: inherit;
  padding: 4px 10px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  opacity: 0.8;
  text-decoration: none;
}
#toc div a.left {
  flex-grow: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
#toc div a.right {
  flex-grow: 0;
  max-width: 2em;
  padding: 4px 2px 4px 5px;
  text-align: right;
}
#toc div a:hover {
  opacity: 1;
}
#toc div.cs {
  line-height: 1;
  font-size: 1em;
}