/* Entry point for your PostCSS build */
html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
}
a,
  a:visited,
  a:link {
    text-decoration: none;
  }
h1,
h2,
h3 {
  margin: 0;
}
input {
  border-width: 0;
  border-radius: 0;
}
/* :root {
  --breakpoint-s: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
} */
:root {
  --gutter: 20px;
}
@media (max-width: 799px) {
:root {
    --gutter: 12px
}
  }
.container {
  padding: var(--gutter);
  max-width: 1280px;
  box-sizing: border-box;
  margin: 0 auto;
}
@media (min-width: 800px) {
.mobile-only {
    display: none
}
  }
@media (max-width: 799px) {
.desktop-only {
    display: none
}
  }
@media (max-width: 799px) {
.mobile-guttered {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
}
  }
/*
"blue-dark-highlight": "#4d5ab6",
"sky-light": "#94d8e7",
"pink-dark": "#ee7879",
"pink-very-dark": "#6D3F46",
"pink-light": "#f4abaa",
beige: "#E1A994", */
:root {
  --blue-dark: #2a3166;
  --blue-dark-highlight: #4d5ab6;
  --teal-dark: #0d9488;
  --teal-light: #14b8a6;
  --teal-lighter: #22e6d1;
  --sky: #78cee1;
  --sky-darker: #2ba9c5;
  --gold: #efbf6e;
  --white: #ffffff;
  --black: #000000;
  --pink-dark: #ee7879;
  --pink-light: #f4abaa;
  --gray-100: #f3f4f6;
  --slate-800: rgb(30, 41, 59);
  --slate-700: rgb(51, 65, 85);
  --slate-600: #475569;
  --slate-500: #64748b;
}
.theme-blue {
  --text-color: var(--gray-100);
  --highlight-color: var(--pink-dark);
  --highlight-color-emphasis: var(--pink-light);
  --highlight-color-inverse: var(--white);
  --background-color: var(--blue-dark);
  --background-color-emphasis: var(--blue-dark-highlight);
}
.theme-blue.theme-inverted {
    --text-color: var(--gray-100);
    --highlight-color: var(--pink-dark);
    --highlight-color-inverse: var(--black);
    --background-color: var(--slate-800);
    --callout-background-color: var(--slate-700);
  }
.theme-blue {

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

  color: var(--text-color);
}
.theme-blue h1,
  .theme-blue h2,
  .theme-blue h3 {
    color: var(--highlight-color);
  }
.theme-blue h1 a, .theme-blue h2 a, .theme-blue h3 a {
      color: var(--highlight-color);
    }
.theme-blue h1 a:hover, .theme-blue h2 a:hover, .theme-blue h3 a:hover {
        color: var(--highlight-color-emphasis);
      }
.theme-blue .callout {
    --background-color: var(--callout-background-color);
    background-color: var(--background-color);
  }
.theme-public {
  --text-color: var(--gray-100);
  --highlight-color: var(--pink-dark);
  --highlight-color-emphasis: var(--pink-light);
  --highlight-color-inverse: var(--white);
  --background-color: var(--blue-dark);
  --background-color-emphasis: var(--blue-dark-highlight);
}
.theme-public.theme-inverted {
    --text-color: var(--gray-100);
    --highlight-color: var(--pink-dark);
    --highlight-color-inverse: var(--black);
    --background-color: var(--slate-800);
    --callout-background-color: var(--slate-700);
  }
.theme-public {

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

  color: var(--text-color);
}
.theme-public h1,
  .theme-public h2,
  .theme-public h3 {
    color: var(--highlight-color);
  }
.theme-public h1 a, .theme-public h2 a, .theme-public h3 a {
      color: var(--highlight-color);
    }
.theme-public h1 a:hover, .theme-public h2 a:hover, .theme-public h3 a:hover {
        color: var(--highlight-color-emphasis);
      }
.theme-public .callout {
    --background-color: var(--callout-background-color);
    background-color: var(--background-color);
  }
.theme-people {
  --text-color: var(--gray-100);
  --background-color: var(--teal-dark);
  --background-color-emphasis: var(--teal-light);
  --callout-background-color: var(--teal-light);

  --highlight-color: var(--blue-dark);

  --highlight-color-emphasis: var(--blue-dark-highlight);

  --highlight-color-inverse: var(--white);
}
.theme-people.theme-inverted {
    --text-color: var(--gray-100);
    --highlight-color: var(--teal-light);
    --highlight-color-emphasis: var(--teal-lighter);
    --highlight-color-inverse: var(--black);
    --background-color: var(--slate-800);
    --callout-background-color: var(--slate-700);
  }
.theme-people {

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

  color: var(--text-color);
}
.theme-people h1,
  .theme-people h2,
  .theme-people h3 {
    color: var(--highlight-color);
  }
.theme-people h1 a, .theme-people h2 a, .theme-people h3 a {
      color: var(--highlight-color);
    }
.theme-people h1 a:hover, .theme-people h2 a:hover, .theme-people h3 a:hover {
        color: var(--highlight-color-emphasis);
      }
.theme-people .callout {
    --background-color: var(--callout-background-color);
    background-color: var(--background-color);
  }
.theme-place {
  --text-color: var(--black);
  --background-color: var(--sky);
  --background-color-emphasis: var(--sky-darker);

  --highlight-color: var(--blue-dark);

  --highlight-color-emphasis: var(--blue-dark-highlight);

  --highlight-color-inverse: var(--white);
}
.theme-place.theme-inverted {
    --text-color: var(--gray-100);
    --highlight-color: var(--sky);
    --highlight-color-inverse: var(--black);
    --background-color: var(--slate-800);
    --callout-background-color: var(--slate-700);
  }
.theme-place {

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

  color: var(--text-color);
}
.theme-place h1,
  .theme-place h2,
  .theme-place h3 {
    color: var(--highlight-color);
  }
.theme-place h1 a, .theme-place h2 a, .theme-place h3 a {
      color: var(--highlight-color);
    }
.theme-place h1 a:hover, .theme-place h2 a:hover, .theme-place h3 a:hover {
        color: var(--highlight-color-emphasis);
      }
.theme-place .callout {
    --background-color: var(--callout-background-color);
    background-color: var(--background-color);
  }
.theme-program {
  --text-color: var(--black);
  --background-color: var(--gold);
  --callout-background-color: #e9aa3e;
  --highlight-color-inverse: var(--white);
  --highlight-color: var(--blue-dark);
  --highlight-color-emphasis: var(--blue-dark-highlight);
  --highlight-color-inverse: var(--white);
}
.theme-program.theme-inverted {
    --text-color: var(--gray-100);
    --highlight-color: var(--gold);
    --highlight-color-inverse: var(--black);
    --background-color: var(--slate-800);
    --callout-background-color: var(--slate-700);
  }
.theme-program {

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

  color: var(--text-color);
}
.theme-program h1,
  .theme-program h2,
  .theme-program h3 {
    color: var(--highlight-color);
  }
.theme-program h1 a, .theme-program h2 a, .theme-program h3 a {
      color: var(--highlight-color);
    }
.theme-program h1 a:hover, .theme-program h2 a:hover, .theme-program h3 a:hover {
        color: var(--highlight-color-emphasis);
      }
.theme-program .callout {
    --background-color: var(--callout-background-color);
    background-color: var(--background-color);
  }
.theme-inverted {
  --tag-background-color: var(--blue-dark-highlight);
  --tag-background-color-hightlight: #5e6abd;
  --tag-separator: var(--blue-dark);
  --tag-text-color: var(--white);
  --text-color-muted: #9ca3af;
}
.theme-black {
  --background-color: var(--black);
  --text-color: var(--white);
  --highlight-color: var(--white);

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

  color: var(--text-color);
}
.theme-black h1,
  .theme-black h2,
  .theme-black h3 {
    color: var(--highlight-color);
  }
.theme-black h1 a, .theme-black h2 a, .theme-black h3 a {
      color: var(--highlight-color);
    }
.theme-black h1 a:hover, .theme-black h2 a:hover, .theme-black h3 a:hover {
        color: var(--highlight-color-emphasis);
      }
.theme-black .callout {
    --background-color: var(--callout-background-color);
    background-color: var(--background-color);
  }
body {
  font-family: "Inter", sans-serif;
}
.demphasize {
  font-size: 0.9rem;
  line-height: 1.2rem;
}
@media (max-width: 799px) {
.demphasize {
    font-size: 0.8rem;
    line-height: 1rem;
}
  }
a {
  color: var(--highlight-color);
}
h1,
h2,
h2 {
  font-weight: 500;
  margin: 0;
}
h1.inline-page-title, h2.inline-page-title, h2.inline-page-title {
    font-weight: bold;
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
@media (max-width: 799px) {
h1.inline-page-title, h2.inline-page-title, h2.inline-page-title {
    font-size: 1.5rem;
  }
  }
h1.inline-page-title, h2.inline-page-title, h2.inline-page-title {
    margin-bottom: 1rem;
}
form input[type="text"],
  form input[type="email"],
  form input[type="password"] {
    box-sizing: border-box;
    padding: 6px 8px;
    /* border-color: var(--highlight-color); */
  }
form input[type="text"]:focus, form input[type="email"]:focus, form input[type="password"]:focus {
      outline: none !important;
      border-color: var(--highlight-color);
      box-shadow: 0 0 10px var(--highlight-color);
    }
.form-container.single-column-form {
    margin-top: var(--gutter);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
.form-container.single-column-form .form-title {
      display: block;
      border-bottom: 2px solid var(--highlight-color);
      margin-bottom: 1.5rem;
    }
.avatar-list {
  display: flex;
  flex-direction: row;
}
.avatar {
  border-radius: 50%;
}
.avatar.avatar-small {
    width: 48px;
    height: 48px;
  }
.avatar.avatar-xsmall {
    width: 32px;
    height: 32px;
  }
.avatar-link {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.avatar-link img {
    border: 2px solid transparent;
  }
.avatar-link .link-details {
    margin-left: 0.5rem;
  }
.avatar-link:hover img {
      border: 2px solid var(--highlight-color);
    }
.simple_form {
  --error-color: red;
}
.simple_form input.string,
  .simple_form textarea {
    border: 2px solid var(--callout-background-color);
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
  }
.simple_form .field_with_errors input.string {
      border-color: var(--error-color);
    }
.simple_form .error {
    display: block;
    color: var(--error-color);
    margin-top: 0.25rem;
  }
.simple_form .error a {
      text-decoration: underline;
    }
.simple_form input[type="submit"] {
    background-color: var(--highlight-color);
    color: var(--highlight-color-inverse);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 99999px;
    display: inline-block;
    border: 0;
  }
.simple_form input[type="submit"]:hover {
    background-color: var(--highlight-color-emphasis);
  }
.simple_form div.input:not(:first-of-type) {
      margin-top: 1rem;
    }
.simple_form div.input.hidden {
      display: none;
    }
.simple_form div.input label {
      display: block;
      margin-bottom: 0.2rem;
    }
.simple_form .form-section:not(:first-of-type) {
      margin-top: 1rem;
      border-top: 3px solid var(--callout-background-color);
      padding-top: 1rem;
    }
.simple_form .form-section h2 {
      margin-bottom: 1rem;
      line-height: 1em;
    }
.simple_form .actions {
    margin-top: 1.5rem;
  }
.simple_form .actions a.text-link {
      text-decoration: underline;
    }
.simple_form .small-integer-input {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
.simple_form .small-integer-input input {
      width: 2rem;
      height: 2rem;
      box-model: border-box;
      background-color: transparent;
      text-align: center;
      color: var(--highlight-color);
      font-size: 1.5rem;
      padding: 0;
      border: none;
      margin: 0;
    }
.simple_form .small-integer-input button {
      --size: 2rem;

      background-color: var(--highlight-color);

      color: var(--highlight-color-inverse);

      text-decoration: none;

      padding: 0.5rem 1rem;

      border-radius: 99999px;

      display: inline-block;

      border: 0;
      /* vertical-align: middle; */
    }
.simple_form .small-integer-input button:hover {
    background-color: var(--highlight-color-emphasis);
  }
.simple_form .small-integer-input button {
      width: var(--size);
      height: var(--size);
      line-height: var(--size);
      padding: 0;
      box-model: border-box;

      margin-left: 5px;
}
.simple_form .small-integer-input.zero input {
        color: grey;
      }
.layout-home {
  display: flex;
  flex-direction: column;
}
@media (min-width: 800px) {
    .layout-home .row-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
.layout-home .area-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
.layout-home .area-block .block-contents {
      margin: calc(var(--gutter) * 2) var(--gutter);
    }
.layout-home .area-block .block-images {
      display: flex;
      flex-direction: row;
    }
.layout-home .area-block .block-images img {
        width: 100%;
        height: auto;
      }
.layout-home .area-block h2 {
      font-size: 2.25rem;
      line-height: 2.5rem;
    }
@media (max-width: 799px) {
.layout-home .area-block h2 {
    font-size: 1.5rem;
    }
  }
.layout-home .area-block h2 {
      line-height: 1em;
}
.layout-home .area-block p {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }
.layout-home .area-block.image-right {
      display: grid;
      grid-template-columns: 3fr 1fr;
    }
.layout-home .area-block.image-right > img {
        /* height: auto;
        width: auto; */
      }
.layout-home .theme-program .coming-soon {
      margin-bottom: 1.5rem;
    }
.layout-home .theme-program .coming-soon h3 {
        margin-bottom: 1rem;
      }
.layout-devise {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;

  /*  .devise em {
    @apply text-gray-400;
  }


  .devise .actions {
    @apply mt-4;
  }

  .devise-shared-links {
    @apply mt-8;
  }

  .devise-shared-links a {
    @apply underline;
  }

  .devise input[type="submit"] {
    @apply bg-pink-dark text-blue-dark button-sm;
  }

  .devise input[type="submit"]:hover {
    @apply bg-pink-light;
  } */
}
.layout-devise .form-container {
    padding: var(--gutter);
    box-sizing: border-box;
  }
@media (min-width: 800px) {
.layout-devise .form-container {
      min-width: 20rem
  }
    }
@media (max-width: 799px) {
.layout-devise .form-container {
      width: 100%
  }
    }
.layout-devise h2 {
    margin-bottom: 1.5rem;
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
@media (max-width: 799px) {
.layout-devise h2 {
    font-size: 1.5rem;
  }
  }
.layout-devise .field {
    margin-bottom: 1rem;
  }
.layout-devise .field input[type="text"],
    .layout-devise .field input[type="email"],
    .layout-devise .field input[type="password"] {
      width: 100%;
      margin-top: 4px;
    }
.layout-devise .actions {
    margin-top: 2rem;
  }
.layout-devise .actions input[type="submit"] {
      background-color: var(--highlight-color);
      color: var(--highlight-color-inverse);
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 99999px;
      display: inline-block;
      border: 0;
    }
.layout-devise .actions input[type="submit"]:hover {
    background-color: var(--highlight-color-emphasis);
  }
.layout-devise .devise-shared-links {
    margin-top: 0.5rem;
  }
.layout-devise .devise-shared-links a {
      text-decoration: underline;
    }
.events-index > .body {
    display: flex;
    flex-direction: row;
  }
.events-index > .body > .sectioned-events-list {
      margin-right: var(--gutter);
    }
.events-index > .body > .filters {
      flex: 1;
      min-width: 200px;
    }
@media (max-width: 799px) {
.events-index > .body {
      flex-direction: column-reverse
  }

      .events-index > .body > .events-list {
        margin-right: 0;
        margin-top: var(--gutter);
      }
    }
.events-show .page-title {
    margin-bottom: var(--gutter);
  }
.events-show .event-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    -o-object-fit: cover;
       object-fit: cover;
  }
.events-show .details .detail-with-icon {
      display: flex;
      flex-direction: row;
      margin-bottom: 2rem;
    }
.events-show .details .detail-with-icon > .icon {
        width: 64px;
        height: 64px;
        margin-right: 10px;
        color: var(--highlight-color);
        flex-shrink: 0;
      }
.events-show .details .big-date {
      font-size: 1.5rem;
      margin-bottom: 0.3rem;
    }
.events-show .details .call-to-action {
      display: block;
      text-align: center;
    }
.events-show .price-details .price-type-full,
    .events-show .price-details .price-type-free {
      font-size: 1.5rem;
    }
.events-show .sessions-selector {
    margin-bottom: 1em;
  }
.events-show .sessions-selector .link-container {
      margin-top: 0;
    }
.events-show .sessions-selector .link-container:not(:last-child) {
        margin-bottom: 4px;
      }
.events-show .sessions-selector .session-link {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: var(--callout-background-color);
      padding: 0.25em 0.5em;
    }
.events-show .sessions-selector .session-link.active {
        background-color: var(--highlight-color);
        color: var(--highlight-color-inverse);
      }
@media (min-width: 800px) {
    .events-show .columns {
      display: flex;
      flex-direction: row;
    }

      .events-show .columns .main {
        margin-right: var(--gutter);
      }

      .events-show .columns .details {
        min-width: 350px;
        flex: 1;
      }
  }
@media (max-width: 799px) {
    .events-show .columns {
      display: flex;
      flex-direction: column-reverse;

      /*.details {
        min-width: 350px;
        flex: 1;
      } */
    }

      .events-show .columns .details {
        margin-top: 1rem;
        margin-bottom: 2rem;
      }
  }
.bookings-new .simple_form .show-user {
      display: flex;
      flex-direction: row;
      gap: 12px;
    }
.bookings-new .simple_form .show-user .details .display_name {
          font-weight: bold;
        }
.bookings-new .simple_form .for-prices .for-one-price {
        padding: 0.5rem;
      }
.bookings-new .simple_form .for-prices .for-one-price:nth-child(odd) {
          background-color: var(--callout-background-color);
        }
.bookings-new .simple_form .for-prices .for-one-price {

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
}
.bookings-new .simple_form .for-prices .for-one-price .input {
          margin-top: 0;
        }
.bookings-new .simple_form .for-prices.field_with_errors {
        border: 2px solid var(--error-color);
      }
.bookings-new .simple_form.free .payment-section {
        display: none;
      }
/* Remove when finished */
.bookings-new .outline-block {
    background-color: silver;
    border: 2px dashed grey;
    min-height: 200px;
    text-align: center;
    line-height: 200px;
  }
.bookings-new .outline-block.in-progress {
      line-height: inherit;
    }
.page-facilities > section {
    margin-top: 2rem;
  }
.page-facilities > section .section-heading {
      margin-bottom: 1rem;
    }
.page-facilities > section.image-left .image-and-details {
        display: flex;
        flex-direction: row;
        gap: var(--gutter);
      }
.page-facilities > section.image-left .image-and-details p:first-child {
          margin-top: 0;
        }
@media (max-width: 799px) {
.page-facilities > section.image-left .image-and-details {
          flex-direction: column
      }
        }
.page-facilities .page-header .section-photo {
      width: 400px;
    }
.page-facilities .page-header .description p:first-child {
        margin-top: 0;
        font-size: 120%;
      }
.page-facilities .getting-there {
    margin-top: 1em;
  }
.page-facilities .getting-there .section-photo {
      height: auto;
      max-width: 362px;
    }
/* Remove when finished */
.page-facilities .outline-block {
    background-color: silver;
    border: 2px dashed grey;
    min-height: 200px;
    text-align: center;
    line-height: 200px;
  }
.page-facilities .outline-block.in-progress {
      line-height: inherit;
    }
.order-pay .context {
    margin-bottom: var(--gutter);
  }
.people-me section:not(:last-child) {
      margin-bottom: 2rem;
    }
.people-me section > h2 {
      margin-bottom: 1em;
    }
.people-me .actions-on-right {
    display: flex;
    gap: var(--gutter);
  }
.people-me .actions-on-right .body {
      max-width: 800px;
      flex-grow: 1;
    }
.people-me .actions-on-right .actions {
      max-width: 350px;
    }
@media (max-width: 799px) {
.people-me .actions-on-right {
      flex-direction: column
  }
    }
@media (min-width: 800px) {
.people-me .actions-on-right {
      flex-direction: row-reverse;
      justify-content: flex-end
  }
    }
.people-me .details .detail-with-icon {
      display: flex;
      flex-direction: row;
      margin-bottom: 2rem;
    }
.people-me .details .detail-with-icon > .icon {
        width: 64px;
        height: 64px;
        margin-right: 10px;
        color: var(--highlight-color);
        flex-shrink: 0;
      }
.people-me .no-data {
    text-align: center;
  }
a.button {
  background-color: var(--highlight-color);
  color: var(--highlight-color-inverse);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 99999px;
  display: inline-block;
  border: 0;
}
a.button:hover {
    background-color: var(--highlight-color-emphasis);
  }
a.button.compact {
    padding: 0.25rem 0.8rem;
  }
button.button {
  background-color: var(--highlight-color);
  color: var(--highlight-color-inverse);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 99999px;
  display: inline-block;
  border: 0;
}
button.button:hover {
    background-color: var(--highlight-color-emphasis);
  }
.icon-button {
  width: 30px;
  height: 30px;
  color: white;

  color: var(--highlight-color);
}
.icon-button:hover {
    color: var(--highlight-color-emphasis);
  }
a.not-implemented {
  color: grey;
  cursor: not-allowed;
}
a.not-implemented.button {
    opacity: 0.5;
  }
a.not-implemented.button:hover {
      background-color: var(--highlight-color);
    }
a.link-in-text {
  text-decoration: underline;
}
.in-page-nav {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.in-page-nav a {
    background-color: var(--background-color);
    color: var(--highlight-color);
    border: 2px solid var(--highlight-color);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 99999px;
    display: inline-block;
  }
.in-page-nav a:hover {
    background-color: var(--highlight-color-emphasis);
    color: var(--highlight-color-inverse);
  }
.in-page-nav a {
    white-space: nowrap;
}
.in-page-nav a.active {
      background-color: var(--highlight-color);
      color: var(--highlight-color-inverse);
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 99999px;
      display: inline-block;
      border: 0;
    }
.in-page-nav a.active:hover {
    background-color: var(--highlight-color-emphasis);
  }
@media (max-width: 799px) {
    .in-page-nav a {
      font-size: 0.8rem;
    }
  }
a.text-link {
  text-decoration: underline;
}
body.with-navbar {
  --nav-height: 64px;

  padding-top: var(--nav-height);
}
.navbar-with-hero .title,
  .navbar-with-hero .subtitle {
    color: var(--highlight-color);
    font-size: 3rem;
    line-height: 1.375em;
  }
@media (max-width: 799px) {
.navbar-with-hero .title,
  .navbar-with-hero .subtitle {
    font-size: 2rem;
  }
  }
.navbar-with-hero .title,
  .navbar-with-hero .subtitle {
    max-width: 32rem;
    margin: 0;
}
.navbar-with-hero .header-nav {
    height: var(--nav-height);
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 var(--gutter);
    box-sizing: border-box;
    z-index: 100;
  }
@media (max-width: 799px) {
.navbar-with-hero .header-nav {
      grid-template-columns: 1fr 60px
  }
    }
.navbar-with-hero .header-nav h1 {
      display: none;
      font-size: 3rem;
      line-height: 1.375em;
    }
@media (max-width: 799px) {
.navbar-with-hero .header-nav h1 {
    font-size: 2rem;
    }
  }
.navbar-with-hero .header-nav h1 {
      transition: font-size 0.3s ease-in-out;
}
.navbar-with-hero .header-nav .title-container {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
.navbar-with-hero .header-nav .responsive-site-nav {
      display: flex;
      flex-direction: row;
      flex-shrink: 0;
      height: var(--nav-height);
    }
@media (min-width: 800px) {
        .navbar-with-hero .header-nav .responsive-site-nav a.hamburger {
          display: none;
        }

        .navbar-with-hero .header-nav .responsive-site-nav .site-nav {
          display: flex;
          flex-direction: row;
        }

          .navbar-with-hero .header-nav .responsive-site-nav .site-nav > a {
            font-size: 1.2rem;
            line-height: var(--nav-height);
          }

            .navbar-with-hero .header-nav .responsive-site-nav .site-nav > a:not(:last-child) {
              margin-right: 2rem;
            }

            .navbar-with-hero .header-nav .responsive-site-nav .site-nav > a:not(.inactive):hover {
              color: var(--highlight-color-emphasis);
              text-decoration: underline;
            }
      }
@media (max-width: 799px) {
        .navbar-with-hero .header-nav .responsive-site-nav a.hamburger {
          height: var(--nav-height);
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

          .navbar-with-hero .header-nav .responsive-site-nav a.hamburger svg {
            width: 48px;
            height: 48px;
            margin: 0 10px;
          }

        .navbar-with-hero .header-nav .responsive-site-nav .site-nav {
          position: absolute;
          top: var(--nav-height);
          left: 0;
          right: 0;
          background-color: var(--background-color);
          display: flex;
          flex-direction: column;
        }

          .navbar-with-hero .header-nav .responsive-site-nav .site-nav .avatar-small {
            width: 32px;
            height: 32px;
          }

          .navbar-with-hero .header-nav .responsive-site-nav .site-nav > a {
            margin: 0;
            padding: 0 var(--gutter);
            font-size: 1.2rem;
            line-height: 2.5em;

            border-top: 1px solid var(--background-color-emphasis);
          }

            .navbar-with-hero .header-nav .responsive-site-nav .site-nav > a:hover {
              color: var(--highlight-color-emphasis);
              background-color: var(--background-color-emphasis);
            }
          .navbar-with-hero .header-nav .responsive-site-nav.open .site-nav {
          }
          .navbar-with-hero .header-nav .responsive-site-nav:not(.open) .site-nav {
            display: none;
          }
      }
.navbar-with-hero .header-nav .actions {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      margin-right: var(--gutter);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
.navbar-with-hero .hero {
    padding: var(--gutter);
    padding-top: 100px;
    min-height: 300px;
  }
.navbar-with-hero .hero .title,
    .navbar-with-hero .hero .subtitle {
      color: var(--highlight-color);
      font-size: 3rem;
      line-height: 1.375em;
    }
@media (max-width: 799px) {
.navbar-with-hero .hero .title,
    .navbar-with-hero .hero .subtitle {
    font-size: 2rem;
    }
  }
.navbar-with-hero .hero .title,
    .navbar-with-hero .hero .subtitle {
      max-width: 32rem;
      margin: 0;
}
.navbar-with-hero.sticky .header-nav {
      background-color: var(--background-color);
    }
.navbar-with-hero.sticky .header-nav h1 {
        display: block;
      }
.navbar-with-hero.sticky .hero .title-container h1 {
          opacity: 0;
        }
.navbar-with-hero.sticky .hero .title-container .subtitle {
        }
.navbar-with-hero.closed .header-nav {
      background-color: var(--background-color);
    }
.navbar-with-hero.closed .header-nav h1 {
        font-size: 2.25rem;
      }
@media (max-width: 799px) {
.navbar-with-hero.closed .header-nav h1 {
          font-size: 1.5rem
      }
        }
.navbar-with-hero.closed .header-nav .actions {
        opacity: 1;
      }
.navbar-with-hero.closed .hero {
      color: var(--background-color);
    }
.navbar-with-hero.logged-in .header-nav .actions {
        opacity: 1;
      }
.scroll-target {
  position: relative;
}
.scroll-target a {
    position: absolute;
    top: -64px;
    left: 0;
  }
.flash-container {
  position: absolute;
  top: 0px;
  width: 100%;
}
.flash-container .flash {
    padding: 10px;
  }
.flash-container .flash.notice {
      background-color: #15803d;
    }
.flash-container .flash.alert {
      background-color: rgb(239, 68, 68);
    }
.flash-container .flash.fade-out {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }
.event-preview {
  display: flex;
  flex-direction: row;
  justify-content: justify;
}
.event-preview > * {
    width: 100%;
  }
.event-preview .event-link {
    display: block;
    border: 2px solid var(--callout-background-color);
  }
.event-preview .event-link:hover {
      border: 2px solid var(--highlight-color);
    }
.event-preview .event-preview-body {
    display: flex;
    flex-direction: row;
    align-items: justify;
    color: var(--text-color);
    background-color: var(--callout-background-color);
  }
.event-preview .event-preview-body a.event-link {
      display: flex;
      flex-direction: row;
      align-items: justify;
    }
.event-preview .event-preview-body .event-title {
      font-weight: bold;
      font-size: 1.4rem;
    }
@media (max-width: 799px) {
.event-preview .event-preview-body .event-title {
        font-size: 1.2rem
    }
      }
.event-preview .event-preview-body .date-time {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-bottom: 0.3rem;
    }
.event-preview .event-preview-body .date-time .date {
        margin-right: 10px;
        font-weight: 600;
      }
.event-preview .event-preview-body img.event-image {
      width: 30%;
      max-width: 200px;
      height: auto;
      flex-shrink: 0;
      -o-object-fit: cover;
         object-fit: cover;
      margin: 0;
    }
.event-preview .event-preview-body .details {
      padding: calc(var(--gutter) * 0.75);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
.event-preview .event-preview-body .details .event-description {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-top: 1em;
        margin-bottom: 0;
      }
.event-preview .event-preview-body .event-host {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
.event-preview .event-preview-body .event-host .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
.event-preview .event-preview-body .event-host .host-text {
        display: flex;
        flex-direction: column;
      }
.event-preview.open-time-event .event-preview-body, .event-preview.unplugged-night-event .event-preview-body {
      background-color: transparent;
    }
.event-preview.open-time-event .event-preview-body .avatar-list, .event-preview.unplugged-night-event .event-preview-body .avatar-list {
        float: right;
      }
.event-preview.open-time-event .event-preview-body h3.event-title, .event-preview.unplugged-night-event .event-preview-body h3.event-title {
        color: #374151;
        font-weight: 400;
      }
.event-preview.open-time-event .event-preview-body .details, .event-preview.unplugged-night-event .event-preview-body .details {
        width: 100%;
        display: flex;
        flex-direction: row;
      }
.event-preview.open-time-event .event-preview-body .details .text, .event-preview.unplugged-night-event .event-preview-body .details .text {
          flex: 1;
        }
.sectioned-events-list {
  display: flex;
  flex-direction: column;
  max-width: 800px;
}
.sectioned-events-list > section {
    margin-bottom: 2rem;
  }
.sectioned-events-list > section > h2 {
      font-weight: bold;
      border-bottom: 2px solid var(--highlight-color);
      display: inline-block;
      margin-bottom: 1rem;
      padding-right: 3em;
    }
.sectioned-events-list .more-events {
    border: 2px solid var(--callout-background-color);
    padding: calc(var(--gutter) * 0.75);
    border-radius: calc(var(--gutter) * 0.75);
    text-align: center;
  }
.events-list.default {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 1fr 1fr;
}
.events-list.default .event-container {
    display: inline-block;
    box-sizing: border-box;
    grid-column: span 2;
  }
@media (min-width: 800px) {
      .events-list.default .event-container.open-time-event,
      .events-list.default .event-container.unplugged-night-event {
        max-width: 400px;
        min-width: 50%;
        grid-column: span 1;
      }
    }
.events-list.compact-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, minmax(150px, 230px));
  grid-auto-rows: 1fr;
}
@media (max-width: 1300px) and (min-width: 1001px) {
.events-list.compact-grid {
    grid-template-columns: repeat(3, minmax(150px, 230px));
    grid-template-rows: auto;
    grid-auto-rows: 0;
    overflow: hidden
}
  }
@media (max-width: 1000px) {
.events-list.compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}
  }
.events-list.compact-grid .event-preview .event-preview-body {
      display: flex;
      flex-direction: column;
      align-items: justify;
      color: var(--text-color);
      height: 100%;
      box-sizing: border-box;
    }
.events-list.compact-grid .event-preview .event-preview-body img.event-image {
        width: 100%;
        max-width: 100%;
        height: 170px;
        flex-shrink: 0;
        -o-object-fit: cover;
           object-fit: cover;
        margin: 0;
      }
.events-list.compact-grid .event-preview .event-preview-body .details {
        padding: 10px;
      }
.events-list.compact-grid .event-preview .event-preview-body .details .date-time .date {
            font-size: 0.9rem;
            font-weight: normal;
          }
.events-list.compact-grid .event-preview .event-preview-body .details .date-time .time {
            display: none;
          }
.events-list.compact-grid .event-preview .event-preview-body .details .event-title {
          font-size: 1rem;
        }
.events-list.compact-grid .event-preview .event-preview-body .details .event-description {
          font-size: 0.9rem;
          font-weight: normal;
          line-height: 120%;
          margin-top: 0;
        }
.tag-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tag-filters > div {
    flex-shrink: 0;
  }
@media (max-width: 799px) {
.tag-filters {
    gap: 10px;
    margin-bottom: var(--gutter);
    flex-wrap: wrap;
    flex-direction: row
}

    .tag-filters > div {
      display: inline-block;
    }
  }
.tag-button {
  background-color: var(--callout-background-color);
  color: var(--text-color);
  text-decoration: none;
  border-radius: 99999px;
  display: inline-block;
}
.tag-button.with-count {
    background-color: transparent;
    display: inline-block;
    padding: 0;
    overflow: hidden;
  }
.tag-button.with-count > span {
      background-color: var(--callout-background-color);
      padding: 8px 14px;
      display: inline-block;
    }
@media (max-width: 799px) {
.tag-button.with-count > span {
        padding: 6px 10px
    }
      }
.tag-button.with-count > span:not(:last-child) {
        margin-right: 2px;
      }
.tag-button.with-count:hover {
      border: 2px solid var(--highlight-color);
      margin: -2px;
    }
.tag-button.with-count:hover > span {
      }
.tag-button.selected {
    background-color: var(--highlight-color);
  }
.tag-button.selected > span {
      background-color: var(--highlight-color-emphasis);
    }
.footer-nav {
  margin: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 799px) {
.footer-nav {
    grid-template-columns: 1fr
}
  }
.footer-nav .opening-hours {
    border-collapse: collapse;
  }
.footer-nav .opening-hours td {
      padding: 0 0.8rem 0 0;
    }
.footer-nav .socials svg {
      fill: var(--text-color);
    }
.footer-nav .socials svg.meetup {
        background-color: var(--text-color);
        fill: var(--background-color);
        border-radius: 100px;
        padding: 3px;
      }
.footer-nav .socials a:hover svg {
        fill: var(--highlight-color);
      }
.footer-nav .socials a:hover svg.meetup {
          background-color: var(--highlight-color);
          fill: var(--background-color);
        }
.footer-nav .site-sections {
    display: flex;
    flex-direction: column;
  }
.footer-nav .site-sections a {
      color: var(--text-color);
    }
.footer-nav .site-sections a:hover {
        color: var(--highlight-color);
        text-decoration: underline;
      }
.footer-nav .column {
    display: flex;
    flex-direction: column;
  }
@media (min-width: 800px) {
      .footer-nav .column.center {
        align-items: center;
        text-align: center;
      }

      .footer-nav .column.right {
        align-items: flex-end;
        text-align: right;
      }
    }
.footer-nav .sponsor.image-link {
    display: block;
    width: 10em;
    margin-bottom: 1rem;
  }
.footer-nav .sponsor.image-link img,
    .footer-nav .sponsor.image-link svg {
      width: 100%;
    }
.footer-nav .section {
    margin-bottom: 1.5rem;
  }
.footer-nav .section h3 {
      margin-bottom: 1rem;
    }
.footer-nav .section p {
      margin: 0;
    }
.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-container .footer-nav {
    width: 100%;
  }
.footer-container .acknowledgement {
    text-align: center;
    max-width: 600px;
    line-height: 1.4em;
    opacity: 0.8;
  }
.sticky-hero {
  background-color: var(--background-color-emphasis);
}
.sticky-hero .container {
    padding-top: 15px;
    padding-bottom: 0px;
  }
.sticky-hero .section-photo {
    margin-bottom: 15px;
  }
.sticky-hero.sticky {
    position: fixed;
    top: var(--nav-height);
    width: 100%;
  }
.sticky-hero .hero {
    display: flex;
    flex-direction: row;
    gap: var(--gutter);
  }
.sticky-hero .hero .details {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
.sticky-hero .hero .details p:first-child {
        margin-top: 0;
      }
.sticky-hero .sticky-toolbar {
    padding: 15px 0;
    box-sizing: border-box;
  }
.sticky-hero .hide-when-closed {
    transition: opacity 0.5s ease-in-out;
  }
.sticky-hero.closed {
    position: fixed;
    width: 100%;
    z-index: 99;
  }
.sticky-hero.closed .hide-when-closed {
      opacity: 0;
    }
@media (max-width: 799px) {
    .sticky-hero .hero {
      flex-direction: column-reverse;
    }

    .sticky-hero .section-photo {
      margin-bottom: 0;
    }

    .sticky-hero .sticky-toolbar {
      margin: 0 calc(var(--gutter) * -1);
    }

    .sticky-hero nav.in-page-nav {
      overflow-y: hidden;
      overflow-x: scroll;
      width: 100%;
      padding-left: var(--gutter);
      padding-right: var(--gutter);
      box-sizing: border-box;
    }
  }
.order-summary {
  display: flex;
  flex-direction: column;
}
.order-summary tbody.order-items {
    display: flex;
    flex-direction: column;

    margin-bottom: 1rem;
    border-bottom: 2px solid var(--highlight-color);
    padding-bottom: 1rem;
  }
.order-summary tbody.order-items tr {
      display: flex;
      flex-direction: row;
    }
.order-summary tbody.order-items tr td {
        flex-grow: 1;
        padding: 0;
      }
.order-summary tbody.order-items tr td.product-preview {
      }
.order-summary tbody.order-items tr td.price {
        flex-shrink: 0;
        text-align: right;
        width: 5rem;
        padding-left: 10px;
      }
.order-summary tbody.totals {
    display: flex;
    flex-direction: column;
  }
.order-summary tbody.totals tr {
      display: flex;
      flex-direction: row;
    }
.order-summary tbody.totals tr td.heading {
        flex-grow: 1;
        text-align: right;
      }
.order-summary tbody.totals tr td.price {
        flex-shrink: 0;
        text-align: right;
        width: 5rem;
        padding-left: 10px;
      }
.order-summary tbody.totals tr.order-total {
        font-weight: bold;
        font-size: 1.2em;
      }
.stripe-payment-form .actions {
    margin-top: 1.5rem;
  }
.stripe-payment-form .actions a.text-link {
      text-decoration: underline;
    }
.stripe-payment-form .hidden {
    display: none;
  }
.stripe-payment-form #payment-message {
    font-size: 16px;
    line-height: 20px;
    padding-top: 12px;
    text-align: center;
  }
.stripe-payment-form #payment-message.good {
      color: green;
    }
.stripe-payment-form #payment-message.neutral {
      color: var(--highlight-color);
    }
.stripe-payment-form #payment-message.bad {
      color: red;
    }
.stripe-payment-form button {
    margin-bottom: 1rem;
    background: var(--highlight-color);
    font-family: Arial, sans-serif;
    color: #ffffff;
    border-radius: 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
  }
.stripe-payment-form button:hover {
    filter: contrast(115%);
  }
.stripe-payment-form button:disabled {
    opacity: 0.5;
    cursor: default;
  }
.stripe-payment-form .spinner,
  .stripe-payment-form .spinner:before,
  .stripe-payment-form .spinner:after {
    border-radius: 50%;
  }
/* spinner/processing state, errors */
.stripe-payment-form .spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    transform: translateZ(0);
  }
.stripe-payment-form .spinner:before,
  .stripe-payment-form .spinner:after {
    position: absolute;
    content: "";
  }
.stripe-payment-form .spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: var(--highlight-color);
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    transform-origin: 10.4px 10.2px;
    animation: loading 2s infinite ease 1.5s;
  }
.stripe-payment-form .spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: var(--highlight-color);
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    transform-origin: 0px 10.2px;
    animation: loading 2s infinite ease;
  }
@keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
.memberships-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gutter);
}
.membership-preview {
  border: 2px solid var(--highlight-color);
  /* background-color: var(--background-color-emphasis); */
  padding: var(--gutter);
  border-radius: 6px;
}
.membership-preview p {
    margin: 0;

    margin-top: 0.5rem;
  }
.area-list {
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 799px) {
.area-list {
    grid-template-columns: 1fr
}
  }
.area-list .area-preview h3 {
      margin-bottom: 0.75rem;
    }
.area-list .area-preview .image-and-details {
      display: grid;
      grid-gap: var(--gutter);
      grid-template-columns: 1fr 1fr;
    }
.area-list .area-preview .image-and-details > img.area-main-image {
        width: 100%;
      }
.area-list .area-preview .details p:first-child {
          margin-top: 0;
        }
.admin-navbar {
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.admin-navbar .section-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: bold;
  }
.layout-admin .admin-menu {
    --gutter: 15px;
  }
@media (max-width: 799px) {
.layout-admin .admin-menu {
      --gutter: 12px
  }
    }
.layout-admin .admin-menu {

    width: 200px;
    flex-shrink: 0;
    box-size: border-box;
    box-shadow: 5px 0 3px rgba(0, 0, 0, 0.2);
}
.layout-admin .admin-menu .menu-hero {
      padding: var(--gutter);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 1em;
    }
.layout-admin .admin-menu .menu-hero h1 {
        font-size: 1.5rem;
      }
.layout-admin .admin-menu .menu-hero .hamburger {
        display: none;
      }
.layout-admin .admin-menu .menu-nav .nav-item {
        display: block;
        padding: 0.75rem var(--gutter);
        background-color: #222222;
      }
.layout-admin .admin-menu .menu-nav .nav-item:not(:last-child) {
          margin-bottom: 2px;
        }
.layout-admin .admin-menu .menu-nav .nav-item.disabled {
          color: #6b7280;
        }
.layout-admin .admin-menu .menu-nav .nav-item.active {
          background-color: #444444;
          color: white;
        }
.layout-admin .admin-menu .menu-nav .nav-item.has-children::after {
          content: "▼";
          float: right;
        }
.layout-admin .admin-menu .menu-nav .nav-item.child-item {
          padding-left: calc(var(--gutter) * 2);
          font-size: 0.9em;
        }
.layout-admin .admin-menu .menu-nav a.nav-item {
        color: white;
      }
.layout-admin .admin-menu .menu-nav a.nav-item:hover {
          background-color: #444444;
          color: white;
        }
.layout-admin .admin-menu .user-details {
      --text-color: #d1d5db;
      color: var(--text-color);
      margin-top: var(--gutter);
      padding: var(--gutter);
    }
.layout-admin .admin-menu .user-details a,
      .layout-admin .admin-menu .user-details a:link,
      .layout-admin .admin-menu .user-details a:visited {
        color: var(--text-color);
        display: block;
      }
.layout-admin .admin-menu .user-details a, .layout-admin .admin-menu .user-details a:link, .layout-admin .admin-menu .user-details a:visited {
        }
.layout-admin .admin-menu .user-details a:hover {
        text-decoration: underline;
      }
.layout-admin .admin-menu .user-details .de-emphasise {
        color: #6b7280;
      }
.layout-admin .admin-menu .user-details .de-emphasise a,
        .layout-admin .admin-menu .user-details .de-emphasise a:link,
        .layout-admin .admin-menu .user-details .de-emphasise a:visited {
          color: #9ca3af;
        }
.layout-admin .admin-menu .user-details .welcome {
        margin-bottom: var(--gutter);
      }
.layout-admin .admin-menu .user-details .welcome .roles {
          margin-top: calc(var(--gutter) / 2);
        }
.layout-admin .admin-menu .user-details .user-links a {
          display: block;
          padding: 0.05rem 0;
        }
.layout-admin .admin-menu .user-details .user-links a:before {
            content: "•";
            margin-right: 0.25rem;
          }
.layout-admin .admin-menu .user-details .stats {
        margin-top: 1rem;
      }
@media (max-width: 799px) {
.layout-admin .admin-menu {
      width: auto;
      box-shadow: none
  }
        .layout-admin .admin-menu .menu-hero h1 {
          font-size: 1.2rem;
        }

        .layout-admin .admin-menu .menu-hero .hamburger {
          margin-top: -10px;
          margin-bottom: -10px;
          display: block;
        }

      .layout-admin .admin-menu .menu-body {
        display: none;
      }
        .layout-admin .admin-menu.open .menu-body {
          display: block;
        }
    }
.admin-index-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    /* margin-left: calc(0px - var(--gutter));
    margin-right: calc(0px - var(--gutter)); */
    /* margin: 0; */
  }
.admin-index-table table thead th {
        text-align: left;
        padding: 0.5rem var(--gutter);
      }
.admin-index-table table thead th.right {
          text-align: right;
        }
.admin-index-table table tbody tr:nth-child(odd) {
          background-color: var(--callout-background-color);
        }
.admin-index-table table tbody tr.unconfirmed {
          opacity: 0.8;
          color: red;
        }
.admin-index-table table tbody td {
        padding: 0 var(--gutter);
        min-height: 36px;
      }
.admin-index-table table tbody td.right {
          text-align: right;
        }
.admin-index-table table tbody td .primary-row-title {
          padding: 0.5rem 0;
          display: block;
        }
.admin-index-table table tbody td a.primary-row-link {
          padding: 0.5rem 0;
          display: block;
          color: var(--text-color);
        }
.admin-index-table table tbody td a.primary-row-link:hover {
            text-decoration: underline;
          }
.admin-index-table table tbody td.date-past {
          color: var(--text-color-muted);
        }
.admin-index-table .pagination {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
@media (max-width: 799px) {
.admin-index-table .pagination {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
  }
.admin-index-table .pagination > span {
      display: block;
      padding: 1rem 0.5rem;
    }
.admin-index-table .pagination > span a:hover {
          text-decoration: underline;
        }
.admin-index-table .tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
@media (max-width: 799px) {
.admin-index-table .tags {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 5px;
      margin: 5px 0
  }
    }
.admin-index-table .tag {
    padding: 0.3rem 0.8rem;
    display: inline-block;
    background-color: var(--tag-background-color);
    color: var(--tag-text-color);
    border-radius: 0.5rem;
    font-size: 0.8rem;
  }
@media (min-width: 800px) {
      .admin-index-table .tag:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 1px solid var(--tag-separator);
      }

      .admin-index-table .tag:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
@media (max-width: 799px) {
.admin-index-table .tag {
      padding: 0.2rem 0.4rem;
      border-radius: 0.3rem
  }
    }
.admin-index-table .search-with-submit {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
.admin-index-table .search-with-submit > input[type="search"] {
      padding: 0.5rem 1rem;
      border-radius: 0.5rem 0 0 0.5rem;
      font-size: 0.8rem;
      flex-grow: 1;
    }
@media (min-width: 800px) {
.admin-index-table .search-with-submit > input[type="search"] {
        max-width: 200px
    }
      }
.admin-index-table .search-with-submit > input[type="submit"] {
      padding: 0.5rem 1rem;
      border-radius: 0 0.5rem 0.5rem 0;
      font-size: 0.8rem;
      background-color: var(--callout-background-color);
      color: var(--text-color);
      cursor: pointer;
    }
.admin-index-table .table-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    margin-bottom: 1rem;
  }
@media (max-width: 799px) {
.admin-index-table .table-controls {
      flex-direction: column;
      align-items: stretch;
  }
    }
@media (max-width: 799px) {
.admin-index-table .table-controls {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
  }
.admin-index-table .filters {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
.admin-index-table .filters .filters-title {
      margin-right: 0.8rem;
      color: var(--text-color-muted);
    }
.admin-index-table .filters .filter {
      display: inline-block;
      background-color: var(--tag-background-color);
      color: var(--tag-text-color);
      border-radius: 0.5rem;
      font-size: 0.8rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      overflow: hidden;
    }
.admin-index-table .filters .filter .filter-title {
        padding: 0.3rem 0.4rem 0.3rem 0.8rem;
      }
.admin-index-table .filters .filter .close-button {
        color: var(--text-color);
        font-weight: bold;
        background-color: var(--tag-background-color);
        display: block;
        padding: 0.3rem 0.8rem 0.3rem 0.4rem;
      }
.admin-index-table .filters .filter .close-button:hover {
          background-color: var(--tag-background-color-hightlight);
        }
.admin-report-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}
.admin-report-table thead th {
      text-align: left;
      padding: 0.5rem 1rem;
    }
.admin-report-table thead th.numeric {
        text-align: right;
      }
.admin-report-table tbody tr:nth-child(odd) {
        background-color: var(--callout-background-color);
      }
.admin-report-table tbody tr.in-progress {
        opacity: 0.4;
      }
.admin-report-table tbody td {
      padding: 0.2rem 1rem;
      text-align: left;
    }
.admin-report-table tbody td.numeric {
        text-align: right;
      }
.admin-report-table tbody td a.primary-row-link {
        padding: 0.5rem 0;
        display: block;
        color: var(--text-color);
      }
.admin-report-table tbody td a.primary-row-link:hover {
          text-decoration: underline;
        }
.admin-report-table tbody td.date-past {
        color: var(--text-color-muted);
      }
.admin-report-table .change-up {
    color: green;
  }
.admin-report-table .change-down {
    color: red;
  }
table.timeline {
  margin-top: 1rem;
}
table.timeline tbody tr td {
        padding: 0.5rem 1rem;
      }
table.timeline tbody tr td .timeline-event {
          padding: 1rem;
        }
table.timeline tbody tr td .timeline-event.major {
            background-color: var(--callout-background-color);
            position: relative;
          }
table.timeline tbody tr td .timeline-event.major::before {
              content: "";
              position: absolute;
              top: 1rem;
              left: -20px;
              width: 0;
              height: 0px;
              border-width: 10px;
              border-style: solid;
              border-color: transparent var(--callout-background-color) transparent transparent;
            }
table.timeline tbody tr td .timeline-event.major h3 {
              font-weight: normal;
              color: var(--callout-text-color);
            }
table.timeline tbody tr td .timeline-event.major h3 strong {
                font-weight: bold;
                color: var(--highlight-color);
              }
table.timeline tbody tr td .timeline-event.major h3 a {
                color: var(--highlight-color);
              }
table.timeline tbody tr td .timeline-event.major h3 a:hover {
                  text-decoration: underline;
                }
.admin-media-gallery .images {
    display: grid;
    grid-template-columns: repeat(auto-fill, 110px);
    gap: 10px;
  }
.admin-media-gallery .images .image-container {
      border: 1px solid black;
      padding: 4px;
      box-sizing: border-box;
      background-color: black;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 110px;
      width: 110px;
    }
.admin-media-gallery .images .image-container img {
        max-width: 100px;
        max-height: 100px;
      }
.admin-media-gallery .pagination {
    margin-top: 1rem;
  }
.stats-callout {
  border: 2px solid var(--highlight-color);
  border-radius: 0.5rem;
  padding: var(--gutter);
  margin-bottom: calc(var(--gutter) * 2);
}
@media (max-width: 799px) {
.stats-callout {
    margin-top: calc(0px - var(--gutter));
    border-radius: 0;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0
}
  }
.stats-callout .callout-title {
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: 500;
    margin-bottom: 1rem;
  }
.stats-callout .stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gutter);
  }
.stats-callout .stats .stat-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
.stats-callout .stats a.stat {
      color: var(--text-color);
      display: block;
    }
.stats-callout .stats a.stat .value {
        color: var(--highlight-color);
        font-size: 2.25rem;
        line-height: 2.5rem;
      }
@media (max-width: 799px) {
.stats-callout .stats a.stat .value {
    font-size: 1.5rem;
      }
  }
.stats-callout .stats a.stat:hover .label {
          text-decoration: underline;
        }
@media (max-width: 799px) {
.stats-callout .stats {
      grid-template-columns: repeat(4, 1fr)
  }
        .stats-callout .stats a.stat .label {
          font-size: 0.9rem;
          line-height: 1.2rem;
        }
          @media (max-width: 799px) {
        .stats-callout .stats a.stat .label {
    font-size: 0.8rem;
    line-height: 1rem;
        }
  }
    }
.stats-callout .actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
.stats-callout .actions a {
    }
.admin-page .page-title {
    margin-bottom: 1rem;
  }
.month-nav {
  font-size: 1.5em;
  background-color: var(--callout-background-color);
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: var(--gutter);
}
.roster-container {
  height: 80vh;
  overflow: auto;
}
table.roster {
  min-width: 100%;
  border-spacing: 0;
}
table.roster thead tr.names {
      position: sticky;
      top: 0;
      z-index: 1;
      background-color: var(--background-color);
    }
table.roster thead tr.actions th {
        text-align: center;
      }
table.roster tbody.slots-body tr td {
        /* position: relative; */

        border: 2px solid var(--background-color);
      }
table.roster tbody.slots-body tr td.day {
          width: 2em;
        }
table.roster tbody.slots-body tr td.weekday {
          width: 3em;
        }
table.roster tbody.slots-body tr td.session-name {
          width: 9em;
          font-size: 0.8em;
          opacity: 0.75;
        }
table.roster tbody.slots-body tr td.session-name.highlight {
            color: var(--highlight-color);
            font-weight: bold;
            font-size: 0.9em;
          }
table.roster tbody.slots-body tr td.user-slot {
          min-width: 50px;
          height: 2rem;
          text-align: center;
          color: black;
        }
table.roster tbody.slots-body tr td.user-slot[data-availability="unknown"] {
            background: repeating-linear-gradient(45deg, var(--slate-600), var(--slate-600) 4px, transparent 4px, transparent 8px);
            opacity: 0.8;
          }
table.roster tbody.slots-body tr td.user-slot[data-availability="busy"] {
            background-color: red;
          }
table.roster tbody.slots-body tr td.user-slot[data-availability="available"] {
            background-color: orange;
          }
table.roster tbody.slots-body tr td.user-slot[data-role="manager"][data-availability="busy"] {
              background: linear-gradient(to left bottom, green 50%, red 50%);
            }
table.roster tbody.slots-body tr td.user-slot[data-role="manager"][data-availability="unknown"] {
              background: linear-gradient(to left bottom, green 50%, --slate-600 50%);
            }
table.roster tbody.slots-body tr td.user-slot[data-role="manager"][data-availability="available"] {
              background-color: green;
            }
table.roster tbody.slots-body tr td.manager {
        width: 12em;
        padding: 0 0.5em;
      }
table.roster tbody.edit-actions td div {
    display: none;
    padding: 0.5em 0;
  }
table.roster tbody.edit-actions td div a {
      margin-right: 0.5em;
    }
table.roster.editing thead tr.actions a {
          cursor: not-allowed;
          opacity: 0.5;
        }
table.roster.editing thead th.user-header:not(.editing) {
        display: none;
      }
table.roster.editing tbody.slots-body td.user-slot:not(.editing) {
        opacity: 0.4;
        cursor: not-allowed;
        display: none;
      }
table.roster.editing tbody.slots-body td.user-slot.editing {
        cursor: pointer;
        opacity: 1;
      }
table.roster.editing tbody.edit-actions div.edit-user-action {
        display: block;
        padding: 0.5em 0;
      }
table.roster.editing tbody.edit-actions div.edit-user-action a {
          margin-right: 0.5em;
        }
table.roster.editing-manager thead tr.actions th a {
            cursor: not-allowed;
            opacity: 0.5;
          }
table.roster.editing-manager tbody td.manager {
        background-color: green;
      }
table.roster.editing-manager tbody td.manager[data-managers=""] {
          background-color: orange;
        }
table.roster.editing-manager tbody td.user-slot:hover {
          border: 2px solid green;
          box-model: border-box;
        }
table.roster.editing-manager tbody.edit-actions div.edit-manager-action {
        display: block;
      }
.layout-admin {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.layout-admin .admin-body {
    flex-grow: 1;
  }
.layout-admin .admin-content {
    overflow-y: scroll;
    overflow-x: hidden;
    padding: var(--gutter) 0;

    margin: 0 var(--gutter);
  }
@media (max-width: 799px) {
.layout-admin .admin-content {
      margin: 0
  }
    }
.layout-admin .admin-content .breadcrumbs {
      margin-bottom: 0.5rem;
    }
.layout-admin .admin-content .breadcrumbs a,
      .layout-admin .admin-content .breadcrumbs a:visited,
      .layout-admin .admin-content .breadcrumbs a:link {
        color: var(--text-color);
      }
.layout-admin .admin-content .breadcrumbs a:hover {
        color: var(--highlight-color);
        text-decoration: underline;
      }
.layout-admin .admin-area-leads {
    margin-bottom: 1rem;
  }
.layout-admin .admin-area-leads .role {
      display: flex;
      flex-direction: row;
    }
.layout-admin .admin-area-leads .role h2 {
        font-size: 1rem;
        margin-right: 1rem;
        color: var(--text-color);
      }
.layout-admin .admin-area-leads .role a.person {
        margin-right: 0.6rem;
      }
.layout-admin .admin-area-leads .role a.person:hover {
          text-decoration: underline;
        }
@media (max-width: 799px) {
.layout-admin .admin-area-leads {
      display: none;
      margin-bottom: 0
  }
    }
.layout-admin .center {
    max-width: 600px;
    margin: 20vh auto;
  }
@media (max-width: 799px) {
.layout-admin {
    flex-direction: column;
    align-items: justify;
    height: 100%;
    overflow: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

    .layout-admin .admin-body {
      overflow: scroll;
    }
  }
@media (max-width: 799px) {
.layout-admin .page-title {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
  }
.layout-show .title-container {
    margin-bottom: var(--gutter);
  }
@media (max-width: 799px) {
.layout-show .title-container {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
  }
@media (max-width: 799px) {
.layout-show h1.page-title {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
  }
.layout-show .page-actions {
    margin-bottom: 1rem;
  }
@media (max-width: 799px) {
.layout-show .breadcrumbs {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
  }
.layout-show .show-details {
    border: 2px solid var(--highlight-color);
    border-radius: 0.5rem;
    padding: var(--gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
    margin-bottom: var(--gutter);
  }
@media (max-width: 799px) {
.layout-show .show-details {
      border-radius: 0;
      border-left-width: 0;
      border-right-width: 0
  }
    }
@media (max-width: 799px) {
.layout-show .show-details {
      grid-template-columns: repeat(2, 1fr)
  }
    }
.layout-show .show-details .detail .title {
        font-weight: bold;
        font-size: 1.2rem;
        color: var(--highlight-color);
        margin-bottom: 0.5rem;
      }
@media (max-width: 799px) {
.layout-show .show-heading {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
  }
@media (max-width: 799px) {
.admin-layout-edit {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
}
  }
.admin-layout-edit form {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
.admin-layout-edit form .form-actions {
      margin-top: 1rem;
    }
.layout-admin-people-index {
}
.admin-people-show .image-and-details {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gutter);
  }
.admin-people-show .image-and-details .person-image {
      flex: 0 0 auto;
      max-width: 33%;
      height: auto;
    }
@media (max-width: 799px) {
.admin-people-show .image-and-details .person-image {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    }
  }
@media (max-width: 799px) {
.admin-people-show .image-and-details {
      flex-direction: column
  }
    }
.layout-admin-people-metrics > h2 {
    margin-bottom: var(--gutter);
  }
.layout-admin-people-metrics > section .section-intro {
      border-left: 3px solid var(--highlight-color);
      padding-left: calc(var(--gutter) / 2);
    }
.layout-admin-people-metrics > section .legend {
      font-size: 0.7em;
      opacity: 0.8;
      text-align: center;
    }
.layout-admin-roster .no-roster {
    max-width: 500px;
    margin: calc(var(--gutter) * 2) auto;
    text-align: center;
  }