@charset "UTF-8";
/* CSS for Dongting book reader */
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/*-------------------------------------------------- */
/* HTML5 DISPLAY DEFINITIONS */
/*-------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup,
main, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

/*-------------------------------------------------- */
/* BASE */
/*-------------------------------------------------- */
html {
  font-size: 100%; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

html, button, input, select, textarea {
  font-family: sans-serif;
}

body {
  margin: 0;
}

/*-------------------------------------------------- */
/* LINKS */
/*-------------------------------------------------- */
a:focus {
  outline: thin dotted;
}

a:active, a:hover {
  outline: 0;
}

/*-------------------------------------------------- */
/* TYPOGRAPHY */
/*-------------------------------------------------- */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.67em;
  margin: 2.33em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

p, pre {
  margin: 1em 0;
}

code, kbd, pre, samp {
  font-family: monospace, serif;
  _font-family: "courier new", monospace;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q:before, q:after {
  content: "";
  content: none;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/*-------------------------------------------------- */
/* LISTS */
/*-------------------------------------------------- */
dl, menu, ol, ul {
  margin: 1em 0;
}

dd {
  margin: 0 0 0 40px;
}

menu, ol, ul {
  padding: 0 0 0 40px;
}

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
}

/*-------------------------------------------------- */
/* EMBEDDED CONTENT */
/*-------------------------------------------------- */
img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}

svg:not(:root) {
  overflow: hidden;
}

/*-------------------------------------------------- */
/* FIGURES */
/*-------------------------------------------------- */
figure {
  margin: 0;
}

/*-------------------------------------------------- */
/* FORMS */
/*-------------------------------------------------- */
form {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0; /* 1 */
  padding: 0;
  white-space: normal; /* 2 */
  *margin-left: -7px; /* 3 */
}

button, input, select, textarea {
  font-size: 100%; /* 1 */
  margin: 0; /* 2 */
  vertical-align: baseline; /* 3 */
  *vertical-align: middle; /* 3 */
}

button, input {
  line-height: normal;
}

button, select {
  text-transform: none;
}

button, html input[type=button],
input[type=reset], input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
  *overflow: visible; /* 4 */
}

button[disabled], html input[disabled] {
  cursor: default;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
  *height: 13px; /* 3 */
  *width: 13px; /* 3 */
}

input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/* end normalize.css */
/*-------------------------------------------------- */
/* STANDARD RESET VALUES */
/*-------------------------------------------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, strong, sub, sup,
b, i, center, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
}

td {
  vertical-align: top;
  text-align: left;
}

a, area, select {
  outline: 0 none;
}

/* vars.scss - variables like colors, fonts, sizes, etc. */
/* colors: black/grey/white */
/* $color_ltred: #fee; */
/* $color_ltred: #e0c0c0; */
/* colors: other common colors */
/* was #800 */
/* previous: #c03f11, other choices: #da291c (485), #f9423a (warm red), #ca3604(2349), #cf4520(173), #() */
/* colors: header */
/* colors: footer */
/* colors: special */
/* alt options: #f9f4d6, #f5e7b5 */
/*  fonts */
/* $avenir: 'Avenir Next W01', helvetica, sans-serif; */
/* light */
/* regular */
/* medium */
/* demi */
/* bold */
/* condensed bold */
/* chinese character fonts */
/* z-index values (depth) */
/* responsive screen breakpoints */
/* not sure yet if we will need the following code line or not */
/* $is-hidpi: "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx)"; */
/*  v2 reader
    =========================================================================
    The reading modes added by the format-v2 conversion, scoped to .page_read
    and #pagecontents so nothing here reaches a v1 page.

    Kept a separate partial on purpose: v1's chrome CSS is scoped to
    .page_chapter, .page_contents and their siblings, all of which are deleted
    when the conversion lands (PLAN.md A4). A partial can be merged into the
    main sheet or dropped as a unit on that day; rules interleaved among v1's
    could be neither.

    Moved here verbatim from a template literal in scripts/v2/pageRead.js,
    2026-09-12 -- it lived there so that nothing landed in the shared
    stylesheet before anyone had decided what the reader looks like. It is a
    programmer's first cut and is due a design pass: colours want to become
    variables, and the whole thing wants structuring alongside Amanda's.

    ONE VALUE STILL COMES FROM JAVASCRIPT: --v2pagemax, the height the
    paginator is packing against. It is measured, not chosen, so it cannot
    live here.
    ========================================================================= */
/* The app shell does not scroll: #root is height:100% with overflow:hidden,
   because a v1 page is a single paragraph and never needed to. Flow mode does,
   so the chapter gets a scrolling region -- scoped to this page so v1 is
   untouched. Where that region really belongs is a layout question for the
   conversion, not something to settle here. */
#root.page_read #pagecontents {
  overflow-y: auto;
}

/* v1's text column: 120px in from the window's edge on a large screen (its
   arrows' 70px column, a 6px gap, then 50px), and 86px from 768 to 1092 -- on
   both sides, since the wider right margin v1 keeps is for a sidebar v2 does
   not have. At most v1's 1400px of text; the full width on a phone. */
.v2page {
  box-sizing: border-box;
  max-width: min(1440px, 100% - 200px);
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
}

@media (max-width: 1091px) {
  .v2page {
    max-width: calc(100% - 132px);
  }
}
@media (max-width: 767px) {
  .v2page {
    max-width: none;
  }
}
/* Nothing below the footer, in either mode: it sits on the window's bottom
   edge, as v1's chapter bar does. Flow's room to scroll past the end goes above
   it instead, after the chapter's way on -- below it, the pinned footer rose
   off the bottom edge by that much at the end of a chapter, and in paged mode
   1rem left a strip of white under it. */
.v2page:not(.v2paged) .v2chapterend {
  margin-bottom: 6rem;
}

.v2bar {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
  padding: 0.6rem 0;
  margin-bottom: 1.5rem;
  font: 13px/1.4 system-ui, sans-serif;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  z-index: 10;
}

.v2bar a {
  color: #36c;
  text-decoration: none;
}

.v2bar a.on {
  font-weight: 600;
  color: #111;
}

.v2bar label {
  color: #555;
  user-select: none;
}

/* A heading is a block, so it is spaced like one and paginated like one. */
.v2heading {
  margin: 0 0 1.75rem;
}

.v2headingzh {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}

.v2headingen {
  font: 400 15px/1.4 system-ui, sans-serif;
  color: #666;
  margin-top: 0.2rem;
}

/* An English-only heading (a tutorial's) is the heading, not a subtitle. */
.v2headingprose {
  font: 600 22px/1.3 system-ui, sans-serif;
}

/* A section inside a tutorial chapter -- a heading the author wrote, not the
   chapter's title -- a step smaller, and close to the text it heads (Rex,
   2026-10-25). Spacing stays bottom-only, for the paginator. */
.v2heading.v2headingsection {
  margin-bottom: 0.9rem;
}

.v2headingsection .v2headingprose {
  font-size: 19px;
}

/* Authored English prose: a tutorial's body text. Upright and dark, unlike a
   translation, because here the English is the content. */
.v2prose {
  margin: 0;
  font: 400 17px/1.6 system-ui, sans-serif;
  color: #222;
}

/* The reset takes weight and slant off strong and em; F18's markup needs them back. */
.v2prose strong {
  font-weight: 600;
}

.v2prose em {
  font-style: italic;
}

/* Running prose sits closer than story paragraphs, which are each a study object. */
.v2block.v2text {
  margin-bottom: 1rem;
}

/* A list: prose items with their bullets or numbers hanging in the margin. */
.v2block.v2list {
  margin-bottom: 1rem;
}

.v2list .v2prose {
  padding-left: 1.4rem;
}

/* The reset takes the markers off every list; a list block needs them back. */
.v2list ul {
  list-style: disc outside;
}

.v2list ol {
  list-style: decimal outside;
}

.v2list li + li {
  margin-top: 0.4rem;
}

.v2list li::marker {
  color: #888;
}

/* The guide speaking: portrait left, prose beside it, both in one block. The
   portrait's square watercolour paper is faded out by a soft circular mask, so it
   sits on any background an aside may give it (TUTORIALS.md § 3.2). */
/* Alignment is automatic, never a per-block setting: the speech is at least as tall
   as the portrait and centres its text in that height, so a short speech sits beside
   her face, and a longer one outgrows it and starts level with the top of her head. */
.v2speaker {
  --v2face: 96px;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.v2speakerface {
  flex: none;
  width: var(--v2face);
  height: var(--v2face);
  object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

.v2speech {
  flex: 1;
  min-width: 0;
  min-height: var(--v2face);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.v2speech .v2prose + .v2prose {
  margin-top: 0.6em;
}

@media (max-width: 480px) {
  .v2speaker {
    --v2face: 72px;
  }
}
/* Bottom margin only, never top. `measure()` in paginate.js adds each block's
   top AND bottom margin, which is exact when margins cannot collapse and an
   over-estimate when they can -- and whether they can now depends on the mode,
   since paged mode puts the blocks in a flex container. Keeping every block
   type to a bottom margin removes the question: the two modes space text
   identically and the paginator's arithmetic is right in both. */
.v2block {
  margin: 0 0 1.6rem;
}

.v2zh {
  margin: 0;
  line-height: 2.4;
}

/* A token is [lead punct][word][trail punct].  Plain inline boxes, not flex:
   an inline-flex token takes its baseline from a flex item, so tokens with
   lead punctuation sat on a different baseline from those without and the
   line wobbled.

   The reading is positioned over the word only, so punctuation width never
   drags it off centre, and the word's width is set by its characters alone. */
/* inline-block, not inline: an inline box's background is painted over its
   font-derived content area, so a highlight on it stops at the characters and
   the reading above spills out of it.  A token never breaks internally
   anyway, and its baseline is its last line box -- the characters -- so the
   line stays level. */
.v2tok {
  display: inline-block;
}

/* The gap goes on the word, not the token, so punctuation stays snug against
   the characters it follows while readings never touch each other. */
.v2word {
  display: inline-block;
  text-align: center;
  padding: 0 0.14em;
}

/* The reading gets a little padding of its own.  Where the characters are the
   wider part it vanishes into their width; where the reading is (nǚhái,
   Yīngwén, dǒng le) it keeps neighbouring readings from nearly touching, which
   the word's own gap alone let them do (Rex, 2026-10-25). */
.v2zp {
  display: block;
  font: var(--v2zp, 12px)/1.1 system-ui, sans-serif;
  color: #888;
  white-space: nowrap;
  padding: 0 0.25em;
}

.v2hz {
  display: block;
  font-size: var(--v2hz, 23px);
  line-height: 1.25;
}

.v2punct {
  font-size: var(--v2hz, 23px);
  line-height: 1.25;
}

/* Font size is a v1 setting already: applyFontsize puts the class on
   #pagecontents.  Under v2 it stops being only a CSS change -- it alters how
   much text fits, which is a layout input.  --v2zpline is the reading when it
   is the line itself (reading-only mode) rather than a gloss over 汉字, scaled
   in step with --v2hz; it was a fixed 17px, so size did nothing in that mode. */
#pagecontents.fontsize-s .v2page {
  --v2hz: 19px;
  --v2zp: 11px;
  --v2zpline: 14px;
}

#pagecontents.fontsize-m .v2page {
  --v2hz: 23px;
  --v2zp: 12px;
  --v2zpline: 17px;
}

#pagecontents.fontsize-l .v2page {
  --v2hz: 29px;
  --v2zp: 14px;
  --v2zpline: 21px;
}

/* English inside the Chinese (bookdev F21): one word, not a run of padded
   characters.  The gap beside its 汉字 is padding on the token, not margin, so
   the playing highlight stays one band.  Its reading row holds the text itself
   and is hidden, not removed, so the token is as tall as its neighbours in zhp;
   zp mode shows it, italic, so "Hello" does not blend into the pinyin. */
.v2foreign {
  padding: 0 0.25em;
}

.v2foreign .v2word {
  padding: 0;
}

.v2foreign .v2zp {
  visibility: hidden;
  padding: 0;
}

/* The face, weight and size of that English.  Inherited, it came out in the
   body's light Avenir at the full 汉字 size -- thin strokes beside solid
   characters, so it read as a different kind of text.  Regular (400) sits with the
   汉字's strokes -- 500 was tried and read heavy; at 92% its capitals stand about
   as tall as they do.  The
   stack is explicit because the body's named faces are not loaded here. */
.v2foreign .v2hz {
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: calc(var(--v2hz, 23px) * 0.92);
}

/* Quotes and ellipses touching English take the Latin face too.  In the CJK face
   they sit in a full em box -- “ General, General…… Tso's -- and the run's own
   padding then doubles the gap.  Proportional, they hug the words they belong
   to, and the padding on that side shrinks to a hairline.  Full-width ！？。，
   are not in the Latin face and fall through to the CJK one unchanged. */
.v2foreign .v2pz {
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}

.v2foreign:has(> .v2lead) {
  padding-left: 0.08em;
}

.v2foreign:has(> .v2trail) {
  padding-right: 0.08em;
}

.v2tok[data-code] {
  cursor: pointer;
}

.v2tok[data-code]:hover .v2word {
  background: #eef2ff;
  border-radius: 3px;
}

/* Painted on the tokens rather than the chunk, so the highlight covers the
   reading as well as the characters.  Tokens sit flush, so it reads as one
   band across the chunk. */
.v2chunk.v2playing .v2tok {
  background: #fff3c4;
}

.v2chunk.v2playing .v2tok:first-child {
  border-radius: 3px 0 0 3px;
}

.v2chunk.v2playing .v2tok:last-child {
  border-radius: 0 3px 3px 0;
}

/* The armed block -- where play will begin -- as a hairline in the page's own
   left padding, so it costs no layout width. Flow mode only: there it is the one
   sign of which paragraph play starts at, while in paged mode play starts at the
   top of the page, which needs no marking (Rex, 2026-11-01). */
.v2paragraph {
  position: relative;
}

.v2page:not(.v2paged) .v2block.v2armed::before,
.v2page:not(.v2paged) .v2block.v2sounding::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  border-radius: 1px;
  background: #c9c9c9;
}

.v2block.v2sounding::before {
  background: #c0504d;
}

/* One control set, placed by width: the header band on a desktop, the footer
   row on a phone. Never floating -- a floating control trades permanent space
   for intermittent obstruction, and in paged mode it would hover over the last
   line the partitioner deliberately fitted, which the footer's height is
   already subtracted from. */
.v2actions {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.v2act {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* v1's grey strip (Amanda's design; v2 matched it 2026-11-01): the chapter and
   page on the left, and on a wide screen 懂？, English and Settings on the
   right. It spans the reading area, not just the text column: --v2areaw is the
   scroller's width (pageRead's setAreaWidth), so the strip can stay inside the
   page, where the paginator measures it, and still reach both edges. Sticky,
   so in flow it stays put. */
.v2chapterbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 34px;
  box-sizing: border-box;
  margin: -1rem calc(50% - var(--v2areaw, 100vw) / 2) 1.25rem;
  padding: 0 20px 0 30px;
  background: #ebebeb;
}

.v2chaptername {
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2chaptitle {
  color: #da291c;
  padding-left: 2px;
}

/* ...left out while the chapter's own heading is on screen, as v1 does on a
   chapter's first page. */
.v2chapterbar.v2headshown .v2chaptername {
  visibility: hidden;
}

/* That heading, at the top of the chapter: the strip's line, in the text. */
.v2heading.v2chapterhead {
  margin-bottom: 1.25rem;
}

.v2chapterhead .v2chaptername {
  white-space: normal;
  overflow: visible;
}

.v2pgnum {
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
  padding-left: 10px;
}

.v2stripnav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
}

/* v1's gadget labels, and its switch for the ones that are a state. */
.v2setlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.86em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #333;
}

.v2setlink:hover {
  color: #000;
}

/* English's caret: v1's, pointing the way its panel comes from. Hidden while
   always-on English makes the panel redundant (the attribute alone loses to
   inline-flex above). */
.v2caret {
  width: 15px;
  height: 10px;
}

.v2acten[hidden] {
  display: none;
}

/* 懂？ arms one action rather than holding a state, so it gets no switch: it
   lights while armed. A character among capitals, so a size up. */
.v2actexplain {
  font-size: 17px;
  padding: 3px 8px;
  border-radius: 4px;
}

.v2actexplain.on, .v2actexplain.on:hover {
  background: #668fbc;
  color: #fff;
}

/* A phone: v1's strip is lower and keeps only the chapter; its gadgets are in
   the footer, and Settings in the menu. */
.v2page:not(.v2wide) .v2chapterbar {
  height: 24px;
}

.v2page:not(.v2wide) .v2chaptername {
  font-size: 0.8em;
}

.v2page:not(.v2wide) .v2stripnav {
  display: none;
}

/* The footer control bar, laid out as v1's is: a label at each end and the page
   and audio controls together in the middle. Three slots rather than loose
   children, because the footer is a flex COLUMN -- anything appended straight
   to it becomes another stacked row. The outer slots are equal-width so the
   middle group sits centred whatever the labels say. */
.v2ftrbar {
  display: flex;
  align-items: center;
  width: 100%;
}

.v2ftrslot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.v2ftrleft, .v2ftrright {
  flex: 1;
  min-width: 0;
}

.v2ftrright {
  justify-content: flex-end;
}

.v2ftrmid {
  justify-content: center;
  gap: 0.2rem;
}

/* The left slot is explain-this's seat, reserved and empty. v1 spends it on
   "Show Tips"; v2 renders no grammar hints yet, and Rex would rather the seat
   went to explain when explain arrives (2026-09-12). */
.v2pagebtn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.v2pagebtn img {
  width: 38px;
  height: 38px;
  display: block;
}
.v2pagebtn img.on {
  display: none;
}
.v2pagebtn:hover img.off {
  display: none;
}
.v2pagebtn:hover img.on {
  display: block;
}
.v2pagebtn:disabled {
  opacity: 0.25;
  cursor: default;
}
.v2pagebtn:disabled:hover img.off {
  display: block;
}
.v2pagebtn:disabled:hover img.on {
  display: none;
}

/* The big arrows either side of the text, as v1 has them. They live in the
   page's margins, so they can be large without covering the sentence being
   read and without costing the paginator any height.

   They appear wherever the chapter bar does -- 768px, `.v2wide` -- and the TEXT
   COLUMN yields to make room for them rather than the arrows falling back to
   the footer. That fallback existed between 768 and 960, and it gave one band
   of widths an arrangement of its own: page arrows stacked under the progress
   bar instead of flanking the page. A slightly narrower column for part of that
   range is the better trade (Rex, 2026-09-12). Below 768 there are no margins
   to put them in at all, and the footer's arrows do the turning (A23). */
.v2pageedge {
  display: none;
}

/* Paged mode is a page, so it fills the window: the blocks sit in the middle of
   the space between the chapter bar and the footer, and the footer is anchored
   at the bottom rather than trailing whatever the last block happens to be.
   Top-aligning left a short page floating in the top half of a tall window
   (Rex, 2026-09-12). Flow mode keeps its scroll-from-the-top behaviour. */
/* `.v2page.v2paged`, not `.v2paged .v2page`: the mode class is ON the page, not
   on an ancestor of it. */
.v2page.v2paged {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  /* content-box would add the padding ON TOP of the 100%,
     overflowing the window by exactly that much. */
  box-sizing: border-box;
}

.v2paged .v2blocks {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The footer's 2rem top margin separates it from the text when the text runs
   right up to it -- but in a flex column that margin ADDS to `min-height: 100%`
   and pushes the page 32px past the window. Centring already provides the gap
   here, so the margin goes. `paged.layout` reads the computed margin when it
   works out the page budget, so the budget follows by itself. */
.v2paged .v2footer {
  margin-top: 0;
}

/* ...except while the paginator is measuring, when every block is visible and
   the content is taller than the box. Centring an overflowing flex container
   overflows it in both directions, which would put the first block above the
   top of the scroller and make the measured header height negative. */
.v2paged.v2measuring .v2blocks {
  justify-content: flex-start;
}

/* A page turn (turn.js): a copy of the outgoing page slides out over the
   scroller while the real page slides in.  The clip is the scroller's box and
   lets nothing past it, and it never takes a tap.  The shell wears the page's
   classes so the copy is styled like the page; these undo the page's own size
   and padding, since the shell is placed where the blocks were. */
.v2turnclip {
  position: fixed;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
}

.v2page.v2paged.v2turnshell {
  position: absolute;
  margin: 0;
  padding: 0;
  max-width: none;
  min-height: 0;
  box-sizing: border-box;
}

#root.page_read #pagecontents.v2turning {
  overflow-x: hidden;
}

/* A sideways drag on a page is a swipe, so the browser keeps only vertical
   scrolling (for a page taller than the window) and pinch zoom. */
.v2page.v2paged {
  touch-action: pan-y pinch-zoom;
}

@media (min-width: 768px) {
  .v2paged .v2pageedge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .v2paged .v2pageedge img {
    width: 50px;
    height: 50px;
  }
  .v2paged .v2pageedge {
    /* The hover art is a second file, as in v1, so swap rather than filter. */
  }
  .v2paged .v2pageedge img.on {
    display: none;
  }
  .v2paged .v2pageedge:hover img.off {
    display: none;
  }
  .v2paged .v2pageedge:hover img.on {
    display: block;
  }
  .v2paged .v2pageedge:disabled {
    opacity: 0.2;
    cursor: default;
  }
  .v2paged .v2pageedge:disabled:hover img.off {
    display: block;
  }
  .v2paged .v2pageedge:disabled:hover img.on {
    display: none;
  }
  /* Clear of the gutter, not just of the text. The paragraph's own play button
     hangs 2.1rem into the left margin and is 1.4rem wide, so an arrow parked
     8px outside the column landed on top of it (Rex, 2026-09-12). 6.5rem puts
     the arrow's inner edge about 26px clear of the button -- and the column
     width above is what guarantees there is 6.5rem to be had. */
  /* At the window's edges, as v1 has them (2026-11-01); the column's inset
     keeps the text clear of them. */
  .v2paged .v2pageedge-prev {
    left: 13px;
  } /* the image 20px in, as v1's */
  .v2paged .v2pageedge-next {
    right: 13px;
  }
  /* With the edges doing the turning, the footer's arrows have no job. */
  .v2paged .v2ftrmid .v2pagebtn {
    display: none;
  }
}
.v2play {
  font: 13px/1 system-ui, sans-serif;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

.v2play.on {
  background: #333;
  color: #fff;
  border-color: #333;
}

.v2en {
  margin: 0.5rem 0 0;
  font: italic 15px/1.5 Georgia, serif;
  color: #555;
  /* v1's column is wide, and v1 kept English in a sidebar beside it; under
     the paragraph, a line as long as the column would be hard to follow. */
  max-width: 46rem;
}

/* The translation is italic already, so its emphasis -- English that was English
   in the original (bookdev F21) -- goes upright, as emphasis inside italic does. */
.v2en em {
  font-style: normal;
}

/* Display modes (v1's fmt setting: zhp both, zh characters, zp reading only).
   Punctuation ships twice because CSS can hide an element but not retype it. */
.v2pp {
  display: none;
}

.v2fmt-zh .v2zp {
  display: none;
}

.v2fmt-zh .v2zh {
  line-height: 1.9;
}

/* Reading only: the characters go, the reading takes their place in the flow,
   and the punctuation switches to its Latin form. */
.v2fmt-zp .v2hz {
  display: none;
}

.v2fmt-zp .v2pz {
  display: none;
}

.v2fmt-zp .v2pp {
  display: inline;
}

.v2fmt-zp .v2zp {
  position: static;
  transform: none;
  display: inline;
  font-size: var(--v2zpline, 17px);
  color: #222;
  padding: 0;
}

.v2fmt-zp .v2punct {
  font-size: var(--v2zpline, 17px);
}

/* padding, not margin: the playhead marker and the playing highlight are drawn
   on the token, so a margin would break them into one segment per word. */
.v2fmt-zp .v2tok {
  padding-right: 0.32em;
}

.v2fmt-zp .v2foreign {
  padding-left: 0;
}

.v2fmt-zp .v2foreign .v2zp {
  visibility: visible;
  font-style: italic;
}

.v2fmt-zp .v2zh {
  line-height: 1.8;
}

/* A block that names its own reading mode (a tutorial example's `display`):
   the page mode's rules re-stated one level more specific, so the block wins
   whatever the page is set to. Each restates every property the other two
   modes change, back to the base values above, because the page's own mode
   is still in force underneath it. Storybooks never set this. */
.v2page .v2show-zhp .v2zp {
  display: block;
  position: static;
  transform: none;
  font: var(--v2zp, 12px)/1.1 system-ui, sans-serif;
  color: #888;
  padding: 0 0.25em;
}
.v2page .v2show-zhp .v2hz {
  display: block;
}
.v2page .v2show-zhp .v2pz {
  display: inline;
}
.v2page .v2show-zhp .v2pp {
  display: none;
}
.v2page .v2show-zhp .v2punct {
  font-size: var(--v2hz, 23px);
}
.v2page .v2show-zhp .v2tok {
  padding-right: 0;
}
.v2page .v2show-zhp .v2zh {
  line-height: 2.4;
}

.v2page .v2show-zh .v2zp {
  display: none;
}
.v2page .v2show-zh .v2hz {
  display: block;
}
.v2page .v2show-zh .v2pz {
  display: inline;
}
.v2page .v2show-zh .v2pp {
  display: none;
}
.v2page .v2show-zh .v2punct {
  font-size: var(--v2hz, 23px);
}
.v2page .v2show-zh .v2tok {
  padding-right: 0;
}
.v2page .v2show-zh .v2zh {
  line-height: 1.9;
}

.v2page .v2show-zp .v2hz {
  display: none;
}
.v2page .v2show-zp .v2pz {
  display: none;
}
.v2page .v2show-zp .v2pp {
  display: inline;
}
.v2page .v2show-zp .v2zp {
  position: static;
  transform: none;
  display: inline;
  font-size: var(--v2zpline, 17px);
  color: #222;
  padding: 0;
}
.v2page .v2show-zp .v2punct {
  font-size: var(--v2zpline, 17px);
}
.v2page .v2show-zp .v2tok {
  padding-right: 0.32em;
}
.v2page .v2show-zp .v2foreign {
  padding-left: 0;
}
.v2page .v2show-zp .v2foreign .v2zp {
  visibility: visible;
  font-style: italic;
}
.v2page .v2show-zp .v2zh {
  line-height: 1.8;
}

/* A tutorial's table of words: play button, word, English. The first two columns
   size to their content and the English takes the rest, wrapping, so a table
   fits a phone without scrolling sideways. */
.v2vocab {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.15rem;
}

.v2vocabword.v2zh {
  line-height: 1.6;
  white-space: nowrap;
}

.v2vocaben {
  font: 400 16px/1.4 system-ui, sans-serif;
  color: #333;
}

.v2wordplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0 0 0 0.1rem;
  border: 0;
  border-radius: 50%;
  background: #eee;
  color: #333;
  font-size: 0.7rem;
  cursor: pointer;
}

.v2wordplay:hover {
  background: #333;
  color: #fff;
}

.v2wordplay.v2sounding {
  background: #c0504d;
  color: #fff;
}

/* The stroke-order widget (widgets/strokes.js): a line saying what to do, the
   words as buttons beside the drawing frame (above it on a phone). The chosen
   word is marked; the frame keeps its size before anything is chosen, so the
   page never jumps when a word is. Characters are drawn in practice squares,
   larger than the dictionary popup's, with ▶, pinyin and meaning beneath. */
.v2strokesprompt {
  font: 15px/1.4 system-ui, sans-serif;
  color: #666;
  margin-bottom: 0.7rem;
}

.v2strokesbody {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.v2strokeslist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 1 15rem;
  align-content: flex-start;
}

.v2strokesword {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  color: #222;
}

.v2strokesword:hover {
  border-color: #999;
  background: #fafafa;
}

.v2strokesword.v2chosen {
  border-color: #c0504d;
  background: #fbeeed;
  box-shadow: 0 0 0 1px #c0504d inset;
}

.v2strokeszp {
  font: 12px/1.2 system-ui, sans-serif;
  color: #888;
}

.v2strokeszh {
  font-size: 22px;
}

/* Its width is the row's remainder, never its contents', so a long meaning wraps
   rather than widening the frame as words are switched (Rex). */
.v2strokesframe {
  flex: 1 1 0;
  min-width: 0;
  min-height: 12.5rem;
  padding: 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fff;
}

.v2strokesframe.v2strokesready {
  cursor: pointer;
}

.v2strokesboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.v2strokesbox {
  position: relative;
  width: 140px;
  height: 140px;
  border: 1px solid #d9b7b5;
  box-sizing: border-box;
}

/* The practice square's dashed cross. */
.v2strokesbox::before, .v2strokesbox::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.v2strokesbox::before {
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed #ecd3d2;
}

.v2strokesbox::after {
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed #ecd3d2;
}

.v2strokesbox svg {
  position: relative;
  z-index: 1;
  display: block;
}

.v2strokesplain {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
}

.v2strokesinfo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
  min-height: 1.8rem;
}

.v2strokesinfo .v2wordplay {
  flex: none;
}

.v2strokesinfozp {
  flex: none;
  font: 500 20px/1.2 system-ui, sans-serif;
}

.v2strokesinfoen {
  flex: 1 1 auto;
  min-width: 0;
  font: 16px/1.4 system-ui, sans-serif;
  color: #444;
}

.v2page:not(.v2wide) .v2strokesbody {
  flex-direction: column;
  align-items: stretch;
}

.v2page:not(.v2wide) .v2strokeslist {
  flex-basis: auto;
}

.v2page:not(.v2wide) .v2strokesbox {
  width: 110px;
  height: 110px;
}

/* The tone chart widget (widgets/tones.js): ▶, the pitch contour, the pinyin,
   the tone and how it moves, the meaning. On a wide page every row's cells
   line up in one grid; on a phone each row is its own, the tone and the
   meaning stacked beside the pinyin. One colour for every tone (Rex). */
.v2tones {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.35rem;
}

.v2tonerow {
  display: contents;
}

.v2toneplay {
  min-width: 1.6rem;
}

.v2tonecontour {
  width: 44px;
  height: 30px;
  display: block;
}

.v2tonerule {
  stroke: #e2e2e2;
  stroke-width: 1;
}

.v2toneline {
  fill: none;
  stroke: #c0504d;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v2tonedot {
  fill: #c0504d;
}

.v2toneword {
  min-width: 3.2rem;
}

.v2tonezp {
  font: 500 24px/1.2 system-ui, sans-serif;
  color: #222;
  cursor: pointer;
}

.v2tonename {
  font: 15px/1.35 system-ui, sans-serif;
  color: #333;
}

.v2tonetitle {
  font-weight: 600;
}

.v2tonehow {
  color: #777;
}

.v2tonehow::before {
  content: " · ";
  color: #bbb;
}

.v2toneen {
  font: 16px/1.4 system-ui, sans-serif;
  color: #333;
}

.v2page:not(.v2wide) .v2tones {
  display: block;
}

.v2page:not(.v2wide) .v2tonerow {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  grid-template-areas: "play contour word name" "play contour word en";
  align-items: center;
  column-gap: 0.8rem;
  padding: 0.3rem 0;
}

.v2page:not(.v2wide) .v2toneplay {
  grid-area: play;
}

.v2page:not(.v2wide) .v2tonecontour {
  grid-area: contour;
}

.v2page:not(.v2wide) .v2toneword {
  grid-area: word;
}

.v2page:not(.v2wide) .v2tonename {
  grid-area: name;
  font-size: 13px;
  align-self: end;
}

.v2page:not(.v2wide) .v2tonehow {
  display: block;
}

.v2page:not(.v2wide) .v2tonehow::before {
  content: none;
}

.v2page:not(.v2wide) .v2toneen {
  grid-area: en;
  align-self: start;
}

/* Chinese inside English prose (bookdev TUTORIALS.md § 4): the same tokens as
   everywhere, sized to the prose and kept in its line instead of stacked as in
   the reading column. Placed after the .v2show-* rules, at the same specificity,
   so these win where the two meet. */
.v2page .v2inline .v2tok,
.v2page .v2inline .v2word {
  display: inline;
  padding: 0;
}

.v2page .v2inline .v2hz {
  display: inline;
  font-size: 1.1em;
  line-height: inherit;
}

.v2page .v2inline .v2punct {
  font-size: inherit;
  line-height: inherit;
}

.v2page .v2inline.v2show-zp .v2zp {
  font-size: inherit;
  color: inherit;
}

.v2page .v2inline.v2show-zp .v2hz {
  display: none;
}

.v2page .v2inline.v2show-zp .v2tok + .v2tok {
  margin-left: 0.25em;
}

.v2inlinepy {
  color: #555;
}

.v2inlineplain {
  font-size: 1.1em;
}

/* Groups (bookdev TUTORIALS.md § 3.3): a flat run of blocks that the CSS draws
   as one box. Every block in the run trades its bottom margin for padding, so
   the box's colour runs unbroken through the gaps; the title line rounds the
   top and the last block the bottom. Bottom-only spacing still holds, so
   paginate.js measures a group exactly as it measures loose blocks. A page break
   inside an aside simply splits the box. */
.v2block.v2ingroup {
  margin-bottom: 0;
  padding: 0 1.25rem 1rem;
}

/* A shut reveal hides its blocks with the hidden attribute, which a block's own
   display (flex for a speaker, grid for a table) would otherwise override. */
.v2block[hidden] {
  display: none !important;
}

.v2block.v2groupfirst {
  padding-top: 1rem;
  border-radius: 10px 10px 0 0;
}

.v2block.v2grouplast {
  margin-bottom: 1.6rem;
  border-radius: 0 0 10px 10px;
}

.v2block.v2groupfirst.v2grouplast {
  border-radius: 10px;
}

.v2group-aside {
  background: #f8f0e0;
}

.v2group-note {
  background: #e8f0f7;
}

.v2group-plain.v2ingroup {
  padding-left: 0;
  padding-right: 0;
}

.v2groupheading {
  font: 600 18px/1.4 system-ui, sans-serif;
  color: #5a4520;
}

.v2group-note .v2groupheading {
  color: #2d4a66;
}

/* A reveal's title line: a button with a plus that turns to a minus. */
.v2revealtoggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: 500 17px/1.5 system-ui, sans-serif;
  color: #36c;
}

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

.v2revealsign::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-weight: 700;
}

.v2open .v2revealsign::before {
  content: "−";
}

.v2reveal:not(.v2open) {
  padding-bottom: 1rem;
}

/* The settings popup's note when the open book fixes its reading mode. */
.settingsNote {
  margin-top: 0.5rem;
  font-style: italic;
  color: #666;
}

/* A tutorial example: the sentence, then its English. The English is the
   lesson's, so the translation-off setting does not hide it.

   A short example's English sits to the right of its Chinese, as the draft
   lays them out -- on a phone too, so a run of 十一 11, 十二 12 reads as a
   table rather than a stack (Rex, 2026-10-25). The Chinese column has a
   minimum width, so down a run the English starts in the same place; when the
   two do not fit side by side, the English wraps below. */
.v2example {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1rem;
}

.v2example .v2zh {
  flex: 0 1 auto;
  min-width: 7.5rem;
}

.v2example .v2en {
  flex: 1 1 9rem;
  margin-top: 0;
}

/* A run of examples reads as one table: close together, with the usual space
   only after the last of them. */
.v2example:not(.v2ingroup):has(+ .v2example) {
  margin-bottom: 0.2rem;
}

/* In a group the gap is padding, not margin, so the box's colour stays unbroken. */
.v2example.v2ingroup:has(+ .v2example) {
  padding-bottom: 0.2rem;
}

@media (min-width: 768px) {
  .v2example {
    column-gap: 1.5rem;
  }
  .v2example .v2zh {
    min-width: 14rem;
  }
  .v2example .v2en {
    flex-basis: 14rem;
  }
}
/* Its play button sits at the head of the Chinese line, in every reading mode. */
.v2spotplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.6rem;
  padding: 0 0 0 0.1rem;
  vertical-align: middle;
  border: 0;
  border-radius: 50%;
  background: #eee;
  color: #333;
  font-size: 0.8rem;
  cursor: pointer;
}

.v2spotplay:hover {
  background: #333;
  color: #fff;
}

.v2spotplay.v2sounding {
  background: #c0504d;
  color: #fff;
}

.v2page.v2noen .v2example .v2en {
  display: block;
}

/* A word is as wide as the wider of its characters and its reading, which is
   airy where a long reading sits over one character.

   The obvious alternative -- float the reading above so only the characters
   set the width -- was tried and removed. Measured over ch01's 575 tokens it
   collided 28 times, worst 12.7px (Cháng Jiāng over 长江 running into shàng),
   and it changes nothing in the modes where it would be safe: with the reading
   hidden the word already collapses to its characters. So it did nothing where
   it worked and broke where it did something. If the airiness needs solving,
   it wants the reading to overhang neighbouring punctuation only, which CSS
   cannot express -- so it would be a measure-and-place pass, not a rule. */
/* Front matter (bookdev F16): reference blocks, drawn by the same renderer as
   the chapter flow.  v1's cover, contents and end-book templates all go. */
.v2titlepage {
  text-align: center;
  padding: 1rem 0 2.5rem;
}

/* The cover's shape is known before it loads -- compose-cover makes every one
   682x1024 -- so the title page is laid out at its final size. Unreserved, it
   was measured at no height: the text jumped down when it arrived, and the
   paged title page overflowed. */
.v2cover {
  aspect-ratio: 682/1024;
  height: auto;
  width: 60%;
  max-width: 17rem;
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  margin-bottom: 1.5rem;
}

.v2booktitle-zh {
  font-size: 30px;
  line-height: 1.3;
}

.v2booktitle-en {
  font: 600 18px/1.4 system-ui, sans-serif;
  margin-top: 0.35rem;
}

.v2byline {
  font: 14px/1.5 system-ui, sans-serif;
  color: #666;
  margin-top: 0.6rem;
}

.v2level {
  font: 12px/1.5 system-ui, sans-serif;
  color: #999;
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.v2summary {
  font: italic 15px/1.6 Georgia, serif;
  color: #555;
  margin: 1.5rem auto 0;
  max-width: 32rem;
  text-align: left;
}

/* The heading a reference block carries.  Shared by the cast and the contents
   so a section added later looks like the ones already there. */
.v2sectiontitle {
  font: 600 13px/1 system-ui, sans-serif;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
}

.v2cast {
  margin: 0 0 2.5rem;
}

.v2castgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1.5rem 1rem;
}

.v2castcard {
  text-align: center;
}

.v2castcard img {
  width: 5.8rem;
  height: 5.8rem;
  border-radius: 50%;
  object-fit: cover;
}

.v2castname {
  margin-top: 0.5rem;
}

.v2castblurb {
  font: 12px/1.45 system-ui, sans-serif;
  color: #777;
  margin-top: 0.3rem;
}

.v2contents {
  margin: 0 0 2rem;
}

.v2contentsrow {
  display: block;
  padding: 0.7rem 0;
  border-top: 1px solid #eee;
  text-decoration: none;
  color: inherit;
}

.v2contentsrow:hover {
  background: #fafafa;
}

.v2contentszh {
  font-size: 20px;
}

.v2contentsen {
  display: block;
  font: 13px/1.4 system-ui, sans-serif;
  color: #777;
}

/* The footer. On a phone it is the whole of the reader's chrome: a progress
   line that only reports, with the controls beneath it. On a desktop the
   controls live in the header instead and this is the progress bar alone,
   which is where it can afford to be a control. */
.v2footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  margin: 2rem -1.25rem 0;
  padding: 0.5rem 1.25rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.v2footer .v2actions {
  justify-content: center;
}

/* Above the English panel as it slides up from behind it. */
.v2footer {
  z-index: 10;
}

/* The English panel (pageRead): v1's, the pale ground with a white edge and a
   shadow, sliding up from the footer on a phone and down from the strip on a
   wide screen, from behind them. Tapping anywhere on it closes it. */
.v2enpanel {
  position: fixed;
  z-index: 9;
  box-sizing: border-box;
  overflow-y: auto;
  background: #f8eecb;
  border-top: 6px solid #fff;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.2s ease, visibility 0.2s;
}

.v2enpanel.v2endown {
  transform: translateY(-100%);
  border-top: 0;
  border-bottom: 6px solid #fff;
}

.v2enpanel.open {
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .v2enpanel {
    transition: none;
  }
}
.v2enbody {
  max-width: 46rem;
  margin: 0 auto;
  padding: 16px 30px 20px;
}

.v2enrow {
  margin: 0 0 0.8em;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 1.45;
  color: #333;
}

.v2enrow:last-child {
  margin-bottom: 0;
}

.v2enrow em {
  font-style: italic;
}

.v2ennone {
  color: #999;
}

/* Wide: v1's big play button, then its chapter bar across the whole reading
   area -- a block per chapter, numbered at the left, filling blue. */
.v2wide .v2footer {
  margin-left: calc(50% - var(--v2areaw, 100vw) / 2);
  margin-right: calc(50% - var(--v2areaw, 100vw) / 2);
  padding: 0;
  gap: 0;
}

.v2wide .v2ftrmid {
  padding: 10px 0;
}

.v2wide .v2progress {
  order: 2;
  height: 30px;
  gap: 6px;
  border-top: 2px solid #fff;
}

.v2wide .v2navbox {
  background: #e0e0e0;
  border-radius: 0;
}

.v2wide .v2navfill {
  border-radius: 0;
}

.v2navnum {
  display: none;
}

.v2wide .v2navnum {
  display: flex;
  position: relative;
  height: 100%;
  align-items: center;
  padding-left: 10px;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1em;
  color: #333;
}

.v2wide .v2navbox.v2navlit .v2navnum {
  color: #fff;
}

.v2wide .v2navbox:hover {
  background: #668fbc;
}

.v2wide .v2navbox:hover .v2navnum {
  color: #fff;
}

/* On a phone the footer is the whole of the reader's chrome, and v1 gives that
   strip a ground of its own so it reads as chrome rather than as the end of the
   text. Matching it: $color_bggrey, and play at v1's size (Rex, 2026-09-12).
   English was spelled out with v1's chevron until 2026-10-30; it is EN in the
   same outlined frame as 懂？ now, since v2 has no panel for it to slide up. */
.v2page:not(.v2wide) .v2footer {
  background: #ebebeb;
  padding: 0.35rem 1.25rem 0.45rem;
  gap: 0.35rem;
}

.v2page:not(.v2wide) .v2ftrbar {
  min-height: 48px;
}

/* Play is v1's icon everywhere: 48px between the arrows on a phone, and on a
   wide screen v1's big button, 70px scaling to 48 as the window narrows. */
.v2actplay {
  display: inline-flex;
  align-items: center;
}
.v2actplay img {
  width: 48px;
  height: 48px;
  display: block;
}
.v2actplay img.on {
  display: none;
}
.v2actplay:hover img.off, .v2actplay.on img.off {
  display: none;
}
.v2actplay:hover img.on, .v2actplay.on img.on {
  display: block;
}

.v2wide .v2actplay img {
  width: 70px;
  height: 70px;
}

@media (max-width: 1365px) {
  .v2wide .v2actplay img {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 1091px) {
  .v2wide .v2actplay img {
    width: 48px;
    height: 48px;
  }
}
/* The phone footer's labels, a little under v1's size so ENGLISH and its
   caret fit beside the page arrows on a 375px phone. */
.v2page:not(.v2wide) .v2ftrbar .v2setlink {
  font-size: 0.8em;
  gap: 4px;
}

/* ...but 懂？ the same size as in the strip: it is a character, not a label. */
.v2page:not(.v2wide) .v2ftrbar .v2actexplain {
  font-size: 17px;
}

.v2progress {
  display: flex;
  gap: 3px;
  height: 6px;
  width: 100%;
}

/* Darker on a phone, where the footer's own ground is #ebebeb and the default
   track would be all but invisible against it. */
.v2page:not(.v2wide) .v2navbox {
  background: #dcdcdc;
}

.v2navbox {
  position: relative;
  background: #ececec;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  pointer-events: none;
}

.v2navfill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #668fbc;
  border-radius: 4px;
}

/* Wide: the progress bar becomes a control, so it grows to a size a pointer
   can comfortably hit and says so on hover. On a phone it stays an indicator --
   6px is far below a touch target, and the only direction its hit area could
   grow is up into the text, where a stray tap would throw the reader into
   another chapter mid-sentence. Jumping lives on the contents page, reached
   from the menu (A19). */
.v2wide .v2navbox {
  pointer-events: auto;
}

.v2chapterend {
  margin: 3rem 0 1rem;
  text-align: center;
}

.v2next {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  font: 14px/1 system-ui, sans-serif;
}

.v2next:hover {
  background: #333;
  color: #fff;
  border-color: #333;
}

.v2theend {
  font: 13px/1 system-ui, sans-serif;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* In paged mode an illustration shares a page with the paragraph it belongs
   to, so it cannot take the whole viewport. Capped against the page height the
   partitioner is working with, which is set as a variable when it measures. */
.v2paged .v2image img {
  width: min(100%, var(--v2pagemax, 60vh) * 0.58 * var(--v2ar, 1.5));
  margin: 0 auto;
}

/* Bottom margin only, like .v2block -- see the note there. A top margin here
   collapsed against the preceding paragraph's bottom one in flow mode and did
   not in paged mode, where .v2blocks is a flex container, so the same two
   blocks sat 32px apart in one mode and 58px apart in the other. */
/* v1's 800px limit, now that the column is wider than that; centred in it. */
.v2image {
  margin: 0 auto 2rem;
  max-width: 800px;
}

.v2image.v2imagesized {
  margin-left: auto;
  margin-right: auto;
}

.v2image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.v2image figcaption {
  margin-top: 0.5rem;
  font: 13px/1.4 system-ui, sans-serif;
  color: #666;
  text-align: center;
}

/* Chunk outlines: the audio highlight unit, made visible for inspection. */
.v2showchunks .v2chunk {
  outline: 1px dashed #c9a;
  outline-offset: 2px;
}

.v2nozp .v2zp {
  display: none;
}

.v2noen .v2en {
  display: none;
}

/* ---------------------------------------------------------------------------
   Explain this.

   The panel opens from the 懂？ control (or a mouse long press) and repeats the
   sentence it explains: on a phone the strip of page left above it is around four lines
   and a paragraph averages 4.4, so the sentence it came from is usually
   covered.  Nothing here hides when there are no cards -- at level 1 that is
   three sentences in five, and the meaning, the literal gloss and the words
   are a complete answer on their own.
   -------------------------------------------------------------------------- */
/* The 懂？ control and the armed page.  One tap arms the next word to explain
   its sentence (pageRead.setExplainArmed).  A mouse gets the help cursor -- the
   arrow with a question mark -- over the words, so the mode is visible where
   the next click lands; touch has no cursor and relies on the lit button. */
.v2xarm .v2tok[data-code] {
  cursor: help;
}

.v2explain {
  max-width: 34rem;
}

/* The sentence, in the reader's own tokens so it follows the reading mode and
   stays tappable.  It is the one thing the panel must always show. */
.v2xpinned {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid #e6e6e6;
}

/* The sentence and its play button share a row, the button holding its size
   while the sentence wraps beside it. */
.v2xrow {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.v2xsentence {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.v2xplay {
  flex: none;
  width: 34px;
  height: 34px;
  margin-top: 0.2rem;
  border-radius: 50%;
  border: 1px solid #d3ddea;
  background: #eef2f7;
  color: #33506e;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.v2xplay:hover {
  background: #33506e;
  color: #fff;
  border-color: #33506e;
}

.v2xen {
  margin: 0.6rem 0 0;
  font: 16px/1.45 system-ui, sans-serif;
  color: #222;
}

/* The working, under the answer: word-by-word in Chinese order.  Lighter than
   the English on purpose -- it is how the meaning is arrived at, not what the
   sentence means. */
.v2xliteral {
  margin: 0 0 1rem;
  padding-left: 0.7rem;
  border-left: 2px solid #e0d9c8;
  font: 14px/1.5 system-ui, sans-serif;
  color: #666;
}

.v2xtag {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: #a09684;
  margin-right: 0.5rem;
}

.v2xcard {
  background: #faf7f0;
  border: 1px solid #e8e0ce;
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.6rem;
}

.v2xtype {
  font: 600 11px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #5b7a99;
}

.v2xcard h4 {
  margin: 0.25rem 0 0.35rem;
  font: 600 15px/1.35 system-ui, sans-serif;
}

.v2xcard p {
  margin: 0;
  font: 14px/1.55 system-ui, sans-serif;
  color: #555;
}

/* Chinese quoted inside a card is a real token run, so it follows the reading
   mode and stays tappable like any other word.

   But in BOTH mode the stacked reading comes off: a term cited mid-paragraph is
   part of an English sentence, and a pinyin block above it makes only the lines
   containing Chinese taller, so the paragraph ends up unevenly spaced (Rex,
   2026-09-13).  The readings are on the sentence at the top of the panel, which
   is where they are being read; a mention of 得 four lines into the prose does
   not need its own.

   Pinyin-only mode keeps them, and must: there the characters are hidden and
   the reading IS the word.  A card that showed 得 to a reader in pinyin mode
   would be showing nothing at all. */
.v2xrun {
  display: inline-block;
  vertical-align: baseline;
}

.v2xrun .v2hz {
  font-size: 17px;
  line-height: 1.2;
}

/* Both mode: the reading comes off a cited term, and the small size that goes
   with a stacked reading has to be scoped here rather than set on .v2xrun --
   it has the same specificity as .v2fmt-zp .v2zp and sits after it, so an
   unscoped rule shrank the pinyin-only case to 10px, where the reading is not
   an annotation but the word itself. */
.v2fmt-zhp .v2xrun .v2zp {
  font-size: 10px;
}
.v2fmt-zhp .v2xcard .v2xrun .v2zp,
.v2fmt-zhp .v2xliteral .v2xrun .v2zp {
  display: none;
}

/* A closing quote follows punctuation that already carries a full-width em of
   trailing space, so it drifts away from the speech it closes -- 山？ ” instead
   of 山？”.  Pulled back over that space.  Only the CJK forms: .v2pp is Latin
   and proportional, so it has no gap to close. */
.v2pz .v2pclose {
  margin-left: -0.3em;
}

/* The words, last and quiet. The reader usually knows them -- that is the
   premise of the whole feature -- so the list steps back rather than away.

   The word cell is a real token, so it follows the reading mode like everything
   else: characters only, reading only, or both stacked. */
.v2xword {
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) 1fr;
  gap: 0.1rem 0.8rem;
  align-items: baseline;
  padding: 0.35rem 0;
}

.v2xw .v2hz {
  font-size: 19px;
}

.v2xw .v2zp {
  font-size: 11px;
}

.v2xd {
  font: 14px/1.5 system-ui, sans-serif;
  color: #666;
}

.v2xd b {
  color: #5b7a99;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.4rem;
}

/* A sense override replaces the dictionary definition rather than sitting
   beside it: the point is that the first definition would mislead here. */
.v2xsense {
  margin-left: 0.45rem;
  color: #5b7a99;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* The panel is bounded and its body scrolls.

   .popup sets overflow-y:auto but no max-height, and #popupContainer is
   fixed-centred at height:auto -- so a tall panel simply grew past the viewport
   in both directions and the overflow never engaged: the sentence at the bottom
   was clipped off with no way to reach it (Rex, 2026-09-13).

   Scrolling the BODY rather than the whole panel keeps two things in place that
   should never leave: the sentence being explained, which is pinned for the
   reason the whole panel exists, and the close button.

   Doubled selector deliberately: _v2reader is imported before the rest of the
   sheet, so .popup's own overflow rule wins against a single class. */
.popup.v2explain {
  display: flex;
  flex-direction: column;
  /* dvh, not just vh: on a phone vh counts the area behind the browser's own
     toolbars, so 85vh still ran past the visible screen (Rex, 2026-10-21). */
  max-height: 85vh;
  max-height: 85dvh;
  overflow: hidden;
  padding-bottom: 1.2rem;
  /* The cap is on the whole panel: content-box let .popup's padding add ~50px
     past it, which centring hid by splitting it top and bottom. */
  box-sizing: border-box;
}

/* The close button at a finger's size: .popup's is a 20px glyph in about a
   26px box. The panel's padding leaves room for it in the corner. */
.v2explain .popupClose {
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  color: #555;
}

/* Below the wide breakpoint the panel spans the screen, and centred at 85dvh its
   top -- and the close button -- slid under the menu burger, which stacks above
   every popup. So it hangs from just below the burger (60px, 70px from 480px)
   instead, and takes the rest of the height bar a small margin. Top-anchored
   rather than centred, so the margin is not spent twice (Rex, 2026-10-30). */
/* It also spans the screen bar a 12px margin. Centred by left:50% and a
   translate, its auto width was capped at half the viewport, and .popup's
   30px/50px side padding left the text about 167px of a 375px phone. The top
   padding stays clear of the close button. */
@media (max-width: 767px) {
  #popupContainer:has(.v2explain) {
    top: 76px;
    left: 12px;
    right: 12px;
    transform: none;
  }
  .popup.v2explain {
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    max-width: none;
    padding: 40px 20px 1.2rem;
  }
}
.v2explain .v2xpinned {
  flex: none;
}

.v2explain .v2xbody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* The words become a card, like the teaching cards -- a bounded reference block
   rather than a list trailing off the end of the panel. */
.v2xwords {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 6px;
  margin-top: 0.2rem;
  padding: 0.5rem 0.8rem;
}

/* The tail of the ranking, folded away. A disclosure rather than a tab: the
   cards are ordered by how hard the friction is, and anything that presents
   them as peers throws that ordering away. */
.v2xmore {
  margin-bottom: 0.6rem;
}

.v2xmore > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.3rem 0 0.5rem;
  font: 13px/1 system-ui, sans-serif;
  color: #5b7a99;
}

.v2xmore > summary::-webkit-details-marker {
  display: none;
}

.v2xmore > summary::before {
  content: "▸ ";
}

.v2xmore[open] > summary::before {
  content: "▾ ";
}

/* A sentence armed by press-and-hold. Painted on the tokens like the narration
   highlight, so it covers the readings too and reads as one band across the
   sentence -- and in a different colour, because it means something different:
   this is what you are about to ask about, not what you are hearing. */
.v2chunk.v2xarmed .v2tok {
  background: #e4ecf6;
}

.v2chunk.v2xarmed:first-of-type .v2tok:first-child {
  border-radius: 3px 0 0 3px;
}

.v2chunk.v2xarmed:last-of-type .v2tok:last-child {
  border-radius: 0 3px 3px 0;
}

/* =========================================================================
   Exercises (PLAN.md Phase 4a)
   A programmer's first cut, like the rest of this file, and due Amanda's pass.
   The one structural rule it carries is A29: anything that ANSWERS is a
   bordered, filled button; anything that DEFINES keeps the chapter's reading-
   text look; a zh2en prompt word sits large on a plain card that reads as the
   question. Text that cannot be tapped must not look like text that can.
   ========================================================================= */
/* The set is a page of its own in paged mode: exactly the paginator's page
   height, scrolling inside itself for the rare item that does not fit (A27).
   In flow mode it claims about a screen, and an oversized item simply makes it
   taller (A28). The 9rem stands in for the titlebar and footer until the flow
   layout has a measured value of its own. */
.v2exercise {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e4e4e4;
  padding-top: 1.25rem;
}

.v2paged .v2exercise {
  height: var(--v2pagemax, 70vh);
  margin-bottom: 0;
  border-top: 0;
  padding-top: 0;
}

.v2page:not(.v2paged) .v2exercise {
  min-height: calc(100vh - 9rem);
}

.v2exbody {
  flex: 1;
  min-height: 0;
}

.v2paged .v2exbody {
  overflow-y: auto;
}

/* `display: flex` above outranks the browser's own [hidden] rule, and paged
   mode shows a page by setting `hidden` on every block not on it -- so without
   this the set was drawn beneath every page of the chapter. */
.v2exercise[hidden], .v2exercise.v2exmissing {
  display: none;
}

/* A36: on the exercise page, the chapter's controls have nothing to act on.
   Hidden in place rather than removed, so the footer does not shift as the
   page turns onto the set. */
.v2page.v2onexercise .v2actplay,
.v2page.v2onexercise .v2acten {
  visibility: hidden;
}

.v2exhome, .v2exitem {
  font: 15px/1.5 system-ui, sans-serif;
  color: #222;
}

.v2exhome {
  text-align: center;
  padding-top: 2rem;
}

.v2extitle {
  font-size: 20px;
  font-weight: 600;
}

.v2exsummary, .v2exscore {
  color: #666;
  margin: 0.4rem 0 1.5rem;
}

.v2exscore {
  font-size: 17px;
  color: #222;
}

.v2exhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.v2exprogress {
  color: #888;
  font-size: 13px;
}

.v2exhead .v2exbtn {
  padding: 0.3rem 0.8rem;
  font-size: 13px;
}

.v2exinstruction {
  color: #666;
  margin-bottom: 0.6rem;
}

.v2excoming {
  color: #888;
  font-style: italic;
  margin: 2rem 0;
  text-align: center;
}

/* The question. A plain card -- no button chrome, because it does not answer,
   and no hover, because it does not define. */
.v2exprompt {
  background: #f6f6f4;
  border-radius: 8px;
  padding: 1.2rem 1rem;
  margin-bottom: 1.2rem;
  text-align: center;
}

.v2exprompt-zh .v2hz {
  font-size: calc(var(--v2hz, 23px) * 1.6);
}

.v2exprompt-zh .v2zp {
  font-size: calc(var(--v2zp, 12px) * 1.4);
}

.v2fmt-zp .v2exprompt-zh .v2zp {
  font-size: 28px;
}

.v2exprompt-en {
  font: italic 19px/1.4 Georgia, serif;
  color: #333;
}

/* A number drill's numerals (bookdev TUTORIALS.md § 5.4): upright, large as a
   question and plain as an option. */
.v2exprompt-num {
  font: 500 32px/1.2 system-ui, sans-serif;
  color: #222;
}

.v2exoptnum {
  font: 500 19px/1.2 system-ui, sans-serif;
}

.v2exprompt .v2zh, .v2exopt .v2zh {
  line-height: 1.4;
}

/* Options: buttons. Glosses in a list, short Chinese in a two-column grid. */
.v2exoptions {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.v2exoptions-grid {
  grid-template-columns: 1fr 1fr;
}

.v2exopt {
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  text-align: left;
  color: #222;
  font: 15px/1.4 system-ui, sans-serif;
  box-shadow: 0 1px 0 #ddd;
  transition: background 0.12s, border-color 0.12s;
}

.v2exoptions-grid .v2exopt {
  text-align: center;
}

.v2exopt:hover:not(:disabled) {
  border-color: #888;
  background: #fafafa;
}

.v2exopt:disabled {
  cursor: default;
}

/* A wrong option stays where it is, so the learner keeps their record of what
   they eliminated (A34). */
.v2exopt.v2exwrong {
  border-color: #e2a3a1;
  background: #fbeceb;
  color: #a33;
  opacity: 0.8;
}

.v2exopt.v2exright {
  border-color: #6aa86a;
  background: #e8f4e6;
  color: #225522;
}

/* A mark at the right as well as the colour, which red-green colour blindness
   cannot tell apart: a tick for right, a cross for wrong. Room is kept for it
   so a long gloss never runs under it. */
.v2exopt {
  position: relative;
}

.v2exopt.v2exright, .v2exopt.v2exwrong {
  padding-right: 2rem;
}

.v2exoptions-grid .v2exopt.v2exright, .v2exoptions-grid .v2exopt.v2exwrong {
  padding-left: 2rem;
}

.v2exopt.v2exright::after, .v2exopt.v2exwrong::after {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font: 700 17px/1 system-ui, sans-serif;
}

.v2exopt.v2exright::after {
  content: "✓";
  color: #2e7d32;
}

.v2exopt.v2exwrong::after {
  content: "✕";
  color: #b23b36;
}

.v2exopt .v2tok {
  cursor: inherit;
}

.v2exbuttons {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.v2exbtn {
  display: inline-block;
  padding: 0.55rem 1.2rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  font: 14px/1.2 system-ui, sans-serif;
}

.v2exbtn:hover {
  background: #f0f0f0;
}

.v2exbtn.v2exprimary {
  background: #333;
  border-color: #333;
  color: #fff;
}

.v2exbtn.v2exprimary:hover {
  background: #111;
}

/* A tutorial drill (drill.js): an inline card among the lesson's blocks, not a
   page of its own. Its first question shows at once, so the reader sees what
   there is to try. Narrower than the text on a wide screen, since a row of
   options a whole measure wide reads as a table. */
/* Two layers: the block (.v2drill) is the column's width like any block, so
   inside an aside or note it carries the group's colour; the card is drawn
   inside it, translucent there so the colour shows through (Rex, 2026-10-25). */
.v2drillcard {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #e2ded3;
  border-radius: 10px;
  background: #fcfbf8;
  padding: 0.9rem 1rem 0.2rem;
}

.v2ingroup .v2drillcard {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.1);
}

.v2drill.v2exmissing {
  display: none;
}

.v2drilltitle {
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8270;
  margin-bottom: 0.7rem;
}

.v2drill .v2exprompt {
  background: #fff;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}

.v2drill .v2exoptions {
  margin-bottom: 0.2rem;
}

/* A drill's options, English or Chinese, sit side by side on a wide page --
   three in one row rather than two and a straggler -- and stack on a phone,
   where side by side leaves no room for the mark without wrapping the text
   (Rex, 2026-10-25). One layout whichever way a mixed drill asks. */
.v2drill .v2exoptions-grid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v2page:not(.v2wide) .v2drill .v2exoptions-grid {
  grid-template-columns: minmax(0, 1fr);
}

.v2page:not(.v2wide) .v2drill .v2exoptions-grid .v2exopt {
  text-align: left;
  padding-left: 0.9rem;
}

.v2drill .v2exbuttons {
  margin: 0.8rem 0;
}

/* Results: each miss as a short stack -- the question, then a labelled answer,
   then a labelled "You chose" or "Skipped". One column, because side by side a
   wrapping question became a tall column with the answer floating beside it.
   The Chinese is smaller than reading size: this is a review list, not text to
   read, and at full size one comprehension question took four lines. */
.v2exmissed {
  text-align: left;
  margin: 0 auto 1rem;
  max-width: 30rem;
  --v2hz: 18px;
  --v2zp: 10px;
}

.v2exmissrow {
  padding: 0.7rem 0;
  border-top: 1px solid #eee;
}

.v2exmissq {
  margin-bottom: 0.3rem;
}

.v2exmissline {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.15rem;
}

.v2exmisslabel {
  flex: none;
  width: 5.5rem;
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.v2exmissa .v2exmisslabel {
  color: #3a7a3a;
}

.v2exmissyours .v2exmisslabel {
  color: #a33;
}

.v2exmissyours .v2zh, .v2exmissyours .v2exopten {
  color: #a33;
}

.v2exmissed .v2zh {
  line-height: 1.35;
}

.v2fmt-zp .v2exmissed .v2zp {
  font-size: 15px;
}

/* Audio-word. The prompt is a sound, so its card holds one large play button;
   the results page repeats it small beside the answer. A button, never a token:
   it plays, it does not define. */
.v2exprompt-audio {
  padding: 1.4rem 1rem;
}

.v2explay {
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #fff;
  color: #333;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 0 #ddd;
  transition: background 0.12s, color 0.12s;
}

.v2explay-big {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.7rem;
}

.v2explay-small {
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
}

.v2explay:hover {
  background: #f0f0f0;
}

.v2explay.v2explaying {
  background: #333;
  border-color: #333;
  color: #fff;
}

/* A missing recording is a dictionary bug, and says so rather than looking live. */
.v2explay.v2exnoaudio {
  color: #bbb;
  border-style: dashed;
  cursor: default;
}

.v2exmissq .v2explay {
  vertical-align: middle;
}

/* Comprehension. The question sits on the card left-aligned like a line of the
   story, not centred like a display word. Not tappable for now (A29, amended);
   the answers are buttons holding plain Chinese. */
.v2exprompt-question {
  text-align: left;
}

.v2exsentence {
  line-height: 1.6;
}

.v2exopt .v2exsentence {
  line-height: 1.4;
}

.v2exmissed .v2exsentence {
  line-height: 1.4;
}

/* Complete-sentence (tiles.js). The sentence is a row of fixed words and slots;
   the tray holds Scrabble-like pieces (EXERCISES.md § Rendering). A tile is a
   physical thing you move, so it looks like one -- and, being an answer, it
   never taps for the dictionary (A29). */
.v2exsentrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem 0.2rem;
  justify-content: center;
  margin: 1.2rem 0 1.6rem;
  line-height: 1.4;
}

.v2exslot {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 3.2rem;
  min-height: 3.1rem;
  padding: 2px;
  border-bottom: 2px solid #bbb;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.v2exslot.v2exslotselected {
  border-bottom-color: #333;
  background: #f3f3ee;
}

.v2exslot.v2exslotright {
  border-bottom-color: #6aa86a;
  cursor: default;
}

.v2exslot.v2exslotright .v2extile {
  background: #e8f4e6;
  border-color: #6aa86a;
  cursor: default;
}

/* A wrong tile, for a second after the check: red where it stands, one flash,
   then it goes home (tiles.js WRONG_SHOW_MS, the same length). */
.v2extile.v2extilewrong {
  background: #fbeceb;
  border-color: #d47a76;
  box-shadow: 0 1px 0 #d47a76;
  color: #a33;
  animation: v2extilewrong 1s ease-in-out;
  cursor: default;
}

@keyframes v2extilewrong {
  0% {
    background: #fdf8ec;
    border-color: #d9cfb4;
    color: inherit;
  }
  20%, 55%, 100% {
    background: #f6d2cf;
    border-color: #c65b55;
    color: #a33;
  }
  38% {
    background: #fdf3f2;
    border-color: #e6aaa6;
    color: #c77;
  }
}
.v2extray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem;
  margin-bottom: 1rem;
  background: #f6f6f4;
  border-radius: 8px;
}

.v2extile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8rem;
  padding: 0.3rem 0.55rem;
  background: #fdf8ec;
  border: 1px solid #d9cfb4;
  border-radius: 6px;
  box-shadow: 0 2px 0 #cbbf9f;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* A drag moves the tile; without this a touch-drag scrolls the page
     and the browser cancels the pointer. */
  touch-action: none;
}

.v2extile .v2zh {
  line-height: 1.3;
}

.v2extile .v2tok {
  cursor: inherit;
}

.v2exslot .v2extile {
  box-shadow: 0 1px 0 #cbbf9f;
}

/* The hollow a placed tile leaves, so the tray never reflows. */
.v2extile.v2extilehole {
  visibility: hidden;
}

.v2extile.v2extiledragging {
  opacity: 0.35;
}

.v2extileghost {
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  cursor: grabbing;
}

/* Results: the sentence as it should read and as it was first filled. */
.v2exgap {
  color: #bbb;
  padding: 0 0.2em;
}

.v2exmissyours .v2exfilled .v2hz, .v2exmissyours .v2exfilled .v2zp {
  color: #a33;
}

.v2exmissa .v2exfilled .v2hz {
  color: #3a7a3a;
}

/* Pinyin only: a tile is one line, so an empty slot should be too. */
.v2fmt-zp .v2exslot {
  min-height: 2.3rem;
  min-width: 3.6rem;
}

/* Results, after practice: how much more was done, as a quiet line. */
.v2expracticed {
  color: #666;
  font-size: 13px;
  margin: -0.6rem 0 1rem;
  text-align: center;
}

/*  =====================================================
    Folded in from rex2.scss (Rex's overflow area), 2026-09-07.
    Kept in import position so cascade order is unchanged.
    ===================================================== */
/*  rex2.scss is Rex's "overflow css" area */
/* FOR BOOK IMAGES */
/*  ------------------------------------- */
/*  PAGEFLIP ANIMATION                    */
/*  ------------------------------------- */
#bookcoverOpening {
  position: fixed;
  z-index: 9900;
}

#bookcoverOpeningBackdrop {
  position: fixed;
  z-index: 9890;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-image: url('../images/bookcoverbackdrop.png');
  background-repeat: no-repeat;*/
  background-color: #3e5166; /* fallback for old browsers */
  background-image: -moz-linear-gradient(#a3bcd4, #3e5166); /* Mozilla Firefox */
  background-image: -o-linear-gradient(#a3bcd4, #3e5166); /* Opera */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a3bcd4), color-stop(1, #3e5166)); /* WebKit (Safari 4+, Chrome 1+) */
  background-image: -webkit-linear-gradient(#a3bcd4, #3e5166); /* WebKit (Chrome 11+) */
  background-image: -ms-linear-gradient(#a3bcd4, #3e5166); /* IE10 */
  background-image: linear-gradient(#a3bcd4, #3e5166); /* W3C */
  opacity: 0;
}

/*  ------------------------------------- */
/*  LOGIN                                 */
/*  ------------------------------------- */
#loginError {
  margin-top: 20px;
  font-size: 20px;
  color: #da291c;
  font-weight: bold;
}

/*  ------------------------------------- */
/*  TOOLTIP                               */
/*  ------------------------------------- */
#tooltip {
  position: fixed;
  z-index: 9960;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  font-size: 15px;
  padding: 2px 4px;
}

/*  ------------------------------------- */
/*  DICTIONARY                            */
/*  ------------------------------------- */
#dictTable .dictTopRow {
  padding-top: 6px;
}
#dictTable .dictTopRow .dictcode {
  color: #999;
  font-size: 16px;
}

.dictEntry .dictCharInstr {
  position: absolute;
  top: 40px;
  right: 20px;
  color: #666;
  font-size: 14px;
}
@media (min-width: 480px) and (max-width: 768px) {
  .dictEntry .dictCharInstr {
    font-size: 12px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .dictEntry .dictCharInstr {
    font-size: 12px;
  }
}
@media only screen and (max-width: 375px) {
  .dictEntry .dictCharInstr {
    font-size: 10px;
  }
}

/*  ------------------------------------- */
/*  IMAGE OVERLAY (NOT USED)              */
/*  ------------------------------------- */
/*
.imgOverlayIconThumb {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 16px;
  right: 16px;
  cursor: pointer;
}
.imgOverlayMsg {
  position: absolute;
  font-size: 20px;
}
.imgOverlayIcon {
  position: absolute;
  width: 7%;
  height: 7%;
}
.imgOverlayBox {
  position: absolute;
  margin-top:5%;
  border: 1px solid #000;
  padding: 2px 4px;
  background-color: #fff;
  font-size: 20px;
}
*/
/*  ------------------------------------- */
/*  EXERCISES ANIMATIONS                  */
/*  ------------------------------------- */
/* Shake incorrect choice */
.exerChoiceFrame .exerChoiceButton.incorrect,
.exerDefSentences.buildarea .exerWordButton.incorrect {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
.exerChoiceFrame .exerChoiceButton.correct .feedback {
  animation: scaling2to1 1s;
}

@keyframes scaling2to1 {
  from {
    transform: scale(2);
  }
  to {
    transform: scale(1);
  }
}
/*  ------------------------------------- */
/*  HELP SYSTEM                           */
/*  ------------------------------------- */
.helpInfoBox {
  background-color: #cedae6;
  border: 4px solid #e0e0e0;
  padding-bottom: 10px;
}
.helpInfoBox .helpInfoBoxTitle {
  padding: 8px 0;
  background-color: #111166;
  color: #fff;
  border-bottom: 2px solid #e0e0e0;
  font-weight: bold;
  font-size: 1.6em;
  text-align: center;
}
.helpInfoBox .helpInfoBoxText {
  padding: 10px 10px;
  color: #000;
  font-size: 1.3em;
}
.helpInfoBox .helpInfoButtons .helpInfoButton {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #111166;
  color: #fff;
  cursor: pointer;
}
.helpInfoBox .helpInfoButtons .helpInfoButton:hover {
  background-color: #333333;
}
.helpInfoBox .helpInfoButtons .helpInfoButtonEnd {
  margin-left: 10px;
}
.helpInfoBox .helpInfoButtons .helpInfoButtonNext {
  float: right;
  margin-right: 10px;
}

.helpOverlay {
  position: fixed;
  z-index: 9000;
  width: 64px;
  height: 64px;
}

/*  ------------------------------------- */
/*  MISCELLANEOUS - AMANDA, PLZ REVIEW    */
/*  ------------------------------------- */
/* AMANDA: I ADDED THIS FOR EDITOR AT LEAST, NOT SURE IF USED ELSEWHERE */
span.bold {
  font-weight: bold;
}

/* AMANDA: FIX OR MOVE THIS */
.pagenavctrl.pageleftnav, .pagenavctrl.pagerightnav {
  z-index: 7500;
}

/*
FOR SCREEN SIZE MEDIA QUERIES:
	@include responsive(xwide-screens) {  }
	@include responsive(wide-screens) {  }
	@include responsive(large-screens) {  }
	@include responsive(medium-screens) {  }
	@include responsive(small-screens) {  }
	@include responsive(xsmall-screens) {  }
	@include responsive(mobile-screens) {  }	
*/
/*-------------------------------------------------- */
/* COMMON CSS */
/*-------------------------------------------------- */
html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  background-color: #fff;
}

button {
  /*font-size: 20px;*/
  cursor: pointer;
}

.nolinkstyle {
  color: #000;
  text-decoration: none;
}

.pointer {
  cursor: pointer;
}

a, a:visited, a:hover, a:active {
  text-decoration: none;
}

a, a:visited {
  color: #707070;
}

a:hover, a:active {
  color: #333;
}

a.btn {
  color: #fff;
}

.clear {
  clear: both;
}

a {
  outline: none;
}

p {
  padding: 0 0 12px 0;
  font-size: 1.4em;
  line-height: 1.4em;
  font-family: "AvenirNextWorldThin", helvetica, sans-serif;
  font-weight: 300;
  font-style: normal;
}
@media only screen and (min-width: 1920px) {
  p {
    font-size: 1.4em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  p {
    font-size: 1.4em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  p {
    font-size: 1.4em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  p {
    font-size: 1.3em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  p {
    font-size: 1.3em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  p {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 375px) {
  p {
    font-size: 1.3em;
  }
}
p.intro {
  padding-bottom: 20px;
  font-size: 1.7em;
  line-height: 1.3em;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #668fbc;
}
@media only screen and (min-width: 1920px) {
  p.intro {
    font-size: 1.7em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  p.intro {
    font-size: 1.7em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  p.intro {
    font-size: 1.7em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  p.intro {
    font-size: 1.6em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  p.intro {
    font-size: 1.6em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  p.intro {
    font-size: 1.6em;
  }
}
@media only screen and (max-width: 375px) {
  p.intro {
    font-size: 1.5em;
  }
}
p.note {
  padding-top: 12px;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.1em;
  color: #333;
}

h1, h2, h3 {
  color: #da291c;
  line-height: 1.2em;
}

h1 {
  padding: 0 0 12px 0;
  font-size: 2.4em;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
}
@media only screen and (min-width: 1920px) {
  h1 {
    font-size: 2.4em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  h1 {
    font-size: 2.4em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  h1 {
    font-size: 2.4em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  h1 {
    font-size: 2em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  h1 {
    font-size: 2em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  h1 {
    font-size: 2em;
  }
}
@media only screen and (max-width: 375px) {
  h1 {
    font-size: 1.9em;
  }
}

h2 {
  padding: 20px 0 6px 0;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.6em;
}
h2.top {
  padding-top: 10px;
}

/*.number {
	display: block;
	position: absolute; 
	background-color: $color_blue;
	@include rounded(10px);
	width: 12px; 
	height: 12px;
	padding: 4px;
	@include ave7;
	font-size: 12px;
	line-height: 1.0em;
	display: inline-block;
	text-align: center;
	color: $color_white;
	}*/
.zhpBlock.grammar:hover .number {
  background-color: #333;
}

/*-------------------------------------------------- */
/* Z-INDEX */
/*-------------------------------------------------- */
.bookcontents {
  z-index: 1000;
}

/* #footerSlidePanel { z-index: $z_footer_slide_panel; } */
.number {
  z-index: 5000;
}

.sidenav {
  z-index: 7500;
}

.menulink {
  z-index: 6100;
}

img.chapterPictFull {
  z-index: 7560;
}

.settingsBtm {
  z-index: 4500;
}

#swingMenu {
  z-index: 7600;
}

#popupFooterContainer {
  z-index: 7021;
} /* 1011 */
#popupFooterBackdrop {
  z-index: 7020;
} /* 1010 */
/*-------------------------------------------------- */
/* PAGE FRAME AND GRID AREA NAMES */
/*-------------------------------------------------- */
/* #root is the target for setting page template types; also creates basic grid division between titlebar and page contents */
#root {
  display: grid;
  min-width: 375px;
  height: 100%;
  overflow: hidden;
  grid-template-columns: auto;
  grid-template-rows: 80px auto;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-areas: "titlebar" "pagecontents";
}
@media only screen and (min-width: 1920px) {
  #root {
    grid-template-rows: 80px auto;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #root {
    grid-template-rows: 80px auto;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #root {
    grid-template-rows: 80px auto;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #root {
    grid-template-rows: 70px auto;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #root {
    grid-template-rows: 70px auto;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #root {
    grid-template-rows: 60px auto;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
}
@media only screen and (max-width: 375px) {
  #root {
    grid-template-rows: 60px auto;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
}

/*-------------------------------------------------- */
/* FORM STYLES */
/*-------------------------------------------------- */
input {
  display: block;
  margin: 0 0 8px 0;
  padding: 6px;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.4em;
  border: 1px solid #999;
  outline: none;
}
input:focus {
  border: 1px solid #333;
}

input[type=radio], input[type=checkbox] {
  display: inline-block;
  margin-right: 8px;
}

.btn {
  display: inline-block;
  margin-top: 12px;
  margin-right: 6px;
  padding: 6px 12px;
  color: #fff;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1.1em;
  letter-spacing: 0.05em;
  border: none;
  background-color: #da291c;
  line-height: 1.4em;
}
.btn.buy {
  font-size: 0.9em;
}
.btn.grey {
  background-color: #999;
}
.btn:hover, .btn.grey:hover {
  background-color: #333;
}
.btn.pagetop {
  display: none;
  float: right;
  margin: 2px 0 10px 20px;
}
@media only screen and (min-width: 1920px) {
  .btn.pagetop {
    display: none;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .btn.pagetop {
    display: none;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .btn.pagetop {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .btn.pagetop {
    display: inline-block;
    float: right;
    margin: 2px 0 10px 20px;
  }
}
.btn.pagetop { /* CHECK THIS */ }
@media (min-width: 480px) and (max-width: 768px) {
  .btn.pagetop {
    display: inline-block;
    float: right;
    margin: 2px 0 10px 20px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .btn.pagetop {
    display: inline-block;
    float: right;
    margin: 2px 0 10px 20px;
  }
}
@media only screen and (max-width: 375px) {
  .btn.pagetop {
    display: inline-block;
    float: none;
    margin: 2px 0 10px 0;
  }
}

/*-------------------------------------------------- */
/* SIDE MENU */
/*-------------------------------------------------- */
.sidenav {
  height: 100%; /* 100% full height */
  width: 0; /* 0 width — change this with JavaScript */
  position: fixed; /* stay in place */
  top: 0; /* stay at the top */
  right: 0;
  background-color: #707070;
  overflow-x: hidden; /* disable horizontal scroll */
  transition: 0.5s; /* 0.5s transition effect to slide in the sidenav */
  -webkit-box-shadow: -2px 0 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: -2px 0 40px rgba(0, 0, 0, 0.4);
  box-shadow: -2px 0 40px rgba(0, 0, 0, 0.4);
}
.sidenav ul {
  /* margin: 120px 50px 20px 50px; */
  margin: 120px 0 20px 0;
}
.sidenav ul li {
  margin: 0 50px 0 50px;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #999;
}
.sidenav ul li.last {
  border-bottom: none;
}
.sidenav ul li {
  /*&:hover { background-color: $color-grey; } */
}
.sidenav ul li.current {
  color: #333;
}
.sidenav ul li.current a {
  cursor: default;
}
.sidenav a {
  display: block;
  text-decoration: none;
  font-size: 2em;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #e0e0e0;
  text-align: center;
  /*transition: 0.3s;*/
}
.sidenav a:hover {
  color: #000;
  /* color: $color_white; */
}

/*-------------------------------------------------- */
/* HEADER */
/*-------------------------------------------------- */
.titlebar {
  position: fixed;
  width: 100%;
  display: grid;
  grid-area: titlebar;
  grid-template-columns: 220px auto 80px;
  grid-template-rows: 80px;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-areas: "logo booktitle menulink";
  background-color: #fff;
  z-index: 2000;
}
@media only screen and (min-width: 1920px) {
  .titlebar {
    grid-template-columns: 220px auto 80px;
    grid-template-rows: 80px;
    grid-template-areas: "logo booktitle menulink";
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar {
    grid-template-columns: 220px auto 80px;
    grid-template-rows: 80px;
    grid-template-areas: "logo booktitle menulink";
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar {
    grid-template-columns: 220px auto 80px;
    grid-template-rows: 80px;
    grid-template-areas: "logo booktitle menulink";
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar {
    grid-template-columns: auto 70px;
    grid-template-rows: 70px;
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    grid-template-areas: "booktitle menulink";
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar {
    grid-template-columns: auto 70px;
    grid-template-rows: 70px;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-areas: "booktitle menulink";
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar {
    grid-template-columns: auto 60px;
    grid-template-rows: 60px;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    grid-template-areas: "booktitle menulink";
  }
}
@media only screen and (max-width: 375px) {
  .titlebar {
    grid-template-columns: auto 60px;
    grid-template-rows: 60px;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    grid-template-areas: "booktitle menulink";
  }
}
.titlebar .logo { /* hidden on screens size medium and smaller; on just chapter page? or others?; 
if just chapter pages, remove the lines below that turn visibility off at smaller sizes */
  display: flex;
  justify-content: center;
  flex-direction: column;
  grid-area: logo;
  background-color: #da291c;
  width: 220px;
  height: 80px;
}
@media only screen and (min-width: 1920px) {
  .titlebar .logo {
    display: flex;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .logo {
    display: flex;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .logo {
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .logo {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .logo {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .logo {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .logo {
    display: none;
  }
}
.titlebar .logo a {
  text-align: center;
}
.titlebar .logo img {
  max-width: 190px;
  margin: 0 auto;
}
.titlebar {
  /* previous version below: */
  /*display: grid;
  grid-area: logo;
  background-color: $color_red;
  grid-template-columns: 220px 0;
  grid-template-rows: 80px;
  grid-template-areas: "logobox logobox";
  @include responsive(xwide-screens) {
  	display: grid;
  	grid-template-columns: 220px 0;
  	grid-template-rows: 80px;
  	grid-template-areas: "logobox logobox";
  	.bookinfo { display: none; }
  	}
  @include responsive(wide-screens) {
  	display: grid;
  	grid-template-columns: 220px 0;
  	grid-template-rows: 80px;
  	grid-template-areas: "logobox logobox";
  	.bookinfo { display: none; }
  	}
  @include responsive(large-screens) {
  	display: grid;
  	grid-template-columns: 220px 0;
  	grid-template-rows: 80px;
  	grid-template-areas: "logobox logobox";
  	.bookinfo { display: none; }
  	}
  @include responsive(medium-screens) {
  	display: none;
  	grid-template-columns: 220px auto;
  	grid-template-rows: 80px;
  	grid-template-areas: "logoleft booklinks";
  	.bookinfo { display: flex; }
  	}
  @include responsive(small-screens) {
  	display: none;
  	grid-template-columns: 220px auto;
  	grid-template-rows: 70px;
  	grid-template-areas: "logoleft booklinks";
  	.bookinfo { display: flex; }
  	}
  @include responsive(xsmall-screens) {
  	display: none;
  	grid-template-columns: 220px auto;
  	grid-template-rows: 70px;
  	grid-template-areas: "logoleft booklinks";
  	.bookinfo { display: flex; }
  	}
  @include responsive(mobile-screens) {
  	display: none;
  	grid-template-columns: 220px auto;
  	grid-template-rows: 60px;
  	grid-template-areas: "logoleft booklinks";
  	.bookinfo { display: none; }
  	}*/
  /* don't think these two styles are used anymore: */
  /*.logobox, .bookinfo {
  	display: flex;
  	justify-content: center;
  	flex-direction: column;
  	}
  .bookinfo {
  	display: none;
  	padding-right: 20px;
  	}*/
  /*}*/
}
.titlebar .booktitle {
  display: grid;
  grid-area: booktitle;
  grid-template-columns: auto auto;
  grid-template-areas: "fulltitle booklinks";
  padding: 16px 30px 10px 30px;
  color: #fff;
  background-color: #333;
}
@media only screen and (min-width: 1920px) {
  .titlebar .booktitle {
    grid-template-areas: "fulltitle booklinks";
    padding: 16px 30px 10px 30px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .booktitle {
    grid-template-areas: "fulltitle booklinks";
    padding: 16px 30px 10px 30px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .booktitle {
    grid-template-areas: "fulltitle booklinks";
    padding: 16px 30px 10px 30px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .booktitle {
    grid-template-areas: "fulltitle fulltitle";
    padding: 10px 30px 10px 30px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .booktitle {
    grid-template-areas: "fulltitle fulltitle";
    padding: 10px 30px 10px 30px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .booktitle {
    grid-template-areas: "fulltitle fulltitle";
    padding: 6px 30px 6px 30px;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .booktitle {
    grid-template-areas: "fulltitle fulltitle";
    padding: 6px 30px 4px 30px;
  }
}
.titlebar .booktitle .backarrow {
  display: none;
  position: absolute;
  left: 0;
  top: 10px;
  width: 30px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 20' style='enable-background:new 0 0 30 20;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bopacity:0.5;fill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M12,10l15.6-9v18L12,10z'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 22px auto;
  background-position: center left;
}
@media only screen and (min-width: 1920px) {
  .titlebar .booktitle .backarrow {
    display: none;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .booktitle .backarrow {
    display: none;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .booktitle .backarrow {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .booktitle .backarrow {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .booktitle .backarrow {
    display: block;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .booktitle .backarrow {
    display: block;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .booktitle .backarrow {
    display: block;
  }
}
.titlebar .booktitle h1 {
  margin: 0;
  padding: 0;
  font-size: 2.4em;
  line-height: 1em;
}
@media only screen and (min-width: 1920px) {
  .titlebar .booktitle h1 {
    font-size: 2.4em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .booktitle h1 {
    font-size: 2.4em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .booktitle h1 {
    font-size: 2.4em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .booktitle h1 {
    font-size: 1.6em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .booktitle h1 {
    font-size: 1.5em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .booktitle h1 {
    font-size: 1.4em;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .booktitle h1 {
    font-size: 1.4em;
  }
}
.titlebar .booktitle h2 {
  padding-top: 10px;
  font-size: 1.8em;
  line-height: 1em;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #fff;
  /*@include responsive(xwide-screens) { padding-top: 10px; }
  @include responsive(wide-screens) { padding-top: 10px; }
  @include responsive(large-screens) { padding-top: 10px; }
  @include responsive(medium-screens) { padding-top: 10px; }
  @include responsive(small-screens) { padding-top: 10px; }
  @include responsive(xsmall-screens) { padding-top: 10px; }
  @include responsive(mobile-screens) { padding-top: 10px; }*/
}
.titlebar .booktitle .fulltitle {
  grid-area: fulltitle;
  display: flex;
  align-items: center;
  padding-left: 0;
}
@media only screen and (min-width: 1920px) {
  .titlebar .booktitle .fulltitle {
    display: flex;
    padding-left: 0;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .booktitle .fulltitle {
    display: flex;
    padding-left: 0;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .booktitle .fulltitle {
    display: flex;
    padding-left: 0;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .booktitle .fulltitle {
    display: grid;
    padding-left: 5px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .booktitle .fulltitle {
    display: grid;
    padding-left: 2px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .booktitle .fulltitle {
    display: grid;
    padding-left: 3px;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .booktitle .fulltitle {
    display: grid;
    padding-left: 3px;
  }
}
.titlebar .booktitle .fulltitle a {
  color: #fff;
}
.titlebar .booktitle .fulltitle a:visited {
  color: #fff;
}
.titlebar .booktitle .fulltitle a.row1 {
  grid-row-start: 1;
  grid-row-end: 2;
}
@media only screen and (min-width: 1920px) {
  .titlebar .booktitle .fulltitle a.row1 {
    padding-top: 0;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .booktitle .fulltitle a.row1 {
    padding-top: 0;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .booktitle .fulltitle a.row1 {
    padding-top: 0;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .booktitle .fulltitle a.row1 {
    padding-top: 2px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .booktitle .fulltitle a.row1 {
    padding-top: 2px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .booktitle .fulltitle a.row1 {
    padding-top: 3px;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .booktitle .fulltitle a.row1 {
    padding-top: 3px;
  }
}
.titlebar .booktitle .fulltitle a.row2 {
  grid-row-start: 2;
  grid-row-end: 3;
}
.titlebar .booktitle .fulltitle h1 {
  font-size: 2.4em;
}
@media only screen and (min-width: 1920px) {
  .titlebar .booktitle .fulltitle h1 {
    font-size: 2.4em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .booktitle .fulltitle h1 {
    font-size: 2.4em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .booktitle .fulltitle h1 {
    font-size: 1.9em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .booktitle .fulltitle h1 {
    font-size: 1.6em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .booktitle .fulltitle h1 {
    font-size: 1.5em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .booktitle .fulltitle h1 {
    font-size: 1.4em;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .booktitle .fulltitle h1 {
    font-size: 1.4em;
  }
}
.titlebar .booktitle .chapbookTitleBookZh {
  grid-row-start: 2;
  grid-row-end: 3;
  padding-right: 8px;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  /* padding-right: 10px; */
  color: #fff;
}
.titlebar .booktitle .chapbookTitleBookEn {
  grid-row-start: 1;
  grid-row-end: 2;
  font-size: 1.4em;
  line-height: 1em;
  padding-right: 10px;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media only screen and (min-width: 1920px) {
  .titlebar .booktitle .chapbookTitleBookEn {
    font-size: 1.4em;
    line-height: 1em;
    padding-right: 10px;
    font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .booktitle .chapbookTitleBookEn {
    font-size: 1.4em;
    line-height: 1em;
    padding-right: 10px;
    font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .booktitle .chapbookTitleBookEn {
    font-size: 1.4em;
    line-height: 1em;
    padding-right: 10px;
    font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .booktitle .chapbookTitleBookEn {
    font-size: 0.8em;
    line-height: 1em;
    padding: 7px 10px 5px 2px;
    font-family: "AvenirNextWorldBold", helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .booktitle .chapbookTitleBookEn {
    font-size: 0.8em;
    line-height: 1em;
    padding: 7px 10px 5px 2px;
    font-family: "AvenirNextWorldBold", helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .booktitle .chapbookTitleBookEn {
    font-size: 0.8em;
    line-height: 1em;
    padding: 7px 10px 5px 1px;
    font-family: "AvenirNextWorldBold", helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .booktitle .chapbookTitleBookEn {
    font-size: 0.8em;
    line-height: 1em;
    padding: 7px 10px 5px 2px;
    font-family: "AvenirNextWorldBold", helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}
.titlebar .booklinks {
  display: flex;
  grid-area: booklinks;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
}
@media only screen and (min-width: 1920px) {
  .titlebar .booklinks {
    display: flex;
    position: relative;
    top: auto;
    right: auto;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .booklinks {
    display: flex;
    position: relative;
    top: auto;
    right: auto;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .booklinks {
    display: flex;
    position: relative;
    top: auto;
    right: auto;
  }
}
.titlebar .booklinks {
  /*@include responsive(medium-screens) { display: flex; position: absolute; top: 17px; right: 102px; }
  @include responsive(small-screens) { display: flex; position: absolute; top: 17px; right: 102px; } */
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .booklinks {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .booklinks {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .booklinks {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .booklinks {
    display: none;
  }
}
.titlebar .booklinks p {
  margin: 0;
  padding: 0;
  color: #a3bcd4;
  font-size: 0.86em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5em;
  text-align: right;
}
@media only screen and (min-width: 1920px) {
  .titlebar .booklinks p {
    color: #a3bcd4;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .titlebar .booklinks p {
    color: #a3bcd4;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .titlebar .booklinks p {
    color: #a3bcd4;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .titlebar .booklinks p {
    color: #a3bcd4;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .titlebar .booklinks p {
    color: #a3bcd4;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .titlebar .booklinks p {
    color: #a3bcd4;
  }
}
@media only screen and (max-width: 375px) {
  .titlebar .booklinks p {
    color: #a3bcd4;
  }
}
.titlebar .booklinks p a, .titlebar .booklinks p a:visited {
  display: block;
  color: #fff;
  text-decoration: none;
}
.titlebar .booklinks p a:hover, .titlebar .booklinks p a:active {
  display: block;
  color: #e0e0e0;
  text-decoration: none;
}
.titlebar {
  /*.menulink {
  	display: flex;
  	grid-area: menulink;
  	background-color: $color_dkgrey;
  	justify-content: center;
  	flex-direction: column;
  	div { width: 46%; height: 3.5px; margin: 3.5px auto; background-color: $color_white;}
  	}*/
}

.menuBurger {
  z-index: 7600;
  position: fixed;
  display: flex;
  justify-content: center;
  flex-direction: column;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  cursor: pointer;
  background-color: #707070;
}
@media only screen and (min-width: 1920px) {
  .menuBurger {
    width: 80px;
    height: 80px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .menuBurger {
    width: 80px;
    height: 80px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .menuBurger {
    width: 80px;
    height: 80px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .menuBurger {
    width: 70px;
    height: 70px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .menuBurger {
    width: 70px;
    height: 70px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .menuBurger {
    width: 60px;
    height: 60px;
  }
}
@media only screen and (max-width: 375px) {
  .menuBurger {
    width: 60px;
    height: 60px;
  }
}
.menuBurger div {
  width: 46%;
  height: 3.5px;
  margin: 3.5px auto;
  background-color: #fff;
}

/*-------------------------------------------------- */
/* FOOTER */
/*-------------------------------------------------- */
#popupFooterContainer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  background-color: #fff;
}

#popupFooterBackdrop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.01;
}

.popupFooterPanel .footerPick {
  text-align: center;
  border: 1px solid #999;
  cursor: pointer;
}
.popupFooterPanel .footerPick.on {
  background-color: #d0d0d0;
}

.popupFooterFmtPick {
  width: 60px;
  height: 36px;
  font-size: 24px;
}

.popupFooterFontPick {
  width: 30px;
  /* &.xs {font-size: 16px; padding: 4px 0;} */ /* REX: REMOVED */
}
.popupFooterFontPick.s {
  font-size: 20px;
  padding: 2px 0;
}
.popupFooterFontPick.m {
  font-size: 24px;
}
.popupFooterFontPick.l {
  font-size: 28px;
}
.popupFooterFontPick {
  /* &.xl {font-size: 32px;} */ /* REX: REMOVED */
}

/*-------------------------------------------------- */
/* HOME PAGE */
/*-------------------------------------------------- */
#root.page_home .titlebar, #root.page_splash .titlebar, #root.page_login .titlebar {
  position: fixed;
  grid-template-columns: auto 80px;
  grid-template-rows: 80px;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-areas: "topbar menulink";
}
@media only screen and (min-width: 1920px) {
  #root.page_home .titlebar, #root.page_splash .titlebar, #root.page_login .titlebar {
    grid-template-columns: auto 80px;
    grid-template-rows: 80px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #root.page_home .titlebar, #root.page_splash .titlebar, #root.page_login .titlebar {
    grid-template-columns: auto 80px;
    grid-template-rows: 80px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #root.page_home .titlebar, #root.page_splash .titlebar, #root.page_login .titlebar {
    grid-template-columns: auto 80px;
    grid-template-rows: 80px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #root.page_home .titlebar, #root.page_splash .titlebar, #root.page_login .titlebar {
    grid-template-columns: auto 70px;
    grid-template-rows: 70px;
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #root.page_home .titlebar, #root.page_splash .titlebar, #root.page_login .titlebar {
    grid-template-columns: auto 70px;
    grid-template-rows: 70px;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #root.page_home .titlebar, #root.page_splash .titlebar, #root.page_login .titlebar {
    grid-template-columns: auto 60px;
    grid-template-rows: 60px;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
}
@media only screen and (max-width: 375px) {
  #root.page_home .titlebar, #root.page_splash .titlebar, #root.page_login .titlebar {
    grid-template-columns: auto 60px;
    grid-template-rows: 60px;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
}
#root.page_home .titlebar .logo, #root.page_home .titlebar .bannerTitle, #root.page_splash .titlebar .logo, #root.page_splash .titlebar .bannerTitle, #root.page_login .titlebar .logo, #root.page_login .titlebar .bannerTitle {
  display: none;
}
#root.page_home .titlebar .topbar, #root.page_splash .titlebar .topbar, #root.page_login .titlebar .topbar {
  grid-template: topbar;
  width: 100%;
  height: 100%;
  background-color: #333;
}
@media only screen and (min-width: 1920px) {
  #root.page_home .titlebar .topbar, #root.page_splash .titlebar .topbar, #root.page_login .titlebar .topbar {
    display: block;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #root.page_home .titlebar .topbar, #root.page_splash .titlebar .topbar, #root.page_login .titlebar .topbar {
    display: block;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #root.page_home .titlebar .topbar, #root.page_splash .titlebar .topbar, #root.page_login .titlebar .topbar {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #root.page_home .titlebar .topbar, #root.page_splash .titlebar .topbar, #root.page_login .titlebar .topbar {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #root.page_home .titlebar .topbar, #root.page_splash .titlebar .topbar, #root.page_login .titlebar .topbar {
    display: block;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #root.page_home .titlebar .topbar, #root.page_splash .titlebar .topbar, #root.page_login .titlebar .topbar {
    display: block;
  }
}
@media only screen and (max-width: 375px) {
  #root.page_home .titlebar .topbar, #root.page_splash .titlebar .topbar, #root.page_login .titlebar .topbar {
    display: block;
  }
}
#root.page_home, #root.page_splash, #root.page_login {
  /*grid-template-columns: auto;
  grid-template-rows: 80px auto;
  grid-template-areas:
  	"titlebar"
  	"pagecontents";
  .titlebar {
  	.logo, .bannerTitle { display: none; }
  	background-color: transparent;
  	grid-template-columns: auto 76px;
  	grid-template-rows: 76px;
  	grid-template-areas:
  		"logo menulink";
  	}*/
}
#root.page_home #pagecontents, #root.page_splash #pagecontents, #root.page_login #pagecontents {
  overflow: hidden;
}

.login {
  position: relative;
  margin: 10px 0 20px 230px;
}
.login .startlogo {
  position: absolute;
  margin: 0 30px 0 -240px;
  width: 200px;
}
@media only screen and (min-width: 1920px) {
  .login {
    margin: 10px 0 20px 230px;
  }
  .login .startlogo {
    margin: 0 30px 0 -238px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .login {
    margin: 10px 0 20px 230px;
  }
  .login .startlogo {
    margin: 0 30px 0 -238px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .login {
    margin: 10px 0 20px 230px;
  }
  .login .startlogo {
    margin: 0 30px 0 -238px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .login {
    margin: 10px 0 20px 230px;
  }
  .login .startlogo {
    margin: 0 30px 0 -238px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .login {
    margin: 220px auto 20px auto;
  }
  .login .startlogo {
    margin: -220px 0 0 -8px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .login {
    margin: 220px auto 20px auto;
  }
  .login .startlogo {
    margin: -220px 0 0 -8px;
  }
}
@media only screen and (max-width: 375px) {
  .login {
    margin: 220px auto 20px auto;
  }
  .login .startlogo {
    margin: -220px 0 0 -8px;
  }
}

.coverlogo {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% - 86px);
  height: 80px;
  background-color: #333;
}
@media only screen and (min-width: 1920px) {
  .coverlogo {
    width: calc(100% - 86px);
    height: 80px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .coverlogo {
    width: calc(100% - 86px);
    height: 80px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .coverlogo {
    width: calc(100% - 76px);
    height: 70px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .coverlogo {
    width: calc(100% - 76px);
    height: 70px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .coverlogo {
    width: calc(100% - 76px);
    height: 70px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .coverlogo {
    width: calc(100% - 76px);
    height: 70px;
  }
}
@media only screen and (max-width: 375px) {
  .coverlogo {
    width: calc(100% - 66px);
    height: 60px;
  }
}

.centerlogo {
  display: block;
  position: absolute;
  margin: 0;
  top: 120px;
  /*left: 40px;*/
  left: 5%;
  width: 290px;
}
@media only screen and (min-width: 1920px) {
  .centerlogo {
    position: absolute;
    margin: 0;
    top: 120px;
    left: 5%;
    width: 290px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .centerlogo {
    position: absolute;
    margin: 0;
    top: 120px;
    left: 5%;
    width: 250px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .centerlogo {
    position: absolute;
    margin: 0;
    top: 120px;
    left: 5%;
    width: 240px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .centerlogo {
    position: absolute;
    margin: 0;
    top: 120px;
    left: 5%;
    width: 200px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .centerlogo {
    position: relative;
    margin: 20px auto 20px auto;
    top: auto;
    left: auto;
    width: 200px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .centerlogo {
    position: relative;
    margin: 0 auto 20px auto;
    top: auto;
    left: auto;
    width: 180px;
  }
}
@media only screen and (max-width: 375px) {
  .centerlogo {
    position: relative;
    margin: 0 auto 20px auto;
    top: auto;
    left: auto;
    width: 140px;
  }
}

.homeboxes { /* replace "homebox" */
  position: relative;
  display: grid;
  margin: 0 auto 50px 0;
  max-width: 1320px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-areas: "currentbook librarybooks librarybooks storebook";
}
@media only screen and (min-width: 1920px) {
  .homeboxes {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "currentbook librarybooks librarybooks storebook";
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .homeboxes {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "currentbook librarybooks librarybooks storebook";
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .homeboxes {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "currentbook librarybooks librarybooks storebook";
  }
}
.homeboxes {
  /* use only on homeboxes, after the "large" screen size as partial override */
}
@media (min-width: 1092px) and (max-width: 1200px) {
  .homeboxes {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "currentbook storebook" "librarybooks librarybooks";
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .homeboxes {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "currentbook storebook" "librarybooks librarybooks";
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .homeboxes {
    grid-template-columns: 1fr;
    grid-template-areas: "currentbook" "librarybooks" "librarybooks" "storebook";
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .homeboxes {
    grid-template-columns: 1fr;
    grid-template-areas: "currentbook" "librarybooks" "librarybooks" "storebook";
  }
}
@media only screen and (max-width: 375px) {
  .homeboxes {
    grid-template-columns: 1fr;
    grid-template-areas: "currentbook" "librarybooks" "librarybooks" "storebook";
  }
}
.homeboxes .bookbox {
  position: relative;
  display: block;
  background-color: #cedae6;
  padding: 0 10px 0 10px;
  margin: 0 auto 30px auto;
  max-width: none;
  width: calc(100% - 20px);
}
@media only screen and (min-width: 1920px) {
  .homeboxes .bookbox {
    max-width: none;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .homeboxes .bookbox {
    max-width: none;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .homeboxes .bookbox {
    max-width: none;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .homeboxes .bookbox {
    max-width: none;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .homeboxes .bookbox {
    max-width: 300px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .homeboxes .bookbox {
    max-width: 300px;
  }
}
@media only screen and (max-width: 375px) {
  .homeboxes .bookbox {
    max-width: 300px;
  }
}
.homeboxes .bookbox.currentbook {
  grid-area: currentbook;
}
.homeboxes .bookbox.librarybooks {
  grid-area: librarybooks;
}
.homeboxes .bookbox.storebook {
  grid-area: storebook;
}
.homeboxes .bookbox .covers {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: row;
  text-align: center;
  width: 100%;
}
@media only screen and (min-width: 1920px) {
  .homeboxes .bookbox .covers {
    flex-direction: row;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .homeboxes .bookbox .covers {
    flex-direction: row;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .homeboxes .bookbox .covers {
    flex-direction: row;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .homeboxes .bookbox .covers {
    flex-direction: row;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .homeboxes .bookbox .covers {
    flex-direction: column;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .homeboxes .bookbox .covers {
    flex-direction: column;
  }
}
@media only screen and (max-width: 375px) {
  .homeboxes .bookbox .covers {
    flex-direction: column;
  }
}
.homeboxes .bookbox .covers img {
  cursor: pointer;
}
.homeboxes .bookbox .homebookcover {
  position: relative;
  display: inline-block;
  margin: 20px 10px 10px 10px;
  width: calc(100% - 20px);
  max-width: 310px;
}
@media only screen and (min-width: 1920px) {
  .homeboxes .bookbox .homebookcover {
    margin: 20px 10px 10px 10px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .homeboxes .bookbox .homebookcover {
    margin: 20px 10px 10px 10px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .homeboxes .bookbox .homebookcover {
    margin: 20px 10px 10px 10px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .homeboxes .bookbox .homebookcover {
    margin: 20px 10px 10px 10px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .homeboxes .bookbox .homebookcover {
    margin: 20px auto 10px auto;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .homeboxes .bookbox .homebookcover {
    margin: 20px auto 10px auto;
  }
}
@media only screen and (max-width: 375px) {
  .homeboxes .bookbox .homebookcover {
    margin: 20px auto 10px auto;
  }
}
.homeboxes .bookbox.librarybooks .homebookcover {
  display: inline-block;
  margin: 20px 10px 10px 10px;
  width: calc((100% - 80px) / 2);
}
@media only screen and (min-width: 1920px) {
  .homeboxes .bookbox.librarybooks .homebookcover {
    display: inline-block;
    margin: 20px 10px 10px 10px;
    width: calc((100% - 80px) / 2);
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .homeboxes .bookbox.librarybooks .homebookcover {
    display: inline-block;
    margin: 20px 10px 10px 10px;
    width: calc((100% - 80px) / 2);
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .homeboxes .bookbox.librarybooks .homebookcover {
    display: inline-block;
    margin: 20px 10px 10px 10px;
    width: calc((100% - 80px) / 2);
  }
}
.homeboxes .bookbox.librarybooks .homebookcover {
  /* use only on homeboxes, after the "large" screen size as partial override */
}
@media (min-width: 1092px) and (max-width: 1200px) {
  .homeboxes .bookbox.librarybooks .homebookcover {
    display: inline-block;
    margin: 20px 10px 10px 10px;
    width: calc((100% - 40px) / 2);
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .homeboxes .bookbox.librarybooks .homebookcover {
    display: inline-block;
    margin: 20px 10px 10px 10px;
    width: calc((100% - 40px) / 2);
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .homeboxes .bookbox.librarybooks .homebookcover {
    display: block;
    margin: 20px auto 10px auto;
    width: calc(100% - 20px);
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .homeboxes .bookbox.librarybooks .homebookcover {
    display: block;
    margin: 20px auto 10px auto;
    width: calc(100% - 20px);
  }
}
@media only screen and (max-width: 375px) {
  .homeboxes .bookbox.librarybooks .homebookcover {
    display: block;
    margin: 20px auto 10px auto;
    width: calc(100% - 20px);
  }
}
.homeboxes .bookbox .homebtnframe {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 10px 0 -20px 0;
  padding: 0;
  width: 100%;
}
.homeboxes .bookbox .homebtn {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 12px 18px;
  color: #fff !important;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1.5em;
  letter-spacing: 0.05em;
  border: none;
  background-color: #da291c;
}
.homeboxes .bookbox h2 {
  display: block;
  margin: 0 -10px 0 -10px;
  padding: 8px 8px 8px 15px;
  font-size: 1.2em;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #fff;
  text-align: left;
  background-color: #668fbc;
}
.homeboxes .bookbox h2 .small {
  display: inline;
}
@media only screen and (min-width: 1920px) {
  .homeboxes .bookbox h2 .small {
    display: inline;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .homeboxes .bookbox h2 .small {
    display: inline;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .homeboxes .bookbox h2 .small {
    display: inline;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .homeboxes .bookbox h2 .small {
    display: inline;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .homeboxes .bookbox h2 .small {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .homeboxes .bookbox h2 .small {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  .homeboxes .bookbox h2 .small {
    display: none;
  }
}

/*
p.welcome {
	font-size: 20px;
	}
a.wideButton {
	display: block;
	height: 24px;
	padding: 4px 10px;
	margin-bottom: 8px;
	text-decoration: none;
	border-radius: 6px;
	font-size: 20px;
	background-color: $color_red;
  	}
  */
/*-------------------------------------------------- */
/* SPLASH SCREEN */
/*-------------------------------------------------- */
#root.page_splash {
  grid-template-rows: auto;
}
#root.page_splash .topbar {
  display: none !important;
}
#root.page_splash .splash_message {
  text-align: center;
  font-size: 20px;
}
#root.page_splash .menuBurger {
  display: none;
}
#root.page_splash .centerlogo {
  display: block;
  position: relative;
  margin: 0 auto 20px auto;
  top: auto;
  left: auto;
  width: 250px;
}
@media only screen and (min-width: 1920px) {
  #root.page_splash .centerlogo {
    position: relative;
    margin: 0 auto 80px auto;
    top: auto;
    left: auto;
    width: 250px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #root.page_splash .centerlogo {
    position: relative;
    margin: 0 auto 80px auto;
    top: auto;
    left: auto;
    width: 250px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #root.page_splash .centerlogo {
    position: relative;
    margin: 0 auto 80px auto;
    top: auto;
    left: auto;
    width: 250px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #root.page_splash .centerlogo {
    position: relative;
    margin: 0 auto 80px auto;
    top: auto;
    left: auto;
    width: 200px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #root.page_splash .centerlogo {
    position: relative;
    margin: 0 auto 80px auto;
    top: auto;
    left: auto;
    width: 200px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #root.page_splash .centerlogo {
    position: relative;
    margin: 0 auto 70px auto;
    top: auto;
    left: auto;
    width: 200px;
  }
}
@media only screen and (max-width: 375px) {
  #root.page_splash .centerlogo {
    position: relative;
    margin: 0 auto 60px auto;
    top: auto;
    left: auto;
    width: 200px;
  }
}

/*-------------------------------------------------- */
/* CONTENT FRAME */ /* Rex: is it correct that this ID is used on several templates? Pretty sure the answer is yes, but just checking. */
/*-------------------------------------------------- */
#subcontent {
  display: block;
  padding: 50px 70px 50px 256px;
}
@media only screen and (min-width: 1920px) {
  #subcontent {
    padding: 90px 230px 50px 256px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #subcontent {
    padding: 80px 70px 50px 116px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #subcontent {
    padding: 80px 70px 50px 116px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #subcontent {
    padding: 50px 70px 50px 100px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #subcontent {
    padding: 50px 45px 50px 60px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #subcontent {
    padding: 50px 20px 50px 30px;
  }
}
@media only screen and (max-width: 375px) {
  #subcontent {
    padding: 50px 20px 50px 30px;
  }
}
#subcontent.homecontent {
  height: 100%;
  background-image: url("../images/dongting_color_edited_watercolor.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 140px;
  padding: 50px 82px 50px 25%;
  overflow: auto;
}
@media only screen and (min-width: 1920px) {
  #subcontent.homecontent {
    padding: 50px 82px 50px 25%;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #subcontent.homecontent {
    padding: 50px 82px 50px 380px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #subcontent.homecontent {
    padding: 50px 82px 50px 370px;
  }
}
#subcontent.homecontent {
  /* use only on homeboxes, after the "large" screen size as partial override */
}
@media (min-width: 1092px) and (max-width: 1200px) {
  #subcontent.homecontent {
    padding: 30px 122px 50px 370px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #subcontent.homecontent {
    padding: 30px 76px 50px 35%;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #subcontent.homecontent {
    padding: 30px 30px 50px 30px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #subcontent.homecontent {
    padding: 30px 60px 50px 60px;
  }
}
@media only screen and (max-width: 375px) {
  #subcontent.homecontent {
    padding: 30px 60px 50px 60px;
  }
}
#subcontent.librarycontent {
  display: grid;
  grid-template-columns: auto 250px;
  grid-template-rows: auto 56px auto;
  grid-column-gap: 50px;
  grid-row-gap: 10px;
  grid-template-areas: "featuredbooks bookfilters" "allbookstitle bookfilters" "allbooks bookfilters";
}
@media only screen and (min-width: 1920px) {
  #subcontent.librarycontent {
    display: grid;
    grid-template-columns: auto 250px;
    grid-template-rows: auto 56px auto;
    grid-template-areas: "featuredbooks bookfilters" "allbookstitle bookfilters" "allbooks bookfilters";
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #subcontent.librarycontent {
    display: grid;
    grid-template-columns: auto 250px;
    grid-template-rows: auto 56px auto;
    grid-template-areas: "featuredbooks bookfilters" "allbookstitle bookfilters" "allbooks bookfilters";
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #subcontent.librarycontent {
    display: grid;
    grid-template-columns: auto 230px;
    grid-template-rows: auto 56px auto;
    grid-template-areas: "featuredbooks bookfilters" "allbookstitle bookfilters" "allbooks bookfilters";
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #subcontent.librarycontent {
    display: grid;
    grid-template-columns: auto 180px;
    grid-template-rows: auto 56px auto;
    grid-template-areas: "featuredbooks bookfilters" "allbookstitle bookfilters" "allbooks bookfilters";
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #subcontent.librarycontent {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "featuredbooks" "bookfilters" "allbookstitle" "allbooks";
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #subcontent.librarycontent {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "featuredbooks" "bookfilters" "allbookstitle" "allbooks";
  }
}
@media only screen and (max-width: 375px) {
  #subcontent.librarycontent {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "featuredbooks" "bookfilters" "allbookstitle" "allbooks";
  }
}
#subcontent.librarycontent.filtered {
  grid-template-rows: 56px auto;
  grid-template-areas: "allbookstitle bookfilters" "allbooks bookfilters";
}
@media only screen and (min-width: 1920px) {
  #subcontent.librarycontent.filtered {
    grid-template-rows: 56px auto;
    grid-template-areas: "allbookstitle bookfilters" "allbooks bookfilters";
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #subcontent.librarycontent.filtered {
    grid-template-rows: 56px auto;
    grid-template-areas: "allbookstitle bookfilters" "allbooks bookfilters";
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #subcontent.librarycontent.filtered {
    grid-template-rows: 56px auto;
    grid-template-areas: "allbookstitle bookfilters" "allbooks bookfilters";
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #subcontent.librarycontent.filtered {
    grid-template-rows: 56px auto;
    grid-template-areas: "allbookstitle bookfilters" "allbooks bookfilters";
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #subcontent.librarycontent.filtered {
    grid-template-rows: auto;
    grid-template-areas: "bookfilters" "allbookstitle" "allbooks";
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #subcontent.librarycontent.filtered {
    grid-template-rows: auto;
    grid-template-areas: "bookfilters" "allbookstitle" "allbooks";
  }
}
@media only screen and (max-width: 375px) {
  #subcontent.librarycontent.filtered {
    grid-template-rows: auto;
    grid-template-areas: "bookfilters" "allbookstitle" "allbooks";
  }
}

/*-------------------------------------------------- */
/* CHAPTER PAGE GRID */
/*-------------------------------------------------- */
#root.page_chapter, #root.page_exercises {
  display: grid;
  height: 100%;
  overflow: hidden;
  grid-template-columns: auto;
  grid-template-rows: 80px auto;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-areas: "titlebar" "pagecontents";
}
@media only screen and (min-width: 1920px) {
  #root.page_chapter, #root.page_exercises {
    grid-template-rows: 80px auto;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #root.page_chapter, #root.page_exercises {
    grid-template-rows: 80px auto;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #root.page_chapter, #root.page_exercises {
    grid-template-rows: 80px auto;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #root.page_chapter, #root.page_exercises {
    grid-template-rows: 70px auto;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #root.page_chapter, #root.page_exercises {
    grid-template-rows: 70px auto;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #root.page_chapter, #root.page_exercises {
    grid-template-rows: 60px auto;
  }
}
@media only screen and (max-width: 375px) {
  #root.page_chapter, #root.page_exercises {
    grid-template-rows: 60px auto;
  }
}
#root.page_chapter, #root.page_exercises {
  /*.titlebar {
  	.logo {
  		@include responsive(medium-screens) { display: none; }
  		@include responsive(small-screens) { display: none; }
  		@include responsive(xsmall-screens) { display: none; }
  		@include responsive(mobile-screens) { display: none; }
  		}
  	.booktitle {
  		@include responsive(medium-screens) { grid-area: logo; }
  		@include responsive(small-screens) { grid-area: logo; }
  		@include responsive(xsmall-screens) { grid-area: logo; }
  		@include responsive(mobile-screens) { grid-area: logo; }
  		}
  	}*/
}

/*-------------------------------------------------- */
/* PAGE CONTENTS */
/*-------------------------------------------------- */
/* REX - MOVED SOME STUFF UP OUT OF PAGEBODY */
.zharea .zhpBlock {
  display: inline;
  position: relative;
  float: left;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  margin: 6px 0 18px 0; /* set line height between rows through this margin */
  /* padding: 2px 1px 3px 3px; */
  padding: 2px 2px 6px 2px; /* this will determine space between characters and the grammar outlines */
  letter-spacing: 0.04em;
  border-spacing: 0;
  page-break-inside: avoid;
  border-collapse: collapse;
  border: 2px solid #fff; /* setting a white border here will prevent layout jumps when blue border turns on for a grammar hint */
}
@media only screen and (min-width: 1920px) {
  .zharea .zhpBlock {
    margin: 6px 0 18px 0;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .zharea .zhpBlock {
    margin: 6px 0 16px 0;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .zharea .zhpBlock {
    margin: 6px 0 12px 0;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .zharea .zhpBlock {
    margin: 6px 0 8px 0;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .zharea .zhpBlock {
    margin: 4px 0 8px 0;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .zharea .zhpBlock {
    margin: 4px 0 8px 0;
  }
}
@media only screen and (max-width: 375px) {
  .zharea .zhpBlock {
    margin: 4px 0 4px 0;
  }
}
.zharea .zhpBlock .zhpZp {
  margin-bottom: 8px;
  color: #da291c;
  text-align: center;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.zharea .zhpBlock .zhpZp.grammar {
  border-bottom: 1px solid #da291c;
}
.zharea .zhpBlock .zhpZh {
  color: #000;
  text-align: center;
}
.zharea .zpbox {
  display: inline-block;
  padding: 2px 4px 2px 4px;
  margin: 2px -3px 2px -3px;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  /* border: 2px solid $color_white; */ /* setting a white border here will prevent layout jumps when blue border turns on for a grammar hint */
}
.zharea .zhbox {
  display: inline;
  position: relative;
  float: left;
  margin: 2px 0 5px 0;
  padding: 2px 8px 3px 8px;
  border-spacing: 0;
  border-collapse: collapse;
  border: 2px solid #fff;
  page-break-inside: avoid;
}

.paraPhrase.specialphrase.title {
  margin-bottom: 100px; /* adjust based on size of font */
  font-size: 1.2em;
}

.paraPhrase.specialphrase.title::after {
  white-space: pre;
  content: "\a";
  clear: both;
}

/* REX */
#pagebody, .pagebody2 {
  display: block;
  height: 100%;
  /* height: calc(100% - 110px); */
}
#pagebody .paraParaZh, .pagebody2 .paraParaZh {
  grid-column-start: zh-start;
  grid-column-end: zh-end;
}
#pagebody .paraParaZh .paraPhrase.playing, .pagebody2 .paraParaZh .paraPhrase.playing {
  background-color: #f6d4d4;
  border-color: #f6d4d4 !important;
}
#pagebody .paraParaZhp, .pagebody2 .paraParaZhp {
  grid-column-start: zh-start;
  grid-column-end: zh-end;
  max-width: 1400px;
}
#pagebody .paraParaZp, .pagebody2 .paraParaZp {
  padding-top: 3px;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
}
#pagebody .paraParaZp .paraPhrase.playing, .pagebody2 .paraParaZp .paraPhrase.playing {
  background-color: #f6d4d4;
  border-color: #f6d4d4 !important;
}
#pagebody .paraParaEn, .pagebody2 .paraParaEn {
  float: right;
  display: block;
  position: relative;
  margin: 12px 0 30px 50px;
  height: 100%;
  width: 240px;
}
#pagebody .paraParaEn p, .pagebody2 .paraParaEn p {
  padding: 0 0 0 20px;
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  border-left: 6px solid #ebebeb;
}
@media only screen and (min-width: 1920px) {
  #pagebody .paraParaEn, .pagebody2 .paraParaEn {
    display: block;
    width: 440px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagebody .paraParaEn, .pagebody2 .paraParaEn {
    display: block;
    width: 300px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagebody .paraParaEn, .pagebody2 .paraParaEn {
    display: block;
    width: 240px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagebody .paraParaEn, .pagebody2 .paraParaEn {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagebody .paraParaEn, .pagebody2 .paraParaEn {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagebody .paraParaEn, .pagebody2 .paraParaEn {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  #pagebody .paraParaEn, .pagebody2 .paraParaEn {
    display: none;
  }
}
#pagebody .paraParaEn.off, .pagebody2 .paraParaEn.off {
  display: none;
}
#pagebody, .pagebody2 {
  /*
  	.zhpBlock {
  		display: inline;
  		position: relative;
  		float: left;
  		@include notoserif4;
  		margin: 2px 0 20px 0;
  		padding: 2px 1px 3px 3px;
  		letter-spacing: 0.04em;
  		border-spacing: 0;
  		page-break-inside: avoid;
  		border-collapse: collapse;
  		border: 1px solid $color_white;
  		@include responsive(xwide-screens) { margin: 2px 0 20px 0; }
  		@include responsive(wide-screens) { margin: 2px 0 20px 0; }
  		@include responsive(large-screens) { margin: 2px 0 20px 0; }
  		@include responsive(medium-screens) { margin: 2px 0 16px 0; }
  		@include responsive(small-screens) { margin: 2px 0 8px 0; }
  		@include responsive(xsmall-screens) { margin: 2px 0 8px 0; }
  		@include responsive(mobile-screens) { margin: 2px 0 4px 0; }
  		.zhpZp {
  			margin-bottom: 8px;
  			color: $color_red;
  			text-align: center;
  			@include ave5;
  			&.grammar {
  				border-bottom: 1px solid $color_red;
  				}
  			}
  		.zhpZh {
  			color: $color_black;
  			text-align: center;
  			}
  		}
  	.zpbox {
  		display: inline-block;
  		padding: 1px 4px 1px 4px;
  		margin: 2px -3px 2px -3px;
  		}
  	.zhbox {
  		display: inline;
  		position: relative;
  		float: left;
  		margin: 2px 0 5px 0;
  		padding: 2px 8px 3px 8px;
  		border-spacing: 0;
  		border-collapse: collapse;
  		border: 1px solid $color_white;
  		page-break-inside: avoid;
  		}
  */
}
#pagebody .number, .pagebody2 .number {
  display: none;
}
#pagebody.englishOn .paraParaZhp, #pagebody.englishOn .paraParaZh, .pagebody2.englishOn .paraParaZhp, .pagebody2.englishOn .paraParaZh {
  width: calc(100% - 490px);
}
@media only screen and (min-width: 1920px) {
  #pagebody.englishOn .paraParaZhp, #pagebody.englishOn .paraParaZh, .pagebody2.englishOn .paraParaZhp, .pagebody2.englishOn .paraParaZh {
    width: calc(100% - 490px);
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagebody.englishOn .paraParaZhp, #pagebody.englishOn .paraParaZh, .pagebody2.englishOn .paraParaZhp, .pagebody2.englishOn .paraParaZh {
    width: calc(100% - 350px);
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagebody.englishOn .paraParaZhp, #pagebody.englishOn .paraParaZh, .pagebody2.englishOn .paraParaZhp, .pagebody2.englishOn .paraParaZh {
    width: calc(100% - 290px);
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagebody.englishOn .paraParaZhp, #pagebody.englishOn .paraParaZh, .pagebody2.englishOn .paraParaZhp, .pagebody2.englishOn .paraParaZh {
    width: 100%;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagebody.englishOn .paraParaZhp, #pagebody.englishOn .paraParaZh, .pagebody2.englishOn .paraParaZhp, .pagebody2.englishOn .paraParaZh {
    width: 100%;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagebody.englishOn .paraParaZhp, #pagebody.englishOn .paraParaZh, .pagebody2.englishOn .paraParaZhp, .pagebody2.englishOn .paraParaZh {
    width: 100%;
  }
}
@media only screen and (max-width: 375px) {
  #pagebody.englishOn .paraParaZhp, #pagebody.englishOn .paraParaZh, .pagebody2.englishOn .paraParaZhp, .pagebody2.englishOn .paraParaZh {
    width: 100%;
  }
}
#pagebody.grammarOn .grammar, #pagebody.grammarOn .zpbox.grammar, #pagebody.grammarOn .zhpBlock.grammar, #pagebody.grammarOn .zhbox.grammar, .pagebody2.grammarOn .grammar, .pagebody2.grammarOn .zpbox.grammar, .pagebody2.grammarOn .zhpBlock.grammar, .pagebody2.grammarOn .zhbox.grammar {
  border: 2px solid #668fbc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#pagebody.grammarOn .grammar.selected, #pagebody.grammarOn .zpbox.grammar.selected, #pagebody.grammarOn .zhpBlock.grammar.selected, #pagebody.grammarOn .zhbox.grammar.selected, .pagebody2.grammarOn .grammar.selected, .pagebody2.grammarOn .zpbox.grammar.selected, .pagebody2.grammarOn .zhpBlock.grammar.selected, .pagebody2.grammarOn .zhbox.grammar.selected {
  border: 2px solid #668fbc;
}
#pagebody.grammarOn .grammar.deselected, #pagebody.grammarOn .zpbox.grammar.deselected, #pagebody.grammarOn .zhpBlock.grammar.deselected, #pagebody.grammarOn .zhbox.grammar.deselected, .pagebody2.grammarOn .grammar.deselected, .pagebody2.grammarOn .zpbox.grammar.deselected, .pagebody2.grammarOn .zhpBlock.grammar.deselected, .pagebody2.grammarOn .zhbox.grammar.deselected {
  border: 2px solid #cedae6;
}
#pagebody.grammarOn .grammar, #pagebody.grammarOn .zpbox.grammar, #pagebody.grammarOn .zhpBlock.grammar, #pagebody.grammarOn .zhbox.grammar, .pagebody2.grammarOn .grammar, .pagebody2.grammarOn .zpbox.grammar, .pagebody2.grammarOn .zhpBlock.grammar, .pagebody2.grammarOn .zhbox.grammar {
  /*.number {
  	display: block;
  	top: -6px;
  	right: -10px;
  	}*/
}
#pagebody.grammarOn .zpbox.grammar, .pagebody2.grammarOn .zpbox.grammar {
  display: inline-block;
  /* regular padding: 2px 4px 2px 4px;*/
  /* regular margin: 2px -3px 2px -3px; */
}
#pagebody.grammarOn .zpbox.grammar.g-start, .pagebody2.grammarOn .zpbox.grammar.g-start {
  -webkit-border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
  padding: 2px 8px 2px 4px;
  margin: 2px -5px 2px -3px;
  border-right: none;
}
#pagebody.grammarOn .zpbox.grammar.g-middle, .pagebody2.grammarOn .zpbox.grammar.g-middle {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 2px 8px 2px 8px;
  margin: 2px -5px 2px -5px;
  border-right: none;
  border-left: none;
}
#pagebody.grammarOn .zpbox.grammar.g-end, .pagebody2.grammarOn .zpbox.grammar.g-end {
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  padding: 2px 4px 2px 8px;
  margin: 2px -3px 2px -5px;
  border-left: none;
}
#pagebody.grammarOn .zhpBlock.grammar, .pagebody2.grammarOn .zhpBlock.grammar {
  /* regular padding: 2px 2px 6px 2px; */
  /* regular margin: 6px 0 18px 0; */
}
#pagebody.grammarOn .zhpBlock.grammar.g-start, .pagebody2.grammarOn .zhpBlock.grammar.g-start {
  -webkit-border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
  padding: 2px 4px 6px 2px;
  border-right: none;
}
#pagebody.grammarOn .zhpBlock.grammar, .pagebody2.grammarOn .zhpBlock.grammar { /* padding-right needs extra 2px to make up for no right border */ }
#pagebody.grammarOn .zhpBlock.grammar.g-middle, .pagebody2.grammarOn .zhpBlock.grammar.g-middle {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 2px 4px 6px 4px;
  border-right: none;
  border-left: none;
}
#pagebody.grammarOn .zhpBlock.grammar, .pagebody2.grammarOn .zhpBlock.grammar { /* add 2px padding left and right because no right or left borders */ }
#pagebody.grammarOn .zhpBlock.grammar.g-end, .pagebody2.grammarOn .zhpBlock.grammar.g-end {
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  padding: 2px 2px 6px 4px;
  border-left: none;
}
#pagebody.grammarOn .zhpBlock.grammar, .pagebody2.grammarOn .zhpBlock.grammar { /* padding-left needs extra 2px to make up for no left border */ }
#pagebody.grammarOn .zhbox.grammar.g-start, .pagebody2.grammarOn .zhbox.grammar.g-start {
  -webkit-border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
  padding: 2px 9px 3px 8px;
  border-right: none;
}
#pagebody.grammarOn .zhbox.grammar.g-middle, .pagebody2.grammarOn .zhbox.grammar.g-middle {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 2px 9px 3px 9px;
  border-right: none;
  border-left: none;
}
#pagebody.grammarOn .zhbox.grammar.g-end, .pagebody2.grammarOn .zhbox.grammar.g-end {
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  padding: 2px 8px 3px 9px;
  border-left: none;
}
#pagebody.grammarOn .paraPhrase.playing .zhpBlock.grammar, .pagebody2.grammarOn .paraPhrase.playing .zhpBlock.grammar {
  border-color: #668fbc !important;
}
#pagebody .paraPhrase.playing .zhpBlock, .pagebody2 .paraPhrase.playing .zhpBlock {
  background-color: #f6d4d4;
  border-color: #f6d4d4 !important;
}

.grammarPanel {
  position: relative;
}
.grammarPanel h2 {
  position: relative;
  color: #fff;
  padding-top: 0px;
}
.grammarPanel .number {
  top: 2px;
  left: -28px;
}

/*-------------------------------------------------- */
/* GRAMMAR AND ENGLISH PANELS */
/*-------------------------------------------------- */
.grammarPanel, .englishPanel {
  display: none;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  border-top: 6px solid #fff;
  padding: 0 20px 0 20px;
  margin-left: -20px;
  width: 100%;
}
.grammarPanel.open, .englishPanel.open {
  position: absolute;
  bottom: 30px;
  overflow-y: auto;
}
.grammarPanel .setlinkbtm, .englishPanel .setlinkbtm {
  display: flex;
  height: 40px;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  font-size: 1em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
}
@media only screen and (min-width: 1920px) {
  .grammarPanel .setlinkbtm, .englishPanel .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .grammarPanel .setlinkbtm, .englishPanel .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .grammarPanel .setlinkbtm, .englishPanel .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .grammarPanel .setlinkbtm, .englishPanel .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .grammarPanel .setlinkbtm, .englishPanel .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .grammarPanel .setlinkbtm, .englishPanel .setlinkbtm {
    font-size: 1em;
  }
}
@media only screen and (max-width: 375px) {
  .grammarPanel .setlinkbtm, .englishPanel .setlinkbtm {
    font-size: 0.9em;
  }
}
.grammarPanel .setlinkbtm img, .englishPanel .setlinkbtm img {
  width: 15px;
  height: 10px;
}
.grammarPanel .setlinkbtm img.on, .englishPanel .setlinkbtm img.on {
  display: inline-block;
}

.grammarPanel.open {
  display: block;
}
.grammarPanel.open .grammarPanelBody {
  padding: 10px 30px 50px 50px;
}
.grammarPanel.open .grammarPanelBody h2 span {
  display: inline-block;
  padding-left: 10px;
  margin-left: 10px;
  border-left: solid 1px rgba(255, 255, 255, 0.4);
}
.grammarPanel.open {
  background-color: #a3bcd4;
}
@media only screen and (min-width: 1920px) {
  .grammarPanel.open {
    bottom: 30px;
    width: 100%;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .grammarPanel.open {
    bottom: 30px;
    width: 100%;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .grammarPanel.open {
    bottom: 30px;
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .grammarPanel.open {
    width: 100%;
  }
}

.englishPanel.open {
  background-color: #f8eecb;
}
.englishPanel.open .englishPanelBody {
  padding: 20px 30px 50px 30px;
}
.englishPanel.open .englishPanelBody .paraParaEn p {
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.englishPanel.open {
  /*.panelshadow {   -- may not use this 
  	position: absolute; 
  	bottom: -45px; 
  	left: -30px;
  	width: calc(100% + 60px);
  	height: 30px;
  	@include shadow(0, -10px, 20px, $color_black_50);
  	}*/
}
@media only screen and (min-width: 1920px) {
  .englishPanel.open {
    bottom: 30px;
    display: none;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .englishPanel.open {
    bottom: 30px;
    display: none;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .englishPanel.open {
    bottom: 30px;
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .englishPanel.open {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .englishPanel.open {
    display: block;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .englishPanel.open {
    display: block;
  }
}
@media only screen and (max-width: 375px) {
  .englishPanel.open {
    display: block;
  }
}

/*-------------------------------------------------- */
/* PAGE CONTENTS: FONT SIZES */
/*-------------------------------------------------- */
#pagecontents, #pagecontents.fontsize-m {
  /* #pagebody { */ /* REX REMOVED */
}
#pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh {
  font-size: 3.5em;
  line-height: 1.7em;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh {
    font-size: 3.5em;
    line-height: 1.7em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh {
    font-size: 2.9em;
    line-height: 1.6em;
  }
}
#pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh { /* 1.5em */ }
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh {
    font-size: 2.5em;
    line-height: 1.6em;
  }
}
#pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh { /* 1.4em */ }
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh {
    font-size: 2.3em;
    line-height: 1.6em;
  }
}
#pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh { /* 1.3em */ }
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh {
    font-size: 2em;
    line-height: 1.6em;
  }
}
#pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh { /* 1.2em */ }
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh {
    font-size: 2em;
    line-height: 1.6em;
  }
}
#pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh { /* 1.2em */ }
@media only screen and (max-width: 375px) {
  #pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh {
    font-size: 1.8em;
    line-height: 1.6em;
  }
}
#pagecontents .paraParaZh, #pagecontents.fontsize-m .paraParaZh { /* 1.2em */ }
#pagecontents .paraParaZhp, #pagecontents.fontsize-m .paraParaZhp {
  font-size: 2em;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .paraParaZhp, #pagecontents.fontsize-m .paraParaZhp {
    font-size: 2em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .paraParaZhp, #pagecontents.fontsize-m .paraParaZhp {
    font-size: 2em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .paraParaZhp, #pagecontents.fontsize-m .paraParaZhp {
    font-size: 2em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .paraParaZhp, #pagecontents.fontsize-m .paraParaZhp {
    font-size: 2em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .paraParaZhp, #pagecontents.fontsize-m .paraParaZhp {
    font-size: 1.8em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .paraParaZhp, #pagecontents.fontsize-m .paraParaZhp {
    font-size: 1.7em;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .paraParaZhp, #pagecontents.fontsize-m .paraParaZhp {
    font-size: 1.6em;
  }
}
#pagecontents .paraParaZp, #pagecontents.fontsize-m .paraParaZp {
  font-size: 2.4em;
  line-height: 1.7em;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .paraParaZp, #pagecontents.fontsize-m .paraParaZp {
    font-size: 2.4em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .paraParaZp, #pagecontents.fontsize-m .paraParaZp {
    font-size: 2.4em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .paraParaZp, #pagecontents.fontsize-m .paraParaZp {
    font-size: 2.4em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .paraParaZp, #pagecontents.fontsize-m .paraParaZp {
    font-size: 2.2em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .paraParaZp, #pagecontents.fontsize-m .paraParaZp {
    font-size: 1.8em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .paraParaZp, #pagecontents.fontsize-m .paraParaZp {
    font-size: 1.6em;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .paraParaZp, #pagecontents.fontsize-m .paraParaZp {
    font-size: 1.5em;
  }
}
#pagecontents .paraParaEn p, #pagecontents.fontsize-m .paraParaEn p {
  font-size: 1.4em;
  line-height: 1.4em;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .paraParaEn p, #pagecontents.fontsize-m .paraParaEn p {
    font-size: 1.4em;
    line-height: 1.4em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .paraParaEn p, #pagecontents.fontsize-m .paraParaEn p {
    font-size: 1.4em;
    line-height: 1.4em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .paraParaEn p, #pagecontents.fontsize-m .paraParaEn p {
    font-size: 1.4em;
    line-height: 1.4em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .paraParaEn p, #pagecontents.fontsize-m .paraParaEn p {
    font-size: 1.3em;
    line-height: 1.4em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .paraParaEn p, #pagecontents.fontsize-m .paraParaEn p {
    font-size: 1.3em;
    line-height: 1.4em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .paraParaEn p, #pagecontents.fontsize-m .paraParaEn p {
    font-size: 1.3em;
    line-height: 1.3em;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .paraParaEn p, #pagecontents.fontsize-m .paraParaEn p {
    font-size: 1.2em;
    line-height: 1.3em;
  }
}
#pagecontents, #pagecontents.fontsize-m {
  /*	} */ /* REX REMOVED */
}

/*-------------------------------------------------- */
/* EXERCISE STYLES */
/*-------------------------------------------------- */
.exerButtonsFrame {
  position: relative;
  display: block;
  /*bottom: 70px;*/
  /*width: calc(100% - 200px);*/
  margin-top: 10px;
  width: 100%;
  border-top: 6px solid #ebebeb;
  /*margin-top: 80px;
  padding-top: 6px;*/
  /*@include responsive(xwide-screens) { width: calc(100% - 200px); }
  @include responsive(wide-screens) { width: calc(100% - 200px); }
  @include responsive(large-screens) { width: calc(100% - 200px); }
  @include responsive(medium-screens) { width: calc(100% - 90px); }
  @include responsive(small-screens) { width: calc(100% - 60px); }
  @include responsive(xsmall-screens) { width: calc(100% - 60px); }
  @include responsive(mobile-screens) { width: calc(100% - 60px); }*/
}
.exerButtonsFrame .btn {
  color: #fff;
  opacity: 1;
  cursor: pointer;
  float: right;
}
.exerButtonsFrame .btn.left {
  float: left;
}
.exerButtonsFrame .btn.grey {
  background-color: #999;
  /*color: $color_dkgrey;*/
  color: #fff;
}
.exerButtonsFrame .btn:disabled {
  opacity: 0.5;
  background-color: #c3c3c3;
  color: #707070;
  cursor: default;
}

.exerGrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 20px 50px;
  grid-column-gap: 0;
  grid-row-gap: 0;
}

.btn.exerWordButton {
  position: relative;
  display: inline-block;
  float: left;
  margin: 0 10px 10px 0;
  padding: 10px;
  height: 70px;
  min-width: 80px;
  color: #333;
  background-color: #ebebeb;
  border: 1px solid #999;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  text-transform: none;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
}
.btn.exerWordButton .en {
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.btn.exerWordButton {
  -webkit-box-shadow: 4px 4px 8px rgba(153, 153, 153, 0.5);
  -moz-box-shadow: 4px 4px 8px rgba(153, 153, 153, 0.5);
  box-shadow: 4px 4px 8px rgba(153, 153, 153, 0.5);
}
.btn.exerWordButton:hover {
  background-color: #f0f0f0;
}
.btn.exerWordButton.fixed {
  min-width: 40px;
  background-color: transparent;
  border: none;
  cursor: default;
  -webkit-box-shadow: 0 0 0 transparent;
  -moz-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
}
.btn.exerWordButton.fixed:hover {
  background-color: #e0e0e0;
}
.btn.exerWordButton.avail {
  border-color: #dbdbdb;
  background-color: #fcfcfc;
  -webkit-box-shadow: 0 0 0 transparent;
  -moz-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
}
.btn.exerWordButton.current {
  border: 1px solid #aaa;
  background-color: #fff;
}
.btn.exerWordButton.current::before {
  content: "";
  color: #fff;
  display: block;
  position: absolute;
  bottom: 24px;
  width: 58px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23668FBC;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M5,25.3l20.1-20l20,20L40,30.6L28.8,19.4v26h-7.4v-26L10.3,30.6L5,25.3z'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45%;
}
.btn.exerWordButton.inuse {
  opacity: 0.2;
  -webkit-box-shadow: 0 0 0 transparent;
  -moz-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
}
.btn.exerWordButton.incorrect {
  color: rgb(218, 41, 28);
  background-color: rgba(218, 41, 28, 0.2);
}
.btn.exerWordButton.correct {
  color: rgb(80, 146, 97);
  background-color: rgba(123, 186, 140, 0.4);
}
.btn.exerWordButton {
  /*&.current {
  	background-color: $color_bggrey3;
  	border: 2px solid $color_bggrey;
  	}
  &.correct {
  	background-color: rgba(123, 186, 140, 0.4);
  	} 
  &.incorrect {
  	background-color: rgb(218, 41, 28);
  }*/
}
.btn.exerWordButton.grey {
  /*border: none;
  @include rounded(0);
  &.disabled {
  	background-color: $color_ltgrey;
  	cursor: default;
  }

  #dragObject & {
  	background-color: black;
  	border-color: #fff;
  }
  &.flash {
  	background-color: $color_red;
  	&.goodflash {
  		background-color: #008000;
  	}
  }
  */
}

.exerDefSentences.buildarea {
  position: relative;
  background-color: #f8f8f8;
  min-height: 60px;
  padding: 15px 15px 5px 15px;
  cursor: pointer;
  -webkit-box-shadow: inset 4px 4px 12px #c3c3c3;
  -moz-box-shadow: inset 4px 4px 12px #c3c3c3;
  box-shadow: inset 4px 4px 12px #c3c3c3;
}

.exerSentenceWordsFrame {
  margin: 50px 20px 20px 20px;
  text-align: center;
}
.exerSentenceWordsFrame .btn.exerWordButton {
  float: none;
  margin: 0 5px 15px 5px;
}
.exerSentenceWordsFrame .exerWordButton.inuse {
  cursor: not-allowed;
  background-color: #e0e0e0;
}
.exerSentenceWordsFrame .exerWordButton.inuse:hover {
  background-color: #e0e0e0;
}

#pagebody .exerWordButton.clone {
  position: absolute;
}

.exerContent.finished .exerWordButton {
  cursor: not-allowed;
}

.btn.dictAudio {
  display: block;
  float: left;
  height: auto;
  padding-right: 14px;
  margin: -4px 12px 6px 0;
}
@media only screen and (min-width: 1920px) {
  .btn.dictAudio {
    float: left;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .btn.dictAudio {
    float: left;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .btn.dictAudio {
    float: left;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .btn.dictAudio {
    float: left;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .btn.dictAudio {
    float: left;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .btn.dictAudio {
    float: none;
  }
}
@media only screen and (max-width: 375px) {
  .btn.dictAudio {
    float: none;
  }
}

.exerProgress {
  position: relative;
  /*bottom: 140px;
  margin: 70px 0 -0 0;*/
  padding: 10px 0 2px 0;
  color: #668fbc;
  font-size: 1em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.exerFeedback {
  float: right;
}
.exerFeedback .incorrect {
  color: #da291c;
}

.exerDefMeaning {
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #da291c;
}
.exerDefMeaning.sentence {
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2em;
}

.exerChoiceFrame {
  clear: both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 30px auto 10px auto;
}
@media only screen and (min-width: 1920px) {
  .exerChoiceFrame {
    grid-template-columns: 1fr 1fr;
    margin: 30px auto 10px auto;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .exerChoiceFrame {
    grid-template-columns: 1fr 1fr;
    margin: 20px auto 10px auto;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .exerChoiceFrame {
    grid-template-columns: 1fr 1fr;
    margin: 20px auto 10px auto;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .exerChoiceFrame {
    grid-template-columns: 1fr 1fr;
    margin: 10px auto 10px auto;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .exerChoiceFrame {
    grid-template-columns: 1fr 1fr;
    margin: 10px auto 10px auto;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .exerChoiceFrame {
    grid-template-columns: 1fr;
    margin: 10px auto 10px auto;
  }
}
@media only screen and (max-width: 375px) {
  .exerChoiceFrame {
    grid-template-columns: 1fr;
    margin: 5px auto 10px auto;
  }
}
.exerChoiceFrame .exerChoiceButton {
  position: relative;
  display: inline-block;
  float: left;
  /*margin: 0 10px 20px 10px;*/
  padding: 30px;
  /*width: 40%;
  max-width: 480px;*/
  width: 100%;
  max-width: 480px;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8em;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border: 1px solid #999;
  background-color: #ebebeb;
}
@media only screen and (min-width: 1920px) {
  .exerChoiceFrame .exerChoiceButton {
    padding: 30px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .exerChoiceFrame .exerChoiceButton {
    padding: 30px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .exerChoiceFrame .exerChoiceButton {
    padding: 30px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .exerChoiceFrame .exerChoiceButton {
    padding: 20px 30px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .exerChoiceFrame .exerChoiceButton {
    padding: 20px 30px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .exerChoiceFrame .exerChoiceButton {
    padding: 10px 30px;
  }
}
@media only screen and (max-width: 375px) {
  .exerChoiceFrame .exerChoiceButton {
    padding: 10px 30px;
  }
}
.exerChoiceFrame .exerChoiceButton .en {
  display: inline-block;
  font-size: 100%;
  line-height: 1.3em;
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  padding-left: 10px;
}
.exerChoiceFrame .exerChoiceButton .feedback {
  position: absolute;
  right: 12px;
  bottom: 0;
  display: block;
  font-size: 12px;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.exerChoiceFrame .exerChoiceButton.incorrect {
  background-color: rgba(218, 41, 28, 0.2);
}
.exerChoiceFrame .exerChoiceButton.incorrect .feedback::before {
  color: rgb(218, 41, 28);
  content: "try again";
}
.exerChoiceFrame .exerChoiceButton.correct {
  background-color: rgba(123, 186, 140, 0.4);
  cursor: not-allowed; /* REX */
}
.exerChoiceFrame .exerChoiceButton.correct .feedback::before {
  color: rgb(80, 146, 97);
  content: "correct";
}
.exerChoiceFrame .exerChoiceButton {
  /*@include responsive(xwide-screens) { width: 40%; max-width: 480px; }
  @include responsive(wide-screens) { width: 40%; max-width: 480px; }
  @include responsive(large-screens) { width: 40%; max-width: 480px; }
  @include responsive(medium-screens) { width: 40%; max-width: 480px; }
  @include responsive(small-screens) { margin: 0 0 20px 0; width: 100%; }
  @include responsive(xsmall-screens) { margin: 0 0 20px 0; width: 100%; }
  @include responsive(mobile-screens) { margin: 0 0 20px 0; width: 100%; }	*/
}
.exerChoiceFrame.long {
  max-width: 100%;
  grid-template-columns: 1fr 1fr;
}
.exerChoiceFrame.long .exerChoiceButton .en {
  padding-left: 0;
  padding-top: 4px;
  font-size: 85%;
}
.exerChoiceFrame.long .exerChoiceButton {
  padding: 20px 30px;
  max-width: 100%;
  text-align: left;
}
.exerChoiceFrame {
  /* REX */
}
.exerChoiceFrame.finished .exerChoiceButton {
  cursor: not-allowed;
}
.exerChoiceFrame {
  /* REX */
}

.exerCategorySelector {
  display: flex;
  align-items: flex-start;
  position: relative;
}
@media only screen and (min-width: 1920px) {
  .exerCategorySelector {
    display: flex;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .exerCategorySelector {
    display: flex;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .exerCategorySelector {
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .exerCategorySelector {
    display: flex;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .exerCategorySelector {
    display: block;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .exerCategorySelector {
    display: block;
  }
}
@media only screen and (max-width: 375px) {
  .exerCategorySelector {
    display: block;
  }
}
.exerCategorySelector .exerCategory {
  display: inline-block;
  margin: 0 10px 0 0;
  text-align: center;
}
@media only screen and (min-width: 1920px) {
  .exerCategorySelector .exerCategory {
    display: inline-block;
    margin: 0 10px 0 0;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .exerCategorySelector .exerCategory {
    display: inline-block;
    margin: 0 10px 0 0;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .exerCategorySelector .exerCategory {
    display: inline-block;
    margin: 0 10px 0 0;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .exerCategorySelector .exerCategory {
    display: inline-block;
    margin: 0 10px 0 0;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .exerCategorySelector .exerCategory {
    display: block;
    width: 100%;
    margin: 0 auto 0 auto;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .exerCategorySelector .exerCategory {
    display: block;
    width: 100%;
    margin: 0 auto 0 auto;
  }
}
@media only screen and (max-width: 375px) {
  .exerCategorySelector .exerCategory {
    display: block;
    width: 100%;
    margin: 0 auto 0 auto;
  }
}
.exerCategorySelector .exerButtonCatSelector {
  display: block;
  margin: 0 0 8px 0;
  padding: 20px 30px;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.8em;
  line-height: 1.2em;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border: 1px solid #999;
  background-color: #ebebeb;
}
.exerCategorySelector .exerButtonCatSelector:hover {
  color: #fff;
  background-color: #333;
  border: 1px solid #333;
}
@media only screen and (min-width: 1920px) {
  .exerCategorySelector .exerButtonCatSelector {
    margin: 0 0 8px 0;
    padding: 20px 30px;
    font-size: 1.8em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .exerCategorySelector .exerButtonCatSelector {
    margin: 0 0 8px 0;
    padding: 20px 30px;
    font-size: 1.7em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .exerCategorySelector .exerButtonCatSelector {
    margin: 0 0 8px 0;
    padding: 20px 30px;
    font-size: 1.6em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .exerCategorySelector .exerButtonCatSelector {
    margin: 0 0 8px 0;
    padding: 20px 30px;
    font-size: 1.5em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .exerCategorySelector .exerButtonCatSelector {
    margin: 0 auto 8px auto;
    padding: 20px 20px;
    width: 100%;
    font-size: 1.5em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .exerCategorySelector .exerButtonCatSelector {
    margin: 0 auto 8px auto;
    padding: 20px 20px;
    width: 100%;
    font-size: 1.5em;
  }
}
@media only screen and (max-width: 375px) {
  .exerCategorySelector .exerButtonCatSelector {
    margin: 0 auto 8px auto;
    padding: 20px 20px;
    width: 100%;
    font-size: 1.5em;
  }
}
.exerCategorySelector .exerScore {
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #668fbc;
}
.exerCategorySelector .exerScore span {
  color: #333;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
}

.exerDefMeaning.sentence {
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
}

/*
  .exerCategory {
    margin-bottom: 10px;
  }

}
.exerProgress {
  font-size: 24px;
  margin-bottom: 20px;
}

.exerInstructions {
  font-style: italic;
  margin-top: 6px;
  margin-bottom: 10px;
}
.exerChoiceList {
  margin-bottom: 6px;
}

.exerChoiceButton {
  display: inline-block;
  text-align: center;
  padding: 4px 10px;
  background-color: $color_dkgrey;
  color: $color_white;
  &.correct {
    background-color: $color_blue;
    cursor: default;
  }
  &.incorrect {
    background-color: $color_red;
    color: $color_medgrey;
    cursor: default;
  }
}

.exerChoiceTextButton {
  display: block;
  background-color: $color_white;
  color: $color_black;
  border: 1px solid $color_medgrey;
  margin-bottom: 6px;
  &.correct {
    background-color: $color_blue;
    color: $color_white;
    cursor: default;
  }
  &.incorrect {
    background-color: $color_red;
    color: $color_medgrey;
    cursor: default;
  }
}

.exerDefMeaning {
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  padding-left: 16px;
}
div.exerDefMeaning {
  margin-bottom: 10px;
}

.exerPadRight {
  margin-right: 20px;
}
.exerVertMid {
  vertical-align: middle;
}

.exerFeedback {
  margin-top: 10px;
  span {
    font-size: 20px;
  }
}
*/
/*-------------------------------------------------- */
/* ABOUT THIS BOOK */
/*-------------------------------------------------- */
#pageContentsAbout {
  display: grid;
  height: 100%;
  grid-template-columns: 70px auto 240px 70px;
  grid-template-rows: 100px auto 30px;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-areas: "leftmargin bookcontents bookcontents bookcontents" "pageleftnav bookcontentbody bookcontentsidebar pagerightnav" "chapternav chapternav chapternav chapternav";
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout {
    display: grid;
    grid-template-columns: 70px auto 240px 70px;
    grid-template-rows: 100px auto 30px;
    grid-template-areas: "leftmargin bookcontents bookcontents bookcontents" "pageleftnav bookcontentbody bookcontentsidebar pagerightnav" "chapternav chapternav chapternav chapternav";
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout {
    display: grid;
    grid-template-columns: 70px auto 240px 70px;
    grid-template-rows: 100px auto 30px;
    grid-template-areas: "leftmargin bookcontents bookcontents bookcontents" "pageleftnav bookcontentbody bookcontentsidebar pagerightnav" "chapternav chapternav chapternav chapternav";
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout {
    display: grid;
    grid-template-columns: 70px auto 240px 70px;
    grid-template-rows: 100px auto 30px;
    grid-template-areas: "leftmargin bookcontents bookcontents bookcontents" "pageleftnav bookcontentbody bookcontentsidebar pagerightnav" "chapternav chapternav chapternav chapternav";
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout {
    display: block;
    padding: 0 70px 0 70px;
    grid-template-columns: 70px auto 70px;
    grid-template-rows: 80px auto 50px;
    grid-template-areas: "leftmargin bookcontents bookcontents" "pageleftnav bookcontentbody bookcontentbody" "pageleftnav bookcontentbody bookcontentbody";
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout {
    display: block;
    padding: 0 24px 0 24px;
    grid-template-columns: 24px auto 24px;
    grid-template-rows: 80px auto 50px;
    grid-template-areas: "leftmargin bookcontents bookcontents" "pageleftnav bookcontentbody bookcontentbody" "pageleftnav bookcontentbody bookcontentbody";
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout {
    display: block;
    padding: 0 24px 0 24px;
    grid-template-columns: 24px auto 24px;
    grid-template-rows: 80px auto 50px;
    grid-template-areas: "leftmargin bookcontents bookcontents" "pageleftnav bookcontentbody bookcontentbody" "pageleftnav bookcontentbody bookcontentbody";
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout {
    display: block;
    padding: 0 24px 0 24px;
    grid-template-columns: 24px auto 24px;
    grid-template-rows: 180px auto 50px;
    grid-template-areas: "leftmargin bookcontents bookcontents" "pageleftnav bookcontentbody bookcontentbody" "pageleftnav bookcontentbody bookcontentbody";
  }
}
#pageContentsAbout .bookcontents {
  grid-area: bookcontents;
  padding: 50px 50px 0 50px;
}
#pageContentsAbout .bookcontents h1 {
  padding: 0 0 12px 0;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontents h1 {
    padding: 0 0 12px 0;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontents h1 {
    padding: 0 0 12px 0;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontents h1 {
    padding: 0 0 12px 0;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontents h1 {
    padding: 0 0 12px 0;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontents h1 {
    padding: 0 0 8px 0;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontents h1 {
    padding: 0 0 8px 0;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontents h1 {
    padding: 0 0 8px 0;
  }
}
#pageContentsAbout .bookcontents h3.detail {
  padding: 20px 0 4px 0;
  color: #333;
  font-size: 1.1em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#pageContentsAbout .bookcontents h3.detail.lvl {
  padding: 0 0 18px 0;
  color: #668fbc;
  font-size: 1em;
  clear: both;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontents h3.detail.lvl {
    display: none;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontents h3.detail.lvl {
    display: none;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontents h3.detail.lvl {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontents h3.detail.lvl {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontents h3.detail.lvl {
    display: block;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontents h3.detail.lvl {
    display: block;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontents h3.detail.lvl {
    display: block;
  }
}
#pageContentsAbout .bookcontents .subnav {
  list-style: none;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontents .subnav {
    display: block;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontents .subnav {
    display: block;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontents .subnav {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontents .subnav {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontents .subnav {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontents .subnav {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontents .subnav {
    display: none;
  }
}
#pageContentsAbout .bookcontents .subnav li {
  display: inline-block;
  padding: 0 30px 20px 0;
  cursor: pointer;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
}
#pageContentsAbout .bookcontents .subnav li.active {
  cursor: default;
  color: #333;
  /*background-image: url('images/subnav_pointer.svg');*/
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14.99'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23c3c3c3;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M0,0H24L12,15Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-position: calc(50% - 15px) bottom;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontents {
    padding: 50px 50px 0 50px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontents {
    padding: 50px 50px 0 50px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontents {
    padding: 50px 50px 0 50px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontents {
    padding: 40px 40px 0 0;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontents {
    padding: 30px 30px 0 0;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontents {
    padding: 20px 20px 0 0;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontents {
    padding: 20px 20px 0 0;
  }
}
#pageContentsAbout .bookcontents .subnavdrop {
  padding: 8px 30px 7px 12px;
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  border: none;
  background-color: #ebebeb;
}
#pageContentsAbout .bookcontents .subnavdrop option {
  padding-right: 20px;
  color: #707070;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9em;
}
#pageContentsAbout .bookcontents .subnavdrop option.active {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontents .subnavdrop {
    display: none;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontents .subnavdrop {
    display: none;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontents .subnavdrop {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontents .subnavdrop {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontents .subnavdrop {
    display: block;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontents .subnavdrop {
    display: block;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontents .subnavdrop {
    display: block;
  }
}
#pageContentsAbout .bookcontentbody {
  grid-area: bookcontentbody;
  display: none;
  padding: 60px 50px 30px 50px;
  overflow: auto;
}
#pageContentsAbout .bookcontentbody h2 span {
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
}
#pageContentsAbout .bookcontentbody .location h2 {
  padding-top: 0;
}
#pageContentsAbout .bookcontentbody .location h2 .zp {
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontentbody {
    padding: 60px 50px 30px 50px;
    height: calc(100% - 130px);
  }
  #pageContentsAbout .bookcontentbody .libBookCover {
    float: right;
    margin: 0 0 0 30px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontentbody {
    padding: 60px 50px 30px 50px;
    height: calc(100% - 130px);
  }
  #pageContentsAbout .bookcontentbody .libBookCover {
    float: right;
    margin: 0 0 0 30px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontentbody {
    padding: 60px 50px 10px 50px;
    height: calc(100% - 130px);
  }
  #pageContentsAbout .bookcontentbody .libBookCover {
    float: right;
    margin: 0 0 0 30px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontentbody {
    padding: 60px 40px 10px 0;
    height: calc(100% - 130px);
  }
  #pageContentsAbout .bookcontentbody .libBookCover {
    float: none;
    margin: 0 0 20px 30px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontentbody {
    padding: 20px 30px 10px 0;
    height: calc(100% - 130px);
  }
  #pageContentsAbout .bookcontentbody .libBookCover {
    float: none;
    margin: 0 0 20px 30px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontentbody {
    padding: 20px 30px 10px 0;
    height: calc(100% - 130px);
  }
  #pageContentsAbout .bookcontentbody .libBookCover {
    float: none;
    margin: 0 0 20px 30px;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontentbody {
    padding: 20px 30px 30px 0;
    height: calc(100% - 130px);
  }
  #pageContentsAbout .bookcontentbody .libBookCover {
    float: none;
    margin: 0 0 20px 20px;
  }
}
#pageContentsAbout .bookcontentbody #bookdetails {
  display: none;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontentbody #bookdetails {
    display: none;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontentbody #bookdetails {
    display: none;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontentbody #bookdetails {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontentbody #bookdetails {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontentbody #bookdetails {
    display: block;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontentbody #bookdetails {
    display: block;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontentbody #bookdetails {
    display: block;
  }
}
#pageContentsAbout .bookcontentbody #bookdetails h3 {
  padding: 12px 0 2px 0;
  color: #333;
  font-size: 1em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#pageContentsAbout .bookcontentbody #bookdetails p {
  font-size: 1.2em;
}
#pageContentsAbout .bookcontentbody p::first-letter {
  text-transform: uppercase;
}
#pageContentsAbout .bookcontentbody.active {
  display: block;
  height: auto;
}
#pageContentsAbout .bookcontentbody#bookcontentsSummary .libBookCover {
  cursor: pointer;
}
#pageContentsAbout .bookcontentbody#bookcontentsContents {
  column-count: 2;
  column-gap: 50px;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents {
    column-count: 2;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents {
    column-count: 2;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents {
    column-count: 2;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents {
    column-count: 2;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents {
    column-count: 1;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents {
    column-count: 1;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents {
    column-count: 1;
  }
}
#pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock {
  display: grid;
  grid-template-columns: 45px auto;
  grid-template-areas: "tocnumber toctitle" "tocspace toczh";
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock {
    grid-template-columns: 45px auto;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock {
    grid-template-columns: 45px auto;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock {
    grid-template-columns: 45px auto;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock {
    grid-template-columns: 40px auto;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock {
    grid-template-columns: 40px auto;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock {
    grid-template-columns: 40px auto;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock {
    grid-template-columns: 35px auto;
  }
}
#pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .tocnumber {
  grid-area: tocnumber;
  padding: 0 0 12px 0;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2em;
  color: #da291c;
  line-height: 1.2em;
  letter-spacing: -0.05em;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .tocnumber {
    font-size: 2em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .tocnumber {
    font-size: 2em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .tocnumber {
    font-size: 2em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .tocnumber {
    font-size: 1.9em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .tocnumber {
    font-size: 1.9em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .tocnumber {
    font-size: 1.6em;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .tocnumber {
    font-size: 1.5em;
  }
}
#pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toctitle {
  grid-area: toctitle;
  padding: 0 0 8px 0;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2em;
  color: #da291c;
  line-height: 1.2em;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toctitle {
    font-size: 2em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toctitle {
    font-size: 2em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toctitle {
    font-size: 2em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toctitle {
    font-size: 1.9em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toctitle {
    font-size: 1.9em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toctitle {
    font-size: 1.6em;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toctitle {
    font-size: 1.5em;
  }
}
#pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toczh {
  grid-area: toczh;
  padding: 0 0 30px 0;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2em;
  color: #333;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toczh {
    font-size: 2em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toczh {
    font-size: 2em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toczh {
    font-size: 2em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toczh {
    font-size: 1.9em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toczh {
    font-size: 1.9em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toczh {
    font-size: 1.6em;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontentbody#bookcontentsContents .tocblock .toczh {
    font-size: 1.5em;
  }
}
#pageContentsAbout .bookcontentbody#bookcontentsContents .contentsTitleZh {
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
}
#pageContentsAbout .bookcontentbody#bookcontentsCharacters .castframe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}
#pageContentsAbout .bookcontentbody#bookcontentsCharacters .castframe .paraCast {
  display: grid;
  grid-template-columns: 120px 10px auto;
  min-width: 300px;
  padding-bottom: 20px;
}
#pageContentsAbout .bookcontentbody#bookcontentsCharacters .castframe .paraCast .paraCastImgDiv {
  grid-column-start: 1;
  grid-column-end: 2;
}
#pageContentsAbout .bookcontentbody#bookcontentsCharacters .castframe .paraCast .paraCastImgDiv img {
  width: 100%;
  height: auto;
}
#pageContentsAbout .bookcontentbody#bookcontentsCharacters .castframe .paraCast .paraCastTextDiv {
  grid-column-start: 3;
  grid-column-end: 4;
}
#pageContentsAbout .bookcontentbody#bookcontentsCharacters .castframe .paraCast .paraCastTextDiv h2 {
  padding-bottom: 6px;
  color: #333;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3em;
}
#pageContentsAbout .bookcontentbody#bookcontentsCharacters .castframe .paraCast .paraCastTextDiv h3 {
  padding-bottom: 6px;
  color: #333;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5em;
}
#pageContentsAbout .bookcontentbody#bookcontentsCharacters .castframe .paraCast .paraCastTextDiv .paraCastEn {
  font-family: "AvenirNextWorldThin", helvetica, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.3em;
  line-height: 1.2em;
}
#pageContentsAbout .bookcontentbody .libBookCover {
  float: right;
  width: 50%;
  max-width: 300px;
  min-width: 100px;
  height: auto;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontentbody .libBookCover {
    max-width: 300px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontentbody .libBookCover {
    max-width: 300px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontentbody .libBookCover {
    max-width: 300px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontentbody .libBookCover {
    max-width: 260px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontentbody .libBookCover {
    max-width: 220px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontentbody .libBookCover {
    max-width: 160px;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontentbody .libBookCover {
    max-width: 140px;
  }
}
#pageContentsAbout .bookcontentsidebar {
  grid-area: bookcontentsidebar;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .bookcontentsidebar {
    display: block;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .bookcontentsidebar {
    display: block;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .bookcontentsidebar {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .bookcontentsidebar {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .bookcontentsidebar {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .bookcontentsidebar {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .bookcontentsidebar {
    display: none;
  }
}
#pageContentsAbout .bookcontentsidebar div {
  margin-top: 60px;
  padding-left: 20px;
  border-left: 6px solid #ebebeb;
}
#pageContentsAbout .bookcontentsidebar div .btn {
  margin-top: 0;
}
#pageContentsAbout .bookcontentsidebar h3 {
  padding: 16px 0 2px 0;
  color: #333;
  font-size: 1em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#pageContentsAbout .bookcontentsidebar h3.lvl {
  color: #668fbc;
}
#pageContentsAbout .bookcontentsidebar p {
  font-size: 1.2em;
}
#pageContentsAbout .bookcontentsidebar p::first-letter {
  text-transform: uppercase;
}
#pageContentsAbout .bookcontentsidebar p a {
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #668fbc;
}
#pageContentsAbout .bookcontentsidebar p a:hover, #pageContentsAbout .bookcontentsidebar p a:active {
  color: #333;
}
#pageContentsAbout .paraParaEn {
  /*margin-top: 32px;
  grid-column-start: en-start;
  grid-column-end: en-end;*/
  float: right;
  display: block;
  position: relative;
  margin: 12px 0 30px 50px;
  height: 100%;
  width: 240px;
}
#pageContentsAbout .paraParaEn p {
  padding: 0 0 0 20px;
  font-size: 1.4em;
  line-height: 1.4em;
  font-family: "AvenirNextWorldThin", helvetica, sans-serif;
  font-weight: 300;
  font-style: normal;
  border-left: 6px solid #ebebeb;
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .paraParaEn p {
    font-size: 1.4em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .paraParaEn p {
    font-size: 1.4em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .paraParaEn p {
    font-size: 1.4em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .paraParaEn p {
    font-size: 1.4em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .paraParaEn p {
    font-size: 1.4em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .paraParaEn p {
    font-size: 1.4em;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .paraParaEn p {
    font-size: 1.4em;
  }
}
@media only screen and (min-width: 1920px) {
  #pageContentsAbout .paraParaEn {
    display: block;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pageContentsAbout .paraParaEn {
    display: block;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pageContentsAbout .paraParaEn {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pageContentsAbout .paraParaEn {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pageContentsAbout .paraParaEn {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pageContentsAbout .paraParaEn {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  #pageContentsAbout .paraParaEn {
    display: none;
  }
}

/*-------------------------------------------------- */
/* SETTINGS POUPUP */
/*-------------------------------------------------- */
#popupContainer {
  z-index: 7551;
  position: fixed;
  left: 50%;
  top: 50%;
  width: auto;
  min-width: 280px;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
@media only screen and (min-width: 1920px) {
  #popupContainer {
    min-width: 280px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #popupContainer {
    min-width: 280px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #popupContainer {
    min-width: 280px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #popupContainer {
    min-width: 280px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #popupContainer {
    min-width: 250px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #popupContainer {
    min-width: 240px;
  }
}
@media only screen and (max-width: 375px) {
  #popupContainer {
    min-width: 230px;
  }
}

#popupBackdrop {
  z-index: 7550;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}

.popupSection {
  clear: both;
  padding: 10px 10px 0 10px;
}

.popupTitle {
  margin: 0 0 8px 0;
  padding: 16px 0 0 0;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1em;
  color: #da291c;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.popup {
  width: auto;
  height: auto;
  min-width: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 30px 50px 40px 30px;
}
@media only screen and (min-width: 1920px) {
  .popup {
    min-width: 280px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .popup {
    min-width: 280px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .popup {
    min-width: 280px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .popup {
    min-width: 280px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .popup {
    min-width: 250px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .popup {
    min-width: 240px;
  }
}
@media only screen and (max-width: 375px) {
  .popup {
    min-width: 230px;
  }
}

.popupClose {
  position: absolute;
  right: 1px;
  top: 1px;
  padding: 4px 8px;
  font-size: 20px;
  height: 22px;
  cursor: pointer;
}

.popupHeader {
  background-color: #da291c;
  color: #fff;
  height: 30px;
  border-bottom: 1px solid black;
}
.popupHeader h1 {
  font-size: 24px;
  text-align: center;
}

.settingsTabs {
  display: flex;
  margin: 6px 0 18px 0;
  border-bottom: 1px solid #e0e0e0;
}

.settingsTab {
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  color: #707070;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 6px 16px;
  cursor: pointer;
}
.settingsTab.active {
  color: #da291c;
  border-bottom-color: #da291c;
}
@media (min-width: 375px) and (max-width: 480px) {
  .settingsTab {
    padding: 6px 10px;
  }
}
@media only screen and (max-width: 375px) {
  .settingsTab {
    padding: 6px 8px;
    font-size: 16px;
  }
}

.settingsPanels {
  /* All three panels share one grid cell, so the box is always as wide and as
     tall as the largest of them and the popup does not resize under the user
     as they switch tabs.  Sizing to the content beats picking a number: add a
     setting and it still fits. */
  display: grid;
}

.settingsPanel {
  grid-area: 1/1;
  /* Hidden, not removed -- it keeps its share of the cell.  `visibility` also
     takes the inactive panels out of the tab order, while leaving their inputs
     readable by the save handler, which reads all three panels at once. */
  visibility: hidden;
}
.settingsPanel.active {
  visibility: visible;
}

.settingsHeader {
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  color: #da291c;
  margin-bottom: 10px;
}

.settingsBody {
  color: #333;
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-left: 1px;
  margin-bottom: 20px;
  padding-left: 22px;
}
.settingsBody p {
  margin: 0;
  padding: 0 0 4px 0;
  font-size: 1.3em;
  line-height: 1.2em;
}
.settingsBody input {
  margin-left: -21px;
}

/* A setting of a different kind from the ones above it, under the same heading. */
.settingsBody p.settingsApart {
  margin-top: 14px;
}

/* Speech speed: four radio buttons drawn as one bar of segments, the chosen one
   lit.  The inputs stay in the page, invisible, so the save handler reads them
   like any other radio group and the keyboard still moves between them. */
.settingsSpeed {
  display: inline-flex;
  margin: 4px 0 12px;
  border: 1px solid #999;
  border-radius: 8px;
  overflow: hidden;
}
.settingsSpeed label {
  position: relative;
}
.settingsSpeed input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.settingsSpeed span {
  display: block;
  padding: 6px 14px;
  font-size: 1.1em;
  border-left: 1px solid #999;
}
.settingsSpeed label:first-child span {
  border-left: 0;
}
.settingsSpeed input:checked + span {
  background-color: #da291c;
  color: #fff;
}
.settingsSpeed input:focus-visible + span {
  outline: 2px solid #668fbc;
  outline-offset: -2px;
}

.settingsPopupBody .btn {
  margin-top: 0;
}

/*-------------------------------------------------- */
/* DICTIONARY SETTINGS */
/*-------------------------------------------------- */
/* Do popup */
#dictPopup {
  padding: 30px 50px 14px 30px;
}
@media only screen and (min-width: 1920px) {
  #dictPopup {
    padding: 30px 50px 14px 30px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #dictPopup {
    padding: 30px 50px 14px 30px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #dictPopup {
    padding: 30px 50px 14px 30px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #dictPopup {
    padding: 30px 40px 14px 30px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #dictPopup {
    padding: 30px 30px 14px 20px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #dictPopup {
    padding: 30px 20px 14px 10px;
  }
}
@media only screen and (max-width: 375px) {
  #dictPopup {
    padding: 30px 20px 14px 10px;
  }
}

.dictPopup {
  cursor: pointer;
}

/* Highlight the words you can click for dictionary entry */
/* REX REMOVED #PAGEBODY */
.zhpBlock.dictPopup .zhpZh:hover,
.paraParaZp .dictPopup:hover {
  color: #da291c;
}

/*
#pagebody .zhpBlock.dictPopup .zhpZh:hover,
#pagebody .paraParaZp .dictPopup:hover {
	color: $color_red;
	}
*/
/* Dictionary page */
/* dictTable is the container class for the entries shown
   on the dictionary page */
.dictTable {
  padding-left: 4px;
  padding-right: 4px;
  overflow-y: scroll;
  /* dictEntry is a dictionary entry container.  It is used in 3 places:
  rows in dictionary page, in contents of dict popup, and in the "related"
  section of a dict popup.  This is probably too much and this should be
  broken into separate classes. */
}
.dictTable .dictEntry {
  border-bottom: 1px solid #999;
  margin-top: 6px;
  padding-bottom: 6px;
  min-height: 30px;
  width: 100%;
}
.dictTable .dictEntry.related {
  padding-top: 20px;
  border-top: 1px solid #999;
}

#dictPopup .dictRelated {
  padding-top: 20px;
  /*border-top: 1px solid $color_grey;*/
}
#dictPopup .dictRelated .dictTopRow {
  margin: -30px 0 0 0;
  padding: 10px 0 0 0;
}
#dictPopup .dictRelated .dictZh {
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  padding-bottom: 4px;
  font-size: 20px;
}
#dictPopup .dictRelated .dictZp {
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  padding-top: 4px;
}

#dictPopup .dictUsage {
  padding-top: 4px;
}
#dictPopup .dictUsage .dictZh {
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  padding-bottom: 4px;
  font-size: 20px;
}
#dictPopup .dictUsage .dictZp {
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
}

/* .dictEntry is used in page and popups */
.dictEntry .dictZh {
  cursor: pointer;
}

/* dictZh is for chinese chars, dictZp for pinyin */
.dictZh {
  display: inline-block;
  min-width: 90px;
  font-size: 20px;
  padding-right: 8px;
}

.dictZp {
  display: inline-block;
  min-width: 100px;
  padding-right: 20px;
  font-size: 20px;
}

/* dictAudio class wraps an audio playback icon */
.dictAudio {
  display: inline-block;
  float: left;
  padding-right: 8px;
  cursor: pointer;
  width: 22px;
  height: 22px;
}
.dictAudio img {
  width: 100%;
  height: auto;
}
.dictAudio.exerVertMid {
  margin-top: 6px;
}

/* dictDefs are container for definition entries in dictionary entries/popup,
   which themselves are each of class dictDef. There can be more than one definition. */
.dictTable .dictDefs {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dictDef {
  display: inline-block;
  padding-right: 15px;
}

/* dictPart is the "part of speech" tag in a dict definition */
.dictPart {
  color: #707070;
}

/* dictCastImage class is for the images in special cast member
   dictionary entries. */
img.dictCastImage {
  float: left;
  margin-right: 8px;
  margin-bottom: 2px;
}
@media only screen and (min-width: 1920px) {
  img.dictCastImage {
    float: left;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  img.dictCastImage {
    float: left;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  img.dictCastImage {
    float: left;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  img.dictCastImage {
    float: left;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  img.dictCastImage {
    float: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  img.dictCastImage {
    float: none;
  }
}
@media only screen and (max-width: 375px) {
  img.dictCastImage {
    float: none;
  }
}

/* Dictionary page controls */
.dictControls {
  background-color: #e0e0e0;
  padding: 4px 20px 4px 20px;
  border: 1px solid #999;
  border-bottom: 1px solid #333;
  margin-bottom: 10px;
}
.dictControls span.btn {
  margin-top: 18px;
  margin-left: 10px;
  cursor: pointer;
}
.dictControls span.btn#dictNewEntry {
  margin-left: 20px;
}
.dictControls a.backbutton {
  font-size: 48px;
}
.dictControls input {
  font-size: 1em;
}

/* Dictionary popup */
#dictPopup .dictZh {
  min-width: 60px;
  font-size: 20px;
}
#dictPopup .dictZp {
  /*min-width: 70px;*/
}
#dictPopup .dictDef {
  /*max-width: 300px;*/
}
#dictPopup .dictTopRow {
  margin: -30px -50px 14px -30px;
  padding: 10px 40px 0 40px;
  height: auto;
  background-color: #ebebeb;
}
#dictPopup .dictDefs {
  margin-top: 8px;
  padding: 0 10px 0 10px;
  font-size: 20px;
}
#dictPopup .dictDef {
  display: block;
}
#dictPopup .dictRelatedWords .dictTopRow {
  background-color: inherit;
  border-bottom: none;
}
#dictPopup .dictRelatedWords .dictTopRow .dictDefSummary {
  display: inline-block;
}
#dictPopup .dictAnimateChar {
  display: inline-block;
  width: 70px;
  height: 70px;
  margin: 0 0 0 -10px;
  cursor: pointer;
}
@media (min-width: 480px) and (max-width: 768px) {
  #dictPopup .dictAnimateChar {
    width: 60px;
    height: 60px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #dictPopup .dictAnimateChar {
    width: 50px;
    height: 50px;
  }
}
@media only screen and (max-width: 375px) {
  #dictPopup .dictAnimateChar {
    width: 40px;
    height: 40px;
  }
}
#dictPopup p {
  padding-bottom: 0;
  font-size: 1em;
}
@media only screen and (min-width: 1920px) {
  #dictPopup p {
    font-size: 1em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #dictPopup p {
    font-size: 1em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #dictPopup p {
    font-size: 1em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #dictPopup p {
    font-size: 1em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #dictPopup p {
    font-size: 1 em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #dictPopup p {
    font-size: 1 em;
  }
}
@media only screen and (max-width: 375px) {
  #dictPopup p {
    font-size: 0.9 em;
  }
}

#dictPopup .dictUsage p {
  padding-bottom: 12px;
}

/*-------------------------------------------------- */
/* CONTENTS PAGE */
/*-------------------------------------------------- */
#pagecontents {
  /* REX */
  overflow: auto;
  position: relative;
  /* REX */
  grid-area: pagecontents;
  /* overflow: auto; */
  /*#pageInnerContent {*/
}
#pagecontents .bodyImage {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}
#pagecontents .pageContentsChapter {
  display: grid;
  height: 100%;
  position: relative; /* REX: FOR PAGE ANIMATION */
  grid-template-columns: 70px auto 70px;
  grid-template-rows: 34px auto 90px 0 30px;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-areas: "settings settings settings" "pageleftnav pagebody pagerightnav" "audionav audionav audionav" "grammarenglish grammarenglish grammarenglish" "chapternav chapternav chapternav";
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter {
    grid-template-columns: 70px auto 70px;
    grid-template-rows: 34px auto 90px 0 30px;
    grid-template-areas: "settings settings settings" "pageleftnav pagebody pagerightnav" "audionav audionav audionav" "grammarenglish grammarenglish grammarenglish" "chapternav chapternav chapternav";
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter {
    grid-template-columns: 70px auto 70px;
    grid-template-rows: 34px auto 90px 0 30px;
    grid-template-areas: "settings settings settings" "pageleftnav pagebody pagerightnav" "audionav audionav audionav" "grammarenglish grammarenglish grammarenglish" "chapternav chapternav chapternav";
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter {
    grid-template-columns: 70px auto 70px;
    grid-template-rows: 34px auto 80px 0 30px;
    grid-template-areas: "settings settings settings" "pageleftnav pagebody pagerightnav" "audionav audionav audionav" "grammarenglish grammarenglish grammarenglish" "chapternav chapternav chapternav";
  }
}
#pagecontents .pageContentsChapter {
  /*@include responsive(medium-screens) { 
  	grid-template-columns: 70px auto 70px;
  	grid-template-rows: 20px auto 0px 50px;
  	grid-template-areas:
  		"chaptitle chaptitle chaptitle"
  		"pagebody pagebody pagebody"
  		"grammarenglish grammarenglish grammarenglish"
  		"settings settings settings";
  	}*/
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter {
    grid-template-columns: 70px auto 70px;
    /*grid-template-rows: 20px auto 0px 50px;*/
    grid-template-rows: 34px auto 70px 0 30px;
    grid-template-areas: "settings settings settings" "pageleftnav pagebody pagerightnav" "audionav audionav audionav" "grammarenglish grammarenglish grammarenglish" "chapternav chapternav chapternav";
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter {
    grid-template-columns: 70px auto 70px;
    grid-template-rows: 20px auto 0px 50px;
    grid-template-areas: "chaptitle chaptitle chaptitle" "pagebody pagebody pagebody" "grammarenglish grammarenglish grammarenglish" "settings settings settings";
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter {
    grid-template-columns: 70px auto 70px;
    grid-template-rows: 20px auto 0px 50px;
    grid-template-areas: "chaptitle chaptitle chaptitle" "pagebody pagebody pagebody" "grammarenglish grammarenglish grammarenglish" "settings settings settings";
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter {
    grid-template-columns: 70px auto 70px;
    grid-template-rows: 20px auto 0px 50px;
    grid-template-areas: "chaptitle chaptitle chaptitle" "pagebody pagebody pagebody" "grammarenglish grammarenglish grammarenglish" "settings settings settings";
  }
}
#pagecontents .pageContentsChapter.grammarOpen {
  grid-template-rows: 34px auto 90px 240px 30px;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter.grammarOpen {
    grid-template-rows: 34px auto 90px 240px 30px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter.grammarOpen {
    grid-template-rows: 34px auto 90px 240px 30px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter.grammarOpen {
    grid-template-rows: 34px auto 90px 240px 30px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter.grammarOpen {
    grid-template-rows: 34px auto 90px 240px 30px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter.grammarOpen {
    grid-template-rows: 25px auto 220px 50px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter.grammarOpen {
    grid-template-rows: 20px auto 220px 50px;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter.grammarOpen {
    grid-template-rows: 20px auto 220px 50px;
  }
}
#pagecontents .pageContentsChapter.englishOpen {
  grid-template-rows: 34px auto 90px 0 30px;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter.englishOpen {
    grid-template-rows: 34px auto 90px 0 30px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter.englishOpen {
    grid-template-rows: 34px auto 90px 0 30px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter.englishOpen {
    grid-template-rows: 34px auto 90px 0 30px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter.englishOpen {
    grid-template-rows: 34px auto 90px 0 30px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter.englishOpen {
    grid-template-rows: 25px auto 220px 50px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter.englishOpen {
    grid-template-rows: 20px auto 220px 50px;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter.englishOpen {
    grid-template-rows: 20px auto 220px 50px;
  }
}
#pagecontents .pageContentsChapter {
  /*#pgbsParaSelectorContainer {*/
  /*#chapternavleft {
  	display: grid;
  	grid-area: chapternavleft;
  	grid-template-columns: 115px 10px 85px;
  	grid-template-rows: 30px 30px;
  	grid-gap: 0;
  	}*/
  /*#chapternavright {
  	grid-area: chapternavright;
  	span { 
  		display: block;
  		width: 100%;
  		height: 30px;
  		background-color: $color_ltgrey;
  		}
  	}*/
}
#pagecontents .pageContentsChapter .settingsTop {
  position: fixed;
  width: 100%;
  height: 34px;
  grid-area: settings;
  display: grid;
  grid-template-areas: "chaptitle settingsnav";
  background-color: #ebebeb;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter .settingsTop {
    height: 34px;
    display: grid;
    grid-template-areas: "chaptitle settingsnav";
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter .settingsTop {
    height: 34px;
    display: grid;
    grid-template-areas: "chaptitle settingsnav";
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter .settingsTop {
    height: 34px;
    display: grid;
    grid-template-areas: "chaptitle settingsnav";
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter .settingsTop {
    height: 34px;
    display: grid;
    grid-template-areas: "chaptitle settingsnav";
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter .settingsTop {
    height: 24px;
    display: grid;
    grid-template-areas: "chaptitle";
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter .settingsTop {
    height: 24px;
    display: grid;
    grid-template-areas: "chaptitle";
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter .settingsTop {
    height: 24px;
    display: grid;
    grid-template-areas: "chaptitle";
  }
}
#pagecontents .pageContentsChapter .settingsTop {
  /*@include responsive(small-screens) { display: none; }
  @include responsive(xsmall-screens) { display: none; }
  @include responsive(mobile-screens) { display: none; }*/
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav {
  grid-area: settingsnav;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: right;
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter .settingsTop .settingsnav {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter .settingsTop .settingsnav {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter .settingsTop .settingsnav {
    display: none;
  }
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p {
  padding: 0 20px 0 0;
  color: #333;
  font-size: 0.86em;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter .settingsTop .settingsnav p {
    font-size: 0.86em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter .settingsTop .settingsnav p {
    font-size: 0.86em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter .settingsTop .settingsnav p {
    font-size: 0.86em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter .settingsTop .settingsnav p {
    font-size: 0.8em;
  }
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p {
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink {
  display: inline-block;
  margin-top: -5px;
  padding-left: 20px;
  cursor: pointer;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink a, #pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink a:visited {
  color: #333;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink a:hover, #pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink a:active {
  color: #000;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink:hover {
  color: #000;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink .toggle {
  display: inline-block;
  padding: 2px;
  margin-bottom: -5px;
  width: 30px;
  height: 16px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: #999;
  overflow: hidden;
  transition-duration: 0.2s;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink .toggle .dot {
  display: inline-block;
  float: left;
  margin: 0;
  width: 16px;
  height: 16px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  transition-duration: 0.3s;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink .toggle.on {
  background-color: #668fbc;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink .toggle.on .dot {
  margin-left: 7px;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink:hover .toggle {
  background-color: #aaa;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink.langSetting.selected .toggle, #pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink.showGrammar .toggle {
  background-color: #668fbc;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink.langSetting.selected .toggle .dot, #pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink.showGrammar .toggle .dot {
  margin-left: 14px;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink.langSetting.selected:hover .toggle, #pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink.showGrammar:hover .toggle {
  background-color: #668fbc;
}
#pagecontents .pageContentsChapter .settingsTop .settingsnav p .setlink img {
  float: right;
  margin-top: -5px;
  padding-left: 6px;
  height: 22px;
}
#pagecontents .pageContentsChapter .settingsBtm {
  /*position: relative;*/
  position: fixed;
  width: 100%;
  height: 60px;
  bottom: 0;
  left: -20px;
  padding: 0 20px 0 20px; /* intentionally making this div 40px wider than 100% */
  grid-area: settings;
  display: grid;
  /*grid-template-columns: 20px 1fr 1fr 1fr 20px;*/
  grid-template-areas: "btmleftmargin setlink1 setlink2 setlink3 btmrightmargin";
  border-top: 4px solid #fff;
  background-color: #ebebeb;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  /* grid-column-gap: 6px; */
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter .settingsBtm {
    display: none;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter .settingsBtm {
    display: none;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter .settingsBtm {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter .settingsBtm {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter .settingsBtm {
    display: grid;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter .settingsBtm {
    display: grid;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter .settingsBtm {
    display: grid;
  }
}
#pagecontents .pageContentsChapter .settingsBtm .setlink1 {
  grid-area: setlink1;
  background-color: #ebebeb;
  flex-direction: column;
}
#pagecontents .pageContentsChapter .settingsBtm .setlink2 {
  grid-area: setlink2;
  background-color: #ebebeb;
  flex-direction: row;
}
#pagecontents .pageContentsChapter .settingsBtm .setlink3 {
  grid-area: setlink3;
  background-color: #ebebeb;
  flex-direction: column;
}
#pagecontents .pageContentsChapter .settingsBtm .setlinkbtm {
  display: flex;
  justify-content: center;
  color: #333;
  font-size: 1em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
#pagecontents .pageContentsChapter .settingsBtm .setlinkbtm.ftrGrammarLink, #pagecontents .pageContentsChapter .settingsBtm .setlinkbtm.ftrEnglishLink {
  cursor: pointer;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter .settingsBtm .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter .settingsBtm .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter .settingsBtm .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter .settingsBtm .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter .settingsBtm .setlinkbtm {
    font-size: 1em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter .settingsBtm .setlinkbtm {
    font-size: 0.9em;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter .settingsBtm .setlinkbtm {
    font-size: 0.9em;
  }
}
#pagecontents .pageContentsChapter .settingsBtm .setlinkbtm img {
  width: 15px;
  height: 10px;
}
#pagecontents .pageContentsChapter .settingsBtm .setlinkbtm img.off {
  display: inline-block;
}
#pagecontents .pageContentsChapter .settingsBtm .setlinkbtm img.on {
  display: none;
}
#pagecontents .pageContentsChapter .settingsBtm .setlinkbtm.ftrEnglishLink.on img.off {
  display: none;
}
#pagecontents .pageContentsChapter .settingsBtm .setlinkbtm.ftrEnglishLink.on img.on {
  display: inline-block;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr, #pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr, #pagecontents .pageContentsChapter .settingsBtm .audionavftr {
  display: inline-block;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr.hidden img, #pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr.hidden img, #pagecontents .pageContentsChapter .settingsBtm .audionavftr.hidden img {
  opacity: 0;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr.hidden .pageAdv, #pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr.hidden .pageAdv, #pagecontents .pageContentsChapter .settingsBtm .audionavftr.hidden .pageAdv {
  cursor: default;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr, #pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr, #pagecontents .pageContentsChapter .settingsBtm .audionavftr {
  margin: auto 0;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr img, #pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr img, #pagecontents .pageContentsChapter .settingsBtm .audionavftr img {
  width: 38px;
  height: 38px;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr .pageAdv .on, #pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr .pageAdv .on, #pagecontents .pageContentsChapter .settingsBtm .audionavftr .pageAdv .on {
  display: none;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr .pageAdv .off, #pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr .pageAdv .off, #pagecontents .pageContentsChapter .settingsBtm .audionavftr .pageAdv .off {
  display: inline-block;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr .pageAdv:hover .on, #pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr .pageAdv:hover .on, #pagecontents .pageContentsChapter .settingsBtm .audionavftr .pageAdv:hover .on {
  display: inline-block;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr .pageAdv:hover .off, #pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr .pageAdv:hover .off, #pagecontents .pageContentsChapter .settingsBtm .audionavftr .pageAdv:hover .off {
  display: none;
}
#pagecontents .pageContentsChapter .settingsBtm .audionavftr img {
  width: 48px;
  height: 48px;
}
#pagecontents .pageContentsChapter .settingsBtm .pageleftnavftr img {
  padding-right: 10px;
}
#pagecontents .pageContentsChapter .settingsBtm .pagerightnavftr img {
  padding-left: 10px;
}
#pagecontents .pageContentsChapter .settingsBtm .audionavftr .audioCtrl .on {
  display: none;
}
#pagecontents .pageContentsChapter .settingsBtm .audionavftr .audioCtrl .off {
  display: block;
}
#pagecontents .pageContentsChapter .settingsBtm .audionavftr .audioCtrl.selected .on, #pagecontents .pageContentsChapter .settingsBtm .audionavftr .audioCtrl:hover .on {
  display: block;
}
#pagecontents .pageContentsChapter .settingsBtm .audionavftr .audioCtrl.selected .off, #pagecontents .pageContentsChapter .settingsBtm .audionavftr .audioCtrl:hover .off {
  display: none;
}
#pagecontents .pageContentsChapter .chaptitle {
  grid-area: chaptitle;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#pagecontents .pageContentsChapter .chaptitle p {
  margin: 0;
  padding: 0 0 0 30px;
  color: #333;
  font-size: 0.9em;
  line-height: 1em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter .chaptitle p {
    padding: 0 0 0 30px;
    font-size: 0.9em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter .chaptitle p {
    padding: 0 0 0 30px;
    font-size: 0.9em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter .chaptitle p {
    padding: 0 0 0 30px;
    font-size: 0.9em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter .chaptitle p {
    padding: 0 0 2px 30px;
    font-size: 0.8em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter .chaptitle p {
    padding: 0 0 2px 30px;
    font-size: 0.8em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter .chaptitle p {
    padding: 0 0 2px 30px;
    font-size: 0.8em;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter .chaptitle p {
    padding: 0 0 2px 30px;
    font-size: 0.8em;
  }
}
#pagecontents .pageContentsChapter .chaptitle p span {
  display: inline-block;
  color: #da291c;
  padding-left: 2px;
}
#pagecontents .pageContentsChapter .chaptitle span.pgnum {
  color: #000;
  text-transform: none;
  padding-left: 10px;
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}
#pagecontents .pageContentsChapter #chapterstart { /* REX: this is the grid area that is used for chapter title on first page of a chapter only */
  grid-area: chapterstart;
  position: relative;
  display: none;
  margin: 40px 0 10px 60px;
  padding: 0 60px 0 20px;
  border-left: 6px solid #ebebeb;
}
#pagecontents .pageContentsChapter #chapterstart h2 {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1em;
  line-height: 1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #333;
}
#pagecontents .pageContentsChapter #chapterstart h2 span {
  color: #da291c;
}
#pagecontents .pageContentsChapter #chapterstart h3 {
  position: relative;
  margin: 0;
  padding: 8px 0 0 0;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 1em;
  color: #da291c;
}
#pagecontents .pageContentsChapter .chaptertitle {
  display: block;
  position: relative;
  margin: 10px 0 10px 6px;
  padding: 0 60px 0 0;
}
#pagecontents .pageContentsChapter .chaptertitle .dictPopup {
  margin: 0;
}
#pagecontents .pageContentsChapter .chaptertitle .zpbox {
  padding: 1px 0 1px 0;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter .chaptertitle {
    display: block;
    margin: 10px 0 10px 6px;
    padding: 0 60px 0 0;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter .chaptertitle {
    display: block;
    margin: 10px 0 10px 6px;
    padding: 0 60px 0 0;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter .chaptertitle {
    display: block;
    margin: 10px 0 10px 6px;
    padding: 0 60px 0 0;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter .chaptertitle {
    display: block;
    margin: 10px 0 10px 6px;
    padding: 0;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter .chaptertitle {
    display: block;
    margin: 10px 0 10px 6px;
    padding: 0;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter .chaptertitle {
    display: block;
    margin: 10px 0 5px 6px;
    padding: 0;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter .chaptertitle {
    display: block;
    margin: 10px 0 0 6px;
    padding: 0;
  }
}
#pagecontents .pageContentsChapter .chaptertitle h2 {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #da291c;
}
#pagecontents .pageContentsChapter .chaptertitle h2 span {
  display: inline-block;
  padding-right: 4px;
  color: #333;
}
#pagecontents .pageContentsChapter .chaptertitle h3 {
  position: relative;
  margin: 0;
  padding: 8px 0 0 0;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 1em;
  color: #da291c;
}
#pagecontents .pageContentsChapter .chaptertitle h3 .paraParaEn {
  display: none;
}
#pagecontents .pageContentsChapter .chaptertitle .en {
  font-size: 1.1em;
  text-transform: uppercase;
  font-weight: bold;
  color: #da291c;
  letter-spacing: 0.04em;
}
#pagecontents .pageContentsChapter .chaptertitle .en span {
  display: inline-block;
  padding-right: 4px;
  color: #333;
}
#pagecontents .pageContentsChapter .chaptertitle_end {
  clear: both;
}
#pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title {
  grid-area: chapterstart;
  display: inline-block;
  position: relative;
  padding-left: 20px;
  border-left: 6px solid #ebebeb !important;
  margin-bottom: 40px;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title {
    padding-left: 20px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title {
    padding-left: 20px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title {
    padding-left: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title {
    padding-left: 16px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title {
    padding-left: 12px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title {
    padding-left: 10px;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title {
    padding-left: 10px;
  }
}
#pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title .zhpZh {
  display: none;
}
#pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title .paraPhrase {
  position: relative;
  display: block;
}
#pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title .paraPhrase .zhpBlock {
  margin: 0;
  display: inline-block;
}
#pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title .paraPhrase .zhpBlock.dictPopup:first-child .zhpZp {
  color: #333;
}
#pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title .paraPhrase .zhpBlock.dictPopup:first-child .zhpZp::before {
  content: "Chapter ";
}
#pagecontents .pageContentsChapter .paraSeg.paraPara.paraParaZhp.title .paraPhrase .zhpBlock.dictPopup div {
  margin: 0;
  color: #da291c;
  font-size: 0.6em;
  line-height: 1em;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#pagecontents .pageContentsChapter #chapternav {
  z-index: 4500;
  position: relative;
  display: grid;
  margin-top: -8px;
  margin-right: -6px;
  overflow: hidden;
  grid-area: chapternav;
  /* "grid-template-columns" style attribute will be added from the JS file */
  grid-template-rows: 30px; /* why do we need grid here? */
  grid-gap: 0;
  background-color: #fff;
  border-top: 2px solid #fff;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter #chapternav {
    display: grid;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter #chapternav {
    display: grid;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter #chapternav {
    display: grid;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter #chapternav {
    display: grid;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter #chapternav {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter #chapternav {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter #chapternav {
    display: none;
  }
}
#pagecontents .pageContentsChapter {
  /*.pgbsParaSelector {*/
}
#pagecontents .pageContentsChapter .chapternavbox {
  position: relative;
  display: flex;
  padding: 10px;
  height: 10px;
  justify-content: center;
  flex-direction: column;
  background-color: #e0e0e0;
  cursor: pointer;
}
#pagecontents .pageContentsChapter .chapternavbox .chapternumber {
  position: relative;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1em;
}
#pagecontents .pageContentsChapter .chapternavbox .chapterprogressfill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #668fbc;
}
#pagecontents .pageContentsChapter .chapternavbox.completed .chapternumber {
  color: #fff;
}
#pagecontents .pageContentsChapter .chapternavbox.completed .chapterprogressfill {
  width: 100%;
}
#pagecontents .pageContentsChapter .chapternavbox.completed .exLink span {
  background-color: #a3bcd4;
  opacity: 1;
}
#pagecontents .pageContentsChapter .chapternavbox.selected .chapternumber {
  color: #fff;
}
#pagecontents .pageContentsChapter .chapternavbox:hover {
  background-color: #668fbc;
}
#pagecontents .pageContentsChapter .chapternavbox:hover .chapternumber {
  color: #fff;
}
#pagecontents .pageContentsChapter .chapternavbox:hover .exLink span {
  background-color: #a3bcd4;
  opacity: 1;
}
#pagecontents .pageContentsChapter .chapternavbox .exLink {
  position: absolute;
  top: 0;
  right: 0;
  padding: 9px;
  width: 12px;
  height: 12px;
  cursor: pointer;
}
#pagecontents .pageContentsChapter .chapternavbox .exLink span {
  display: inline-block;
  float: left;
  width: 4px;
  height: 4px;
  margin: 1px;
  background-color: #aaa;
  opacity: 0.75;
}
#pagecontents .pageContentsChapter .chapternavbox .exLink:hover {
  background-color: #a3bcd4;
  border-left: 2px solid #fff;
  opacity: 1;
}
#pagecontents .pageContentsChapter .chapternavbox .exLink:hover span {
  background-color: #fff;
}
#pagecontents .pageContentsChapter .chapternavbox {
  /*&.contents {
  	grid-column-start: toc-start;
  	grid-column-end: toc-end;
  	padding-left: 17px
  	}
  &.cast { grid-column-start: cast-start; grid-column-end: cast-end; }*/
  /* REX: this next part is temporary until the number of chapters is corrected */
}
#pagecontents .pageContentsChapter .chapternavbox.ch9, #pagecontents .pageContentsChapter .chapternavbox.ch10, #pagecontents .pageContentsChapter .chapternavbox.ch11, #pagecontents .pageContentsChapter .chapternavbox.ch12, #pagecontents .pageContentsChapter .chapternavbox.ch13, #pagecontents .pageContentsChapter .chapternavbox.ch14, #pagecontents .pageContentsChapter .chapternavbox.ch15, #pagecontents .pageContentsChapter .chapternavbox.ch16, #pagecontents .pageContentsChapter .chapternavbox.ch17, #pagecontents .pageContentsChapter .chapternavbox.ch18, #pagecontents .pageContentsChapter .chapternavbox.ch19, #pagecontents .pageContentsChapter .chapternavbox.ch20, #pagecontents .pageContentsChapter .chapternavbox.ch21, #pagecontents .pageContentsChapter .chapternavbox.ch22, #pagecontents .pageContentsChapter .chapternavbox.ch23, #pagecontents .pageContentsChapter .chapternavbox.ch24, #pagecontents .pageContentsChapter .chapternavbox.ch25, #pagecontents .pageContentsChapter .chapternavbox.ch26, #pagecontents .pageContentsChapter .chapternavbox.ch27, #pagecontents .pageContentsChapter .chapternavbox.ch28, #pagecontents .pageContentsChapter .chapternavbox.ch29, #pagecontents .pageContentsChapter .chapternavbox.ch30 {
  display: none;
}
#pagecontents .pageContentsChapter #chaptertitle {
  grid-area: chaptertitle;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #333;
  padding: 50px 110px 0 120px;
}
#pagecontents .pageContentsChapter #chaptertitle .chaptitle {
  display: flex;
  align-items: center;
  color: #da291c;
}
#pagecontents .pageContentsChapter #chaptertitle .chapbookTitleChapZh {
  padding-top: 10px;
  padding-right: 10px;
  font-size: 2.4em;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0em;
}
#pagecontents .pageContentsChapter #chaptertitle .chapbookTitleChapEn {
  padding-top: 10px;
  font-size: 1.6em;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0em;
}
#pagecontents .pageContentsChapter {
  /* REX */
}
#pagecontents .pageContentsChapter #pagebody, #pagecontents .pageContentsChapter .pagebody2 {
  grid-area: pagebody;
  position: relative;
  grid-column-end: 4;
  padding: 80px 120px 30px 50px;
  height: calc(100% - 110px);
  overflow: auto;
}
@media only screen and (min-width: 1920px) {
  #pagecontents .pageContentsChapter #pagebody, #pagecontents .pageContentsChapter .pagebody2 {
    padding: 80px 120px 40px 50px;
    height: calc(100% - 110px);
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #pagecontents .pageContentsChapter #pagebody, #pagecontents .pageContentsChapter .pagebody2 {
    padding: 70px 120px 40px 50px;
    height: calc(100% - 100px);
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #pagecontents .pageContentsChapter #pagebody, #pagecontents .pageContentsChapter .pagebody2 {
    padding: 50px 120px 40px 50px;
    height: calc(100% - 80px);
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #pagecontents .pageContentsChapter #pagebody, #pagecontents .pageContentsChapter .pagebody2 {
    padding: 30px 80px 40px 10px;
    height: calc(100% - 60px);
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter #pagebody, #pagecontents .pageContentsChapter .pagebody2 {
    padding: 25px 30px 50px 25px;
    height: calc(100% - 75px);
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter #pagebody, #pagecontents .pageContentsChapter .pagebody2 {
    padding: 25px 30px 50px 25px;
    height: calc(100% - 75px);
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter #pagebody, #pagecontents .pageContentsChapter .pagebody2 {
    padding: 25px 30px 50px 25px;
    height: calc(100% - 75px);
  }
}
#pagecontents .pageContentsChapter .pageleftnav {
  grid-area: pageleftnav;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#pagecontents .pageContentsChapter .pagerightnav {
  grid-area: pagerightnav;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#pagecontents .pageContentsChapter .audionav {
  grid-area: audionav;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#pagecontents .pageContentsChapter .pageleftnav.hidden, #pagecontents .pageContentsChapter .pagerightnav.hidden, #pagecontents .pageContentsChapter .audionav.hidden {
  display: none;
}
@media (min-width: 480px) and (max-width: 768px) {
  #pagecontents .pageContentsChapter .pageleftnav, #pagecontents .pageContentsChapter .pagerightnav, #pagecontents .pageContentsChapter .audionav {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #pagecontents .pageContentsChapter .pageleftnav, #pagecontents .pageContentsChapter .pagerightnav, #pagecontents .pageContentsChapter .audionav {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  #pagecontents .pageContentsChapter .pageleftnav, #pagecontents .pageContentsChapter .pagerightnav, #pagecontents .pageContentsChapter .audionav {
    display: none;
  }
}

/*
#pagecontents.firstpage .pageContentsChapter {
	grid-template-rows: 34px minmax(0, 110px) auto 90px 30px;
	@include responsive(xwide-screens) {
		grid-template-rows: 34px minmax(0, 110px) auto 90px 30px;
		}
	@include responsive(wide-screens) { 
		grid-template-rows: 34px minmax(0, 110px) auto 90px 30px;
		}
	@include responsive(large-screens) { 
		grid-template-rows: 34px minmax(0, 110px) auto 90px 30px; 
		}
	@include responsive(medium-screens) { 
		grid-template-rows: 34px minmax(0, 110px) auto 80px 30px; 
		}
	@include responsive(small-screens) { 
		grid-template-rows: 34px minmax(0, 110px) auto 80px 30px; 
		}
	@include responsive(xsmall-screens) { 
		grid-template-rows: 34px minmax(0, 110px) auto 80px 30px; 
		}
	@include responsive(mobile-screens) { 
		grid-template-rows: 34px minmax(0, 110px) auto 80px 30px; 
		}
	#settings .chaptitle {
		display: none;
		}
	#chapterstart {
		display: block;
		}
	#pagebody, .pagebody2 { padding: 20px 50px 30px 50px; }
}
*/
/* REX */
/*
.pagebody2 {
	position: absolute;
	top: 30px;
	left: 0;
}
*/
/* REX */
/* REX */
/* NEED TO REVIEW THESE STYLES: */
/*p.tableOfContents {
  font-size:22px;
  background-color: $color_black;
  color: $color_white;
  margin: 0;
  padding: 0 10px 0 10px;
}
.contentsChapter {
  padding: 8px 10px 8px 10px;
  border-top: 1px solid $color_medgrey;
  border-bottom: 1px solid $color_medgrey;
  background-color: $color_contentsChapter;

  &.disabled {
    background-color: $color_contentsChapter_disabled;
    color: $color_medgrey;
  }
  &:hover {
    background-color: $color_white;
  }
  &.disabled:hover {
    background-color: color_contentsChapter_hover;
  }
}*/
/*.contentsTitleZh {
  font-size: 20px;
}
.contentsTitleZp, .contentsTitleEn {
}*/
/*-------------------------------------------------- */
/* PARAGRAPH STYLES */
/*-------------------------------------------------- */
/* font sizing based on settings */
/*
.fontsize-xs {
	.paraPara, .paraCast { font-size: 12px; }
	.paraParaEn { font-size: 12px; }
	}
.fontsize-s {
	.paraPara, .paraCast { font-size: 16px; }
	.paraParaEn { font-size: 16px; }
	}
.fontsize-m {
	.paraPara, .paraCast { font-size: 20px; }
	.paraParaEn { font-size: 20px; }
	}
.fontsize-l {
	.paraPara, .paraCast { font-size: 24px; }
	.paraParaEn { font-size: 24px; }
	}
.fontsize-xl {
	.paraPara, .paraCast { font-size: 28px; }
	.paraParaEn { font-size: 28px; }
	}*/
/* paragraphs */
/*.paraPara {
	margin-bottom: 8px;
	}*/
/*.paraParaZh {
	display: inline-block;*/
/*  margin-bottom: 4px; */
/*}*/
/*.paraParaZp {
	display: inline-block;*/
/*  margin-bottom: 4px; */
/*	}
.paraSeg.title {
	font-style: bold;
	font-size: 2em;
	}*/
/*.paraParaEn {
  font-size: 20px;
  margin-bottom: 4px;
  padding: 2px 6px;
  background-color: $color_para_en_bkg;
  border: 1px solid $color_medgrey;
}*/
/*.paraPara {
  margin-top: 20px;
  .inline {display: inline;}
}
.paraNew {
  height: 20px;
}*/
/*
.paraPara.playing {
  background-color: linen;
}
*/
/*.paraBreak {
  margin-bottom: 20px;
}
img.bodyImage {
  display: block;
  margin: 15px auto 15px auto;
  width: 80%;
  max-width: 600px;
}*/
/* Hilighting chapter audio */
/*.paraPhrase {
  display: inline;
}*/
/*
.paraParaZhp.playing .paraPhrase.playing .zhpZh {
  background-color: $color_ltblack;
}
.paraParaZhp.playing .paraPhrase.playing .zhpZp {
  background-color: $color_ltblack;
  color: $color_white;
}
.paraParaZp.playing .paraPhrase.playing {
  background-color: $color_ltblack;
  color: $color_white;
}
.paraParaZh.playing .paraPhrase.playing {
  background-color: $color_ltblack;
  color: $color_white;
}
.paraParaZhp.playing .paraPhrase.playing .zhpBlock .zhpZp {
  color: $color_zhpblock_audio_hilite_text;
}
.paraParaZhp.playing .paraPhrase.playing .zhpBlock .zhpZh {
  color: $color_white;
}
*/
/* THESE ARE REPLACEMENTS FOR ABOVE, FOR BS PAGES */
/*
.paraParaZhp .paraPhrase.playing .zhpZh {
  background-color: $color_ltblack;
}
.paraParaZhp .paraPhrase.playing .zhpZp {
  background-color: $color_ltblack;
  color: $color_white;
}
.paraParaZp .paraPhrase.playing {
  background-color: $color_ltblack;
  color: $color_white;
}
.paraParaZh .paraPhrase.playing {
  background-color: $color_ltblack;
  color: $color_white;
}
.paraParaZhp .paraPhrase.playing .zhpBlock .zhpZp {
  color: $color_zhpblock_audio_hilite_text;
}
.paraParaZhp .paraPhrase.playing .zhpBlock .zhpZh {
  color: $color_white;
}*/
/* Cast member paragraphs */
/*.paraCast {
  clear: both;
}
.paraCastImgDiv {
  float: left;
  margin-right: 10px;
}
.paraCastImgDiv img {
  width: 80px;
}
.paraCastTextDiv {
  padding-top: 10px;
}
.paraCastEn {
  margin-top: 15px;
}*/
/* Text paragraph */
/*
.paraText {
  clear: both;
}
.fontsize-xs .paraText { font-size: 12px; }
.fontsize-s .paraText { font-size: 16px; }
.fontsize-m .paraText { font-size: 20px; }
.fontsize-l .paraText { font-size: 24px; }
.fontsize-xl .paraText { font-size: 28px; }
.paraText.title {
  font-style: bold;
  font-size: 2em;
}
.paraText.subtitle {
  font-style: bold;
  font-size: 1.5em;
}

*/
/*-------------------------------------------------- */
/* LIBRARY PAGE STYLES */
/*-------------------------------------------------- */
.librarycontainer {
  grid-area: allbooks;
}

.library {
  display: grid;
  margin-right: 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
@media only screen and (min-width: 1920px) {
  .library {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .library {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .library {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .library {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .library {
    display: block;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .library {
    display: block;
  }
}
@media only screen and (max-width: 375px) {
  .library {
    display: block;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .library.store {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .library.store {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.storeboxes {
  grid-area: featuredbooks;
}

h2.allbookstitle {
  grid-area: allbookstitle;
  margin: 0 20px 20px 0;
  padding: 8px 15px 8px 30px;
  font-size: 1.2em;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #fff;
  text-align: left;
  background-color: #668fbc;
}
h2.allbookstitle.inlibrary {
  margin-bottom: 30px;
}
@media only screen and (min-width: 1920px) {
  h2.allbookstitle {
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  h2.allbookstitle {
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  h2.allbookstitle {
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  h2.allbookstitle {
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  h2.allbookstitle {
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  h2.allbookstitle {
    padding: 8px 30px 8px 30px;
  }
}
@media only screen and (max-width: 375px) {
  h2.allbookstitle {
    padding: 8px 30px 8px 30px;
  }
}

.libraryfilters {
  grid-area: bookfilters;
  display: block;
  position: relative;
  margin: 0 0 30px 0;
  height: 100%;
  width: 250px;
}
.libraryfilters h4, .libraryfilters h5 {
  clear: both;
  margin: 0;
  padding: 30px 0 2px 20px;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #668fbc;
  border-left: 6px solid #ebebeb;
}
.libraryfilters h4.top, .libraryfilters h5.top {
  padding-top: 0;
}
@media only screen and (min-width: 1920px) {
  .libraryfilters h4, .libraryfilters h5 {
    padding: 30px 0 2px 20px;
    border-left: 6px solid #ebebeb;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .libraryfilters h4, .libraryfilters h5 {
    padding: 30px 0 2px 20px;
    border-left: 6px solid #ebebeb;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .libraryfilters h4, .libraryfilters h5 {
    padding: 30px 0 2px 20px;
    border-left: 6px solid #ebebeb;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .libraryfilters h4, .libraryfilters h5 {
    padding: 30px 0 2px 20px;
    border-left: 6px solid #ebebeb;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .libraryfilters h4, .libraryfilters h5 {
    padding: 30px 0 2px 0;
    border-left: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .libraryfilters h4, .libraryfilters h5 {
    padding: 30px 0 2px 0;
    border-left: none;
  }
}
@media only screen and (max-width: 375px) {
  .libraryfilters h4, .libraryfilters h5 {
    padding: 30px 0 2px 0;
    border-left: none;
  }
}
.libraryfilters h5 {
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 0.85em;
  padding-top: 24px;
  padding-bottom: 0;
}
.libraryfilters p {
  float: none;
  padding: 4px 0 0 42px;
  font-family: "AvenirNextWorldLight", helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
  border-left: 6px solid #ebebeb;
}
.libraryfilters p input {
  position: absolute;
  margin: 6px 0 0 -22px;
}
@media only screen and (min-width: 1920px) {
  .libraryfilters p {
    float: none;
    padding: 4px 0 0 42px;
    border-left: 6px solid #ebebeb;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .libraryfilters p {
    float: none;
    padding: 4px 0 0 42px;
    border-left: 6px solid #ebebeb;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .libraryfilters p {
    float: none;
    padding: 4px 0 0 42px;
    border-left: 6px solid #ebebeb;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .libraryfilters p {
    float: none;
    padding: 4px 0 0 42px;
    border-left: 6px solid #ebebeb;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .libraryfilters p {
    float: left;
    padding: 4px 12px 0 0;
    border-left: none;
  }
  .libraryfilters p input {
    position: relative;
    margin: 0;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .libraryfilters p {
    float: left;
    padding: 4px 12px 0 0;
    border-left: none;
  }
  .libraryfilters p input {
    position: relative;
    margin: 0;
  }
}
@media only screen and (max-width: 375px) {
  .libraryfilters p {
    float: left;
    padding: 4px 12px 0 0;
    border-left: none;
  }
  .libraryfilters p input {
    position: relative;
    margin: 0;
  }
}
@media only screen and (min-width: 1920px) {
  .libraryfilters {
    width: 250px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .libraryfilters {
    width: 250px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .libraryfilters {
    width: 230px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .libraryfilters {
    width: 180px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .libraryfilters {
    width: auto;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .libraryfilters {
    width: auto;
  }
}
@media only screen and (max-width: 375px) {
  .libraryfilters {
    width: auto;
  }
}

.bookbox {
  float: left;
  position: relative;
  margin: 0 20px 30px 0;
  padding: 0 15px 30px 30px;
  width: calc(50% - 65px);
  display: grid;
  grid-template-columns: 140px auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-areas: "storebooktitle storebooktitle" "storebookcover storebookdetails";
  background: #cedae6;
  background-color: rgba(206, 218, 230, 0.5);
}
@media only screen and (min-width: 1920px) {
  .bookbox {
    float: left;
    padding: 0 15px 30px 30px;
    width: calc(50% - 65px);
    display: grid;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .bookbox {
    float: left;
    padding: 0 15px 30px 30px;
    width: calc(50% - 65px);
    display: grid;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .bookbox {
    float: left;
    padding: 0 15px 30px 30px;
    width: calc(100% - 65px);
    display: grid;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .bookbox {
    float: left;
    padding: 0 15px 30px 30px;
    width: calc(100% - 65px);
    display: grid;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .bookbox {
    float: none;
    padding: 0 15px 30px 30px;
    width: calc(100% - 65px);
    display: grid;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .bookbox {
    float: none;
    padding: 0 30px 30px 30px;
    width: auto;
    display: block;
  }
}
@media only screen and (max-width: 375px) {
  .bookbox {
    float: none;
    padding: 0 30px 30px 30px;
    width: auto;
    display: block;
  }
}
.bookbox h2 {
  grid-area: storebooktitle;
  display: block;
  margin: 0 -15px 0 -30px;
  padding: 8px 15px 8px 30px;
  font-size: 1.2em;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #fff;
  text-align: left;
  background-color: #668fbc;
}
@media only screen and (min-width: 1920px) {
  .bookbox h2 {
    margin: 0 -15px 0 -30px;
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .bookbox h2 {
    margin: 0 -15px 0 -30px;
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .bookbox h2 {
    margin: 0 -15px 0 -30px;
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .bookbox h2 {
    margin: 0 -15px 0 -30px;
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .bookbox h2 {
    margin: 0 -15px 0 -30px;
    padding: 8px 15px 8px 30px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .bookbox h2 {
    margin: 0 -30px 0 -30px;
    padding: 8px 30px 8px 30px;
  }
}
@media only screen and (max-width: 375px) {
  .bookbox h2 {
    margin: 0 -30px 0 -30px;
    padding: 8px 30px 8px 30px;
  }
}
.bookbox h2 .small {
  display: inline;
}
@media only screen and (min-width: 1920px) {
  .bookbox h2 .small {
    display: inline;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .bookbox h2 .small {
    display: inline;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .bookbox h2 .small {
    display: inline;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .bookbox h2 .small {
    display: inline;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .bookbox h2 .small {
    display: none;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .bookbox h2 .small {
    display: none;
  }
}
@media only screen and (max-width: 375px) {
  .bookbox h2 .small {
    display: none;
  }
}
.bookbox .storebookcover {
  grid-area: storebookcover;
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 220px;
  margin-top: 0;
}
@media only screen and (min-width: 1920px) {
  .bookbox .storebookcover {
    margin-top: 0;
    max-width: 220px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .bookbox .storebookcover {
    margin-top: 0;
    max-width: 220px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .bookbox .storebookcover {
    margin-top: 0;
    max-width: 220px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .bookbox .storebookcover {
    margin-top: 0;
    max-width: 220px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .bookbox .storebookcover {
    margin-top: 0px;
    max-width: 160px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .bookbox .storebookcover {
    margin-top: 10px;
    max-width: 140px;
  }
}
@media only screen and (max-width: 375px) {
  .bookbox .storebookcover {
    margin-top: 10px;
    max-width: 120px;
  }
}
.bookbox .storebookdetails {
  grid-area: storebookdetails;
  position: relative;
  /*display: flex;
  justify-content: center;
  flex-direction: column;*/
  padding: 0 10px 0 0;
}
.bookbox .storebookdetails .btn.buy {
  /*padding: 6px 14px;*/
  font-size: 1em;
}
.bookbox .storebookdetails p.level {
  margin: 0 0 10px 0;
  padding: 10px 0 5px 0;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #668fbc;
  border-bottom: solid 1px #a3bcd4;
  /*@include responsive(xwide-screens) { padding: 30px 0 10px 0; font-size: 0.9em; }
  @include responsive(wide-screens) { padding: 30px 0 10px 0; font-size: 0.9em; }
  @include responsive(large-screens) { padding: 30px 0 10px 0; font-size: 0.9em; }
  @include responsive(medium-screens) { padding: 30px 0 10px 0; font-size: 0.9em; }
  @include responsive(small-screens) { padding: 20px 0 10px 0; font-size: 0.9em; }
  @include responsive(xsmall-screens) { padding: 20px 0 10px 0; font-size: 0.9em; }
  @include responsive(mobile-screens) { padding: 5px 0 5px 0; font-size: 0.8em; }*/
}
.bookbox .storebookdetails h3.libBookTitleEn {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5em;
  line-height: 1.2em;
  margin-bottom: 10px;
}
@media only screen and (min-width: 1920px) {
  .bookbox .storebookdetails h3.libBookTitleEn {
    font-size: 1.5em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .bookbox .storebookdetails h3.libBookTitleEn {
    font-size: 1.5em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .bookbox .storebookdetails h3.libBookTitleEn {
    font-size: 1.4em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .bookbox .storebookdetails h3.libBookTitleEn {
    font-size: 1.3em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .bookbox .storebookdetails h3.libBookTitleEn {
    font-size: 1.3em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .bookbox .storebookdetails h3.libBookTitleEn {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 375px) {
  .bookbox .storebookdetails h3.libBookTitleEn {
    font-size: 1.3em;
  }
}
.bookbox .storebookdetails h3.libBookTitleZh {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.7em;
  line-height: 1.2em;
  /*@include responsive(xwide-screens) { padding: 0 0 12px 0; font-size: 1.2em; }
  @include responsive(wide-screens) { padding: 0 0 12px 0; font-size: 1.2em; }
  @include responsive(large-screens) { padding: 0 0 12px 0; font-size: 1.2em; }
  @include responsive(medium-screens) { padding: 0 0 12px 0; font-size: 1.2em; }
  @include responsive(small-screens) { padding: 0 0 12px 0; font-size: 1.2em; }
  @include responsive(xsmall-screens) { padding: 0 0 6px 0; font-size: 1.1em; }
  @include responsive(mobile-screens) { padding: 0 0 6px 0; font-size: 1.1em; }	*/
}
.bookbox .storebookdetails h3.libBookTitleZp {
  margin: 0;
  padding: 0 0 8px 0;
  font-size: 1.1em;
  color: #333;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media only screen and (min-width: 1920px) {
  .bookbox .storebookdetails h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .bookbox .storebookdetails h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .bookbox .storebookdetails h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .bookbox .storebookdetails h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .bookbox .storebookdetails h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .bookbox .storebookdetails h3.libBookTitleZp {
    font-size: 1em;
  }
}
@media only screen and (max-width: 375px) {
  .bookbox .storebookdetails h3.libBookTitleZp {
    font-size: 1em;
  }
}

.libBookShelf {
  display: grid;
  grid-template-columns: 120px auto;
  grid-column-gap: 30px;
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
  /*border-bottom: solid 1px $color_ltblue;*/
}
@media only screen and (min-width: 1920px) {
  .libBookShelf {
    grid-column-gap: 25px;
    grid-template-columns: 115px auto;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .libBookShelf {
    grid-column-gap: 25px;
    grid-template-columns: 100px auto;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .libBookShelf {
    grid-column-gap: 25px;
    grid-template-columns: 100px auto;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .libBookShelf {
    grid-column-gap: 25px;
    grid-template-columns: 100px auto;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .libBookShelf {
    grid-column-gap: 25px;
    grid-template-columns: 100px auto;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .libBookShelf {
    grid-column-gap: 20px;
    grid-template-columns: 100px auto;
  }
}
@media only screen and (max-width: 375px) {
  .libBookShelf {
    grid-column-gap: 20px;
    grid-template-columns: 100px auto;
  }
}
.libBookShelf .libBookCoverLink, .libBookShelf .v2CoverLink {
  width: 100px;
  grid-column-start: 1;
  grid-column-end: 2;
}
.libBookShelf .libBookCoverLink .libBookCover, .libBookShelf .v2CoverLink .libBookCover {
  width: 100%;
  height: auto;
  -webkit-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.2);
}
.libBookShelf .libBookMeta {
  grid-column-start: 2;
  grid-column-end: 3;
  font-size: 18px;
}
.libBookShelf .libBookMeta p.level {
  margin: 0 0 10px 0;
  padding: 10px 0 5px 0;
  font-family: "AvenirNextWorldBold", helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.7em;
  line-height: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #668fbc;
  border-bottom: solid 1px #cedae6;
}
@media only screen and (min-width: 1920px) {
  .libBookShelf .libBookMeta p.level {
    padding: 10px 0 5px 0;
    font-size: 0.7em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .libBookShelf .libBookMeta p.level {
    padding: 10px 0 5px 0;
    font-size: 0.7em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .libBookShelf .libBookMeta p.level {
    padding: 10px 0 5px 0;
    font-size: 0.7em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .libBookShelf .libBookMeta p.level {
    padding: 10px 0 5px 0;
    font-size: 0.7em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .libBookShelf .libBookMeta p.level {
    padding: 10px 0 5px 0;
    font-size: 0.7em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .libBookShelf .libBookMeta p.level {
    padding: 10px 0 5px 0;
    font-size: 0.7em;
  }
}
@media only screen and (max-width: 375px) {
  .libBookShelf .libBookMeta p.level {
    padding: 5px 0 5px 0;
    font-size: 0.7em;
  }
}
.libBookShelf .libBookMeta p.download {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 8px 0 0 0;
  padding: 10px 0 0 0;
  font-size: 0.8em;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.libBookShelf .libBookMeta p.download input {
  margin-top: 2px;
}
.libBookShelf .libBookMeta p.download span {
  display: inline-block;
}
.libBookShelf .libBookMeta h2.libBookTitleEn {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: "AvenirNextWorldDemi", helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.1em;
  line-height: 1.2em;
  margin-bottom: 4px;
}
@media only screen and (min-width: 1920px) {
  .libBookShelf .libBookMeta h2.libBookTitleEn {
    font-size: 1.1em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .libBookShelf .libBookMeta h2.libBookTitleEn {
    font-size: 1.1em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .libBookShelf .libBookMeta h2.libBookTitleEn {
    font-size: 1.1em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .libBookShelf .libBookMeta h2.libBookTitleEn {
    font-size: 1.1em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .libBookShelf .libBookMeta h2.libBookTitleEn {
    font-size: 1.1em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .libBookShelf .libBookMeta h2.libBookTitleEn {
    font-size: 1.1em;
  }
}
@media only screen and (max-width: 375px) {
  .libBookShelf .libBookMeta h2.libBookTitleEn {
    font-size: 1.1em;
  }
}
.libBookShelf .libBookMeta h2.libBookTitleZh {
  margin: 0;
  padding: 0 0 12px 0;
  color: #333;
  font-family: "Noto Serif SC", STXihei, SimSun, "Microsoft YaHei New", "Microsoft Yahei", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4em;
  line-height: 1.2em;
}
@media only screen and (min-width: 1920px) {
  .libBookShelf .libBookMeta h2.libBookTitleZh {
    padding: 0 0 12px 0;
    font-size: 1.2em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .libBookShelf .libBookMeta h2.libBookTitleZh {
    padding: 0 0 12px 0;
    font-size: 1.2em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .libBookShelf .libBookMeta h2.libBookTitleZh {
    padding: 0 0 12px 0;
    font-size: 1.2em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .libBookShelf .libBookMeta h2.libBookTitleZh {
    padding: 0 0 12px 0;
    font-size: 1.2em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .libBookShelf .libBookMeta h2.libBookTitleZh {
    padding: 0 0 12px 0;
    font-size: 1.2em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .libBookShelf .libBookMeta h2.libBookTitleZh {
    padding: 0 0 6px 0;
    font-size: 1.1em;
  }
}
@media only screen and (max-width: 375px) {
  .libBookShelf .libBookMeta h2.libBookTitleZh {
    padding: 0 0 6px 0;
    font-size: 1.1em;
  }
}
.libBookShelf .libBookMeta h3.libBookTitleZp {
  margin: 0;
  padding: 0 0 12px 0;
  font-size: 1.1em;
  color: #333;
  font-family: "AvenirNextWorldRegular", helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media only screen and (min-width: 1920px) {
  .libBookShelf .libBookMeta h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .libBookShelf .libBookMeta h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .libBookShelf .libBookMeta h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .libBookShelf .libBookMeta h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .libBookShelf .libBookMeta h3.libBookTitleZp {
    font-size: 1.1em;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .libBookShelf .libBookMeta h3.libBookTitleZp {
    font-size: 1em;
  }
}
@media only screen and (max-width: 375px) {
  .libBookShelf .libBookMeta h3.libBookTitleZp {
    font-size: 1em;
  }
}
.libBookShelf .libBookMeta .btn {
  margin-top: 0;
  font-size: 0.7em;
  /*padding: 4px 12px;*/
}
.libBookShelf .libBookMeta .btn.return {
  padding-left: 0;
  color: #707070;
  background-color: transparent;
}

/*-------------------------------------------------- */
/* CHAPTER PAGE */
/*-------------------------------------------------- */
/* chapter page images */
.chapterPictThumbContainer {
  position: relative;
}

img.chapterPictThumb {
  float: left;
  margin: 0 20px 12px 0;
  width: 30%;
  max-width: 300px;
  min-width: 280px;
  /*border: 6px solid $color_ltgrey;*/
  border: 8px solid #fff;
  -webkit-box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
@media only screen and (min-width: 1920px) {
  img.chapterPictThumb {
    float: left;
    margin: 0 20px 12px 0;
    border: 8px solid #fff;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  img.chapterPictThumb {
    float: left;
    margin: 0 20px 12px 0;
    border: 8px solid #fff;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  img.chapterPictThumb {
    float: left;
    margin: 0 20px 12px 0;
    border: 8px solid #fff;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  img.chapterPictThumb {
    float: left;
    margin: 0 20px 12px 0;
    border: 6px solid #fff;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  img.chapterPictThumb {
    float: none;
    margin: 0 0 20px 0;
    border: 6px solid #fff;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  img.chapterPictThumb {
    float: none;
    margin: 0 0 20px 0;
    border: 5px solid #fff;
  }
}
@media only screen and (max-width: 375px) {
  img.chapterPictThumb {
    float: none;
    margin: 0 0 20px 0;
    border: 5px solid #fff;
  }
}

.chapterPictBox {
  display: none;
  /* Fixed to the viewport, not to .zharea: the text column is inset on the left
     by the page-nav arrow, which pushed the full-size picture off centre. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 7560;
}

img.chapterPictFull, .chapterPictFullContainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  width: calc(90% - 30px);
  max-width: 1200px;
  z-index: 7560;
  cursor: pointer;
  border: 15px solid #fff;
  -webkit-box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
}
@media only screen and (min-width: 1920px) {
  img.chapterPictFull, .chapterPictFullContainer {
    width: calc(90% - 30px);
    border-width: 15px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  img.chapterPictFull, .chapterPictFullContainer {
    width: calc(90% - 28px);
    border-width: 14px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  img.chapterPictFull, .chapterPictFullContainer {
    width: calc(90% - 26px);
    border-width: 13px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  img.chapterPictFull, .chapterPictFullContainer {
    width: calc(90% - 24px);
    border-width: 12px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  img.chapterPictFull, .chapterPictFullContainer {
    width: calc(90% - 20px);
    border-width: 10px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  img.chapterPictFull, .chapterPictFullContainer {
    width: calc(90% - 16px);
    border-width: 8px;
  }
}
@media only screen and (max-width: 375px) {
  img.chapterPictFull, .chapterPictFullContainer {
    width: calc(90% - 16px);
    border-width: 8px;
  }
}

.chapterPictFull2 {
  width: 100%;
  height: 100%;
}

/* page navigation control styles */
.pageleftnav img, .pagerightnav img {
  width: 50px;
}
@media only screen and (min-width: 1920px) {
  .pageleftnav img, .pagerightnav img {
    width: 50px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .pageleftnav img, .pagerightnav img {
    width: 50px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .pageleftnav img, .pagerightnav img {
    width: 50px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .pageleftnav img, .pagerightnav img {
    width: 38px;
  }
}
.pageleftnav .pageAdv .on, .pagerightnav .pageAdv .on {
  display: none;
}
.pageleftnav .pageAdv .off, .pagerightnav .pageAdv .off {
  display: block;
}
.pageleftnav .pageAdv:hover .on, .pagerightnav .pageAdv:hover .on {
  display: block;
}
.pageleftnav .pageAdv:hover .off, .pagerightnav .pageAdv:hover .off {
  display: none;
}

.pageleftnav img {
  padding-left: 20px;
}

.pagerightnav img {
  padding-right: 20px;
  margin: auto;
}
@media only screen and (min-width: 1920px) {
  .pagerightnav img {
    padding-right: 20px;
    margin: auto;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .pagerightnav img {
    padding-right: 20px;
    margin: auto;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .pagerightnav img {
    padding-right: 20px;
    margin: auto;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .pagerightnav img {
    padding-right: 0;
    margin: 0 auto;
  }
}

.pageAdv, .audioCtrl {
  position: relative;
  display: block;
  cursor: pointer;
}

.audionav .audioCtrl {
  width: 70px;
  height: 70px;
  margin: 10px auto;
}
@media only screen and (min-width: 1920px) {
  .audionav .audioCtrl {
    width: 70px;
    height: 70px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  .audionav .audioCtrl {
    width: 70px;
    height: 70px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  .audionav .audioCtrl {
    width: 60px;
    height: 60px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  .audionav .audioCtrl {
    width: 48px;
    height: 48px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .audionav .audioCtrl {
    width: 50px;
    height: 50px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .audionav .audioCtrl {
    width: 50px;
    height: 50px;
  }
}
@media only screen and (max-width: 375px) {
  .audionav .audioCtrl {
    width: 50px;
    height: 50px;
  }
}
.audionav .audioCtrl .on {
  display: none;
}
.audionav .audioCtrl .off {
  display: block;
}
.audionav .audioCtrl.selected .on, .audionav .audioCtrl:hover .on {
  display: block;
}
.audionav .audioCtrl.selected .off, .audionav .audioCtrl:hover .off {
  display: none;
}

/* HIDE AUDIO ON EXERCISE SCREENS, PLUS INCREASE EXERCISE SCREEN REAL ESTATE */
#root.page_exercises #pagecontents .audionav.audionavctrl {
  display: none;
}
#root.page_exercises #pagecontents .pageContentsChapter {
  grid-template-rows: 34px auto 0 0 30px;
}
@media only screen and (min-width: 1920px) {
  #root.page_exercises #pagecontents .pageContentsChapter {
    grid-template-rows: 34px auto 0 0 30px;
  }
}
@media (min-width: 1366px) and (max-width: 1920px) {
  #root.page_exercises #pagecontents .pageContentsChapter {
    grid-template-rows: 34px auto 0 0 30px;
  }
}
@media (min-width: 1092px) and (max-width: 1366px) {
  #root.page_exercises #pagecontents .pageContentsChapter {
    grid-template-rows: 34px auto 0 0 30px;
  }
}
@media (min-width: 768px) and (max-width: 1092px) {
  #root.page_exercises #pagecontents .pageContentsChapter {
    grid-template-rows: 34px auto 0 0 30px;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #root.page_exercises #pagecontents .pageContentsChapter {
    grid-template-rows: 20px auto 0px 50px;
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  #root.page_exercises #pagecontents .pageContentsChapter {
    grid-template-rows: 20px auto 0px 50px;
  }
}
@media only screen and (max-width: 375px) {
  #root.page_exercises #pagecontents .pageContentsChapter {
    grid-template-rows: 20px auto 0px 50px;
  }
}

/*-------------------------------------------------- */
/* ROTATE COVER */
/* A phone held sideways is too short to read on, and no meta tag can lock the
   orientation -- the manifest's one value would lock tablets too. So a phone in
   landscape gets a cover asking for it upright. The line is height: a phone on
   its side is 320-430px tall, an iPad 744px or more. `pointer: coarse` keeps a
   short desktop window from tripping it. */
.rotatecover {
  display: none;
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotatecover {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 16px;
    background-color: #fff;
  }
  .rotatecover img {
    height: 140px;
    width: auto;
  }
  .rotatecover p {
    font-size: 20px;
    max-width: 12em;
  }
}

/*# sourceMappingURL=dongting.css.map */