:root {
  --font-family: "Inter", sans-serif;
  --font-family-fixed: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
  --font-weight: 300;
  --primary: #ff5900;
  --primary-hover: #ff7a33;
  --primary-focus: rgba(255,89,0,0.25);
  --primary-inverse: #ffffff;
  --secondary: #596b78;
  --secondary-hover: #73828c;
  --secondary-focus: rgba(115,130,140,0.25);
  --secondary-inverse: #fff;
  --contrast: #292f33;
  --contrast-focus: rgba(115,130,140,0.25);
  --contrast-inverse: white;
  --contrast-hover: #444e55;
  --mark-background-color: #d0c284;
  --mark-color: #11191f;
  --ins-color: #388e3c;
  --del-color: #c62828;
  --progress-color: #d9961a;
  --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --spacing: 0.25rem;
  --form-element-spacing-vertical: 0.25rem;


  /* allstreet custom vars*/

  /* --background: #2B3034; */
  --background: #2B2D2E;
  /* --background-t: #2B303480; */
  --background-t: #2B2D2E80;
  /* --background-1: #2B3034; */
  --background-1: #2B2D2E;
  --background-1-t: #2B2D2E80;
  /* --background-2: #1C2023; */
  --background-2: #202529;
  /* --background-2-t: #1C202380; /\* 50% opaque *\/ */
  --background-2-t: #20252980; /* 50% opaque */
  --background-3: #505A61;
  --background-3-t: #505A6180;
  --background-4: #1A1922;
  --background-5: #202529;
  --background-6: #3E4449;
  --background-7: #1E2427;
  --background-8: #E5EFF5;
  --background-8-t: #E5EFF580;

  --border: #505A61;

  --color-1: #F0F5F5;
  --color-2: #808385;
  --color-3: #A8BABD;
  --color-4: #A7ACB0;
  --color-5: #E5EFF5;
  --color-6: #FFFFFFA0; /* 60% opaque white */

  --asv-font-family-fixed: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;

  --asv-color-hover: rgba(115, 130, 140, 0.25);
  --asv-color-bg: #05080a;
  --asv-color-bg2: #22282f;
  --asv-color-border: #555555;
  --asv-color-border2: #2e343a;

  --asv-color-purple: #9f6dd2;
  --asv-color-red: #d2353a;
  --asv-color-green: #92e761;
  --asv-color-orange: #d89538;
  --asv-color-brown: #8d562c;
  --asv-color-white: white;
  --asv-color-silver: #b4b2b5;

  --icon-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2213px%22%20height%3D%2215px%22%20viewBox%3D%220%200%2013%2015%22%20version%3D%221.1%22%3E%0A%20%20%20%20%3Ctitle%3E393AB551-90D8-430B-BF90-5C10069FE0B2%3C%2Ftitle%3E%0A%20%20%20%20%3Cg%20id%3D%222021%22%20stroke%3D%22none%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%2201_Environmental-Social-Governance-Profile-%22%20transform%3D%22translate%28-639.000000%2C%20-18.000000%29%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Top-%22%20transform%3D%22translate%2860.000000%2C%200.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-11%22%20transform%3D%22translate%28563.000000%2C%200.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22rgba%28162%2C%20175%2C%20185%2C%200.999%29%22%20d%3D%22M22.2893701%2C25.3622047%20C25.7588583%2C25.3622047%2028.5787402%2C28.1820866%2028.5787402%2C31.6515748%20C28.5787402%2C32.0354331%2028.2687008%2C32.3454724%2027.8848425%2C32.3454724%20L27.8848425%2C32.3454724%20L16.6938976%2C32.3454724%20C16.3100394%2C32.3454724%2016%2C32.0354331%2016%2C31.6515748%20C16%2C28.1820866%2018.8198819%2C25.3622047%2022.2893701%2C25.3622047%20Z%20M22.2893701%2C26.75%20C19.8238189%2C26.75%2017.7765748%2C28.5807087%2017.4370079%2C30.9576772%20L17.4370079%2C30.9576772%20L27.1417323%2C30.9576772%20C26.8021654%2C28.5807087%2024.7549213%2C26.75%2022.2893701%2C26.75%20Z%20M22.2893701%2C18%20C23.9330709%2C18%2025.2716535%2C19.4124016%2025.2716535%2C21.1545276%20C25.2716535%2C22.8966535%2023.9330709%2C24.3090551%2022.2893701%2C24.3090551%20C20.6456693%2C24.3090551%2019.3070866%2C22.8917323%2019.3070866%2C21.1545276%20C19.3070866%2C19.4173228%2020.6456693%2C18%2022.2893701%2C18%20Z%20M22.2893701%2C19.3927165%20C21.4084646%2C19.3927165%2020.6948819%2C20.1801181%2020.6948819%2C21.1545276%20C20.6948819%2C22.1240157%2021.4084646%2C22.9163386%2022.2893701%2C22.9163386%20C23.1702756%2C22.9163386%2023.8838583%2C22.128937%2023.8838583%2C21.1545276%20C23.8838583%2C20.1801181%2023.1702756%2C19.3927165%2022.2893701%2C19.3927165%20Z%22%20id%3D%22ESG-Profile%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");

  --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' width='1em' height='1em' fill='white'%3E%3Cpath d='M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z'%3E%3C/path%3E%3C/svg%3E");

  --icon-eye-invisible: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' width='1em' height='1em' fill='white'%3E%3Cpath d='M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z'%3E%3C/path%3E%3Cpath d='M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z'%3E%3C/path%3E%3C/svg%3E");

}

@media (min-width: 576px)
{
  :root {
    --font-size: 17px;
  }
}

@media (min-width: 768px)
{
  :root {
    --font-size: 18px;
  }
}

@media (min-width: 992px)
{
  :root {
    --font-size: 19px;
  }
}

@media (min-width: 1200px) {
  :root {
    --font-size: 20px;
  }
}

[data-web-app-theme=default] {
  /* default */
}

[data-web-app-theme=darkgreen] {
  --primary: #158000;
  --primary-hover: #9ed194;
  --primary-focus: #15800040;
}

.silver {
  color: var(--asv-color-silver);
}

.red {
  color: var(--asv-color-red);
}

.green {
  color: var(--asv-color-green);
}

.orange {
  color: var(--asv-color-orange);
}

.brown {
  color: var(--asv-color-brown);
}

.purple {
  color: var(--asv-color-purple);
}

.white {
  color: var(--asv-color-white);
}


input[type='number'] {
  -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.ternary-checkbox [type=checkbox]:indeterminate {
  background-color: var(--asv-color-bg2);
  border: 1pt solid #666;
}

a.delete[role=button] {
  background-color: var(--asv-color-red);
}

.icon-button {
  position: relative;
  padding: 0;
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
  border: none;
  border-radius: 0.25rem;
  display: flex;
  font-size: 1rem;
  vertical-align: middle;
}

.icon-button svg,
.icon-button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.selectable:hover {
  background-color: var(--asv-color-hover);
  cursor: pointer;
  box-shadow: 0.1rem 0.1rem 0.2rem 0.2rem var(--asv-color-hover) inset,
              -0.05rem -0.05rem 0.2rem 0.2rem var(--asv-color-hover) inset;
}

.selected {
  background-color: var(--asv-color-bg2);
}

.busy-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--asv-color-hover);
  display: none;
}

.busy-screen.htmx-request {
  display: block;
}

.busy-screen div {
  margin: 50%;
}

.flashRed {
  animation-duration: 1s;
  animation-name: flashRed;
}

@keyframes flashRed {
  from {
    box-shadow: 0 0 0.5rem 0.5rem var(--asv-color-red);
  }

  to {}
}


/*
 * MARKDOWN
 */

figure.md.image {
  width: fit-content;
  height: fit-content;
}

figure.md.image img {
  margin: 0;
}

figure.md.image.preview {
  position: relative;
  cursor: pointer;
}

figure.md.image.preview .indicator {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000a var(--icon-eye) no-repeat center/1rem;
}

figure.md.image.preview:hover .indicator {
  display: block;
}

figure.md.image.preview .popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0003;
  z-index: 9999;
}

figure.md.image.preview .popup.shown {
  display: block;
}

figure.md.image.preview .popup > .item,
figure.md.image.preview .popup > img {
  width: fit-content;
  height: fit-content;
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
  margin: 50vh 0 0 50vw;
  transform: translate(-50%,-50%);
  cursor: auto;
}

figure.md.image.preview .popup > .item img {
  max-width: 100%;
}

/* figure.md.image.preview .popup::after { */
/*   display: block; */
/*   width: 2rem; */
/*   height: 2rem; */
/*   line-height: 2rem; */
/*   text-align: center; */
/*   background: white; */
/*   color: black; */
/*   content: "❌"; */
/*   position: absolute; */
/*   top: 5%; */
/*   right: 5%; */
/* } */

figure.md.image .item {
  display: flex;
  flex-direction: column;
  border: 1pt solid var(--border);
  border-radius: 0.3rem;
  overflow: hidden;
}

figure.md.image:has(.item) .indicator {
  border-radius: 0.3rem;
}

figure.md.image .item .bar {
  position: relative;
  background: var(--background-2);
  height: 1rem;
}

figure.md.image > *,
figure.md.image .item > * {
  margin: 0;
}

figure.md.image .item .bar::before {
  content: "•••";
  color: var(--color-2);
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1rem;
  padding: 0 0.5rem;
}

.gallery.md {
  display: flex;
  flex-wrap: wrap;
}

.gallery.md figure.md.image {
  margin: 0.25rem;
}

.gallery.md figure.md.image > .item img {
  width: 16rem;
  height: 10rem;
  object-fit: cover;
}


.markdown-content p {
  font-weight: 400;
  font-size: 0.7rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: #E0E0E0;
}

.markdown-content p.para-bright {
  color: white;
}

.markdown-content a {
  font-size: 0.7rem;
}

.markdown-content code,
.markdown-content pre {
  border: none;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  line-height: 1.5;
  white-space: pre-wrap;
  padding: 0.5rem;
  color: #ccccaa;
  background: #101923;
}

.markdown-content code {
  padding: 0 0.5rem;
}

.markdown-content pre {
  margin-bottom: 1.5rem;
}

.markdown-content pre code {
  padding: 0;
}

.markdown-content b,
.markdown-content strong {
  color: white;
  font-weight: 700;
}

.markdown-content blockquote {
  border: none;
  /* border-left: 0.25rem solid #FFF2; */
  border-radius: 0.25rem;
  background: #2B2D2E;
  padding: 0.5rem;
  margin: 1.5rem 0;
}

.markdown-content blockquote p {
  font-style: italic;
  margin-bottom: 0;
}

.markdown-content blockquote blockquote {
  margin: 0.25rem;
}

.markdown-content blockquote blockquote p {
  font-size: 0.6rem;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-weight: 700;
  color: #E0E0E0;
  padding-bottom: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  --typography-spacing-vertical: 2rem;
}

.markdown-content h1 {
  color: var(--primary);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5;
  /* border-bottom: 1px solid var(--color-2); */
}

.markdown-content h2 {
  font-size: 0.9rem;
  font-weight: 500;
}

.markdown-content h3 {
  font-size: 0.8rem;
}

.markdown-content h4 {
  font-size: 0.7rem;
}

.markdown-content h5 {
  font-size: 0.6rem;
}

.markdown-content h6 {
  font-size: 0.5rem;
}

.markdown-content hr {
  border-top: 1px solid #555;
}

.markdown-content ol {
  color: #E0E0E0;
  margin-left: 1rem;
}


.markdown-content ul {
  color: #E0E0E0;
  margin-left: 0.5rem;
}

.markdown-content li {
  margin-left: 0.5rem;
  color: #E0E0E0;
}

.markdown-content ol li::marker,
.markdown-content ul li::marker {
  font-family: var(--font-family-fixed);
}

.markdown-content ul:has(li input[type=checkbox]) {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

.markdown-content li:has(input[type=checkbox]) {
  border: 1px solid var(--background-1);
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin: 0.5rem 0.5rem 0.5rem 0;
}

.markdown-content li:has(input[type=checkbox]:checked) {
  background-color: var(--background-1);
}

.markdown-content li:has(input[type=checkbox]) > * {
  margin-bottom: 0;
}

.markdown-content input[type=checkbox] {
  opacity: 1;
  background-color: var(--background-1);
  border: 1px solid #5A5B5C;
  font-size: 0.7rem;
  border-radius: 2px;
}

.markdown-content input[type=checkbox]:checked {
  background-color: #2D9000;
}

.markdown-content table {
  --table-border-color: none;
  --table-row-stripped-background-color: var(--background-1);
  --color: #E0E0E0;
  --line-height: 1.4;
  margin-bottom: 1.5rem;
}

/* .markdown-content table tbody tr:nth-child(even) { */
/*   background-color: #2B2D2E; */
/* } */

.markdown-content table tbody tr:nth-child(odd) {
  background-color: var(--table-row-stripped-background-color);
}

.markdown-content table thead th,
.markdown-content table thead td {
  color: var(--primary);
}

.markdown-content table th {
  --font-size: 0.6rem;
  padding: 0.5rem;
}

.markdown-content table td {
  --font-size: 0.6rem;
  padding: 0.5rem;
}


/*
 * PAGE
 */

.page {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-header,
.page-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 1rem 2rem;
  margin: 2rem 3rem;
  z-index: 9999;
  border-radius: 1rem;
}

.page-content {
  margin: 0 3rem;
  min-height: calc(100vh - 21rem);
}

.page-footer {
  background: var(--background-2);
  justify-content: space-between;
}

.page-header a:hover,
.page-footer a:hover {
  background: var(--primary-focus);
}

.page-header .logo-bar,
.page-footer .logo-bar,
.page-header .nav-bar,
.page-footer .nav-bar {
  padding: 0;
  margin: 1rem;
  display: flex;
  flex-wrap: wrap;
}

.page-header .nav-bar,
.page-footer .nav-bar {
  margin: 0.5rem;
}

.page-header .nav-bar-section,
.page-footer .nav-bar-section {
  display: flex;
  margin: 0.5rem 0;
}

.page-header .logo-bar > *,
.page-footer .logo-bar > *,
.page-header .nav-bar-section > *,
.page-footer .nav-bar-section > * {
  margin: 0rem 0.5rem;
}

.page-header .logo-bar .logo,
.page-footer .logo-bar .logo {
  display: flex;
  padding: 0;
  margin: 0;
  width: unset;
}

.page-header .logo-bar .logo img,
.page-footer .logo-bar .logo img {
  height: 2.5rem;
  width: 9rem;
}

.page-header .logo-bar .logo:hover,
.page-footer .logo-bar .logo:hover {
  text-decoration: none;
}

.page-header .logo-bar .title {
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 2.5rem;
  color: var(--color-6);
  margin-left: 2rem;
}

.page-header .logo-bar .title:hover {
  text-decoration: none;
}

@media (max-width: 600px) {
  .page-header .logo-bar .title {
    display: none;
  }
}

.page-footer .logo-bar .copyright {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 2.5rem;
  color: var(--color-2);
  margin-left: 1rem;
}

.page-header .icon-button,
.page-footer .icon-button {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  color: white;
  background: var(--background-3-t);
  backdrop-filter: blur(2rem);
  border: none;
  border-radius: 1.25rem;
  transition: 300ms;
}

.page-footer .icon-button {
  background: var(--background-3-t);
}

.page-header .icon-button:hover,
.page-footer .icon-button:hover {
  background: var(--primary-focus);
}

.page-header .outline[role=button],
.page-footer .outline[role=button] {
  white-space: nowrap;
  height: 2.5rem;
  color: white;
  background: var(--background-3-t);
  backdrop-filter: blur(2rem);
  border: none;
  border-radius: 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.page-footer .outline[role=button] {
  background: var(--background-3-t);
}

.page-header .outline[role=button]:hover,
.page-footer .outline[role=button]:hover {
  background: var(--primary-focus);
  border-color: var(--primary-focus);
}


.nav-bar .app-menu-button {
  position: relative;
}

.nav-bar .app-menu-icon-button {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  color: black;
  background: var(--primary);
  backdrop-filter: blur(2rem);
  border: none;
  border-radius: 1.25rem;
  cursor: pointer;
}

.nav-bar .app-menu-icon-button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 1rem;
  height: 1rem;
}

.nav-bar .app-menu-popup-root {
  position: absolute;
  z-index: 99999;
  top: 2rem;
  right: 0;
  padding: 0.5rem 0;
}

.nav-bar .app-menu-popup {
  width: 15rem;
  max-width: 50vw;
  max-height: 90vh;
  border-radius: 0.5rem;
  border: 1pt solid #666;
  background: #222;
  padding: 1.5rem 0.5rem;
  display: none;
  overflow: auto;
}

.nav-bar .app-menu-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99990;
}

.nav-bar .app-menu-button:hover .app-menu-icon-button {
  background: var(--primary-hover);
}

.nav-bar .app-menu-button.active .app-menu-popup {
  display: flex;
  flex-direction: column;
}

.nav-bar .app-menu-button.active .app-menu-popup-overlay {
  display: block;
}

.nav-bar .app-menu-list {
  display: flex;
  flex-direction: column;
}

.nav-bar .app-menu-item {
  display: flex;
  cursor: pointer;
  text-decoration: none;
  color: white;
}

.nav-bar .app-menu-item:hover {
  background: #ff5900;
}

.nav-bar .app-menu-item-icon {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0.5rem;
  margin: 0.35rem 0.5rem;
  background: white;
  border-radius: 50%;
}

.nav-bar .app-menu-item-icon img,
.nav-bar .app-menu-item-icon svg {
  display: block;
  height: 0.9rem;
  width: 0.9rem;
}

.nav-bar .app-menu-item .label {
  flex: 1;
  text-align: left;
  padding: 0.5rem 0;
}

.nav-bar .app-menu-item-popup {
  position: absolute;
  top: 0;
  right: 100%;
  width: 17.5rem;
  max-width: 50vw;
  border-radius: 0.5rem;
  border: 1pt solid #666;
  background: #222;
  padding: 0.5rem;
  margin: 0.5rem;
  display: none;
}

.nav-bar .app-menu-item-popup .app-title {
  font-size: 0.9rem;
  color: #ff5900;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.nav-bar .app-menu-item-popup .app-info {
  font-size: 0.7rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.nav-bar .app-menu-item-popup img {
  flex: 1;
}

.nav-bar .app-menu-item:hover .app-menu-item-popup {
  display: flex;
  flex-direction: column;
}

.page-footer .app-menu-popup-root {
  top: unset;
  bottom: 2rem;
}

.page-footer .app-menu-item-popup {
  position: absolute;
  top: 100%;
  right: 100%;
  width: 17.5rem;
  max-width: 50vw;
  border-radius: 0.5rem;
  border: 1pt solid #666;
  background: #222;
  padding: 0.5rem;
  margin: 0.5rem;
  display: none;
  transform: translateY(-100%);
}

@media (max-width:1200px) {
  .page-header,
  .page-footer {
    margin: 1rem 1rem;
    padding: 1rem 1rem;
  }

  .page-header .nav-bar,
  .page-footer .nav-bar {
    margin-left: auto;
  }

  .page-content {
    margin: 1rem;
  }
}

@media (max-width:960px) {
  .page-header,
  .page-footer {
    margin: 1rem 0.5rem;
    padding: 0.5rem 1rem;
  }

  .page-header .logo-bar,
  .page-footer .logo-bar,
  .page-header .nav-bar,
  .page-footer .nav-bar {
    margin: 0.25rem 0;
  }

  .page-header .nav-bar,
  .page-footer .nav-bar {
    margin: 0.125rem;
    margin-left: auto;
  }

  .page-header .nav-bar-section,
  .page-footer .nav-bar-section {
    margin: 0.125rem 0;
  }

  .page-header .logo-bar > *,
  .page-footer .logo-bar > *,
  .page-header .nav-bar-section > *,
  .page-footer .nav-bar-section > * {
    margin: 0rem 0.125rem;
  }

  .page-content {
    margin: 0 0.5rem;
  }
}

@media (max-width:500px) {
  .page-header .nav-bar-section,
  .page-footer .nav-bar-section {
    margin-left: auto;
  }
}