.code-block-plugin .layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
}
.code-block-plugin .layout,
.code-block-plugin .layout .component-label,
.code-block-plugin .layout .component-title {
  color: var(--theme-text-color);
}
.code-block-plugin .layout .component-label {
  font-family: var(--theme-title-font);
}
.code-block-plugin .layout .component-instructions,
.code-block-plugin .layout .component-caption {
  margin-bottom: 15px;
}
.code-block-plugin .layout .component-caption {
  font-family: var(--theme-title-font);
  margin-top: 15px;
}
.code-block-plugin .codeEditorContainer {
  display: grid;
  grid-template-columns: 50px 1fr;
  height: 100%;
  flex: 1;
  overflow-x: auto;
  font-family: monospace !important;
}
.code-block-plugin .codeEditorContainer *,
.code-block-plugin .codeEditorContainer textarea,
.code-block-plugin .codeEditorContainer pre {
  font-family: monospace !important;
}
.code-block-plugin .codeEditorContainer .codeEditor {
  padding-left: 10px;
}
.code-block-plugin .codeEditorContainer .codeEditor .token-line {
  white-space: pre;
}
.code-block-plugin .codeEditorContainer .codeEditor textarea {
  outline: none !important;
}
.code-block-plugin .codeEditorContainer .codeEditor .code-content {
  display: block;
  white-space: pre;
}
.code-block-plugin .codeEditorContainer .screen-reader-only {
  position: absolute;
  width: 1px;
  height: 0px;
  overflow: hidden;
}
.code-block-plugin .gutterContainer .gutterElement {
  text-align: right;
  margin-right: 2px;
}
.code-block-plugin pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
.code-block-plugin .hljs {
  color: #333;
  background: #f8f8f8;
}
.code-block-plugin .hljs-comment {
  color: #717160;
  font-style: italic;
}
.code-block-plugin .hljs-quote {
  color: #717160;
  font-style: italic;
}
.code-block-plugin .hljs-keyword {
  color: #333;
  font-weight: bold;
}
.code-block-plugin .hljs-selector-tag {
  color: #333;
  font-weight: bold;
}
.code-block-plugin .hljs-subst {
  color: #333;
  font-weight: normal;
}
.code-block-plugin .hljs-number {
  color: #1d7c7c;
}
.code-block-plugin .hljs-literal {
  color: #1d7c7c;
}
.code-block-plugin .hljs-variable {
  color: #1d7c7c;
}
.code-block-plugin .hljs-template-variable {
  color: #1d7c7c;
}
.code-block-plugin .hljs-tag .hljs-attr {
  color: #1d7c7c;
}
.code-block-plugin .hljs-string {
  color: #d14;
}
.code-block-plugin .hljs-doctag {
  color: #d14;
}
.code-block-plugin .hljs-title {
  color: #900;
  font-weight: bold;
}
.code-block-plugin .hljs-section {
  color: #900;
  font-weight: bold;
}
.code-block-plugin .hljs-selector-id {
  color: #900;
  font-weight: bold;
}
.code-block-plugin .hljs-type {
  color: #458;
  font-weight: bold;
}
.code-block-plugin .hljs-class .hljs-title {
  color: #458;
  font-weight: bold;
}
.code-block-plugin .hljs-tag {
  color: #000080;
  font-weight: normal;
}
.code-block-plugin .hljs-name {
  color: #000080;
  font-weight: normal;
}
.code-block-plugin .hljs-attribute {
  color: #000080;
  font-weight: normal;
}
.code-block-plugin .hljs-regexp {
  color: #008422;
}
.code-block-plugin .hljs-link {
  color: #008422;
}
.code-block-plugin .hljs-symbol {
  color: #990073;
}
.code-block-plugin .hljs-bullet {
  color: #990073;
}
.code-block-plugin .hljs-built_in {
  color: #007aa3;
}
.code-block-plugin .hljs-builtin-name {
  color: #007aa3;
}
.code-block-plugin .hljs-meta {
  color: #727272;
  font-weight: bold;
}
.code-block-plugin .hljs-deletion {
  background: #fdd;
}
.code-block-plugin .hljs-addition {
  background: #dfd;
}
.code-block-plugin .hljs-emphasis {
  font-style: italic;
}
.code-block-plugin .hljs-strong {
  font-weight: bold;
}
.code-block-plugin .language-matlab {
  color: #000;
}
.code-block-plugin .language-matlab .hljs-string {
  color: #aa04f9;
}
.code-block-plugin .language-matlab .hljs-comment {
  color: #028009;
  font-style: normal;
}
.code-block-plugin .language-matlab .hljs-built_in,
.code-block-plugin .language-matlab .hljs-index-end,
.code-block-plugin .language-matlab .hljs-title,
.code-block-plugin .language-matlab .hljs-number {
  color: #000;
}
.code-block-plugin .language-matlab .hljs-title {
  font-weight: inherit;
}
.code-block-plugin .language-matlab .hljs-keyword {
  color: #0e00ff;
  font-weight: inherit;
}
.code-block-plugin .language-matlab .hljs-special_keywords {
  color: #a020f0;
}
.code-block-plugin .language-matlab .hljs-syntax-error {
  color: #ff0000;
}
.code-block-plugin .language-matlab .hljs-validationSectionSize,
.code-block-plugin .language-matlab .hljs-validationSectionClass,
.code-block-plugin .language-matlab .hljs-validationSectionFunctions {
  color: #a0522d;
}
.code-block-plugin .language-matlab .hljs-unclosed-string {
  color: #c40000;
}
.code-block-plugin .language-cpp .hljs-type {
  color: #333;
  font-weight: bold;
}
.code-block-plugin .language-cpp .hljs-meta .hljs-keyword {
  color: #727272;
  font-weight: bold;
}
.code-block-plugin .language-cpp .hljs-meta .hljs-string {
  color: #727272;
}
.code-block-plugin .language-java .hljs-type {
  color: #333;
  font-weight: bold;
}
.code-block-plugin .language-java .hljs-variable {
  color: #333;
}
.code-block-plugin .language-java .hljs-custom-keyevent {
  color: #900;
  font-weight: bold;
}
.code-block-plugin .language-java .hljs-sql-keyword {
  color: #900 !important;
  font-weight: bold;
}
.code-block-plugin .language-java .hljs-function-call {
  color: inherit;
}
.code-block-plugin .language-java .hljs-title {
  color: inherit !important;
  font-weight: normal !important;
}
.code-block-plugin pre,
.code-block-plugin code {
  font-size: 16px;
}.etext-mcq-plugin {
  color: var(--text-color, currentColor);
  text-align: left;
  padding: 0;
  max-width: 240px;
  margin: 0 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .etext-mcq-plugin {
    max-width: none;
    margin-left: -5px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
.etext-mcq-plugin .question {
  min-width: 0;
  max-width: 100%;
}
.etext-mcq-plugin .question-prompt {
  margin: 0 0 30px 0;
  min-width: 0;
  max-width: 100%;
  font-family: var(--title-font);
}
.etext-mcq-plugin .component-label {
  font-family: var(--title-font);
}
.etext-mcq-plugin .etext-mcq-plugin__label-block {
  margin-bottom: 15px;
}
.etext-mcq-plugin .etext-mcq-plugin__label-block h4.component-label-section {
  margin: 0;
  padding-bottom: 0;
  font-size: 1em;
  line-height: 1.3;
}
.etext-mcq-plugin .etext-mcq-plugin__label-block .component-instructions {
  font-style: normal;
}
.etext-mcq-plugin .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
}
.etext-mcq-plugin .button-row button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: var(--primary-color);
  color: #fff;
  font-family: Open Sans, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.etext-mcq-plugin .button-row button:hover {
  background-color: var(--primary-color-40);
}
.etext-mcq-plugin .button-row button:active {
  background-color: var(--primary-color-70);
}
.etext-mcq-plugin .button-row button:focus {
  box-shadow: 0 0 0 2px var(--text-color);
}
.etext-mcq-plugin .answer-options {
  min-width: 0;
}
.etext-mcq-plugin .mcq-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 15px auto 8px;
}
.etext-mcq-plugin .mcq-image.mcq-image--choice {
  grid-column: 2;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
}
.etext-mcq-plugin .mcq-image.mcq-image--question {
  margin: 25px auto 40px;
  min-width: 0;
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.etext-mcq-plugin .mcq-image.mcq-image--feedback {
  display: block;
  min-width: 0;
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  margin: 12px auto 0;
  object-fit: contain;
}
.etext-mcq-plugin .mcq-feedback-image-button {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.etext-mcq-plugin .mcq-feedback-image-button .mcq-image--feedback {
  margin: 0 auto;
}
.etext-mcq-plugin .mcq-long-desc {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.etext-mcq-plugin .mcq-answer {
  margin: 15px 0 30px 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  min-width: 0;
  overflow: visible;
  font-family: var(--body-font);
}
.etext-mcq-plugin .mcq-answer.mcq-answer--option {
  width: 100%;
}
.etext-mcq-plugin .mcq-option p {
  display: block;
  text-wrap: wrap;
}
.etext-mcq-plugin .mcq-option > p:first-child {
  margin-top: 0;
}
@media (max-width: 640px) {
  .etext-mcq-plugin .mcq-answer .MathJax_SVG {
    max-width: calc(100vw - 50px);
    padding-right: 24px;
    overflow-x: auto;
  }
  .etext-mcq-plugin .mcq-answer .MathJax_SVG svg {
    max-width: unset !important;
  }
}
.etext-mcq-plugin input.mcq-selector[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  grid-column: 1;
  margin: 1px 0 0;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--text-color, rgba(33, 33, 33, 0.85));
  background-color: var(--surface-color, var(--background-color, #ffffff));
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etext-mcq-plugin input.mcq-selector[type=checkbox]::before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border-radius: 2px;
  transform: rotate(45deg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.etext-mcq-plugin input.mcq-selector[type=checkbox]:checked {
  padding: 2px;
  border-color: var(--primary-color, #0073ca);
  box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 10px var(--primary-color, #0073ca);
}
.etext-mcq-plugin input.mcq-selector[type=checkbox]:checked::before {
  width: 9px;
  height: 9px;
  margin: 0 auto;
  background-color: #fff;
}
.etext-mcq-plugin input.mcq-selector[type=checkbox]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.etext-mcq-plugin input.mcq-selector[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  grid-column: 1;
  margin: 1px 0 0;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  outline: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: var(--text-color, currentColor);
  box-shadow: 0 0 0 1px var(--text-color, currentColor);
}
.etext-mcq-plugin input.mcq-selector[type=radio]::before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border-radius: 50%;
  cursor: pointer;
}
.etext-mcq-plugin input.mcq-selector[type=radio]:checked {
  padding: 2px;
  box-shadow: 0 0 0 1px var(--text-color, currentColor);
}
.etext-mcq-plugin input.mcq-selector[type=radio]:checked::before {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--primary-color);
}
.etext-mcq-plugin input.mcq-selector[type=radio]:not(:checked):not(:disabled):hover,
.etext-mcq-plugin input.mcq-selector[type=radio]:not(:checked):not(:disabled):focus {
  box-shadow: 0 0 0 2px var(--text-color, currentColor);
  margin-left: 1px;
}
.etext-mcq-plugin input.mcq-selector[type=radio]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.etext-mcq-plugin .mcq-feedback-icon {
  width: 20px;
  height: 20px;
  grid-column: 1;
  position: relative;
  margin: 0;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 50%;
  overflow: hidden;
}
.etext-mcq-plugin .mcq-feedback-icon.correct, .etext-mcq-plugin .mcq-feedback-icon.mcq-feedback-icon--correct {
  background-color: var(--success-color);
}
.etext-mcq-plugin .mcq-feedback-icon.incorrect, .etext-mcq-plugin .mcq-feedback-icon.mcq-feedback-icon--incorrect {
  background-color: var(--error-color);
}
.etext-mcq-plugin .mcq-feedback-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.etext-mcq-plugin .mcq-option {
  grid-column: 2;
  min-width: 0;
  cursor: pointer;
}
.etext-mcq-plugin .mcq-option.mcq-option--locked {
  cursor: default;
}
.etext-mcq-plugin .mcq-response {
  grid-column: 2;
  min-width: 0;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.etext-mcq-plugin .mcq-response.mcq-response--hidden {
  display: none;
}
@media (max-width: 640px) {
  .etext-mcq-plugin .mcq-response {
    grid-column: 1/span 2;
  }
}
.etext-mcq-plugin .mcq-response-header {
  margin-bottom: 15px;
}
.etext-mcq-plugin .mcq-feedback-text {
  margin-top: 8px;
}
.etext-mcq-plugin .mcq-feedback-text p {
  margin: 0.5em 0 0;
}
.etext-mcq-plugin .mcq-feedback-text p:first-child {
  margin-top: 0;
}

#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=radio],
#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=checkbox] {
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  position: relative !important;
}

#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=checkbox] {
  display: inline-flex !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=radio] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 1px 0 0 !important;
  border: 1px solid var(--text-color, #ccc) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--text-color, currentColor) !important;
  box-shadow: 0 0 0 1px var(--text-color, currentColor) !important;
}

#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=radio]::before {
  content: "" !important;
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 60% !important;
  height: 60% !important;
  margin: 20% auto !important;
  border-radius: 50% !important;
}

#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=radio]:checked {
  padding: 2px !important;
  border: 1px solid var(--text-color, #ccc) !important;
  box-shadow: 0 0 0 1px var(--text-color, currentColor) !important;
}

#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=radio]:not(:checked):not(:disabled):hover,
#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=radio]:not(:checked):not(:disabled):focus {
  box-shadow: 0 0 0 2px var(--text-color, currentColor) !important;
  margin-left: 1px !important;
}

#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=radio]:checked::before {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 50% !important;
}

#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer input.mcq-selector[type=radio]:not(:checked)::before {
  background: transparent !important;
}

#viewer-express-container .etext-mcq-plugin ol,
#viewer-express-container .etext-mcq-plugin ul {
  padding: 0;
}

#viewer-express-container .etext-mcq-plugin .answer-options .mcq-answer .mcq-feedback-icon {
  margin: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  line-height: 0 !important;
}.bronte-lib-math-block .annotation-text-highlight {
  display: block;
}

.annotation-mathml {
  display: inherit;
}

.annotation-text-highlight {
  position: relative;
}
.annotation-text-highlight.yellow {
  background-size: contain, auto;
  background-position: right bottom, right bottom;
  background-repeat: repeat, repeat-x;
  padding-bottom: 3px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDBWMFoiIGZpbGw9IiNmNGQ5N2IiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPC9zdmc+CiAgICAgICAg), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cmVjdCB5PSIyMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjIiIGZpbGw9IiNlZWE0MmUiLz4KICAgICAgICA8L3N2Zz4KICAgICAgICA=);
}
.annotation-text-highlight.yellow.mobile-note::after {
  content: "";
  position: absolute;
  margin-left: -8px;
  bottom: -7px;
  right: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  transform: translateY(-50%);
  border-color: transparent rgb(239, 174, 62) rgb(239, 174, 62) transparent;
}
.annotation-text-highlight.green {
  background-size: contain, auto;
  background-position: right bottom, right bottom;
  background-repeat: repeat, repeat-x;
  padding-bottom: 3px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDBWMFoiIGZpbGw9IiMwMWNiYjciIGZpbGwtb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPC9zdmc+CiAgICAgICAg), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cmVjdCB5PSIyMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjIiIGZpbGw9IiMwMDc5NmQiLz4KICAgICAgICA8bGluZSB4MT0iMC41IiB5MT0iMjAuNSIgeDI9IjIzLjUiIHkyPSIyMC41IiBzdHJva2U9IiMwMDc5NmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iNiA2Ii8+CiAgICAgICAgPC9zdmc+CiAgICAgICAg);
}
.annotation-text-highlight.green.mobile-note::after {
  content: "";
  position: absolute;
  margin-left: -8px;
  bottom: -7px;
  right: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  transform: translateY(-50%);
  border-color: transparent rgb(0, 138, 124) rgb(0, 138, 124) transparent;
}
.annotation-text-highlight.pink {
  background-size: contain, auto;
  background-position: right bottom, right bottom;
  background-repeat: repeat, repeat-x;
  padding-bottom: 3px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDBWMFoiIGZpbGw9IiNmZmE3ZDEiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPC9zdmc+CiAgICAgICAg), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cmVjdCB5PSIyMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjIiIGZpbGw9IiNlNTA2N2MiLz4KICAgICAgICA8cGF0aCBkPSJNNyAyMkM1LjIwODIgMjIgMy43Mzc0NSAyMS4zMTUxIDIuODE3ODYgMjAuNjgxNkMyLjM0MjE3IDIwLjM1MzkgMS42NjY0MyAyMC4zNjM2IDEuMTkzNDEgMjAuNjk1MUMwLjgxNDIxIDIwLjk2MDkgMC40MDgzNjQgMjEuMTc2NiAwIDIxLjM1MDNMNC4wNTMxMmUtMDYgMjJMNyAyMloiIGZpbGw9IiNlNTA2N2MiLz4KICAgICAgICA8cGF0aCBkPSJNMTEuMTkzMyAyMC42OTUyQzkuNzMwMiAyMS43MjA3IDcuODcwNDcgMjIgNyAyMkgxN0MxNS4yMDgyIDIyIDEzLjczNzQgMjEuMzE1MSAxMi44MTc5IDIwLjY4MTZDMTIuMzQyMiAyMC4zNTM5IDExLjY2NjMgMjAuMzYzNyAxMS4xOTMzIDIwLjY5NTJaIiBmaWxsPSIjZTUwNjdjIi8+CiAgICAgICAgPHBhdGggZD0iTTE3IDIyTDI0IDIyVjIxLjM0NDlDMjMuNTQzIDIxLjEzOTQgMjMuMTQ1NSAyMC45MDczIDIyLjgxNzkgMjAuNjgxNkMyMi4zNDIyIDIwLjM1MzkgMjEuNjY2NCAyMC4zNjM2IDIxLjE5MzQgMjAuNjk1MUMyMS4xMjk3IDIwLjczOTggMjEuMDY1MiAyMC43ODMxIDIxIDIwLjgyNUMxOS41NzAxIDIxLjc0NDUgMTcuODMyNiAyMiAxNyAyMloiIGZpbGw9IiNlNTA2N2MiLz4KICAgICAgICA8L3N2Zz4KICAgICAgICA=);
}
.annotation-text-highlight.pink.mobile-note::after {
  content: "";
  position: absolute;
  margin-left: -8px;
  bottom: -7px;
  right: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  transform: translateY(-50%);
  border-color: transparent rgb(235, 51, 148) rgb(235, 51, 148) transparent;
}
.annotation-text-highlight.blue {
  background-size: contain, auto;
  background-position: right bottom, right bottom;
  background-repeat: repeat, repeat-x;
  padding-bottom: 3px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDBWMFoiIGZpbGw9IiMzMUQwRmQiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPC9zdmc+), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cmVjdCB4PSIwLjUiIHk9IjIyLjUiIHdpZHRoPSIyMyIgaGVpZ2h0PSIxIiBmaWxsPSIjMDA3ODk5IiBzdHJva2U9IiMwMDc4OTkiLz4KICAgICAgICA8bGluZSB4MT0iMC41IiB5MT0iMjAuNSIgeDI9IjIzLjUiIHkyPSIyMC41IiBzdHJva2U9IiMwMDc4OTkiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiLz4KICAgICAgICA8L3N2Zz4KICAgICAgICA=);
}
.annotation-text-highlight.blue.mobile-note::after {
  content: "";
  position: absolute;
  margin-left: -8px;
  bottom: -7px;
  right: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  transform: translateY(-50%);
  border-color: transparent rgb(0, 0, 255) rgb(0, 0, 255) transparent;
}

.annotation-icons-container .note-icon,
.annotation-icons-container .flashcard-icon {
  position: absolute;
  left: 1.875em;
  padding: 0.25em;
  margin-top: -0.125em;
  border-radius: 22px;
  cursor: pointer;
  z-index: 5;
}
@media (min-width: 640px) and (max-width: 1000px) {
  .annotation-icons-container .note-icon,
  .annotation-icons-container .flashcard-icon {
    left: 1.25em;
    padding: 0.2em;
  }
}
.annotation-icons-container .note-icon.move-left,
.annotation-icons-container .flashcard-icon.move-left {
  left: 0.25em;
}
@media (min-width: 640px) and (max-width: 1000px) {
  .annotation-icons-container .note-icon.move-left,
  .annotation-icons-container .flashcard-icon.move-left {
    left: 0;
  }
}
.annotation-icons-container .note-icon:hover,
.annotation-icons-container .flashcard-icon:hover {
  background-color: #e8eefa;
}
.annotation-icons-container .note-icon .annotation-icon,
.annotation-icons-container .flashcard-icon .annotation-icon {
  display: block;
  width: 1.125em;
  height: 1.125em;
  background-size: contain !important;
}
.annotation-icons-container .note-icon[data-annotation-count]:hover,
.annotation-icons-container .flashcard-icon[data-annotation-count]:hover {
  border-radius: 0 0 22px 22px;
  padding-bottom: 10px;
  padding-top: 0;
  margin-top: 3px;
}
.annotation-icons-container .note-icon[data-annotation-count]:hover::before,
.annotation-icons-container .flashcard-icon[data-annotation-count]:hover::before {
  content: attr(data-annotation-count);
  background-color: #e8eefa;
  border-radius: 22px 22px 0 0;
  position: absolute;
  left: 0;
  top: -24px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  z-index: 1;
}
.annotation-icons-container .note-icon .annotation-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjI1IDQuMjE4NzVWMi4yNUMyLjI1IDEuNDIxNTcgMi45MjE1NyAwLjc1IDMuNzUgMC43NUgxNC4yNUMxNSAwLjc1IDE1Ljc1IDEuNSAxNS43NSAyLjI1VjMuNzVWNS4yNVYxNS43NUMxNS43NSAxNi41Nzg0IDE1LjA3ODQgMTcuMjUgMTQuMjUgMTcuMjVMMy43NSAxNy4yNUMyLjkyMTU3IDE3LjI1IDIuMjUgMTYuNTc4NCAyLjI1IDE1Ljc1VjEzLjMxMjVIMi4xNTYyNUMxLjc5MzgxIDEzLjMxMjUgMS41IDEzLjAxODcgMS41IDEyLjY1NjNDMS41IDEyLjI5MzggMS43OTM4MSAxMiAyLjE1NjI1IDEySDIuMjVWMTAuNjg3NUgyLjE1NjI1QzEuNzkzODEgMTAuNjg3NSAxLjUgMTAuMzkzNyAxLjUgMTAuMDMxM0MxLjUgOS42Njg4MiAxLjc5MzgxIDkuMzc1IDIuMTU2MjUgOS4zNzVIMi4yNVY4LjA2MjVIMi4xNTYyNUMxLjc5MzgxIDguMDYyNSAxLjUgNy43Njg2OSAxLjUgNy40MDYyNUMxLjUgNy4wNDM4MiAxLjc5MzgxIDYuNzUgMi4xNTYyNSA2Ljc1SDIuMjVWNS41MzEyNUgyLjE1NjI1QzEuNzkzODEgNS41MzEyNSAxLjUgNS4yMzc0NCAxLjUgNC44NzVDMS41IDQuNTEyNTcgMS43OTM4MSA0LjIxODc1IDIuMTU2MjUgNC4yMTg3NUgyLjI1Wk04Ljg3MDU2IDIuMDYyNUgxNC4yNTA0QzE0LjMyNDQgMi4wNjI1IDE0LjQzNzkgMi4xMzg4NiAxNC40Mzc5IDIuMjVWNS4yNTAwMVYxNS43NUMxNC40Mzc5IDE1Ljg1MzYgMTQuMzUzOSAxNS45Mzc1IDE0LjI1MDQgMTUuOTM3NUg3LjMxMjVWMi4wNjI1SDguODcwNTZaTTYgMi4wNjI1SDMuNzUwMzlDMy42NDY4NCAyLjA2MjUgMy41NjI4OSAyLjE0NjQ1IDMuNTYyODkgMi4yNUwzLjU2Mjg2IDQuMjE4NzVINC4yMTkxMUM0LjU4MTU1IDQuMjE4NzUgNC44NzUzNyA0LjUxMjU2IDQuODc1MzcgNC44NzVDNC44NzUzNyA1LjIzNzQ0IDQuNTgxNTUgNS41MzEyNSA0LjIxOTExIDUuNTMxMjVIMy41NjI4NkwzLjU2Mjg5IDYuNzVINC4yMTkxNEM0LjU4MTU3IDYuNzUgNC44NzUzOSA3LjA0MzgxIDQuODc1MzkgNy40MDYyNUM0Ljg3NTM5IDcuNzY4NjkgNC41ODE1NyA4LjA2MjUgNC4yMTkxNCA4LjA2MjVIMy41NjI4OUwzLjU2Mjg5IDkuMzc1SDQuMjE5MTRDNC41ODE1OCA5LjM3NSA0Ljg3NTM5IDkuNjY4ODEgNC44NzUzOSAxMC4wMzEzQzQuODc1MzkgMTAuMzkzNyA0LjU4MTU4IDEwLjY4NzUgNC4yMTkxNCAxMC42ODc1SDMuNTYyODlWMTJINC4yMTkxNEM0LjU4MTU4IDEyIDQuODc1MzkgMTIuMjkzOCA0Ljg3NTM5IDEyLjY1NjNDNC44NzUzOSAxMy4wMTg3IDQuNTgxNTggMTMuMzEyNSA0LjIxOTE0IDEzLjMxMjVIMy41NjI4OVYxNS43NUMzLjU2Mjg5IDE1Ljg1MzYgMy42NDY4NCAxNS45Mzc1IDMuNzUwMzkgMTUuOTM3NUg2VjIuMDYyNVoiIGZpbGw9IiMxQzIyMkUiLz4KPC9zdmc+Cg==) no-repeat center center;
}
.annotation-icons-container .note-icon .annotation-icon.shareable-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuNzUgOUM4LjY3OCA5IDEwLjM2MzMgMTAuMDM5MyAxMS4yNzYxIDExLjU4ODJDMTEuOTMxMSAxMS4yMTM3IDEyLjY5MDYgMTEgMTMuNSAxMUMxNS45ODUzIDExIDE4IDEzLjAxNDcgMTggMTUuNVYxNkMxOCAxNi41NTIzIDE3LjU1MjMgMTcgMTcgMTdIMUMwLjQ0NzcxNSAxNyAwIDE2LjU1MjMgMCAxNlYxNC4yNUMwIDExLjM1MDUgMi4zNTA1MSA5IDUuMjUgOUg2Ljc1Wk0xMy41IDEyLjc1TDEzLjI3OTIgMTIuNzU4N0MxMi43Njk1IDEyLjc5OTIgMTIuMjk5IDEyLjk3ODggMTEuOTA2NyAxMy4yNTk1QzExLjk1MjYgMTMuNSAxMS45ODIxIDEzLjc0NjUgMTEuOTk0IDEzLjk5NzVMMTIgMTQuMjVMMTEuOTk5NyAxNS4yNUgxNi4yMzdMMTYuMjMwMSAxNS4xNjc2TDE2LjIwNDQgMTQuOTk4N0MxNS45ODk0IDEzLjgzMTEgMTUuMDM2NyAxMi45MjE3IDEzLjg0NzYgMTIuNzcxOEwxMy42Njc1IDEyLjc1NUwxMy41IDEyLjc1Wk02Ljc1IDEwLjc1SDUuMjVDMy4zODE0NCAxMC43NSAxLjg1NDg3IDEyLjIxNDMgMS43NTUxOCAxNC4wNThMMS43NSAxNC4yNVYxNS4yNUgxMC4yNVYxNC4yNUMxMC4yNSAxMi4zODE0IDguNzg1NzIgMTAuODU0OSA2Ljk0MjA0IDEwLjc1NTJMNi43NSAxMC43NVpNMTMuNSA0LjEyNUMxNS4xNTY5IDQuMTI1IDE2LjUgNS40NjgxNSAxNi41IDcuMTI1QzE2LjUgOC43ODE4NSAxNS4xNTY5IDEwLjEyNSAxMy41IDEwLjEyNUMxMS44NDMxIDEwLjEyNSAxMC41IDguNzgxODUgMTAuNSA3LjEyNUMxMC41IDUuNDY4MTUgMTEuODQzMSA0LjEyNSAxMy41IDQuMTI1Wk0xMy41IDUuODc1QzEyLjgwOTYgNS44NzUgMTIuMjUgNi40MzQ2NCAxMi4yNSA3LjEyNUMxMi4yNSA3LjgxNTM2IDEyLjgwOTYgOC4zNzUgMTMuNSA4LjM3NUMxNC4xOTA0IDguMzc1IDE0Ljc1IDcuODE1MzYgMTQuNzUgNy4xMjVDMTQuNzUgNi40MzQ2NCAxNC4xOTA0IDUuODc1IDEzLjUgNS44NzVaTTYgMC4zNzVDOC4wNzEwNyAwLjM3NSA5Ljc1IDIuMDUzOTMgOS43NSA0LjEyNUM5Ljc1IDYuMTk2MDcgOC4wNzEwNyA3Ljg3NSA2IDcuODc1QzMuOTI4OTMgNy44NzUgMi4yNSA2LjE5NjA3IDIuMjUgNC4xMjVDMi4yNSAyLjA1MzkzIDMuOTI4OTMgMC4zNzUgNiAwLjM3NVpNNiAyLjEyNUM0Ljg5NTQzIDIuMTI1IDQgMy4wMjA0MyA0IDQuMTI1QzQgNS4yMjk1NyA0Ljg5NTQzIDYuMTI1IDYgNi4xMjVDNy4xMDQ1NyA2LjEyNSA4IDUuMjI5NTcgOCA0LjEyNUM4IDMuMDIwNDMgNy4xMDQ1NyAyLjEyNSA2IDIuMTI1WiIgZmlsbD0iIzRGNTU2MSIvPgo8L3N2Zz4K) no-repeat center center;
}
.annotation-icons-container .note-icon.multi-note:has(.shareable-icon) {
  display: none;
}
.annotation-icons-container .flashcard-icon .annotation-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC40MTc1IDIuODAzMTFMMTAuOTc2NCAyLjE5MDJDMTAuNTE2NSAxLjU2ODA1IDkuNzg2MyAxLjE2NjM0IDguOTY2MDMgMS4xNjc5N0wzLjI0MTY4IDEuMTc5MzRDMS44NTg1NCAxLjE4MjA5IDAuNzQyOTkyIDIuMzMwNTkgMC43NTAwMzMgMy43NDQ1OEwwLjc5NzM5IDEzLjI1NDFDMC44MDQ0MzIgMTQuNjY4MSAxLjkzMTQgMTUuODEyMiAzLjMxNDU0IDE1LjgwOTRMNS4zODA1NyAxNS44MDUzQzUuNjY3MDMgMTYuMDA0NiA1Ljk5ODUyIDE2LjE0NjIgNi4zNjE3NSAxNi4yMTA5TDEyLjAwNDIgMTcuMjE1OUMxMy4zNjc1IDE3LjQ1ODcgMTQuNjYxOCAxNi41MjYzIDE0Ljg5NTEgMTUuMTMzM0wxNi40NjM3IDUuNzY1MDNDMTYuNjk3IDQuMzcyMDQgMTUuNzgwOCAzLjA0NTk0IDE0LjQxNzUgMi44MDMxMVpNMTAuMDUyMSAzLjcyNjFMMTAuMDk5NCAxMy4yMzU3QzEwLjEwMjUgMTMuODQxNiA5LjYyNDM3IDE0LjMzMzkgOS4wMzE2IDE0LjMzNUwzLjMwNzI2IDE0LjM0NjRDMi43MTQ0OCAxNC4zNDc2IDIuMjMxNDkgMTMuODU3MyAyLjIyODQ4IDEzLjI1MTNMMi4xODExMiAzLjc0MTc0QzIuMTc4MSAzLjEzNTc0IDIuNjU2MTkgMi42NDM1MyAzLjI0ODk3IDIuNjQyMzVMOC45NzMzMSAyLjYzMDk4QzkuNTY2MDkgMi42Mjk4IDEwLjA0OTEgMy4xMjAxMSAxMC4wNTIxIDMuNzI2MVpNMTUuMDUzMSA1LjUxMzc4TDEzLjQ4NDUgMTQuODgyMUMxMy4zODQ1IDE1LjQ3OTEgMTIuODI5OCAxNS44Nzg3IDEyLjI0NTUgMTUuNzc0NkwxMC4zMjM3IDE1LjQzMjNDMTEuMDUxIDE0Ljk4MzQgMTEuNTM1MiAxNC4xNjU5IDExLjUzMDUgMTMuMjMyOEwxMS40ODM0IDMuNzY0NzZMMTQuMTc2MiA0LjI0NDM4QzE0Ljc2MDUgNC4zNDg0NSAxNS4xNTMxIDQuOTE2NzggMTUuMDUzMSA1LjUxMzc4Wk03LjcyNzc3IDguNzU0ODFDOC4xMjU0IDguNzUzMDUgOC40NDkxMiA5LjA4NzQgOC40NTA4MiA5LjUwMTYxQzguNDUyNTEgOS45MTU4MiA4LjEzMTUzIDEwLjI1MyA3LjczMzkgMTAuMjU0OEw0LjQ5Mzk3IDEwLjI2OTJDNC4wOTYzMyAxMC4yNzA5IDMuNzcyNjIgOS45MzY1NiAzLjc3MDkyIDkuNTIyMzZDMy43NjkyMyA5LjEwODE1IDQuMDkwMjEgOC43NzA5MyA0LjQ4Nzg0IDguNzY5MTdMNy43Mjc3NyA4Ljc1NDgxWk04LjYzMDgxIDYuOTM2ODNDOC42MjkxMiA2LjUyMjYyIDguMzQ1NjkgNi4xODgwOCA3Ljk5Nzc2IDYuMTg5NjNMNC4yMTc4NSA2LjIwNjM4QzMuODY5OTIgNi4yMDc5MiAzLjU4OTIzIDYuNTQ0OTUgMy41OTA5MiA2Ljk1OTE2QzMuNTkyNjIgNy4zNzMzNyAzLjg3NjA0IDcuNzA3OTEgNC4yMjM5NyA3LjcwNjM2TDguMDAzODggNy42ODk2MUM4LjM1MTgyIDcuNjg4MDcgOC42MzI1IDcuMzUxMDQgOC42MzA4MSA2LjkzNjgzWiIgZmlsbD0iIzA1MTEyQSIvPgo8L3N2Zz4K) no-repeat center center;
}

.hide-annotations .note-icon {
  display: none;
}
.hide-annotations .annotation-text-highlight[data-annotation-id] {
  background-color: transparent !important;
  background-image: none !important;
  pointer-events: none;
  border-bottom: none;
}
.hide-annotations .mobile-note::after {
  display: none;
}

.theme-sepia .note-icon:hover,
.theme-sepia .flashcard-icon:hover {
  background-color: #edebdf;
  box-shadow: 0px 2px 6px rgba(28, 34, 46, 0.09), 0px 5px 30px rgba(28, 34, 46, 0.09);
}
.theme-sepia .note-icon[data-annotation-count]:hover::before,
.theme-sepia .flashcard-icon[data-annotation-count]:hover::before {
  background-color: #edebdf;
}

.theme-night .note-icon .annotation-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjI1IDQuMjE4NzVWMi4yNUMyLjI1IDEuNDIxNTcgMi45MjE1NyAwLjc1IDMuNzUgMC43NUgxNC4yNUMxNSAwLjc1IDE1Ljc1IDEuNSAxNS43NSAyLjI1VjMuNzVWNS4yNVYxNS43NUMxNS43NSAxNi41Nzg0IDE1LjA3ODQgMTcuMjUgMTQuMjUgMTcuMjVMMy43NSAxNy4yNUMyLjkyMTU3IDE3LjI1IDIuMjUgMTYuNTc4NCAyLjI1IDE1Ljc1VjEzLjMxMjVIMi4xNTYyNUMxLjc5MzgxIDEzLjMxMjUgMS41IDEzLjAxODcgMS41IDEyLjY1NjNDMS41IDEyLjI5MzggMS43OTM4MSAxMiAyLjE1NjI1IDEySDIuMjVWMTAuNjg3NUgyLjE1NjI1QzEuNzkzODEgMTAuNjg3NSAxLjUgMTAuMzkzNyAxLjUgMTAuMDMxM0MxLjUgOS42Njg4MiAxLjc5MzgxIDkuMzc1IDIuMTU2MjUgOS4zNzVIMi4yNVY4LjA2MjVIMi4xNTYyNUMxLjc5MzgxIDguMDYyNSAxLjUgNy43Njg2OSAxLjUgNy40MDYyNUMxLjUgNy4wNDM4MiAxLjc5MzgxIDYuNzUgMi4xNTYyNSA2Ljc1SDIuMjVWNS41MzEyNUgyLjE1NjI1QzEuNzkzODEgNS41MzEyNSAxLjUgNS4yMzc0NCAxLjUgNC44NzVDMS41IDQuNTEyNTcgMS43OTM4MSA0LjIxODc1IDIuMTU2MjUgNC4yMTg3NUgyLjI1Wk04Ljg3MDU2IDIuMDYyNUgxNC4yNTA0QzE0LjMyNDQgMi4wNjI1IDE0LjQzNzkgMi4xMzg4NiAxNC40Mzc5IDIuMjVWNS4yNTAwMVYxNS43NUMxNC40Mzc5IDE1Ljg1MzYgMTQuMzUzOSAxNS45Mzc1IDE0LjI1MDQgMTUuOTM3NUg3LjMxMjVWMi4wNjI1SDguODcwNTZaTTYgMi4wNjI1SDMuNzUwMzlDMy42NDY4NCAyLjA2MjUgMy41NjI4OSAyLjE0NjQ1IDMuNTYyODkgMi4yNUwzLjU2Mjg2IDQuMjE4NzVINC4yMTkxMUM0LjU4MTU1IDQuMjE4NzUgNC44NzUzNyA0LjUxMjU2IDQuODc1MzcgNC44NzVDNC44NzUzNyA1LjIzNzQ0IDQuNTgxNTUgNS41MzEyNSA0LjIxOTExIDUuNTMxMjVIMy41NjI4NkwzLjU2Mjg5IDYuNzVINC4yMTkxNEM0LjU4MTU3IDYuNzUgNC44NzUzOSA3LjA0MzgxIDQuODc1MzkgNy40MDYyNUM0Ljg3NTM5IDcuNzY4NjkgNC41ODE1NyA4LjA2MjUgNC4yMTkxNCA4LjA2MjVIMy41NjI4OUwzLjU2Mjg5IDkuMzc1SDQuMjE5MTRDNC41ODE1OCA5LjM3NSA0Ljg3NTM5IDkuNjY4ODEgNC44NzUzOSAxMC4wMzEzQzQuODc1MzkgMTAuMzkzNyA0LjU4MTU4IDEwLjY4NzUgNC4yMTkxNCAxMC42ODc1SDMuNTYyODlWMTJINC4yMTkxNEM0LjU4MTU4IDEyIDQuODc1MzkgMTIuMjkzOCA0Ljg3NTM5IDEyLjY1NjNDNC44NzUzOSAxMy4wMTg3IDQuNTgxNTggMTMuMzEyNSA0LjIxOTE0IDEzLjMxMjVIMy41NjI4OVYxNS43NUMzLjU2Mjg5IDE1Ljg1MzYgMy42NDY4NCAxNS45Mzc1IDMuNzUwMzkgMTUuOTM3NUg2VjIuMDYyNVoiIGZpbGw9IiNGRkZGRkYiLz4KPC9zdmc+Cg==) no-repeat center center;
}
.theme-night .note-icon .annotation-icon.shareable-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuNzUgOUM4LjY3OCA5IDEwLjM2MzMgMTAuMDM5MyAxMS4yNzYxIDExLjU4ODJDMTEuOTMxMSAxMS4yMTM3IDEyLjY5MDYgMTEgMTMuNSAxMUMxNS45ODUzIDExIDE4IDEzLjAxNDcgMTggMTUuNVYxNkMxOCAxNi41NTIzIDE3LjU1MjMgMTcgMTcgMTdIMUMwLjQ0NzcxNSAxNyAwIDE2LjU1MjMgMCAxNlYxNC4yNUMwIDExLjM1MDUgMi4zNTA1MSA5IDUuMjUgOUg2Ljc1Wk0xMy41IDEyLjc1TDEzLjI3OTIgMTIuNzU4N0MxMi43Njk1IDEyLjc5OTIgMTIuMjk5IDEyLjk3ODggMTEuOTA2NyAxMy4yNTk1QzExLjk1MjYgMTMuNSAxMS45ODIxIDEzLjc0NjUgMTEuOTk0IDEzLjk5NzVMMTIgMTQuMjVMMTEuOTk5NyAxNS4yNUgxNi4yMzdMMTYuMjMwMSAxNS4xNjc2TDE2LjIwNDQgMTQuOTk4N0MxNS45ODk0IDEzLjgzMTEgMTUuMDM2NyAxMi45MjE3IDEzLjg0NzYgMTIuNzcxOEwxMy42Njc1IDEyLjc1NUwxMy41IDEyLjc1Wk02Ljc1IDEwLjc1SDUuMjVDMy4zODE0NCAxMC43NSAxLjg1NDg3IDEyLjIxNDMgMS43NTUxOCAxNC4wNThMMS43NSAxNC4yNVYxNS4yNUgxMC4yNVYxNC4yNUMxMC4yNSAxMi4zODE0IDguNzg1NzIgMTAuODU0OSA2Ljk0MjA0IDEwLjc1NTJMNi43NSAxMC43NVpNMTMuNSA0LjEyNUMxNS4xNTY5IDQuMTI1IDE2LjUgNS40NjgxNSAxNi41IDcuMTI1QzE2LjUgOC43ODE4NSAxNS4xNTY5IDEwLjEyNSAxMy41IDEwLjEyNUMxMS44NDMxIDEwLjEyNSAxMC41IDguNzgxODUgMTAuNSA3LjEyNUMxMC41IDUuNDY4MTUgMTEuODQzMSA0LjEyNSAxMy41IDQuMTI1Wk0xMy41IDUuODc1QzEyLjgwOTYgNS44NzUgMTIuMjUgNi40MzQ2NCAxMi4yNSA3LjEyNUMxMi4yNSA3LjgxNTM2IDEyLjgwOTYgOC4zNzUgMTMuNSA4LjM3NUMxNC4xOTA0IDguMzc1IDE0Ljc1IDcuODE1MzYgMTQuNzUgNy4xMjVDMTQuNzUgNi40MzQ2NCAxNC4xOTA0IDUuODc1IDEzLjUgNS44NzVaTTYgMC4zNzVDOC4wNzEwNyAwLjM3NSA5Ljc1IDIuMDUzOTMgOS43NSA0LjEyNUM5Ljc1IDYuMTk2MDcgOC4wNzEwNyA3Ljg3NSA2IDcuODc1QzMuOTI4OTMgNy44NzUgMi4yNSA2LjE5NjA3IDIuMjUgNC4xMjVDMi4yNSAyLjA1MzkzIDMuOTI4OTMgMC4zNzUgNiAwLjM3NVpNNiAyLjEyNUM0Ljg5NTQzIDIuMTI1IDQgMy4wMjA0MyA0IDQuMTI1QzQgNS4yMjk1NyA0Ljg5NTQzIDYuMTI1IDYgNi4xMjVDNy4xMDQ1NyA2LjEyNSA4IDUuMjI5NTcgOCA0LjEyNUM4IDMuMDIwNDMgNy4xMDQ1NyAyLjEyNSA2IDIuMTI1WiIgZmlsbD0iIzRGNTU2MSIvPgo8L3N2Zz4K) no-repeat center center;
}
.theme-night .flashcard-icon .annotation-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC40MTc1IDIuODAzMTFMMTAuOTc2NCAyLjE5MDJDMTAuNTE2NSAxLjU2ODA1IDkuNzg2MyAxLjE2NjM0IDguOTY2MDMgMS4xNjc5N0wzLjI0MTY4IDEuMTc5MzRDMS44NTg1NCAxLjE4MjA5IDAuNzQyOTkyIDIuMzMwNTkgMC43NTAwMzMgMy43NDQ1OEwwLjc5NzM5IDEzLjI1NDFDMC44MDQ0MzIgMTQuNjY4MSAxLjkzMTQgMTUuODEyMiAzLjMxNDU0IDE1LjgwOTRMNS4zODA1NyAxNS44MDUzQzUuNjY3MDMgMTYuMDA0NiA1Ljk5ODUyIDE2LjE0NjIgNi4zNjE3NSAxNi4yMTA5TDEyLjAwNDIgMTcuMjE1OUMxMy4zNjc1IDE3LjQ1ODcgMTQuNjYxOCAxNi41MjYzIDE0Ljg5NTEgMTUuMTMzM0wxNi40NjM3IDUuNzY1MDNDMTYuNjk3IDQuMzcyMDQgMTUuNzgwOCAzLjA0NTk0IDE0LjQxNzUgMi44MDMxMVpNMTAuMDUyMSAzLjcyNjFMMTAuMDk5NCAxMy4yMzU3QzEwLjEwMjUgMTMuODQxNiA5LjYyNDM3IDE0LjMzMzkgOS4wMzE2IDE0LjMzNUwzLjMwNzI2IDE0LjM0NjRDMi43MTQ0OCAxNC4zNDc2IDIuMjMxNDkgMTMuODU3MyAyLjIyODQ4IDEzLjI1MTNMMi4xODExMiAzLjc0MTc0QzIuMTc4MSAzLjEzNTc0IDIuNjU2MTkgMi42NDM1MyAzLjI0ODk3IDIuNjQyMzVMOC45NzMzMSAyLjYzMDk4QzkuNTY2MDkgMi42Mjk4IDEwLjA0OTEgMy4xMjAxMSAxMC4wNTIxIDMuNzI2MVpNMTUuMDUzMSA1LjUxMzc4TDEzLjQ4NDUgMTQuODgyMUMxMy4zODQ1IDE1LjQ3OTEgMTIuODI5OCAxNS44Nzg3IDEyLjI0NTUgMTUuNzc0NkwxMC4zMjM3IDE1LjQzMjNDMTEuMDUxIDE0Ljk4MzQgMTEuNTM1MiAxNC4xNjU5IDExLjUzMDUgMTMuMjMyOEwxMS40ODM0IDMuNzY0NzZMMTQuMTc2MiA0LjI0NDM4QzE0Ljc2MDUgNC4zNDg0NSAxNS4xNTMxIDQuOTE2NzggMTUuMDUzMSA1LjUxMzc4Wk03LjcyNzc3IDguNzU0ODFDOC4xMjU0IDguNzUzMDUgOC40NDkxMiA5LjA4NzQgOC40NTA4MiA5LjUwMTYxQzguNDUyNTEgOS45MTU4MiA4LjEzMTUzIDEwLjI1MyA3LjczMzkgMTAuMjU0OEw0LjQ5Mzk3IDEwLjI2OTJDNC4wOTYzMyAxMC4yNzA5IDMuNzcyNjIgOS45MzY1NiAzLjc3MDkyIDkuNTIyMzZDMy43NjkyMyA5LjEwODE1IDQuMDkwMjEgOC43NzA5MyA0LjQ4Nzg0IDguNzY5MTdMNy43Mjc3NyA4Ljc1NDgxWk04LjYzMDgxIDYuOTM2ODNDOC42MjkxMiA2LjUyMjYyIDguMzQ1NjkgNi4xODgwOCA3Ljk5Nzc2IDYuMTg5NjNMNC4yMTc4NSA2LjIwNjM4QzMuODY5OTIgNi4yMDc5MiAzLjU4OTIzIDYuNTQ0OTUgMy41OTA5MiA2Ljk1OTE2QzMuNTkyNjIgNy4zNzMzNyAzLjg3NjA0IDcuNzA3OTEgNC4yMjM5NyA3LjcwNjM2TDguMDAzODggNy42ODk2MUM4LjM1MTgyIDcuNjg4MDcgOC42MzI1IDcuMzUxMDQgOC42MzA4MSA2LjkzNjgzWiIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4=) no-repeat center center;
}
.theme-night .note-icon:hover,
.theme-night .flashcard-icon:hover {
  background-color: #2a2a2e;
  box-shadow: 0px 2px 6px rgba(28, 34, 46, 0.09), 0px 5px 30px rgba(28, 34, 46, 0.09);
}
.theme-night .note-icon[data-annotation-count]:hover::before,
.theme-night .flashcard-icon[data-annotation-count]:hover::before {
  color: #f7f9fd;
  background-color: #2a2a2e;
}

/* Align with plugins-lib mobile: no margin note/flashcard icons (viewport < 1024px). */
@media (max-width: 1024px) {
  .annotation-icons-container {
    display: none !important;
  }
}
@supports (-webkit-touch-callout: none) {
  a[target=_blank] {
    -webkit-touch-callout: none !important;
  }
}
/* BV scrolls below 768px of the plugin frame, not the screen */
@supports (container-type: inline-size) {
  .iframe-plugin-root {
    container: iframePlugin/inline-size;
  }
  .iframe-plugin-root .iframe-container {
    overflow: hidden;
  }
  @container iframePlugin (max-width: 768px) {
    .iframe-plugin-root .iframe-container {
      overflow: auto;
    }
  }
}
/* BV parity: the screen plugin's StageContainer (responsiveStageStyles) narrows sections
   when stage.responsive is set. BV runs these as media queries inside its plugin iframe,
   i.e. the window minus the reader sidebar - the width #viewer-express-container already
   takes (--layout-viewport-width, cssProcessor) - so here they are container queries; as
   window media queries they would fire a sidebar-width late. Selectors are BV's plus the
   container ID the theme is scoped under, and this sheet loads before the theme, so the
   theme wins the same specificity ties it wins in BV. */
@supports (container-type: inline-size) {
  #viewer-express-container {
    container: bv-viewport/inline-size;
  }
  @container bv-viewport (max-width: 1000px) {
    #viewer-express-container .stage-responsive .spf-rce-section-content {
      width: 100%;
      min-width: unset;
      max-width: none;
    }
    #viewer-express-container .stage-responsive .spf-rce-section-background-wrapper {
      width: 100%;
      min-width: unset;
      padding: 0 40px;
      max-width: none;
    }
  }
  @container bv-viewport (max-width: 760px) {
    #viewer-express-container .stage-responsive .spf-rce-section-content {
      padding: 0;
    }
    #viewer-express-container .stage-responsive .spf-rce-section-content .spf-rce-element {
      margin: 0;
    }
    #viewer-express-container .stage-responsive .spf-rce-row {
      flex-direction: column;
    }
    #viewer-express-container .stage-responsive .spf-element-image > div {
      height: auto !important;
    }
  }
}
.textbook-video .spp-video-frame {
  border: 1px solid #f9f9f9;
  box-sizing: border-box;
}
.textbook-video .caption-container,
.textbook-video .vjs-text-track-cue {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}.menu-toggle {
  position: absolute;
  width: 48px;
  height: 48px;
  border: none;
  cursor: pointer;
  border: 1px solid var(--theme-border);
  border-width: 1px 1px 0 1px;
}
.menu-toggle:hover {
  background-color: var(--theme-hover);
}
.menu-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--theme-text);
  mask: url("/assets/menu.5fc686e2.svg") no-repeat center;
  -webkit-mask: url("/assets/menu.5fc686e2.svg") no-repeat center;
}

.menu {
  display: flex;
  flex-direction: column;
  background: var(--theme-bg);
  width: var(--sidebar-width);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.menu hr {
  background-color: var(--theme-border);
  height: 1px;
  border: 0;
  flex-shrink: 0;
}
.menu .menu-items {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  overflow: hidden;
}
.menu .device-type-toggle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  flex-shrink: 0;
  gap: 0;
  width: 80%;
  margin-top: auto;
  margin-bottom: 8px;
  border-radius: 40px;
  overflow: hidden;
  background-color: var(--theme-hover);
  box-sizing: border-box;
}
.menu .device-type-toggle .menu-item {
  width: 100%;
  height: 45px;
  border-radius: 0;
}
.menu .device-type-toggle .menu-item::before {
  mask-size: 22px 22px;
  -webkit-mask-size: 22px 22px;
}
.menu .device-type-toggle .menu-item:not(:last-child) {
  box-shadow: inset 0 -1px 0 var(--theme-border);
}
.menu .device-type-toggle .menu-item.is-active {
  transform: none;
  background-color: var(--theme-hover-accent);
}
.menu .device-type-toggle .menu-item:hover:not(:active):not(:disabled):not(.is-active) {
  transform: none;
  background-color: var(--theme-hover-accent);
}
.menu .device-type-toggle .menu-item.device-web::before {
  mask-image: url("/assets/device-web.b7e7f059.svg");
  -webkit-mask-image: url("/assets/device-web.b7e7f059.svg");
}
.menu .device-type-toggle .menu-item.device-ios::before {
  mask-image: url("/assets/device-ios.0d2d4643.svg");
  -webkit-mask-image: url("/assets/device-ios.0d2d4643.svg");
}
.menu .device-type-toggle .menu-item.device-android::before {
  mask-image: url("/assets/device-android.7df5e841.svg");
  -webkit-mask-image: url("/assets/device-android.7df5e841.svg");
}
.menu .menu-item {
  position: relative;
  background-color: transparent;
  display: block;
  width: 80%;
  height: 50px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
}
.menu .menu-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--theme-text);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.menu .menu-item.home::before {
  mask-image: url("/assets/home.a1ea45b9.svg");
  -webkit-mask-image: url("/assets/home.a1ea45b9.svg");
}
.menu .menu-item.toc::before {
  mask-image: url("/assets/list.b2287252.svg");
  -webkit-mask-image: url("/assets/list.b2287252.svg");
}
.menu .menu-item.navigation::before {
  mask-image: url("/assets/navigation.cdd25599.svg");
  -webkit-mask-image: url("/assets/navigation.cdd25599.svg");
}
.menu .menu-item.search::before {
  mask-image: url("/assets/search.22bfa047.svg");
  -webkit-mask-image: url("/assets/search.22bfa047.svg");
}
.menu .menu-item.audio-settings::before {
  mask-image: url("/assets/audio-settings.7ceabb3d.svg");
  -webkit-mask-image: url("/assets/audio-settings.7ceabb3d.svg");
}
.menu .menu-item.notebook::before {
  mask-image: url("/assets/notebook.94e6ec08.svg");
  -webkit-mask-image: url("/assets/notebook.94e6ec08.svg");
}
.menu .menu-item.study::before {
  mask-image: url("/assets/flashcards.e68ff4bf.svg");
  -webkit-mask-image: url("/assets/flashcards.e68ff4bf.svg");
}
.menu .menu-item.settings::before {
  mask-image: url("/assets/font.b08d56f7.svg");
  -webkit-mask-image: url("/assets/font.b08d56f7.svg");
}
.menu .menu-item.spotlight-audio:disabled, .menu .menu-item.spotlight-audio.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.menu .menu-item.spotlight-audio::before {
  mask-image: url("/assets/headphones.a4d67e19.svg");
  -webkit-mask-image: url("/assets/headphones.a4d67e19.svg");
}
.menu .menu-item.close {
  position: absolute;
  bottom: 0;
}
.menu .menu-item.close::before {
  mask-image: url("/assets/close.6ff0f10d.svg");
  -webkit-mask-image: url("/assets/close.6ff0f10d.svg");
}
.menu .menu-item:hover:not(:active):not(:disabled) {
  transform: scale(1.16);
  background-color: var(--theme-hover-accent);
}.toc-drawer .tabs {
  display: flex;
}
.toc-drawer .tabs .tab-item {
  flex-grow: 1;
  padding: 0 5px;
  min-height: 40px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.toc-drawer li, .toc-drawer ul {
  padding: 1px;
  margin: 0px;
}
.toc-drawer .toc {
  overflow: auto;
  line-height: normal !important;
}
.toc-drawer .toc > ul > li > ul > li > button {
  padding-left: 5px;
  color: gray;
}
.toc-drawer .toc > ul > li > ul > li > ul > li > button {
  margin-left: 25px;
  padding-left: 5px;
  color: #444;
}
.toc-drawer .toc > ul > li {
  color: gray;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ccc;
}
.toc-drawer .toc > ul > li:last-child {
  border-bottom: none;
}
.toc-drawer .toc > ul > li > button {
  text-transform: uppercase !important;
  text-align: center !important;
}
.toc-drawer .toc ul {
  list-style-type: none;
}
.toc-drawer .toc ul li {
  cursor: pointer;
}
.toc-drawer .toc ul li.active > button {
  background-color: lightgray;
}
.toc-drawer .toc ul li button {
  width: 100%;
  background-color: #ffffff;
  color: #000;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  text-align: left;
}
.toc-drawer .toc ul li button:hover {
  text-decoration: underline;
}
.toc-drawer .close-icon {
  width: 24px;
  max-width: 100%;
  height: 24px;
  float: left;
  margin-left: 8px;
  background-color: var(--theme-text);
  mask-image: url("/assets/close.6ff0f10d.svg");
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/assets/close.6ff0f10d.svg");
  -webkit-mask-repeat: no-repeat;
}.settings-drawer {
  overflow: auto;
}
.settings-drawer .app-background-switch {
  position: relative;
  margin: 0 10px 10px;
}
.settings-drawer .app-background-switch .switch {
  position: relative;
  display: flex;
  width: 220px;
  height: 34px;
  align-items: center;
}
.settings-drawer .app-background-switch .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.settings-drawer .app-background-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.settings-drawer .app-background-switch .slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.settings-drawer .app-background-switch input:checked + .slider {
  background-color: #2196f3;
}
.settings-drawer .app-background-switch input:checked + .slider::before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.settings-drawer .app-background-switch input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}
.settings-drawer .app-background-switch .slider.round {
  border-radius: 34px;
}
.settings-drawer .app-background-switch .slider.round::before {
  border-radius: 50%;
}
.settings-drawer .theme-button-row-label {
  padding: 10px;
}
.settings-drawer .print-button-row {
  padding: 0 10px 10px;
}
.settings-drawer .theme-button-row {
  display: flex;
}
.settings-drawer .theme-button-row .range-slider {
  flex: 1;
  padding: 10px;
}
.settings-drawer .theme-button-row .range-slider input {
  width: 100%;
}
.settings-drawer .theme-button-row .action-button {
  flex-grow: 1;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  cursor: pointer;
  color: rgb(51, 51, 51);
  background-color: rgb(247, 249, 253);
}
.settings-drawer .theme-button-row .action-button.restart-button {
  padding-left: 40px;
  background-image: url("/assets/restart.9830ad6c.svg");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.settings-drawer .theme-button-row .action-button.dark {
  background-color: rgb(16, 16, 16);
  color: rgb(254, 254, 254);
  border: 1px solid rgb(174, 144, 255);
}
.settings-drawer .theme-button-row .action-button.sepia {
  color: rgb(51, 51, 51);
  border: 1px solid rgb(233, 227, 189);
  background-color: rgb(244, 242, 228);
}
.settings-drawer .theme-button-row .action-button.active {
  background-color: #ddd;
  font-weight: bold;
}
.settings-drawer .close-icon {
  width: 24px;
  max-width: 100%;
  height: 24px;
  float: left;
  margin-left: 8px;
  background-color: var(--theme-text);
  mask-image: url("/assets/close.6ff0f10d.svg");
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/assets/close.6ff0f10d.svg");
  -webkit-mask-repeat: no-repeat;
}
.settings-drawer .theme-font-option,
.settings-drawer .show-highlights-option {
  margin: 10px 0 10px 10px;
  display: block;
}.notebook-drawer .close-icon {
  width: 24px;
  max-width: 100%;
  height: 24px;
  float: left;
  margin-left: 8px;
  background-color: var(--theme-text);
  mask-image: url("/assets/close.6ff0f10d.svg");
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/assets/close.6ff0f10d.svg");
  -webkit-mask-repeat: no-repeat;
}
.notebook-drawer .drawer-body {
  height: 100%;
  overflow: auto;
}
.notebook-drawer .note-item {
  margin: 24px;
  padding: 16px;
  border-radius: 8px;
  background: var(--theme-surface);
  cursor: pointer;
}
.notebook-drawer .note-item .selected-text {
  padding: 6px 12px;
  border-radius: 0px 8px 8px 0px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.notebook-drawer .note-item .selected-text.yellow {
  background-color: rgba(244, 217, 123, 0.2);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMiIgaGVpZ2h0PSIxMDQiIHZpZXdCb3g9IjAgMCAyIDEwNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMlYxMDRIMFYwWiIgZmlsbD0iI0VFQTQyRSIvPgogICAgICAgICAgPC9zdmc+);
  background-repeat: repeat-y;
}
.notebook-drawer .note-item .selected-text.green {
  background-color: rgba(1, 203, 183, 0.2);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxMDQiIHZpZXdCb3g9IjAgMCA0IDEwNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMlYxMDRIMFYwWiIgZmlsbD0iIzAwNzk2RCIvPgogICAgICAgICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjUgLTIuMTg1NTdlLTA4QzMuNzc2MTQgLTkuNzg1MTNlLTA5IDQgMC4yMjM4NTggNCAwLjVMNCAzLjM2MTExQzQgMy42MzcyNSAzLjc3NjE0IDMuODYxMTEgMy41IDMuODYxMTFDMy4yMjM4NiAzLjg2MTExIDMgMy42MzcyNSAzIDMuMzYxMTFMMyAwLjVDMyAwLjIyMzg1OCAzLjIyMzg2IC0zLjM5MjYzZS0wOCAzLjUgLTIuMTg1NTdlLTA4Wk0zLjUgOC41ODMzM0MzLjc3NjE0IDguNTgzMzMgNCA4LjgwNzE5IDQgOS4wODMzM0w0IDE0LjgwNTZDNCAxNS4wODE3IDMuNzc2MTQgMTUuMzA1NiAzLjUgMTUuMzA1NkMzLjIyMzg2IDE1LjMwNTYgMyAxNS4wODE3IDMgMTQuODA1NkwzIDkuMDgzMzNDMyA4LjgwNzE5IDMuMjIzODYgOC41ODMzMyAzLjUgOC41ODMzM1pNMy41IDIwLjAyNzhDMy43NzYxNCAyMC4wMjc4IDQgMjAuMjUxNiA0IDIwLjUyNzhMNCAyNi4yNUM0IDI2LjUyNjEgMy43NzYxNCAyNi43NSAzLjUgMjYuNzVDMy4yMjM4NiAyNi43NSAzIDI2LjUyNjEgMyAyNi4yNUwzIDIwLjUyNzhDMyAyMC4yNTE2IDMuMjIzODYgMjAuMDI3OCAzLjUgMjAuMDI3OFpNMy41IDMxLjQ3MjJDMy43NzYxNCAzMS40NzIyIDQgMzEuNjk2MSA0IDMxLjk3MjJMNCAzNy42OTQ0QzQgMzcuOTcwNiAzLjc3NjE0IDM4LjE5NDQgMy41IDM4LjE5NDRDMy4yMjM4NiAzOC4xOTQ0IDMgMzcuOTcwNiAzIDM3LjY5NDRMMyAzMS45NzIyQzMgMzEuNjk2MSAzLjIyMzg2IDMxLjQ3MjIgMy41IDMxLjQ3MjJaTTMuNSA0Mi45MTY3QzMuNzc2MTQgNDIuOTE2NyA0IDQzLjE0MDUgNCA0My40MTY3TDQgNDkuMTM4OUM0IDQ5LjQxNSAzLjc3NjE0IDQ5LjYzODkgMy41IDQ5LjYzODlDMy4yMjM4NiA0OS42Mzg5IDMgNDkuNDE1IDMgNDkuMTM4OUwzIDQzLjQxNjdDMyA0My4xNDA1IDMuMjIzODYgNDIuOTE2NyAzLjUgNDIuOTE2N1pNMy41IDU0LjM2MTFDMy43NzYxNCA1NC4zNjExIDQgNTQuNTg1IDQgNTQuODYxMUw0IDYwLjU4MzNDNCA2MC44NTk1IDMuNzc2MTQgNjEuMDgzMyAzLjUgNjEuMDgzM0MzLjIyMzg1IDYxLjA4MzMgMyA2MC44NTk1IDMgNjAuNTgzM0wzIDU0Ljg2MTFDMyA1NC41ODUgMy4yMjM4NiA1NC4zNjExIDMuNSA1NC4zNjExWk0zLjUgNjUuODA1NUMzLjc3NjE0IDY1LjgwNTUgNCA2Ni4wMjk0IDQgNjYuMzA1NUw0IDcyLjAyNzhDNCA3Mi4zMDM5IDMuNzc2MTQgNzIuNTI3OCAzLjUgNzIuNTI3OEMzLjIyMzg1IDcyLjUyNzggMyA3Mi4zMDM5IDMgNzIuMDI3OEwzIDY2LjMwNTVDMyA2Ni4wMjk0IDMuMjIzODUgNjUuODA1NSAzLjUgNjUuODA1NVpNMy41IDc3LjI1QzMuNzc2MTQgNzcuMjUgNCA3Ny40NzM5IDQgNzcuNzVMNCA4My40NzIyQzQgODMuNzQ4NCAzLjc3NjE0IDgzLjk3MjIgMy41IDgzLjk3MjJDMy4yMjM4NSA4My45NzIyIDMgODMuNzQ4NCAzIDgzLjQ3MjJMMyA3Ny43NUMzIDc3LjQ3MzkgMy4yMjM4NSA3Ny4yNSAzLjUgNzcuMjVaTTMuNSA4OC42OTQ0QzMuNzc2MTQgODguNjk0NCA0IDg4LjkxODMgNCA4OS4xOTQ0TDQgOTQuOTE2N0M0IDk1LjE5MjggMy43NzYxNCA5NS40MTY3IDMuNSA5NS40MTY3QzMuMjIzODUgOTUuNDE2NyAzIDk1LjE5MjggMyA5NC45MTY3TDMgODkuMTk0NEMzIDg4LjkxODMgMy4yMjM4NSA4OC42OTQ0IDMuNSA4OC42OTQ0Wk0zLjUgMTAwLjEzOUMzLjc3NjE0IDEwMC4xMzkgNCAxMDAuMzYzIDQgMTAwLjYzOUw0IDEwMy41QzQgMTAzLjc3NiAzLjc3NjE0IDEwNCAzLjUgMTA0QzMuMjIzODUgMTA0IDMgMTAzLjc3NiAzIDEwMy41TDMgMTAwLjYzOUMzIDEwMC4zNjMgMy4yMjM4NSAxMDAuMTM5IDMuNSAxMDAuMTM5WiIgZmlsbD0iIzAwNzk2RCIvPgogICAgICAgICAgPC9zdmc+);
  background-repeat: repeat-y;
}
.notebook-drawer .note-item .selected-text.pink {
  background-color: rgba(255, 167, 209, 0.2);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxMDQiIHZpZXdCb3g9IjAgMCA0IDEwNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMlYxMDRIMFYwWiIgZmlsbD0iI0U1MDY3QyIvPgogICAgICAgICAgPHBhdGggZD0iTTMuMzA0OCA0LjE5MzNDMi4yNzkzMiAyLjczMDIgMiAwLjg3MDQ2NyAyIDBMMiAxMEMyIDguMjA4MiAyLjY4NDkyIDYuNzM3NDUgMy4zMTg0MiA1LjgxNzg2QzMuNjQ2MTIgNS4zNDIxNyAzLjYzNjM0IDQuNjY2MzMgMy4zMDQ4IDQuMTkzM1oiIGZpbGw9IiNFNTA2N0MiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik0zLjMwNDggMTQuMTkzM0MyLjI3OTMyIDEyLjczMDIgMiAxMC44NzA1IDIgMTBWMjBDMiAxOC4yMDgyIDIuNjg0OTIgMTYuNzM3NCAzLjMxODQyIDE1LjgxNzlDMy42NDYxMiAxNS4zNDIyIDMuNjM2MzQgMTQuNjY2MyAzLjMwNDggMTQuMTkzM1oiIGZpbGw9IiNFNTA2N0MiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik0zLjMwNDggMjQuMTkzM0MyLjI3OTMyIDIyLjczMDIgMiAyMC44NzA1IDIgMjBWMzBDMiAyOC4yMDgyIDIuNjg0OTIgMjYuNzM3NCAzLjMxODQyIDI1LjgxNzlDMy42NDYxMiAyNS4zNDIyIDMuNjM2MzQgMjQuNjY2MyAzLjMwNDggMjQuMTkzM1oiIGZpbGw9IiNFNTA2N0MiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik0zLjMwNDggMzQuMTkzM0MyLjI3OTMyIDMyLjczMDIgMiAzMC44NzA1IDIgMzBWNDBDMiAzOC4yMDgyIDIuNjg0OTIgMzYuNzM3NCAzLjMxODQyIDM1LjgxNzlDMy42NDYxMiAzNS4zNDIyIDMuNjM2MzQgMzQuNjY2MyAzLjMwNDggMzQuMTkzM1oiIGZpbGw9IiNFNTA2N0MiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik0zLjMwNDggNDQuMTkzM0MyLjI3OTMyIDQyLjczMDIgMiA0MC44NzA1IDIgNDBMMiA1MEMyIDQ4LjIwODIgMi42ODQ5MiA0Ni43Mzc0IDMuMzE4NDIgNDUuODE3OUMzLjY0NjEyIDQ1LjM0MjIgMy42MzYzNCA0NC42NjYzIDMuMzA0OCA0NC4xOTMzWiIgZmlsbD0iI0U1MDY3QyIvPgogICAgICAgICAgPHBhdGggZD0iTTMuMzA0OCA1NC4xOTMzQzIuMjc5MzIgNTIuNzMwMiAyIDUwLjg3MDUgMiA1MFY2MEMyIDU4LjIwODIgMi42ODQ5MiA1Ni43Mzc0IDMuMzE4NDIgNTUuODE3OUMzLjY0NjEyIDU1LjM0MjIgMy42MzYzNCA1NC42NjYzIDMuMzA0OCA1NC4xOTMzWiIgZmlsbD0iI0U1MDY3QyIvPgogICAgICAgICAgPHBhdGggZD0iTTMuMzA0OCA2NC4xOTMzQzIuMjc5MzIgNjIuNzMwMiAyIDYwLjg3MDUgMiA2MFY3MEMyIDY4LjIwODIgMi42ODQ5MiA2Ni43Mzc0IDMuMzE4NDIgNjUuODE3OUMzLjY0NjEyIDY1LjM0MjIgMy42MzYzNCA2NC42NjYzIDMuMzA0OCA2NC4xOTMzWiIgZmlsbD0iI0U1MDY3QyIvPgogICAgICAgICAgPHBhdGggZD0iTTMuMzA0OCA3NC4xOTMzQzIuMjc5MzIgNzIuNzMwMiAyIDcwLjg3MDUgMiA3MFY4MEMyIDc4LjIwODIgMi42ODQ5MiA3Ni43Mzc0IDMuMzE4NDIgNzUuODE3OUMzLjY0NjEyIDc1LjM0MjIgMy42MzYzNCA3NC42NjYzIDMuMzA0OCA3NC4xOTMzWiIgZmlsbD0iI0U1MDY3QyIvPgogICAgICAgICAgPHBhdGggZD0iTTMuMzA0OCA4NC4xOTMzQzIuMjc5MzIgODIuNzMwMiAyIDgwLjg3MDUgMiA4MEwyIDkwQzIgODguMjA4MiAyLjY4NDkyIDg2LjczNzQgMy4zMTg0MiA4NS44MTc5QzMuNjQ2MTIgODUuMzQyMiAzLjYzNjM0IDg0LjY2NjMgMy4zMDQ4IDg0LjE5MzNaIiBmaWxsPSIjRTUwNjdDIi8+CiAgICAgICAgICA8cGF0aCBkPSJNMy4zMDQ4IDk0LjE5MzNDMi4yNzkzMiA5Mi43MzAyIDIgOTAuODcwNSAyIDkwVjEwMEMyIDk4LjIwODIgMi42ODQ5MiA5Ni43Mzc0IDMuMzE4NDIgOTUuODE3OUMzLjY0NjEyIDk1LjM0MjIgMy42MzYzNCA5NC42NjYzIDMuMzA0OCA5NC4xOTMzWiIgZmlsbD0iI0U1MDY3QyIvPgogICAgICAgICAgPHBhdGggZD0iTTIgMTAwTDIgMTA0SDMuMTc1MDNDMi4yNTU1MiAxMDIuNTcgMiAxMDAuODMzIDIgMTAwWiIgZmlsbD0iI0U1MDY3QyIvPgogICAgICAgICAgPC9zdmc+);
  background-repeat: repeat-y;
}
.notebook-drawer .note-item .selected-text.blue {
  background-color: rgba(49, 208, 253, 0.2);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxMDQiIHZpZXdCb3g9IjAgMCA0IDEwNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMlYxMDRIMFYwWiIgZmlsbD0iIzAwNzg5OSIvPgogICAgICAgICAgPHBhdGggZD0iTTMgMEg0VjEwNEgzVjBaIiBmaWxsPSIjMDA3ODk5Ii8+CiAgICAgICAgICA8L3N2Zz4=);
  background-repeat: repeat-y;
}
.notebook-drawer .note-item .selected-text .ellipsis {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}.flashcards-drawer .close-icon {
  width: 24px;
  max-width: 100%;
  height: 24px;
  float: left;
  margin-left: 8px;
  background-color: var(--theme-text);
  mask-image: url("/assets/close.6ff0f10d.svg");
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/assets/close.6ff0f10d.svg");
  -webkit-mask-repeat: no-repeat;
}
.flashcards-drawer .drawer-body {
  height: 100%;
  overflow: auto;
}
.flashcards-drawer .flashcard-item {
  margin: 24px;
  padding: 16px;
  border-radius: 8px;
  background: white;
  cursor: pointer;
}
.flashcards-drawer .flashcard-item .front-text {
  margin-top: 16px;
  margin-bottom: 4px;
  width: fit-content;
  font-weight: bold;
}.spotlight-drawer .close-icon {
  width: 24px;
  max-width: 100%;
  height: 24px;
  float: left;
  margin-left: 8px;
  background-color: var(--theme-text);
  mask-image: url("/assets/close.6ff0f10d.svg");
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/assets/close.6ff0f10d.svg");
  -webkit-mask-repeat: no-repeat;
}
.spotlight-drawer .drawer-body {
  height: 100%;
  overflow: auto;
  padding: 12px;
}
.spotlight-drawer .field {
  margin-bottom: 16px;
}
.spotlight-drawer input, .spotlight-drawer textarea {
  display: block;
  padding: 4px;
  width: 90%;
}
.spotlight-drawer video {
  width: 90%;
  height: 80px;
}.search-drawer .close-icon {
  width: 24px;
  max-width: 100%;
  height: 24px;
  float: left;
  margin-left: 8px;
  background-color: var(--theme-text);
  mask-image: url("/assets/close.6ff0f10d.svg");
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/assets/close.6ff0f10d.svg");
  -webkit-mask-repeat: no-repeat;
}
.search-drawer .drawer-body {
  height: 100%;
  overflow: auto;
  padding: 12px 16px;
}
.search-drawer .search-status {
  padding: 12px 0;
  color: var(--theme-text-muted, #666);
  font-size: 14px;
}
.search-drawer .search-status.search-error {
  color: var(--theme-error, #c0392b);
}
.search-drawer .search-form {
  position: relative;
  margin-bottom: 16px;
}
.search-drawer .search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.search-drawer .search-input-icon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  background-color: var(--theme-text);
  mask-image: url("/assets/search.22bfa047.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("/assets/search.22bfa047.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  pointer-events: none;
}
.search-drawer .search-input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 36px 10px 40px;
  border: 2px solid var(--theme-accent, #7b2cbf);
  border-radius: 8px;
  font-size: 16px;
  background: var(--theme-surface, #fff);
  color: var(--theme-text);
}
.search-drawer .search-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(123, 44, 191, 0.2);
}
.search-drawer .search-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.search-drawer .search-clear-button {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--theme-text-muted, #666);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.search-drawer .search-clear-button:hover {
  background: var(--theme-hover, rgba(0, 0, 0, 0.06));
}
.search-drawer .search-suggestions {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border: 1px solid var(--theme-border, #ddd);
  border-radius: 8px;
  background: var(--theme-surface, #fff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
}
.search-drawer .search-suggestion-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: var(--theme-text);
  cursor: pointer;
}
.search-drawer .search-suggestion-item:hover {
  background: var(--theme-hover, rgba(0, 0, 0, 0.06));
}
.search-drawer .search-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--theme-border, #e0e0e0);
}
.search-drawer .search-tab {
  padding: 8px 4px 10px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-text-muted, #666);
  cursor: pointer;
}
.search-drawer .search-tab.active {
  color: var(--theme-accent, #7b2cbf);
  border-bottom-color: var(--theme-accent, #7b2cbf);
}
.search-drawer .search-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.search-drawer .search-toolbar-link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--theme-accent, #7b2cbf);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.search-drawer .search-toolbar-link:hover {
  text-decoration: underline;
}
.search-drawer .search-toolbar-separator {
  color: var(--theme-text-muted, #999);
}
.search-drawer .search-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-drawer .search-result-group {
  border-bottom: 1px solid var(--theme-border, #e0e0e0);
}
.search-drawer .search-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 4px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--theme-text);
}
.search-drawer .search-group-header:hover {
  background: var(--theme-hover, rgba(0, 0, 0, 0.04));
}
.search-drawer .search-group-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--theme-text);
  border-bottom: 2px solid var(--theme-text);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.search-drawer .search-group-header.expanded .search-group-chevron {
  transform: rotate(45deg);
}
.search-drawer .search-group-title {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
.search-drawer .search-group-count {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--theme-text-muted, #666);
}
.search-drawer .search-group-body {
  padding: 0 4px 12px 20px;
}
.search-drawer .search-hit {
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  border-top: 1px solid var(--theme-border, #eee);
}
.search-drawer .search-hit:first-child {
  border-top: none;
}
.search-drawer .search-hit.clickable {
  cursor: pointer;
}
.search-drawer .search-hit.clickable:hover .search-hit-title {
  text-decoration: underline;
}
.search-drawer .search-hit.selected {
  background: rgba(123, 44, 191, 0.12);
}
.search-drawer .search-hit.selected .search-hit-title {
  color: var(--theme-accent, #7b2cbf);
}
.search-drawer .search-hit-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  line-height: 1.4;
}
.search-drawer .search-hit-title em {
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: dashed;
}
.search-drawer .search-hit-snippet {
  font-size: 13px;
  line-height: 1.5;
  color: var(--theme-text);
  margin-bottom: 4px;
}
.search-drawer .search-hit-snippet em {
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: dashed;
}
.search-drawer .search-hit-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px 0;
  border-radius: 4px;
}/* Menu sits in the flex row; drawers overlay main content beside the menu strip. */
.aside-bar {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  z-index: 102;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
}
.aside-bar > .menu {
  height: 100%;
  min-height: 0;
}

.drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 400px;
  z-index: 2;
  padding: 0;
  border: 2px solid var(--theme-border);
  background-color: var(--theme-surface);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
@media (max-width: 600px) {
  .drawer {
    width: min(400px, 100vw - 52px);
  }
}
.drawer h3 {
  padding: 15px;
}
.drawer .header {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.drawer .header .title {
  flex: 1;
}
.drawer .header .close-button {
  background-color: var(--theme-surface);
  width: 40px;
  border: 0;
}/*
 * Shared app header - one bar for BV, BV Express, the comparator report and the :3030 home
 * page, so the three tools read as one app. Plain CSS on purpose: the React shells import
 * it, the comparator inlines it into report.html (report.js), the home page links it.
 *
 * Layout: [title  meta]  ......  [home] [BV Express | Comparator | BV Legacy | EPUB]  ......  [actions]
 * Home and the tabs form one centered navigation group (three equal grid columns keep it
 * centered regardless of how long the title or the action cluster is).
 *
 * Colors come from the --hdr-* custom properties. The base is the light, white bar the
 * comparator and Express use; the per-app variants below only re-tint those properties
 * (BV keeps its olive bar, the UAT builds keep their dark brown / navy bars).
 */
.app-header {
  --hdr-height: 44px;
  --hdr-bg: #ffffff;
  --hdr-fg: #1d1d1f;
  --hdr-fg-2: #6e6e73;
  --hdr-title: var(--hdr-fg);
  --hdr-sep: rgba(0, 0, 0, 0.1);
  --hdr-hover: rgba(0, 0, 0, 0.05);
  --hdr-track: rgba(0, 0, 0, 0.06);
  --hdr-seg: #ffffff;
  --hdr-seg-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --hdr-accent: #0071e3;
  --hdr-accent-tint: rgba(0, 113, 227, 0.12);
  --hdr-warn: #c0392b;

  position: relative;
  z-index: 20;
  flex-shrink: 0;
  box-sizing: border-box;
  height: var(--hdr-height);
  padding: 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  background: var(--hdr-bg);
  color: var(--hdr-fg);
  border-bottom: 1px solid var(--hdr-sep);
  font: 13px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}
.app-header *,
.app-header *::before,
.app-header *::after {
  box-sizing: border-box;
}

/* left cluster: title, quiet meta */
.app-header__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* center: home button right before the segmented control */
.app-header__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-header__home {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.app-header__home:hover {
  background: var(--hdr-hover);
}
.app-header__home svg {
  display: block;
  width: 16px;
  height: 16px;
}
.app-header__title {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--hdr-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header__meta {
  min-width: 0;
  font-size: 11px;
  color: var(--hdr-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header__meta strong {
  font-weight: 600;
}
.app-header__date {
  cursor: help;
}
.app-header__warning {
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--hdr-warn);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* segmented control */
.app-header__tabs {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 8px;
  background: var(--hdr-track);
}
.app-header__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--hdr-fg);
  opacity: 0.72;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}
.app-header__tab:hover {
  opacity: 1;
  background: var(--hdr-hover);
}
.app-header__tab.is-current,
.app-header__tab.is-current:hover {
  opacity: 1;
  font-weight: 600;
  background: var(--hdr-seg);
  box-shadow: var(--hdr-seg-shadow);
  cursor: default;
}
.app-header__tab.is-disabled,
.app-header__tab.is-disabled:hover {
  opacity: 0.32;
  background: none;
  cursor: default;
}

/* right cluster: icon / text buttons */
.app-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}
.app-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--hdr-fg-2);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.app-header__action:hover:not(:disabled) {
  background: var(--hdr-hover);
  color: var(--hdr-fg);
}
.app-header__action:disabled {
  opacity: 0.35;
  cursor: default;
}
.app-header__action.active,
.app-header__action.active:hover:not(:disabled) {
  background: var(--hdr-accent-tint);
  color: var(--hdr-accent);
}
.app-header__action--text {
  padding: 0 10px;
}
.app-header__action svg {
  display: block;
}

/* narrow windows: the tabs and actions matter more than the dates */
@media (max-width: 720px) {
  .app-header__meta,
  .app-header__warning {
    display: none;
  }
}

/* ---- per-app tints ---------------------------------------------------------------- */

/* BV keeps its olive bar (dark text) */
.app-header--bv {
  --hdr-bg: #acbf69;
  --hdr-fg: #05112a;
  --hdr-fg-2: rgba(5, 17, 42, 0.62);
  --hdr-sep: rgba(0, 0, 0, 0.12);
  --hdr-hover: rgba(0, 0, 0, 0.07);
  --hdr-track: rgba(0, 0, 0, 0.1);
  --hdr-seg: rgba(255, 255, 255, 0.92);
  --hdr-accent: #0b5fb8;
  --hdr-accent-tint: rgba(255, 255, 255, 0.55);
  --hdr-warn: #8e1a0b;
}

/* dark bars: BV UAT (brown / gold) and Express UAT (navy / white) */
.app-header--bv-uat,
.app-header--express-uat,
.app-header--dark {
  --hdr-fg: #f2f2f7;
  --hdr-fg-2: rgba(242, 242, 247, 0.62);
  --hdr-sep: rgba(255, 255, 255, 0.12);
  --hdr-hover: rgba(255, 255, 255, 0.1);
  --hdr-track: rgba(255, 255, 255, 0.14);
  --hdr-seg: rgba(255, 255, 255, 0.22);
  --hdr-seg-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --hdr-accent: #8ec2ff;
  --hdr-accent-tint: rgba(142, 194, 255, 0.2);
  --hdr-warn: #ff8a80;
}
.app-header--bv-uat {
  --hdr-bg: #4a412a;
  --hdr-title: #ab9660;
  --hdr-fg: #f3ead6;
  --hdr-fg-2: rgba(171, 150, 96, 0.85);
  --hdr-seg: rgba(255, 255, 255, 0.26);
}
.app-header--express-uat {
  --hdr-bg: #0d004d;
  --hdr-fg: #fefefe;
}

/* Express, the comparator and the home page use the light base as is */
.app-header--express,
.app-header--epub,
.app-header--comparator,
.app-header--home {
  --hdr-bg: #ffffff;
}
/* Environment / course switcher gear: floats over the right end of the shared app header
   (top-right of the page), styled like the header's other icon buttons. */
.env-toggle-button {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  color: var(--theme-text, #404040);
}
.env-toggle-button__icon {
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.env-toggle-button:hover {
  background: rgba(0, 0, 0, 0.06);
}
.env-toggle-button:hover .env-toggle-button__icon {
  opacity: 1;
}

.environment-form {
  display: flex;
}
.environment-form form {
  flex: 1;
  padding: 10px 15px;
}
.environment-form form > div {
  margin-bottom: 10px;
}
.environment-form form > div label {
  margin-right: 20px;
  width: 250px;
  display: inline-block;
}
.environment-form form > div input[type=text],
.environment-form form > div select {
  width: 400px;
  font-size: 16px;
}
.environment-form form > div button {
  width: 70px;
  padding: 5px;
  margin-left: 270px;
}
.environment-form form > div .example-url {
  margin: 10px 0 10px 270px;
  color: #808080;
  font-size: 14px;
}
.environment-form form > div .example-url.black {
  color: #000;
}.annotation-popup {
  background: #fff;
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: 360px;
  min-width: 200px;
  max-height: calc(100% - 150px);
  overflow-y: auto;
  border: 1px solid #000;
  word-wrap: break-word;
  z-index: 103;
}
.annotation-popup .show {
  display: block;
}
.annotation-popup .hide {
  display: none;
}
.annotation-popup .annotation_menu {
  padding: 0;
  margin: 0;
}
.annotation-popup .annotation_menu li {
  list-style-type: none;
  border-bottom: 1px solid #000;
  padding: 15px;
  margin: 0;
}
.annotation-popup .annotation_menu li span {
  display: block;
  margin-right: 10px;
  cursor: pointer;
}
.annotation-popup .annotation_menu li span.yellow {
  background-size: contain, auto;
  background-position: right bottom, right bottom;
  background-repeat: repeat, repeat-x;
  padding-bottom: 3px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDBWMFoiIGZpbGw9IiNmNGQ5N2IiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPC9zdmc+CiAgICAgICAg), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cmVjdCB5PSIyMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjIiIGZpbGw9IiNlZWE0MmUiLz4KICAgICAgICA8L3N2Zz4KICAgICAgICA=);
  display: inline;
  padding: 0.4em;
}
.annotation-popup .annotation_menu li span.green {
  background-size: contain, auto;
  background-position: right bottom, right bottom;
  background-repeat: repeat, repeat-x;
  padding-bottom: 3px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDBWMFoiIGZpbGw9IiMwMWNiYjciIGZpbGwtb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPC9zdmc+CiAgICAgICAg), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cmVjdCB5PSIyMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjIiIGZpbGw9IiMwMDc5NmQiLz4KICAgICAgICA8bGluZSB4MT0iMC41IiB5MT0iMjAuNSIgeDI9IjIzLjUiIHkyPSIyMC41IiBzdHJva2U9IiMwMDc5NmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iNiA2Ii8+CiAgICAgICAgPC9zdmc+CiAgICAgICAg);
  display: inline;
  padding: 0.4em;
}
.annotation-popup .annotation_menu li span.pink {
  background-size: contain, auto;
  background-position: right bottom, right bottom;
  background-repeat: repeat, repeat-x;
  padding-bottom: 3px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDBWMFoiIGZpbGw9IiNmZmE3ZDEiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPC9zdmc+CiAgICAgICAg), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cmVjdCB5PSIyMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjIiIGZpbGw9IiNlNTA2N2MiLz4KICAgICAgICA8cGF0aCBkPSJNNyAyMkM1LjIwODIgMjIgMy43Mzc0NSAyMS4zMTUxIDIuODE3ODYgMjAuNjgxNkMyLjM0MjE3IDIwLjM1MzkgMS42NjY0MyAyMC4zNjM2IDEuMTkzNDEgMjAuNjk1MUMwLjgxNDIxIDIwLjk2MDkgMC40MDgzNjQgMjEuMTc2NiAwIDIxLjM1MDNMNC4wNTMxMmUtMDYgMjJMNyAyMloiIGZpbGw9IiNlNTA2N2MiLz4KICAgICAgICA8cGF0aCBkPSJNMTEuMTkzMyAyMC42OTUyQzkuNzMwMiAyMS43MjA3IDcuODcwNDcgMjIgNyAyMkgxN0MxNS4yMDgyIDIyIDEzLjczNzQgMjEuMzE1MSAxMi44MTc5IDIwLjY4MTZDMTIuMzQyMiAyMC4zNTM5IDExLjY2NjMgMjAuMzYzNyAxMS4xOTMzIDIwLjY5NTJaIiBmaWxsPSIjZTUwNjdjIi8+CiAgICAgICAgPHBhdGggZD0iTTE3IDIyTDI0IDIyVjIxLjM0NDlDMjMuNTQzIDIxLjEzOTQgMjMuMTQ1NSAyMC45MDczIDIyLjgxNzkgMjAuNjgxNkMyMi4zNDIyIDIwLjM1MzkgMjEuNjY2NCAyMC4zNjM2IDIxLjE5MzQgMjAuNjk1MUMyMS4xMjk3IDIwLjczOTggMjEuMDY1MiAyMC43ODMxIDIxIDIwLjgyNUMxOS41NzAxIDIxLjc0NDUgMTcuODMyNiAyMiAxNyAyMloiIGZpbGw9IiNlNTA2N2MiLz4KICAgICAgICA8L3N2Zz4KICAgICAgICA=);
  display: inline;
  padding: 0.4em;
}
.annotation-popup .annotation_menu li span.blue {
  background-size: contain, auto;
  background-position: right bottom, right bottom;
  background-repeat: repeat, repeat-x;
  padding-bottom: 3px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDBWMFoiIGZpbGw9IiMzMUQwRmQiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPC9zdmc+), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cmVjdCB4PSIwLjUiIHk9IjIyLjUiIHdpZHRoPSIyMyIgaGVpZ2h0PSIxIiBmaWxsPSIjMDA3ODk5IiBzdHJva2U9IiMwMDc4OTkiLz4KICAgICAgICA8bGluZSB4MT0iMC41IiB5MT0iMjAuNSIgeDI9IjIzLjUiIHkyPSIyMC41IiBzdHJva2U9IiMwMDc4OTkiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiLz4KICAgICAgICA8L3N2Zz4KICAgICAgICA=);
  display: inline;
  padding: 0.4em;
}
.annotation-popup .annotation_menu li span.disabled {
  color: #ccc;
  cursor: auto;
}.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}
.popup-container .notes-popup {
  padding: 20px;
  width: 400px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}
.popup-container .notes-popup h4 {
  margin-bottom: 20px;
}
.popup-container .notes-popup h4 .close-button {
  float: right;
  cursor: pointer;
}
.popup-container .notes-popup textarea {
  box-sizing: border-box;
  display: block;
  padding: 10px;
  margin: 10px 0 20px 0;
  width: 100%;
  height: 200px;
  border-radius: 5px;
  border: 1px solid #8b8b8b;
  resize: none;
}
.popup-container .notes-popup .toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.popup-container .notes-popup .toggle label {
  font-size: 16px;
  font-weight: 500;
}
.popup-container .notes-popup .toggle .switch {
  width: 40px;
  height: 16px;
  background-color: #ccc;
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  padding: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.popup-container .notes-popup .toggle .switch.checked {
  background-color: #4c5caf;
}
.popup-container .notes-popup .toggle .switch.checked .knob {
  transform: translateX(26px);
}
.popup-container .notes-popup .toggle .switch .knob {
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.popup-container .notes-popup .action-buttons {
  text-align: right;
}
.popup-container .notes-popup .action-buttons button {
  margin-left: 20px;
  padding: 5px;
}.annotation-icons-popup {
  background: #fff;
  position: fixed;
  top: 70px;
  left: 70px;
  z-index: 110;
  max-width: 300px;
  min-width: 200px;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
}
.annotation-icons-popup ul li {
  list-style-type: none;
  cursor: pointer;
}
.annotation-icons-popup ul li:not(:last-child) {
  border-bottom: 1px solid #000;
}
.annotation-icons-popup ul li span {
  display: block;
  padding: 10px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}
.popup-container .flashcard-popup {
  padding: 20px;
  width: 400px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}
.popup-container .flashcard-popup h4 {
  margin-bottom: 20px;
}
.popup-container .flashcard-popup h4 .close-button {
  float: right;
  cursor: pointer;
}
.popup-container .flashcard-popup textarea {
  box-sizing: border-box;
  display: block;
  padding: 10px;
  margin: 10px 0 20px 0;
  width: 100%;
  height: 100px;
  border-radius: 5px;
  border: 1px solid #8b8b8b;
  resize: none;
}
.popup-container .flashcard-popup .action-buttons {
  text-align: right;
}
.popup-container .flashcard-popup .action-buttons button {
  margin-left: 20px;
  padding: 5px;
}.dev-shell-footer {
  position: relative;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--theme-bg);
}
.dev-shell-footer .navigation-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dev-shell-footer .navigation-bar .audio-player {
  flex-shrink: 0;
  width: min(640px, 80vw);
  max-width: min(640px, 80vw);
  height: 40px;
  background: transparent;
}
.dev-shell-footer .navigation-bar .audio-player::-webkit-media-controls-enclosure {
  background: transparent;
}
.dev-shell-footer .navigation-bar .audio-player::-webkit-media-controls-panel {
  background: transparent;
}
.dev-shell-footer .navigation-bar .navigation-bar-controls {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.dev-shell-footer .navigation-bar .navigation-button {
  flex: 1;
}
.dev-shell-footer .navigation-bar .navigation-button.previous-button {
  text-align: right;
}
.dev-shell-footer .navigation-bar .navigation-button button {
  flex: 1;
  background-color: transparent;
  color: var(--theme-text);
  border: none;
  height: 40px;
  min-width: 40px;
  cursor: pointer;
  z-index: 1;
  padding-left: 10px;
  padding-right: 10px;
}
.dev-shell-footer .navigation-bar .navigation-button button span {
  display: none;
}
.dev-shell-footer .navigation-bar .navigation-button button:hover span {
  display: inline;
}
.dev-shell-footer .navigation-bar .page-number {
  width: 77px;
  height: 35px;
  margin: 0 15px;
  text-align: center;
  border: 0;
  border-radius: 5px;
  background-color: var(--theme-surface);
  color: var(--theme-text);
}
.dev-shell-footer .navigation-bar .page-number:focus, .dev-shell-footer .navigation-bar .page-number:focus-visible {
  outline: 1px solid var(--theme-border);
}* {
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  overflow-y: hidden;
}

#root {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--theme-text);
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-text: #05112A;
  --theme-border: #aaaaaa;
  --theme-hover: #e1e1e1;
  --theme-hover-accent: #e8eefa;
  /* Shared header (components/AppHeader). The environment gear (EnvironmentForm) floats
     over its right end, so keep that corner clear. */
  /* Express follows the reading theme (main / sepia / night); BV keeps its olive bar */
}
#root.theme-sepia {
  --theme-bg: #F4F2E4;
  --theme-surface: rgb(241.0473684211, 238.5105263158, 220.7526315789);
  --theme-text: #3B2F1E;
  --theme-border: rgb(223.3315789474, 217.5736842105, 177.2684210526);
  --theme-hover: rgb(236.6184210526, 233.2763157895, 209.8815789474);
  --theme-hover-accent: rgb(232.1894736842, 228.0421052632, 199.0105263158);
}
#root.theme-night {
  --theme-bg: #101010;
  --theme-surface: rgb(31.3, 31.3, 31.3);
  --theme-text: #E8E8E8;
  --theme-border: #434343;
  --theme-hover: rgb(41.5, 41.5, 41.5);
  --theme-hover-accent: rgb(51.7, 51.7, 51.7);
}
#root .app-header {
  padding-right: 48px;
}
#root .app-header--express {
  --hdr-bg: var(--theme-bg);
  --hdr-fg: var(--theme-text);
  --hdr-sep: var(--theme-border);
}
#root.theme-night .app-header--express {
  --hdr-fg-2: rgba(232, 232, 232, 0.62);
  --hdr-hover: rgba(255, 255, 255, 0.1);
  --hdr-track: rgba(255, 255, 255, 0.14);
  --hdr-seg: rgba(255, 255, 255, 0.22);
  --hdr-seg-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --hdr-warn: #ff8a80;
}
#root.renderer-web {
  background-color: #acbf69;
}
#root.renderer-web .renderer-web,
#root.renderer-web .dev-shell-footer,
#root.renderer-web .aside-bar .menu {
  box-shadow: none;
  border: radius 0;
  background-color: #acbf69;
}
#root.renderer-mobile {
  background-color: olive;
}
#root.renderer-mobile .dev-shell-footer,
#root.renderer-mobile .aside-bar .menu {
  box-shadow: none;
  border: radius 0;
  background-color: olive;
}
#root.renderer-mobile .app-header {
  --hdr-bg: olive;
  --hdr-fg: #f2f2f7;
  --hdr-fg-2: rgba(242, 242, 247, 0.62);
  --hdr-sep: rgba(255, 255, 255, 0.12);
  --hdr-hover: rgba(255, 255, 255, 0.1);
  --hdr-track: rgba(255, 255, 255, 0.14);
  --hdr-seg: rgba(255, 255, 255, 0.22);
  --hdr-seg-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --hdr-warn: #ff8a80;
}
#root.renderer-mobile .env-toggle-button {
  color: #f2f2f7;
}
#root.renderer-web-uat .drawer .close-icon {
  background-size: contain;
  background-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  float: none; /* optional: fix layout */
}
#root.renderer-web-uat .env-toggle-button {
  color: #ab9660;
}
#root.renderer-express-uat .drawer .close-icon {
  background-size: contain;
  background-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  float: none; /* optional: fix layout */
}
#root.renderer-express-uat .env-toggle-button {
  color: #fefefe;
}
#root .app-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#root .app-shell .content-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  position: relative;
  --sidebar-width: 60px;
  /* Counter widget.js global `.content-wrapper` rules (WEB + Express) */
  flex-direction: row !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow-x: hidden !important;
  /* Scrolling container is above footer only; content must not go behind footer */
}
#root .app-shell .content-wrapper .content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#root .app-shell .content-wrapper .content .message {
  padding: 15px;
  font-weight: bold;
  text-align: center;
  color: green;
  border-bottom: 1px solid #aaa;
  background-color: rgba(170, 170, 170, 0.119);
}
#root .app-shell .content-wrapper .content .content-frame-container {
  display: flex;
  flex: 1;
  position: relative;
  overflow: hidden;
}
#root .app-shell .content-wrapper .content .content-frame-container .page-loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.75);
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}
#root .app-shell .content-wrapper .content .content-frame-container .page-loader.show {
  display: flex;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#root .app-shell .content-wrapper .content .content-frame-container .page-loader .spinner {
  width: 20px;
  height: 20px;
  border: 5px solid rgba(85, 87, 97, 0.3333333333);
  border-bottom-color: #f5f5f5;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
#root .app-shell .content-wrapper .content .content-frame-container .content-frame {
  flex: 1;
}
#root .app-shell .content-wrapper .content .content-frame-container .content-frame iframe {
  border: 0;
}
#root .app-shell .content-wrapper .content-express {
  min-height: 0;
  overflow: hidden;
  --layout-viewport-width: calc(100vw - var(--sidebar-width));
  --vw: calc(var(--layout-viewport-width) / 100);
}
#root .app-shell .content-wrapper .content-express .content-frame-container {
  min-height: 0;
  overflow: hidden;
  flex: 1 1 0; /* take remaining space so height is defined for 100% children */
}
#root .app-shell .content-wrapper .content-express .content-frame {
  min-height: 0;
  /* Single scroll container above footer; must show scrollbar when content overflows */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  /* Override viewer-express inline 100vh so frame fits above footer */
  height: 100% !important;
  max-height: 100% !important;
  /* Override injected 100vh so content stays above footer (use !important to beat runtime-injected CSS) */
}
#root .app-shell .content-wrapper .content-express .content-frame #viewer-express-container {
  min-height: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
#root .app-shell .content-wrapper .content-express .dev-shell-footer {
  flex-shrink: 0;
  position: relative;
  z-index: 20; /* stack above content if any overflow */
}

.modal-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop + .modal-content {
  position: absolute;
  top: 40px;
  right: 40px;
  bottom: 40px;
  left: 40px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40px;
  background: #fff;
}
.modal-backdrop + .modal-content .caption {
  margin-top: 20px;
}
.modal-backdrop + .modal-content .close-modal {
  position: absolute;
  background: url("/assets/close.6ff0f10d.svg") no-repeat center center;
  height: 40px;
  width: 40px;
  top: 5px;
  right: 5px;
  border: 0;
  cursor: pointer;
}
.modal-backdrop + .modal-content .zoomable-image {
  max-width: 100%;
  max-height: 100%;
}

.hidden {
  display: none !important;
}