.nav-bar {
  background-color: var(--theme-bl-banner);
  color: var(--theme-bl-banner-text);
  border-bottom: solid 1px;
  width: 100%;
  flex: none;
  display: flex;
  flex-flow: row nowrap;
}
.nav-bar .left {
  flex: auto;
  display: flex;
  flex-flow: row nowrap;
}
.nav-bar .right {
  flex: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: end;
}
.nav-bar .item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.5em;
  color: var(--theme-bl-banner-text);
  text-decoration: none;
  padding: 0.5em;
}
.nav-bar .item:hover {
  background-color: var(--theme-bl-banner-hover);
  color: var(--theme-bl-banner-hover-text);
}
.nav-bar .item .icon {
  display: contents;
  fill: var(--theme-bl-banner-text);
}
.nav-bar .item .icon:hover {
  fill: var(--theme-bl-banner-hover-text);
}
.nav-bar .item .item-text {
  display: none;
}
.nav-bar .popup .item .item-text {
  display: inline;
}
.nav-bar .menu {
  justify-self: end;
  position: relative;
  text-align: center;
}
.nav-bar .menu .items {
  background-color: var(--theme-bl-banner);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  position: absolute;
  top: 100%;
  right: 0;
  border: solid 1px;
}
.nav-bar .menu .items > * {
  padding: 0.5em;
  min-width: max-content;
}
.nav-bar .menu .items > *:hover {
  background-color: var(--theme-bl-banner-hover);
  color: var(--theme-bl-banner-hover-text);
}
.nav-bar .menu:hover > .items, .nav-bar .menu:focus-within > .items {
  visibility: visible;
}

@media (min-width: 6in) {
  .nav-bar .item .item-text {
    display: inline;
  }
}
body,
dialog {
  color: var(--system-theme-canvas-text);
  background-color: var(--system-theme-canvas);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100svh;
}

body {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
}

:root.loading .main {
  display: none;
}

.main {
  flex: auto;
}
.main.layout-manual {
  overflow-y: hidden;
}
.main.layout-auto {
  overflow-y: auto;
  padding: 0.5em 1em;
}

.nav-bar ::selection {
  background-color: var(--system-theme-highlight);
  color: var(--system-theme-highlight-text);
}

:link {
  color: var(--system-theme-link-text);
}

:visited {
  color: var(--system-theme-visited-text);
}

:any-link:active {
  color: var(--system-theme-active-text);
}

input,
textarea {
  accent-color: var(--system-theme-accent-color);
  color: var(--system-theme-field-text);
  background-color: var(--system-theme-field);
  border-color: var(--system-theme-button-border);
  border-width: thin;
}
input:invalid,
textarea:invalid {
  color: var(--system-theme-error-text);
  background-color: var(--system-theme-error);
  border-color: var(--system-theme-error-text);
}
input:disabled,
textarea:disabled {
  opacity: 0.7;
}

fieldset {
  border-color: var(--system-theme-button-border);
}

button,
input[type=submit],
select {
  color: var(--system-theme-button-text);
  border-color: var(--system-theme-button-border);
  background-color: var(--system-theme-button-face);
}
button:disabled,
input[type=submit]:disabled,
select:disabled {
  opacity: 0.7;
}