svg path { fill: inherit; }

body {
  margin: 0; overflow-x: hidden;
  font-family: sans-serif;
  background-color: &clr_bg;;
  color: &clr_txt;;
}

.main-menu {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180pt;
  background-color: &clr_mmenu_bg;;
  border-right: solid 1px &clr_mmenu_border;;
  overflow-y: auto;
  z-index: 10;
}
.main-menu:target { display: block; }

.main-menu__back {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 180pt;
  background-color: &clr_bg;;
  opacity: 0.3;
  z-index: 3;
  cursor: unset;
}

.main-menu__close-btn {
  color: &clr_mmenu_btn;;
  user-select: none;
  font-size: 20pt;
  text-decoration: none;
  float: right;
  margin-right: 5pt;
}
.main-menu__close-btn:visited { color: &clr_mmenu_btn;; }

.main-menu__header {
  text-align: center;
  padding: 5pt 2pt 10pt 2pt;
  clear: both;
  color: &clr_mmenu_hdr_txt;;
  border-bottom: solid 1px &clr_mmenu_hdr_border;;
}
.main-menu__header__username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4pt;
  font-family: "Times New Roman", Times;
}
.main-menu__header__userlevel {
  font-size: 10pt;
}

.main-menu__item {
  display: block;
  user-select: none;
  text-decoration: none;
  padding: 8pt 0 8pt 12pt;
  color: &clr_mmenu_item;;
  font-size: 12pt;
  font-weight: 500;
}
.main-menu__item:visited {
  color: &clr_mmenu_item;;
}
.main-menu__item:focus {
  outline: 1px dotted;
}
.main-menu__item:hover {
  background-color: &clr_mmenu_item_hover_bg;;
}
.main-menu__item--current {
  color: &clr_mmenu_item_cur;;
  background-color: &clr_mmenu_item_cur_bg;;
}


.main-area {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100vh;
}

.main-area__header {
  display: flex;
/*  justify-content: space-between;*/
  min-height: 30pt;
  max-height: 30pt;
  background-color: &clr_hdr_bg;;
  border-bottom: solid 1px &clr_hdr_border;
}

.header__btn {
  flex-shrink: 0;
  color: &clr_hdr_btn;;
  width: 27pt;
  font-size: 20pt;
  font-weight: bold;
  text-decoration: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__title {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16pt;
  color: &clr_hdr_txt;;
}

.header__search-cb { display: none; }
.header__search-cb:checked ~ .header__title { font-size: 11pt; }
.header__search-cb:checked ~ .header__search { display: flex; }
.header__search-cb:checked ~ .header__ctrl-buttons .ctrl-buttons__search-show { display: none; }
.header__search-cb:checked ~ .header__ctrl-buttons .ctrl-buttons__search-hide { display: block; }

.header__search {
  display: none;
  align-items: center;
  width: 190pt;
  flex-shrink: 0;
}
.search__select {
  outline: none;
  border: none;
  border-radius: 30pt;
  font-size: 9pt;
  height: 18pt;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: center;
  text-align-last: center;
  color: &clr_search_txt;;
  background-color: &clr_search_bg;;
}
.search__select:focus { outline: unset; }
.search__text {
  width: 130pt;
  padding: 0 20pt 0 4pt;
  margin: 0 -30pt 0 2pt;
  outline: none;
  border: none;
  border-radius: 13pt;
  font-size: 12pt;
  color: &clr_search_txt;;
  background-color: &clr_search_bg;;
  height: 18pt;
}
/* A magnifying glass icon _under_ the submit button. */
.search__submit-svg {
  display: inline-block;
  position: relative;
  width: 12pt;
  height: 12pt;
  top: 2pt;
  left: 12pt;
  z-order: 1;
}
.search__submit-svg use { fill: &clr_search_inline-btn;; }
.search__submit {
  position: relative;
  left: -2pt;
  top: 1pt;
  width: 17pt;
  height: 17pt;
  border: none;
  cursor: pointer;
  background-color: rgba(0,0,0,0);/*transparent;*/
  z-order: 2;
}

.header__ctrl-buttons {
  display: flex;
  align-items: center;
  font-size: 16pt;
  user-select: none;
  padding: 0 5pt;
}

.header__ctrl-buttons__svg {
  width: 17pt;
  height: 17pt;
  margin-top: 4pt;
  fill: &clr_hdr_btn;;
  margin: 4pt 3pt 0 4pt;
  cursor: pointer;
}

.ctrl-buttons__search-hide {
  display: none;
  color: &clr_hdr_btn;;
  cursor: pointer;
  text-decoration: none;
}
.ctrl-buttons__search-hide:visited { color: &clr_hdr_btn;; }

.ctrl-buttons__search-show { display: block; }

/* Submit icon/button. */

/* Transparent submit button _over_ the icon. */
.title__search__submit {
  position: relative;
  left: -2pt;
  top: 1pt;
  width: 17pt;
  height: 17pt;
  border: none;
  cursor: pointer;
  background-color: rgba(0,0,0,0);/*transparent;*/
  z-order: 2;
}

/* Transparent submit button _over_ the icon. */
.main-area__content {
  flex-grow: 1;
  overflow: auto;
  padding-bottom: 80pt;
}

.content__workspace {
  margin: 0 auto;
  max-width: 800pt;
}

/* Modifications for wide screens. */
@media (min-width: 768px) {
  .main-menu {
    display: block;
    z-index: 0;
  }

  .main-menu__back { display: none; }
  .main-menu__close-btn { display: none; }

  .main-area {
    margin-left: 180pt;
  }

  .header__btn--hamburger { display: none; }
}
