@charset "UTF-8";
/***Variables***/
/***General***/
html,
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* jQuery Mobile's popup widget temporarily switches the page to
   position:relative when opening (e.g. the permalink share popup), which
   pulls its otherwise-clipped tall diagram content into document flow and
   causes a scrollbar + huge empty space. Keep the page absolutely positioned. */
#viewer-page.ui-page {
  position: absolute !important;
}

#loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: 900;
  padding-top: 5em;
  background-color: #FFF;
  z-index: 1000;
}
#loading div {
  padding-top: 5em;
}

/* Keep the navy banner visible immediately (no cover-then-fade flash) —
   only the content area below it shows the loading spinner. */
#loading.has-banner {
  top: 59px;
  height: auto;
  bottom: 0;
}

p.ui-content.error-message {
  min-width: 10em;
  text-align: center;
}

.schema-version {
  padding-left: 3px;
  font-size: 0.7em;
  font-weight: 500;
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

.readonly-badge {
  display: inline-block;
  position: relative;
  top: -2px;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #cbd5e1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.demo-badge {
  display: inline-block;
  position: relative;
  top: -2px;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(203, 213, 225, 0.09);
  border: 1px dashed rgba(203, 213, 225, 0.35);
  color: rgba(203, 213, 225, 0.65);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Main viewer header — match the front page (schema list) navy banner so both
   views look like the same product: same color, same height. .md-navbar is
   nested inside .ui-panel-wrapper (push panel support), not a direct child. */
#viewer-page .md-navbar {
  background: var(--banner-bg);
  border-color: var(--banner-bg);
  padding-left: 2rem;
  padding-right: 2rem;
  /* #main-body comes after .md-navbar in the DOM and is also positioned, so
     without this the diagram SVG paints over the banner and swallows clicks
     on the search dropdown / legend popup that overflow below the header. */
  z-index: 10;
}

/* The Legend popup is non-dismissible (stays open until the info button is
   clicked again). jQM still renders a full-viewport screen behind it
   (#legend-popup-screen) to catch outside taps, which — being non-dismissible —
   otherwise BLOCKS all clicks on the rest of the page (schema tree, header
   buttons, etc.), turning it into an accidental modal. Since we control
   opening/closing entirely via our own click handler on #legend-info-btn (not
   via outside taps), the screen only needs to exist visually; let clicks pass
   straight through it so the app stays fully usable while the popup is open. */
#legend-popup-screen {
  pointer-events: none;
}

#legend-info-btn {
  /* jQM auto-tags header buttons .ui-btn-left/.ui-btn-right by DOM order and
     sets its own left/width, which silently wins over a plain `right` value
     (CSS abspos over-constraint rule) — force our own side with !important. */
  position: absolute !important;
  top: 50% !important;
  left: auto !important;
  right: 2rem !important;
  transform: translateY(-50%);
}

#viewer-page .md-navbar #viewer-title {
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;
  text-shadow: none;
  text-align: left;
  margin: 0;
  padding-top: 0.775em;
  padding-bottom: 0.775em;
}

#viewer-page .md-navbar .ui-btn {
  background: transparent !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: #f8fafc !important;
  text-shadow: none !important;
}

#viewer-page .md-navbar .ui-btn:hover,
#viewer-page .md-navbar .ui-btn:focus,
#viewer-page .md-navbar .ui-btn:active {
  background: rgba(148, 163, 184, 0.16) !important;
  border-color: rgba(148, 163, 184, 0.55) !important;
  color: #f8fafc !important;
}

/******Viewer*******/
#viewer-page {
  background: var(--pt-bg-f8fafc);
}

/* The jQM panel wrapper sits behind #viewer-page during the push
   transition and can peek through at the edges with its own default
   gray (set via a more specific jQM theme selector), so force it to match. */
.ui-panel-wrapper {
  background: var(--pt-bg-f8fafc) !important;
}

#main-body {
  position: relative;
}

#schema-path {
  font-weight: 400;
  font-size: 0.85rem;
  padding: 0.5em 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Center the permalink (+ optional last-modified line) vertically within
     the footer bar, rather than letting it sit flush against the top. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The path and its copy button on one line. */
.schema-path-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.schema-path-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  /* As the panel title's copy button: shown while the pointer is over the
     path, while focused, and for a moment after a copy. */
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.schema-path-line:hover .schema-path-copy,
.schema-path-copy:focus-visible,
.schema-path-copy.copied {
  opacity: 1;
}

.schema-path-copy[hidden] {
  display: none;
}

.schema-path-copy:hover,
.schema-path-copy:focus-visible {
  background: rgba(148, 163, 184, 0.22);
  color: #1e293b;
  outline: none;
}

.schema-path-copy.copied {
  color: #16a34a;
}

.schema-path-copy svg {
  display: block;
  pointer-events: none;
}

/* The path is a plain link, not jQuery Mobile's bold one. */
#schema-path #permalink {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

#jsv-last-modified-info:not(:empty) {
  margin-top: 6px;
}

#zoom-controls {
  position: absolute;
  top: 15px;
  left: 10px;
}

#legend-container {
  position: absolute;
  top: 50%;
  right: calc(2rem + 42px);
  transform: translateY(-50%);
  width: 200px;
  font-size: 0.9em;
}

/* The search results. The list moves under <body> and is placed under the
   search box by placeSearchResults (json-schema-viewer.js), above the info
   panel and jQuery Mobile's popups such as the legend; it grows leftwards
   from the box's right edge, no further than 12px short of the panel or the
   window. It keeps the look it had in the banner: the banner's font and
   flat rows on a white card. */
#search-result {
  position: fixed;
  z-index: 1200;
  width: max-content;
  max-width: 640px;
  margin: 0;
  /* jQM listview has no opaque background of its own, so without this the
     diagram behind it shows through the dropdown once it overlaps it. */
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  /* Each result row (name + description) is ~49px tall; this fits at
     least 10 rows before the list needs to scroll. */
  max-height: 500px;
  font-size: 14.4px;
  font-weight: 700;
}

#search-result li > .ui-btn {
  font-size: 12.5px;
  background: transparent !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: #1e293b !important;
  text-shadow: none !important;
}

#search-result.is-dismissed {
  display: none;
}

#search-result li > .ui-btn:hover,
#search-result li > .ui-btn:focus,
#search-result li > .ui-btn:active {
  background: rgba(148, 163, 184, 0.16) !important;
  border-color: rgba(148, 163, 184, 0.55) !important;
}

.search-result-name {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-desc {
  display: block;
  font-size: 0.78em;
  color: #64748b;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#jsv-tree {
  display: block;
}

.node {
  cursor: pointer;
}

.overlay {
  background-color: inherit;
}

.node circle,
#legend-popup circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node circle.collapsed,
#legend-popup circle.collapsed {
  fill: lightsteelblue;
}

.node .abstract,
#legend-popup .abstract {
  font-style: italic;
}

.node.label {
  cursor: default;
}

.node.label circle,
.node.label circle:hover {
  stroke: #ccc;
  stroke-width: 1.5px;
}

.node text,
.item-text {
  text-shadow: none;
}

.node text {
  font-size: 14px;
  font-family: "Courier New", monospace;
}

.node text:hover {
  text-decoration: underline;
}

.node.label text:hover {
  text-decoration: none;
}

.node.focus circle,
#legend-popup .focus circle {
  stroke: #0ECC43;
  stroke-width: 2px;
}

.node circle:hover,
.focus circle:hover {
  stroke-width: 3px;
}

.focus-box {
  display: none;
}

.focus .focus-box {
  display: inline;
  fill: none;
  stroke: #0ECC43;
  stroke-width: 1.5px;
}

.needs-review circle,
#legend-popup .needs-review circle {
  stroke: #dc2626;
}

.node.focus.needs-review circle,
#legend-popup .focus.needs-review circle {
  stroke: #dc2626;
}

.deprecated text {
  fill: #777;
  text-decoration: line-through;
  opacity: 0.5;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

#info-panel .ui-title {
  margin: 0 20%;
}

#info-panel .info-tab {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Prevent review content flash before tabs initialize. */
#info-tab-review.info-tab {
  display: none;
}

div#info-tab-def.info-tab,
#info-panel .info-tab pre {
  overflow: auto;
}

/* Schema JSON flows naturally; the tab content area provides the single scroll
   while the header and tabs stay fixed. */
#info-panel #info-tab-schema.info-tab {
  padding-bottom: 0;
}

#info-panel #info-tab-schema pre {
  max-height: none;
  overflow: visible;
}

#info-panel .info-tab .highlight {
  color: var(--pt-fg-008000);
  font-weight: 900;
}

/*****Validator*****/
#textarea-json {
  height: auto !important;
  overflow-y: auto;
}

#validator-page {
  height: 100%;
}

#validator-page .section {
  padding: 1em;
}

#validator-page .drag {
  background-color: #CBFF8B;
}

#validation-results {
  background-color: #CBFCCB;
}

#validation-results.error {
  background-color: #FFE3E3;
}

/*****Buttons******/
.ui-icon-github:after {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAh3pUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjadY7LDcMwDEPvmiIj6GfKGqcIEqAbdPzIcAyf+g4SQQgU6fp9bzoGwkreoiMBLjw99VOi88SYRVnGrjl5t0kp3TaZToHswb4P/fUXzdBxh0eg4cSpla6XiWnNekQjlUeN3CHiq9Eff7V4AEBcLBcPpWcfAAAL6GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAtRXhpdjIiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIKICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIKICAgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNTE3OEEyQTk5QTAxMUUyOUExNUJDMTA0NkE4OTA0RCIKICAgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNTE3OEEyQjk5QTAxMUUyOUExNUJDMTA0NkE4OTA0RCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjIwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMjAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMSIKICAgdGlmZjpJbWFnZUhlaWdodD0iMjAiPgogICA8eG1wTU06RGVyaXZlZEZyb20KICAgIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTUxNzhBMjg5OUEwMTFFMjlBMTVCQzEwNDZBODkwNEQiCiAgICBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTI5OTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz4j0Ue0AAAABHNCSVQICAgIfAhkiAAAAkhJREFUOMuN1MGLVXUUB/DPvW808T5zDN57puSkmxTDClpkIIaFm2na6KJN7RKFVgq6EAmpqNBFEdQ/oK1qE6QoERKCEg66KERhCCrU+66E1dw3PadRF50Lt+sQ7wsX7u/8fuf7O+f8vuckFkGv030SL+M1PIc1sZVjGqdxFjN50f+Pb9IgWo4pHMImLLM47uI6juPLvOiXDxH2Ot2VeBd78IjRcBcnsT8v+negVYvsA7yFFAMsbWZQw33Mhv8WrGpn2flyUA5b0M6yXRHdMnyLw7iDpzHEb/gdS4LwRATQxuYg/bUclNNJr9PdgK/wbBx+D+9EpF38FakJwkdRYB4H8VHsXcPkGF6JB6hSWQF50f8HNxqpDiPVqu4rwifBeuxMQxrVI9zGN7g34qOcwc34X4qpNHRWYQbnm9r6H1zCT7X1Myl6NUORF/25Udnyov836rf30saZ8V6nm45KGGdX1W0pbtXWqzHR63RH5VwbX4VbKS7WDBM1cY+CN7Gxtv5hDKcwGboqsC/S+SIE/Wde9O+FLcE4Hsdu7K8pZIjTYzE1fsQT+BhbYzi8ge9wIOQkNPoJtsf5pKGQM2MRxfvRTm9HGgmewtXolApz0efrGqkP8CF+aZWDUjvLfo7bX4r6HcXXOIeyHPw7ndpZdh8vYlujez7D53nRn29BOSgX2ln2fUS2F6/i+Zgml2uECXbUCGfxKY5U+k1rIh3iGF7HH1GnDYuMsIUow6Uoz9HwfXhi1wT7GF6I4XClasXQ55aQ1wXcbrbpA0Q6r3xz6o6vAAAAAElFTkSuQmCC);
  background-size: 20px 20px;
  background-color: var(--pt-bg-f5f5f5);
}

/*****JQM Overrides*****/
.ui-icon-loading {
  background: none !important;
}

.ui-mini {
  margin: 0;
}

/*

Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>

*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: var(--pt-bg-f0f0f0);
  -webkit-text-size-adjust: none;
}

.hljs,
.hljs-subst,
.hljs-tag .hljs-title,
.nginx .hljs-title {
  color: var(--pt-fg-000000);
}

.hljs-string,
.hljs-title,
.hljs-constant,
.hljs-parent,
.hljs-tag .hljs-value,
.hljs-rules .hljs-value,
.hljs-preprocessor,
.hljs-pragma,
.haml .hljs-symbol,
.ruby .hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.hljs-addition,
.hljs-flow,
.hljs-stream,
.bash .hljs-variable,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.tex .hljs-special,
.erlang_repl .hljs-function_or_atom,
.asciidoc .hljs-header,
.markdown .hljs-header,
.coffeescript .hljs-attribute {
  color: var(--pt-fg-880000);
}

.smartquote,
.hljs-comment,
.hljs-annotation,
.hljs-template_comment,
.diff .hljs-header,
.hljs-chunk,
.asciidoc .hljs-blockquote,
.markdown .hljs-blockquote {
  color: var(--pt-fg-888888);
}

.hljs-number,
.hljs-date,
.hljs-regexp,
.hljs-literal,
.hljs-hexcolor,
.smalltalk .hljs-symbol,
.smalltalk .hljs-char,
.go .hljs-constant,
.hljs-change,
.lasso .hljs-variable,
.makefile .hljs-variable,
.asciidoc .hljs-bullet,
.markdown .hljs-bullet,
.asciidoc .hljs-link_url,
.markdown .hljs-link_url {
  color: var(--pt-fg-008800);
}

.hljs-label,
.hljs-javadoc,
.ruby .hljs-string,
.hljs-decorator,
.hljs-filter .hljs-argument,
.hljs-localvars,
.hljs-array,
.hljs-attr_selector,
.hljs-important,
.hljs-pseudo,
.hljs-pi,
.haml .hljs-bullet,
.hljs-doctype,
.hljs-deletion,
.hljs-envvar,
.hljs-shebang,
.apache .hljs-sqbracket,
.nginx .hljs-built_in,
.tex .hljs-formula,
.erlang_repl .hljs-reserved,
.hljs-prompt,
.asciidoc .hljs-link_label,
.markdown .hljs-link_label,
.vhdl .hljs-attribute,
.clojure .hljs-attribute,
.asciidoc .hljs-attribute,
.lasso .hljs-attribute,
.coffeescript .hljs-property,
.hljs-phony {
  color: var(--pt-fg-8888ff);
}

.hljs-keyword,
.hljs-id,
.hljs-title,
.hljs-built_in,
.css .hljs-tag,
.hljs-javadoctag,
.hljs-phpdoc,
.hljs-dartdoc,
.hljs-yardoctag,
.smalltalk .hljs-class,
.hljs-winutils,
.bash .hljs-variable,
.apache .hljs-tag,
.hljs-type,
.hljs-typename,
.tex .hljs-command,
.asciidoc .hljs-strong,
.markdown .hljs-strong,
.hljs-request,
.hljs-status {
  font-weight: bold;
}

.asciidoc .hljs-emphasis,
.markdown .hljs-emphasis {
  font-style: italic;
}

.nginx .hljs-built_in {
  font-weight: normal;
}

.coffeescript .javascript,
.javascript .xml,
.lasso .markup,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.5;
}

#popup-welcome {
  max-width: 500px;
}

#popup-welcome .ui-header {
  background-color: var(--pt-bg-3489be);
}

#popup-welcome #welcome-footer {
  text-align: center;
}

.main-logo {
  background-image: url(data:image/png;base64,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);
  background-size: 248px;
  height: 22px;
  width: 124px;
  background-repeat: no-repeat;
  background-position: 0 4px;
  padding-top: 4px;
  display: inline-block;
}

.main-logo:hover {
  background-position: -124px 4px;
}

/***Variables***/
/* Runtime-adjustable panel width (set by the splitter). Falls back to $info-width. */
#viewer-page {
  --info-width: 25em;
}

/* Adjust the width of the info panel. */
#viewer-page .ui-panel.ui-panel-position-left {
  width: var(--info-width);
}

/* Panel positioning (for overlay and push) */
/* Panel left closed */
#viewer-page .ui-panel-position-left {
  left: calc(-1 * var(--info-width));
}

/* Panel left closed animated */
#viewer-page .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
#viewer-page .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
  -webkit-transform: translate3d(calc(-1 * var(--info-width)), 0, 0);
  -moz-transform: translate3d(calc(-1 * var(--info-width)), 0, 0);
  transform: translate3d(calc(-1 * var(--info-width)), 0, 0);
}

/* Panel left open */
#viewer-page .ui-panel-position-left.ui-panel-display-reveal,
#viewer-page .ui-panel-open.ui-panel-position-left {
  left: 0;
}

#viewer-page .ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-overlay,
#viewer-page .ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-push {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transform: none;
}

/* Wrapper and fixed toolbars positioning (for reveal and push) */
/* Panel left open */
#viewer-page .ui-panel-page-content-position-left {
  left: var(--info-width);
  right: calc(-1 * var(--info-width));
}

/* Panel left open animated */
#viewer-page .ui-panel-animate.ui-panel-page-content-position-left {
  left: 0;
  right: 0;
  -webkit-transform: translate3d(var(--info-width), 0, 0);
  -moz-transform: translate3d(var(--info-width), 0, 0);
  transform: translate3d(var(--info-width), 0, 0);
}

/* Dismiss model open */
#viewer-page .ui-panel-dismiss-open.ui-panel-dismiss-position-left {
  left: var(--info-width);
}

/* Responsive: wrap on wide viewports once open */
@media (min-width: 48em) {
  #viewer-page.ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-left {
    margin-right: var(--info-width);
  }
  #viewer-page.ui-responsive-panel .ui-panel-page-content-open {
    width: auto;
  }
  #viewer-page.ui-responsive-panel .ui-panel-dismiss-display-push,
  #viewer-page .ui-responsive-panel.ui-page-active ~ .ui-panel-dismiss-display-push {
    display: none;
  }
}
/* Splitter handle for resizing the info panel. Positioned on the boundary
   relative to #viewer-page (outside the panel's scroll container) so it never
   overlaps the panel scrollbar in any browser. */
#info-panel-resizer {
  position: absolute;
  top: 0;
  left: var(--info-width);
  width: 10px;
  height: 100%;
  margin-left: -5px;
  cursor: col-resize;
  /* Above the panel (999), below jQuery Mobile's popups (1100) and their
     screen (1099), so a popup over the splitter (sharing a link, the
     legend) covers its line. */
  z-index: 1050;
  background: transparent;
  display: none;
  touch-action: none;
}

#viewer-page.info-panel-open #info-panel-resizer {
  display: block;
}

#info-panel-resizer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--pt-bg-d6e0ef);
  transition: background 0.15s ease;
}

#info-panel-resizer:hover::before,
#info-panel-resizer.is-dragging::before {
  background: var(--pt-bg-1e73e8);
}

/* Disable panel/content transitions while dragging the splitter. */
#viewer-page.info-resizing .ui-panel-animate,
#viewer-page.info-resizing .ui-panel-page-content-position-left,
#viewer-page.info-resizing #info-panel {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  transition: none !important;
}

#viewer-page.info-resizing {
  cursor: col-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Remove jQuery Mobile's default panel padding so the header, tabs and content
   sit flush to the panel edges. */
#info-panel .ui-panel-inner {
  padding: 0;
}

/* Slight gray page background so the white content cards stand out. */
#info-panel {
  background: var(--pt-bg-f8fafc);
}

/* Info panel header — matches the front page / viewer header exactly. */
/* 59px, as tall as the viewer's and the schema list's banners. The panel's
   inner box is a flex column, so without flex: none a long node squeezed
   the header shorter. */
#info-panel .ui-header {
  flex: none;
  box-sizing: border-box;
  height: 59px;
  overflow: hidden;
  background: var(--banner-bg);
  border: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--banner-border);
  box-shadow: 0 2px 10px var(--pt-sh-0f172a-a022);
}

#info-panel .ui-header .ui-title,
#info-panel #info-title {
  margin: 0;
  padding: 19px 16px;
  color: var(--pt-fg-f1f5f9);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.035em;
  line-height: 1.35;
  text-align: center;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Node-name banner with a hover-revealed copy-to-clipboard button. */
#info-panel #info-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#info-panel #info-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#info-panel .info-title-copy {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--pt-fg-cbd5e1);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}

#info-panel #info-title.has-node .info-title-copy {
  display: inline-flex;
}

#info-panel #info-title.has-node:hover .info-title-copy,
#info-panel .info-title-copy:focus,
#info-panel .info-title-copy:focus-visible {
  opacity: 1;
}

#info-panel .info-title-copy:hover {
  background: var(--pt-bg-94a3b8-a022);
  color: var(--pt-fg-f1f5f9);
}

#info-panel .info-title-copy.copied {
  opacity: 1;
  color: var(--pt-fg-4ade80);
}

#info-panel .info-title-copy svg {
  display: block;
  pointer-events: none;
}

/* Sit the tabs directly under the Info header with no gap. */
#info-panel .ui-header {
  margin: 0;
}

#info-panel #info-tabs,
#info-panel #info-tabs-navbar {
  margin: 0;
  padding: 0;
}

/* Flat underline tabs matching the navy header / blue accent theme. */
#info-panel #info-tabs-navbar {
  background: var(--pt-bg-ffffff);
  border-bottom: 1px solid var(--pt-bd-e4e9f1);
}

#info-panel #info-tabs-navbar .ui-tabs-nav {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#info-panel #info-tabs-navbar li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#info-panel #info-tabs-navbar .ui-btn {
  margin: 0;
  padding: 13px 8px 11px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--pt-fg-64748b) !important;
  font-weight: 600;
  font-size: 0.8rem;
  text-shadow: none !important;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

#info-panel #info-tabs-navbar .ui-btn:hover,
#info-panel #info-tabs-navbar .ui-btn:focus {
  color: var(--pt-fg-1e293b) !important;
  background: var(--pt-bg-f8fafc) !important;
}

#info-panel #info-tabs-navbar .ui-btn-active {
  color: var(--pt-fg-0f6bff) !important;
  border-bottom-color: var(--pt-bd-0f6bff) !important;
  background: transparent !important;
}

.ui-navbar li .ui-btn {
  padding: 10px;
}

/* "Open in new window" button on the Schema tab, flattened to match the
   app's other flat/rounded controls instead of jQM's default gray bevel. */
#info-tab-schema > a.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  margin: 0 0 10px;
  padding: 8px 36px 8px 14px;
  background: var(--pt-bg-ffffff) !important;
  background-image: none !important;
  border: 1px solid var(--pt-bd-c9d5e5) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--pt-fg-1e293b) !important;
  font-weight: 600;
  font-size: 0.8rem;
  text-shadow: none !important;
}

#info-tab-schema > a.ui-btn:hover,
#info-tab-schema > a.ui-btn:focus {
  background: var(--pt-bg-f8fafc) !important;
  border-color: var(--pt-bd-94a3b8) !important;
}

/* Keep all Save buttons visually consistent and blue across the app. */
.save-btn.ui-btn,
.save-btn.ui-btn:visited {
  background-color: var(--pt-bg-1e73e8) !important;
  border-color: var(--pt-bd-175ec0) !important;
  color: var(--pt-fg-ffffff) !important;
  text-shadow: none !important;
}

.save-btn.ui-btn:hover,
.save-btn.ui-btn:focus,
.save-btn.ui-btn.ui-btn-active,
.save-btn.ui-btn:active {
  background-color: var(--pt-bg-155fca) !important;
  border-color: var(--pt-bd-124ea6) !important;
  color: var(--pt-fg-ffffff) !important;
}

#info-definition-line {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
}

#info-definition {
  flex: 1;
}

html body #info-definition p {
  display: block !important;
  margin-bottom: 0.8em !important;
}

#info-definition p:last-child {
  margin-bottom: 0 !important;
}

#info-definition .definition-koodisto-line.with-gap {
  margin-top: 1em !important;
}

.no-definition-text {
  color: var(--pt-fg-aaaaaa);
  font-style: italic;
}

/* A narrow panel cuts the review tab's label short, never its count. */
#info-panel #info-tabs-navbar #info-tab-review-link {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
}

#info-tab-review-link .review-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#info-tab-review-link .review-badge {
  flex: none;
}

.review-badge {
  display: inline-block;
  background: var(--pt-bg-e53935);
  color: var(--pt-fg-ffffff);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 8px;
  margin-top: -1px;
  vertical-align: middle;
  pointer-events: none;
}

#popup-error {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 34px var(--pt-sh-000000-a032);
  border: 1px solid var(--pt-bd-e7c2c2);
  z-index: 6500;
}

.ui-popup-container:has(#popup-error) {
  z-index: 6500 !important;
}

.ui-popup-screen.jsv-error-popup-screen {
  z-index: 6499 !important;
}

#popup-error [data-role=header] {
  position: relative;
  padding-right: 34px;
  background: linear-gradient(135deg, var(--pt-bg-b24141) 0%, var(--pt-bg-932f2f) 100%);
  color: var(--pt-fg-ffffff);
  border: 0;
}

#popup-error-close {
  position: absolute;
  right: 8px;
  left: auto !important;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pt-fg-ffffff);
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  opacity: 0.9;
  box-shadow: none;
}

#popup-error-close:hover,
#popup-error-close:focus {
  background: var(--pt-bg-ffffff-a02);
  opacity: 1;
}

#popup-error-close.ui-btn,
#popup-error-close.ui-link,
#popup-error-close.ui-btn:hover,
#popup-error-close.ui-link:hover {
  right: 8px;
  left: auto !important;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 20px;
  min-height: 20px;
  box-shadow: none;
  text-shadow: none;
}

#popup-error .error-message {
  margin: 0;
  padding: 14px 16px;
  background: var(--pt-bg-ffffff);
  color: var(--pt-fg-2f2f2f);
}

#info-definition-status,
#info-name-status,
#info-type-status,
#info-required-status,
#info-review-status {
  display: none !important;
}

.review-section {
  padding: 4px 0;
}

.review-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 20px 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pt-fg-94a3b8);
  padding: 0;
}

.review-section:first-child .review-section-title {
  margin-top: 4px;
}

.review-count-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pt-bg-e2e8f0);
  color: var(--pt-fg-475569);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}

.review-section-divider {
  display: none;
}

.review-empty-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--pt-bg-eaf6ee);
  border: 1px solid var(--pt-bd-b2dfcc);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--pt-fg-2e6b46);
  font-size: 0.92em;
  line-height: 1.4;
}

.review-empty-notice .review-empty-icon {
  flex-shrink: 0;
  font-size: 1.1em;
  color: var(--pt-fg-3a9e65);
  margin-top: 1px;
}

#review-list,
#review-missing-def-list {
  margin: 8px 0 0;
  border: 1px solid var(--pt-bd-e4e9f1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px var(--pt-sh-12263f-a005);
}

#review-list li,
#review-missing-def-list li {
  border: none;
  margin: 0;
}

#review-list li > a,
#review-missing-def-list li > a {
  overflow: hidden;
  margin: 0;
  padding: 11px 38px 11px 14px;
  background: var(--pt-bg-ffffff);
  border: none;
  border-top: 1px solid var(--pt-bd-eef1f6);
  border-radius: 0;
  color: var(--pt-fg-1e293b);
  font-size: 13px;
  text-shadow: none;
  transition: background 0.12s ease;
}

#review-list li:first-child > a,
#review-missing-def-list li:first-child > a {
  border-top: none;
}

#review-list li > a:hover,
#review-list li > a:focus,
#review-missing-def-list li > a:hover,
#review-missing-def-list li > a:focus {
  background: var(--pt-bg-f4f8ff);
}

#review-list li > a:after,
#review-missing-def-list li > a:after {
  content: "";
  width: 8px;
  height: 8px;
  right: 16px;
  margin-top: -5px;
  background: none;
  box-shadow: none;
  border: solid var(--pt-bd-b6c2d3);
  border-width: 2px 2px 0 0;
  border-radius: 1px;
  transform: rotate(45deg);
  opacity: 1;
}

#review-list li > a:hover:after,
#review-missing-def-list li > a:hover:after {
  border-color: var(--pt-bd-7f93ad);
}

#review-list .review-item-name,
#review-missing-def-list .review-item-name {
  display: block;
  font-weight: 600;
  color: var(--pt-fg-1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.4em;
}

#review-missing-def-more {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--pt-fg-0b63ce);
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
  text-shadow: none;
  text-decoration: none;
}

#review-missing-def-more:hover,
#review-missing-def-more:focus {
  color: var(--pt-fg-084e9f);
  text-decoration: underline;
}

#info-tabs-navbar.readonly-mode ul > li {
  width: 50% !important;
}

/* Dark theme: jQuery Mobile's own light surfaces, buttons and fields in the
   panel, which the theme variables do not reach. "body .panel-dark" is just
   above jQuery Mobile's theme rules and below the panel's own id rules, so
   these only replace jQuery Mobile's defaults. */
#info-panel.panel-dark {
  color-scheme: dark;
}

body .panel-dark .ui-panel-inner,
body .panel-dark .ui-body-d,
body .panel-dark .ui-content {
  background-color: #111827;
  border-color: #263244;
  color: #e2e8f0;
  text-shadow: none;
}

/* jQuery Mobile's light text shadow (and its stronger :hover, :focus and
   active-state rules) blurs light text on a dark button, so none of it. */
body .panel-dark .ui-btn,
body .panel-dark .ui-btn:hover,
body .panel-dark .ui-btn:focus,
body .panel-dark .ui-btn:active,
body .panel-dark .ui-btn.ui-btn-active,
body .panel-dark .ui-listview > li,
body .panel-dark .ui-input-text,
body .panel-dark input,
body .panel-dark textarea,
body .panel-dark select {
  text-shadow: none !important;
}

body .panel-dark .ui-btn {
  background-color: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

/* jQuery Mobile's :hover, :focus and :active rules turn the text dark again;
   these are as specific and come later. */
body .panel-dark .ui-btn:hover,
body .panel-dark .ui-btn:focus,
body .panel-dark .ui-btn:active {
  background-color: #273449;
  border-color: #3a4a63;
  color: #f1f5f9;
}

body .panel-dark .ui-listview > li,
body .panel-dark .ui-listview > li > .ui-btn {
  background-color: #172033;
  border-color: #263244;
  color: #e2e8f0;
}

body .panel-dark .ui-input-text,
body .panel-dark input,
body .panel-dark textarea,
body .panel-dark select {
  background-color: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

/* The review switch, in the panel and the add-node dialog: a grey track
   and a light knob while off; on, it keeps the light theme's red. */
.panel-dark .review-toggle:not(:checked),
.panel-dark #add-node-review:not(:checked) {
  background: #475569;
}

.panel-dark .review-toggle::after,
.panel-dark #add-node-review::after {
  background: #e2e8f0;
}

/* The banners - the viewer's header and the panel's - share one colour: navy
   in the light theme, the panel's #111827 in the dark one (the schema list's
   page colour too). */
:root {
  --banner-bg: #1e293b;
  --banner-border: rgba(148, 163, 184, 0.22);
}

body.panel-theme-dark {
  --banner-bg: #111827;
  --banner-border: #2c3b52;
}

body.panel-theme-dark #info-panel .ui-header {
  box-shadow: none;
}

/* The viewer's banner gets the same line under it as the schema list's
   (schema-list.html), its bottom border, so the height stays 59px. */
body.panel-theme-dark #viewer-page .md-navbar {
  border-bottom-color: #2c3b52;
}

/* Dark theme: the editor's dialogs, popups and context menu stand a step
   lighter than the page, as the schema list's do: their white and
   near-white surfaces take the dialog values, and their fields match the
   list's. */
body .panel-dark.jsv-dialog {
  --pt-bg-ffffff: #222838;
  --pt-bg-f7f9fc: #222838;
  --pt-bg-f8fafc: #272e3f;
  --pt-bg-f1f5f9: #2b3345;
  background-color: #222838;
  border-color: #3a465c;
  color: #e2e8f0;
  text-shadow: none;
}

body .panel-dark.jsv-dialog .ui-content {
  background-color: transparent;
}

/* The add-node dialog's fields have id rules of their own; the fields of
   every dialog share one colour, so it wins over them. */
body .panel-dark.jsv-dialog .ui-input-text,
body .panel-dark.jsv-dialog input:not([type=checkbox]):not([type=radio]),
body .panel-dark.jsv-dialog textarea,
body .panel-dark.jsv-dialog select {
  background-color: #161b26 !important;
  border-color: #3a465c;
}

/* A dialog's select: flat like its fields, with a light arrow on the dark
   field instead of the light theme's gradient and dark arrow. */
body .panel-dark.jsv-dialog select,
body .panel-dark.jsv-dialog select:hover,
body .panel-dark.jsv-dialog select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
}

/* The tabs under the panel header stay one surface with it (the banner
   colour) in the dark theme. */
#info-panel.panel-dark #info-tabs-navbar {
  background: var(--banner-bg);
}

/* The koodisto URL fields' blue focus rim, over the dark field colour. */
body .panel-dark .info-koodisto-uri-input:focus {
  border-color: #2582f3;
}

/*
 * Panel theme colours. Every colour of the stylesheets that can show inside
 * the info panel is a variable named after its role (bg background, fg text,
 * bd border, sh shadow) and its light value. The light values are the
 * defaults; .panel-dark gives them their dark counterparts: the info panel
 * and the editor's dialogs, popups and context menu (.jsv-dialog) carry it in
 * the dark theme. The tree has its own colours (tree-theme.scss). A new colour in a panel rule gets a variable here, in both blocks.
 */
:root {
  --pt-bd-0b63ce-a02: rgba(11, 99, 206, 0.2);
  --pt-bd-0b63ce: #0b63ce;
  --pt-bd-0f62e6: #0f62e6;
  --pt-bd-0f6bff: #0f6bff;
  --pt-bd-124ea6: #124ea6;
  --pt-bd-175ec0: #175ec0;
  --pt-bd-49617f: #49617f;
  --pt-bd-4c9aff: #4c9aff;
  --pt-bd-64748b: #64748b;
  --pt-bd-7f93ad: #7f93ad;
  --pt-bd-8590a2: #8590a2;
  --pt-bd-93c5fd: #93c5fd;
  --pt-bd-94a3b8: #94a3b8;
  --pt-bd-991b1b: #991b1b;
  --pt-bd-9bb9e8: #9bb9e8;
  --pt-bd-9fb6d1: #9fb6d1;
  --pt-bd-b2dfcc: #b2dfcc;
  --pt-bd-b6c2d3: #b6c2d3;
  --pt-bd-b91c1c: #b91c1c;
  --pt-bd-bcd6ff: #bcd6ff;
  --pt-bd-c1c7d0: #c1c7d0;
  --pt-bd-c9d5e5: #c9d5e5;
  --pt-bd-cad5e5: #cad5e5;
  --pt-bd-cbd5e1: #cbd5e1;
  --pt-bd-cdcdcd: #cdcdcd;
  --pt-bd-cfe2ff: #cfe2ff;
  --pt-bd-d7e0ec: #d7e0ec;
  --pt-bd-d8e0ea: #d8e0ea;
  --pt-bd-dbe2ea: #dbe2ea;
  --pt-bd-dc2626: #dc2626;
  --pt-bd-dfe1e6: #dfe1e6;
  --pt-bd-e2e8f0: #e2e8f0;
  --pt-bd-e4e9f1: #e4e9f1;
  --pt-bd-e7c2c2: #e7c2c2;
  --pt-bd-eeeeee: #eeeeee;
  --pt-bd-eef1f6: #eef1f6;
  --pt-bd-eef2f7: #eef2f7;
  --pt-bd-ffffff-a024: rgba(255, 255, 255, 0.24);
  --pt-bg-0052cc: #0052cc;
  --pt-bg-007cdb: #007cdb;
  --pt-bg-0084e2: #0084e2;
  --pt-bg-00b646: #00b646;
  --pt-bg-01993e: #01993e;
  --pt-bg-0f172a-a048: rgba(15, 23, 42, 0.48);
  --pt-bg-0f6bff: #0f6bff;
  --pt-bg-114a76: #114a76;
  --pt-bg-145f95: #145f95;
  --pt-bg-155fca: #155fca;
  --pt-bg-1e73e8: #1e73e8;
  --pt-bg-22c55e: #22c55e;
  --pt-bg-3489be: #3489be;
  --pt-bg-475569: #475569;
  --pt-bg-63ba3c: #63ba3c;
  --pt-bg-932f2f: #932f2f;
  --pt-bg-94a3b8-a022: rgba(148, 163, 184, 0.22);
  --pt-bg-94a3b8: #94a3b8;
  --pt-bg-97a0af: #97a0af;
  --pt-bg-b24141: #b24141;
  --pt-bg-b91c1c: #b91c1c;
  --pt-bg-c9d5e5: #c9d5e5;
  --pt-bg-cbd5e1: #cbd5e1;
  --pt-bg-d6e0ef: #d6e0ef;
  --pt-bg-dc2626: #dc2626;
  --pt-bg-dcfff1: #dcfff1;
  --pt-bg-e2e8f0: #e2e8f0;
  --pt-bg-e4e9f1: #e4e9f1;
  --pt-bg-e53935: #e53935;
  --pt-bg-e6eefb: #e6eefb;
  --pt-bg-e8f1ff: #e8f1ff;
  --pt-bg-e9ebee: #e9ebee;
  --pt-bg-eaf6ee: #eaf6ee;
  --pt-bg-eef3fb: #eef3fb;
  --pt-bg-eef4fb: #eef4fb;
  --pt-bg-eef6ff: #eef6ff;
  --pt-bg-f0f0f0: #f0f0f0;
  --pt-bg-f1f2f4: #f1f2f4;
  --pt-bg-f1f5f9: #f1f5f9;
  --pt-bg-f1f7ff: #f1f7ff;
  --pt-bg-f2f5fa: #f2f5fa;
  --pt-bg-f3f7fd: #f3f7fd;
  --pt-bg-f4f4f4: #f4f4f4;
  --pt-bg-f4f8ff: #f4f8ff;
  --pt-bg-f5f5f5: #f5f5f5;
  --pt-bg-f7f9fc: #f7f9fc;
  --pt-bg-f8fafc: #f8fafc;
  --pt-bg-f8fbff: #f8fbff;
  --pt-bg-fafafa: #fafafa;
  --pt-bg-fbfcfe: #fbfcfe;
  --pt-bg-fee2e2: #fee2e2;
  --pt-bg-fef2f2: #fef2f2;
  --pt-bg-ffebe6: #ffebe6;
  --pt-bg-ffffff-a025: rgba(255, 255, 255, 0.25);
  --pt-bg-ffffff-a02: rgba(255, 255, 255, 0.2);
  --pt-bg-ffffff-a042: rgba(255, 255, 255, 0.42);
  --pt-bg-ffffff: #ffffff;
  --pt-fg-000000: #000000;
  --pt-fg-0052cc: #0052cc;
  --pt-fg-008000: #008000;
  --pt-fg-008800: #008800;
  --pt-fg-084e9f: #084e9f;
  --pt-fg-0950a8: #0950a8;
  --pt-fg-0b63ce: #0b63ce;
  --pt-fg-0f6bff: #0f6bff;
  --pt-fg-172b4d: #172b4d;
  --pt-fg-18233a: #18233a;
  --pt-fg-1e293b: #1e293b;
  --pt-fg-204a77: #204a77;
  --pt-fg-216e4e: #216e4e;
  --pt-fg-223047: #223047;
  --pt-fg-24384f: #24384f;
  --pt-fg-2a2a2a: #2a2a2a;
  --pt-fg-2c3c56: #2c3c56;
  --pt-fg-2e6b46: #2e6b46;
  --pt-fg-2f2f2f: #2f2f2f;
  --pt-fg-31435f: #31435f;
  --pt-fg-334155: #334155;
  --pt-fg-3a9e65: #3a9e65;
  --pt-fg-41506a: #41506a;
  --pt-fg-42526e: #42526e;
  --pt-fg-42546d: #42546d;
  --pt-fg-44546f: #44546f;
  --pt-fg-475569: #475569;
  --pt-fg-4ade80: #4ade80;
  --pt-fg-4b617e: #4b617e;
  --pt-fg-5c6b80: #5c6b80;
  --pt-fg-64748b: #64748b;
  --pt-fg-6a6a6a: #6a6a6a;
  --pt-fg-6b778c: #6b778c;
  --pt-fg-6b7a90: #6b7a90;
  --pt-fg-8590a2: #8590a2;
  --pt-fg-880000: #880000;
  --pt-fg-888888: #888888;
  --pt-fg-8888ff: #8888ff;
  --pt-fg-8a97a8: #8a97a8;
  --pt-fg-94a3b8: #94a3b8;
  --pt-fg-97a0af: #97a0af;
  --pt-fg-991b1b: #991b1b;
  --pt-fg-9aa7b8: #9aa7b8;
  --pt-fg-aaaaaa: #aaaaaa;
  --pt-fg-ae2a19: #ae2a19;
  --pt-fg-b3261e: #b3261e;
  --pt-fg-cbd5e1: #cbd5e1;
  --pt-fg-dc2626: #dc2626;
  --pt-fg-f1f5f9: #f1f5f9;
  --pt-fg-ffffff: #ffffff;
  --pt-sh-000000-a003: rgba(0, 0, 0, 0.03);
  --pt-sh-000000-a025: rgba(0, 0, 0, 0.25);
  --pt-sh-000000-a028: rgba(0, 0, 0, 0.28);
  --pt-sh-000000-a032: rgba(0, 0, 0, 0.32);
  --pt-sh-091e42-a015: rgba(9, 30, 66, 0.15);
  --pt-sh-0f172a-a012: rgba(15, 23, 42, 0.12);
  --pt-sh-0f172a-a022: rgba(15, 23, 42, 0.22);
  --pt-sh-0f62e6-a008: rgba(15, 98, 230, 0.08);
  --pt-sh-102a43-a006: rgba(16, 42, 67, 0.06);
  --pt-sh-12263f-a005: rgba(18, 38, 63, 0.05);
  --pt-sh-12263f-a018: rgba(18, 38, 63, 0.18);
  --pt-sh-12263f-a022: rgba(18, 38, 63, 0.22);
  --pt-sh-142846-a018: rgba(20, 40, 70, 0.18);
  --pt-sh-ffffff-a095: rgba(255, 255, 255, 0.95);
  --pt-sh-ffffff-a09: rgba(255, 255, 255, 0.9);
}

.panel-dark {
  --pt-bd-0b63ce-a02: rgba(37, 130, 243, 0.2);
  --pt-bd-0b63ce: #2582f3;
  --pt-bd-0f62e6: #2875f1;
  --pt-bd-0f6bff: #1a71ff;
  --pt-bd-124ea6: #307be9;
  --pt-bd-175ec0: #327ee6;
  --pt-bd-49617f: #6d89ab;
  --pt-bd-4c9aff: #4c9aff;
  --pt-bd-64748b: #7a899f;
  --pt-bd-7f93ad: #7389a5;
  --pt-bd-8590a2: #7d899c;
  --pt-bd-93c5fd: #3b536d;
  --pt-bd-94a3b8: #7387a2;
  --pt-bd-991b1b: #dd3c3c;
  --pt-bd-9bb9e8: #3e5272;
  --pt-bd-9fb6d1: #425b7a;
  --pt-bd-b2dfcc: #3b6d58;
  --pt-bd-b6c2d3: #41526b;
  --pt-bd-b91c1c: #e13838;
  --pt-bd-bcd6ff: #32425c;
  --pt-bd-c1c7d0: #48515f;
  --pt-bd-c9d5e5: #344862;
  --pt-bd-cad5e5: #344761;
  --pt-bd-cbd5e1: #374a60;
  --pt-bd-cdcdcd: #515151;
  --pt-bd-cfe2ff: #2e3d55;
  --pt-bd-d7e0ec: #304259;
  --pt-bd-d8e0ea: #30435a;
  --pt-bd-dbe2ea: #324356;
  --pt-bd-dc2626: #df3939;
  --pt-bd-dfe1e6: #3c414c;
  --pt-bd-e2e8f0: #2d3d53;
  --pt-bd-e4e9f1: #2c3b52;
  --pt-bd-e7c2c2: #633636;
  --pt-bd-eeeeee: #3d3d3d;
  --pt-bd-eef1f6: #29364c;
  --pt-bd-eef2f7: #29394c;
  --pt-bd-ffffff-a024: rgba(51, 51, 51, 0.24);
  --pt-bg-0052cc: #0052cc;
  --pt-bg-007cdb: #007cdb;
  --pt-bg-0084e2: #0084e2;
  --pt-bg-00b646: #00b646;
  --pt-bg-01993e: #01993e;
  --pt-bg-0f172a-a048: rgba(15, 23, 42, 0.48);
  --pt-bg-0f6bff: #0f6bff;
  --pt-bg-114a76: #114a76;
  --pt-bg-145f95: #145f95;
  --pt-bg-155fca: #155fca;
  --pt-bg-1e73e8: #1e73e8;
  --pt-bg-22c55e: #22c55e;
  --pt-bg-3489be: #3489be;
  --pt-bg-475569: #475569;
  --pt-bg-63ba3c: #63ba3c;
  --pt-bg-932f2f: #932f2f;
  --pt-bg-94a3b8-a022: rgba(79, 86, 97, 0.22);
  --pt-bg-94a3b8: #4f5661;
  --pt-bg-97a0af: #53575f;
  --pt-bg-b24141: #b24141;
  --pt-bg-b91c1c: #b91c1c;
  --pt-bg-c9d5e5: #303742;
  --pt-bg-cbd5e1: #333940;
  --pt-bg-d6e0ef: #272e3a;
  --pt-bg-dc2626: #dc2626;
  --pt-bg-dcfff1: #1d332a;
  --pt-bg-e2e8f0: #252a31;
  --pt-bg-e4e9f1: #242930;
  --pt-bg-e53935: #e53935;
  --pt-bg-e6eefb: #1b2330;
  --pt-bg-e8f1ff: #1a212d;
  --pt-bg-e9ebee: #222731;
  --pt-bg-eaf6ee: #1f2d24;
  --pt-bg-eef3fb: #19202c;
  --pt-bg-eef4fb: #19222c;
  --pt-bg-eef6ff: #18212a;
  --pt-bg-f0f0f0: #1f242d;
  --pt-bg-f1f2f4: #1e222b;
  --pt-bg-f1f5f9: #1c2228;
  --pt-bg-f1f7ff: #171f29;
  --pt-bg-f2f5fa: #1b2028;
  --pt-bg-f3f7fd: #171e29;
  --pt-bg-f4f4f4: #1d2129;
  --pt-bg-f4f8ff: #171d27;
  --pt-bg-f5f5f5: #1c2028;
  --pt-bg-f7f9fc: #191d24;
  --pt-bg-f8fafc: #191d24;
  --pt-bg-f8fbff: #151c25;
  --pt-bg-fafafa: #191d24;
  --pt-bg-fbfcfe: #171b22;
  --pt-bg-fee2e2: #301c1c;
  --pt-bg-fef2f2: #291717;
  --pt-bg-ffebe6: #2e1e1a;
  --pt-bg-ffffff-a025: rgba(22, 25, 32, 0.25);
  --pt-bg-ffffff-a02: rgba(22, 25, 32, 0.2);
  --pt-bg-ffffff-a042: rgba(22, 25, 32, 0.42);
  --pt-bg-ffffff: #161920;
  --pt-fg-000000: #ededed;
  --pt-fg-0052cc: #71a6f4;
  --pt-fg-008000: #71f471;
  --pt-fg-008800: #71f471;
  --pt-fg-084e9f: #71aef4;
  --pt-fg-0950a8: #71acf4;
  --pt-fg-0b63ce: #71acf4;
  --pt-fg-0f6bff: #71a3f4;
  --pt-fg-172b4d: #d8dee8;
  --pt-fg-18233a: #dfe3ec;
  --pt-fg-1e293b: #dde2ea;
  --pt-fg-204a77: #86b1df;
  --pt-fg-216e4e: #89dcb9;
  --pt-fg-223047: #d6dce7;
  --pt-fg-24384f: #d2dbe4;
  --pt-fg-2a2a2a: #e5e5e5;
  --pt-fg-2c3c56: #cdd4e1;
  --pt-fg-2e6b46: #c4dbcd;
  --pt-fg-2f2f2f: #e2e2e2;
  --pt-fg-31435f: #c7d0de;
  --pt-fg-334155: #cad3df;
  --pt-fg-3a9e65: #8fd6ae;
  --pt-fg-41506a: #bdc7d7;
  --pt-fg-42526e: #bbc5d6;
  --pt-fg-42546d: #bbc7d6;
  --pt-fg-44546f: #bac4d5;
  --pt-fg-475569: #bec7d3;
  --pt-fg-4ade80: #7ee7a4;
  --pt-fg-4b617e: #b1bfd0;
  --pt-fg-5c6b80: #b0b9c6;
  --pt-fg-64748b: #a9b3c1;
  --pt-fg-6a6a6a: #bdbdbd;
  --pt-fg-6b778c: #a8b0bd;
  --pt-fg-6b7a90: #a6afbd;
  --pt-fg-8590a2: #97a1b0;
  --pt-fg-880000: #f47171;
  --pt-fg-888888: #ababab;
  --pt-fg-8888ff: #8888ff;
  --pt-fg-8a97a8: #929eae;
  --pt-fg-94a3b8: #94a3b8;
  --pt-fg-97a0af: #97a0af;
  --pt-fg-991b1b: #e87d7d;
  --pt-fg-9aa7b8: #9aa7b8;
  --pt-fg-aaaaaa: #aaaaaa;
  --pt-fg-ae2a19: #ec8679;
  --pt-fg-b3261e: #e9827c;
  --pt-fg-cbd5e1: #cbd5e1;
  --pt-fg-dc2626: #ea7b7b;
  --pt-fg-f1f5f9: #f1f5f9;
  --pt-fg-ffffff: #ffffff;
  --pt-sh-000000-a003: rgba(0, 0, 0, 0.03);
  --pt-sh-000000-a025: rgba(0, 0, 0, 0.25);
  --pt-sh-000000-a028: rgba(0, 0, 0, 0.28);
  --pt-sh-000000-a032: rgba(0, 0, 0, 0.32);
  --pt-sh-091e42-a015: rgba(0, 0, 0, 0.15);
  --pt-sh-0f172a-a012: rgba(0, 0, 0, 0.12);
  --pt-sh-0f172a-a022: rgba(0, 0, 0, 0.22);
  --pt-sh-0f62e6-a008: rgba(0, 0, 0, 0.08);
  --pt-sh-102a43-a006: rgba(0, 0, 0, 0.06);
  --pt-sh-12263f-a005: rgba(0, 0, 0, 0.05);
  --pt-sh-12263f-a018: rgba(0, 0, 0, 0.18);
  --pt-sh-12263f-a022: rgba(0, 0, 0, 0.22);
  --pt-sh-142846-a018: rgba(0, 0, 0, 0.18);
  --pt-sh-ffffff-a095: rgba(0, 0, 0, 0);
  --pt-sh-ffffff-a09: rgba(0, 0, 0, 0);
}

/*
 * Dark theme outside the info panel: the tree and what goes with it - the
 * canvas, the path bar under it, the zoom buttons, the panel splitter, the
 * banner's search and its results, the legend, popup arrows and the loading
 * and saving covers. The colours are the dialogs' (schema-list.html): the #222838
 * surface, #272e3f for bars and #3a465c for lines. jQuery Mobile's own theme
 * rules need !important to give way.
 */
body.panel-theme-dark #viewer-page,
body.panel-theme-dark .ui-panel-wrapper,
body.panel-theme-dark #main-body,
body.panel-theme-dark #loading {
  background: #222838 !important;
  color: #e2e8f0;
}

body.panel-theme-dark #viewer-page .ui-footer,
body.panel-theme-dark #schema-path {
  background: #272e3f !important;
  border-color: #3a465c !important;
  color: #e2e8f0 !important;
  text-shadow: none !important;
}

body.panel-theme-dark #schema-path a {
  color: #93c5fd !important;
}

body.panel-theme-dark .schema-path-copy {
  color: #9aa7bd;
}

body.panel-theme-dark .schema-path-copy:hover,
body.panel-theme-dark .schema-path-copy:focus-visible {
  color: #e2e8f0;
}

body.panel-theme-dark .schema-path-copy.copied {
  color: #4ade80;
}

body.panel-theme-dark #zoom-controls .ui-btn {
  background-color: #2b3345 !important;
  border-color: #3a465c !important;
  box-shadow: none !important;
}

body.panel-theme-dark #info-panel-resizer::before {
  background: #3a465c;
}

body.panel-theme-dark {
  /* The tree: lines, circles (open, collapsed, labels) and texts, with the
     selection green and a pending review red as in the light theme. */
}

body.panel-theme-dark .link {
  stroke: #3a465c;
}

body.panel-theme-dark .node circle,
body.panel-theme-dark #legend-popup circle {
  fill: #272e3f;
  stroke: #7aa2f7;
}

body.panel-theme-dark .node circle.collapsed,
body.panel-theme-dark #legend-popup circle.collapsed {
  fill: #5b8def;
}

body.panel-theme-dark .node.label circle,
body.panel-theme-dark .node.label circle:hover {
  stroke: #4a5670;
}

body.panel-theme-dark .node text {
  fill: #e2e8f0;
}

body.panel-theme-dark .node.label text {
  fill: #cbd3e0;
}

body.panel-theme-dark .node text.abstract {
  fill-opacity: 0.62 !important;
}

body.panel-theme-dark .node.focus circle,
body.panel-theme-dark #legend-popup .focus circle,
body.panel-theme-dark .focus .focus-box {
  stroke: #34d399;
}

body.panel-theme-dark .needs-review circle,
body.panel-theme-dark #legend-popup .needs-review circle {
  stroke: #f87171;
}

body.panel-theme-dark .node.focus.needs-review circle,
body.panel-theme-dark #legend-popup .focus.needs-review circle {
  stroke: #f87171;
}

body.panel-theme-dark .deprecated text {
  fill: #8e9ab0;
  opacity: 1;
}

body.panel-theme-dark {
  /* The banner's search field and its result list. */
}

body.panel-theme-dark #legend-container .ui-input-search,
body.panel-theme-dark #legend-container .ui-input-text {
  background-color: #161b26 !important;
  border-color: #3a465c !important;
  box-shadow: none !important;
}

body.panel-theme-dark #legend-container input {
  color: #e2e8f0 !important;
  text-shadow: none !important;
}

body.panel-theme-dark #legend-container input::placeholder {
  color: #6b778c;
}

body.panel-theme-dark #legend-container .ui-input-search::after {
  filter: invert(1);
  opacity: 0.6;
}

body.panel-theme-dark #search-result {
  background: #222838;
}

body.panel-theme-dark #search-result li,
body.panel-theme-dark #search-result li > .ui-btn {
  background-color: #222838 !important;
  border-color: #3a465c !important;
  color: #e2e8f0 !important;
  text-shadow: none !important;
}

body.panel-theme-dark #search-result li > .ui-btn:hover {
  background-color: #2b3345 !important;
}

body.panel-theme-dark .search-result-desc {
  color: #9aa7bd;
}

body.panel-theme-dark #search-result .search-result-ticket {
  color: #8ab4f8;
}

body.panel-theme-dark {
  /* jQuery Mobile's popups over the tree (the legend, sharing a link) are a
     step lighter than the canvas, which they would otherwise match, with a
     rim and a shadow. */
}

body.panel-theme-dark .ui-popup.jsv-dialog,
body.panel-theme-dark #legend-popup,
body.panel-theme-dark #legend-popup-popup .ui-popup {
  --pt-bg-ffffff: #2b3345;
  background: #2b3345 !important;
  border: 1px solid #4a5670 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  color: #e2e8f0 !important;
  text-shadow: none !important;
}

body.panel-theme-dark #legend-popup text,
body.panel-theme-dark #legend-popup .item-text {
  fill: #e2e8f0;
  color: #e2e8f0;
}

body.panel-theme-dark .ui-popup-arrow {
  background: #2b3345 !important;
  border-color: #4a5670 !important;
}

body.panel-theme-dark {
  /* The saving cover: a dark wash instead of the light theme's white one,
     which greys the dark page out, and the ring in the theme's colours. */
}

body.panel-theme-dark #saving-overlay {
  background: rgba(10, 13, 22, 0.45);
}

body.panel-theme-dark #saving-overlay .saving-spinner {
  border-color: rgba(122, 162, 247, 0.25);
  border-top-color: #7aa2f7;
}

body.panel-theme-dark {
  /* The loading cover: a ring in the theme's colours instead of the gif,
     whose grey background is in the image. */
}

body.panel-theme-dark #preload img {
  display: none;
}

body.panel-theme-dark #preload::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 4px solid #3a465c;
  border-top-color: #7aa2f7;
  border-radius: 50%;
  animation: jsv-theme-spin 0.8s linear infinite;
}

@keyframes jsv-theme-spin {
  to {
    transform: rotate(360deg);
  }
}