:root {
  --border-radius: 16px;
  --border-radius-small: 12px;
  --border-radius-tiny: 4px;
  --border-radius-large: 32px;

  /* UI */
  --ui-topbar-box-shadow: 0 16px 64px 0 rgb(0 0 0 / 2%);
  --ui-card-box-shadow: 0 4px 24px 0 rgb(0 0 0 / 8%);
  --ui-navbar-box-shadow: 0 16px 64px 0 rgb(0 0 0 / 4%);
  --ui-card-border-radius: var(--border-radius);
  --ui-input-border-radius: var(--border-radius-small);
  --ui-button-border-radius: var(
    --event-button-border-radius,
    var(--border-radius-large)
  );
  --ui-status-message-border-radius: var(--border-radius-small);
  --ui-badge-border-radius: var(--border-radius-tiny);
}

:root {
  --breakpoint-mobile: 600px;
  --breakpoint-medium: 768px;
  --breakpoint-laptop: 1024px;
}

:root {
  /* Palette colors */
  --purple: #340e3f;
  --purple-light: #4c2b56;
  --orange-light: #fff7f1;
  --orange-dark: #da5136;
  --red: #c94a4a;
  --red-dark: #aa3f3f;
  --red-light: #ffd8d7;
  --green: #4ea15c;
  --green-dark: #1e4620;
  --green-light: #edf7ed;
  --blue-dark: #0d2555;
  --blue: #185adb;
  --blue-light: #f9fafc;
  --blue-sky: #9cd1eb;
  --beige: #f9f6f2;
  --beige-dark: #eae6de;
  --teal: rgb(63 118 108);
  --teal-light: rgb(245 251 250);
  --yellow: #ffb020;
  --yellow-light: #ffb836;
  --white: #fff;
  --grey-900: #e6e2da;
  --grey-800: #d8dae5;
  --grey-700: #c8bfc9;
  --grey-600: #ababab;
  --grey-500: #8a8a8a;
  --grey-400: #767676;
  --grey-300: #5a5a5a;
  --grey-200: #3a3a3a;
  --grey-100: #242424;
  --grey-50: #222;
  --black: #141414;
  --white-glass: rgb(255 255 255 / 95%);
  --black-glass: rgb(34 34 34 / 95%);

  /* Brand colors */
  --brand-accent-color: var(--event-accent-color, var(--purple));
  --brand-background-color: var(--event-background-color, var(--orange-light));

  /* Text colors */
  --text-color: var(--black);
  --text-secondary-color: var(--event-secondary-color, var(--grey-400));
  --text-link-color: var(--brand-accent-color);
  --text-link-secondary-color: var(--event-secondary-color, var(--orange-dark));
  --text-invert-color: var(--white);

  /* UI colors */
  --ui-focus-outline-color: var(--brand-accent-color);
  --ui-canvas-background-color: var(--white);
  --ui-canvas-background-color-hover: var(--blue-light);
  --ui-canvas-border-color: var(--grey-900);
  --ui-card-background-color: var(--white);
  --ui-card-glass-background-color: var(--white-glass);
  --ui-button-primary-color: var(--text-invert-color);
  --ui-button-primary-background-color: var(--brand-accent-color);
  --ui-button-primary-icon-background-color: var(--purple-light);
  --ui-button-secondary-color: var(--brand-accent-color);
  --ui-button-secondary-border-color: var(--brand-accent-color);
  --ui-button-secondary-icon-background-color: var(--brand-accent-color);
  --ui-button-tertiary-color: var(--purple);
  --ui-button-tertiary-background-color: var(--ui-canvas-background-color);
  --ui-button-tertiary-background-color-hover: var(--ui-canvas-background-color-hover);
  --ui-button-tertiary-background-color-default: var(--beige);
  --ui-button-tertiary-background-color-hover-default: var(--beige-dark);
  --ui-button-tertiary-border-color: var(--beige-dark);
  --ui-button-danger-color: var(--text-invert-color);
  --ui-button-danger-background-color: var(--red);
  --ui-button-danger-background-color-hover: var(--red-dark);
  --ui-input-border-color: var(--grey-900);
  --ui-input-background-color: var(--white);
  --ui-input-placeholder-color: var(--grey-400);
  --ui-divider-text-color: var(--grey-400);
  --ui-divider-border-color: var(--grey-700);
  --ui-badge-text-color: var(--white);
  --ui-badge-background-color: var(--brand-accent-color);

  /* Status colors */
  --status-info-color: var(--blue-dark);
  --status-info-background-color: var(--blue-light);
  --status-success-color: var(--green-dark);
  --status-success-background-color: var(--green-light);
  --status-warning-color: var(--orange-dark);
  --status-warning-background-color: var(--orange-light);
  --status-error-color: var(--red-dark);
  --status-error-background-color: var(--red-light);
}

:root[data-theme="bos"] {
  --brand-accent-color: var(--teal);
  --brand-background-color: var(--teal-light);
}

:root:not([data-theme="dark"]) {
  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Brand colors */
  --brand-accent-color: var(--event-accent-color, var(--yellow));
  --brand-background-color: var(--event-background-color, var(--black));

  /* Text colors */
  --text-color: var(--white);
  --text-secondary-color: var(--grey-500);
  --text-link-secondary-color: var(--blue-sky);

  /* UI colors */
  --ui-canvas-background-color: var(--grey-50);
  --ui-canvas-background-color-hover: var(--grey-300);
  --ui-canvas-border-color: var(--grey-800);
  --ui-card-background-color: var(--grey-50);
  --ui-card-glass-background-color: var(--black-glass);
  --ui-button-primary-color: var(--grey-100);
  --ui-button-primary-icon-background-color: var(--yellow-light);
  --ui-button-secondary-color: var(--white);
  --ui-button-secondary-border-color: var(--grey-400);
  --ui-button-secondary-icon-background-color: var(--grey-200);
  --ui-button-tertiary-color: var(--white);
  --ui-button-tertiary-background-color: var(--grey-200);
  --ui-button-tertiary-background-color-hover: var(--grey-300);
  --ui-button-tertiary-border-color: transparent;
  --ui-input-border-color: var(--grey-800);
  --ui-input-background-color: var(--grey-200);
  --ui-input-placeholder-color: var(--grey-600);
  --ui-divider-text-color: var(--grey-400);
  --ui-divider-border-color: var(--grey-400);
  --ui-badge-text-color: var(--grey-100);

  color-scheme: dark;
}

:root {
  --transition-color-fade-duration: 0.2s;
  --transition-color-fade-easing: ease-in-out;
  --transition-icon-scale-duration: 0.2s;
  --transition-icon-scale-easing: ease-in-out;
  --transition-icon-rotate-duration: 0.4s;
  --transition-icon-rotate-easing: ease-in-out;
}

:root {
  /* Font sizes */

  /* 40px */
  --typo-h1-font-size: 2.5rem;

  /* 32px */
  --typo-h2-font-size: 2rem;

  /* 24px */
  --typo-h3-font-size: 1.5rem;

  /* 20px */
  --typo-h4-font-size: 1.25rem;

  /* 16px */
  --typo-p1-font-size: 1rem;

  /* 14px */
  --typo-p2-font-size: 0.875rem;

  /* 12px */
  --typo-small-font-size: 0.75rem;

  /* 10px */
  --typo-tiny-font-size: 0.625rem;

  /* 8px */
  --typo-sup-font-size: 0.5rem;

  /* 48px */
  --typo-h1-line-height: 1.2;

  /* 40px */
  --typo-h2-line-height: 1.25;

  /* 32px */
  --typo-h3-line-height: 1.333;

  /* 28px */
  --typo-h4-line-height: 1.4;

  /* 24px */
  --typo-p1-line-height: 1.5;

  /* 20px */
  --typo-p2-line-height: 1.429;

  /* 16px */
  --typo-small-line-height: 1.333;

  /* 16px */
  --typo-tiny-line-height: 1.6;

  /* Font weights */
  --typo-heading-font-weight: 500;
  --typo-p-font-weight: 400;
  --typo-label-font-weight: 500;
  --typo-button-font-weight: 500;

  /* Font families */
  --typo-heading-font-family: "Poppins", sans-serif;
  --typo-p-font-family: "Poppins", sans-serif;
}



/* From https://every-layout.dev/ */

/* Stack */
[class*="stack"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  & > * {
    margin-block: 0;
  }

  & > * + * {
    margin-block-start: 20px;
  }
}

.stack-tiny > * + * {
  margin-block-start: 8px;
}

.stack-small > * + * {
  margin-block-start: 12px;
}

/* Center */
.center {
  margin-inline: auto;
}

/* Cover (section) */
.cover {
  display: flex;
  flex-direction: column;

  & > * {
    margin-block: 1rem;
  }

  & > :first-child:not(section) {
    margin-block-start: 0;
  }

  & > :last-child:not(section) {
    margin-block-end: 0;
  }

  & > section {
    margin-block: auto;
  }
}

/* Cluster */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
}

/* Sidebar */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;

  & > :first-child {
    flex-grow: 1;
  }

  & > :last-child {
    flex-basis: 0;
    flex-grow: 999;
  }
}



body {
  min-height: 100vh;

  font-family: var(--typo-p-font-family);
  font-size: var(--typo-p1-font-size);
  font-weight: var(--typo-p-font-weight);
  -webkit-font-smoothing: antialiased;
  line-height: var(--typo-p1-line-height);
  color: var(--text-color);

  background-color: var(--brand-background-color);
}

/* stylelint-disable no-descending-specificity */

button,
.button {
  cursor: pointer;

  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: center;

  width: fit-content;
  border-radius: var(--ui-button-border-radius);

  font-weight: var(--typo-button-font-weight);
  line-height: var(--typo-p2-line-height);
  text-align: center;
  text-decoration: none;

  &:focus {
    outline-offset: 2px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* Icons (Start) */

  .button--start-icon {
    &:empty {
      display: none;
    }

    img {
      @media (prefers-reduced-motion: no-preference) {
        transition: transform var(--transition-icon-scale-duration) var(--transition-icon-scale-easing);
      }
    }
  }

  &:hover .button--start-icon img {
    transform: scale(1.1) translateX(-10%);
  }

  /* Icons (End) */

  &:has(.button--end-icon:not(:empty)) {
    gap: 24px;
    justify-content: space-between;
    padding-block: 4px;
    padding-inline-end: 4px;
  }

  .button--end-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    &:empty {
      display: none;
    }

    img {
      @media (prefers-reduced-motion: no-preference) {
        transition: transform var(--transition-icon-rotate-duration) var(--transition-icon-rotate-easing);
      }
    }
  }

  &:hover .button--end-icon img {
    transform: rotate(360deg);
  }

  /* Variants */

  &:not([data-variant]),
  &[data-variant="primary"] {
    border: none;
    color: var(--ui-button-primary-color);
    background: var(--ui-button-primary-background-color);

    &:hover {
      /* Fall back to opacity for browsers that don't support color-mix */
      opacity: 0.9;

      @supports (background: color-mix(in oklab, black, white)) {
        opacity: 1;
        background-color: color-mix(in oklab,
            var(--ui-button-primary-background-color),
            white 12%);

        :root[data-theme="dark"] & {
          background-color: color-mix(in oklab,
              var(--ui-button-primary-background-color),
              black 12%);
        }
      }
    }

    .button--end-icon {
      background-color: var(--ui-button-primary-icon-background-color);
    }
  }

  &[data-variant="secondary"] {
    border: 1px solid var(--ui-button-secondary-border-color);
    color: var(--ui-button-secondary-color);
    background-color: transparent;

    &:hover {
      /* Fall back to generic hover color for browsers that don't support color-mix */
      background-color: var(--ui-canvas-background-color-hover);

      @supports (background: color-mix(in oklab, black, white)) {
        background-color: color-mix(in oklab,
            var(--ui-button-secondary-border-color),
            white 90%);

        :root[data-theme="dark"] & {
          background-color: color-mix(in oklab,
              var(--ui-button-secondary-border-color),
              black 66%);
        }
      }
    }

    .button--end-icon {
      background-color: var(--ui-button-secondary-icon-background-color);
    }
  }

  &[data-variant="tertiary"] {
    border: 1px solid var(--ui-button-tertiary-border-color);
    color: var(--ui-button-tertiary-color);

    /* Fall back to generic background color for browsers that don't support color-mix */
    background-color: var(--ui-button-tertiary-background-color);

    @supports (background: color-mix(in oklab, black, white)) {
      :root:not([data-theme="dark"]) & {
        background-color: color-mix(in oklab,
            var(--brand-accent-color),
            white 97%);
      }
    }

    &:hover {
      /* Fall back to generic hover color for browsers that don't support color-mix */
      background-color: var(--ui-button-tertiary-background-color-hover);

      @supports (background: color-mix(in oklab, black, white)) {
        :root:not([data-theme="dark"]) & {
          background-color: color-mix(in oklab,
              var(--brand-accent-color),
              white 90%);
        }
      }
    }

    /* Use defined background colors for default branding */
    @container style(--brand-accent-color: var(--purple)) {
      background-color: var(--ui-button-tertiary-background-color-default);

      &:hover {
        background-color: var(--ui-button-tertiary-background-color-hover-default);
      }
    }
  }

  &[data-variant="danger"] {
    border: none;
    color: var(--ui-button-danger-color);
    background-color: var(--ui-button-danger-background-color);

    &:hover {
      background: var(--ui-button-danger-background-color-hover);
    }
  }


  &[data-variant="link"] {
    margin-top: 0;
    border: none;

    color: var(--text-link-color);
    text-decoration: underline;

    background-color: transparent;

    &:hover {
      text-decoration: none;
    }
  }

  /* Sizes */

  &:not([data-size]),
  &[data-size="large"] {
    padding: 20px 32px;

    .button--end-icon {
      width: 56px;
      height: 56px;

      img {
        width: 24px;
        height: 24px;
      }
    }
  }

  &[data-size="medium"] {
    padding: 16px 28px;

    .button--end-icon {
      width: 48px;
      height: 48px;

      img {
        width: 24px;
        height: 24px;
      }
    }
  }

  &[data-size="small"] {
    padding: 14px 28px;

    .button--end-icon {
      width: 40px;
      height: 40px;

      img {
        width: 16px;
        height: 16px;
      }
    }
  }

  &[data-size="tiny"] {
    padding: 12px 24px;

    .button--end-icon {
      width: 32px;
      height: 32px;

      img {
        width: 16px;
        height: 16px;
      }
    }
  }

  /* Media queries */

  @media (prefers-reduced-motion: no-preference) {
    transition: background var(--transition-color-fade-duration) var(--transition-color-fade-easing);
  }
}

form {
  button:not([type="reset"]) {
    width: 100%;
    margin: 32px auto 0;

    @media (min-width: 600px) {
      /* --breakpoint-mobile */
      width: fit-content;
    }
  }
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;

  legend {
    font-size: var(--typo-h4-font-size);
    font-weight: var(--typo-heading-font-weight);
    line-height: var(--typo-h4-line-height);
  }
}

:root[data-theme="dark"] img[src*="icons/stroke/black"] {
  filter: invert(1);
}

input,
textarea {
  padding: 16px 12px;
  border: 1px solid var(--ui-input-border-color);
  border-radius: var(--ui-input-border-radius);
  background-color: var(--ui-input-background-color);

  &::placeholder {
    color: var(--ui-input-placeholder-color);
  }
}

label {
  font-weight: var(--typo-label-font-weight);
}

select {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: var(--typo-p1-font-size);
  font-weight: var(--typo-label-font-weight);
}

a {
  color: var(--text-link-color);

  &:hover {
    text-decoration: none;
  }

  /* Variants */

  &[data-variant="secondary"]:not(.button) {
    font-size: var(--typo-p2-font-size);
    line-height: var(--typo-p2-line-height);
    color: var(--text-link-secondary-color);
  }
}


[class^="status-message--"] {
  padding: 12px;
  border: 1px solid;
  border-radius: var(--ui-status-message-border-radius);
  list-style: none;
}

.status-message--info {
  border-color: var(--status-info-color);
  color: var(--status-info-color);
  background-color: var(--status-info-background-color);
}

.status-message--success {
  border-color: var(--status-success-color);
  color: var(--status-success-color);
  background-color: var(--status-success-background-color);
}

.status-message--error {
  border-color: var(--status-error-color);
  color: var(--status-error-color);
  background-color: var(--status-error-background-color);
}

.status-message--warning {
  border-color: var(--status-warning-color);
  color: var(--status-warning-color);
  background-color: var(--status-warning-background-color);
}

*:focus {
  outline: 2px solid var(--ui-focus-outline-color);
}

.badge {
  display: inline-block;

  padding: 4px 8px;
  border-radius: var(--ui-badge-border-radius);

  font-size: var(--typo-small-font-size);
  line-height: 1;
  color: var(--ui-badge-text-color);
  text-align: center;
  white-space: nowrap;

  background-color: var(--ui-badge-background-color);

  &[data-variant="danger"] {
    color: var(--status-error-color);
    background-color: var(--status-error-background-color);
  }

  &[data-variant="success"] {
    color: var(--status-success-color);
    background-color: var(--status-success-background-color);
  }
}

.card {
  container-type: inline-size;

  width: 100%;
  max-inline-size: var(--card-max-inline-size, 500px);
  padding-block: clamp(30px, 8vw, 40px);
  padding-inline: clamp(15px, 4vw, 40px);
  border-radius: var(--ui-card-border-radius);

  background-color: var(--ui-card-background-color);
  box-shadow: var(--ui-card-box-shadow);

  h1 {
    font-size: var(--typo-h4-font-size);
    font-weight: var(--typo-heading-font-weight);
    line-height: var(--typo-h4-line-height);
    text-align: center;

    @media (min-width: 600px) {
      /* --breakpoint-mobile */
      font-size: var(--typo-h3-font-size);
      line-height: var(--typo-h3-line-height);
    }

    @media (min-width: 600px) {
      /* --breakpoint-mobile */
      text-align: left;
    }
  }

  h2 {
    font-size: var(--typo-h4-font-size);
    font-weight: var(--typo-heading-font-weight);
    line-height: var(--typo-h4-line-height);
  }

  p {
    width: 90%;
    margin-inline: auto;
    color: var(--text-secondary-color);
    text-align: center;

    @media (min-width: 600px) {
      /* --breakpoint-mobile */
      width: 100%;
      text-align: left;
    }
  }

  footer {
    nav {
      font-size: var(--typo-p2-font-size);
      line-height: var(--typo-p2-line-height);
      text-align: center;
    }

    p {
      font-size: var(--typo-small-font-size);
      line-height: var(--typo-small-line-height);
      text-align: center;
    }

    a {
      color: inherit;
    }
  }
}

.divider {
  display: inline-flex;
  gap: 32px;
  align-items: center;
  justify-content: center;

  width: 90%;
  width: 90cqi; /* 90% of the container width, for supporting browsers */
  margin-inline: auto;

  font-size: var(--typo-small-font-size);
  line-height: 1;
  color: var(--ui-divider-text-color);
  text-align: center;
  text-transform: uppercase;

  &::after,
  &::before {
    content: " ";

    display: block;
    flex-grow: 1;

    height: 1px;

    background-color: var(--ui-divider-border-color);
  }
}

.login-options {
  padding: 0;
  list-style: none;

  .button {
    width: 100%;
    padding: 8px 22px;
    font-weight: var(--typo-p-font-weight);
    color: inherit;

    &:focus {
      outline-offset: 0;
    }
  }

  img {
    width: 16px;
    height: 16px;
  }
}

.navbar {
  padding: 20px 32px;
  background: var(--ui-canvas-background-color);
  box-shadow: var(--ui-navbar-box-shadow);

  .navbar--logo {
    display: block;

    width: fit-content;
    width: 192px;
    height: 24px;
    margin-block-end: 20px;
    margin-inline: auto;

    :root[data-theme="dark"] & {
      filter: brightness(100);
    }

    @media (min-width: 600px) {
      /* --breakpoint-mobile */
      margin-block-end: 40px;
      margin-inline: 10px;
    }
  }

  nav {
    display: flex;
    flex-direction: column;

    a {
      padding: 10px;
      border-bottom: 1px solid var(--ui-canvas-border-color);

      color: var(--text-color);
      text-decoration: none;
      white-space: nowrap;


      &.active,
      &:hover,
      &:focus {
        background: var(--ui-canvas-background-color-hover);
      }

      &:focus {
        outline-offset: -1px;
      }

      @media (prefers-reduced-motion: no-preference) {
        transition: background-color var(--transition-color-fade-duration) var(--transition-color-fade-easing);
      }

      @media (max-width: 599px) {
        /* --breakpoint-mobile - 1px */
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}

.sponsor {
  container-type: inline-size;

  .card {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;

    min-height: 60px;
    margin-bottom: 10px;
    margin-inline: auto;
    padding: 4px 8px;

    @container (width <=230px) {
      flex-direction: column;
      gap: 10px;
      justify-content: flex-start;
      padding: 20px 16px;
    }
  }

  .login-sponsor--label {
    display: flex;
    gap: 4px;
    align-items: center;

    font-size: var(--typo-tiny-font-size);
    line-height: var(--typo-tiny-line-height);
    text-transform: uppercase;
  }

  .login-sponsor--logo {
    width: 100%;
    max-width: 140px;

    @container (width < 230px) {
      width: 140px;
      max-width: none;

      /* height: 100px; */
      object-fit: contain;
    }
  }
}

.topbar {
  display: flex;
  align-items: center;

  height: var(--topbar-mobile-height, 52px);
  padding: 8px 16px;

  background-color: var(--ui-canvas-background-color);
  box-shadow: var(--ui-topbar-box-shadow);

  .topbar--braindate {
    font-size: var(--typo-p2-font-size);
    line-height: 1;
    color: var(--text-color);

    sup {
      font-size: var(--typo-sup-font-size);
    }

    > :first-child {
      /* Font weight is not loaded */
      font-weight: 900;
    }

    > :last-child {
      /* Font style is not loaded */
      font-style: italic;
    }
  }

  .topbar--event-home {
    display: flex;
    gap: 8px;
    align-items: center;

    height: 100%;

    text-decoration: none;

    @media (min-width: 600px) {
      flex-direction: column;
      align-items: flex-start;

      /* --breakpoint-mobile */
      max-width: 128px;
    }
  }

  .topbar--event-logo {
    flex: 1;
    max-height: 100%;
    object-fit: contain;
    object-position: left;

    @media (min-width: 600px) {
      /* --breakpoint-mobile */
      max-width: 100%;
      min-height: 0;
    }
  }

  .topbar--braindate-logo {
    width: 128px;
    height: 16px;

    :root[data-theme="dark"] & {
      filter: brightness(100);
    }

    @media (min-width: 600px) {
      /* --breakpoint-mobile */
      width: 192px;
      max-width: none;
      height: 24px;
    }
  }

  @media (min-width: 600px) {
    /* --breakpoint-mobile */
    height: var(--topbar-desktop-height, 104px);
    padding: 8px 20px;
  }
}



/* From https://www.joshwcomeau.com/css/custom-css-reset/ */

/* Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
}

body {
  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
  /* stylelint-disable-next-line plugin/browser-compat */
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* stylelint-disable-next-line plugin/browser-compat */
  text-wrap: balance;
}

:root {
  --topbar-desktop-height: 104px;
  --topbar-mobile-height: 52px;
  --card-max-inline-size: 580px;
  --sponsor-max-inline-size: 230px;
}

.entrance {
  display: flex;
  flex-direction: column;

  main {
    flex: 1;

    .messages-container {
      margin-block-end: 12px;
    }

    >.cover {
      min-block-size: calc(100vh - var(--topbar-mobile-height));
      padding: 16px;

      > section {
        width: 100%;
        max-width: var(--card-max-inline-size);
      }

      @media (min-width: 600px) {
        /* --breakpoint-mobile */
        min-block-size: calc(100vh - var(--topbar-desktop-height));
        padding-block: 64px;
      }

      @media (min-width: 1024px) {
        /* --breakpoint-laptop */
        display: grid;
        grid-template-areas: "left center right";
        grid-template-columns: var(--sponsor-max-inline-size) 1fr var(--sponsor-max-inline-size);
        gap: 16px;

        >section {
          grid-area: center;
          justify-self: center;
        }

        >footer {
          grid-area: right;
          /* stylelint-disable-next-line plugin/browser-compat */
          align-self: end;
          max-width: var(--sponsor-max-inline-size);
        }
      }
    }

    @media (min-width: 768px) {
      /* --breakpoint-medium */
      background-image: var(--event-background-image);
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: contain;

      .entrance--default & {
        background:
          url("../images/background_right.e3aa14f32d46.png") no-repeat right bottom,
          url("../images/background_left.9ba6844baca9.png") no-repeat left bottom;
        background:
          /* stylelint-disable plugin/browser-compat */
          image-set(url("../images/background_right.e3aa14f32d46.png") 1x,
            url("../images/background_right-2x.d85e3ec423e1.png") 1.5x) no-repeat right bottom,
          image-set(url("../images/background_left.9ba6844baca9.png") 1x,
            url("../images/background_left-2x.d1ff0783623a.png") 1.5x) no-repeat left bottom;
        /* stylelint-enable plugin/browser-compat */
      }
    }
  }

  .card {
    .entrance--conference &,
    .entrance--gathering & {
      background-color: var(--ui-card-glass-background-color);
    }
  }

  .login-support {
    width: fit-content;
    margin-inline: auto;
    text-align: center;
  }

  .pswd-options {
    padding: 0;
    list-style: none;

    .button {
      width: 100%;
    }
  }

  .entrance--background {
    position: fixed;
    z-index: -1;
    inset: 0;
  }

}

.manage {
  /* Page container */

  .with-sidebar {
    gap: 0;
  }

  .with-sidebar> :first-child {
    flex-basis: 290px;
  }

  .with-sidebar> :last-child {
    min-inline-size: 50%;
  }

  /* Main content */

  main {
    min-height: 0;
    padding: 16px;
    background: url("../images/background_right.e3aa14f32d46.png") no-repeat right bottom;
    /* stylelint-disable-next-line plugin/browser-compat */
    background: image-set(url("../images/background_right.e3aa14f32d46.png") 1x,
        url("../images/background_right-2x.d85e3ec423e1.png") 1.5x) no-repeat right bottom;


    @media (min-width: 600px) {
      /* --breakpoint-mobile */
      min-height: 100vh;
      padding: 8vh 10vw 24px;
    }

    @media (min-width: 768px) {
      /* --breakpoint-medium */
      background-image: var(--event-background-image);
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: contain;

      .manage--default & {
        background: url("../images/background_right.e3aa14f32d46.png") no-repeat right bottom;
        /* stylelint-disable-next-line plugin/browser-compat */
        background: image-set(url("../images/background_right.e3aa14f32d46.png") 1x,
            url("../images/background_right-2x.d85e3ec423e1.png") 1.5x) no-repeat right bottom;
      }
    }
  }

  .messages-container {
    margin-bottom: 16px;
  }

  [class^="status-message--"] {
    max-inline-size: var(--card-max-inline-size, 500px);
  }

  /* User Sessions */

  section:has(table.usersessions) {
    max-inline-size: none;
  }

  table.usersessions {
    th {
      text-align: left;
    }

    th,
    td {
      padding: 8px;
    }
  }

  .totp-qr-code {
    width: 100%;

    img {
      width: 100%;
      max-width: 300px;
      margin: 0 auto;
      background-color: var(--white);
    }
  }

}

/* poppins-regular - latin_latin-ext */
@font-face {
    font-family: Poppins;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/poppins-v24-latin_latin-ext-regular.2f07ada47e98.woff2") format('woff2');
}

/* poppins-500 - latin_latin-ext */
@font-face {
    font-family: Poppins;
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/poppins-v24-latin_latin-ext-500.dea8e165c40a.woff2") format('woff2');
}




/*# sourceMappingURL=index.global.a7ed48bc0d03d31e424d.css.f13559acd1f2.map */