/* CUSTOM PROPERTIES */

:root, [data-theme="light"] {
  /* Colors for light and dark */
  --info-blue-bg: steelblue;
  --progress-orange-bg: darkorange;
  --success-green-bg: mediumseagreen;
  --failure-red-bg: tomato;
  --translucent-white-bg: hsla(0, 0%, 100%, 0.5);
  --translucent-black-bg: hsla(0, 0%, 15%, 0.5);

  /* Light colors */
  --gray-98: hsl(0, 0%, 98%);
  --gray-97: hsl(0, 0%, 97%);
  --gray-95: hsl(0, 0%, 95%);
  --gray-90: hsl(0, 0%, 90%);
  --gray-75: hsl(0, 0%, 75%);
  --gray-67: hsl(0, 0%, 67%);
  --gray-50: hsl(0, 0%, 50%);
  --gray-35: hsl(0, 0%, 35%);
  --gray-20: hsl(0, 0%, 20%);
  --top-bar-bg: hsl(35, 100%, 60%);
  --top-bar-nav-bg: hsl(30, 100%, 60%);
  --top-bar-text-color: hsl(0, 0%, 100%);
  --breadcrumbs-bar-bg: hsl(50, 100%, 75%);
  --page-outer-bg: hsl(0, 0%, 95%);
  --page-bg: hsl(0, 0%, 100%);
  --light-yellow: #fffbba;
  --text-color: hsl(0, 0%, 0%);
  --link-normal: hsl(18, 100%, 40%);
  --link-hover: hsl(18, 100%, 25%);
  --btn-normal: hsl(215, 60%, 55%);
  --btn-hover: hsl(215, 60%, 45%);
  --accent-color: hsl(18, 100%, 40%);
  --accent-color-secondary: hsl(0, 100%, 92%);
  --selection-color: hsla(50, 100%, 75%, 0.5);
  --diff-added-line-bg: hsl(130, 90%, 95%);
  --diff-added-word-bg: hsl(130, 65%, 83%);
  --diff-removed-line-bg: hsl(360, 90%, 97%);
  --diff-removed-word-bg: hsl(360, 80%, 86%);
  --diff-changed-word-bg: hsl(60, 90%, 86%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  /* Dark colors */
  --gray-98: hsl(0, 0%, 10%);
  --gray-97: hsl(0, 0%, 20%);
  --gray-95: hsl(0, 0%, 25%);
  --gray-90: hsl(0, 0%, 30%);
  --gray-75: hsl(0, 0%, 45%);
  --gray-67: hsl(0, 0%, 53%);
  --gray-50: hsl(0, 0%, 60%);
  --gray-35: hsl(0, 0%, 75%);
  --gray-20: hsl(0, 0%, 90%);
  --top-bar-bg: hsl(0, 0%, 30%);
  --top-bar-nav-bg: hsl(0, 0%, 30%);
  --top-bar-text-color: hsl(0, 0%, 90%);
  --breadcrumbs-bar-bg: hsl(0, 0%, 20%);
  --page-outer-bg: hsl(0, 0%, 17%);
  --page-bg: hsl(0, 0%, 15%);
  --light-yellow: #444;
  --text-color: hsl(0, 0%, 90%);
  --link-normal: hsl(10, 90%, 60%);
  --link-hover: hsl(10, 90%, 70%);
  --btn-normal: hsl(205, 60%, 60%);
  --btn-hover: hsl(205, 60%, 70%);
  --accent-color: hsl(5, 90%, 60%);
  --accent-color-secondary: hsl(0, 50%, 30%);
  --selection-color: hsla(50, 100%, 75%, 0.5);
  --diff-added-line-bg: hsl(130, 25%, 20%);
  --diff-added-word-bg: hsl(130, 30%, 33%);
  --diff-removed-line-bg: hsl(360, 25%, 25%);
  --diff-removed-word-bg: hsl(360, 50%, 38%);
  --diff-changed-word-bg: hsl(60, 50%, 25%);
}}
[data-theme="dark"] {
  /* Dark colors */
  --gray-98: hsl(0, 0%, 10%);
  --gray-97: hsl(0, 0%, 20%);
  --gray-95: hsl(0, 0%, 25%);
  --gray-90: hsl(0, 0%, 30%);
  --gray-75: hsl(0, 0%, 45%);
  --gray-67: hsl(0, 0%, 53%);
  --gray-50: hsl(0, 0%, 60%);
  --gray-35: hsl(0, 0%, 75%);
  --gray-20: hsl(0, 0%, 90%);
  --top-bar-bg: hsl(0, 0%, 30%);
  --top-bar-nav-bg: hsl(0, 0%, 30%);
  --top-bar-text-color: hsl(0, 0%, 90%);
  --breadcrumbs-bar-bg: hsl(0, 0%, 20%);
  --page-outer-bg: hsl(0, 0%, 17%);
  --page-bg: hsl(0, 0%, 15%);
  --light-yellow: #444;
  --text-color: hsl(0, 0%, 90%);
  --link-normal: hsl(10, 90%, 60%);
  --link-hover: hsl(10, 90%, 70%);
  --btn-normal: hsl(205, 60%, 60%);
  --btn-hover: hsl(205, 60%, 70%);
  --accent-color: hsl(5, 90%, 60%);
  --accent-color-secondary: hsl(0, 50%, 30%);
  --selection-color: hsla(50, 100%, 75%, 0.5);
  --diff-added-line-bg: hsl(130, 25%, 20%);
  --diff-added-word-bg: hsl(130, 30%, 33%);
  --diff-removed-line-bg: hsl(360, 25%, 25%);
  --diff-removed-word-bg: hsl(360, 50%, 38%);
  --diff-changed-word-bg: hsl(60, 50%, 25%);
}

:root {
  --wrapper-width: 1200px;
  --wrapper-padding: 2.2rem;
}
@media screen and (max-width: 700px) { :root {
  --wrapper-padding: 1.2rem;
}}

@font-face {
  font-family: "UrduNastaliq";
  src: local("Noto Nastaliq Urdu"), local("Awami Nastaliq"), local("Urdu Typesetting");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}


/* BASE TEMPLATE STYLES */

:root { accent-color: var(--accent-color); }
::selection { background-color: var(--selection-color); }

*[data-script]:not([data-script="Latn"], [data-script="Grek"], [data-script="Cyrl"], [data-script="Armn"], [data-script="Brai"], [data-script="Zxxx"], [data-script="Zyyy"]) {
  font-weight: normal !important;
  font-style: normal !important;
}
html, body {
  margin: 0; padding: 0;
  -webkit-text-size-adjust: 100%;
  color: var(--text-color);
  background-color: var(--page-outer-bg);
}
html {
  font-family: "Arial", sans-serif;
  font-size: 87.5%; /* 14px (87.5% of 16px default browser font size) */
  line-height: 1.3;
  padding-bottom: env(safe-area-inset-bottom);
}
*[lang="ur"] {
  font-family: "UrduNastaliq", "Arial", sans-serif;
}


/* HEADER */

#global-header {
  width: 100%;
  margin: 0; padding: 0;
}
#global-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--wrapper-width);
  box-sizing: border-box;
  margin: 0 auto;
}
#global-header a {
  text-decoration: none;
  display: inline-block;
}
#global-header a:hover { border-color: currentColor; }
#global-header a.selected { border-color: currentColor; font-weight: bold; }
#global-header ul, #global-header ol {
  list-style: none;
  margin: 0; padding: 0;
}
#global-header li { display: inline-block; }
#global-header li + li { margin-left: 0.8rem; }

#top-bar {
  background-color: var(--top-bar-bg);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
#top-bar nav {
  background-color: var(--top-bar-nav-bg);
  padding: 1rem var(--wrapper-padding);
  flex-wrap: wrap;
}
#top-bar a {
  color: var(--top-bar-text-color);
  border-bottom: 1px solid var(--top-bar-nav-bg);
  margin-top: 0.4rem;
}
#top-bar #logo { border: none; }
#top-bar #logo svg {
  max-width: 100%;
  height: 1.7rem;
  margin: -0.2rem 0 -0.3rem 0;
  fill: currentColor;
}


/* CONTENT */

#breadcrumbs-bar {
  background-color: var(--breadcrumbs-bar-bg);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow-x: scroll;
  scrollbar-width: none;
}
#breadcrumbs-bar::-webkit-scrollbar { width: 0; height: 0; }
#breadcrumbs-bar nav {
  padding: 0.8rem var(--wrapper-padding) 0.7rem var(--wrapper-padding);
  white-space: nowrap;
}
#breadcrumbs-bar li + li::before { content: "/"; position: relative; left: -0.5rem; }
#breadcrumbs-bar a { border-bottom: 1px solid var(--breadcrumbs-bar-bg); }
#breadcrumbs-bar a#current-page { color: inherit; border-color: var(--breadcrumbs-bar-bg); }

#wrapper {
  display: flex;
  align-items: flex-start;
  max-width: var(--wrapper-width);
  margin: 0 auto; padding: 0;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
#wrapper::after {
  content: "";
  display: block;
  clear: both;
}
#content-wrapper,
#sidebar-wrapper {
  background-color: var(--page-bg);
  margin: 0; padding: 1rem var(--wrapper-padding) 2rem var(--wrapper-padding);
  box-sizing: border-box;
}
#content-wrapper {
  min-height: 400px;
  border-radius: 0 0 1em 1em;
  flex-grow: 1;
  width: 100%;
}
#sidebar-wrapper {
  transition: transform 0.1s ease-in-out;
  transform: scale(1);
  width: 300px;
  flex-grow: 0;
  flex-shrink: 1;
  border-radius: 0 0 1em 0;
  border: 1px solid var(--gray-90);
  border-width: 0 0 0 1px;
}
#sidebar-wrapper:empty {
  display: none;
}
#sidebar-wrapper.closed {
  transition: transform 0.1s ease-in-out;
  transform: scale(0);
  width: 0;
  padding: 0;
  border: 0;
}
@media screen and (max-width: 700px) {
  #wrapper {
    flex-direction: column-reverse;
  }
  #sidebar-wrapper {
    transition: height 0.2s ease-in-out;
    width: 100%; height: 300px;
    border-width: 0 0 6px 0;
    border-color: black;
    border-radius: 0;
    overflow: scroll;
  }
  #sidebar-wrapper.closed {
    transition: height 0.2s ease-in-out;
    width: 100%; height: 0;
    padding: 0 var(--wrapper-padding);
    border: 0;
  }
}


/* FOOTER */

#global-footer {
  font-size: 0.9em;
  text-align: center;
  padding: 0.8rem 0 2.4rem 0;
}
#global-footer a { color: var(--text-color); }


/* COMMON ELEMENTS (shared with ScriptureTools.net) */

section {
  margin: 0; padding: 0;
  clear: both;
  }
  section.left {
    display: inline-block;
    width: 70%;
    vertical-align: top;
    box-sizing: border-box;
  }
aside.sidebar {
  display: inline-block;
  background-color: var(--page-bg);
  width: calc(28% - 20px);
  min-height: 100px;
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: var(--gray-90);
  margin: 0 0 0 20px; padding: 20px 0 20px 20px;
  box-sizing: border-box;
  overflow: hidden;
  vertical-align: top;
  }
  @media screen and (max-width: 700px) {
    section.left {
      width: 100%;
    }
    aside.sidebar {
      width: 100%;
      margin: 10px 0; padding: 15px;
      border-width: 1px;
      background-color: var(--gray-98);
    }
  }
a { color: var(--link-normal);
  text-decoration: underline;
  cursor: pointer;
  }
  a:hover, a:active { color: var(--link-hover); }
  a:not([href]):not([onclick]) { color: inherit; text-decoration: inherit; cursor: auto; }
h1 {
  font-size: 2em; font-weight: bold;
  margin: 0.3em 0 0.7em 0; padding: 0;
}
h2 {
  font-size: 1.3em; font-weight: bold;
  margin: 1.2em 0 0.3em 0; padding: 0;
}
h3 {
  font-size: 1.1em; font-weight: bold;
  margin: 15px 0 12px 0;
}
h1, h2, h3 { scroll-margin-top: 30px; }
aside.sidebar h2:first-child,
aside.sidebar h3:first-child,
.column-list h2:first-child,
.column-list h3:first-child {
  margin-top: 0;
}
td {
  border: 1px solid #ddd;
  padding: 5px;
  vertical-align: top;
  font-size: 1em;
}
ul, ol {
  padding-left: 26px;
  }
  ul ul {
    padding-left: 17px;
    padding-bottom: 8px;
  }
summary {
  cursor: pointer;
}
hr {
  clear: both;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--gray-90);
  margin: 1.2em 0;
}
.info-box {
  background-color: var(--gray-95);
  margin: 0.75em 0; padding: 1.2em;
}
#page-messages {
  list-style: none;
  margin: 0; padding: 0;
}
.page-message .page-message-close,
.page-message .page-message-close:active {
  font-size: 1.2em;
  color: var(--page-bg);
}
.page-message {
  display: flex;
  justify-content: space-between;
  background-color: var(--gray-95);
  margin: 0.75em 0 0 0; padding: 0.7em 1em;
  text-indent: 0;
  border-radius: 0.2em;
}
.page-message:last-child {
  margin-bottom: 2em;
}
.page-message.info {
  background-color: var(--info-blue-bg);
  color: var(--page-bg);
}
.page-message.progress {
  background-color: var(--progress-orange-bg);
  color: var(--page-bg);
}
.page-message.success {
  background-color: var(--success-green-bg);
  color: var(--page-bg);
}
.page-message.failure {
  background-color: var(--failure-red-bg);
  color: var(--page-bg);
}
a.unindexed { color: var(--gray-67); }
a.selected { color: var(--text-color); font-weight: bold; text-decoration: none; }
.hidden:not(.unhidden) { display: none; }
.disabled {
  background-color: inherit;
  opacity: 50%;
  pointer-events: none;
}
.center { text-align: center; }
.left:not(section) { float: left; }
.right { float: right; }
.hanging-indent {
  text-indent: -1.15em;
  margin-left: 1.15em;
  display: block;
}
.id-number {
  font-size: 0.8em;
  color: var(--gray-67);
  text-transform: uppercase;
}
.svg-icon {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  width: 1em; height: 1em;
  vertical-align: text-top;
  flex-shrink: 0;
}
.modest-link,
.modest-link a {
  color: inherit;
}
.icon-button {
  font-size: 1em;
  font-family: inherit;
  color: var(--black);
  margin: 0; padding: 0.75em;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.icon-button .svg-icon {
  margin-left: 0.3em;
}
.icon-button i { font-size: 1.2em; }
.icon-button:active { color: var(--gray-67); }
.return-to-top {
  font-size: 1rem;
  font-weight: normal;
  margin: 0.5em;
  position: relative;
  white-space: nowrap;
}
span.anchor {
  display: inline-block;
  width: 0px; height: 0px;
  position: relative; top: -80px;
  padding: 0; margin: 0;
  float: right;
}


/* MODALS */

#overlay-background {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}
#overlay-background.dimmed {
  background-color: var(--translucent-black-bg);
}
.popup {
  display: none;
  position: absolute;
  right: 0;
  min-width: 140px;
  max-width: 300px;
  margin: 0; padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--gray-90);
  border-radius: 5px;
  background-color: var(--page-bg);
  box-shadow: 0px 0px 0em 1px rgba(0,0,0,0.1);
  z-index: 2;
}
.popup h2 {
  font-size: 0.8em;
  text-transform: uppercase;
  color: var(--gray-50);
  margin: 1em 0.5em 0.7em 0.5em;
}
.popup select {
  width: 100%;
}
.popup .menu-option {
  color: var(--text-color);
  display: flex;
  text-align: left;
  width: 100%;
  font-size: 1em;
  font-family: inherit;
  text-decoration: inherit;
  background: none;
  margin: 0; padding: 0.6em 0.6em;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
}
.popup .menu-option svg { margin-right: 0.4em; }
.popup .menu-option:hover, .popup .menu-option:active {
  background-color: var(--gray-95);
}
@media screen and (max-width: 300px) {
  .popup {
    right: -8px;
    width: calc(100vw - 1.2em);
  }
  .popup::before {
    right: 12px;
  }
}
.modal {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 70%; height: 70%;
  margin: auto;
  max-width: 700px;
  border: 1px solid var(--gray-67);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-color);
  background-color: var(--page-bg);
  box-shadow: 0px 0px 0 1px rgba(0,0,0,0.1);
  overflow: scroll;
  padding: 20px;
  z-index: 2;
  box-sizing: border-box;
}
.modal ::-webkit-scrollbar { display: auto; }
.close-modal-button {
  position: absolute;
  top: 21px; right: 14px;
  font-size: 2.2em;
}
@media screen and (max-height: 500px) {
  .modal {
    height: 100%;
    border-width: 0 1px;
    border-radius: 0;
  }
}
@media screen and (max-width: 700px) {
  .modal {
    width: 100%; height: 100%;
    border-width: 0;
    border-radius: 0;
  }
}


/* AUDIO PLAYER */

#audio-container { text-align: center; display: flex; flex-direction: column; }
#audio-container.audio-container-inline { flex-direction: row; }
#audio-container.audio-container-compact { height: 6rem; }
#above-scrubber-area {
  display: flex;
  align-items: center;
  justify-content: center;
}
#audio-container .inline-button { color: var(--gray-20); }
#play-pause { padding: 0.3rem; }
#above-scrubber-area #play-pause { font-size: 3.3rem; }
#above-scrubber-area #play-previous,
#above-scrubber-area #play-next {
  padding: 0.2rem;
  font-size: 3rem;
}
#scrubber-area {
  display: flex;
  align-items: center;
}
#scrubber-elapsed-time, #scrubber-total-time {
  font-size: 1rem;
  line-height: 2rem;
  width: 2.8rem;
  margin: 0 0.5rem;
}
#scrubber {
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background-color: var(--gray-90);
  border-radius: 2px;
  flex-grow: 1;
  width: 100%;
  min-width: 10px;
}
#scrubber::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--gray-67);
}
#below-scrubber-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 1.4rem;
}
#below-scrubber-area > * { margin: 0 1rem; }
#audio-description, #audio-verse-area {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
}
#audio-verse-title { margin: 0 0.3rem; }
#play-previous-verse[data-verse-number="null"],
#play-next-verse[data-verse-number="null"] {
  color: var(--gray-67);
  cursor: default;
}
#below-scrubber-area.fs-pinned,
#below-scrubber-area.pinned {
  z-index: 1;
  position: fixed;
  bottom: 0; left: 0;
  background-color: var(--page-bg);
  padding: 0.5rem 0.7rem max(calc(env(safe-area-inset-bottom) + 0.1rem), 0.5rem) max(calc(env(safe-area-inset-left) + 0.1rem), 0.7rem);
  border: 0 solid var(--gray-90);
  border-width: 2px 2px 0 0;
  border-radius: 0 1rem 0 0;
  z-index: 3;
}
@media screen and (max-width: 400px) {
  #below-scrubber-area {
    font-size: 1.2rem;
  }
  #below-scrubber-area.fs-pinned,
  #below-scrubber-area.pinned {
    right: 0;
    padding: 0.5rem max(calc(env(safe-area-inset-right) + 0.1rem), 0.7rem) max(calc(env(safe-area-inset-bottom) + 0.1rem), 0.5rem) max(calc(env(safe-area-inset-left) + 0.1rem), 0.7rem);
    border-width: 2px 0 0 0;
    border-radius: 0;
  }
}


/* SLIDING SIDEBAR AREA */

.sliding-sidebar-container {
  container: ssc / inline-size;
  display: flex;
  background-color: var(--page-bg);
  margin: 0 calc(var(--wrapper-padding) * -1);
  position: relative;
  overflow: hidden;
}
.sliding-sidebar-container .ssc-main {
  min-width: 0;
  flex-grow: 1;
  padding: 1rem var(--wrapper-padding) 2rem var(--wrapper-padding);
  overflow-y: scroll;
  z-index: 0;
}
.sliding-sidebar-container .ssc-sidebar {
  flex-grow: 0;
  background-color: var(--page-bg);
  box-sizing: border-box;
  width: 300px;
  min-width: 300px;
  padding: 1rem var(--wrapper-padding) 2rem var(--wrapper-padding);
  border-left: 1px solid var(--gray-90);
  overflow-y: scroll;
  z-index: 2;
}
.sliding-sidebar-container[data-state="closed"] .ssc-sidebar {
  display: none;
}
.ssc-overlay-background {
  display: none;
  position: absolute;
  background-color: var(--translucent-white-bg);
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}
@container ssc (max-width: 800px) {
  .sliding-sidebar-container .ssc-sidebar {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    box-shadow: 0px 0px 15px 2px var(--translucent-black-bg);
  }
  .sliding-sidebar-container[data-state="open"] .ssc-overlay-background {
    display: block;
  }
}
@container ssc (max-width: 350px) {
  .sliding-sidebar-container .ssc-sidebar {
    min-width: 0;
    width: 90%;
  }
}
.sliding-sidebar-container .ssc-titlebar {
  background-color: var(--page-bg);
  box-sizing: border-box;
  border-bottom: 1px solid var(--gray-90);
  margin: -1rem calc(var(--wrapper-padding) * -1) 0 calc(var(--wrapper-padding) * -1);
  padding: 0 calc(var(--wrapper-padding) * 0.5);
  display: flex;
  height: 4rem;
  align-items: center;
}
.sliding-sidebar-container .ssc-titlebar h2 {
  font-weight: normal;
  font-size: 1em;
  line-height: 1em;
}
.sliding-sidebar-container .ssc-titlebar button {
  font-size: 1.5em;
}
.sliding-sidebar-container .ssc-titlebar-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
}
.sliding-sidebar-container .ssc-titlebar-left > * {
  margin: 0 0.8rem 0 0;
}
.sliding-sidebar-container .ssc-titlebar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
}
.sliding-sidebar-container .ssc-titlebar-right > * {
  margin: 0 0 0 0.8rem;
}


/* TABS */

[role="tabpanel"]:not(.active-tab-panel) {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
.tab-bar {
  margin: 0 calc(var(--wrapper-padding) * -1);
  padding: 0 calc(var(--wrapper-padding) + 0.5em);
  padding-top: 1em;
  display: flex;
  align-items: flex-end;
  box-shadow: inset 0 -2px 0 0 var(--gray-90);
  font-size: 1.0em;
  background: linear-gradient(to bottom, var(--page-bg) 30%, var(--translucent-black-bg) 1600%);
  overflow: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
  z-index: 3;
}
.tab-bar::-webkit-scrollbar { width: 0; height: 0; }
.tab-bar.sticky {
  box-shadow: inset 0 -2px 0 0 var(--gray-90), 0 4px 10px -10px var(--page-bg);
  position: sticky;
  top: 0;
}
.tab-bar > input[type="radio"] {
  position: absolute;
  border: 0;
  clip: rect(0 0 0 0);
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
}
.tab-bar > label {
  display: flex;
  gap: 0.5em;
  align-items: center;
  margin: 0; padding: 0.5em 1.1em;
  border: 1px solid var(--gray-90);
  border-width: 2px 2px 0 2px;
  border-radius: 0.4em 0.4em 0 0;
  cursor: pointer;
  margin-right: -1px;
  white-space: nowrap;
}
.tab-bar > input[type="radio"]:checked + label {
  cursor: default;
  background-color: var(--page-bg);
  border-color: var(--gray-90);
  font-weight: bold;
  padding-top: 0.7em;
}
/* Simulate focus when focused element is hidden */
.tab-bar > input[type="radio"]:focus-visible + label {
  position: relative;
  outline-width: 2px;
  outline-style: solid;
  outline-color: Highlight;
}
@media (-webkit-min-device-pixel-ratio:0) { /* WebKit */
  .tab-bar > input[type="radio"]:focus-visible + label {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
  }
}


/* FORM ELEMENTS */

.filter-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.filter-sort-bar .button-bar {
  margin: 10px 0 10px 10px;
}

.filter-bar {
  flex-grow: 1;
  display: flex;
  align-items: center;
  position: relative;
  break-inside: avoid;
}
.filter-bar .filter-search-button,
.filter-bar .filter-clear-button {
  margin-top: 0.05em;
  font-size: 1.4em;
  position: absolute;
  cursor: pointer;
}
.filter-search-button { left: 0.3em; }
.filter-clear-button { right: 0.3em; }
.filter-bar .text-field { padding: 0.5em 2em; }
.filter-bar .text-field:placeholder-shown + .filter-clear-button {
  display: none;
}

.button-bar {
  display: inline-flex;
  position: relative;
}
.custom-picker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
}
.custom-picker li > label {
  cursor: pointer;  
}
.toggle-tags .divider::before {
  content: "|";
  margin: 0 0.3em;
}
.button-bar > input[type="radio"],
.button-bar > input[type="checkbox"], 
.custom-picker li > input[type="radio"],
.custom-picker li > input[type="checkbox"] {
  position: absolute;
  border: 0;
  clip: rect(0 0 0 0);
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
}
.button-bar > button {
  font-size: 1em;
  font-family: inherit;
  color: inherit;
  background: none;
  margin: 0;
}
.button-bar > label, .button-bar > button {
  background-color: var(--gray-95);
  border: 1px solid var(--gray-67);
  border-width: 1px 0 1px 1px;
  padding: 5px 7px;
  cursor: pointer;
}
.button-bar > input[type="radio"]:checked + label,
.button-bar > input[type="checkbox"]:checked + label {
  cursor: default;
}
.button-bar > label:first-of-type, .button-bar > button:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.button-bar > label:last-of-type, .button-bar > button:last-of-type {
  border-width: 1px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.button-bar > label:active,
.button-bar > input[type="radio"]:checked + label,
.button-bar > input[type="checkbox"]:checked + label,
.button-bar > button:active,
.button-bar > button[aria-expanded="true"] {
  color: inherit;
  background-color: var(--gray-90);
}

/* Simulate focus when focused element is hidden */
.button-bar > input[type="radio"]:focus-visible + label,
.button-bar > input[type="checkbox"]:focus-visible + label,
.custom-picker li > input[type="radio"]:focus-visible + label,
.custom-picker li > input[type="checkbox"]:focus-visible + label,
.simulated-focus {
  position: relative;
  outline-width: 2px;
  outline-style: solid;
  outline-color: Highlight;
}
@media (-webkit-min-device-pixel-ratio:0) { /* WebKit */
  .button-bar > input[type="radio"]:focus-visible + label,
  .button-bar > input[type="checkbox"]:focus-visible + label,
  .custom-picker li > input[type="radio"]:focus-visible + label,
  .custom-picker li > input[type="checkbox"]:focus-visible + label,
  .simulated-focus {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
  }
}
.custom-picker li > input[type="radio"] + label.show-checked::before,
.custom-picker li > input[type="checkbox"] + label.show-checked::before {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px; bottom: 2px; left: 2px; right: 2px;
  content: "✓";
  color: var(--link-normal);
  font-size: 2.5em;
  text-shadow:
    -1px -1px 0 var(--page-bg),
     0   -1px 0 var(--page-bg),
     1px -1px 0 var(--page-bg),
     1px  0   0 var(--page-bg),
     1px  1px 0 var(--page-bg),
     0    1px 0 var(--page-bg),
    -1px  1px 0 var(--page-bg),
    -1px  0   0 var(--page-bg);
  border: 2px solid var(--page-bg);
  outline: 2px solid var(--link-normal);
  z-index: 15;
}
.custom-picker li > input[type="radio"]:checked + label.show-checked::before,
.custom-picker li > input[type="checkbox"]:checked + label.show-checked::before {
  display: flex;
}
.custom-picker li > input[type="radio"]:checked + label.show-checked,
.custom-picker li > input[type="checkbox"]:checked + label.show-checked {
  border-color: var(--link-normal);
}

.select-nav { display: flex; }
.select-nav button { flex-shrink: 0; }
.select-nav select {
  display: flex;
  margin-right: 0.25rem;
  max-width: 70%;
}

.tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--gray-95);
  color: var(--text-color);
  font-size: 0.9em;
  line-height: 1em;
  text-decoration: none;
  margin: 0.4em 0.3em; padding: 0.6em 1em;
  border: none;
  border-radius: 3em;
  cursor: pointer;
}
.tag:hover, .tag:active {
  background-color: var(--gray-90);
  color: var(--text-color);
}
.tag.selected,
.toggle-tags li > input[type="radio"]:checked + label.tag {
  background-color: var(--link-normal);
  color: var(--page-bg);
}
.tag.selected:hover, .tag.selected:active,
.toggle-tags li > input[type="radio"]:checked + label.tag:hover,
.toggle-tags li > input[type="radio"]:checked + label.tag:active {
  background-color: var(--link-hover);
  color: var(--page-bg);
}

.btn {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 1.1em;
  line-height: 1.1em;
  text-decoration: none;
  margin: 0.25em; padding: 0.5em 0.6em;
  border: 1px solid var(--text-color);
  border-radius: 0.3em;
  cursor: pointer;
}
.primary-btn {
  color: var(--page-bg);
  background-color: var(--btn-normal);
  border-color: var(--btn-normal);
}
.primary-btn:hover, .primary-btn:active {
  color: var(--page-bg);
  background-color: var(--btn-hover);
  border-color: var(--btn-hover);
}
.secondary-btn {
  color: var(--btn-normal);
  background: none;
  border-color: var(--btn-normal);
}
.secondary-btn:hover, .secondary-btn:active {
  color: var(--btn-hover);
  border-color: var(--btn-hover);
}

.inline-button {
  color: var(--text-color);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  font-size: inherit;
  font-family: inherit;
  text-decoration: inherit;
  background: none;
  margin: 0; padding: 0;
  border: 0;
  cursor: pointer;
}
.inline-button:active {
  color: var(--gray-67);
}

.text-field {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  font-size: 1em;
  font-family: inherit;
  margin: 0.4em 0 0.4em 0em; padding: 0.5em;
  background-color: var(--page-bg);
  color: var(--text-color);
}
.text-field:not([list]) {
  border: 1px solid var(--gray-67);
}
.text-field.w30 { max-width: 30px; }
.text-field.w50 { max-width: 50px; }
.text-field.wide { max-width: 400px; }
.text-field.fullwidth { max-width: 100%; }
.text-field[disabled], .text-field.validated:not(:focus) {
  background-color: var(--gray-95);
}


/* VERTICAL ICON LINKS */

.vertical-links {
  list-style-type: none;
  margin: 0 1em 0.5em 0;
}
.vertical-links li.icon-link {
  position: relative;
  margin-bottom: 0.5em;
}
.vertical-links li.icon-link::before {
  font-family: 'FontAwesome', sans-serif;
  text-decoration: none;
  margin-right: 0.4em;
  width: 1.5em;
  text-align: center;
  position: absolute;
  color: var(--gray-35);
  opacity: 0.6;
  left: -1.8em;
}
.vertical-links li.presentation-link::before { content: "\f26c"; }
.vertical-links li.view-song-link::before { content: "\f061"; }
.vertical-links li.cross-reference-link::before { content: "\f0f6"; }
.vertical-links li.app-link::before { content: "\f061"; }
.vertical-links li.download-link::before { content: "\f063"; }
.vertical-links li.video-link::before { content: "\f16a"; }
.vertical-links li.disabled::before { content: ""; }








ul.column-list {
  font-size: 14px;
  line-height: 1.4em;
  column-width: 240px;
  column-gap: 28px;
  column-rule: .1em solid var(--gray-90);
  margin: 20px 0;
  padding: 0 14px 0 14px;
  list-style-type: none;
  border-left: 1px solid var(--gray-90);
}
ul.column-list li {
  margin-left: 20px;
  text-indent: -20px;
  margin-bottom: 2px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.banner {
  background-color: var(--gray-95);
  padding: 5px 8px;
  clear: both;
}



/* Thumbnail images (not cleaned up) */

div.thumbs-container {
  display: inline-block;
  margin: 3px;
  font-size: 0px;
  white-space: nowrap;
  vertical-align: top;
  min-width: 76px;
  max-width: 300px;
  overflow: scroll;
  text-align: center;
}
div.thumbs-container.right {
  text-align: right;
}
a.thumb {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  vertical-align: top;
  border: 1px solid #eee;
  background-color: #eee;
  margin: 2px;
}
a.thumb.mini {
  width: 70px;
  height: 70px;
}
a.thumb.tiny {
  width: 40px;
  height: 40px;
}
a.thumb img {
  width: 100px;
  border: none;
}
a.thumb.mini img {
  width: 70px;
  border: none;
}
a.thumb.tiny img {
  width: 40px;
  border: none;
}
div.thumbs-container a.thumb:not(:first-child) {
  width: 25px;
}
a.thumb span {
  text-align: left;
  position: absolute;
  bottom: 0px;
  background-color: rgba(0,0,0,.7);
  width: 100%;
  padding: 2px 4px;
  margin: 0;
  color: #fff;
  font-size: 8px;
  line-height: 10px;
  box-sizing: border-box;
}
a.thumb span.centered {
  text-align: center;
}
div.thumbs-container a.thumb.mini:not(:first-child), div.thumbs-container a.thumb.tiny:not(:first-child) {
  width: 20px;
}


/* Tag bubbles */

.bubble-set {
  display: inline-block;
  margin: 0; padding: 0;
  width: 100%;
}
.bubble-set:empty {
  display: none;
}
.bubble {
  display: inline-flex;
  background-color: var(--top-bar-nav-bg);
  margin: 0.25em 0.5em 0.25em 0; padding: 0 0.7em;
  border-radius: 10em;
  align-items: center;
  color: var(--top-bar-text-color);
  max-width: 100%;
  box-sizing: border-box;
}
.bubble a, .bubble button {
  display: flex;
  align-items: center;
  color: inherit;
  height: 2em;
}
.bubble a {
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}
.bubble a:not([href]) { cursor: text; }
.bubble .remove-bubble-btn {
  margin: 0 -0.5em 0 0; padding: 0 0.6em;
  background: none;
  border: 0;
  font-size: inherit;
  cursor: pointer;
}
.bubble .remove-bubble-btn::before {
  font-size: 1.2em;
  content: "✕";
}
.bubble-set-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.75em 0;
}
.bubble-set-form input {
  -webkit-appearance: none;
  background-color: var(--page-bg);
  color: var(--text-color);
  font-family: 'Arial', 'Helvetica', sans-serif, 'FontAwesome';
  border: 1px solid var(--gray-67);
  font-size: 1em;
  margin-right: 0.5em;
  max-width: 18em;
  height: 2.25em;
  padding: 0 0.75em;
  box-sizing: border-box;
  flex-grow: 1;
}

/* Table list */

.table-list {
  width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
  margin: 10px 0;
  position: relative;
}
.table-list caption {
  text-align: left;
  font-size: 1.4em;
  font-weight: bold;
  padding: 0.5em 0;
}
.table-list th {
  vertical-align: bottom;
}
.table-list th, .table-list td {
  text-align: left;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--gray-90);
  padding: 8px;
  font-weight: normal;
}
.table-list tbody:not(:first-of-type)::before {
  content: "";
  display: table-row;
  height: 18px;
}
.table-list th {
  border-top: none;
}
.table-list .large-title,
.table-list .medium-title,
.table-list .small-title {
  font-weight: bold;
  line-height: 1.2em;
}
.table-list .large-title { font-size: 1.4em; }
.table-list .medium-title { font-size: 1.2em; }
.table-list .small-title { font-size: 1em; }
.table-list th:not(:first-child) {
  font-weight: bold;
  font-size: 1em;
}
.table-list td:first-child { padding-left: 12px; }
.table-list td:last-child { padding-right: 12px; }
.table-list td.number {
  padding-right: 0;
}
.table-list[data-sort-options~="number"] td.number {
  text-align: right;
  width: 40px;
}
.table-list[data-sort-options~="date"] td.number {
  width: 65px;
}


/* Video playlist */

#video-player {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}
#video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
#video-iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}
#video-description {
  background-color: var(--gray-95);
  padding: 1em;
  text-align: center;
  line-height: 1.6em;
  cursor: pointer;
}
#video-list {
  display: none;
  border-collapse: collapse;
  background-color: var(--gray-95);
  border: 0em solid var(--gray-95);
  border-width: 0.5em 0 0.75em 0;
  max-height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
#video-list tr {
  cursor: pointer;
  padding: 0.25em 0;
  clear: both;
}
#video-list td {
  padding: 0.5em 0em;
  border: 0;
  line-height: 1.4em;
}
#video-list td:nth-child(1) {
  min-width: 1em;
  color: transparent;
  text-align: center;
  padding-left: 1em;
}
#video-list td:nth-child(2) {
  text-align: right;
  padding-left: 0.75em;
  padding-right: 0.5em;
}
#video-list td:nth-child(3) {
  padding-right: 1em;
}  
#video-list tr:hover, #video-list tr.selected {
  background-color: var(--gray-90);
}
#video-list tr.selected td:nth-child(1) {
  color: var(--text-color);
}


/* Thumbnail images */

.thumbs-grid {
  display: inline-flex;
  flex-wrap: wrap;
}
.thumbs-grid h1,
.thumbs-grid h2,
.thumbs-grid h3,
.thumbs-grid h4,
.thumbs-grid h5 {
  width: 100%;
}
.square-thumb-container {
  display: inline-block;
  background-color: var(--gray-95);
  border: 1px solid var(--gray-90);
  margin: 2px;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.square-thumb-container.size50px { width: 50px; height: 50px; }
.square-thumb-container.size70px { width: 70px; height: 70px; }
.square-thumb-container.size80px { width: 80px; height: 80px; }
.square-thumb-container.size100px { width: 100px; height: 100px; }
.square-thumb-container.size120px { width: 120px; height: 120px; }
.square-thumb-container.size160px { width: 160px; height: 160px; }
.square-thumb-container.size240px { width: 240px; height: 240px; }
.square-thumb-container > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.square-thumb-container > span {
  background-color: var(--translucent-black-bg);
  font-size: 10px;
  line-height: 12px;
  color: var(--top-bar-text-color);
  text-align: left;
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  margin: 0; padding: 2px 4px;
  box-sizing: border-box;
}


.options-btn {
  color: var(--text-color);
  display: inline-flex;
  align-items: center;
  font-size: 1em;
  background: none;
  height: 1.3em;
  margin: 0 0 0 0.5em; padding: 0 0.3em;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.options-btn[aria-expanded="true"] {
  background-color: var(--gray-90);
}
.options-btn.large {
  font-size: 1.3em;
}



.flex-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.7em;
}
.flex-header h1, .flex-header h2, .flex-header h3,
.flex-header h4, .flex-header h5, .flex-header h6 {
  margin-bottom: 0;
  flex-grow: 1;
}
.flex-header p { margin: 0.5em 0 0 0; }

.scrollable-wrapper {
  width: 100%;
  overflow-y: auto;
  margin: 0 calc(var(--wrapper-padding) * -1);
  padding: 0 var(--wrapper-padding);
  box-sizing: content-box;
  mask-image: linear-gradient(to right, transparent 0, black var(--wrapper-padding), black calc(100% - var(--wrapper-padding)), transparent 100%)
}
.scrollable-wrapper::after {
  
}


.inline-marker::after {
  display: inline-block;
  content: "";
  font-size: 0.7em;
  line-height: 0.8em;
  font-weight: bold;
  background-color: var(--info-blue-bg);
  color: var(--page-bg);
  text-decoration: none;
  margin: 0 0.3em 0 0.3em;
  border-radius: 0.4em;
  padding: 0.4em;
  position: relative; top: -0.1em;
  text-indent: 0;
}
.inline-marker:empty::after {
  margin: 0;
}


.instances-list {
  list-style: none;
  padding: 0;
  column-width: 300px;
  column-gap: 28px;
  column-rule: .1em solid var(--gray-90);
}
.instances-list li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.instance {
  display: flex;
  padding: 0.4em 0;
}
.instance.collapsed {
  padding: 0 0 0.6em 56px;
}
.instance .other-editions {
  color: var(--gray-50);
  font-style: italic;
  margin-top: 0.6em;
}
.instance > div {
  flex-grow: 1;
}
.instance p {
  margin: 0 0 0 1em; padding: 0.3em 0 0 0.8em;
  text-indent: -1em;
}
.instance .inline-marker-group {
  float: right;
  display: inline-block;
  margin-left: 0.5em;
  text-indent: 0;
}
.instance-people {
  margin: 0.3em 1em;
  font-size: 0.8em;
  color: var(--gray-50);
}
.has-lyrics-marker::after {
  content: "L";
  background-color: #DA557B;
}
.has-sheet-music-marker::after {
  content: "S";
  background-color: #f18c6a;
}
.has-audio-marker::after {
  content: "A";
  background-color: #2eafb8;
}
.has-video-marker::after {
  content: "V";
  background-color: #92C44A;
}


.simple-lyrics .verse-group {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.simple-lyrics .verse-group:last-child {
  padding-bottom: 2em;
}
.simple-lyrics .verse,
.simple-lyrics .chorus {
  margin: 0; padding: 0.4em 0;
}
.simple-lyrics .verse > span,
.simple-lyrics .chorus > span {
  display: block;
  text-indent: -2em;
  margin-left: 2em;
}
.simple-lyrics .chorus { font-style: italic; }
.simple-lyrics span.marker {
  font-weight: bold;
}


.horizontal-scroll {
  display: flex;
  overflow-y: scroll;
  margin: 0 calc(-1 * var(--wrapper-padding));
  padding: 0 var(--wrapper-padding);
}
.horizontal-scroll::after {
  content: "";
  min-width: var(--wrapper-padding);
}


dl.shortcuts {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
dl.shortcuts dt {
  flex-basis: 40%;
  text-align: right;
  margin: 0.3em; padding: 0;
}
dl.shortcuts dd {
  flex-basis: 50%;
  margin: 0.3em; padding: 0;
}
.keycap {
  font-size: 0.8em;
  display: inline-block;
  border: 1px solid var(--gray-67);
  border-radius: 0.3em;
  margin: 0.3em; padding: 0.3em 0.5em;
  min-width: 1.1em;
  text-align: center;
}



details.accordion {
  border: 1px solid var(--gray-75);
  border-radius: 0.5em;
  padding: 1em;
  position: relative;
}
details.accordion summary {
  margin: -1em; padding: 1em;
  border-radius: 0.5em;
  position: sticky;
  top: 0;
  background-color: var(--page-bg);
}
details.accordion[open] summary {
  font-weight: bold;
  border-radius: 0.5em 0.5em 0 0;
  border-bottom: 1px solid var(--gray-90);
  margin-bottom: 1em;
  z-index: 4;
}
details.accordion .close-accordion {
  appearance: none;
  cursor: pointer;
  position: sticky;
  bottom: 0;
  border: 0;
  border-radius: 0 0.5em 0 0.5em;
  border-top: 1px solid var(--gray-75);
  border-right: 1px solid var(--gray-75);
  margin: 0 -1em -1em -1em;
  padding: 1em;
  box-sizing: content-box;
  background-color: var(--page-bg);
  color: var(--gray-35);
  font-size: inherit;
  font-family: inherit;
  text-align: left;
  z-index: 3;
}
details.accordion .close-accordion::after {
  content: '\00a0\00a0\00a0✕';
  color: var(--gray-50);
}




[data-copyright-status] {
  vertical-align: top;
}
[data-copyright-status]::before {
  display: inline-block;
  content: attr(data-copyright-status);
  font-size: 0.7em;
  line-height: 0.8em;
  font-weight: bold;
  background-color: var(--gray-75);
  color: var(--page-bg);
  text-decoration: none;
  margin: 0 0.5em 0 0;
  border-radius: 0.4em;
  padding: 0.4em;
  position: relative; top: -0.2em;
  text-indent: 0;
}
[data-copyright-status="PD"]::before, [data-copyright-status="PD-NR"]::before, [data-copyright-status="PD+Other"]::before, [data-copyright-status="PD+IRI"]::before {
  background-color: green;
}
[data-copyright-status="IRI"]::before, [data-copyright-status="IRI?"]::before {
  background-color: mediumblue;
}
[data-copyright-status="Other"]::before {
  background-color: firebrick;
}