/* Debug */
#wsf-debug {
  --background-color-default: #ffffff;
  --color-default: #000000;
  --color-default-light: #a3a3a3;
  --color-default-lighter: #cccccc;
  --color-default-lightest: #f3f3f3;
  --background-color-success: #f4fdf7;
  --color-success: #0c3614;
  --background-color-information: #edf1f8;
  --color-information: #124477;
  --background-color-warning: #fffce6;
  --color-warning: #5d3c00;
  --background-color-danger: #fff0f0;
  --color-danger: #ff0000;
  --tab-background-color: #e5e5e5;
  --tab-color: #5a5a5a;
  --tab-active-color: #333333;
  --table-border-color: #dadada;
}

@media (prefers-color-scheme: dark) {
  #wsf-debug {
    --background-color-default: #242424;
    --color-default: #ababab;
    --color-default-light: #a3a3a3;
    --color-default-lighter: #3d3d3d;
    --color-default-lightest: #333333;
    --background-color-success: #0c3614;
    --color-success: #f4fdf7;
    --background-color-information: #124477;
    --color-information: #edf1f8;
    --background-color-warning: #332b00;
    --color-warning: #ffde9f;
    --background-color-danger: #290000;
    --color-danger: #ff8180;
    --tab-background-color: #000000;
    --tab-color: #a5a5a5;
    --tab-active-color: #eaeaea;
    --table-border-color: #3a3a3a;
  }
}

.wsf-form-identify {
  outline: 2px dashed var(--color-information);
}

#wsf-debug div, #wsf-debug span, #wsf-debug applet, #wsf-debug object, #wsf-debug iframe,
#wsf-debug h1, #wsf-debug h2, #wsf-debug h3, #wsf-debug h4, #wsf-debug h5, #wsf-debug h6, #wsf-debug p, #wsf-debug blockquote, #wsf-debug pre,
#wsf-debug a, #wsf-debug abbr, #wsf-debug acronym, #wsf-debug address, #wsf-debug big, #wsf-debug cite, #wsf-debug code,
#wsf-debug del, #wsf-debug dfn, #wsf-debug em, #wsf-debug img, #wsf-debug ins, #wsf-debug kbd, #wsf-debug q, #wsf-debug s, #wsf-debug samp,
#wsf-debug small, #wsf-debug strike, #wsf-debug strong, #wsf-debug sub, #wsf-debug sup, #wsf-debug tt, #wsf-debug var,
#wsf-debug b, #wsf-debug u, #wsf-debug i, #wsf-debug center,
#wsf-debug dl, #wsf-debug dt, #wsf-debug dd, #wsf-debug ol, #wsf-debug ul, #wsf-debug li,
#wsf-debug fieldset, #wsf-debug form, #wsf-debug label, #wsf-debug legend,
#wsf-debug table, #wsf-debug caption, #wsf-debug tbody, #wsf-debug tfoot, #wsf-debug thead, #wsf-debug tr, #wsf-debug th, #wsf-debug td,
#wsf-debug article, #wsf-debug aside, #wsf-debug canvas, #wsf-debug details, #wsf-debug embed,
#wsf-debug figure, #wsf-debug figcaption, #wsf-debug footer, #wsf-debug header, #wsf-debug hgroup,
#wsf-debug menu, #wsf-debug nav, #wsf-debug output, #wsf-debug ruby, #wsf-debug section, #wsf-debug summary,
#wsf-debug time, #wsf-debug mark, #wsf-debug audio, #wsf-debug video {
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  font-variant: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  text-decoration: inherit;
  text-transform: inherit;
  vertical-align: inherit;
}

#wsf-debug article, #wsf-debug aside, #wsf-debug details, #wsf-debug figcaption, #wsf-debug figure,
#wsf-debug footer, #wsf-debug header, #wsf-debug hgroup, #wsf-debug menu, #wsf-debug nav, #wsf-debug section {
  display: block;
}

#wsf-debug ol, #wsf-debug ul {
  list-style: none;
}

#wsf-debug blockquote, #wsf-debug q {
  quotes: none;
}

#wsf-debug blockquote:before, #wsf-debug blockquote:after,
#wsf-debug q:before, #wsf-debug q:after {
  content: '';
  content: none;
}

#wsf-debug table {
  border-collapse: collapse;
  border-spacing: 0;
}

#wsf-debug {
  background-color: var(--background-color-default);
  bottom: 0;
  color: var(--color-default);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-variant: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  left: 0;
  position: fixed;
  text-decoration: none;
  text-transform: none;
  width: 100%;
  z-index: 9999999;
}

#wsf-debug *, #wsf-debug *:before, #wsf-debug *:after {
  box-sizing: border-box;
}

#wsf-debug i {
  font-style: italic;
}

#wsf-debug strong {
  font-weight: bold;
}

#wsf-debug a:focus {
  outline: 0;
}

#wsf-debug ul {
  font-size: 12px;
}

#wsf-debug table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  border-bottom: 1px solid var(--table-border-color);
  width: 100%;
}

#wsf-debug table tr th, #wsf-debug table tr td {
  font-family: Menlo, monospace;
  font-size: 11px;
  text-align: left;
}

#wsf-debug thead {
  background-color: var(--color-default-lightest);
  border: none;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
}

#wsf-debug thead + tbody:before {
  content: '';
  display: block;
  height: 19px;
}

#wsf-debug tr.wsf-audit-text td,
#wsf-debug tr.wsf-audit-calc td,
#wsf-debug tr.wsf-audit-conditional td {
  background-color: var(--background-color-warning);
  color: var(--color-warning);
}

#wsf-debug tr.wsf-audit-analytics td,
#wsf-debug tr.wsf-audit-payment td,
#wsf-debug tr.wsf-audit-ecommerce td,
#wsf-debug tr.wsf-audit-duplicate-protect td,
#wsf-debug tr.wsf-audit-spam-protect td,
#wsf-debug tr.wsf-audit-action td {
  background-color: var(--background-color-success);
  color: var(--color-success);
}

#wsf-debug tr.wsf-audit-event td {
  background-color: var(--background-color-information);
  color: var(--color-information);
}

#wsf-debug tr.wsf-audit-error-parse-variables td,
#wsf-debug tr.wsf-audit-error-ecommerce td {
  background-color: var(--background-color-danger);
  color: var(--color-danger);
}

#wsf-debug th, #wsf-debug td {
  padding: 3px;
}

#wsf-debug th {
  background-color: var(--color-default-lightest);
  border-left: 1px solid var(--table-border-color);
  text-align: left;
}

#wsf-debug th:first-child {
  width: 180px;
}

#wsf-debug th:last-child {
  width: calc(100% - 180px);
}

#wsf-debug td {
  background-color: var(--background-color-default);
  border-left: 1px solid var(--table-border-color);
}

#wsf-debug td:first-child {
  width: 180px;
}

#wsf-debug tr + tr th, #wsf-debug tr + tr td {
  border-top: 1px solid var(--table-border-color);
}

#wsf-debug .wsf-debug-table-full table {
  width: 100%;
}

#wsf-debug .wsf-debug-table-full th:first-child {
  width: 160px;
}

#wsf-debug .wsf-debug-publish-pending {
  background-color: #3D7DD5;
  border-radius: 0;
  color: var(--background-color-default);
  font-size: 10px;
  padding: 1px 4px;
}

#wsf-debug #wsf-debug-nav-wrapper {
  background-color: var(--color-default-lightest);
  border-bottom: 1px solid var(--color-default-lighter);
  border-top: 1px solid var(--color-default-lighter);
  cursor: ns-resize;
}

#wsf-debug #wsf-debug-nav {
  display: inline-block;
  line-height: 28px;
  margin: 0 0 0 69px;
  height: 28px;
}

#wsf-debug #wsf-debug-nav li {
  display: inline-block;
  cursor: pointer;
  height: 28px;
  overflow-y: visible;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#wsf-debug #wsf-debug-nav li a {
  color: var(--tab-color);
  cursor: pointer;
  display: block;
  height: 28px;
  padding: 0 10px;
  text-align: center;
  text-decoration: none;
  transition: none;
}

#wsf-debug #wsf-debug-nav li:hover a {
  background-color: var(--tab-background-color);
  color: var(--tab-active-color);
}

#wsf-debug #wsf-debug-nav li.wsf-tab-active a {
  background-color: var(--tab-background-color);
  border-bottom: 2px solid var(--color-information);
  color: var(--tab-active-color);
}

#wsf-debug .wsf-debug-logo {
  display: block;
  left: 0;
  padding: 7px 8px;
  position: absolute;
  top: 0;
}

#wsf-debug .wsf-debug-logo svg {
  height: 15px;
  width: 53px;
}

@media (prefers-color-scheme: dark) {
  #wsf-debug .wsf-debug-logo svg path {
    fill: #FFFFFF;
  }
}

#wsf-debug .wsf-debug-minimize {
  cursor: pointer;
  position: absolute;
  right: 44px;
  top: 6px;
}

#wsf-debug .wsf-debug-minimize path {
  fill: var(--tab-color);
}

#wsf-debug .wsf-debug-minimize:hover path {
  fill: var(--tab-active-color);
}

#wsf-debug .wsf-debug-restore {
  cursor: pointer;
  position: absolute;
  right: 24px;
  top: 6px;
}

#wsf-debug .wsf-debug-restore path {
  fill: var(--tab-color);
}

#wsf-debug .wsf-debug-restore:hover path {
  fill: var(--tab-active-color);
}

#wsf-debug .wsf-debug-close {
  cursor: pointer;
  position: absolute;
  right: 4px;
  top: 6px;
}

#wsf-debug .wsf-debug-close path {
  fill: var(--tab-color);
}

#wsf-debug .wsf-debug-close:hover path {
  fill: var(--tab-active-color);
}

#wsf-debug .wsf-debug-instance-helpers li {
  display: inline-block;
}

#wsf-debug .wsf-debug-nav-sub {
  background-color: var(--color-default-lightest);
  border-bottom: 1px solid var(--color-default-lighter);
  height: 28px;
  line-height: 26px;
  padding-top: 2px;
}

#wsf-debug .wsf-debug-nav-sub li {
  cursor: pointer;
  display: inline-block;
  height: 28px;
  overflow-y: visible;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#wsf-debug .wsf-debug-nav-sub li a {
  color: var(--tab-color);
  cursor: pointer;
  display: block;
  height: 24px;
  padding: 0 10px;
  text-align: center;
  text-decoration: none;
  transition: none;
}

#wsf-debug .wsf-debug-nav-sub li:hover a {
  background-color: var(--tab-background-color);
  color: var(--tab-active-color);
}

#wsf-debug .wsf-debug-nav-sub li.wsf-tab-active a {
  background-color: var(--background-color-default);
  border-left: 1px solid var(--color-default-lighter);
  border-right: 1px solid var(--color-default-lighter);
  border-top: 1px solid var(--color-default-lighter);
  color: var(--tab-active-color);
  height: 26px;
  padding: 0 9px;
}

#wsf-debug .wsf-debug-instance-toolbar {
  border-bottom: 1px solid var(--table-border-color);
  overflow: hidden;
}

#wsf-debug .wsf-debug-instance-toolbar li {
  cursor: pointer;
  display: inline-block;
  padding: 4px 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#wsf-debug .wsf-debug-instance-toolbar li svg {
  cursor: pointer;
  height: 16px;
  vertical-align: text-bottom;
  width: 16px;
  display: inline-block;
}

#wsf-debug .wsf-debug-instance-toolbar li a,
#wsf-debug .wsf-debug-instance-toolbar li [data-action] {
  color: var(--tab-color);
  transition: none;
}

#wsf-debug .wsf-debug-instance-toolbar li a:hover,
#wsf-debug .wsf-debug-instance-toolbar li [data-action]:hover {
  color: var(--tab-active-color);
}

#wsf-debug .wsf-debug-instance-info-action {
  display: inline-block;
  margin-left: 5px;
}

#wsf-debug .wsf-debug-instance-info-action svg {
  cursor: pointer;
  height: 12px;
  vertical-align: text-top;
  width: 12px;
}

#wsf-debug .wsf-debug-instance-toolbar li svg path,
#wsf-debug .wsf-debug-instance-info-action svg path {
  fill: var(--tab-color);
  transition: none;
}

#wsf-debug .wsf-debug-instance-toolbar li:hover svg path,
#wsf-debug .wsf-debug-instance-info-action:hover svg path {
  fill: var(--tab-active-color);
}

#wsf-debug .wsf-debug-instance-panel {
  overflow-y: scroll;
}

.wsf-debug-scroll-lock {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}