:root {
  /*========*/
  /* WIDTHS */
  /*========*/

  --content-max-width: 1600px;

  /*=============*/
  /* TRANSITIONS */
  /*=============*/

  --hover-in-time: 0s;
  --hover-out-time: 0.2s;
  --hover-in-fun: ease-out;
  --hover-out-fun: ease-in;

  --open-time: 0.2s;
  --close-time: 0.2s;
  --open-fun: ease-out;
  --close-fun: ease-in;

  --menu-in-time: 0.2s;
  --menu-out-time: 0.2s;
  --menu-in-fun: ease-out;
  --menu-out-fun: ease-in;

  --message-in-time: var(--menu-in-time);
  --message-out-time: var(--menu-out-time);
  --message-in-fun: var(--menu-in-fun);
  --message-out-fun: var(--menu-out-fun);

  --box-in-time: var(--hover-in-time);
  --box-out-time: var(--hover-out-time);
  --box-in-fun: var(--hover-in-fun);
  --box-out-fun: var(--hover-out-fun);

  --cookie-popup-out-time: .5s;
  --cookie-popup-out-fun: ease-out;

  /*=======*/
  /* FONTS */
  /*=======*/

  --normal-font-size: 15px;

  --menu-font-family: 'Oswald', sans-serif;
  --menu-font-weight: 300;

  --heading-font-family: 'Oswald', sans-serif;
  --heading-font-weight: 400;

  --normal-font-family: 'Poppins', sans-serif;
  --normal-font-weight: 400;

  --bold-font-family: 'Poppins', sans-serif;
  --bold-font-weight: 600;

  --thin-font-family: 'Poppins', sans-serif;
  --thin-font-weight: 200;

  --tiny-font-family: 'Poppins', sans-serif;
  --tiny-font-weight: 200;

  --mono-font-family: 'Roboto Mono', monospace;
  --mono-font-weight: 400;

  --bold-mono-font-family: 'Roboto Mono', monospace;
  --bold-mono-font-weight: 700;

  /*========*/
  /* COLORS */
  /*========*/

  --profile-0: #fff;
  --profile-1: #ff801a;
  --profile-2: #7f7979;
  --profile-3: #eae2d6;
  --profile-3b: #d5c6ae;
  --profile-4: #f8f5f2;
  --profile-5: #e0e0e0;
  --profile-6: #ff780a;
  --profile-7: #eee;
  --profile-8: #bbb;

  --facebook-bg: #4267B2;
  --facebook-text: #fff;

  --error-text: #eb2828;
  --error-text-hover: #c81f1f;

  --admin-border: var(--error-text);

  --logo: #000;
  --logo-shadow: var(--profile-1);

  --main-bg: var(--profile-0);
  --main-text: #000;
  --main-link: var(--profile-1);
  --main-link-hover: #000;
  --main-border: #eae2d6;
  --main-border-hover: #6c5737;
  --main-tr-hover-bg: #f8f5f1;

  --banner-fallback-bg: var(--profile-2);
  --banner-text: var(--profile-0);

  --resize-border: #000;

  --button-bg: var(--main-border);
  --button-bg-hover: var(--profile-1);
  --button-text: var(--main-text);
  --button-text-hover: var(--button-text);
  --button-text-disabled: #888;
  --button-border: var(--button-text);
  --button-border-disabled: var(--button-text-disabled);

  --input-bg: var(--profile-0);
  --input-border: var(--main-text);
  --input-border-hover: var(--profile-1);
  --input-border-active: var(--profile-1);
  --input-border-disabled: var(--button-text-disabled);
  --input-bg-disabled: #ddd;
  --input-text-disabled: var(--main-text);

  --checkbox-border: var(--input-border);
  --checkbox-border-hover: var(--input-border-hover);
  --checkbox-border-active: var(--input-border-active);
  --checkbox-border-disabled: var(--input-border-disabled);
  --checkbox-bg: var(--input-bg);
  --checkbox-bg-hover: var(--checkbox-border-hover);
  --checkbox-bg-active: var(--checkbox-border-active);
  --checkbox-bg-checked: var(--checkbox-border);
  --checkbox-bg-disabled: var(--input-bg-disabled);
  --checkbox-bg-disabled-checked: #bbb;

  --attention-text: var(--error-text);
  --grey-title-text: #777;

  --blocking-message-bg: #000;
  --blocking-message-content-bg: #000;
  --blocking-message-content-text: #fff;
  --blocking-message-content-link: var(--main-link);
  --blocking-message-content-link-hover: var(--blocking-message-content-text);

  --box-shadow: #888;

  --line-in-blocking-message: #333;

  --cookies-bg: var(--profile-1);
  --cookies-text: #000;
  --cookies-border: var(--cookies-text);
  --cookies-button-hover: var(--profile-0);

  --discount-text: #EB2828;

  --bar-bg: var(--profile-1);
  --bar-height: .5rem;
  --bar-sep: .25rem;

  /*================*/
  /* OTHER SETTINGS */
  /*================*/

  --button-radius: .8em;
  --view-width: 0; /* Will be set by JS */
  --view-height: 0; /* Will be set by JS */
  --scrollbar-width: 0; /* Will be set by JS */
  --common-header-height: 0; /* Will be set by JS */
  --common-banner-height: 0; /* Will be set by JS */
  --main-content-width: 32rem;
  --main-content-default-padding: 2rem 1rem 0;
  --blocking-message-padding: 1rem;
  --admin-border-width: .3rem;

  --header-z-index: 10;
  --on-top-of-header-z-index: 11;
  --blocking-message-z-index: 100;
  --cookie-popup-z-index: var(--blocking-message-z-index);
  --admin-border-z-index: calc(var(--blocking-message-z-index) + 1);
}

html {
  position: relative;
}

html,
body,
form {
  margin: 0;
  padding: 0;
}

body,
input,
textarea {
  font-family: var(--normal-font-family);
  font-weight: var(--normal-font-weight);
  font-size: var(--normal-font-size);
}
h1,
h2 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
}
table {
  border-collapse: collapse;
}
emph {
  font-style: normal;
  font-family: var(--bold-font-family);
  font-weight: var(--bold-font-weight);
}

input,
.input,
select,
textarea {
  background-color: var(--input-bg);
  font-family: var(--normal-font-family);
  font-weight: var(--normal-font-weight);
  border: 1px solid var(--input-border);
  padding: .2rem .3rem;
  transition: all var(--hover-out-time) var(--hover-out-fun);
}
select {
  padding-left: 0;
  padding-right: 0;
}
input:disabled,
.input.disabled,
select:disabled,
textarea:disabled {
  background-color: var(--input-bg-disabled);
  color: var(--input-text-disabled);
  opacity: 1;
}
input:active,
input:focus,
.input.active,
.input.focus,
select:active,
select:focus,
textarea:active,
textarea:focus,
[contenteditable]:focus {
  outline: none;
  border-color: var(--input-border-active);
  box-shadow: 0 0 .2em var(--input-border-active);
  transition: all var(--hover-in-time) var(--hover-in-fun);
}
input:hover,
.input:hover,
select:hover,
textarea:hover {
  border-color: var(--input-border-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun);
}
input:disabled:active,
input:disabled:hover,
.input.disabled:active,
.input.disabled:hover,
select:disabled:active,
select:disabled:hover,
textarea:disabled:active,
textarea:disabled:hover {
  border-color: var(--input-border);
  box-shadow: none;
}
input:disabled:hover,
.input.disabled:hover,
select:disabled:hover,
textarea:disabled:hover {
  cursor: not-allowed;
}
select {
  background-color: var(--main-bg);
  font-size: 100%;
}
.input {
  cursor: text;
}

a,
a:visited {
  color: var(--main-link);
  text-decoration: none;
  transition: all var(--hover-out-time) var(--hover-out-fun);
}
a:active,
a:focus,
a:hover {
  color: var(--main-link-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun);
}

button {
  font-family: var(--bold-font-family);
  font-weight: var(--bold-font-weight);
  font-size: .95rem;
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: .5em 1em;
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius);
  transition: all var(--hover-out-time) var(--hover-out-fun);
  user-select: none;
}
button:active,
button:focus,
button:hover {
  outline: none;
  background-color: var(--button-bg-hover);
  color: var(--button-text-hover);
  cursor: pointer;
  /* box-shadow: .1em .1em .4em var(--box-shadow); TODO: keep? */
  transition: all var(--hover-in-time) var(--hover-in-fun);
}
button:disabled {
  color: var(--button-text-disabled);
  border-color: var(--button-border-disabled);
}
button:disabled:active,
button:disabled:focus,
button:disabled:hover {
  background-color: var(--button-bg);
  color: var(--button-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

svg {
  overflow: visible;
}

svg.loading {
  width: 1rem;
  height: 1rem;
}
svg.loading .colorable {
  fill: var(--main-text);
}

svg.edit-symbol path {
  fill: var(--button-text);
}

svg.checkbox,
svg.crossbox,
svg.radio-button {
  width: .9rem;
  height: .9rem;
  border: 1px solid var(--checkbox-border);
  background-color: var(--main-bg);
  transition: all var(--hover-out-time) var(--hover-out-fun),
              background-color var(--box-out-time) var(--box-out-fun);
}
svg.checkbox .colorable,
svg.crossbox .colorable,
svg.radio-button .colorable {
  transition: all var(--hover-out-time) var(--hover-out-fun),
              fill var(--box-out-time) var(--box-out-fun);
}
svg.radio-button {
  border-radius: 50%;
}
svg.checkbox,
svg.crossbox {
  border: 1px solid var(--checkbox-border);
}
svg.checkbox .colorable,
svg.crossbox .colorable,
svg.radio-button .colorable {
  fill: var(--main-bg);
}
svg.checkbox:hover,
svg.crossbox:hover,
svg.radio-button:hover,
.label:hover svg.checkbox,
.label:hover svg.crossbox,
.label:hover svg.radio-button {
  cursor: pointer;
  border-color: var(--checkbox-border-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-out-time) var(--box-out-fun);
}
svg.radio-button:hover .colorable,
.label:hover svg.radio-button .colorable {
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-out-time) var(--box-out-fun);
}
svg.checkbox:active,
svg.checkbox:focus,
svg.crossbox:active,
svg.crossbox:focus,
svg.radio-button:active,
svg.radio-button:focus {
  outline: none;
  border-color: var(--checkbox-border-active);
  box-shadow: 0 0 .2em var(--checkbox-border-active);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-out-time) var(--box-out-fun);
}
svg.radio-button:active .colorable,
svg.radio-button:focus .colorable {
  transition: all var(--hover-in-time) var(--hover-in-fun),
              fill var(--box-out-time) var(--box-out-fun);
}
svg.checkbox.checked,
svg.crossbox.crossed {
  background-color: var(--checkbox-bg-checked);
}
svg.radio-button.selected .colorable {
  fill: var(--checkbox-border);
}
svg.checkbox.checked:active,
svg.checkbox.checked:focus,
svg.crossbox.crossed:active,
svg.crossbox.crossed:focus {
  background-color: var(--checkbox-bg-active);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-in-time) var(--box-in-fun);
}
svg.checkbox.checked:hover,
svg.crossbox.crossed:hover,
.label:hover svg.checkbox.checked,
.label:hover svg.crossbox.crossed {
  background-color: var(--checkbox-bg-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-in-time) var(--box-in-fun);
}
svg.checkbox.checked:active .colorable,
svg.checkbox.checked:focus .colorable,
svg.checkbox.checked:hover .colorable,
svg.crossbox.crossed:active .colorable,
svg.crossbox.crossed:focus .colorable,
svg.crossbox.crossed:hover .colorable,
.label:hover svg.checkbox.checked .colorable,
.label:hover svg.crossbox.crossed .colorable {
  transition: all var(--hover-in-time) var(--hover-in-fun),
              fill var(--box-in-time) var(--box-in-fun);
}
svg.radio-button.selected:active .colorable,
svg.radio-button.selected:focus .colorable,
svg.radio-button.selected:hover .colorable,
.label:hover svg.radio-button.selected .colorable {
  fill: var(--checkbox-border-active);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              fill var(--box-in-time) var(--box-in-fun);
}
svg.checkbox.disabled,
svg.crossbox.disabled,
svg.radio-button.disabled,
svg.checkbox.disabled.checked,
svg.crossbox.disabled.checked,
svg.radio-button.disabled.selected {
  border-color: var(--checkbox-border-disabled) !important;
  background-color: var(--checkbox-bg-disabled) !important;
  cursor: not-allowed !important;
}
svg.checkbox.disabled.checked,
svg.crossbox.disabled.checked,
svg.radio-button.disabled.selected {
  background-color: var(--checkbox-bg-disabled-checked) !important;
}
svg.checkbox.disabled:not(.checked) .colorable,
svg.crossbox.disabled:not(.checked) .colorable,
svg.radio-button.disabled:not(.selected) .colorable {
  border-color: var(--checkbox-border-disabled) !important;
  fill: var(--checkbox-bg-disabled) !important;
}
svg.checkbox.disabled:active,
svg.checkbox.disabled:focus,
svg.crossbox.disabled:active,
svg.crossbox.disabled:focus,
svg.radio-button.disabled:active,
svg.radio-button.disabled:focus,
svg.checkbox.disabled.checked:active,
svg.checkbox.disabled.checked:focus,
svg.crossbox.disabled.checked:active,
svg.crossbox.disabled.checked:focus,
svg.radio-button.disabled.selected:active,
svg.radio-button.disabled.selected:focus {
  border-color: var(--checkbox-border-disabled);
  box-shadow: 0 0 .2em var(--checkbox-border-disabled);
}
.blocking-modal .grid .content svg.checkbox,
.blocking-modal .grid .content svg.crossbox,
.blocking-modal .grid .content svg.radio-button {
  background-color: var(--blocking-message-content-text);
}
.blocking-modal .grid .content svg.checkbox.checked .colorable,
.blocking-modal .grid .content svg.crossbox.crossed .colorable,
.blocking-modal .grid .content svg.radio-button.selected .colorable {
  fill: var(--blocking-message-content-bg);
}
.blocking-modal .grid .content svg.checkbox.checked:active .colorable,
.blocking-modal .grid .content svg.checkbox.checked:focus .colorable,
.blocking-modal .grid .content svg.checkbox.checked:hover .colorable,
.blocking-modal .grid .content svg.crossbox.crossed:active .colorable,
.blocking-modal .grid .content svg.crossbox.crossed:focus .colorable,
.blocking-modal .grid .content svg.crossbox.crossed:hover .colorable,
.blocking-modal .grid .content svg.radio-button.selected:active .colorable,
.blocking-modal .grid .content svg.radio-button.selected:focus .colorable,
.blocking-modal .grid .content svg.radio-button.selected:hover .colorable,
.blocking-modal .grid .content .label:hover svg.checkbox.checked .colorable,
.blocking-modal .grid .content .label:hover svg.crossbox.crossed .colorable,
.blocking-modal .grid .content .label:hover svg.radio-button.selected .colorable
{
  fill: var(--input-border-active);
}
.blocking-modal .grid .content svg.loading .colorable {
  fill: var(--blocking-message-content-text);
}
.blocking-modal .grid .content button svg.loading .colorable {
  fill: var(--blocking-message-content-bg);
}

.hide {
  display: none !important;
}

.blocking-modal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: var(--blocking-message-z-index);
  transition: all var(--message-out-time) var(--message-out-fun);
  backdrop-filter: blur(3px);
}
.blocking-modal.preshow {
  opacity: 0;
}
.blocking-modal.show {
  opacity: 1;
  transition: all var(--message-in-time) var(--message-in-fun);
}
.blocking-modal .background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--blocking-message-bg);
  opacity: .3;
}
.blocking-modal .grid {
  position: absolute;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
}
.blocking-modal .grid .content {
  max-width: 36rem;
  max-height: 75vh;
  overflow-y: auto;
  background-color: var(--blocking-message-content-bg);
  box-sizing: border-box;
  padding: var(--blocking-message-padding);
  border-radius: .8rem;
  position: relative;
}
.blocking-modal .grid .content a {
  color: var(--blocking-message-content-link);
}
.blocking-modal .grid .content a:active,
.blocking-modal .grid .content a:focus,
.blocking-modal .grid .content a:hover {
  color: var(--blocking-message-content-link-hover);
}
.blocking-modal .grid .content.filling-screen {
  border-radius: 0;
}
.blocking-modal .grid .content p {
  color: var(--blocking-message-content-text);
  margin-top: 0;
}
.blocking-modal .grid .content p:last-child {
  margin-bottom: 0;
}
/* Wrapping so that a dialog offering three answers, or two long ones, does
   not run off the side of a narrow screen. Two short ones never wrap. */
.blocking-modal .grid .content .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
}
.blocking-modal .grid .content > p > input {
  display: block;
  margin: 1rem 0 0;
  width: 100%;
  box-sizing: border-box;
}
.blocking-modal .grid .content .errors {
  margin: 1rem 0 0;
  color: var(--error-text);
}
.blocking-modal .grid .content span.error-prefix {
  color: var(--error-text);
  font-family: var(--bold-font-family);
  font-weight: var(--bold-font-weight);
  text-transform: uppercase;
  margin-right: .5em;
}

.maintenance-message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--blocking-message-z-index);
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background-color: var(--main-bg);
  color: var(--main-text);
  text-align: center;
}
.maintenance-message > .content {
  max-width: 32rem;
}
.maintenance-message .title {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-size: 1.6rem;
  margin: 0 0 1rem;
}
.maintenance-message .body {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
}
.maintenance-message .extra {
  font-size: 1rem;
  line-height: 1.5;
  margin: 1rem 0 0;
  color: var(--grey-title-text);
}

/* Frames the viewport while the session acts as the admin organization. One
   strip per edge rather than one box carrying a border: a box has to know
   where the bottom of the viewport is, and a fixed box is laid out against
   the layout viewport -- on Android Chrome the taller one the page gets once
   the URL bar has retracted, not the one on screen while it is still out. For
   as long as that animation runs, the browser translates the box on the
   compositor and re-resolves it only when the scroll ends, which is seen as
   the whole frame jumping and then settling. Strips need no such agreement:
   three of the four hang off edges that do not move, and the vertical pair
   simply runs past the fold. They sit above everything, the blocking messages
   included, since they say what the actor is rather than what the page is
   doing, and let every click through. */
.admin-border {
  position: fixed;
  z-index: var(--admin-border-z-index);
  background-color: var(--admin-border);
  pointer-events: none;
}
.admin-border.top,
.admin-border.bottom {
  left: 0;
  right: 0;
  height: var(--admin-border-width);
}
.admin-border.top {
  top: 0;
}
.admin-border.bottom {
  /* The one edge with nowhere better to hang: the bottom of the layout
     viewport, which is the bottom of the screen once the URL bar is out of
     the way, and below the fold for as long as it is not. */
  bottom: 0;
}
.admin-border.left,
.admin-border.right {
  top: 0;
  width: var(--admin-border-width);
  /* Down to the bottom of the tallest the viewport gets, so that the strip
     reaches the fold whatever the URL bar is doing. Where lvh is unsupported,
     100vh is the same measure. */
  height: 100vh;
  height: 100lvh;
}
.admin-border.left {
  left: 0;
}
.admin-border.right {
  right: 0;
}


.user-wait {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: wait;
}

.body-grid {
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: auto
                      1fr
                      auto;
  background-color: var(--main-bg);
}

.body-grid > .main {
  grid-area: main;
  background-color: var(--main-bg);
  color: var(--main-text);
  display: grid;
  grid-template-areas:
    "banner"
    "content";
  grid-template-columns: 1fr;
  grid-template-rows: auto
                      1fr;
  justify-items: center;
  margin-bottom: 2rem;
}

.body-grid > .main > .content {
  grid-area: content;
  width: 100%;
  max-width: var(--main-content-width);
  padding: var(--main-content-default-padding);
  box-sizing: border-box;
}
.body-grid > .main > .content > *:first-child {
  margin-top: 0;
}

.body-grid > .main.splash {
  background-image:
    url("/images/splash-background.jpg?ts=1725822277");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 0;
  padding: 3rem 1rem;
}
.body-grid > .main.splash > .content {
  align-self: center;
  background-color: var(--main-bg);
  padding: 2rem;
  box-sizing: border-box;
  border-radius: 1rem;
}
.body-grid > .main.splash .content > h1 {
  text-align: center;
  text-transform: uppercase;
}

.body-grid > .main > .banner {
  grid-area: banner;
  background-color: var(--banner-fallback-bg);
  background-image:
    url("/images/banner.jpg?ts=1784908769");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  min-height: 12rem;
  box-sizing: border-box;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-size: 200%;
  color: var(--banner-text);
  text-transform: uppercase;
}

.body-grid > .main .actions {
  margin: 2rem 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.body-grid > .main .actions > a {
  display: block;
}
.body-grid > .main .actions a {
  text-align: center;
}

.body-grid .loading-block {
  margin: 1rem 0;
  text-align: center;
}
.body-grid .loading-block svg {
  width: 2rem;
  height: 2rem;
}

.body-grid > * > .bar {
  background-color: var(--main-bg);
}
.body-grid > * > .bar .color {
  height: var(--bar-height);
  background-color: var(--bar-bg);
}
.body-grid > * > .bar .sep {
  height: var(--bar-sep);
}

.open-close-outer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--close-time) var(--close-fun);
}
.open-close-outer-wrapper.is-closed {
  /* Out of sight and out of reach, but still in the layout: what a box opens
   * inside of is then as wide as the widest thing that may open in it,
   * whether or not anything is open, so its width never jumps. The row
   * leaves it nothing tall, and this leaves it nothing to be read or tabbed
   * to, which is what taking it out of the layout used to do. */
  visibility: hidden;
}
.open-close-outer-wrapper.is-open {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--open-time) var(--open-fun);
}
.open-close-inner-wrapper {
  /* Clipped downwards but not sideways, so that a box wider than what it is
   * opening inside of still counts towards that box's width while it is
   * closed. A grid item only lets its row squash it to nothing once it is
   * told its minimum height is zero, which being clipped in both directions
   * used to say on its own. */
  overflow: visible clip;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--close-time) var(--close-fun);
}
.open-close-outer-wrapper.is-open > .open-close-inner-wrapper {
  opacity: 1;
  transition: opacity var(--open-time) var(--open-fun);
}
.open-close-outer-wrapper.post-open > .open-close-inner-wrapper {
  overflow: visible;
}

.cookie-popup {
  position: fixed;
  z-index: var(--cookie-popup-z-index);
  bottom: 0;
  left: 0;
  margin: 1em;
  background-color: var(--cookies-bg);
  color: var(--cookies-text);
  border: 1px solid var(--cookies-border);
  border-radius: .8rem;
  max-width: 32em;
  box-sizing: border-box;
  padding: 1em;
  font-size: 80%;
}
.cookie-popup.preclose {
  opacity: 0;
  transition: all var(--cookie-popup-out-time) var(--cookie-popup-out-fun);
}
.cookie-popup h1 {
  margin-top: 0;
}
.cookie-popup a,
.cookie-popup a:visited {
  color: var(--cookies-text);
  font-family: var(--bold-font-family);
  font-weight: var(--bold-font-weight);
  font-size: 90%;
}
.cookie-popup a:active,
.cookie-popup a:focus,
.cookie-popup a:hover {
  color: var(--cookies-button-hover);
}
.cookie-popup .buttons {
  width: 100%;
  text-align: center;
}
.cookie-popup .buttons button:active,
.cookie-popup .buttons button:focus,
.cookie-popup .buttons button:hover {
  background-color: var(--cookies-button-hover);
}

body > .fullscreen-map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--on-top-of-header-z-index);
}

.grecaptcha-badge {
  z-index: -1;
  left: 0 !important;
}