/* Core UI components */
.accordion {
  margin: 1rem 0;
}
.accordion summary {
    align-items: center;
    background-color: var(--gray-100);
    border: 1px solid var(--light-gray);
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
  }
.accordion .icon-open {
    display: none;
  }
.accordion[open] .icon-open {
      display: inline-block;
    }
.accordion[open] .icon-closed {
      display: none;
    }
.alert,
alert-message {
  --border-radius: 4px;

  align-items: center;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--border-radius);
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 1rem;
  position: relative;
}
.no-margin:is(.alert,alert-message),[no-margin]:is(.alert,alert-message) {
    margin: 0;
  }
:is(.alert,alert-message) p {
    margin: 0;
  }
:is(.alert,alert-message) p + p {
    margin-top: 1rem;
  }
:is(.alert,alert-message) a:not(.btn) {
    color: inherit !important;
    font-weight: bold;
  }
:is(.alert,alert-message):has(.footnote) {
    padding-bottom: 2rem;
  }
:is(.alert,alert-message) .footnote {
    color: black;
    font-size: 0.875rem;
    opacity: 0.75;
    position: absolute;
    bottom: 1px;
    right: 1px;
  }
:is(.alert,alert-message) .hint {
    margin-top: 0;
  }
:is(:is(.alert,alert-message) .hint) .liquid-variable {
      background-color: var(--blue-100);
    }
.alert--under-section-header:is(.alert,alert-message) {
    margin: -0.5rem 0 1rem;
  }
.alert--small {
  padding: 0.25rem 0.5rem;
}
.alert--danger,
alert-message[danger] {
  background-color: var(--red-50);
  border: none;
  color: var(--red-700);
}
.alert--success,
alert-message[success] {
  background-color: var(--green-50);
  border: none;
  color: var(--green-700);
}
.alert--test-mode,
.alert--warning,
alert-message[test-mode],
alert-message[warning] {
  background-color: var(--orange-200);
  border: none;
  color: var(--orange-800);
}
.alert--cta {
  align-items: flex-start;
  background-color: var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0;
}
.alert--cta .btn {
    background-color: white;
    align-self: flex-end;
  }
.alert--cta svg {
    opacity: 1;
  }
html.dark-mode .alert,html.dark-mode alert-message {
    background: var(--gray-700);
    border: 1px solid var(--gray-800);
    border: none;
    color: inherit;
  }
html.dark-mode .alert--cta {
    background-color: var(--gray-700);
    border: 1px solid var(--gray-900);
  }
:is(html.dark-mode .alert--cta) .btn {
      background-color: var(--gray-800);
      color: var(--gray-200);
    }
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
:is(.badge-list li) span {
      background-color: #444;
      border-radius: 2px;
      color: white;
      display: inline-block;
      font-size: 0.875rem;
      padding: 0 0.25rem;
      text-decoration: none;
      white-space: nowrap;
    }
:is(.badge-list li)::marker {
      font-size: 0;
    }
:is(.badge-list.with-and li)::after {
        content: "and";
        font-size: 0.875rem;
        text-transform: uppercase;
        }
:is(.badge-list.with-and li):last-child::after {
        content: "";
      }
.badge,
status-badge {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 0.25rem;
  display: inline-block;
  font-size: var(--text-sm);
  padding: 0 0.25rem;
  color: var(--gray-800);
}
a.badge {
  text-decoration: none;
}
.badge--success,
status-badge[success] {
  background-color: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-700);
}
.badge--info,
status-badge[info] {
  background-color: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--info-color);
}
.badge--warning,
status-badge[warning] {
  background-color: var(--yellow-50);
  border-color: var(--yellow-200);
  color: var(--yellow-700);
}
.badge--danger,
status-badge[danger] {
  background-color: var(--red-50);
  border-color: var(--red-200);
  color: var(--red-700);
}
status-badge[sm] {
  font-size: var(--text-xs);
}
status-badge[xs] {
  font-size: var(--text-xxs);
}
.blank-state {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}
.blank-state .svg--dark {
    display: none;
  }
.blank-state h3 {
    font-size: 1.25rem;
    margin: 0;
  }
.blank-state .buttons {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
  }
.blank-state p {
    color: var(--gray-700);
    margin: 0 auto;
    max-width: 30rem;
    text-align: center;
  }
.blank-state a.docs-link {
    color: var(--scampi-700);
    font-size: 1rem;
    text-decoration: none;
  }
:is(.blank-state a.docs-link):hover,:is(.blank-state a.docs-link):focus,:is(.blank-state a.docs-link):active {
      text-decoration: underline;
    }
.blank-state.blank-state--invitations {
    gap: 0;
    overflow-y: auto;
    justify-content: flex-start;
  }
.blank-state.blank-state--invitations > .dropdown {
      align-self: flex-end;
      flex-shrink: 0;
    }
.blank-state.blank-state--invitations .blank-state--group {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      justify-content: center;
      margin: auto;
      width: 100%;
    }
:is(.blank-state.blank-state--invitations .blank-state--group) > svg {
        margin-top: -2rem;
      }
.box {
  background: white;
  border-radius: 1rem;
  overflow-y: auto;
  width: 100%;
}
.box > * + * {
    margin-top: 0.5rem;
  }
.box header,.box main {
    padding: 1rem;
  }
@media (width >= 768px) {
.box > * {
      margin: auto;
      width: 32rem;
  }
    }
@media (width >= 768px) {
.box.wide > * {
        max-width: 64rem;
        width: 100%;
    }
      }
.box h2 {
    text-align: center;
  }
.box p {
    margin-bottom: 1rem;
  }
.box section {
    margin-top: 1rem;
  }
.box ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
:is(.box ul) li + li {
      border-top: 1px solid var(--gray-200);
    }
:is(.box ul) li a {
      display: block;
      padding: 1rem;
    }
:is(:is(.box ul) li a):hover {
        background: var(--gray-100);
      }
.box form footer {
    padding: 1rem 0;
  }
@media (width >= 768px) {
.box--container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}
  }
.btn {
  --border-radius: 4px;
  --border-color: var(--light-gray);
  --button-padding: 0.25rem 0.75rem;

  align-items: center;
  background-color: inherit;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--gray-900);
  cursor: pointer;
  display: inline-flex;
  gap: 0.25rem;
  justify-content: center;
  min-height: 2.125rem;
  white-space: nowrap;
  padding: var(--button-padding);
  text-decoration: none;
}
.btn:hover:not([aria-disabled="true"]) {
    background-color: var(--light-blue);
    text-decoration: none;
  }
.btn.btn-sm {
  font-size: 0.75rem;
  min-height: 1.75rem;
}
.btn.btn-xs {
  font-size: 0.75rem;
  min-height: 1.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.btn.btn-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.btn.btn-simple {
  border: none !important;
}
.btn.btn-with-qr-code {
  border: none;
  border-radius: 1rem;
  padding: 0;
}
html.dark-mode .btn.btn-with-qr-code {
  background-color: #fff;
}
:is(html.dark-mode .btn.btn-with-qr-code):hover:not([aria-disabled="true"]) {
    background-color: var(--light-blue);
  }
.btn.btn-primary {
  border-color: var(--custom-accent-color, var(--scampi-700));
  color: var(--custom-accent-color-contrast, white);
}
.btn.btn-primary:not([aria-disabled="true"]) {
    background-color: var(--custom-accent-color, var(--scampi-700));
  }
.btn.btn-primary:hover {
    text-decoration: none !important;
  }
.btn.btn-primary:hover:not([aria-disabled="true"]) {
    background-color: var(--scampi-800);
  }
.btn.btn-success {
  border-color: var(--success-color);
  color: var(--success-text);
}
.btn.btn-success:not([aria-disabled="true"]) {
    background-color: var(--success-color);
  }
.btn.btn-success:hover:not([aria-disabled="true"]) {
    background-color: var(--success-color-hover);
    border-color: var(--success-color-hover);
  }
.btn.btn-danger {
  border-color: var(--danger-color);
  color: var(--danger-text);
}
.btn.btn-danger:not([aria-disabled="true"]) {
    background-color: var(--danger-color);
  }
.btn.btn-danger:hover {
    background-color: var(--danger-color-hover);
  }
.btn.btn-toggle-test-mode {
  background-color: white;
  color: var(--orange-800);
  border-color: var(--orange-800);
}
.btn.btn-toggle-test-mode:hover {
    background-color: var(--orange-100);
  }
.btn.btn-link {
  border-color: rgb(0 0 0 / 0%);
  color: var(--custom-accent-color, var(--scampi-700));
}
.btn.btn-link.btn-danger {
  color: var(--danger-color);
  background: none;
  border: none;
}
.dark-mode .btn.btn-link.btn-danger {
  color: var(--red-500);
}
.btn.btn-with-color {
  color: var(--link-color);
}
.btn.btn-no-padding {
  padding: 0;
}
.btn.btn-link:hover,
.btn.btn-link:active,
.btn.btn-link:focus {
  background-color: rgb(0 0 0 / 0%);
  text-decoration: underline;
}
.btn.btn-secondary {
  border-color: var(--medium-gray);
  color: black;
  background-color: white;
}
.btn.btn-secondary:hover {
    background-color: var(--light-gray);
  }
.btn.btn-toggle {
  border-color: var(--medium-gray);
  color: black;
  background-color: white;
}
.btn.btn-toggle:hover,.btn.btn-toggle.on {
    background-color: var(--light-gray);
  }
.btn.btn-toggle.on:hover {
    background-color: var(--medium-gray);
  }
.btn.btn-default {
  border-color: var(--medium-gray);
  color: black;
  background-color: var(--light-gray);
}
.btn.btn-default:hover {
    background-color: white;
  }
.btn-close {
  align-items: center;
  border-radius: 4px;
  color: var(--gray-900);
  display: flex;
  justify-content: center;
  min-height: 2.125rem;
  min-width: 2.125rem;
  text-align: center;
  text-decoration: none;
}
.btn-close:hover {
    background-color: var(--light-blue);
  }
.btn-not-clickable:hover {
    background-color: #fff;
    cursor: default;
  }
.btn.with-padding-x {
  padding-left: 1rem;
  padding-right: 1rem;
}
.btn.with-padding-x-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.btn-group {
  border-radius: 4px;
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn {
  background-color: var(--gray-100);
  box-shadow: inset 0 0 5px rgb(0 0 0 / 5%);
  position: relative;
  flex: 1 1 auto;
}
.active:is(.btn-group > .btn) {
    background-color: #fff;
    box-shadow: none;
  }
.btn-group > .btn:not(:last-child, .dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn-group:not(:first-child),
.btn-group > :not(.btn-check:first-child) + .btn {
  margin-left: -1px;
}
.btn-group > .btn:nth-child(n + 3),
.btn-group > :not(.btn-check) + .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn.btn-block {
  display: block;
  text-align: center;
  width: 100%;
}
.btn[aria-disabled="true"],
.btn.disabled {
  border-color: var(--gray-200);
  color: var(--gray-400);
  cursor: default;
}
/*
  Change the UI after something has been clicked. Works
  well with click_controller.js.
*/
.click-swap .after-click {
    display: none;
  }
.click-swap.clicked .before-click {
      display: none;
    }
.click-swap.clicked .after-click {
      display: inline-block;
    }
.clipboard {
  position: relative;
}
.clipboard svg.fa-circle-check {
    /*
      This inserts the solid fa-circle-check icon using
      the techniques described here:
      https://docs.fontawesome.com/web/add-icons/pseudo-elements
    */

    /* Rules not related to Font Awesome */
    color: var(--green);
    font-size: 0.875rem;
    position: absolute;
    right: -5px;
    top: -5px;
  }
code[data-controller="clipboard"] {
  background-color: var(--gray-200);
  border-radius: 0.25rem;
  cursor: pointer;
  display: inline-block;
  padding: 0.15rem 0.25rem;
  position: relative;
}
code[data-controller="clipboard"] strong {
    color: var(--purple-700);
    font-weight: normal;
  }
code[data-controller="clipboard"] .fa-circle-check {
    color: var(--green-500);
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 1;
  }
.code-block {
  background-color: var(--gray-100);
  border-radius: 0.5rem;
  margin: 1rem 0;
  padding: 0.5rem;
  position: relative;
}
.code-block pre {
    background-color: inherit;
    border: none;
  }
.code-block button {
    border: none;
    position: absolute;
    right: 0;
    top: 0;
  }
.dark-mode .code-block {
    background-color: var(--gray-800);
  }
dialog {
  border: none;
  border-radius: 4px;
  overflow: hidden;
  max-width: 50ch;
  margin: auto;
  padding: 0;
}
dialog.scrollable {
    overflow-y: scroll;
  }
dialog {

  /*  display: flex; */
  flex-direction: column;
}
dialog::backdrop {
    background: black;
    opacity: 0.2;
  }
dialog fieldset {
    margin: 0 !important;
  }
dialog form,dialog div.modal-content,dialog modal-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-height: 80vh;
  }
:is(:is(dialog form,dialog div.modal-content,dialog modal-content) .illustration) svg {
        max-height: 4.625rem;
        width: 100%;
        margin: 2rem 0;
      }
.svg--dark:is(:is(:is(dialog form,dialog div.modal-content,dialog modal-content) .illustration) svg) {
          display: none;
        }
dialog section {
    container-name: dialog-section;
    container-type: inline-size;
    padding: 1rem;
  }
.tight:is(dialog section) {
      padding: 0;
    }
dialog header {
    align-items: center;
  }
:is(dialog header):has(p) {
      align-items: start;
    }
:is(dialog header) p.hint {
      margin-bottom: 0;
    }
dialog header {

    border-bottom: 1px solid var(--light-gray);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
    margin-bottom: 0;
  }
:is(dialog header) h2 {
      flex: 1;
    }
:is(:is(dialog header) h2):has( + p) {
        margin-bottom: 0;
      }
:is(dialog header) .btn {
      border-color: transparent;
    }
dialog main {
    flex: 1;
    height: 0;
    padding: 1rem;
    overflow-y: auto;
  }
dialog footer {
    border-top: 1px solid var(--light-gray);
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin: 0;
    padding: 1rem;
  }
@media (width >= 768px) {
dialog {
    min-width: 50ch;
}

    dialog.wide-60 {
      min-width: 60ch;
      max-width: 60ch;
    }

    dialog.wide {
      min-width: 80ch;
      max-width: 80ch;
    }
  }
dialog[open] {
  display: flex;
}
.drawer {
  background: white;
  width: 400px;
  border-left: 1px solid var(--light-gray);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  z-index: calc(infinity);
}
.drawer form {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 0;
  }
.drawer form footer {
    border-top: 1px solid var(--light-gray);
  }
.drawer form main {
    padding: 1rem;
    overflow-y: auto;
    height: 0;
    flex: 1;
  }
.drawer form header {
    padding: 9px;
    padding-left: 0;
    margin: 0;
    margin-left: 1rem;
    border-bottom: 1px solid var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
:is(.drawer form header) h3 {
      font-weight: 500;
      font-size: 1.375rem;
    }
.dark-mode .drawer {
  background: var(--gray-800);
  border-left-color: var(--gray-900);
}
.dropdown {
  display: flex;
}
.dropdown .inline-dropdown {
    display: inline-flex;
  }
.dropdown {

  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.dropdown p {
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
.filter-title:is(.dropdown p) {
      color: var(--dark-gray);
      font-size: 0.875rem;
      padding-bottom: 0.25rem;
    }
.filter-title:is(.dropdown p) a {
        text-decoration: none;
      }
.dropdown li.divider {
    border-top: 1px solid var(--light-gray);
  }
.dropdown li.disabled {
    color: var(--dark-gray);
  }
.dropdown button {
    margin: 0;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0;
    cursor: pointer;
    color: var(--gray-700);
  }
:is(.dropdown button):hover:not([aria-disabled="true"]) {
      background-color: var(--light-blue);
    }
.dropdown button.btn {
    border: 1px solid var(--border-color);
  }
.dropdown > button {
    border-radius: 4px;
    min-height: 2.125rem;
    min-width: 2.125rem;
    justify-content: center;
  }
.dropdown menu.hidden {
    display: none;
  }
.dropdown menu {
    overflow: auto;
    position: absolute;
    background: white;
    border: 1px solid var(--light-gray);
    border-radius: 0.25rem;
    box-shadow: 0 10px 10px rgba(0 0 0 / 0.1);
    padding: 0;
    max-height: 65dvh;
    min-width: 12rem;
    z-index: 1000;
    width: -moz-max-content;
    width: max-content;
  }
:is(.dropdown menu) form.button_to {
      padding: 0;
      width: 100%;
    }
:is(:is(.dropdown menu) form.button_to) button {
        padding: 0.5rem 1rem;
      }
:is(.dropdown menu) li {
      list-style-type: none;
      font-size: 0.875rem;
      font-weight: 400;
    }
:is(:is(.dropdown menu) li) a,:is(:is(.dropdown menu) li) button {
        color: var(--gray-700);
        display: flex;
        gap: 0.5rem;
        align-items: center;
        padding: 0.5rem 1rem;
        text-decoration: none;
        width: 100%;
      }
:is(:is(:is(.dropdown menu) li) a,:is(:is(.dropdown menu) li) button):hover:not([aria-disabled="true"]) {
          background: var(--gray-100);
        }
:is(:is(.dropdown menu) li) a[disabled],:is(:is(.dropdown menu) li) button[disabled],:is(:is(.dropdown menu) li) [aria-disabled="true"] {
        color: var(--gray-400);
      }
.dropdown-divider {
  border-top: 1px solid var(--light-gray);
}
.dropdown--sort,
.dropdown--filter {
  padding: 0.5rem 0.75rem;
}
:is(.dropdown--sort,.dropdown--filter) .submenu-label {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
:is(:is(.dropdown--sort,.dropdown--filter) .submenu-label) svg {
      opacity: 0.5;
    }
:is(.dropdown--sort,.dropdown--filter) > button {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
.dropdown--sort + .dropdown--filter {
  padding-left: 0;
  margin-left: -0.75rem;
}
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
}
.expandable-sections {
  --table-border-color: var(--lightest-gray);
}
.expandable-sections summary {
    list-style: none;
  }
:is(.expandable-sections summary)::marker {
      font-size: 0;
    }
:is(.expandable-sections summary) header.subheader h4 {
      gap: 0.5rem;
      justify-content: flex-start !important;
    }
:is(.expandable-sections summary):hover .close-details-icon,:is(.expandable-sections summary):hover .open-details-icon {
        opacity: 1;
      }
:is(.expandable-sections summary) section {
      font-size: 0.875rem;
    }
.expandable-sections .close-details-icon,.expandable-sections .open-details-icon {
    cursor: pointer;
    opacity: 0.25;
  }
.expandable-sections .close-details-icon {
    display: none;
  }
.expandable-sections .open-details-icon {
    display: block;
  }
.expandable-sections[open] .open-details-icon {
      display: none;
    }
.expandable-sections[open] .close-details-icon {
      display: block;
    }
.expandable-sections[open] .only-when-closed {
      display: none;
    }
.flash {
  --flash-background-color: var(--light-gray);
  --flash-text-color: currentcolor;
  --flash-border-color: var(--medium-gray);
}
.flash.success {
    --flash-background-color: var(--success-color);
    --flash-text-color: var(--success-text);
    --flash-border-color: var(--success-color);
  }
.flash.danger {
    --flash-background-color: var(--danger-color);
    --flash-text-color: var(--danger-text);
    --flash-border-color: var(--danger-color);
  }
.flash {

  border-top: 1px solid var(--flash-border-color);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  z-index: 1000;
}
.flash span {
    background-color: var(--flash-background-color);
    border-color: var(--flash-border-color);
    border-style: solid;
    border-width: 0 1px 1px;
    border-radius: 0 0 0.25rem 0.25rem;
    color: var(--flash-text-color);
    font-size: 0.875rem;
    padding: 0 0.25rem;
  }
.hint {
  color: var(--base-hint-color);
  font-size: 0.8125rem;
  font-weight: 300;
  margin: 0.25rem 0 0;
}
hr {
  border: none;
  height: 1px;
  background: var(--light-gray);
  margin: 0;
}
.icon-status.danger {
    color: var(--red-500);
  }
.icon-status.success {
    color: var(--green-500);
  }
.icon-status.neutral {
    color: var(--gray-400);
  }
p.info {
  background-color: var(--yellow-300);
  padding: 0.25rem 1rem;
}
p.info.secondary {
  background-color: var(--gray-200);
  color: var(--gray-700);
}
p.info.success {
  background-color: var(--green-600);
  color: var(--gray-50);
}
a.inline-link {
  color: var(--scampi-700);
  text-decoration: none;
}
a.inline-link:hover:not([aria-disabled="true"]),a.inline-link:active:not([aria-disabled="true"]),a.inline-link:focus:not([aria-disabled="true"]) {
    text-decoration: underline;
  }
.modal-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}
.modal-list a {
    display: block;
    width: 100%;
    padding: 1rem;
    text-decoration: none;
  }
.modal-list a:hover {
    background-color: var(--light-gray);
  }
.modal-list li + li {
    border-top: 1px solid var(--lightest-gray);
  }
:is(.dark-mode .modal-list) a:hover {
      background-color: var(--dark-gray);
    }
:is(.dark-mode .modal-list) li + li {
      border-top: 1px solid var(--gray-700);
    }
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(0);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes modal-exit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(100%);
  }
}
dialog[data-turn-enter="modal-enter"] {
  animation-name: modal-enter;
  animation-duration: 0.2s;
}
html.turn-advance.turn-exit dialog[data-turn-exit="modal-exit"] {
  animation-name: modal-exit;
  animation-duration: 0.2s;
}
.nav-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0 auto;
  max-width: 640px;
}
[aria-selected="true"]:is(.nav-tabs a) {
      background-color: var(--medium-purple);
    }
.pagination-info {
  background-color: var(--light-purple);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--light-gray);
  border-top: 1px solid var(--light-gray);
  position: sticky;
  top: 56px;
  left: 0;
  right: 0;
  text-align: center;
}
@media (width >= 500px) {
.pagination-info {
    grid-template-columns: 6em 1fr;
}
  }
@media (width >= 768px) {
.pagination-info {
    grid-template-columns: 6em 1fr 6em;
}
  }
.pagination-info .description {
    text-align: center;
  }
footer.pagination {
  border-top: 1px solid var(--light-gray);
  font-size: 0.75rem;
  text-align: center;
}
footer.pagination nav {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--light-gray);
    margin: 0.5rem;
    border-radius: 0.25rem;
  }
:is(footer.pagination nav) .page + .page {
      border-left: 1px solid var(--light-gray);
    }
:is(footer.pagination nav) a {
      padding: 0.25rem;
      text-decoration: none;
    }
:is(footer.pagination nav) .page:not(.prev,.next) {
      display: none;
    }
@media (width >= 768px) {
      :is(footer.pagination nav) .page:not(.prev,.next) {
        display: flex;
      }
    }
:is(footer.pagination nav) .page.active,:is(footer.pagination nav) a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
    }
.active:is(:is(footer.pagination nav) .page.active,:is(footer.pagination nav) a) {
        background-color: var(--light-blue);
      }
:is(footer.pagination nav) a:hover {
      background-color: #eee;
    }
:is(footer.pagination nav) .page.prev,:is(footer.pagination nav) .page.prev a,:is(footer.pagination nav) .page.next,:is(footer.pagination nav) .page.next a {
      width: 6rem;
    }
:is(footer.pagination nav) .page.prev a,:is(footer.pagination nav) .page.next a {
      padding-left: 1rem;
      padding-right: 1rem;
      width: 100%;
    }
:is(footer.pagination nav) .page.gap {
      align-items: center;
      height: 2rem;
      display: inline-flex;
      justify-content: center;
      padding: 0 0.5rem;
      text-align: center;
    }
:is(footer.pagination nav) .page.disabled {
      align-items: center;
      color: #999;
      display: inline-flex;
      height: 2rem;
      justify-content: center;
      text-align: center;
    }
.popover-hint {
  background-color: var(--dark-gray);
  border-radius: 4px;
  color: white;
  font-size: 0.875rem;
  max-width: 250px;
  padding: 4px 8px;
  position: fixed;
  width: -moz-max-content;
  width: max-content;

  /* Required to avoid being clipped by sticky position filter dropdown menu */
  z-index: 1000;
}
.popover-hint section {
    align-items: flex-start;
    display: flex;
    position: relative;
    justify-content: space-between;
  }
.popover-hint p {
    flex-grow: 1;
  }
.dark-mode .popover-hint {
    background-color: var(--scampi-900);
  }
.progress,
.progress-stacked {
  background-color: var(--gray-200);
  border-radius: 0.375rem;
  display: flex;
  font-size: 0.75rem;
  height: 1rem;
  overflow: hidden;
}
.progress-stacked > .progress {
  overflow: visible;
}
.progress-stacked > .progress > .progress-bar {
  width: 100%;
}
.progress-bar {
  background-color: var(--gray-400);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--gray-700);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.progress-bar:hover {
  cursor: pointer;
}
.bg-success {
  background-color: var(--success-color);
  color: #fff;
}
.progress-bar.bg-success:hover {
  background-color: var(--success-color-hover);
}
.bg-danger {
  background-color: var(--danger-color);
  color: #fff;
}
.progress-bar.bg-danger:hover {
  background-color: var(--danger-color-hover);
}
ul.sortable {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.sortable li {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0.75rem 0.75rem 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
:is(ul.sortable li):last-child {
      border-bottom: none;
    }
ul.sortable .fa-bars {
    color: var(--list-icon-color);
    cursor: grab;
  }
:is(ul.sortable .fa-bars):hover {
      color: black;
    }
.switcher {
  border: none;
  background: none;
  position: relative;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  text-decoration: none !important;
  color: var(--base-text-color);
  width: 100%;
}
.switcher label {
    font-weight: normal;
    margin: 0;
    text-align: left;
  }
.switcher p {
    font-size: 0.825rem;
    color: var(--base-muted-color);
    margin-top: 0.1rem;
    text-align: left;
  }
.switcher .toggle {
    background-color: light-dark(var(--gray-300), var(--gray-600));
    width: 42px;
    min-width: 42px;
    height: 23px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    padding: 0.25rem;
  }
.on:is(.switcher .toggle) {
      justify-content: flex-end;
      background-color: var(--dark-purple);
    }
:is(.switcher .toggle) .switch {
      border-radius: 100%;
      background-color: white;
      width: 16px;
      height: 16px;
      display: block;
    }
/* Center tables for demo */
table {
  margin: 0 auto;
}
/* Default Table Style */
table {
  color: #333;
  background: white;
  border: 1px solid grey;
  font-size: 12pt;
  border-collapse: collapse;
}
table thead th,
table tfoot th {
  color: #777;
  background: rgb(0 0 0 / 10%);
}
table caption {
  padding: 0.5em;
}
table th,
table td {
  padding: 0.5em;
  border: 1px solid lightgrey;
  text-align: left;
}
/* Zebra Table Style */
[data-table-theme*="zebra"] tbody tr:nth-of-type(odd) {
  background: rgb(0 0 0 / 5%);
}
[data-table-theme*="zebra"][data-table-theme*="dark"]
  tbody
  tr:nth-of-type(odd) {
  background: rgb(255 255 255 / 5%);
}
/* Dark Style */
[data-table-theme*="dark"] {
  color: #ddd;
  background: #333;
  font-size: 12pt;
  border-collapse: collapse;
}
[data-table-theme*="dark"] thead th,
[data-table-theme*="dark"] tfoot th {
  color: #aaa;
  background: rgb(0255 255 255 / 15%);
}
[data-table-theme*="dark"] caption {
  padding: 0.5em;
}
[data-table-theme*="dark"] th,
[data-table-theme*="dark"] td {
  padding: 0.5em;
  border: 1px solid grey;
}
table.table-checkins {
  border: none;
  width: 100%;
}
table.table-checkins th,table.table-checkins td {
    border: none;
    background: transparent;
    padding: 0.5rem 0.25rem;
    width: 50%;
    text-align: left;
  }
table.table-checkins th {
    font-weight: 500;
  }
table.table-checkins td {
    border-top: 1px solid var(--lightest-gray);
  }
table.table-stats {
  border: none;
  font-weight: normal;
  overflow-x: scroll;
  width: 100%;
}
table.table-stats thead th {
    border-bottom: 2px solid var(--lightest-gray);
    padding: 0 0.75rem;
  }
table.table-stats tr th:first-of-type {
    text-align: left;
  }
table.table-stats .table-stats td {
    padding: 0.25rem 1rem;
  }
table.table-stats .table-stats-totals td {
    background-color: var(--gray-50);
    border-top: 2px solid var(--lightest-gray);
    font-weight: bold;
    padding: 0.25rem 1rem;
  }
table.table-stats tr + tr {
    border-top: 1px solid var(--lightest-gray);
  }
table.table-stats th,table.table-stats td {
    border: none;
    background: transparent;
    color: var(--gray-700);
    padding: 0;
    text-align: right;
  }
table.table-stats th {
    border-bottom: 1px solid var(--lightest-gray);
    font-size: 0.875rem;
    text-align: right;
  }
table.table-stats .without-link {
    padding: 0.25rem 1rem;
  }
table.table-stats td:first-child {
    font-size: 0.875rem;
    text-wrap: nowrap;
    text-align: left;
  }
table.table-stats td:not(:first-child) {
    font-family: monospace;
    font-size: 0.875rem;
  }
table.table-stats td:last-child {
    font-weight: bold;
  }
table.table-stats td a {
    display: block;
    padding: 0.25rem 1rem;
    text-decoration: none;
  }
table.table-stats td a:hover {
    background-color: var(--light-blue);
  }
table.table-stats.table-stats--invites th {
    text-align: left;
  }
table.table-stats.table-stats--invites tr:last-child td {
    border-bottom: 1px solid var(--lightest-gray);
  }
.tabs .buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
.tabs [aria-selected="true"] {
    background-color: var(--medium-purple);
  }
:is(html.dark-mode .tabs) [aria-selected="true"] {
      background-color: var(--scampi-900);
    }
.tooltip {
  background-color: var(--dark-gray);
  border-radius: 4px;
  color: white;
  font-size: 14.5px;
  font-weight: normal;
  max-width: 250px;
  padding: 4px 8px;
  position: fixed;
  width: -moz-max-content;
  width: max-content;

  /* Required to avoid being clipped by sticky position filter dropdown menu */
  z-index: 1000;
}

/*# sourceMappingURL=/assets/application-components-4ec19f3f.css.map */