:root {
  --font-family: "Roboto", sans-serif;
  --font-weight: 300;
  --primary: #ff5900;
  --primary-hover: #ff7a33;
  --primary-focus: rgba(255,89,0,0.25);
  --primary-inverse: #fff;
  --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: #1E2427;
  --background-2: #505A61;
  --background-3: #505A61cc;
  --border: #505A61;

  --color-1: #F0F5F5;
  --color-2: #A7ACB0;

  --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 {
  padding: 0.3rem;
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  display: flex;
  font-size: 0.9rem;
  vertical-align: middle;
}

.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::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 {
  color: var(--color-2);
  --font-weight: 400;
  margin-bottom: 1.5rem;
}

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

.markdown-content a,
.markdown-content p,
.markdown-content pre {
  font-size: 1.2rem;
  line-height: 1.4rem;
}

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

.markdown-content blockquote {
  border-top: 1px solid var(--color-2);
  border-right: none;
  border-bottom: 1px solid var(--color-2);
  border-left: none;
  padding: 1rem 0;
  margin: 1.5rem 0;
}

.markdown-content blockquote p {
  font-size: 1.8rem;
  line-height: 2rem;
  font-weight: 300;
  color: var(--color-1);
}

.markdown-content blockquote blockquote {
  border: none;
  padding: 0;
  margin-bottom: 0;
}

.markdown-content blockquote blockquote p {
  font-size: 0.8rem;
  line-height: 0.8rem;
  margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5 {
  font-weight: 500;
  color: var(--color-1);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  --typography-spacing-vertical: 2rem;
}

.markdown-content h1 {
  border-bottom: 1px solid var(--color-2);
}

.markdown-content li {
  margin-left: 1rem;
}


/*
 * PAGE
 */

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

.page-header {
  display: flex;
  padding: 0.5rem;
  justify-content: space-around;
  background: var(--asv-color-bg);
}

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

.page-header .logo,
.page-footer .logo {
  padding: 0.5rem;
  margin: 0.5rem;
  display: flex;
  justify-content: space-between;
  width: 18rem;
}

.page-header .logo img,
.page-footer .logo img {
  height: 2rem;
}

.page-header .logo span {
  font-weight: 100;
  font-size: 2.9rem;
  line-height: 2rem;
  color: var(--primary);
}

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

.page-header .icon-button,
.page-footer .icon-button {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  color: white;
  background-color: var(--background-2);
  border: none;
  border-radius: 0.25rem;
  transition: 300ms;
}

.page-header .icon-button svg,
.page-footer .icon-button svg {
  margin: 50% 0 0 50%;
  transform: translate(-50%,-50%);
}

.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: 2rem;
  color: var(--primary-inverse);
  font-size: 0.9rem;
  font-weight: 300;
}

.page-header .app-menu-icon,
.page-footer .app-menu-icon {
  color: black;
  background: var(--primary);
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.page-header .app-menu-icon svg,
.page-footer .app-menu-icon svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.page-content {
  flex: 1;
  display: flex;
  justify-content: space-around;
}