/* Base styles - reset, variables, colors, typography */
/*

  This file contains variables which refer directly to colors.
  It should act as a convenience for referring to colors by name
  elsewhere in the app.

  The variable names should be the color they represent, and not
  abstract names. Abstract names should be used elsewhere in the 
  app, and should refer back to colors listed here, rather than
  using hex codes or rgb etc. directly

  10 shades each of:
    - blue
    - gray
    - green
    - indigo
    - orange
    - pink
    - purple
    - red
    - scampi
    - yellow

  One source of these palletes is from https://uicolors.app which
  allows you to enter a single colour and it will automatically
  generate 11 shades. Most of these colours have 10 shades though
  and I think were generated using a different app.
*/
:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-850: #18212f;
  --gray-900: #111827;
  --green-50: #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-300: #6ee7b7;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;
  --green-900: #064e3b;
  --indigo-50: #f0f5ff;
  --indigo-100: #e5e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --purple-50: #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-800: #5b21b6;
  --purple-900: #4c1d95;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;

  /* uicolors.app/shared/1357a0c5-8817-49df-ae04-12a200419219 */
  --scampi-50: #f4f5f9;
  --scampi-100: #eaeef5;
  --scampi-200: #d9dfec;
  --scampi-300: #c1cae0;
  --scampi-400: #a8afd1;
  --scampi-500: #9197c3;
  --scampi-600: #7a7cb1;
  --scampi-700: #626394;
  --scampi-800: #55567e;
  --scampi-900: #494b66;
  --scampi-950: #2b2c3b;
  --yellow-25: #fffdf5;
  --yellow-50: #fffbeb;
  --yellow-100: #fef3c7;
  --yellow-200: #fde68a;
  --yellow-300: #fcd34d;
  --yellow-400: #fbbf24;
  --yellow-500: #f59e0b;
  --yellow-600: #d97706;
  --yellow-700: #b45309;
  --yellow-800: #92400e;
  --yellow-900: #78350f;
  --yellow-950: #421800;

  /* Moved from colors.css */

  --light-blue: #f0f7ff;
  --medium-blue: #bddbff;
  --light-purple: #f8f8fc;
  --medium-purple: #ececfa;
  --dark-purple: #626398;
  --dark-blue: #172a3a;
  --dark-gray: #828489;
  --medium-gray: #ced0ce;
  --light-gray: #ddd;
  --lightest-gray: #efefef;
  --imessage-gray: #e9e9eb;
  --window-gray: #f1f1f1;
  --blue-gray: #4b5666;
  --nearly-black: #090909;

  /* These should be removed and replaced */

  --green: var(--green-700);
  --red: var(--red-600);
  --yellow: var(--yellow-700);
}
:root {
  color-scheme: light dark;

  --base-border-color: light-dark(var(--light-gray), var(--gray-600));
  --base-text-color: light-dark(var(--gray-900), var(--gray-100));
  --base-hint-color: light-dark(var(--gray-500), var(--gray-400));
  --base-muted-color: light-dark(var(--gray-600), var(--gray-300));
  --base-main-background-color: light-dark(white, var(--gray-800));
  --base-light-background-color: light-dark(var(--gray-100), var(--gray-900));
  --base-background-color: light-dark(white, var(--gray-800));
  --base-input-background-color: light-dark(white, var(--gray-800));
  --base-input-text-color: light-dark(black, var(--gray-200));

  /* Text */

  --heading-color: light-dark(var(--nearly-black), var(--gray-100));

  /* Icons  */

  --list-icon-color: light-dark(var(--gray-400), var(--gray-500));

  /* Links */

  --link-color: #0067e1;
  --link-color-hover: #004495;

  /* States */

  --danger-color: var(--red);
  --danger-color-hover: #b32f2a;
  --danger-text: #fff;
  --info-color: var(--blue-700);
  --warning-color: #f34213;
  --success-color: var(--green);
  --success-color-hover: #146740;
  --success-border: var(--green);
  --success-border-hover: #125c39;
  --success-text: #fff;

  /* Cards  */

  --card-border-color: light-dark(var(--gray-200), var(--gray-700));
  --card-label-text-color: light-dark(var(--blue-gray), var(--gray-300));
  --card-text-color: light-dark(var(--nearly-black), var(--gray-100));
  --card-full-link-hover: light-dark(var(--gray-50), var(--gray-900));
  --card-inline-link: light-dark(var(--scampi-700), var(--purple-300));

  /* Badges */

  --base-badge-bg-default: light-dark(var(--gray-50), var(--gray-700));
  --base-badge-text-default: light-dark(var(--gray-700), var(--gray-50));
  --badge-bg-warning: light-dark(var(--yellow-50), var(--yellow-700));
  --badge-text-warning: light-dark(var(--yellow-600), var(--yellow-50));
  --badge-bg-success: light-dark(var(--green-50), var(--green-900));
  --badge-text-success: light-dark(var(--green-700), var(--green-300));
  --badge-bg-danger: light-dark(var(--red-50), var(--red-700));
}
html {
  color-scheme: light;
}
html.dark-mode {
  color-scheme: dark;
}
html.dark-mode form {
    --input-border: 1px solid var(--base-border-color);
  }
html.dark-mode .accordion summary,html.dark-mode .email-log {
    background-color: var(--gray-800);
    border-color: var(--gray-900);
  }
html.dark-mode .ace_editor {
    /* Taken from the ace twilight theme */
    background-color: #141414;
    color: #f8f8f8;
  }
:is(html.dark-mode .ace_editor) .ace_gutter {
      background: #232323;
      color: #e2e2e2;
    }
:is(html.dark-mode .ace_editor) .ace_print-margin {
      width: 1px;
      background: #232323;
    }
:is(html.dark-mode .ace_editor) .ace_cursor {
      color: #a7a7a7;
    }
:is(html.dark-mode .ace_editor) .ace_marker-layer .ace_selection {
      background: rgba(221 240 255 / 0.2);
    }
.ace_multiselect:is(html.dark-mode .ace_editor) .ace_selection.ace_start {
      box-shadow: 0 0 3px 0 #141414;
    }
:is(html.dark-mode .ace_editor) .ace_marker-layer .ace_step {
      background: rgb(102 82 0);
    }
:is(html.dark-mode .ace_editor) .ace_marker-layer .ace_bracket {
      margin: -1px 0 0 -1px;
      border: 1px solid rgba(255 255 255 / 0.25);
    }
:is(html.dark-mode .ace_editor) .ace_marker-layer .ace_active-line {
      background: rgba(255 255 255 / 0.031);
    }
:is(html.dark-mode .ace_editor) .ace_gutter-active-line {
      background-color: rgba(255 255 255 / 0.031);
    }
:is(html.dark-mode .ace_editor) .ace_marker-layer .ace_selected-word {
      border: 1px solid rgba(221 240 255 / 0.2);
    }
:is(html.dark-mode .ace_editor) .ace_invisible {
      color: rgba(255 255 255 / 0.25);
    }
:is(html.dark-mode .ace_editor) .ace_keyword,:is(html.dark-mode .ace_editor) .ace_meta {
      color: #cda869;
    }
:is(html.dark-mode .ace_editor) .ace_constant,:is(html.dark-mode .ace_editor) .ace_constant.ace_character,:is(html.dark-mode .ace_editor) .ace_constant.ace_character.ace_escape,:is(html.dark-mode .ace_editor) .ace_constant.ace_other,:is(html.dark-mode .ace_editor) .ace_heading,:is(html.dark-mode .ace_editor) .ace_markup.ace_heading,:is(html.dark-mode .ace_editor) .ace_support.ace_constant {
      color: #cf6a4c;
    }
:is(html.dark-mode .ace_editor) .ace_invalid.ace_illegal {
      color: #f8f8f8;
      background-color: rgba(86 45 86 / 0.75);
    }
:is(html.dark-mode .ace_editor) .ace_invalid.ace_deprecated {
      text-decoration: underline;
      font-style: italic;
      color: #d2a8a1;
    }
:is(html.dark-mode .ace_editor) .ace_support {
      color: #9b859d;
    }
:is(html.dark-mode .ace_editor) .ace_fold {
      background-color: #ac885b;
      border-color: #f8f8f8;
    }
:is(html.dark-mode .ace_editor) .ace_support.ace_function {
      color: #dad085;
    }
:is(html.dark-mode .ace_editor) .ace_list,:is(html.dark-mode .ace_editor) .ace_markup.ace_list,:is(html.dark-mode .ace_editor) .ace_storage {
      color: #f9ee98;
    }
:is(html.dark-mode .ace_editor) .ace_entity.ace_name.ace_function,:is(html.dark-mode .ace_editor) .ace_meta.ace_tag {
      color: #ac885b;
    }
:is(html.dark-mode .ace_editor) .ace_string {
      color: #8f9d6a;
    }
:is(html.dark-mode .ace_editor) .ace_string.ace_regexp {
      color: #e9c062;
    }
:is(html.dark-mode .ace_editor) .ace_comment {
      font-style: italic;
      color: #5f5a60;
    }
:is(html.dark-mode .ace_editor) .ace_variable {
      color: #7587a6;
    }
:is(html.dark-mode .ace_editor) .ace_xml-pe {
      color: #494949;
    }
:is(html.dark-mode .ace_editor) .ace_indent-guide {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWMQERFpYLC1tf0PAAgOAnPnhxyiAAAAAElFTkSuQmCC")
        right repeat-y;
    }
:is(html.dark-mode .ace_editor) .ace_indent-guide-active {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQIW2PQ1dX9zzBz5sz/ABCcBFFentLlAAAAAElFTkSuQmCC")
        right repeat-y;
    }
html.dark-mode .account-dropdown.dropdown > button:hover,html.dark-mode .account-dropdown.dropdown > button:active,html.dark-mode .account-dropdown.dropdown > button:focus {
    background-color: var(--gray-800);
  }
html.dark-mode .account-dropdown.dropdown > button svg {
    color: var(--purple-400);
  }
html.dark-mode .admin-area header {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }
html.dark-mode .admin-area-filter-options a {
    background-color: var(--gray-900);
    color: var(--gray-50);
  }
html.dark-mode .admin-area-filter-options a:hover,html.dark-mode .admin-area-filter-options a:active {
    background-color: var(--gray-900);
  }
html.dark-mode .admin-area-filter-options a:first-child,html.dark-mode .admin-area-filter-options a:last-child {
    border-color: var(--gray-700);
  }
html.dark-mode .admin-area-filter-options a.active {
    background-color: var(--gray-800);
    color: var(--gray-200);
  }
html.dark-mode .admin-area-filter-options a.active:hover {
    background-color: var(--gray-900);
  }
html.dark-mode .admin-list li {
    color: var(--gray-200);
  }
html.dark-mode .admin-list li .li-border {
    border-color: var(--gray-700);
  }
html.dark-mode .admin-list li .metadata {
    color: var(--gray-400);
  }
html.dark-mode .admin-list li a.active {
    background-color: var(--gray-900);
    outline-color: var(--gray-900);
  }
html.dark-mode .admin-list li a:hover {
    background-color: var(--gray-850);
  }
html.dark-mode .admin-list li a.active:hover {
    background-color: var(--gray-900);
    outline-color: var(--gray-900);
  }
html.dark-mode .admin-list li a,html.dark-mode .admin-list li a:visited {
    color: var(--gray-400);
  }
html.dark-mode .admin-list li a.list-invitation .list-invitation--ref {
    color: var(--gray-400);
  }
html.dark-mode .admin-list li b {
    color: var(--gray-100);
  }
.admin-list--timeline-date:is(:is(html.dark-mode .admin-list--timeline) li) {
        background-color: var(--gray-700);
      }
:is(:is(html.dark-mode .admin-list--timeline) li) > details > summary:hover {
        background-color: var(--gray-850);
      }
:is(:is(html.dark-mode .admin-list--timeline) li) details[open] {
        border-color: var(--scampi-700);
      }
:is(:is(html.dark-mode .admin-list--timeline) li) .admin-list--timeline-link:hover {
        background-color: inherit;
      }
:is(:is(html.dark-mode .admin-list--timeline) li) .object-changes .changes-from {
        color: var(--red-300);
      }
:is(:is(html.dark-mode .admin-list--timeline) li) .object-changes .changes-to {
        color: var(--green-300);
      }
html.dark-mode .app-main {
    background: var(--gray-700);
  }
html.dark-mode .app-main > main {
    background: var(--gray-800);
  }
@media (width >= 768px) {
html.dark-mode .app-main > main {
      border-top: 1px solid black;
      border-left: 1px solid black;
  }
    }
html.dark-mode .applied-filters a.filter {
    background-color: var(--gray-800);
  }
html.dark-mode .badge {
    background-color: var(--gray-700);
    border: 1px solid var(--gray-600);
    color: var(--gray-100);
  }
html.dark-mode body {
    background-color: var(--gray-800);
    color: var(--gray-200);
  }
@media (width >= 768px) {
html.dark-mode body {
      background-color: var(--gray-700);
  }
    }
html.dark-mode .box {
    background-color: var(--gray-700);
  }
html.dark-mode .btn {
    border-color: var(--gray-600);
    color: var(--gray-200);
  }
html.dark-mode .btn.btn-link,html.dark-mode .btn.btn-link:hover {
    border-color: transparent;
  }
html.dark-mode .btn:hover:not([aria-disabled="true"]) {
    background-color: var(--gray-900);
    border-color: var(--purple-400);
    color: var(--purple-400);
  }
html.dark-mode .btn.btn-primary {
    border-color: var(--custom-accent-color, var(--scampi-500));
    background-color: var(--custom-accent-color, var(--scampi-500));
    color: var(--custom-accent-color-contrast, black);
  }
html.dark-mode .btn.btn-primary:hover:not([aria-disabled="true"]) {
    background-color: var(--scampi-600);
    border-color: var(--scampi-600);
    color: var(--custom-accent-color-contrast, black);
  }
html.dark-mode .btn.btn-secondary {
    background-color: var(--gray-700);
  }
html.dark-mode .btn.btn-success {
    border-color: var(--success-color);
  }
html.dark-mode .btn.btn-success:hover:not([aria-disabled="true"]) {
    background-color: var(--success-color-hover);
    border-color: var(--success-color-hover);
    color: var(--gray-200);
  }
html.dark-mode .btn.disabled,html.dark-mode .btn[aria-disabled="true"] {
    background-color: inherit;
    border-color: var(--gray-600);
    color: var(--gray-600);
  }
html.dark-mode .btn.btn-simple[aria-disabled="true"] {
    background-color: inherit;
    color: var(--gray-500);
  }
html.dark-mode .btn.btn-toggle {
    background-color: transparent;
    border-color: var(--gray-600);
  }
html.dark-mode .btn.btn-toggle:hover {
    border-color: var(--purple-400);
  }
html.dark-mode .btn-close {
    color: var(--gray-200);
  }
html.dark-mode .btn-close:hover {
    background-color: black;
    color: var(--purple-400);
  }
html.dark-mode .btn.btn-danger {
    border-color: var(--danger-color);
    color: var(--danger-text);
  }
:is(html.dark-mode .btn.btn-danger):hover,:is(html.dark-mode .btn.btn-danger):active,:is(html.dark-mode .btn.btn-danger):focus {
      background-color: var(--danger-color-hover);
      border-color: var(--danger-color);
      color: var(--danger-text);
    }
html.dark-mode .btn-group > .btn:not([aria-disabled="true"]) {
    background-color: var(--gray-700);
  }
html.dark-mode .btn-group > .btn.active {
    background-color: transparent;
  }
html.dark-mode .btn-group > .btn-group:not(:first-child),html.dark-mode .btn-group > :not(.btn-check:first-child) + .btn {
    margin-left: 0;
  }
html.dark-mode .checkin header,html.dark-mode .checkin .stats {
    background-color: var(--gray-900);
  }
html.dark-mode .checkin .last-ticket h5 {
    color: var(--gray-900);
  }
html.dark-mode .checkin-history {
    background-color: var(--gray-700);
  }
html.dark-mode .checkin-history header {
    background-color: var(--gray-900);
  }
:is(:is(html.dark-mode .dashboard) .dashboard-heading) p a,:is(:is(html.dark-mode .dashboard) .dashboard-heading) dl a {
        color: var(--scampi-400);
      }
:is(:is(:is(html.dark-mode .dashboard) .dashboard-heading) > a):hover,:is(:is(:is(html.dark-mode .dashboard) .dashboard-heading) > a):active,:is(:is(:is(html.dark-mode .dashboard) .dashboard-heading) > a):focus {
          background-color: var(--gray-900);
          border-color: transparent;
        }
:is(:is(html.dark-mode .dashboard) .dashboard-heading) .time-ago-unit {
        color: var(--gray-400);
      }
html.dark-mode .dashboard data {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }
html.dark-mode .dashboard data.list-links ul li a:hover,html.dark-mode .dashboard data.list-links ul li a:focus,html.dark-mode .dashboard data.list-links ul li a:active {
    background-color: var(--scampi-900);
  }
html.dark-mode .dashboard data a.widget,html.dark-mode .dashboard data > div {
    color: var(--gray-200);
  }
html.dark-mode .dashboard data > div a {
    color: var(--scampi-400);
  }
html.dark-mode .dashboard data a.widget b,html.dark-mode .dashboard data > div b {
    color: var(--gray-200);
  }
html.dark-mode .dashboard .card a.btn.btn-link:hover {
    background-color: var(--gray-800);
    border-color: var(--gray-800);
  }
html.dark-mode .card {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }
html.dark-mode .card header,html.dark-mode data header {
    color: var(--gray-200);
  }
html.dark-mode .card header h2,html.dark-mode data header h2 {
    color: var(--gray-200);
  }
html.dark-mode .card header a,html.dark-mode data header a {
    color: var(--scampi-400);
  }
[aria-disabled="true"]:is(html.dark-mode .card header a,html.dark-mode data header a) {
      color: var(--gray-500);
    }
html.dark-mode data.data-check-ins ul li a:hover,html.dark-mode data.data-check-ins ul li a:active,html.dark-mode data.data-check-ins ul li a:focus {
    background-color: var(--scampi-900);
  }
html.dark-mode data.data-check-ins ul li a .progress-stacked {
    background-color: var(--scampi-800);
  }
html.dark-mode data.data-check-ins ul li a .progress-stacked .bg-success.progress-bar {
    background-color: var(--scampi-600);
  }
html.dark-mode .card a.btn-link {
    border-color: transparent;
    color: var(--scampi-400);
  }
html.dark-mode a.inline-link {
    color: var(--scampi-400);
  }
[aria-disabled="true"]:is(html.dark-mode a.inline-link) {
      color: var(--gray-500);
    }
html.dark-mode dialog {
    background-color: var(--gray-900);
    border: 1px solid var(--gray-700);
    color: var(--gray-200);
  }
.svg--light:is(:is(:is(:is(html.dark-mode dialog) div.modal-content) main) svg) {
            display: none;
          }
.svg--dark:is(:is(:is(:is(html.dark-mode dialog) div.modal-content) main) svg) {
            display: block;
          }
.test-invitation:is(:is(html.dark-mode dialog) div.modal-content) main svg.svg--dark path.test-bg {
        fill: #1f2837;
      }
html.dark-mode dialog::backdrop {
    background-color: var(--gray-800);
    opacity: 0.5;
  }
html.dark-mode dialog header,html.dark-mode dialog footer {
    border-color: var(--gray-700);
  }
html.dark-mode .digital-pass-notification {
    color: var(--gray-900);
  }
html.dark-mode .digital-pass-example-apple {
    color: var(--foreground-color, var(--gray-900));
  }
html.dark-mode .dropdown button {
    color: var(--gray-100);
  }
.btn:is(html.dark-mode .dropdown button) {
      border-color: var(--gray-600) !important;
    }
html.dark-mode .btn-close:hover,html.dark-mode .btn-close:active,html.dark-mode .btn-close:focus,html.dark-mode .dropdown button:hover:not([aria-disabled="true"]),html.dark-mode .dropdown button:active:not([aria-disabled="true"]),html.dark-mode .dropdown button:focus:not([aria-disabled="true"]) {
    background-color: black;
    color: var(--purple-400);
  }
:is(html.dark-mode .viewer-area .viewer header) .btn-close:hover,:is(html.dark-mode .viewer-area .viewer header) .btn-close:active,:is(html.dark-mode .viewer-area .viewer header) .btn-close:focus,:is(html.dark-mode .viewer-area .viewer header) .dropdown button:hover:not([aria-disabled="true"]),:is(html.dark-mode .viewer-area .viewer header) .dropdown button:active:not([aria-disabled="true"]),:is(html.dark-mode .viewer-area .viewer header) .dropdown button:focus:not([aria-disabled="true"]) {
      background-color: black;
      color: var(--purple-400);
    }
html.dark-mode .dropdown menu {
    background-color: var(--gray-900);
    border-color: black;
  }
html.dark-mode .dropdown hr {
    background-color: var(--gray-700);
  }
html.dark-mode .dropdown menu li a,html.dark-mode .dropdown menu li button {
    color: var(--gray-200);
  }
html.dark-mode .dropdown menu li a[disabled],html.dark-mode .dropdown menu li a[aria-disabled="true"],html.dark-mode .dropdown menu li button[disabled],html.dark-mode .dropdown menu li button[aria-disabled="true"] {
    color: var(--gray-500);
  }
html.dark-mode .dropdown menu li a:hover:not([aria-disabled="true"]),html.dark-mode .dropdown menu li button:hover:not([aria-disabled="true"]) {
    background-color: black;
    color: var(--purple-400);
  }
html.dark-mode .dropdown menu li a[disabled]:hover,html.dark-mode .dropdown menu li button[disabled]:hover {
    color: var(--gray-500);
  }
html.dark-mode .dropdown-divider {
    border-color: var(--gray-700);
  }
html.dark-mode form footer a:not([class]):hover {
    color: var(--gray-200);
    text-decoration: underline;
  }
html.dark-mode form select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e5e7eb%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  }
html.dark-mode form input,html.dark-mode form textarea {
    background-color: var(--gray-800);
    color: var(--gray-200);
  }
html.dark-mode form input::-moz-placeholder, html.dark-mode form textarea::-moz-placeholder {
    color: var(--gray-400);
  }
html.dark-mode form input::placeholder,html.dark-mode form textarea::placeholder {
    color: var(--gray-400);
  }
html.dark-mode form .hint {
    color: var(--gray-400);
  }
html.dark-mode form input[type="email"],html.dark-mode form input[type="text"],html.dark-mode form input[type="datetime-local"],html.dark-mode form input[type="number"],html.dark-mode form input[type="tel"],html.dark-mode form input[type="password"],html.dark-mode form textarea {
    border-color: var(--gray-600);
  }
html.dark-mode form input[type="email"]:focus,html.dark-mode form input[type="text"]:focus,html.dark-mode form input[type="datetime-local"]:focus,html.dark-mode form input[type="number"]:focus,html.dark-mode form input[type="tel"]:focus,html.dark-mode form input[type="password"]:focus,html.dark-mode form input[type="submit"]:focus,html.dark-mode form textarea:focus,html.dark-mode form button:focus-visible,html.dark-mode form a:focus-visible {
    outline-color: var(--scampi-700);
  }
html.dark-mode form .url-field {
    border-color: var(--gray-600);
  }
html.dark-mode form select {
    background-color: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-200);
  }
html.dark-mode .choices__item.choices__item--choice.is-selected.choices__item--selectable {
    background-color: var(--gray-900);
  }
html.dark-mode .choices .choices__inner,html.dark-mode .choices .choices__list--dropdown,html.dark-mode .choices .choices__list[aria-expanded],html.dark-mode .choices[data-type*="select-one"] .choices__input {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }
html.dark-mode .choices__list--dropdown .choices__item--selectable.is-highlighted,html.dark-mode .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--gray-700);
  }
html.dark-mode .choices[data-type*="select-one"]::after {
    border-color: var(--gray-200) transparent transparent;
  }
html.dark-mode .editor-with-sidebar {
    --border-color: var(--gray-600);
  }
html.dark-mode .hint {
    color: var(--gray-400);
  }
html.dark-mode hr {
    background-color: rgba(0 0 0 / 0.5);
  }
html.dark-mode .html-preview {
    background-color: var(--gray-800);
  }
html.dark-mode .main-nav {
    border-color: var(--gray-700);
  }
html.dark-mode .main-nav footer {
    border-color: var(--gray-600);
  }
html.dark-mode .main-nav main a {
    color: var(--gray-200);
  }
html.dark-mode .main-nav main a[aria-disabled="true"] {
    color: var(--gray-500);
  }
html.dark-mode .main-nav main a:hover:not([aria-disabled="true"]) {
    background-color: var(--gray-800);
  }
html.dark-mode .main-nav main a:visited {
    color: var(--gray-200);
  }
html.dark-mode .main-nav main a.current {
    color: var(--purple-300);
  }
html.dark-mode footer.pagination {
    border-color: var(--gray-700);
  }
html.dark-mode footer.pagination nav {
    border-color: var(--gray-900);
  }
html.dark-mode footer.pagination nav .page + .page {
    border-color: var(--gray-900);
  }
html.dark-mode footer.pagination nav .page.active,html.dark-mode footer.pagination nav a.active {
    background-color: var(--purple-400);
    color: var(--gray-900);
  }
html.dark-mode footer.pagination nav a:hover {
    background-color: var(--gray-900);
  }
:is(html.dark-mode .home) .io-logo svg path {
      fill: var(--gray-200);
    }
:is(html.dark-mode .home) .main-content {
      background: var(--gray-800);
    }
:is(html.dark-mode .home) .main-content .is-required::after {
      color: var(--gray-400);
    }
:is(html.dark-mode .home) .main-content svg.squiggle {
      opacity: 1;
    }
:is(html.dark-mode .home) .main-content input,:is(html.dark-mode .home) .main-content textarea {
      color: var(--gray-900);
    }
html.dark-mode .hint .liquid-variable {
    border-color: transparent;
  }
html.dark-mode .html-preview .devices a {
    background-color: transparent;
    border: 1px solid transparent;
  }
html.dark-mode .html-preview .devices a:hover,html.dark-mode .html-preview .devices a:active,html.dark-mode .html-preview .devices a:focus {
    background-color: black;
  }
html.dark-mode .html-preview .devices a.active {
    border: 1px solid var(--purple-400);
  }
html.dark-mode p.info {
    color: var(--yellow-900);
  }
html.dark-mode .liquid-variable {
    background-color: var(--gray-800);
    border-color: black;
    color: var(--gray-200);
  }
html.dark-mode .list-dropdown {
    border-color: var(--gray-700);
  }
html.dark-mode .list-dropdown:hover {
    border-color: var(--purple-400);
  }
html.dark-mode .list-dropdown button:hover {
    background-color: var(--gray-800);
  }
html.dark-mode .pac-container {
    background-color: var(--gray-700);
    border-color: var(--gray-900);
  }
html.dark-mode .pac-container .pac-item {
    border-color: var(--gray-900);
  }
html.dark-mode .pac-container .pac-item {
    color: var(--gray-400);
  }
html.dark-mode .pac-container .pac-item:hover {
    background-color: var(--gray-900);
  }
html.dark-mode .pac-container .pac-item-query {
    color: var(--gray-200);
  }
html.dark-mode .pagination-info {
    background-color: var(--scampi-900);
    border-color: var(--scampi-900);
    color: var(--gray-200);
  }
html.dark-mode .preview-wrapper .preview {
    color: var(--gray-700);
  }
html.dark-mode .preview-wrapper .preview .btn.btn-primary,html.dark-mode .preview-wrapper .preview .btn.btn-primary:hover {
    background-color: var(--custom-accent-color, var(--scampi-700));
    border-color: var(--custom-accent-color, var(--scampi-700));
    color: var(--custom-accent-color-contrast, white);
  }
html.dark-mode .preview-wrapper .preview .btn.btn-link {
    color: var(--custom-accent-color, var(--scampi-700));
    border-color: transparent;
  }
html.dark-mode .preview-wrapper .preview .btn.btn-link:hover {
    background-color: transparent;
  }
html.dark-mode .profile {
    background-color: var(--gray-800);
    border-color: var(--gray-900);
  }
html.dark-mode .profile .phone-number-verification-field {
    background-color: var(--green-900);
  }
:is(html.dark-mode .profile .phone-number-verification-field) .button-field input {
      border-color: var(--success-border);
    }
:is(html.dark-mode .profile .phone-number-verification-field) .button-field input[type="submit"] {
      background-color: var(--green-900);
    }
:is(:is(html.dark-mode .profile .phone-number-verification-field) .button-field input[type="submit"]):hover {
        background-color: var(--green-800);
        color: var(--green-100);
      }
html.dark-mode .qr.padded {
    background-color: var(--gray-300);
    border-color: black;
  }
html.dark-mode .scanner-setup-list a:hover {
    background-color: var(--gray-800);
  }
html.dark-mode .search-sort-filter {
    border-color: var(--gray-700);
  }
html.dark-mode .search-sort-filter.with-border {
    border-color: var(--gray-700);
  }
html.dark-mode .star-form button {
    color: var(--gray-200);
  }
html.dark-mode .star-form button:hover:not([aria-disabled="true"]) {
    background-color: var(--gray-900);
  }
html.dark-mode table {
    background-color: transparent;
    border-color: var(--gray-700);
    color: var(--gray-200);
  }
html.dark-mode table thead th,html.dark-mode table tfoot th {
    color: var(--gray-200);
    border-color: var(--gray-700);
  }
html.dark-mode table th,html.dark-mode table td {
    border-color: var(--gray-700);
  }
html.dark-mode table.table-checkins td {
    border-color: var(--gray-700);
  }
html.dark-mode .template-editor div.editor div.alert {
    background-color: var(--gray-600);
    border-color: var(--gray-200);
  }
:is(html.dark-mode .template-editor div.editor div.alert) svg {
      color: var(--gray-200);
    }
:is(html.dark-mode .template-editor div.editor div.alert) p.hint {
      color: var(--gray-200);
    }
:is(:is(html.dark-mode .template-editor div.editor div.alert) p.hint) .liquid-variable {
        background-color: var(--gray-800);
      }
html.dark-mode .terms,html.dark-mode .privacy {
    background-color: var(--gray-900);
  }
:is(html.dark-mode .terms,html.dark-mode .privacy) h1,:is(html.dark-mode .terms,html.dark-mode .privacy) h2,:is(html.dark-mode .terms,html.dark-mode .privacy) h3,:is(html.dark-mode .terms,html.dark-mode .privacy) p a {
      color: var(--scampi-400);
    }
:is(html.dark-mode .terms,html.dark-mode .privacy) .terms-header h1 svg path {
      fill: var(--gray-100);
    }
html.dark-mode .terms h2 span,html.dark-mode .content > p span {
    color: var(--scampi-400);
  }
html.dark-mode .test-mode-banner {
    background-color: var(--orange-400);
    color: var(--gray-900);
  }
:is(html.dark-mode .test-mode-banner) .btn {
      background-color: transparent;
      border-color: transparent;
      color: var(--gray-900);
    }
:is(:is(html.dark-mode .test-mode-banner) .btn):hover,:is(:is(html.dark-mode .test-mode-banner) .btn):focus,:is(:is(html.dark-mode .test-mode-banner) .btn):active {
        background-color: transparent;
        border-color: var(--gray-900);
        color: var(--gray-900);
      }
html.dark-mode .test-mode-indicator {
    background: transparent;
    color: var(--orange-400);
    outline-color: var(--orange-400);
  }
html.dark-mode .toggle-lookup-mode {
    color: var(--gray-200);
  }
html.dark-mode .toggle-lookup-mode.test {
    color: var(--orange-400);
  }
html.dark-mode .toggle-lookup-mode:hover {
    background-color: var(--gray-900);
  }
html.dark-mode .theme-chooser .choices .choice:hover {
    outline-color: var(--gray-800);
  }
html.dark-mode .text-green {
    color: var(--green-300);
  }
html.dark-mode .text-red {
    color: var(--red-300);
  }
html.dark-mode .text-yellow {
    color: var(--yellow-300);
  }
html.dark-mode .text-muted {
    color: var(--gray-400);
  }
html.dark-mode .text-warning {
    color: var(--orange-300) !important;
  }
html.dark-mode .viewer-area {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area section dl dd .btn-group form .btn:hover {
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area .viewer .alert.alert--danger {
    background-color: var(--red-900);
    color: var(--red-100);
  }
html.dark-mode .viewer-area .viewer section.main-metadata {
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area .viewer section.section-link div.section-link--primary a {
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area .viewer section.section-link div.section-link--primary a:hover,html.dark-mode .viewer-area .viewer section.section-link div.section-link--primary a:active,html.dark-mode .viewer-area .viewer section.section-link div.section-link--primary a:focus {
    border-color: var(--scampi-500);
  }
:is(html.dark-mode .viewer-area .viewer section.section-link div.section-link--primary a:hover,html.dark-mode .viewer-area .viewer section.section-link div.section-link--primary a:active,html.dark-mode .viewer-area .viewer section.section-link div.section-link--primary a:focus) .fa-chevron-right {
      color: var(--scampi-500);
    }
:is(html.dark-mode .viewer-area .viewer section.section-link div.section-link--secondary a:hover,html.dark-mode .viewer-area .viewer section.section-link div.section-link--secondary a:active,html.dark-mode .viewer-area .viewer section.section-link div.section-link--secondary a:focus) .fa-chevron-right {
      color: var(--scampi-500);
    }
html.dark-mode .viewer-area .viewer section.section-custom-domain ul li + li {
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area .viewer pre {
    background-color: var(--scampi-900);
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area .viewer header {
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area .viewer header.subheader {
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area .viewer section dl dt {
    color: var(--gray-400);
  }
html.dark-mode .viewer-area .viewer-list li + li {
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area .viewer--invite-stats data {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-area .viewer--invite-stats data.list-links ul li a {
    color: var(--gray-200);
  }
html.dark-mode .viewer-area .viewer--invite-stats data.list-links ul li a:hover,html.dark-mode .viewer-area .viewer--invite-stats data.list-links ul li a:active,html.dark-mode .viewer-area .viewer--invite-stats data.list-links ul li a:focus {
    background-color: black;
  }
html.dark-mode .viewer-area .viewer--invite-stats data > div {
    color: var(--gray-200);
  }
html.dark-mode .viewer-area .viewer--invite-stats data > div a {
    color: var(--scampi-400);
  }
html.dark-mode .viewer-area .viewer--invite-stats data > div b {
    color: var(--gray-200);
  }
html.dark-mode .viewer-area .viewer section.section-guests ul li + li {
    border-color: var(--gray-700);
  }
:is(:is(html.dark-mode .viewer-area .viewer section dl dd) a:hover,:is(html.dark-mode .viewer-area .viewer section dl dd) a:active,:is(html.dark-mode .viewer-area .viewer section dl dd) a:focus) .fa-chevron-right {
        color: var(--purple-400);
      }
html.dark-mode .viewer-form {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-form header {
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-form footer {
    border-color: var(--gray-700);
  }
html.dark-mode .viewer-form section {
    border-color: var(--gray-700);
  }
.advanced-settings:is(html.dark-mode .viewer-form details) {
      background: var(--gray-900);
      border: 1px solid var(--gray-600);
    }
.advanced-settings:is(html.dark-mode .viewer-form details) summary {
      background: var(--gray-900);
      color: var(--yellow-600);
    }
html.dark-mode .uppy-field {
    border-color: var(--gray-700);
  }
:is(html.dark-mode .uppy-field) .actions {
      border-color: var(--gray-700);
    }
:is(:is(html.dark-mode .uppy-field) .actions) .btn:not(:last-child) {
        border-right-color: var(--gray-700);
      }
:is(html.dark-mode .uppy-field) .btn {
      background-color: var(--gray-800);
      border-color: var(--gray-700);
      border-left-color: var(--gray-700);
      border-bottom-color: var(--gray-700);
    }
:is(html.dark-mode .uppy-field) .uppy-DragDrop-label {
      color: var(--gray-200);
    }
:is(html.dark-mode .uppy-field) .uppy-DragDrop-note {
      color: var(--gray-400);
    }
html.dark-mode code[data-controller="clipboard"],html.dark-mode .liquid-variable-list pre {
    background-color: var(--gray-700);
  }
html.dark-mode .liquid-variable-list code strong {
    color: var(--purple-400);
  }
html.dark-mode .liquid-variable-list .example {
    background-color: var(--gray-800);
    border: 1px solid var(--gray-900);
  }
:is(html.dark-mode .liquid-variable-list .example) code {
      background-color: var(--gray-900);
    }
html.dark-mode .search-filter-toggle {
    color: var(--gray-200);
  }
:is(html.dark-mode .search-filter-toggle):hover {
      background-color: black;
    }
:is(html.dark-mode .show-import) th.unrecognized-column,:is(html.dark-mode .show-import) td.unrecognized-column {
      background-color: #2c0b0e;
      color: var(--red);
    }
html.dark-mode .tooltip {
    background-color: var(--scampi-900);
  }
html.dark-mode .import-column-list dt {
    border-top: 1px solid var(--gray-700);
  }
:is(html.dark-mode .new-event) .onboarding-header {
      border-color: var(--gray-600);
    }
html.dark-mode .onboarding {
    background-color: var(--gray-700);
  }
:is(html.dark-mode .onboarding) .onboarding-header {
      background-color: var(--gray-700);
      border-color: var(--gray-600);
    }
:is(:is(html.dark-mode .onboarding) .onboarding-header) .next-button.btn.btn-primary:hover {
        background-color: var(--scampi-600);
        border-color: var(--scampi-600);
        color: black;
      }
:is(html.dark-mode .onboarding) .preview-pane {
      background-color: var(--gray-700);
    }
:is(:is(:is(html.dark-mode .onboarding) .preview-pane) .theme-settings-menu) header {
          background-color: var(--gray-900);
          border-bottom: 1px solid var(--gray-700);
        }
:is(:is(:is(html.dark-mode .onboarding) .preview-pane) .preview-window) header {
          background-color: var(--gray-800);
        }
:is(html.dark-mode .preview-window) header.email-preview-header {
      background-color: var(--gray-800) !important;
      border-color: var(--gray-700) !important;
    }
html.dark-mode .customization {
    border-color: var(--gray-700);
  }
:is(html.dark-mode .customization) a {
      color: white;
    }
:is(html.dark-mode .customization) p,:is(html.dark-mode .customization) .description {
      color: var(--gray-400);
    }
:is(:is(html.dark-mode .customization) div.custom-template):hover div.iframe {
          border-color: var(--scampi-500);
        }
:is(html.dark-mode .customization) div.iframe {
      border: 1px solid var(--dark-gray);
    }
:is(html.dark-mode .list-and-editor) .editor {
      border-color: var(--gray-700);
    }
:is(:is(:is(html.dark-mode .list-and-editor) .editor) form) footer {
          border-color: var(--gray-700);
        }
:is(:is(:is(:is(html.dark-mode .list-and-editor) .editor) form) footer) .hint button {
            color: var(--scampi-600);
            font-weight: bold;
          }
:is(:is(:is(:is(:is(html.dark-mode .list-and-editor) .editor) form) footer) .hint button):hover {
              text-decoration: underline;
            }
:is(:is(:is(html.dark-mode .list-and-editor) .file-list) li) a {
          color: var(--gray-400);
        }
:is(:is(:is(:is(html.dark-mode .list-and-editor) .file-list) li) a):hover {
            background-color: var(--gray-900);
          }
.active:is(:is(:is(:is(html.dark-mode .list-and-editor) .file-list) li) a) {
            background-color: black;
          }
:is(html.dark-mode .custom-template-editor) .preview-pane {
      background-color: var(--gray-600);
    }
:is(:is(:is(html.dark-mode .custom-template-editor) .preview-pane) .preview-window) header.email-preview-header {
          background-color: var(--gray-800) !important;
          border-color: var(--gray-700) !important;
        }
:is(html.dark-mode .custom-template-editor) > form {
      border-color: var(--gray-700);
    }
:is(:is(html.dark-mode .custom-template-editor) > form) footer {
        border-color: var(--gray-700);
      }
:is(html.dark-mode .custom-template-editor) .email-preview-header {
      color: var(--gray-200);
    }
:is(html.dark-mode .custom-template-editor) header.web-preview-header {
      background-color: #343439;
    }
:is(:is(html.dark-mode .custom-template-editor) header.web-preview-header) input {
        background-color: #343439;
        border: 1px solid var(--gray-600);
        color: var(--gray-100);
      }
:is(html.dark-mode .billing) .current-plan {
      border-color: var(--gray-600);
    }
:is(:is(html.dark-mode .billing) .current-plan) svg.svg--light {
        display: none;
      }
:is(:is(html.dark-mode .billing) .current-plan) svg.svg--dark {
        display: block;
      }
:is(:is(html.dark-mode .billing) .interval-btn-group-wrapper) .btn-group {
        border-color: var(--gray-900);
      }
:is(:is(html.dark-mode .billing) .interval-btn-group-wrapper) .btn-group > .btn.active {
        color: var(--gray-200);
      }
:is(html.dark-mode .billing-plans) .free > div,:is(html.dark-mode .billing-plans) .free > div dl div {
      border-color: var(--gray-600);
    }
:is(html.dark-mode .billing-plans) .lite > div {
      background-color: var(--scampi-800);
      border-color: black;
      color: var(--gray-200);
    }
:is(html.dark-mode .billing-plans) .lite > div dl div {
      border-color: var(--scampi-600);
    }
:is(:is(html.dark-mode .billing-plans) .billing-plan) .btn.btn-primary {
        color: white;
      }
:is(:is(html.dark-mode .billing-plans) .billing-plan) .btn.btn-current-plan {
        border-color: var(--gray-200);
        color: var(--gray-200);
      }
:is(:is(:is(html.dark-mode .billing-plans) .billing-plan) .btn.btn-current-plan):hover,:is(:is(:is(html.dark-mode .billing-plans) .billing-plan) .btn.btn-current-plan):active,:is(:is(:is(html.dark-mode .billing-plans) .billing-plan) .btn.btn-current-plan):focus {
          background-color: transparent;
        }
:is(html.dark-mode .blank-state) svg.svg--light {
      display: none;
    }
:is(html.dark-mode .blank-state) svg.svg--dark {
      display: block;
    }
:is(html.dark-mode .blank-state) p {
      color: var(--gray-200);
    }
:is(html.dark-mode .blank-state) a.docs-link {
      color: var(--scampi-400);
    }
html.dark-mode .dashboard-onboarding {
    outline-color: var(--gray-700);
  }
.svg--light:is(:is(html.dark-mode .dashboard-onboarding) dl div svg) {
        display: none;
      }
.svg--dark:is(:is(html.dark-mode .dashboard-onboarding) dl div svg) {
        display: block;
      }
:is(:is(:is(html.dark-mode .dashboard-onboarding) form) .btn):hover,:is(:is(:is(html.dark-mode .dashboard-onboarding) form) .btn):active,:is(:is(:is(html.dark-mode .dashboard-onboarding) form) .btn):focus {
          border-color: transparent;
        }
:is(:is(html.dark-mode .help-and-support) main) a {
        border-color: var(--gray-700);
      }
:is(:is(:is(html.dark-mode .help-and-support) main) a):hover,:is(:is(:is(html.dark-mode .help-and-support) main) a):active,:is(:is(:is(html.dark-mode .help-and-support) main) a):focus {
          background-color: var(--gray-800);
        }
:is(:is(:is(html.dark-mode .help-and-support) main) a) span {
          color: var(--scampi-300);
        }
:is(html.dark-mode .viewer-area section dl.cols-two.order-breakdown) dt,:is(html.dark-mode .viewer-area section dl.cols-two.order-breakdown) dd {
      border-color: var(--gray-700);
    }
:is(html.dark-mode .integrations) > div {
      border-color: var(--gray-700);
    }
:is(html.dark-mode .viewer-area.empty article) svg.svg--light {
      display: none;
    }
:is(html.dark-mode .viewer-area.empty article) svg.svg--dark {
      display: block;
    }
html.dark-mode .customer-support {
    background-color: var(--yellow-950);
  }
:is(html.dark-mode .customer-support) .main-nav footer {
      border-color: rgba(217 119 6 0.5);
    }
:is(:is(html.dark-mode .customer-support) nav.main-nav) .dropdown button:hover,:is(:is(html.dark-mode .customer-support) nav.main-nav) .dropdown button:active,:is(:is(html.dark-mode .customer-support) nav.main-nav) .dropdown button:focus {
        background-color: var(--yellow-800);
        color: white;
      }
:is(:is(html.dark-mode .customer-support) nav.main-nav) main a:hover,:is(:is(html.dark-mode .customer-support) nav.main-nav) main a:active,:is(:is(html.dark-mode .customer-support) nav.main-nav) main a:focus {
        background-color: var(--yellow-800);
      }
:is(:is(:is(html.dark-mode .price-and-tax) .fields) .price-field) span.currency_symbol {
          background-color: var(--gray-900);
          border-color: var(--gray-600);
        }
:is(html.dark-mode .price-and-tax) .radio-buttons {
      border-color: var(--gray-600);
    }
:is(html.dark-mode .price-and-tax) .price-breakdown > div {
      background-color: var(--gray-900);
      border-color: var(--gray-600);
      color: var(--gray-400);
    }
:is(:is(html.dark-mode .price-and-tax) .price-breakdown > div) span {
        color: var(--gray-200);
      }
:is(html.dark-mode ul.sortable) li {
      border-color: rgba(0 0 0 / 0.5);
    }
:is(html.dark-mode ul.sortable) .fa-bars:hover {
      color: white;
    }
html.dark-mode .subform a {
    color: var(--purple-300);
  }
html.dark-mode .nav-tabs a[aria-selected="true"] {
    background-color: var(--gray-900);
  }
html.dark-mode .admin-area .header-banner {
    background-color: var(--yellow-900);
  }
:is(html.dark-mode .admin-area .header-banner) .btn.btn-default {
      background-color: var(--yellow-600);
      border-color: var(--yellow-600);
      color: var(--gray-200);
    }
:is(:is(html.dark-mode .admin-area .header-banner) .btn.btn-default):hover,:is(:is(html.dark-mode .admin-area .header-banner) .btn.btn-default):active,:is(:is(html.dark-mode .admin-area .header-banner) .btn.btn-default):focus {
        background-color: var(--yellow-700);
        border-color: var(--yellow-700);
        color: var(--gray-200);
      }
html[data-color-scheme="system"].dark-mode
  .dropdown
  button.show-with-system-color-scheme {
  color: var(--purple-400);
}
.swatch {
  --size: 18px;

  height: var(--size);
  min-height: unset;
  min-width: unset;
  padding: 0;
  width: var(--size);
  background-color: var(--palette-color, transparent);
  border-radius: 0.25rem;
  border: 1px solid var(--border-color, transparent);
  color: var(--contrast-color, black);
  display: inline-block;
  font-family: monospace;
  text-align: center;
  flex-shrink: 0;
}
.swatch.no-color {
    background-image: repeating-linear-gradient(
      -45deg,
      #ddd,
      #ddd 5px,
      #eee 5px,
      #eee 10px
    );
    background-size: cover;
  }
.swatch.transparent {
    background-color: inherit;
  }
.swatch.with-text {
    height: auto;
    min-height: 15px;
    min-width: 80px;
    padding: 0.2rem 0.5rem;
    width: auto;
  }
.swatch input {
    display: none;
  }
fieldset.palette-colors div {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    width: 100%;
  }
fieldset.palette-colors span {
    border-radius: 5px;
    display: flex;
    padding: 5px;
  }
fieldset.palette-colors span:has(input:checked) {
    background-color: var(--medium-blue);
  }
fieldset.palette-colors label {
    cursor: pointer;
    margin: 0;
  }
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Prevent font size inflation */
html {
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}
html @media only screen and  (min-width: 768px)  {
    overflow: hidden;
  }
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
/* Set core body defaults */
body {
  min-height: 100dvh;
  line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentcolor;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
.text-green {
  color: var(--green);
}
.text-red {
  color: var(--red);
}
.text-yellow {
  color: var(--yellow);
}
.text-muted {
  color: var(--gray-500);
}
h2 {
  font-size: 1.5rem;
}
h2:has(+ p) {
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.125rem;
}
h3:has(+ p) {
  margin-bottom: 1rem;
}
p:has(+ form),
p:has(+ p) {
  margin-bottom: 1rem;
}
p.text-center {
  text-align: center;
}
p.text-wrap-pretty {
  text-wrap: pretty;
}
.mono {
  font-family: monospace;
  letter-spacing: 1px;
}
.text-sm {
  font-size: 0.875rem;
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.125rem;
}
.text-xl {
  font-size: 3rem;
}
.text-normal {
  font-weight: normal;
}
.text-gray-500 {
  color: var(--gray-500);
}
.text-orange {
  color: var(--orange-500);
}
.bold {
  font-weight: bold;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-danger {
  color: var(--danger-color);
}
.text-info {
  color: var(--info-color);
}
.text-warning {
  color: var(--warning-color) !important;
}
.text-expired {
  color: var(--yellow-600) !important;
}
.text-success {
  color: var(--success-color);
}
.text-transparent {
  color: rgb(0 0 0 / 0%) !important;
}
:not(ul).code {
  background-color: rgb(0 0 0 / 10%);
  border-radius: 0.25rem;
  display: inline-block;
  font-family: monospace;
  letter-spacing: 1px;
  padding: 0 0.5rem;
}
pre.wrap-nicely {
  white-space: break-spaces;
}
.block {
  display: block;
}
.inline-flex {
  display: inline-flex;
}
.invisible {
  visibility: hidden;
}
.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-col {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
.align-center {
  align-items: center;
}
.align-baseline {
  align-items: baseline;
}
.align-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: end;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-8 {
  gap: 2rem;
}
.relative {
  position: relative;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.text-sm {
  font-size: 0.825rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.m-0 {
  margin: 0 !important;
}
.my-0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
.my-2 {
  margin-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
}
.my-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.my-6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-4 {
  margin-top: 1rem !important;
}
.mt-8 {
  margin-top: 2rem !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-4 {
  margin-bottom: 1rem !important;
}
.mb-8 {
  margin-bottom: 2rem !important;
}
.ml-4 {
  margin-left: 1rem !important;
}
.ml-6 {
  margin-left: 1.5rem !important;
}
.ml-8 {
  margin-left: 2rem !important;
}
.ml-7 {
  margin-left: 1.75rem !important;
}
.mr-4 {
  margin-right: 1rem !important;
}
.p-0 {
  padding: 0 !important;
}
.p-2 {
  padding: 0.5rem !important;
}
.p-4 {
  padding: 1rem !important;
}
.pl-0 {
  padding-left: 0 !important;
}
.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.py-2 {
  padding-bottom: 0.5rem !important;
  padding-top: 0.5rem !important;
}
.py-4 {
  padding-bottom: 1rem !important;
  padding-top: 1rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pb-4 {
  padding-bottom: 1rem !important;
}
.border {
  border: 1px solid var(--gray-300) !important;
}
.dark-mode .border {
    border: 1px solid var(--gray-600) !important;
  }
.border-t {
  border-top: 1px solid var(--gray-300) !important;
}
.border-b {
  border-bottom: 1px solid var(--gray-300) !important;
}
.rounded {
  border-radius: 0.25rem;
}
.block {
  display: block;
}
.align-baseline {
  align-items: baseline;
}
[v-cloak] {
  display: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
a[disabled],
button[disabled] {
  color: var(--gray-400);
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.hidden {
  display: none !important;
}
.visually-hidden {
  visibility: hidden !important;
}
.not-ready-for-launch {
  display: none !important;
}
.w-full {
  width: 100%;
}
.nowrap {
  white-space: nowrap;
}
.cursor-pointer {
  cursor: pointer;
}
a[aria-disabled="true"],
button[aria-disabled="true"] {
  color: var(--gray-400);
  cursor: default;
}
[aria-hidden="true"] {
  display: none;
}
[aria-hidden="false"] {
  display: block;
}
.pre-wrap {
  white-space: pre-wrap;
}
pre {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 0.25rem;
  display: inline-block;
  margin: 0;
  padding: 0.1rem 0.25rem;
}
code {
  display: block;
  overflow: hidden;
  word-break: break-all;
}
code.inline {
    display: inline;
    background-color: inherit;
  }
:root {
  --card-padding: 0.75rem;
  --card-radius: 8px;
  --card-width: 845px;
  --text-xxs: 0.625rem; /* 10px */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
}

/*# sourceMappingURL=/assets/application-base-767200aa.css.map */