/* Dark mode - load last to override other styles */
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);
}

/*# sourceMappingURL=/assets/application-dark-mode-d71c03f6.css.map */