@charset "UTF-8";
/* Colors */
/**
 * From highlights.scss
 * Consider consolidating these with the other colors above
 */
/** The "Highlight" word-display style's green */
/** End from highlights.scss */
/**
 * Border radii — use these rather than ad-hoc pixel values
 */
/**
 * Font sizes — use these rather than ad-hoc pixel values
 */
/**
 * The "Cursive Font" translation font, loaded by loadHandwritingFont.ts.
 */
/**
 * Controls (buttons, selects, fields): see /styleguide
 */
/**
 * Shadows
 */
/**
 * Media Queries
 *
 * The transition points are defined once here — never hard-code them in
 * media queries. Each tier's upper bound is inclusive (`width <= X`) and the
 * next tier starts at the same value, exclusive (`X < width`), so the tiers
 * tile the whole range. That matters because a zoomed browser reports a
 * fractional viewport width (110% zoom → 546.36px), and a width matching no
 * tier falls back to the desktop base styles, which overflow a small viewport.
 * Range syntax is compiled by postcss to min-/max-width for older browsers,
 * turning each exclusive bound into a 0.02px step (`min-width: 546.02px`), so
 * always use one constant for both sides of a boundary — never two values.
 */
/* desktop: default - everything above tablet */
body#accountPage #mainContent {
  margin-bottom: 50px;
}
body#accountPage #mainContent h2 {
  text-align: center;
  margin: 30px auto 20px auto;
}
body#accountPage #mainContent .plan h2 {
  margin: 0;
}
body#accountPage #mainContent [data-subview=renewalView] {
  text-align: center;
}
body#accountPage #mainContent .table {
  font-size: 100%;
  width: auto;
  margin: 0 auto;
  caption-side: bottom;
}
body#accountPage #mainContent .table caption {
  padding-top: 1em;
  text-align: left;
}
body#accountPage #mainContent .table th {
  padding-right: 30px;
  vertical-align: top;
}
body#accountPage #mainContent .table td {
  padding: 4px;
}
body#accountPage #mainContent .table td button,
body#accountPage #mainContent .table td select {
  width: 100%;
}
body#accountPage #mainContent .bridgeOptions {
  margin-top: 30px;
}
body#accountPage #mainContent .billingAddressSection {
  max-width: 500px;
  margin: 30px auto;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
}
body#accountPage #mainContent .billingAddressSection h3 {
  margin-top: 0;
  color: rgb(174.6785714286, 97.3095238095, 26.3214285714);
}
body#accountPage #mainContent .billingAddressSection .explanation {
  color: #777;
  margin-bottom: 20px;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formRow {
  margin-bottom: 15px;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label .required {
  color: #d34d2f;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label input,
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label select {
  width: 100%;
  padding: 8px 12px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label input::-moz-placeholder, body#accountPage #mainContent .billingAddressSection .addressForm .formRow label select::-moz-placeholder {
  color: #bbb;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label input::placeholder,
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label select::placeholder {
  color: #bbb;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label input:focus,
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label select:focus {
  outline: none;
  border-color: #43b08a;
  box-shadow: 0 0 0 2px rgba(67, 176, 138, 0.2);
}
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label input:disabled,
body#accountPage #mainContent .billingAddressSection .addressForm .formRow label select:disabled {
  background-color: #eee;
  cursor: not-allowed;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formActions {
  margin-top: 20px;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formActions button.primary {
  width: 100%;
  padding: 12px;
  background-color: #43b08a;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}
body#accountPage #mainContent .billingAddressSection .addressForm .formActions button.primary:hover:not(:disabled) {
  background-color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
body#accountPage #mainContent .billingAddressSection .addressForm .formActions button.primary:disabled {
  background-color: rgb(162.332962963, 208.167037037, 192.188185525);
  cursor: not-allowed;
}
body#accountPage #mainContent .billingAddressSection .addressForm .refuseOption {
  margin-top: 15px;
  text-align: center;
}
body#accountPage #mainContent .billingAddressSection .addressForm .refuseOption button.link {
  background: none;
  border: none;
  color: #777;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}
body#accountPage #mainContent .billingAddressSection .addressForm .refuseOption button.link:hover:not(:disabled) {
  color: #555;
}
body#accountPage #mainContent .billingAddressSection .addressForm .refuseOption button.link:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
body#accountPage #mainContent .billingAddressSection .successNotice {
  color: rgb(45.9074074074, 120.5925925926, 94.5555555556);
  font-weight: 500;
}
body#accountPage #mainContent .billingAddressSection .refusedNotice {
  margin-top: 0;
  color: #777;
  font-style: italic;
}

#accountForm .buttonContainer {
  text-align: right;
}
#accountForm .fieldHint td {
  color: #777;
  font-size: 12px;
  padding-bottom: 12px;
}
#accountForm .emailChangeNotice {
  color: #777;
}
#accountForm .emailChangeError {
  color: #d34d2f;
}
#accountForm input:disabled {
  background-color: #eee;
  color: #999;
  cursor: not-allowed;
}
#accountForm table {
  width: 100%;
}

.accountPanel2 .planContainer2 {
  display: flex;
  flex-direction: row;
  gap: 28px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .accountPanel2 .planContainer2 {
    gap: 10px;
  }
}
@media (max-width: 546px) {
  .accountPanel2 .planContainer2 {
    gap: 22px;
    flex-direction: column;
    align-items: stretch;
  }
}
.accountPanel2 .plan2 {
  color: #111;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 32px;
  flex: 1 1 auto;
  width: 200px;
  font-size: 14px;
}
.accountPanel2 .plan2 .currentPlanPlaceholder {
  display: none;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .accountPanel2 .plan2 .currentPlanPlaceholder,
  .accountPanel2 .plan2 .currentPlan {
    display: block;
  }
}
.accountPanel2 .plan2.suggested {
  background-color: #f3fffb;
}
.accountPanel2 .plan2 .cancelAnytime {
  margin: 29px 0 10px;
  text-align: center;
  font-size: 14px;
}
.accountPanel2 .plan2 .goToCheckout {
  color: #fff !important;
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  background-color: #43b08a;
  border-color: 6px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  -webkit-text-decoration: none;
  text-decoration: none;
  display: block;
  border-radius: 8px;
  padding: 10px;
}
.accountPanel2 .plan2 .goToCheckout:hover {
  background-color: rgb(52.9382716049, 139.0617283951, 109.037037037);
}
.accountPanel2 .plan2 .secondaryLink {
  color: #43b08a;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
@media (max-width: 546px) {
  .accountPanel2 .plan2 {
    padding: 24px;
    width: auto;
  }
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .accountPanel2 .plan2 {
    padding: 24px;
  }
}
.accountPanel2 .plan2 h4 {
  color: #111 !important;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
  font-weight: 600;
}
.accountPanel2 .plan2 h4 .currentPlan {
  color: #777;
  line-height: 17px;
  font-weight: 400;
}
.accountPanel2 .plan2 h5 {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  margin: 25px 0 8px;
}
.accountPanel2 .plan2 .price {
  font-family: "Jost", sans-serif;
  font-size: 60px;
  font-weight: 400;
}
.accountPanel2 .plan2 .price small {
  font-size: 18px;
  font-weight: 600;
}
.accountPanel2 .plan2 table {
  font-family: "Jost", sans-serif;
}
.accountPanel2 .plan2 table .highlight {
  color: #43b08a;
  font-weight: 600;
}
.accountPanel2 .plan2 table td:first-child {
  vertical-align: top;
}
.accountPanel2 .plan2 table .subtle {
  color: #777;
}
.accountPanel2 .plan2 table .notIncluded {
  color: #bbb;
}
.accountPanel2 .plan2 table .cross,
.accountPanel2 .plan2 table .checkmark {
  width: 16px;
  height: 16px;
  background-size: contain;
  margin-top: 3px;
}
.accountPanel2 .plan2 table .checkmark {
  background-image: url("/content/checkout-check.svg");
}
.accountPanel2 .plan2 table .cross {
  background-image: url("/content/checkout-x.svg");
}

.stickyCheckoutBar {
  position: sticky;
  bottom: 0;
  height: 0;
}
.stickyCheckoutBar > div {
  position: absolute;
  left: calc(-1 * var(--horizontal-padding));
  right: calc(-1 * var(--horizontal-padding));
  bottom: 0;
  padding: 12px 16px;
  background-color: #fff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.stickyCheckoutBar .goToCheckout {
  color: #fff !important;
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  background-color: #43b08a;
  border-color: 6px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  -webkit-text-decoration: none;
  text-decoration: none;
  display: block;
  border-radius: 8px;
  padding: 10px;
}
.stickyCheckoutBar .goToCheckout:hover {
  background-color: rgb(52.9382716049, 139.0617283951, 109.037037037);
}
.stickyCheckoutBar .goToCheckout {
  max-width: 360px;
  margin: 0 auto;
}

.speechBubbleContainer {
  position: relative;
  margin: 0 30px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
@media (max-width: 546px) {
  .speechBubbleContainer {
    margin: 0 25px 12px 0;
  }
}
.speechBubbleContainer .rabbitLogo {
  width: 69px;
}
@media (max-width: 546px) {
  .speechBubbleContainer .rabbitLogo {
    width: 53px;
  }
}
.speechBubbleContainer .speechBubble {
  background-color: #fff;
  color: #111;
  padding: 8px 16px;
  position: relative;
  border-radius: 12px;
  margin-left: 16px;
}
.speechBubbleContainer .speechBubble h2 {
  color: #111 !important;
  font-size: 26px;
  margin: 2px !important;
}
@media (max-width: 546px) {
  .speechBubbleContainer .speechBubble h2 {
    font-size: 22px;
  }
}
.speechBubbleContainer .speechBubbleArrow {
  position: absolute;
  top: 50%;
  right: 100%;
  width: 16px;
  height: 30px;
  margin-top: -15px;
  margin-right: -2px;
}

.speechBubbleContainer.readingRabbit {
  align-items: flex-end;
}
.speechBubbleContainer.readingRabbit .rabbitLogo {
  width: 104px;
  margin-bottom: -6px;
}
@media (max-width: 546px) {
  .speechBubbleContainer.readingRabbit .rabbitLogo {
    width: 74px;
  }
}
.speechBubbleContainer.readingRabbit .speechBubble {
  border: 3px solid #181a1c;
  border-radius: 18px 24px 16px 22px/22px 16px 24px 18px;
  padding: 10px 18px;
  margin-bottom: 22px;
}
.speechBubbleContainer.readingRabbit .speechBubble p {
  margin: 4px 2px 2px;
  color: #333;
}
.speechBubbleContainer.readingRabbit .speechBubble::before, .speechBubbleContainer.readingRabbit .speechBubble::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent;
}
.speechBubbleContainer.readingRabbit .speechBubble::before {
  left: -19px;
  bottom: 22px;
  border-width: 12px 19px 12px 0;
  border-right-color: #181a1c;
}
.speechBubbleContainer.readingRabbit .speechBubble::after {
  left: -13px;
  bottom: 26px;
  border-width: 8px 14px 8px 0;
  border-right-color: #fff;
}

[id^=admin] h1 {
  margin: 20px 0;
}
[id^=admin] .controls {
  margin-bottom: 20px;
}
[id^=admin] .controls button {
  margin-left: 20px;
}
[id^=admin] .feedbackTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
[id^=admin] .feedbackTable thead tr {
  background-color: #f5f5f5;
}
[id^=admin] .feedbackTable thead th {
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #eee;
}
[id^=admin] .feedbackTable tbody tr {
  background-color: white;
}
[id^=admin] .feedbackTable tbody tr.resolved {
  background-color: #f0f0f0;
}
[id^=admin] .feedbackTable tbody td {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
[id^=admin] .feedbackTable tbody td.center {
  text-align: center;
}
[id^=admin] .feedbackTable tbody td .secondaryText {
  font-size: 0.9em;
  color: #777;
}
[id^=admin] .feedbackTable tbody td .tertiaryText {
  font-size: 0.8em;
  color: #999;
}
[id^=admin] .feedbackTable tbody td .emptyText {
  color: #999;
}
[id^=admin] .feedbackTable tbody td .reportReason {
  color: rgb(170.8571428571, 60.7857142857, 36.1428571429);
}
[id^=admin] .feedbackTable tbody td .resolveButton {
  white-space: normal;
}
[id^=admin] .userStatsView {
  margin-bottom: 20px;
}
[id^=admin] .userStatsView th {
  text-align: left;
  font-weight: normal;
  color: #777;
  padding-right: 20px;
}
[id^=admin] .userStatsView .infoTable {
  margin: 16px 0;
}
[id^=admin] .userActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
}

.adminAPILogsPage .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
}
.adminAPILogsPage .latencyChart {
  margin: 20px 0;
}
.adminAPILogsPage .latencyChart svg {
  max-width: 100%;
  height: auto;
  background-color: white;
  border: 1px solid #eee;
}
.adminAPILogsPage .chartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.9em;
}
.adminAPILogsPage .legendItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.adminAPILogsPage .legendSwatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.adminAPILogsPage .chartHoverDetail {
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  font-size: 0.9em;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.adminAPILogsPage .chartHoverDetail .hoverValue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.adminAPILogsPage .error {
  color: #d32f2f;
  font-weight: bold;
}

.adminRevenuePage .revenueChart {
  margin: 20px 0;
}
.adminRevenuePage .revenueChart svg {
  max-width: 100%;
  height: auto;
  background-color: white;
  border: 1px solid #eee;
}
.adminRevenuePage .refundsToggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
}
.adminRevenuePage .refundSwatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #d34d2f;
}
.adminRevenuePage .revenueHoverDetail {
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  font-size: 0.9em;
}
.adminRevenuePage .revenueHoverDetail h3 {
  margin: 4px 0 8px;
}
.adminRevenuePage .revenueBreakdownTable {
  border-collapse: collapse;
}
.adminRevenuePage .revenueBreakdownTable th,
.adminRevenuePage .revenueBreakdownTable td {
  text-align: left;
  padding: 3px 24px 3px 0;
}
.adminRevenuePage .revenueBreakdownTable td:nth-child(2),
.adminRevenuePage .revenueBreakdownTable td:nth-child(3),
.adminRevenuePage .revenueBreakdownTable th:nth-child(2),
.adminRevenuePage .revenueBreakdownTable th:nth-child(3) {
  text-align: right;
}
.adminRevenuePage .revenueBreakdownTable .totalsRow td {
  border-top: 1px solid #ccc;
  font-weight: bold;
}
.adminRevenuePage .revenueBreakdownTable .refundsRow td {
  color: #d34d2f;
}
.adminRevenuePage .revenueBreakdownTable .netRow td {
  font-weight: bold;
}
.adminRevenuePage .error {
  color: #d32f2f;
  font-weight: bold;
}

.adminBookPage .bookDetails {
  margin-bottom: 30px;
}
.adminBookPage .bookDetails h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.adminBookPage .bookDetails h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.adminBookPage .infoTable {
  width: 100%;
  max-width: 800px;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.adminBookPage .infoTable th {
  text-align: left;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  width: 200px;
  font-weight: bold;
}
.adminBookPage .infoTable td {
  padding: 10px;
  border: 1px solid #eee;
}
.adminBookPage .infoTable td .secondaryText {
  font-size: 0.9em;
  color: #777;
  margin-top: 5px;
}
.adminBookPage .infoTable td .toggleButton {
  margin-left: 10px;
}
.adminBookPage .textSample {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 15px;
  white-space: pre-wrap;
  font-family: Georgia, serif;
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}
.adminBookPage .feedbackSection {
  margin-bottom: 30px;
}
.adminBookPage .feedbackSection h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.adminBookPage .classificationsSection {
  margin-bottom: 30px;
}
.adminBookPage .classificationsSection h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.adminBookPage .classificationsTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.adminBookPage .classificationsTable thead tr {
  background-color: #f5f5f5;
}
.adminBookPage .classificationsTable thead th {
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #eee;
}
.adminBookPage .classificationsTable tbody td {
  padding: 8px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
.adminBookPage .classificationsTable tbody td .classificationResult {
  background-color: #f9f9f9;
  padding: 10px;
  font-size: 0.85em;
  max-height: 200px;
  overflow-y: auto;
  font-family: monospace;
  white-space: pre-wrap;
}
.adminBookPage .classificationsTable tbody td .secondaryText {
  font-size: 0.9em;
  color: #777;
  margin-top: 5px;
}
.adminBookPage .error {
  color: #d32f2f;
  font-weight: bold;
}

.aiPolishDialog {
  padding: 16px;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.aiPolishDialog h3 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  font-size: 20px;
  color: #333;
}
.aiPolishDialog h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #555;
}
.aiPolishDialog .aiPolishOptions .transcriptNotice {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.aiPolishDialog .aiPolishOptions .optionGroup {
  margin-bottom: 20px;
}
.aiPolishDialog .aiPolishOptions .checkboxOption {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.aiPolishDialog .aiPolishOptions .checkboxOption input[type=checkbox] {
  margin-right: 10px;
  cursor: pointer;
}
.aiPolishDialog .aiPolishOptions .checkboxOption span {
  font-size: 14px;
}
.aiPolishDialog .aiPolishOptions .otherInstructions {
  margin-top: 8px;
  margin-left: 24px;
  width: calc(100% - 24px);
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.aiPolishDialog .aiPolishOptions .otherInstructions:focus {
  outline: none;
  border-color: #419ecd;
}
.aiPolishDialog .polishingContainer {
  text-align: center;
}
.aiPolishDialog .polishingContainer p {
  font-size: 16px;
  margin-bottom: 20px;
}
.aiPolishDialog .polishingContainer p .progressPercentage {
  font-weight: bold;
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  margin-left: 8px;
}
.aiPolishDialog .polishingContainer .streamingPreview {
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;
  background-color: rgb(245.65, 245.65, 245.65);
  border: 1px solid rgb(229.5, 229.5, 229.5);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  text-align: left;
}
.aiPolishDialog .polishingContainer .streamingPreview[dir=rtl] {
  text-align: right;
}
.aiPolishDialog .polishResultContainer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.aiPolishDialog .polishResultContainer .diffScrollContainer {
  flex: 1;
  overflow-y: auto;
  border: 1px solid rgb(229.5, 229.5, 229.5);
  border-radius: 4px;
  padding: 15px;
  background-color: #fff;
  margin-bottom: 20px;
  min-height: 200px;
  max-height: 400px;
}
.aiPolishDialog .polishResultContainer .diffScrollContainer .diffInstructions {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
  padding: 8px;
  background-color: rgb(228.2830188679, 241.9198113208, 252.2169811321);
  border-radius: 4px;
  text-align: center;
}
.aiPolishDialog .polishResultContainer .diffScrollContainer .diffContainer {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.aiPolishDialog .polishResultContainer .diffScrollContainer .diffContainer .diffAdded {
  background-color: rgb(209.3703703704, 237.6296296296, 227.7777777778);
  color: rgb(38.8765432099, 102.1234567901, 80.0740740741);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  padding: 2px 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
}
.aiPolishDialog .polishResultContainer .diffScrollContainer .diffContainer .diffAdded:hover, .aiPolishDialog .polishResultContainer .diffScrollContainer .diffContainer .diffAdded.groupHover {
  background-color: rgb(190.9012345679, 230.5987654321, 216.7592592593);
}
.aiPolishDialog .polishResultContainer .diffScrollContainer .diffContainer .diffAdded.disabled {
  background-color: transparent;
  color: #ccc;
  -webkit-text-decoration: none;
  text-decoration: none;
  opacity: 0.5;
}
.aiPolishDialog .polishResultContainer .diffScrollContainer .diffContainer .diffRemoved {
  background-color: rgb(246.619047619, 221.0952380952, 215.380952381);
  color: rgb(170.8571428571, 60.7857142857, 36.1428571429);
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
  padding: 2px 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
}
.aiPolishDialog .polishResultContainer .diffScrollContainer .diffContainer .diffRemoved:hover, .aiPolishDialog .polishResultContainer .diffScrollContainer .diffContainer .diffRemoved.groupHover {
  background-color: rgb(242.1666666667, 203.0833333333, 194.3333333333);
}
.aiPolishDialog .polishResultContainer .diffScrollContainer .diffContainer .diffRemoved.disabled {
  background-color: transparent;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
  opacity: 1;
}
.aiPolishDialog .dialogActions {
  margin-top: 15px;
}
.aiPolishDialog .dialogActions button {
  padding: 8px 20px;
}
.aiPolishDialog .dialogActions button.prominent {
  margin: 0;
}
.aiPolishDialog .feedbackLink {
  position: absolute;
  bottom: 32px;
  left: 32px;
}
@media (max-width: 546px) {
  .aiPolishDialog .feedbackLink {
    bottom: 8px;
  }
}

body#readerPage.colorDark .aiPolishDialog {
  color: #aaa;
}

/** Shared animations and animation helper classes */
[data-anim=fadeOut] {
  opacity: 0;
  animation: fadeOut 200ms ease-out;
}

[data-anim=fadeIn] {
  opacity: 1;
  display: block;
  animation: fadeIn 200ms ease-out;
}

[data-anim=slideIn] {
  opacity: 1;
  animation: fadeIn 200ms ease-out;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    margin-top: 50px;
  }
  to {
    margin-top: 0;
  }
}
/* Pulsing glow used to draw attention to a button or link */
.glow {
  animation-duration: 0.8s;
  animation-name: glow;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
.glow::after {
  content: "";
  display: block;
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border: 4px solid white;
  border-radius: 12px;
  pointer-events: none;
}

body.colorDark .glow,
.glow.light {
  animation-name: glowlight;
}

@keyframes glow {
  from {
    box-shadow: 0 0 0px 10px rgba(220, 240, 255, 0);
  }
  to {
    box-shadow: 0 0 35px 10px rgba(220, 240, 255, 0.6);
  }
}
@keyframes glowlight {
  from {
    box-shadow: 0 0 0px #def;
  }
  to {
    box-shadow: 0 0 35px #def;
  }
}
@keyframes glowbackground {
  from {
    background-color: #83cc99;
    color: #20853e;
  }
  to {
    background-color: #e1f2e6;
    color: #0a471c;
  }
}
.skeleton {
  text-align: left;
}
.skeleton .skeletonItem {
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 16px;
  background-color: #fff;
  border-radius: 16px;
}
.skeleton .skeletonLine {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 7px;
  background: linear-gradient(90deg, #ebe8dc 25%, #f5f3ea 50%, #ebe8dc 75%) 0 0/200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton .skeletonLine.short {
  width: 60%;
  margin-bottom: 0;
}
.skeleton.cards .skeletonItem {
  height: 130px;
  padding-left: 108px;
  background: linear-gradient(90deg, #ebe8dc 92px, #fff 92px);
}
.skeleton.rows .skeletonItem {
  margin-bottom: 1px;
  padding: 10px 16px;
  border-radius: 0;
}
.skeleton.blocks .skeletonItem {
  height: 120px;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.appPremiumPage .appPremiumPlan {
  margin: 0 0 16px;
  padding: 14px 16px 16px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
}
.appPremiumPage .appPremiumPlan h3 {
  margin: 0 0 6px;
}
.appPremiumPage .appPremiumPlan ul {
  list-style: disc;
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.appPremiumPage .appPremiumBuy {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 12px;
  background-color: #43b08a;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.askAIView {
  min-height: 150px;
}
.askAIView .inputRow {
  display: flex;
  flex-direction: row;
  margin-top: 5px;
  position: relative;
}
.askAIView .inputContainer {
  flex-grow: 1;
  min-width: 0;
}
.askAIView .inputContainer .recentPrompts {
  z-index: 1;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 0 8px 8px;
  border: 1px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.031372549);
}
.askAIView .inputContainer .recentPrompts .recentPromptsHeader {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.askAIView .inputContainer .recentPrompts .recentPromptsHeader h3 {
  margin: 10px 0 4px;
}
.askAIView .inputContainer .recentPrompts .recentPromptsHeader .editToggle {
  background: none;
  border: none;
  padding: 4px 6px;
  margin: 0;
  color: #777;
  cursor: pointer;
  font-size: 0.9em;
}
.askAIView .inputContainer .recentPrompts .recentPromptsHeader .editToggle:hover {
  color: #111;
}
.askAIView .inputContainer .recentPrompts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.askAIView .inputContainer .recentPrompts li.promptRow {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.askAIView .inputContainer .recentPrompts li.promptRow .prompt {
  display: inline-block;
  flex-grow: 1;
  padding: 4px;
  min-width: 0;
  word-break: break-word;
}
.askAIView .inputContainer .recentPrompts li.promptRow .prompt:hover {
  background-color: rgb(223.7234042553, 219.5531914894, 188.2765957447);
}
.askAIView .inputContainer .recentPrompts li.promptRow .pinButton {
  padding: 2px 4px;
  margin-right: 2px;
  opacity: 0;
  font-size: 0.85em;
  color: #999;
}
.askAIView .inputContainer .recentPrompts li.promptRow .pinButton.pinned {
  opacity: 1;
  color: #111;
}
.askAIView .inputContainer .recentPrompts li.promptRow:hover .pinButton.pinned {
  color: #111;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow {
  cursor: default;
  gap: 2px;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .prompt {
  cursor: default;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .prompt:hover {
  background-color: transparent;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .pinButton {
  opacity: 1;
  padding: 4px 8px;
  font-size: 1em;
  color: #999;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .pinButton.interactive {
  cursor: pointer;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .pinButton.interactive:hover {
  color: #111;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .pinButton.pinned {
  color: #111;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .dragHandle {
  color: #777;
  cursor: grab;
  cursor: -moz-grab;
  margin-right: 2px;
  padding: 4px 6px;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .dragHandle:hover {
  color: #111;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .dragHandle .icon-align-justify {
  display: block;
  width: 12px;
  overflow: hidden;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .deleteButton {
  background: none;
  border: none;
  padding: 4px 6px;
  margin: 0;
  color: #777;
  cursor: pointer;
}
.askAIView .inputContainer .recentPrompts.editing li.promptRow .deleteButton:hover {
  color: #d34d2f;
}
.askAIView button {
  margin-left: 4px;
}
.askAIView .aiResponse {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  white-space: pre-wrap;
}
.askAIView .aiResponse ul,
.askAIView .aiResponse ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
.askAIView .aiResponse ul {
  list-style: disc;
}
.askAIView .aiResponse ol {
  list-style: decimal;
}
.askAIView .aiResponse li {
  font-size: inherit;
  color: inherit;
  margin-bottom: 0.25em;
}
.askAIView .aiResponse blockquote {
  margin: 0.5em 0;
  padding-left: 0.75em;
  border-left: 3px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
}

.editCardTable .askAIView {
  min-height: 0;
  min-height: initial;
}

body.colorDark .askAIView .recentPrompts {
  background-color: #222;
  color: #aaa;
  border-color: #444;
}
body.colorDark .askAIView .recentPrompts .recentPromptsHeader .editToggle {
  color: #aaa;
}
body.colorDark .askAIView .recentPrompts .recentPromptsHeader .editToggle:hover {
  color: #fff;
}
body.colorDark .askAIView .recentPrompts li.promptRow {
  color: #aaa;
}
body.colorDark .askAIView .recentPrompts li.promptRow .prompt:hover {
  background-color: #444;
}
body.colorDark .askAIView .recentPrompts li.promptRow .pinButton {
  color: #444;
}
body.colorDark .askAIView .recentPrompts li.promptRow .pinButton.pinned {
  color: #aaa;
}
body.colorDark .askAIView .recentPrompts.editing li.promptRow .prompt:hover {
  background-color: transparent;
}
body.colorDark .askAIView .recentPrompts.editing li.promptRow .pinButton.interactive:hover {
  color: #aaa;
}
body.colorDark .askAIView .recentPrompts.editing li.promptRow .dragHandle {
  color: #444;
}
body.colorDark .askAIView .recentPrompts.editing li.promptRow .dragHandle:hover {
  color: #aaa;
}
body.colorDark .askAIView .recentPrompts.editing li.promptRow .deleteButton {
  color: #444;
}
body.colorDark .askAIView .recentPrompts.editing li.promptRow .deleteButton:hover {
  color: #d34d2f;
}
body.colorDark .askAIView .aiResponse {
  color: #9bc;
}

#audioUploadedPage td {
  padding: 3px 0;
}
#audioUploadedPage td:first-child:not([colspan="2"]) {
  padding-right: 16px;
}
#audioUploadedPage .error {
  color: #d34d2f;
}

/** Reusable style patterns shared across components */
/* Single-line text with ellipsis overflow */
/* A control's text: 14px with a mouse, and 16px on touch screens (any smaller
   and iOS zooms into a field as it's focused), so buttons and fields match */
/* A control's box (a secondary button, select or field): white, outlined,
   its text regular so they all match beside each other */
/* A button (ui/Button.tsx): a control centring its icon and label */
/*
 * A screen's main action: solid blue, its label medium. Its border lets the
 * background show through, so a variant need only recolour the background
 * (hovered, green, grey, Google's own)
 */
/* A select's chevron, where its native arrow was */
/* A menu's or other popover's surface (_popover.scss), as iOS's: white and a
   little translucent, softly shadowed */
/* Surface for modal dialogs */
/* Cover the nearest positioned ancestor */
/* PracticeButton.tsx: starts practice (flashcards, or a conversation).
   Included under each page's own selectors, to outrank their img rules. */
/** Override browser defaults and apply base Readlang style */
body,
html {
  color: #333;
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 16px;
}

body {
  background-color: #323847;
}

h1,
h2,
h3,
h4 {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  color: #333;
}

ul,
ol {
  line-height: 1.3;
  list-style: none;
  padding: 0;
}

button,
input,
li,
img,
label,
textarea,
fieldset,
select {
  border-radius: 4px;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  color: #333;
}

a {
  font-family: "Jost", sans-serif;
  color: #2f81aa;
}

input,
textarea {
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
}

select {
  max-width: 100%;
}
select:not([multiple]):not([size]) {
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch select:not([multiple]):not([size]) {
  font-size: 16px;
}
select:not([multiple]):not([size]) {
  font-weight: 400;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 0 30px 0 12px;
  text-overflow: ellipsis;
  cursor: pointer;
}

body.notouch select:not([multiple]):not([size]):not(:disabled):hover {
  border-color: #bbb;
}

input:where(:not([type]),
[type=text],
[type=email],
[type=password],
[type=search],
[type=url],
[type=number]) {
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch input:where(:not([type]),
[type=text],
[type=email],
[type=password],
[type=search],
[type=url],
[type=number]) {
  font-size: 16px;
}
input:where(:not([type]),
[type=text],
[type=email],
[type=password],
[type=search],
[type=url],
[type=number]) {
  font-weight: 400;
  padding: 0 10px;
}

textarea {
  border-radius: 8px;
}

button {
  cursor: pointer;
  padding: 5px 6px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
}
button:disabled {
  cursor: not-allowed;
}

input,
textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body.colorDark input,
body.colorDark select,
body.colorDark textarea {
  background-color: #111;
  color: #eee;
  border: 1px solid #777;
}

body.colorDark button {
  background-color: #111;
  color: #eee;
  border: 1px solid #777;
}

body.notouch.colorDark button:hover:not([disabled]),
body.colorDark button:active:not([disabled]) {
  border-color: #bbb;
  background-color: #333;
}

input[type=email],
input[type=URL],
input[type=text],
input[type=password],
input[type=file] {
  width: 100%;
}

textarea {
  resize: vertical;
}

table {
  border-collapse: collapse;
}

table th {
  text-align: left;
}

table td {
  padding-right: 10px;
}

table td:last-child {
  padding-right: 0;
}

table td.rightPadding {
  padding-right: 10px;
}

h1 {
  font-weight: 500;
  margin: 0;
  font-size: 32px;
}

h2 {
  font-weight: 500;
  margin: 0;
  font-size: 24px;
}

h2 select {
  font-size: 16px;
  vertical-align: middle;
}

h3,
h4 {
  margin: 0;
}

h1 small,
h2 small,
h3 small {
  opacity: 0.6;
}

body.touch {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.touch #pageText,
body.touch .explanation,
body.touch .botMessage,
body.touch .messageBody,
body.touch input,
body.touch textarea,
body.touch [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}
body.touch input:not([type=checkbox]):not([type=radio]),
body.touch textarea,
body.touch select {
  font-size: 16px;
}
body.touch :focus:not(:focus-visible),
body.touch button:focus {
  outline: none;
}
body.touch a:active:not(:disabled) {
  opacity: 0.6;
}
body.touch button:active:not(:disabled) {
  opacity: 0.6;
}

.category-Fiction {
  --category-color: #f2c430;
  --category-ink: #5d4803;
}

.category-Non-Fiction {
  --category-color: #3c4da5;
  --category-ink: #fff;
}

.category-Song {
  --category-color: #911542;
  --category-ink: #fff;
}

.category-Dialogue {
  --category-color: #f59237;
  --category-ink: #fff;
}

.libraryDocumentContainer {
  position: relative;
}
.libraryDocumentContainer .libraryDocument {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  color: #111;
  background-color: #43b08a;
  background-color: var(--category-color, #43b08a);
  overflow: hidden;
  margin-bottom: 15px;
  border-radius: 12px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.031372549);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.libraryDocumentContainer .libraryDocument:hover {
  box-shadow: 0 0 0 4px #43b08a;
  box-shadow: 0 0 0 4px var(--category-color, #43b08a);
}
.libraryDocumentContainer .libraryDocument:hover .categoryContainer {
  filter: brightness(1.1);
}
.libraryDocumentContainer .libraryDocument .categoryContainer {
  background-image: url("/content/backgroundOther.svg");
  background-position: center;
  background-size: 100px 175px;
}
.libraryDocumentContainer .libraryDocument .categoryContainer .category {
  font-family: "Jost", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  color: var(--category-ink, #fff);
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .libraryDocumentContainer .libraryDocument .categoryContainer .category {
    font-size: 18px;
  }
}
@media (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument .categoryContainer .category {
    font-size: 16px;
  }
}
.libraryDocumentContainer .libraryDocument .categoryContainer .category.compactMode {
  font-size: 18px;
}
@media (min-width: 546.02px) and (max-width: 754px), (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument .categoryContainer .category.compactMode {
    font-size: 16px;
  }
}
.libraryDocumentContainer .libraryDocument .categoryColor {
  background-color: #43b08a;
  background-color: var(--category-color, #43b08a);
}
.libraryDocumentContainer .libraryDocument .mainInfoRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.libraryDocumentContainer .libraryDocument.category-Fiction .categoryContainer {
  background-image: url("/content/backgroundFiction.svg");
}
.libraryDocumentContainer .libraryDocument.category-Non-Fiction .categoryContainer {
  background-image: url("/content/backgroundNonFiction.svg");
}
.libraryDocumentContainer .libraryDocument.category-Song .categoryContainer {
  background-image: url("/content/backgroundSong.svg");
}
.libraryDocumentContainer .libraryDocument.category-Dialogue .categoryContainer {
  background-image: url("/content/backgroundDialogue.svg");
}
.libraryDocumentContainer .libraryDocument .progressBarContainer {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
}
.libraryDocumentContainer .libraryDocument .progressBarContainer .progressBar {
  flex: 1 1 auto;
  height: 8px;
  margin: 9px 0;
  position: relative;
  border-radius: 4px;
}
.libraryDocumentContainer .libraryDocument .progressBarContainer .progressBar .uncompletedBar {
  opacity: 0.3;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
}
.libraryDocumentContainer .libraryDocument .progressBarContainer .progressBar .completedBar {
  height: 100%;
  border-radius: 4px;
}
.libraryDocumentContainer .libraryDocument .progressBarContainer .completedCheck {
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  color: #fff;
  color: var(--category-ink, #fff);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.libraryDocumentContainer .libraryDocument .voteControlPlaceholder {
  flex: 0 0 auto;
  width: 60px;
}
.libraryDocumentContainer .libraryDocument .attribution {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}
.libraryDocumentContainer .libraryDocument .attribution.compactMode {
  font-size: 12px;
}
@media (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument .attribution {
    font-size: 12px;
  }
}
.libraryDocumentContainer .libraryDocument a i {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.libraryDocumentContainer .libraryDocument a {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.libraryDocumentContainer .libraryDocument h4 {
  font-size: 20px;
  position: relative;
  margin-bottom: 6px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .libraryDocumentContainer .libraryDocument h4 {
    font-size: 18px;
  }
}
@media (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument h4 {
    font-size: 16px;
  }
}
.libraryDocumentContainer .libraryDocument h4.compactMode {
  font-size: 16px;
}
.libraryDocumentContainer .libraryDocument .readLaterContainerPlaceholder {
  background-color: pink;
}
.libraryDocumentContainer .libraryDocument .leftHandSide {
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  flex: 0 0 auto;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .libraryDocumentContainer .libraryDocument .leftHandSide {
    width: 85px;
  }
}
@media (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument .leftHandSide {
    width: 70px;
  }
}
.libraryDocumentContainer .libraryDocument .leftHandSide.compactMode {
  width: 85px;
}
@media (min-width: 546.02px) and (max-width: 754px), (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument .leftHandSide.compactMode {
    width: 70px;
  }
}
.libraryDocumentContainer .libraryDocument .leftHandSide .thumbContainer {
  display: none;
  overflow: hidden;
  width: 100%;
  position: relative;
}
@media (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument .leftHandSide .thumbContainer {
    display: block;
  }
}
.libraryDocumentContainer .libraryDocument .leftHandSide .youTubeThumb {
  display: block;
  width: 140%;
  left: -20%;
}
.libraryDocumentContainer .libraryDocument .categoryContainer {
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px 0;
}
.libraryDocumentContainer .libraryDocument .mainInfo {
  float: left;
  padding: 15px 15px;
  background-color: #fff;
  flex: 1 1 auto;
}
.libraryDocumentContainer .libraryDocument .mainInfo .thumbContainer {
  position: relative;
  float: left;
  margin-right: 10px;
}
@media (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument .mainInfo .thumbContainer {
    display: none;
  }
}
.libraryDocumentContainer .libraryDocument .mainInfo .youTubeThumb {
  display: block;
  width: 200px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .libraryDocumentContainer .libraryDocument .mainInfo .youTubeThumb {
    width: 110px;
  }
}
.libraryDocumentContainer .libraryDocument .mainInfo .youTubeThumb.compactMode {
  width: 80px;
}
.libraryDocumentContainer .voteControl {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  right: 15px;
  top: 15px;
  pointer-events: none;
}
.libraryDocumentContainer .voteControl .upVoteButton {
  margin: -5px;
  padding: 5px;
  pointer-events: all;
  cursor: pointer;
}
.libraryDocumentContainer .voteControl .upVote,
.libraryDocumentContainer .voteControl .currentVote {
  color: #999;
  font-weight: bold;
  font-size: 14px;
}
.libraryDocumentContainer .voteControl .upVote {
  cursor: pointer;
  font-size: 20px;
}
.libraryDocumentContainer .voteControl .upVote.outline {
  color: #fff;
  position: absolute;
}
.libraryDocumentContainer .voteControl .currentVote {
  margin: 0 6px;
}
.libraryDocumentContainer .voteControl .upVoted {
  color: #d34d2f;
}
.libraryDocumentContainer .voteControl .upVoted.currentVote {
  color: #999;
}
.libraryDocumentContainer .readLaterContainer {
  position: absolute;
  right: 15px;
  bottom: 15px;
  margin-left: 10px;
}
.libraryDocumentContainer .readLaterContainer button {
  color: #999;
  border: none;
  padding: 4px 6px;
  margin: 0;
  cursor: pointer;
}
.libraryDocumentContainer .readLaterContainer button:hover {
  color: #111;
  background-color: transparent;
}
.libraryDocumentContainer .readLaterContainerPlaceholder {
  opacity: 0;
  margin-left: 10px;
}
.libraryDocumentContainer .readLaterContainerPlaceholder button {
  border: none;
  padding: 4px 6px;
  margin: 0;
}

body.notouch .libraryDocumentContainer .voteControl .upVoteButton:hover .upVote {
  color: #d34d2f;
}

body.notouch .libraryDocument.deleted:hover button {
  color: #000;
  opacity: 0.8;
}

.bookReportDialog .feedbackSection {
  margin-bottom: 20px;
}
.bookReportDialog .feedbackSection label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  color: #111;
}
.bookReportDialog .feedbackSection .reportOption {
  font-weight: normal;
  cursor: pointer;
}
.bookReportDialog .feedbackSection textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #eee;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}
.bookReportDialog .feedbackSection textarea:focus {
  outline: none;
  border-color: #7be;
}
.bookReportDialog .feedbackSection textarea:disabled {
  opacity: 0.6;
  background-color: #f5f5f5;
  cursor: not-allowed;
}
.bookReportDialog .submitButton {
  padding: 10px 25px;
  background-color: #43b08a;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.bookReportDialog .submitButton:hover:not(:disabled) {
  background-color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
.bookReportDialog .submitButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/** Shared button styles */
body.notouch button:not(:disabled):hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/**
 * Buttons (ui/Button.tsx, shown at /styleguide): `secondary` (the default)
 * for most, `primary` for a screen's main action, `plain` for one in a line of
 * text or a sheet's header. `large` in a form, full width with `block`.
 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch .button {
  font-size: 16px;
}
.button {
  font-weight: 400;
  padding: 0 14px;
  line-height: normal;
  white-space: nowrap;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
}
.button.primary {
  border-color: transparent;
  background-color: #419ecd;
  color: #fff;
  font-weight: 500;
}
.button.plain {
  height: auto;
  padding: 0;
  border: none;
  background: none;
  color: #419ecd;
}
.button.destructive {
  color: #d34d2f;
}
.button.destructive.primary {
  background-color: #d34d2f;
  color: #fff;
}
.button.large {
  height: 44px;
  padding: 0 20px;
  font-size: 16px;
}
.button.block {
  display: flex;
  width: 100%;
}
.button.iconOnly {
  width: 36px;
  padding: 0;
}
.button.iconOnly.large {
  width: 44px;
}
.button.active:not(.primary) {
  border-color: #419ecd;
  color: #2f81aa;
}
.button:disabled {
  opacity: 0.5;
  cursor: default;
}
.button .badge {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: #419ecd;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

body.notouch .button:hover:not(:disabled) {
  background-color: #f4f4f4;
}
body.notouch .button:hover:not(:disabled).primary {
  background-color: #2f81aa;
}
body.notouch .button:hover:not(:disabled).destructive.primary {
  background-color: rgb(170.8571428571, 60.7857142857, 36.1428571429);
}
body.notouch .button:hover:not(:disabled).plain {
  background: none;
  color: #2f81aa;
}

/**
 * Older names for primary buttons, drawn as Button kind="primary" (use that in
 * new code): .prominent, and .payButton for a form's full-width one. The Web
 * Reader's stylesheets (bookmarklet.scss) draw these names their own way.
 */
body.colorDark .payButton,
.payButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch body.colorDark .payButton,
body.touch .payButton {
  font-size: 16px;
}
body.colorDark .payButton,
.payButton {
  font-weight: 400;
  padding: 0 14px;
  line-height: normal;
  white-space: nowrap;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  border-color: transparent;
  background-color: #419ecd;
  color: #fff;
  font-weight: 500;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 44px;
  margin: 10px 0 0 0;
  padding: 6px 16px;
  font-size: 16px;
  font-weight: 600;
  white-space: normal;
  text-align: center;
  -webkit-appearance: none;
}
body.colorDark .payButton:disabled,
.payButton:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}

body.notouch .payButton:hover:not([disabled]) {
  background-color: #2f81aa;
}

body.colorDark.notouch .payButton:hover:not([disabled]) {
  background-color: #263f51;
}

input.payButton {
  width: 100%;
}

.payButton.lessProminent {
  background-color: transparent;
  color: #419ecd;
  border: 1px solid #419ecd;
}
.payButton.lessProminent:hover {
  background-color: #7be;
  color: #fff;
  border-color: #fff;
}

.payButton.validationError {
  background-color: #999;
}

body.notouch .payButton.validationError:hover {
  background-color: #777;
}

.payButton.googleSignInButton {
  background-color: transparent;
  color: #fff;
  position: relative;
  padding: 0;
  height: 40px;
  min-height: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
}

body.notouch .payButton.googleSignInButton:hover {
  background-color: transparent;
}

#newAccountButton {
  background-color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
#newAccountButton:hover:not([disabled]) {
  background-color: rgb(98.5555555556, 195.4444444444, 161.6666666667);
}

.prominent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch .prominent {
  font-size: 16px;
}
.prominent {
  font-weight: 400;
  padding: 0 14px;
  line-height: normal;
  white-space: nowrap;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  border-color: transparent;
  background-color: #419ecd;
  color: #fff;
  font-weight: 500;
  height: auto;
  min-height: 36px;
  padding: 4px 14px;
}
.prominent.large {
  min-height: 44px;
  font-size: 16px;
}

[disabled] .prominent,
.prominent[disabled] {
  opacity: 0.5;
  cursor: auto;
}

body.notouch .prominent[disabled]:hover {
  background-color: #419ecd;
}

body.notouch .prominent:hover:not([disabled]) {
  background-color: #2f81aa;
}

body.colorDark.notouch .prominent:hover:not([disabled]) {
  background-color: #263f51;
}

.prominentGreen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch .prominentGreen {
  font-size: 16px;
}
.prominentGreen {
  font-weight: 400;
  padding: 0 14px;
  line-height: normal;
  white-space: nowrap;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  border-color: transparent;
  background-color: #419ecd;
  color: #fff;
  font-weight: 500;
  background-color: #43b08a;
}
.prominentGreen:hover {
  background-color: rgb(59.9691358025, 157.5308641975, 123.5185185185) !important;
}

/* Low-emphasis green-on-pale button */
button.bright {
  padding: 3px 7px 3px 7px;
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  border: none;
  background-color: #f0fff0;
  color: #197033;
  cursor: pointer;
  position: relative;
  top: -10px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  button.bright {
    font-size: 12px;
  }
}
@media (max-width: 546px) {
  button.bright {
    font-size: 12px;
    padding: 2px 2px 2px 2px;
    margin: 2px;
    top: 0;
  }
}

body.notouch button.bright:hover {
  background-color: #fff;
}

/* Semi-transparent button that gains emphasis when its container is hovered */
button.subtle {
  color: #000;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0.4;
  padding: 4px 6px;
  margin: 0;
  cursor: pointer;
}

body.notouch .subtleContainer:hover button.subtle {
  opacity: 0.6;
}

body.notouch .subtleContainer:hover button.subtle:hover {
  background-color: #eee;
  opacity: 0.8;
}

.fadedHoverButton {
  opacity: 0.5;
}

body.notouch .fadedHoverButton:hover {
  opacity: 1;
}

/* Dialog / panel close buttons */
.closeButton,
.closeDialogButton {
  font-weight: bold;
  font-size: 20px;
  color: #999;
  position: absolute;
  top: 4px;
  right: 6px;
  cursor: pointer;
  border: none;
}

body.notouch .closeDialogButton:hover {
  color: #000;
}

.audioButton {
  display: inline-block;
  width: 20px;
  font-size: 28px;
  opacity: 0.5;
}

.audioButton.icon-spinner {
  font-size: 20px;
}

.audioButton.icon-spinner,
body.notouch .audioButton:hover {
  opacity: 1;
}

.audioButton.throbber {
  background-image: url("/content/throbber.gif");
}

/* A link to more of what's above it ("Manage my queue ›"): a plain button,
   right-aligned under it, rather than an underlined link with an arrow */
.moreLink {
  margin-bottom: 0;
  text-align: right;
}
.moreLink a {
  display: inline-block;
  padding: 6px 0;
  font-weight: 500;
  color: #419ecd;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.moreLink a::after {
  content: " ›";
  font-size: 1.2em;
  line-height: 1;
}

body#chatPage,
body#chatListPage {
  background-color: #f0eedf;
}
body#chatPage #mainContent h3,
body#chatListPage #mainContent h3 {
  margin-top: 28px;
}
body#chatPage .chatIntro,
body#chatListPage .chatIntro {
  font-style: italic;
}
body#chatPage .chatColumn,
body#chatListPage .chatColumn {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  padding: 52px 12px 88px 12px;
}
body#chatPage .chatOverlay,
body#chatListPage .chatOverlay {
  position: absolute;
  top: 0;
  right: 0;
  background: white;
  padding: 16px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
body#chatPage .feedback,
body#chatListPage .feedback {
  font-size: 14px;
  font-weight: bold;
  color: #bbb;
  margin-top: 10px;
}
body#chatPage .praiseMessage,
body#chatListPage .praiseMessage {
  font-size: 14px;
  font-weight: 700;
  color: #d2a514;
  text-align: right;
  margin-top: -6px;
  margin-bottom: 22px;
}
body#chatPage .originalText,
body#chatListPage .originalText {
  color: rgb(170.8571428571, 60.7857142857, 36.1428571429);
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
body#chatPage .changed,
body#chatListPage .changed {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  font-weight: bold;
  position: relative;
}
body#chatPage .endOfChat .changed,
body#chatListPage .endOfChat .changed {
  background-color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  position: relative;
}
body#chatPage .endOfChat .changed.reviewed,
body#chatListPage .endOfChat .changed.reviewed {
  background-color: transparent;
}
body#chatPage .chatStream,
body#chatListPage .chatStream {
  margin: 0 12px;
}
body#chatPage .chatStream .messageContainer,
body#chatListPage .chatStream .messageContainer {
  display: flex;
}
body#chatPage .chatStream .userMessageContainer,
body#chatListPage .chatStream .userMessageContainer {
  text-align: right;
}
body#chatPage .chatStream .waitingMessage,
body#chatListPage .chatStream .waitingMessage {
  font-style: italic;
  color: #bbb;
}
body#chatPage .chatStream .botMessage,
body#chatPage .chatStream .userMessage,
body#chatListPage .chatStream .botMessage,
body#chatListPage .chatStream .userMessage {
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  max-width: 90%;
  width: -moz-fit-content;
  width: fit-content;
  margin: 16px 0;
  position: relative;
}
body#chatPage .chatStream .botMessage .botName,
body#chatPage .chatStream .botMessage .userName,
body#chatPage .chatStream .userMessage .botName,
body#chatPage .chatStream .userMessage .userName,
body#chatListPage .chatStream .botMessage .botName,
body#chatListPage .chatStream .botMessage .userName,
body#chatListPage .chatStream .userMessage .botName,
body#chatListPage .chatStream .userMessage .userName {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}
body#chatPage .chatStream .botMessage .botName,
body#chatPage .chatStream .userMessage .botName,
body#chatListPage .chatStream .botMessage .botName,
body#chatListPage .chatStream .userMessage .botName {
  color: #db7a21;
}
body#chatPage .chatStream .botMessage .userName,
body#chatPage .chatStream .userMessage .userName,
body#chatListPage .chatStream .botMessage .userName,
body#chatListPage .chatStream .userMessage .userName {
  color: #419ecd;
}
body#chatPage .chatStream .userMessage,
body#chatListPage .chatStream .userMessage {
  display: inline-block;
}
body#chatPage .chatStream .userMessage .messageBody,
body#chatListPage .chatStream .userMessage .messageBody {
  text-align: left;
}
body#chatPage .chatStream .userMessage:after,
body#chatListPage .chatStream .userMessage:after {
  content: "";
  position: absolute;
  top: 0px;
  right: -8px;
  width: 12px;
  height: 20px;
  background-color: #fff;
  border-bottom-left-radius: 0;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}
body#chatPage .chatStream .botMessage:after,
body#chatListPage .chatStream .botMessage:after {
  content: "";
  position: absolute;
  top: 0px;
  left: -8px;
  width: 12px;
  height: 20px;
  background-color: #fff;
  border-bottom-right-radius: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
body#chatPage .startButton,
body#chatListPage .startButton {
  font-size: 16px;
  margin-bottom: 6px;
  padding-left: 20px;
  padding-right: 20px;
}
body#chatPage .chatInputContainerContainer,
body#chatListPage .chatInputContainerContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
body#chatPage .chatInputContainerContainer .chatInputContainer,
body#chatListPage .chatInputContainerContainer .chatInputContainer {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px 0;
  background-color: #f0eedf;
  border-top: 2px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
}
@media screen and (max-width: 600px) {
  body#chatPage .chatInputContainerContainer .chatInputContainer,
  body#chatListPage .chatInputContainerContainer .chatInputContainer {
    padding: 12px 6px;
  }
}
body#chatPage .chatInput,
body#chatListPage .chatInput {
  flex-grow: 1;
  padding: 12px;
}
body#chatPage .chatInput.invalid,
body#chatListPage .chatInput.invalid {
  border: 1px solid #d34d2f;
  outline: 1px solid #d34d2f;
}
body#chatPage h2,
body#chatListPage h2 {
  margin: 16px 0;
}
body#chatPage .chatHistory td,
body#chatListPage .chatHistory td {
  vertical-align: top;
  padding-bottom: 10px;
}
body#chatPage .deleteButton,
body#chatListPage .deleteButton {
  cursor: pointer;
  color: #111;
  opacity: 0.3;
  margin-left: 10px;
}
body#chatPage .deleteButton:hover,
body#chatListPage .deleteButton:hover {
  opacity: 0.6;
}
body#chatPage .translated,
body#chatListPage .translated {
  cursor: pointer;
}
body#chatPage .translated.selected,
body#chatListPage .translated.selected {
  box-shadow: inset 0 0 0 2px #43b08a;
}
body#chatPage .headerContainer,
body#chatListPage .headerContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
body#chatPage .headerContainer .sessionHeader,
body#chatListPage .headerContainer .sessionHeader {
  padding: 8px 12px;
}
body#chatPage .headerContainer .sessionHeader .sessionHeaderContent,
body#chatListPage .headerContainer .sessionHeader .sessionHeaderContent {
  max-width: 576px;
}
body#chatPage .correctionMenu,
body#chatListPage .correctionMenu {
  z-index: 1;
  position: absolute;
  bottom: 100%;
  background: #fff;
  padding: 4px 8px;
  border: 2px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
  text-align: left;
  white-space: nowrap;
  left: 50%;
  margin-left: -70px;
  margin-bottom: 8px;
}
body#chatPage .correctionMenu:after,
body#chatListPage .correctionMenu:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}
body#chatPage .correctionMenu:before,
body#chatListPage .correctionMenu:before {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  margin-left: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
}
body#chatPage .correctionMenu .alternativeTranslation,
body#chatListPage .correctionMenu .alternativeTranslation {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  padding-left: 16px;
}
body#chatPage .correctionMenu ul,
body#chatListPage .correctionMenu ul {
  margin: 0;
}
body#chatPage .correctionMenu button,
body#chatListPage .correctionMenu button {
  width: 100%;
  margin: 4px 0;
}
body#chatPage .dropdownMenuContainer .menuButton,
body#chatListPage .dropdownMenuContainer .menuButton {
  padding: 4px 16px;
}
body#chatPage .vocabSelector,
body#chatListPage .vocabSelector {
  display: block;
  border: 2px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
  padding: 16px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}
body#chatPage .vocabSelector .prominent,
body#chatListPage .vocabSelector .prominent {
  margin-right: 10px;
}
@media (max-width: 546px) {
  body#chatPage .vocabSelector,
  body#chatListPage .vocabSelector {
    padding: 8px;
  }
}
body#chatPage .vocabSelector .vocabTable,
body#chatListPage .vocabSelector .vocabTable {
  margin: 16px 0 8px;
}
body#chatPage .vocabSelector .vocabTable .selectAllLabelCell,
body#chatListPage .vocabSelector .vocabTable .selectAllLabelCell {
  text-align: right;
}
body#chatPage .vocabSelector .vocabTable .selectAllLabelCell label,
body#chatListPage .vocabSelector .vocabTable .selectAllLabelCell label {
  color: #419ecd;
}
body#chatPage .vocabSelector .vocabTable td,
body#chatListPage .vocabSelector .vocabTable td {
  padding-bottom: 8px;
}
@media (max-width: 546px) {
  body#chatPage .vocabSelector .vocabTable,
  body#chatListPage .vocabSelector .vocabTable {
    font-size: 14px;
  }
}
body#chatPage .vocabSelector .translation,
body#chatListPage .vocabSelector .translation {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  padding-left: 16px;
}
body#chatPage .vocabSelector button:disabled,
body#chatListPage .vocabSelector button:disabled {
  background-color: #eee;
  color: #bbb;
  cursor: not-allowed;
}
body#chatPage .vocabSelector button.saved:disabled,
body#chatListPage .vocabSelector button.saved:disabled {
  background-color: transparent;
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  cursor: default;
}
body#chatPage .chatInputWrapper,
body#chatListPage .chatInputWrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 6px;
}
body#chatPage .chatInputWrapper .autoComplete,
body#chatListPage .chatInputWrapper .autoComplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  background: #fff;
  padding: 4px 8px;
  border: 2px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
  text-align: left;
  white-space: nowrap;
  margin-bottom: 8px;
}
body#chatPage .chatInputWrapper .autoCompleteSuggestion,
body#chatListPage .chatInputWrapper .autoCompleteSuggestion {
  padding: 4px 8px;
  margin: 2px 0;
  cursor: pointer;
}
body#chatPage .chatInputWrapper .autoCompleteSuggestion:hover,
body#chatListPage .chatInputWrapper .autoCompleteSuggestion:hover {
  background-color: #eee;
}
body#chatPage .chatComplete,
body#chatListPage .chatComplete {
  margin: 32px 0;
  text-align: center;
}
body#chatPage .playTTSButton,
body#chatListPage .playTTSButton {
  -webkit-text-decoration: none;
  text-decoration: none;
  margin-right: 8px;
}
body#chatPage .chatUpsell,
body#chatListPage .chatUpsell {
  max-width: 440px;
  margin: 0 auto;
  padding-bottom: 24px;
}
body#chatPage .chatUpsell .chatUpsellRabbit,
body#chatListPage .chatUpsell .chatUpsellRabbit {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 auto 4px;
  mix-blend-mode: multiply;
}
body#chatPage .chatUpsell .chatUpsellBadge,
body#chatListPage .chatUpsell .chatUpsellBadge {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 8px;
  padding: 2px 10px;
  border-radius: 12px;
  background-color: rgb(231.9645061728, 240.5354938272, 237.5474430853);
  color: rgb(31.8456790123, 83.6543209877, 65.5925925926);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body#chatPage .chatUpsell h1,
body#chatListPage .chatUpsell h1 {
  margin: 0 0 8px;
  font-size: 32px;
  text-align: center;
}
body#chatPage .chatUpsell .chatUpsellIntro,
body#chatListPage .chatUpsell .chatUpsellIntro {
  margin: 0 0 20px;
  text-align: center;
  text-wrap: balance;
}
body#chatPage .chatUpsell .chatUpsellBenefits,
body#chatListPage .chatUpsell .chatUpsellBenefits {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
body#chatPage .chatUpsell .chatUpsellBenefits li,
body#chatListPage .chatUpsell .chatUpsellBenefits li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
body#chatPage .chatUpsell .chatUpsellBenefits i,
body#chatListPage .chatUpsell .chatUpsellBenefits i {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(231.9645061728, 240.5354938272, 237.5474430853);
  color: rgb(31.8456790123, 83.6543209877, 65.5925925926);
  font-size: 18px;
  line-height: 40px;
  text-align: center;
}
body#chatPage .chatUpsell .chatUpsellBenefits strong,
body#chatListPage .chatUpsell .chatUpsellBenefits strong {
  font-weight: 500;
}
body#chatPage .chatUpsell .chatUpsellBenefits p,
body#chatListPage .chatUpsell .chatUpsellBenefits p {
  margin: 2px 0 0;
  color: #555;
}
body#chatPage .chatUpsell h2,
body#chatListPage .chatUpsell h2 {
  margin: 40px 0 16px;
  font-size: 20px;
  text-align: center;
}
body#chatPage .chatUpsell blockquote,
body#chatListPage .chatUpsell blockquote {
  margin: 0 0 12px;
  padding: 16px;
  border-radius: 12px;
  background-color: #fff;
  font-style: italic;
}
body#chatPage .chatUpsell blockquote::before,
body#chatListPage .chatUpsell blockquote::before {
  content: "“";
}
body#chatPage .chatUpsell blockquote::after,
body#chatListPage .chatUpsell blockquote::after {
  content: "”";
}
body#chatPage .returnButton,
body#chatListPage .returnButton {
  font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
}

body#chatPage.basicLatinFirstLanguage .correctionMenu .alternativeTranslation, body#chatListPage.basicLatinFirstLanguage .correctionMenu .alternativeTranslation, body#chatPage.basicLatinFirstLanguage .vocabSelector .translation, body#chatListPage.basicLatinFirstLanguage .vocabSelector .translation {
  font-family: "Delius", sans-serif;
}

body#chatPage.normalTranslationFont .correctionMenu .alternativeTranslation, body#chatListPage.normalTranslationFont .correctionMenu .alternativeTranslation, body#chatPage.normalTranslationFont .vocabSelector .translation, body#chatListPage.normalTranslationFont .vocabSelector .translation {
  font-family: Jost, sans-serif;
}

body#chatPage .vocabSavedDialog .dialogHeading i {
  color: #43b08a;
}

body#checkout2Page .toggle-container {
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
body#checkout2Page .toggle-container .discount-pill {
  position: absolute;
  left: 100%;
  top: 4px;
  margin-left: 10px;
  color: #fff;
  padding: 4px 11px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-weight: 600;
  opacity: 0.7;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
body#checkout2Page .toggle-container .discount-pill.active {
  opacity: 1;
  color: #43b08a;
  background-color: #fff;
}
@media (max-width: 546px) {
  body#checkout2Page .toggle-container {
    font-size: 80%;
  }
  body#checkout2Page .toggle-container .toggle-switch {
    width: 200px;
    height: 36px;
  }
  body#checkout2Page .toggle-container .toggle-switch .toggle-pill {
    width: 100px;
  }
}
@media (max-width: 546px) {
  body#checkout2Page #entirePage {
    background-color: #43b08a;
  }
}
@media (max-width: 546px) {
  body#checkout2Page .checkoutPage2Contents {
    padding: 0 16px;
  }
}
body#checkout2Page #header {
  height: 320px;
}
@media (max-width: 546px) {
  body#checkout2Page #header {
    height: auto;
  }
}
body#checkout2Page #header .rabbitLogo {
  width: 40px;
  height: 36px;
  margin-right: 8px;
  position: relative;
  top: -4px;
}
@media (max-width: 546px) {
  body#checkout2Page #header .rabbitLogo {
    width: 32px;
    height: 28px;
    top: -3px;
    margin-right: 6px;
  }
}
body#checkout2Page #header .logoLink {
  font-size: 20px;
  font-family: "Jost", sans-serif;
  color: #fff;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
  vertical-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media (max-width: 546px) {
  body#checkout2Page #header .logoLink {
    font-size: 16px;
  }
}
body#checkout2Page #header h1 {
  font-size: 48px;
  font-family: "Jost", sans-serif;
  color: #fff;
  font-weight: 600;
  margin: 20px auto;
  text-align: center;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page #header h1 {
    font-size: 42px;
  }
}
@media (max-width: 546px) {
  body#checkout2Page #header h1 {
    font-size: 24px;
  }
}
body#checkout2Page .planContainer2 {
  font-family: "Jost", sans-serif;
  margin-top: -100px;
  text-align: center;
}
@media (max-width: 546px) {
  body#checkout2Page .planContainer2 {
    margin-top: 0;
  }
}
body#checkout2Page .planContainer2 .callout {
  max-width: 90%;
  position: relative;
  margin: 0 auto 20px;
  font-size: 18px;
  top: -20px;
}
body#checkout2Page .planContainer2 .callout.verificationNotice {
  background: #ff4444;
  color: #fff;
  margin: 20px auto;
  font-size: 18px;
}
body#checkout2Page .planContainer2 .callout.lowResourceCallout {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 14px;
  text-align: left;
  max-width: 600px;
}
@media (max-width: 546px) {
  body#checkout2Page .planContainer2 .callout {
    top: 0;
  }
}
body#checkout2Page .planContainer2 .plan2 {
  background-color: #fff;
  padding: 32px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  width: 355px;
  border-radius: 12px;
  display: inline-block;
  position: relative;
  margin: 0 8px;
  text-align: left;
  box-sizing: border-box;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page .planContainer2 .plan2 {
    width: 250px;
    padding: 16px;
  }
}
@media (max-width: 546px) {
  body#checkout2Page .planContainer2 .plan2 {
    width: 100%;
    padding: 16px;
    margin: 6px 0;
  }
}
body#checkout2Page .planContainer2 .plan2 .saveNotice {
  background-color: #e5ffcb;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  position: absolute;
  top: 28px;
  right: 0;
  padding: 8px 24px;
  font-size: 20px;
  font-weight: 600;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page .planContainer2 .plan2 .saveNotice {
    font-size: 16px;
    padding: 6px 16px;
    top: 16px;
  }
}
@media (max-width: 546px) {
  body#checkout2Page .planContainer2 .plan2 .saveNotice {
    top: 16px;
  }
}
body#checkout2Page .planContainer2 .plan2 .billingPeriod {
  font-size: 24px;
  color: #777;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page .planContainer2 .plan2 .billingPeriod {
    font-size: 22px;
  }
}
@media (max-width: 546px) {
  body#checkout2Page .planContainer2 .plan2 .billingPeriod {
    font-size: 18px;
  }
}
body#checkout2Page .planContainer2 .plan2 .price {
  font-size: 60px;
  font-weight: 600;
  margin: 5px 0;
}
body#checkout2Page .planContainer2 .plan2 .price small {
  font-size: 14px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page .planContainer2 .plan2 .price small {
    font-size: 14px;
  }
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page .planContainer2 .plan2 .price {
    font-size: 48px;
  }
}
body#checkout2Page .planContainer2 .plan2 .yearlyCostBreakdown {
  font-size: 18px;
  font-weight: 400;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page .planContainer2 .plan2 .yearlyCostBreakdown {
    font-size: 16px;
  }
}
body#checkout2Page .planContainer2 .plan2 .yearlyCostBreakdown .yearlyCost {
  font-weight: 600;
  float: right;
}
body#checkout2Page .planContainer2 .plan2 .yearlyCostBreakdown .yearlyCost .crossedOut {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
  color: #777;
  font-weight: 400;
  margin-right: 4px;
}
body#checkout2Page .planContainer2 .plan2 .payNowButton {
  font-family: "Jost", sans-serif;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  background-color: #43b08a;
  padding: 10px;
  margin-top: 10px;
  border: 0;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
body#checkout2Page .planContainer2 .plan2 .payNowButton:hover {
  background-color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
body#checkout2Page .planContainer2 .plan2 .payNowButton.secondary {
  background-color: #eee;
  color: #111;
}
body#checkout2Page .planContainer2 .plan2 .payNowButton.secondary:hover {
  background-color: #ccc;
}
body#checkout2Page h2 {
  font-size: 34px;
  margin: 30px 0 26px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page h2 {
    font-size: 30px;
  }
}
@media (max-width: 546px) {
  body#checkout2Page h2 {
    color: #fff;
    font-size: 20px;
    margin: 20px 0;
    display: block;
  }
}
body#checkout2Page .featureTable {
  background-color: #fff;
  padding: 28px;
  font-family: "Jost", sans-serif;
  width: 800px;
  border-radius: 8px;
  margin: 0 auto 30px;
  font-size: 16px;
  max-width: 90%;
  box-sizing: border-box;
}
body#checkout2Page .featureTable .tableFooterInfo,
body#checkout2Page .featureTable table {
  width: 100%;
}
body#checkout2Page .featureTable .tableFooterInfo {
  font-size: 14px;
  text-align: left;
  margin-bottom: 0;
}
body#checkout2Page .featureTable h3 {
  font-size: 24px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page .featureTable h3 {
    font-size: 22px;
  }
}
body#checkout2Page .featureTable .dividerLine {
  height: 2px;
  background-color: #f0eedf;
}
body#checkout2Page .featureTable td,
body#checkout2Page .featureTable th {
  padding: 10px 20px;
}
body#checkout2Page .featureTable td:first-child,
body#checkout2Page .featureTable th:first-child {
  padding-left: 0;
  text-align: left;
}
body#checkout2Page .featureTable td:last-child,
body#checkout2Page .featureTable th:last-child {
  padding-right: 0;
}
body#checkout2Page .featureTable th {
  padding-top: 0;
  text-align: center;
}
body#checkout2Page .mobileFeatureList2 {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  padding: 16px;
  border-radius: 12px;
  font-size: 14px;
  margin: 0 0 30px;
  text-align: left;
  display: none;
}
body#checkout2Page .mobileFeatureList2 .subtle {
  color: #777;
  position: relative;
  top: -6px;
}
body#checkout2Page .mobileFeatureList2 .checkout-check-circle {
  position: relative;
  top: 4px;
}
@media (max-width: 546px) {
  body#checkout2Page .mobileFeatureList2 {
    display: block;
  }
}
body#checkout2Page .mobileMessages {
  color: #fff;
  font-size: 14px;
  text-align: left;
  margin-bottom: 30px;
  display: none;
}
body#checkout2Page .mobileMessages .larger {
  font-size: 16px;
}
@media (max-width: 546px) {
  body#checkout2Page .mobileMessages {
    display: block;
  }
}
body#checkout2Page .tableFooterCallout {
  background-color: #d8dfff;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
}
body#checkout2Page .checkout-check-circle {
  background: url("/content/checkout-check-circle.svg");
}
body#checkout2Page .checkout-x-circle {
  background: url("/content/checkout-x-circle.svg");
}
body#checkout2Page .checkout-x-circle,
body#checkout2Page .checkout-check-circle {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-size: contain;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#checkout2Page .checkout-x-circle,
  body#checkout2Page .checkout-check-circle {
    width: 20px;
    height: 20px;
  }
}

body#checkoutPage {
  background-color: #f0eedf;
}
body#checkoutPage #mainPageContent {
  max-width: 605px;
  margin: 0 auto;
  text-align: center;
}
body#checkoutPage .checkoutInfo {
  font-size: 14px;
  text-align: left;
  padding: 0 10px;
}
body#checkoutPage h2 {
  margin-top: 2px;
  margin-bottom: 8px;
}
body#checkoutPage #loadingStripeThrobber {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  margin-left: -8px;
}
body#checkoutPage .withTip {
  display: none;
}
body#checkoutPage .quote {
  font-size: 100%;
}
body#checkoutPage .paymentsClosedMessage {
  padding: 80px 0;
}
body#checkoutPage .callout.verificationNotice {
  background: #ff4444;
  color: #fff;
  margin: 20px auto;
  font-size: 18px;
}
body#checkoutPage #justVerifiedEmail {
  color: #fff;
  margin: 20px auto;
  font-size: 18px;
}

.subtlePayPal {
  margin-top: 10px;
  border: none;
  opacity: 0.7;
  float: right;
}

body.notouch .subtlePayPal:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  opacity: 1;
  background-color: inherit;
}

.plan .payButton.subtlePayPalStripeButton {
  padding-left: 35px;
  /* not sure why this nested media query doesn't work?
  @media mobile {
    padding-left: 55px;
  }
  */
}

.stripePayment {
  text-align: left;
  padding-left: 50px;
}

.plan.suggested {
  background-color: #fff;
  border: 2px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
}

body.colorDark .plan.suggested {
  background-color: #325b57;
}

.suggestedPlanHint {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 5px;
  right: 5px;
  text-align: center;
  padding: 10px;
  color: white;
  background-color: #43b08a;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

body.redesign .featureGrid {
  font-weight: 300;
}

.mobileFeatureList {
  display: none;
}

.featureGrid.checkoutPage {
  text-align: left;
  margin: 15px auto 40px auto;
}

.featureGrid.checkoutPage td {
  padding: 8px 25px;
  text-align: center;
}

.featureGrid.checkoutPage td:first-child {
  text-align: left;
  padding-left: 0;
}

@media (max-width: 546px) {
  .plan .payButton.subtlePayPalStripeButton {
    padding-left: 55px;
  }
  .mobileFeatureList {
    display: block;
    text-align: left;
    max-width: 400px;
    margin: 20px;
    padding: 30px 0;
    list-style: disc;
  }
  .mobileFeatureList li {
    margin: 10px 10px 10px 20px;
  }
  .plan.suggested.yearly {
    margin-top: 60px;
  }
  .checkoutInfo {
    text-align: left;
  }
}
body#readerPage.showContextTranslationStrip #footer {
  bottom: 44px;
}
body#readerPage.showContextTranslationStrip #contextTranslationStripContainer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background-color: #f0eedf;
  border-top: 1px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
  z-index: 30;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip {
  height: 100%;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 0 12px;
  font-size: 14px;
  color: #151513;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__label {
  font-weight: 400;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__counter {
  color: #151513;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__learnMore {
  color: #43b08a;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  cursor: pointer;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__learnMore:hover {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 12px;
  border: none;
  background-color: #bbb;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__toggleKnob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left 0.15s ease;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__toggle.is-on {
  background-color: #43b08a;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__toggle.is-on .contextTranslationStrip__toggleKnob {
  left: 18px;
}
body#readerPage.showContextTranslationStrip .contextTranslationStrip__toggle.is-disabled {
  cursor: pointer;
  opacity: 0.7;
}
@media (max-width: 546px) {
  body#readerPage.showContextTranslationStrip .contextTranslationStrip__inner {
    gap: 8px;
    font-size: 12px;
    padding: 0 8px;
  }
  body#readerPage.showContextTranslationStrip .contextTranslationStrip__label {
    flex-shrink: 1;
    line-height: 1.1;
  }
}
body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip {
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
  width: 320px;
  color: #111;
  font-size: 14px;
}
body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip p {
  margin: 0 0 12px;
}
body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
}
body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #ccc;
}
@media (max-width: 546px) {
  body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip {
    width: 280px;
  }
}
body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip__upgrade {
  background-color: #43b08a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip__upgrade:hover {
  background-color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip__continue {
  background: none;
  border: none;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  padding: 4px;
}
body#readerPage.showContextTranslationStrip .contextTranslationExhaustedTooltip__continue:hover {
  color: #111;
}
body#readerPage.showContextTranslationStrip.colorDark #contextTranslationStripContainer {
  background-color: #222;
  border-top-color: #333;
}
body#readerPage.showContextTranslationStrip.colorDark .contextTranslationStrip__inner {
  color: #aaa;
}
body#readerPage.showContextTranslationStrip.colorDark .contextTranslationStrip__counter {
  color: #aaa;
}
body#readerPage.showContextTranslationStrip.colorDark .contextTranslationExhaustedTooltip {
  background-color: #333;
  border-color: #444;
  color: #aaa;
}
body#readerPage.showContextTranslationStrip.colorDark .contextTranslationExhaustedTooltip::after {
  border-top-color: #333;
}
body#readerPage.showContextTranslationStrip.colorDark .contextTranslationExhaustedTooltip::before {
  border-top-color: #444;
}
body#readerPage.showContextTranslationStrip.colorDark .contextTranslationExhaustedTooltip__continue {
  color: #999;
}
body#readerPage.showContextTranslationStrip.colorDark .contextTranslationExhaustedTooltip__continue:hover {
  color: #aaa;
}

body#dashboardPage .forumCallout {
  text-align: center;
}
body#dashboardPage .trustpilotCallout {
  position: relative;
  padding-left: 44px;
  padding-right: 44px;
  text-align: center;
}
body#dashboardPage .trustpilotCallout .message {
  display: block;
}
body#dashboardPage .trustpilotCallout .closeButton {
  background: transparent;
  color: #fff;
  opacity: 0.5;
  padding: 6px 12px;
  top: 0;
  right: 0;
}
body#dashboardPage .trustpilotCallout .closeButton:hover {
  opacity: 0.8;
}
body#dashboardPage .dashboardRow {
  display: flex;
  display: -webkit-flex;
  gap: 16px;
  flex-direction: row;
  justify-content: space-around;
  margin: 22px 0;
}
@media (max-width: 546px) {
  body#dashboardPage .dashboardRow {
    /* because flex-wrap doesn't seem to be working on Safari */
    flex-direction: column;
    gap: 22px;
  }
}
body#dashboardPage .dashboardRow {
  align-items: stretch;
  -webkit-align-items: stretch;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
body#dashboardPage .dashboardRow .dashboardPanel {
  flex: 1;
  -webkit-flex: 1;
  min-width: 200px;
  max-width: 440px;
  margin: 0;
  padding: 0;
  border: none;
}
body#dashboardPage a .continueReading,
body#dashboardPage a .practiceFlashcards {
  -webkit-text-decoration: none;
  text-decoration: none;
}
body#dashboardPage .dashboardPanel.continueReading,
body#dashboardPage .dashboardPanel.practiceFlashcards {
  border-radius: 12px;
  text-align: left;
}
body#dashboardPage .dashboardPanel.continueReading p:not(.moreLink),
body#dashboardPage .dashboardPanel.practiceFlashcards p:not(.moreLink) {
  text-align: left;
}
body#dashboardPage .practiceFlashcards {
  display: flex;
  flex-direction: column;
}
body#dashboardPage .practiceFlashcards .practiceButton {
  margin-top: 15px;
  background-color: #419ecd;
  color: #fff;
  min-height: 84px;
  display: flex;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  -webkit-text-decoration: none;
  text-decoration: none;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#dashboardPage .practiceFlashcards .practiceButton {
    min-height: 80px;
  }
}
@media (max-width: 546px) {
  body#dashboardPage .practiceFlashcards .practiceButton {
    min-height: 68px;
  }
}
body#dashboardPage .practiceFlashcards .practiceButton:hover, body#dashboardPage .practiceFlashcards .practiceButton:focus-visible {
  box-shadow: 0 0 0 4px #419ecd;
}
body#dashboardPage .practiceFlashcards .practiceButton:hover .buttonIcon, body#dashboardPage .practiceFlashcards .practiceButton:focus-visible .buttonIcon {
  filter: brightness(1.1);
}
body#dashboardPage .practiceFlashcards .practiceButton .buttonIcon {
  width: 85px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2f81aa;
}
@media (min-width: 546.02px) and (max-width: 754px), (max-width: 546px) {
  body#dashboardPage .practiceFlashcards .practiceButton .buttonIcon {
    width: 70px;
  }
}
body#dashboardPage .practiceFlashcards .practiceButton img {
  width: 55px;
  display: block;
}
@media (min-width: 546.02px) and (max-width: 754px), (max-width: 546px) {
  body#dashboardPage .practiceFlashcards .practiceButton img {
    width: 45px;
  }
}
body#dashboardPage .practiceFlashcards .practiceButton .buttonTitle {
  align-self: center;
  padding: 14px 15px;
}
body#dashboardPage .dashboardPanel {
  padding: 22px 0;
  position: relative;
}
body#dashboardPage .dashboardPanel p:not(.moreLink),
body#dashboardPage .dashboardPanel h2 {
  text-align: center;
}
body#dashboardPage .dashboardPanel .continueSnippet {
  font-size: 90%;
}
body#dashboardPage .dashboardPanel img {
  width: 100%;
  display: none;
}
body#dashboardPage .dashboardPanel .progressChartView {
  position: relative;
  background-color: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 546px) {
  body#dashboardPage .dashboardPanel .progressChartView {
    padding: 10px;
    border-radius: 8px;
  }
}
body#dashboardPage .dashboardPanel .progressChartView .weeklyChart {
  box-sizing: border-box;
  width: 100%;
  min-height: 200px;
}
body#dashboardPage .dashboardPanel .progressChartView .weeklyChartLegend {
  position: absolute;
  top: 15px;
  left: 76px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #eee;
  padding: 3px;
  border-radius: 4px;
  font-size: 90%;
  font-weight: bold;
  text-align: left;
}
body#dashboardPage .dashboardPanel .progressChartView .weeklyChartLegend table {
  border-collapse: separate;
}
body#dashboardPage .dashboardPanel .progressChartView .weeklyChartLegend table .colorCell {
  position: relative;
  background-color: #fff;
  width: 12px;
}
body#dashboardPage .dashboardPanel .progressChartView .weeklyChartLegend table .colorCell div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
body#dashboardPage .dashboardPanel .progressChartView .weeklyChartLegend table .textCell {
  padding-left: 8px;
}
body#dashboardPage .dashboardPanel .streakPanelContainer {
  background-color: #43b08a;
  border-radius: 12px;
}
body#dashboardPage .dashboardPanel .streakPanel {
  border-radius: 8px;
  padding: 6px 8px 8px 8px;
  line-height: 1.9;
  margin: 10px auto;
  color: #fff;
  text-align: center;
  position: relative;
  max-width: 400px;
}
body#dashboardPage .dashboardPanel .streakPanel table {
  margin: 0 auto;
}
body#dashboardPage .dashboardPanel .streakPanel th,
body#dashboardPage .dashboardPanel .streakPanel td {
  text-align: center;
  width: 50px;
  padding: 5px;
}
body#dashboardPage .dashboardPanel .streakPanel th.barCell,
body#dashboardPage .dashboardPanel .streakPanel td.barCell {
  padding: 0 5px;
}
body#dashboardPage .dashboardPanel .streakPanel th img,
body#dashboardPage .dashboardPanel .streakPanel td img {
  display: inline-block;
  width: 22px;
}
body#dashboardPage .dashboardPanel .streakPanel .fireIcon {
  opacity: 0.2;
  transform: scale(0.7);
}
body#dashboardPage .dashboardPanel .streakPanel .fireIcon.goalMet {
  opacity: 1;
  transform: scale(1);
}
body#dashboardPage .dashboardPanel .streakPanel .barChartLabels {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 15px 20px;
}
@media (max-width: 546px) {
  body#dashboardPage .dashboardPanel .streakPanel .barChartLabels {
    margin: 10px 6px 20px;
  }
}
body#dashboardPage .dashboardPanel .streakPanel .barChartLabel {
  white-space: nowrap;
}
body#dashboardPage .dashboardPanel .streakPanel .label {
  display: inline-block;
  white-space: break-spaces;
  text-align: left;
  line-height: 1.3;
  vertical-align: middle;
  font-size: 14px;
  font-weight: bold;
}
@media (max-width: 546px) {
  body#dashboardPage .dashboardPanel .streakPanel .label {
    font-size: 10px;
  }
}
body#dashboardPage .dashboardPanel .streakPanel .emptyBar,
body#dashboardPage .dashboardPanel .streakPanel .wordsReadBar,
body#dashboardPage .dashboardPanel .streakPanel .wordsPracticedBar,
body#dashboardPage .dashboardPanel .streakPanel .streakRepairBar {
  width: 25px;
  margin: 0 auto;
}
@media (max-width: 546px) {
  body#dashboardPage .dashboardPanel .streakPanel .emptyBar,
  body#dashboardPage .dashboardPanel .streakPanel .wordsReadBar,
  body#dashboardPage .dashboardPanel .streakPanel .wordsPracticedBar,
  body#dashboardPage .dashboardPanel .streakPanel .streakRepairBar {
    width: 20px;
  }
}
body#dashboardPage .dashboardPanel .streakPanel .wordsReadBar,
body#dashboardPage .dashboardPanel .streakPanel .wordsPracticedBar,
body#dashboardPage .dashboardPanel .streakPanel .streakRepairBar {
  position: relative;
  z-index: 1;
}
body#dashboardPage .dashboardPanel .streakPanel .wordsPracticedLabelSquare,
body#dashboardPage .dashboardPanel .streakPanel .wordsReadLabelSquare {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
}
@media (max-width: 546px) {
  body#dashboardPage .dashboardPanel .streakPanel .wordsPracticedLabelSquare,
  body#dashboardPage .dashboardPanel .streakPanel .wordsReadLabelSquare {
    width: 15px;
  }
}
body#dashboardPage .dashboardPanel .streakPanel .barChart {
  position: relative;
}
body#dashboardPage .dashboardPanel .streakPanel .barChart .goalLine,
body#dashboardPage .dashboardPanel .streakPanel .barChart .bottomLine {
  position: absolute;
  left: 16px;
  right: 16px;
}
@media (max-width: 546px) {
  body#dashboardPage .dashboardPanel .streakPanel .barChart .goalLine,
  body#dashboardPage .dashboardPanel .streakPanel .barChart .bottomLine {
    left: 8px;
    right: 8px;
  }
}
body#dashboardPage .dashboardPanel .streakPanel .barChart .goalLine {
  height: 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.6);
}
body#dashboardPage .dashboardPanel .streakPanel .barChart .bottomLine {
  top: 100%;
  height: 2px;
  background: #fff;
}
body#dashboardPage .dashboardPanel .streakPanel .barCell {
  position: relative;
}
body#dashboardPage .dashboardPanel .streakPanel .barCell .barCellTooltip {
  background-color: white;
  border-radius: 4px;
  bottom: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: none;
  font-size: 14px;
  padding: 12px;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  color: #000;
  left: -20px;
}
body#dashboardPage .dashboardPanel .streakPanel .barCell .barCellTooltip.right {
  left: auto;
  right: -20px;
}
body#dashboardPage .dashboardPanel .streakPanel .barCell .barCellTooltip h3 {
  font-weight: bold;
}
body#dashboardPage .dashboardPanel .streakPanel .barCell .barCellTooltip .content {
  margin-top: 10px;
  line-height: 1.5;
}
body#dashboardPage .dashboardPanel .streakPanel .barCell .barCellTooltip .streakRepairedNote {
  margin-top: 8px;
  color: #db7a21;
  font-weight: bold;
}
body#dashboardPage .dashboardPanel .streakPanel .barCell:hover {
  filter: brightness(1.2);
}
body#dashboardPage .dashboardPanel .streakPanel .barCell:hover .barCellTooltip {
  display: block;
}
body#dashboardPage .dashboardPanel .streakPanel .wordsReadLabelSquare,
body#dashboardPage .dashboardPanel .streakPanel .wordsReadBar {
  background: #0cf182;
}
body#dashboardPage .dashboardPanel .streakPanel .wordsPracticedLabelSquare,
body#dashboardPage .dashboardPanel .streakPanel .wordsPracticedBar {
  background: #296d7d;
}
body#dashboardPage .dashboardPanel .streakPanel .streakRepairBar {
  background: #f59237;
}
body#dashboardPage .dashboardPanel .streakPanel .goalLineLabelExample {
  display: inline-block;
  width: 20px;
  border-top: 2px dashed rgba(255, 255, 255, 0.6);
  vertical-align: middle;
  margin-right: 6px;
}
body#dashboardPage .dashboardPanel .streakPanel .emptyBar {
  background: transparent;
}
body#dashboardPage .dashboardPanel:last-child {
  border: none;
}
body#dashboardPage .panelBodyText {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/** Modal dialogs and full-screen overlays */
#modalBackground {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
  overflow-x: none;
  overflow-y: auto;
}
#modalBackground.fullScreen {
  background-color: #fff;
}

.modalNoOverflow {
  overflow: hidden;
}

.centralDialog {
  display: none;
  position: absolute;
  top: 5%;
  left: 50%;
  padding: 16px;
  margin-left: -345px;
  width: 690px;
  max-width: 690px;
  min-width: 482px;
  box-sizing: border-box;
  color: #000;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  border-radius: 12px;
}
.centralDialog.wide {
  width: 760px;
  max-width: 760px;
  margin-left: -380px;
}
@media (min-width: 1020px) {
  .centralDialog.wide {
    width: 870px;
    max-width: 870px;
    margin-left: -435px;
  }
}
.centralDialog.fullScreen {
  box-shadow: none;
  max-width: 700px;
  margin-left: -350px;
  padding-left: 0;
  padding-right: 0;
}
.centralDialog.greenBackground {
  background: linear-gradient(to bottom, #43b08a 293px, #fff 293px, #fff);
  --horizontal-padding: 40px;
  padding: 16px 40px 26px;
  padding: 16px var(--horizontal-padding) 26px;
  border-radius: 16px;
  overflow: clip;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .centralDialog.greenBackground {
    --horizontal-padding: 26px;
    padding: 14px 26px 22px;
    padding: 14px var(--horizontal-padding) 22px;
  }
}
@media (max-width: 546px) {
  .centralDialog.greenBackground {
    background: #43b08a;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    margin-left: auto;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    --horizontal-padding: 16px;
    padding: 16px 16px;
    padding: 16px var(--horizontal-padding);
    border-radius: 0;
  }
}
.centralDialog.greenBackground .closeDialogButton {
  color: #fff;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 20px;
  right: 20px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .centralDialog.greenBackground .closeDialogButton {
    top: 12px;
    right: 8px;
  }
}
@media (max-width: 546px) {
  .centralDialog.greenBackground .closeDialogButton {
    top: 8px;
    right: 8px;
  }
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .centralDialog {
    max-width: 522px;
    margin-left: -261px;
    padding: 16px 10px;
  }
  .centralDialog.wide {
    width: 550px;
    max-width: 550px;
    margin-left: -275px;
    padding: 16px 8px;
  }
  .centralDialog.fullScreen {
    top: 20px;
    max-width: 480px;
    margin-left: -240px;
  }
}
@media (max-width: 546px) {
  .centralDialog {
    max-width: 304px;
    min-width: 280px;
    margin-left: -157px;
    padding: 16px 18px;
    font-size: 85%;
    width: auto;
  }
  .centralDialog.fullScreen {
    top: 10px;
    left: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: calc(100% - 10px);
    margin: 0;
    padding: 16px 18px 32px;
    border-radius: 16px 16px 0 0;
    animation: sheetUp 350ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .centralDialog.fullScreen .closeDialogButton {
    top: 20px;
    right: 8px;
  }
}
.centralDialog:focus {
  outline: none;
}

@media (max-width: 546px) {
  #modalBackground.fullScreen {
    background-color: rgba(0, 0, 0, 0.4);
    animation: dimIn 350ms ease-out;
  }
  #modalBackground.fullScreen.closing {
    pointer-events: none;
    animation: dimOut 300ms ease-in forwards;
  }
  .closingSheet {
    pointer-events: none;
  }
  .closingSheet .centralDialog.fullScreen {
    animation: sheetDown 300ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
}
@keyframes dimIn {
  from {
    background-color: transparent;
  }
}
@keyframes dimOut {
  to {
    background-color: transparent;
  }
}
@keyframes sheetDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes sheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.centralDialog h2,
.centralDialog h3 {
  margin-right: 20px;
}

.centralDialog h2 {
  margin-bottom: 10px;
}

.centralDialog ul.buttonGroup {
  display: block;
  margin: 20px auto 0 auto;
  padding: 0;
  width: 300px;
}

.centralDialog ul.buttonGroup a {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: black;
}

.centralDialog ul.buttonGroup a li {
  border-color: #bbb;
}

.centralDialog ul.buttonGroup li {
  border-style: solid;
  border-width: 1px;
  border-color: #bbb;
  background-color: #fff;
  padding: 5px;
  margin: 5px;
}

.centralDialog textarea {
  width: 100%;
  resize: vertical;
}

.centralDialog.startReading {
  background-color: #f0eedf;
  padding: 20px;
}
.centralDialog.startReading .bookCoverEasy,
.centralDialog.startReading .bookCoverMedium {
  margin: 6px 0 20px;
}

/* Dialog content building blocks */
.dialog .dialogHeading {
  margin-top: 0;
  margin-bottom: 20px;
}

.dialogError {
  background-color: rgb(246.619047619, 221.0952380952, 215.380952381);
  border: 1px solid rgb(237.7142857143, 185.0714285714, 173.2857142857);
  color: rgb(170.8571428571, 60.7857142857, 36.1428571429);
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 14px;
}

.dialogSuccess {
  text-align: center;
  padding: 20px;
}
.dialogSuccess p {
  margin: 10px 0;
  font-size: 16px;
}
.dialogSuccess p:first-child {
  font-size: 18px;
  font-weight: 600;
  color: #43b08a;
}

.dialogActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.dialogActions button {
  padding: 7px 15px;
}
.dialogActions button.grey {
  background-color: #bbb;
}

@media (max-width: 546px) {
  .genericDialog .dialogActions,
  .centralDialog.fullScreen .dialogActions {
    flex-direction: column-reverse;
  }
  .genericDialog .dialogActions button,
  .centralDialog.fullScreen .dialogActions button {
    width: 100%;
    padding: 10px 15px;
  }
}
.applyTranscriptDialog .applyTranscriptDialogOptions {
  list-style: none;
  padding: 0;
}
.applyTranscriptDialog .applyTranscriptDialogOptions li {
  display: block;
  margin: 0 0 15px 0;
}
.applyTranscriptDialog .applyTranscriptDialogOptions .applyTranscriptDialogHint {
  margin: 5px 0 0;
  font-size: 14px;
  color: #555;
}

/**
 * A sheet (ui/Sheet.tsx): a dialog headed as iOS's navigation bars, its title
 * between its actions (e.g. Clear and Done). On phones it fills the screen,
 * sliding up from the bottom.
 */
.sheetHeader {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  margin: 0 0 16px;
  min-height: 32px;
}
.sheetHeader h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.sheetHeader .sheetLeading {
  justify-self: start;
}
.sheetHeader .sheetTrailing {
  justify-self: end;
}
.sheetHeader .sheetTrailing .button {
  font-weight: 600;
}
.sheetHeader .button.plain {
  font-size: 16px;
}

.sheetBody {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/** The header's dropdowns' buttons (.dropdownTitle), opening popovers */
.dropdownBox {
  position: relative;
}

.languagePicker {
  display: inline-block;
}

.dropdownTitle {
  position: relative;
  cursor: pointer;
  padding-right: 18px;
  color: rgb(198.4237345679, 223.0762654321, 214.4818051308);
  font-weight: bold;
}

body.notouch .dropdownTitle:hover {
  color: #fff;
}

.dropdownTitle .dropdownArrow {
  border-color: rgb(198.4237345679, 223.0762654321, 214.4818051308) transparent;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  height: 0;
  width: 0;
  position: absolute;
  right: 5px;
  bottom: 0.45em;
}

body.notouch .dropdownTitle:hover .dropdownArrow {
  border-color: #fff transparent;
}

.popover.languagePopover {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 460px;
  padding: 10px 0 0;
}
.popover.languagePopover .languageSelectorView {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.popover.languagePopover .searchInputContainer {
  width: auto;
  margin: 0 10px 6px;
}
.popover.languagePopover .languageList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 6px;
}

.dropdownMenuContainer {
  color: rgba(0, 0, 0, 0.3);
  margin-left: 12px;
  position: relative;
}
.dropdownMenuContainer .menuButton {
  padding: 0 7px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.dropdownMenuContainer .menuButton:hover {
  color: rgba(0, 0, 0, 0.6);
}
.dropdownMenuContainer svg.menuButton {
  display: block;
  box-sizing: content-box;
  width: 1.2em;
  height: 1.2em;
}
.dropdownMenuContainer.open .menuButton {
  color: rgba(0, 0, 0, 0.6);
}

.editCardPanel .editCardTable {
  width: 100%;
}
.editCardPanel .editCardTable .explanation {
  color: #43b08a;
  margin: 6px 0;
  font-size: 14px;
}
.editCardPanel .editCardTable .image {
  max-width: 70px;
  max-height: 70px;
}
.editCardPanel .editCardTable input,
.editCardPanel .editCardTable textarea {
  width: 100%;
}
.editCardPanel .editCardTable td {
  padding: 4px 10px;
}
.editCardPanel .editCardTable td:first-child {
  width: 130px;
  vertical-align: top;
  padding-top: 8px;
}
@media (max-width: 546px) {
  .editCardPanel .editCardTable td:first-child {
    width: 80px;
  }
}
.editCardPanel .editCardTable.noSynonyms .editWordRow td {
  padding-bottom: 0;
}
.editCardPanel .editCardTable.noSynonyms .synonymsRow td {
  padding-top: 0;
}
.editCardPanel .editCardTable input.passiveModeCheckbox {
  width: auto;
}
.editCardPanel .editCardTable .editableListView button {
  font-size: 12px;
}
.editCardPanel .editCardTable .addContextRow td {
  padding-top: 0;
  padding-bottom: 8px;
}
.editCardPanel td.buttonRow {
  text-align: right !important;
}
.editCardPanel td.buttonRow .openDictionaryButton,
.editCardPanel td.buttonRow .showDictionaryButton,
.editCardPanel td.buttonRow .save,
.editCardPanel td.buttonRow .undoButton {
  margin-left: 6px;
}
.editCardPanel .linkButton {
  margin-top: 4px;
  border: none;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  background-color: transparent;
  color: #2f81aa;
  font-size: 12px;
}
.editCardPanel .linkButton.removeContext {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.editCardPanel .linkButton.generateContextButton {
  font-size: 12px;
}
.editCardPanel .linkButton.generateContextButton:disabled {
  opacity: 0.5;
  cursor: default;
}
.editCardPanel .contextContainer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.editCardPanel .contextContainer .contextContainerInner {
  flex-grow: 1;
}
.editCardPanel .contextContainer .contextContainerInner textarea {
  field-sizing: content;
}
.editCardPanel .contextContainer .contextSource {
  margin: 4px 2px 0;
  text-align: right;
  font-size: 12px;
  color: #777;
}
.editCardPanel .contextContainer .contextSource a {
  color: inherit;
}

body#readerPage .editCardPanel .editCardTable td:first-child {
  width: 80px;
}

body#readerPage.glossStyleNew .editCardPanel .editCardTable .explanation,
body#readerPage.popoverStyle .editCardPanel .editCardTable .explanation {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}

body#readerPage.glossStyleNew.colorDark .editCardPanel .editCardTable .explanation,
body#readerPage.colorDark .editCardPanel .editCardTable .explanation {
  color: #9bc;
}

body#readerPage .editCardPanelRow {
  background-color: #edeadf;
  border: 1px solid #c9c2a9;
}

body#readerPage.colorDark .editCardPanelRow {
  background-color: #1a1a1a;
  border: 1px solid #555;
}

body#readerPage.colorLight .editCardPanelRow {
  background-color: white;
  border: 1px solid #ccc;
}

#editCard {
  font-size: 20px;
  padding: 6px;
  opacity: 0.5;
}

body.notouch #editCard:hover {
  opacity: 1;
}

#translation.clickable #editCard {
  display: none;
}

#editCardDialog {
  text-align: center;
  min-width: 420px;
  overflow: visible;
}

#editCardDialog td {
  text-align: left;
}

#editCardDialog .wordField {
  display: flex;
  align-items: center;
  gap: 6px;
}

.centralDialog.fullScreen #editCardDialog {
  min-width: 0;
}
.centralDialog.fullScreen #editCardDialog .editCardTable,
.centralDialog.fullScreen #editCardDialog .editCardTable tbody,
.centralDialog.fullScreen #editCardDialog .editCardTable tr,
.centralDialog.fullScreen #editCardDialog .editCardTable td {
  display: block;
  width: auto;
}
.centralDialog.fullScreen #editCardDialog .editCardTable td {
  padding: 0;
}
.centralDialog.fullScreen #editCardDialog .editCardTable td.wordField {
  display: flex;
}
.centralDialog.fullScreen #editCardDialog .editCardTable td:first-child {
  width: auto;
  padding: 12px 0 4px;
  color: #777;
  font-size: 14px;
}
.centralDialog.fullScreen #editCardDialog .editCardTable td:first-child:empty {
  display: none;
}
.centralDialog.fullScreen #editCardDialog .editCardTable td:first-child br {
  display: none;
}

#editCardDialog table {
  margin: 0 auto 0 auto;
  width: 100%;
}

@media (min-width: 546.02px) and (max-width: 754px) {
  input[name=translateInput] {
    width: 150px;
  }
}
@media (min-width: 546.02px) and (max-width: 754px) {
  #editCardDialog {
    min-width: 400px;
  }
}
@media (max-width: 546px) {
  #editCardDialog {
    min-width: 290px;
  }
}
/** The "Edit text..." dialog, opened from the reader page's dropdown menu */
.centralDialog.editDocumentModalDialog .editDocumentHeader h4 {
  margin-top: 5px;
  margin-bottom: 1px;
}
.centralDialog.editDocumentModalDialog .editDocumentHeader table {
  width: 100%;
}
.centralDialog.editDocumentModalDialog .editDocumentHeader input[type=text],
.centralDialog.editDocumentModalDialog .editDocumentHeader select {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
}
.centralDialog.editDocumentModalDialog .editDocumentHeader .authorRow {
  display: flex;
  align-items: center;
}
.centralDialog.editDocumentModalDialog .editDocumentHeader .authorRow #authorInput {
  flex: 1;
  margin-right: 10px;
}
.centralDialog.editDocumentModalDialog .editDocumentHeader .authorRow .aiCheckboxLabel {
  white-space: nowrap;
}
.centralDialog.editDocumentModalDialog .documentTextHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0;
}
.centralDialog.editDocumentModalDialog .documentTextHeader h4 {
  margin: 0;
}
.centralDialog.editDocumentModalDialog .documentTextHeader .aiPolishButton {
  padding: 4px 8px;
  font-size: 12px;
  margin-top: 1px;
}
.centralDialog.editDocumentModalDialog #documentText {
  box-sizing: border-box;
  width: 100%;
  height: 45vh;
  min-height: 120px;
  resize: vertical;
  font-size: 14px;
  margin-bottom: 4px;
}
.centralDialog.editDocumentModalDialog .editDocumentFooter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.centralDialog.editDocumentModalDialog .editDocumentFooter button {
  flex: 1;
}
.centralDialog.editDocumentModalDialog .editDocumentFooter button:disabled {
  opacity: 0.5;
}

.editableListView {
  margin: 0;
}
.editableListView li {
  display: flex;
  flex-direction: row;
  gap: 2px;
  margin: 4px 0;
}
.editableListView li input {
  flex-grow: 1;
}
.editableListView li button {
  margin-top: 4px;
  border: none;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  background-color: transparent;
  color: #2f81aa;
}
.editableListView li button.removeButton {
  margin-top: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.editableListView li button.removeButton:hover {
  color: #1d5b7a;
}

@keyframes endOfTextPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1.15);
  }
}
@keyframes endOfTextArrive {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(12px);
  }
}
body#readerPage #endOfText {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
body#readerPage #endOfText .endOfTextRabbit {
  width: 150px;
  aspect-ratio: 1;
  margin: 0 auto;
  background: url("/content/landingPages/rabbit-reading.webp") center/contain no-repeat;
  mix-blend-mode: multiply;
  animation: endOfTextArrive 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
}
body#readerPage #endOfText .endOfTextHeader {
  margin: 4px 0 0;
  font-size: 24px;
}
body#readerPage #endOfText .endOfTextTitle {
  margin: 2px 0 20px;
  font-style: italic;
  opacity: 0.7;
}
body#readerPage #endOfText .endOfTextStats {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
body#readerPage #endOfText .endOfTextStat {
  flex: 1 1 0;
  padding: 12px 4px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.04);
}
body#readerPage #endOfText .endOfTextStat strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
}
body#readerPage #endOfText .endOfTextStat span {
  font-size: 14px;
  opacity: 0.7;
}
body#readerPage #endOfText .endOfTextVote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}
body#readerPage #endOfText .endOfTextVote button {
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  background-color: rgba(0, 0, 0, 0.06);
}
body#readerPage #endOfText .endOfTextVote button.selected {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: endOfTextPop 0.25s;
  transform: scale(1.15);
}
body#readerPage #endOfText .endOfTextActions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body#readerPage #endOfText .endOfTextActions .payButton {
  margin: 0;
  padding: 14px;
  border-radius: 12px;
}
body#readerPage #endOfText .endOfTextActions p {
  margin: 6px 0 0;
}
body#readerPage #endOfText .endOfTextNext {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  color: inherit;
  text-align: left;
  -webkit-text-decoration: none;
  text-decoration: none;
}
body#readerPage #endOfText .endOfTextNext span {
  display: block;
  font-size: 14px;
  opacity: 0.6;
}
body#readerPage #endOfText .endOfTextNext strong {
  font-weight: 500;
}

@media (max-height: 700px) {
  body#readerPage #endOfText .endOfTextRabbit {
    width: 100px;
  }
  body#readerPage #endOfText .endOfTextTitle,
  body#readerPage #endOfText .endOfTextStats {
    margin-bottom: 12px;
  }
  body#readerPage #endOfText .endOfTextStat {
    padding: 8px 4px;
  }
}
@media (max-height: 500px) and (min-width: 600px) {
  body#readerPage #endOfText {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 760px;
  }
  body#readerPage #endOfText > * {
    flex: 1 1 0;
  }
  body#readerPage #endOfText .endOfTextStats {
    margin-bottom: 0;
  }
}
body#readerPage #pageTextViewport.endOfTextPage {
  overflow-y: auto;
}

body#readerPage.colorDark #endOfText .endOfTextRabbit {
  background-image: url("/content/landingPages/rabbit-reading-dark.webp");
  mix-blend-mode: normal;
}
body#readerPage.colorDark #endOfText .endOfTextStat,
body#readerPage.colorDark #endOfText .endOfTextVote button {
  background-color: rgba(255, 255, 255, 0.08);
}
body#readerPage.colorDark #endOfText .endOfTextVote button.selected,
body#readerPage.colorDark #endOfText .endOfTextNext {
  background-color: #333;
}

body div.explanation.explanation {
  --bubble-color: #2ab97b;
  --selection-color: rgba(42, 185, 123, 0.3);
  --selection-text-color: inherit;
  --translated-color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
body div.explanation.explanation span[data-p],
body div.explanation.explanation span[data-group] {
  cursor: pointer;
}
body div.explanation.explanation span[data-p].selecting,
body div.explanation.explanation span.translating {
  outline: none;
  border-bottom: none;
  box-shadow: none;
  background-color: var(--selection-color);
  color: var(--selection-text-color);
}
body div.explanation.explanation span.translated {
  display: inline-block;
  text-align: center;
  font-weight: inherit;
  background-color: inherit;
  color: var(--translated-color);
}
body div.explanation.explanation span.translating div.original {
  display: block;
  position: relative;
  margin-top: 9px;
  padding: 2px 5px;
  background-color: var(--bubble-color);
  color: #fff;
}
body div.explanation.explanation span.translating div.original:after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom-color: var(--bubble-color);
}
body div.explanation.explanation span.translating div.translation {
  display: inline;
  padding: 0;
  font-weight: inherit;
  line-height: inherit;
  animation: fadeIn 400ms ease-out;
}

body.colorDark div.explanation.explanation {
  --bubble-color: #368;
  --selection-color: #368;
  --selection-text-color: #acd;
  --translated-color: #9bc;
}

body.colorLight div.explanation.explanation {
  --bubble-color: black;
  --selection-color: #bbb;
  --selection-text-color: black;
  --translated-color: black;
}

body.notouch div.explanation.explanation span[data-p]:not(.translated):hover {
  outline: none;
  border-bottom: none;
  box-shadow: none;
  text-shadow: none;
  background-color: var(--selection-color);
  color: var(--selection-text-color);
}

.preserveLineBreaks {
  white-space: pre-line;
}

.explanation .reportExplanationTrigger {
  margin: 4px 0 0;
}
.explanation .reportExplanationButton {
  padding: 0;
  border: none;
  background: none;
  color: #777;
  font-size: 0.7em;
  cursor: pointer;
  opacity: 0.6;
}
.explanation .reportExplanationButton:not(:disabled):hover {
  background: none;
  opacity: 1;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.explanationReportModal .modalExplanationLabel {
  margin: 12px 0 4px;
  font-weight: bold;
  font-size: 14px;
}
.explanationReportModal .modalExplanationLabel:first-child {
  margin-top: 0;
}
.explanationReportModal .modalExplanation {
  margin: 0;
}
.explanationReportModal .modalExplanation.reported {
  color: #777;
}
.explanationReportModal .modalExplanation.reported span {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
.explanationReportModal textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 70px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: inherit;
  resize: vertical;
}
.explanationReportModal .modalRegenerating {
  margin: 12px 0 0;
  color: #777;
}
.explanationReportModal .modalVerdictPrompt {
  margin: 12px 0 0;
  font-weight: bold;
}

/** Export dialog: sortable drag-and-drop field lists */
.dragFields {
  display: inline-block;
  width: 200px;
}

.excludeExportedOption {
  cursor: pointer;
}

.otherDelimiter:disabled {
  opacity: 0.2;
}

.otherDelimiter.invalid {
  box-shadow: 0 0 8px #f88;
  border-color: #f88;
}

li.sortable-placeholder {
  border: 1px dashed #ccc;
  background: none;
}

.sortable {
  width: 310px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.sortable.grid {
  overflow: hidden;
}

.sortable li {
  list-style: none;
  border: 1px solid #ccc;
  background: #f6f6f6;
  color: #1c94c4;
  margin: 5px;
  padding: 5px;
  min-height: 22px;
  cursor: grab;
  cursor: -moz-grab;
}

.sortable.grid li {
  line-height: 80px;
  float: left;
  width: 80px;
  height: 80px;
  text-align: center;
}

.handle {
  cursor: move;
}

.sortable.connected {
  width: 200px;
  min-height: 100px;
  float: left;
}

li.disabled {
  opacity: 0.5;
}

li.highlight {
  background: #fee25f;
}

#unusedFields li {
  opacity: 0.6;
}

body.notouch #unusedFields li:hover {
  opacity: 1;
}

ul.flags {
  text-align: center;
  padding: 0 25px;
  margin: 14px auto;
}

ul.flags li {
  display: inline-block;
  margin: 18px 15px;
}

ul.flags .clickable {
  width: 70px;
}
ul.flags .clickable img {
  width: 100%;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
ul.flags .clickable .language-label {
  text-align: center;
  margin: 0 -30px;
}

ul.flags .clickable {
  transition: all 0.3s ease;
}

body.notouch ul.flags .clickable:hover {
  transform: scale(1.15);
}

ul.flags a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

/* Flashcards page */
body#flashcardsPage {
  position: relative;
  background-color: #f0eedf;
}
body#flashcardsPage .test {
  display: none;
}
body#flashcardsPage .questionNumber {
  opacity: 0.7;
}
body#flashcardsPage button.recall.prominent {
  font-size: 120%;
}
body#flashcardsPage button.recall.prominent[data-score="0"] {
  background-color: #d34d2f;
}
body#flashcardsPage button.recall.prominent[data-score="0"]:hover {
  background-color: rgb(170.8571428571, 60.7857142857, 36.1428571429);
}
body#flashcardsPage button.recall.prominent[data-score="2"] {
  background-color: #db7a21;
}
body#flashcardsPage button.recall.prominent[data-score="2"]:hover {
  background-color: rgb(174.6785714286, 97.3095238095, 26.3214285714);
}
body#flashcardsPage button.recall.prominent[data-score="5"], body#flashcardsPage button.recall.prominent[data-score="4"] {
  background-color: #43b08a;
}
body#flashcardsPage button.recall.prominent[data-score="5"]:hover, body#flashcardsPage button.recall.prominent[data-score="4"]:hover {
  background-color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
body#flashcardsPage #feedback {
  margin: 25px auto 16px;
  max-width: 500px;
  font-weight: 600;
}
@media (max-width: 546px) {
  body#flashcardsPage #feedback {
    margin-top: 15px;
  }
}
body#flashcardsPage #feedbackTick {
  animation-name: pop;
  animation-duration: 0.2s;
  width: 33px;
}
body#flashcardsPage #feedbackTick.negative {
  color: #d34d2f;
  text-shadow: 2px 2px 0px rgb(170.8571428571, 60.7857142857, 36.1428571429);
}
body#flashcardsPage #nextCardButton {
  margin: 12px 0 20px 0;
}
body#flashcardsPage #buttons h2 {
  margin: 10px;
  font-weight: 600;
}
body#flashcardsPage #toggleSpeakingModeButton {
  font-size: 18px;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
}
body#flashcardsPage .flashcardsContainer {
  position: relative;
  max-width: 735px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f0eedf;
  text-align: center;
}
@media (min-width: 850.02px) {
  body#flashcardsPage .flashcardsContainer {
    max-width: 820px;
  }
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#flashcardsPage .flashcardsContainer {
    font-size: 92%;
  }
}
@media (max-width: 546px) {
  body#flashcardsPage .flashcardsContainer {
    padding: 6px;
    font-size: 85%;
  }
}
body#flashcardsPage .flashcardsContainer h3 {
  margin-top: 10px;
  margin-bottom: 7px;
}
body#flashcardsPage #contextContainer {
  position: relative;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 4px 5px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 4px;
}
body#flashcardsPage #contextContainer strong {
  border-bottom: 2px solid #000;
}
body#flashcardsPage #contextContainer strong.hidden {
  display: inline-block;
  width: 70px;
  color: #fff;
  height: 1em;
  overflow: hidden;
}
body#flashcardsPage #contextContainer #nextContext {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -11px;
  opacity: 0.2;
  cursor: pointer;
  display: none;
}
body#flashcardsPage #contextContainer.multipleContexts #nextContext {
  display: block;
}
body#flashcardsPage #contextContainer.multipleContexts #context {
  margin-right: 20px;
}
body#flashcardsPage #contextContainer #youTubeLinkContainer {
  position: relative;
  display: none;
  font-size: 12px;
  margin-top: 8px;
  text-align: right;
}
body#flashcardsPage #contextLinkContainer {
  text-align: right;
  margin: 0 4px;
}
body#flashcardsPage #contextLink {
  font-style: italic;
  font-size: 80%;
  color: #999;
}
body#flashcardsPage.redesign #context {
  font-weight: 300;
}
body#flashcardsPage.redesign #context strong {
  font-weight: 600;
  border-bottom: none;
}
body#flashcardsPage.redesign #context strong.hidden {
  border-bottom: 2px solid #000;
}
body#flashcardsPage #contextContainer {
  margin: 10px 0 5px;
}
body#flashcardsPage button.recall {
  font-size: 100%;
  padding: 5px 6px;
}
body#flashcardsPage button.recall .check {
  width: 18px;
  margin-left: 10px;
  position: relative;
  top: 1px;
}
body#flashcardsPage #word.clickable #wordCardAudio {
  display: none;
}
body#flashcardsPage #word #wordCardAudio {
  display: block;
  position: absolute;
  font-size: 28px;
  padding: 2px 6px;
  bottom: 3px;
  right: 3px;
  cursor: pointer;
  opacity: 0.5;
}
body#flashcardsPage #word #wordCardAudio.icon-spinner,
body#flashcardsPage #word #wordCardAudio.icon-volume-down:hover {
  opacity: 1;
}
body#flashcardsPage #imageHint {
  font-size: 14px;
}
body#flashcardsPage #image {
  max-width: 60%;
}
body#flashcardsPage #delete {
  margin-top: 25px;
}
body#flashcardsPage button.recall {
  font-size: 100%;
  padding: 5px 6px;
}
body#flashcardsPage .transliteration {
  font-size: 60%;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 16px;
}
body#flashcardsPage #showNote {
  margin: 0 16px;
}

body.notouch .wordCard.clickable:hover {
  background-color: #9fd0f5;
  border-color: #7be;
}

body.notouch .wordCard.clickable.disableHover:hover {
  background-color: #7be;
  border-color: #419ecd;
}

.wordCard {
  position: relative;
  display: inline-block;
  border-style: solid;
  border-width: 2px;
  border-color: #419ecd;
  width: 326px;
  text-align: center;
  font-family: sans-serif;
  font-size: 32px;
  padding: 50px 0 50px 0;
  margin: 20px 0;
  background-color: #7be;
  border-radius: 4px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
@media (min-width: 850.02px) {
  .wordCard {
    width: 371px;
  }
}

.wordCardSpacer {
  display: inline-block;
  width: 40px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .wordCardSpacer {
    width: 8px;
  }
}
@media (max-width: 546px) {
  .wordCardSpacer {
    display: none;
  }
}

.wordCard #wordCardText small {
  opacity: 0.8;
  font-size: 75%;
}

.wordCard .cornerRibbon {
  position: absolute;
  text-align: center;
  padding: 4px;
  right: 5px;
  top: 5px;
  font-size: 12px;
  opacity: 0.6;
}

.wordCard #addAlternativeWord {
  position: absolute;
  left: 5px;
  bottom: 5px;
}

body.notouch .wordCard #addAlternativeWord:hover {
  opacity: 1;
}

.wordCard #submitAnswer {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

body.notouch .wordCard #submitAnswer:hover {
  opacity: 1;
}

#wordCardInput {
  font-size: 24px;
  width: 90%;
  background-color: #cef;
  border: 2px solid #59b;
  margin-top: 6px;
  resize: none;
  font-family: inherit;
}

#wordCardInputToolbar button::-moz-focus-inner {
  padding: 1px;
  border: 1px dotted transparent;
}

#wordCardInputToolbar button:focus::-moz-focus-inner {
  border: 1px dotted black;
}

#wordCardInputToolbar button {
  text-shadow: 0 1px 0 rgb(255, 255, 255);
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: bold;
  border: none;
  background-color: #cef;
  cursor: pointer;
  color: #25a;
  margin: 1px;
}

#wordCardInputToolbar button:hover {
  color: #000;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}

#newCardHint {
  position: absolute;
  right: 40px;
  bottom: 12px;
  font-size: 14px;
  line-height: 1em;
  opacity: 0.6;
  font-style: italic;
  display: none;
}

@media (min-width: 546.02px) and (max-width: 754px) {
  #wordCardInput {
    font-size: 24px;
  }
  .wordCard {
    font-size: 26px;
    padding: 40px 0;
    width: 240px;
    margin: 10px 0;
  }
}
@media (max-width: 546px) {
  .wordCard {
    box-sizing: border-box;
    width: 100%;
    margin: 10px 0;
    padding: 40px 0;
  }
  .wordCard .cornerRibbon {
    font-size: 12px;
    top: 2px;
  }
  #wordCardInput {
    font-size: 20px;
  }
}
@media (max-width: 546px) {
  #newCardHint {
    font-size: 12px;
  }
}
/** Dark page footer and social links */
body#checkout2Page #footer,
body#checkoutPage #footer,
body.showHeader #footer {
  position: relative;
  clear: both;
  font-size: 14px;
  padding: 45px 0;
  color: #eee;
  background-color: #323847;
  border-radius: 0;
}
body#checkout2Page #footer .logo,
body#checkoutPage #footer .logo,
body.showHeader #footer .logo {
  font-size: 26px;
}
body#checkout2Page #footer p,
body#checkout2Page #footer li,
body#checkout2Page #footer a,
body#checkoutPage #footer p,
body#checkoutPage #footer li,
body#checkoutPage #footer a,
body.showHeader #footer p,
body.showHeader #footer li,
body.showHeader #footer a {
  color: #717785;
}
body#checkout2Page #footer.notouch #footer a:hover,
body#checkoutPage #footer.notouch #footer a:hover,
body.showHeader #footer.notouch #footer a:hover {
  color: #fff;
  -webkit-text-decoration: none;
  text-decoration: none;
}

body.showHeader #footer {
  display: none;
}

#footer h3 {
  color: #fff;
}

#footer ul {
  margin: 0;
}

#footer li {
  margin: 2px 0;
}

#footer a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

body.notouch #footer a:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

body.notouch #footer a:hover i {
  -webkit-text-decoration: none;
  text-decoration: none;
}

#socialLinks {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 546px) {
  #socialLinks {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
  }
}

#socialLinks .facebookShare {
  width: 260px;
  height: 60px;
}

#socialLinks li {
  opacity: 0.8;
}

body.notouch #socialLinks li:hover {
  opacity: 1;
}

#socialLinks i {
  width: 30px;
  display: inline-block;
}

#socialLinks h3 {
  color: #bbb;
}

/** Shared form controls beyond the element defaults in _base.scss */
/**
 * Selects (ui/Select.tsx): a native select (iOS's own menu in the app), drawn
 * as a control with a chevron. `large` in a form, `block` to fill its row.
 */
.select {
  position: relative;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
.select select {
  width: 100%;
  min-width: 0;
}
.select > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  pointer-events: none;
}
.select.withIcon select {
  padding-left: 32px;
}
.select.large select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  height: 44px;
  padding-right: 36px;
  font-size: 16px;
}
.select.block {
  display: flex;
  width: 100%;
}

/* A text field, as the controls beside it */
.input {
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch .input {
  font-size: 16px;
}
.input {
  font-weight: 400;
  width: 100%;
  padding: 0 10px;
}
.input.large {
  height: 44px;
  padding: 0 12px;
  font-size: 16px;
}

/* A search field (ui/SearchField.tsx): its icon inside on the left, and a
   clear button on the right */
.searchInputContainer {
  position: relative;
  display: inline-block;
  width: 100%;
}
.searchInputContainer input {
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch .searchInputContainer input {
  font-size: 16px;
}
.searchInputContainer input {
  font-weight: 400;
  width: 100%;
  padding: 0 30px;
}
.searchInputContainer input:-moz-placeholder {
  padding-right: 10px;
}
.searchInputContainer input:placeholder-shown {
  padding-right: 10px;
}
.searchInputContainer .searchIcon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}
.searchInputContainer .clearSearchButton {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 3px;
  color: #999;
  cursor: pointer;
}
.searchInputContainer .searchButton {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 15;
  width: 100%;
  padding: 10px 0;
  border: none;
  background-color: #419ecd;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.searchInputContainer .searchButton:hover {
  background-color: #2f81aa;
}

/**
 * A form's field (ui/Field.tsx): its label above its control, and a hint
 * below
 */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  text-align: left;
}

.fieldLabel {
  font-size: 14px;
  font-weight: 500;
  color: #777;
}

.fieldHint {
  font-size: 14px;
  line-height: 1.4;
  color: #999;
}

/* Two fields side by side */
.fieldPair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

/* A range: from one control to another, sharing the row */
.fieldRange {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  color: #777;
}

/* An on/off option: what it does, and its switch (input.switch) */
.switchField {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  cursor: pointer;
}
.switchField i {
  margin-right: 4px;
  color: #999;
}

/* Options to pick any of (ui/Chips.tsx), each a pill: blue once picked */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch .chip {
  font-size: 16px;
}
.chip {
  font-weight: 400;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  white-space: nowrap;
  cursor: pointer;
}
.chip.selected {
  border-color: #419ecd;
  background-color: #419ecd;
  color: #fff;
}

body.notouch .chip:hover:not(.selected) {
  background-color: #f4f4f4;
}

/**
 * One of a few views (ui/SegmentedControl.tsx), as iOS's segmented control:
 * the one shown raised on a grey track
 */
.segmentedControl {
  display: inline-flex;
  gap: 2px;
  box-sizing: border-box;
  max-width: 100%;
  height: 36px;
  padding: 2px;
  border-radius: 8px;
  background-color: rgba(118, 118, 128, 0.12);
}
.segmentedControl button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: #333;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.segmentedControl button.selected {
  font-weight: 500;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

body.notouch .segmentedControl button:hover:not(.selected) {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Bordered wrapper that gives a native select a custom arrow */
.selectBox {
  margin: 0;
  display: inline-block;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

.selectBox:after {
  content: "";
  border-color: #000 transparent;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  height: 0;
  width: 0;
  position: absolute;
  right: 5px;
  top: 11px;
  pointer-events: none;
  opacity: 0.5;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .selectBox:after {
    top: 10px;
  }
}
@media (max-width: 546px) {
  .selectBox:after {
    top: 9px;
  }
}

.selectBox select {
  font-size: 16px;
  padding: 1px 20px 1px 6px;
  border: none !important;
  outline: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .selectBox select {
    font-size: 14px;
  }
}
@media (max-width: 546px) {
  .selectBox select {
    font-size: 14px;
  }
}

/* Invalid field state */
input.invalid,
.invalidContext textarea[name=context] {
  box-shadow: 0 0 8px #f88;
  border-color: #f88;
  outline: none;
}

.generateContextModal {
  padding: 10px 0;
}
.generateContextModal .generateContextField {
  margin-bottom: 15px;
}
.generateContextModal .generateContextField label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #777;
}
.generateContextModal .scenarioInputRow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.generateContextModal .scenarioInput {
  flex: 1;
  padding: 8px;
  font-size: 14px;
  box-sizing: border-box;
}
.generateContextModal .shuffleButton {
  font-size: 20px;
  padding: 4px;
  -webkit-text-decoration: none;
  text-decoration: none;
  line-height: 1;
}
.generateContextModal .difficultySelector {
  display: flex;
  gap: 0;
  border: solid 1px #bbb;
  border-radius: 4px;
  overflow: hidden;
}
.generateContextModal .difficultyOption {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  border: none;
  background: #fff;
  color: #777;
  cursor: pointer;
  outline: none;
  border-right: solid 1px #bbb;
}
.generateContextModal .difficultyOption:last-child {
  border-right: none;
}
.generateContextModal .difficultyOption.selected {
  background: #419ecd;
  color: #fff;
  cursor: default;
}
body.notouch .generateContextModal .difficultyOption:hover:not(.selected) {
  background: #eee;
}
body.notouch .generateContextModal .difficultyOption.selected:hover {
  background: #419ecd;
}
.generateContextModal .generateButton {
  width: 100%;
  margin-top: 5px;
  padding: 10px;
  font-size: 14px;
  border-radius: 4px;
}

/** Green app header: logo, language pickers, streak, avatar, and nav tabs */
#header {
  position: relative;
  padding: 8px 0 0 0;
  margin-bottom: 10px;
  background-color: #43b08a;
  color: #fff;
  border-radius: 0;
}

#header .texture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #43b08a;
  font-size: 12px;
}

#trialModeNotification {
  background-color: #ffd6a5;
  padding: 6px 0;
  text-align: center;
  font-style: italic;
  color: #333;
}
#trialModeNotification a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

#logo {
  display: inline;
  margin: 0 15px 15px 0;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  font-size: 20px;
  vertical-align: center;
  position: relative;
}
#logo a {
  display: inline-block;
  vertical-align: top;
  line-height: 1;
}
#logo .readlangLogoContainer {
  width: 40px;
  height: 36px;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  #logo .readlangLogoContainer {
    width: 35px;
    height: 33px;
  }
}
#logo .readlangLogoContainer .rabbitContainer {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 2px;
  left: 0;
}
#logo .readlangLogoContainer .rabbitHole,
#logo .readlangLogoContainer .rabbit,
#logo .readlangLogoContainer .rabbitHoleForeground {
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}
#logo .readlangLogoContainer .rabbitHole,
#logo .readlangLogoContainer .rabbitHoleForeground {
  width: 100%;
}
#logo .readlangLogoContainer .rabbit {
  width: 23px;
  transition: bottom 0.2s;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  #logo .readlangLogoContainer .rabbit {
    width: 21px;
  }
}
#logo .readlangLogoContainer:hover .rabbit {
  bottom: -22px;
}
#logo .readlangLogoText {
  position: relative;
  vertical-align: top;
  left: 10px;
  top: 14px;
  font-family: "Jost", sans-serif;
  font-weight: 600;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  #logo .readlangLogoText {
    top: 11px;
  }
}
@media (max-width: 546px) {
  #logo {
    display: none;
  }
}

#logo sup {
  position: relative;
  top: -10px;
  left: -10px;
  font-size: 12px;
  opacity: 0.8;
}

h2.pageTitle {
  margin-top: 28px;
}

#pageTitle {
  position: relative;
  top: -5px;
  line-height: 180%;
  font-family: "Jost", sans-serif;
  font-weight: 600;
}

#pageTitle a,
#logo a {
  color: #fff;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-family: "Jost", sans-serif;
  font-weight: 600;
}

#headerSettings {
  position: absolute;
  left: 190px;
  right: 0;
  top: 15px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  #headerSettings {
    left: 175px;
    font-size: 97%;
    top: 2px;
  }
}
@media (max-width: 546px) {
  #headerSettings {
    position: relative;
    left: 0;
    top: 0;
  }
}

.languageContainer {
  position: relative;
  float: left;
  margin: 0 10px 0 0;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .languageContainer {
    font-size: 85%;
    margin: 0 8px 0 0;
  }
}
@media (max-width: 546px) {
  .languageContainer {
    margin: -2px 6px 4px 0;
    font-size: 80%;
  }
}

#userInfo {
  position: absolute;
  top: 0;
  right: 0;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  #userInfo {
    font-size: 85%;
    bottom: 0;
    top: auto;
    top: initial;
  }
}
@media (max-width: 546px) {
  #userInfo {
    margin-top: 13px;
    font-size: 80%;
    max-width: 85px;
    text-align: right;
  }
}

#userInfo .avatar {
  position: absolute;
  right: 18px;
  bottom: 2px;
  height: 32px;
  width: 32px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}
@media (max-width: 546px) {
  #userInfo .avatar {
    bottom: 4px;
    border-width: 1.6px;
    height: 26px;
    width: 26px;
  }
}

body.notouch #userInfo:hover .avatar {
  border-color: rgb(255, 255, 255);
}

.redDot {
  background-color: #d34d2f;
  position: absolute;
  top: -3px;
  left: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: solid 2px #fff;
}

.redDotNotice .redDot {
  display: inline-block;
  position: relative;
  left: 0;
  top: 1px;
}

#headerSettings #streak {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 85px;
  height: 38px;
  cursor: pointer;
  font-size: 18px;
}
#headerSettings #streak .streakView {
  color: #fff;
}
#headerSettings #streak .streakView.metGoal .days {
  opacity: 1;
}
#headerSettings #streak .streakView.metGoal .image {
  margin-right: 0;
}
#headerSettings #streak .days {
  opacity: 0.3;
}
#headerSettings #streak .image {
  position: relative;
  margin-right: 5px;
}
#headerSettings #streak .fireIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6.5px;
  margin-top: -10px;
  opacity: 0.5;
}
#headerSettings #streak .fireIcon.metGoal {
  opacity: 1;
  transform: scale(1.3);
}
@media (max-width: 546px) {
  #headerSettings #streak {
    zoom: 0.8;
    font-size: 16px;
    top: -4px;
    bottom: auto;
    bottom: initial;
    right: 72px;
  }
}

/* nav tabs */
#navBar ul {
  list-style-type: none;
  height: 32px;
  margin: 8px 0 0 0;
}
@media (max-width: 546px) {
  #navBar ul {
    display: flex;
    gap: 3px;
    height: 28px;
    margin: 5px 0 0 0;
    font-size: 14px;
  }
}

#navBar li {
  float: left;
  margin-right: 6px;
  position: relative;
}
@media (max-width: 546px) {
  #navBar li {
    flex: 1 1 auto;
    margin-right: 0;
  }
}

#navBar li a {
  display: block;
  float: left;
  padding: 0 10px;
  line-height: 32px;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: rgb(162.332962963, 208.167037037, 192.188185525);
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
@media (max-width: 546px) {
  #navBar li a {
    float: none;
    padding: 0 4px;
    line-height: 28px;
    text-align: center;
    white-space: nowrap;
  }
}

#navBar .navigationIcon {
  margin-right: 2px;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
}
@media (max-width: 546px) {
  #navBar .navigationIcon {
    display: none;
  }
}

body.notouch #navBar li a:hover,
body.notouch #navBar li a#navTest.glow:hover {
  background-color: #fff;
  color: rgb(45.9074074074, 120.5925925926, 94.5555555556);
}

body#libraryPage #navLibrary,
body#storyBot #navLibrary,
body#uploadPage #navLibrary,
body#audioUploadedPage #navLibrary,
body#discoverPage #navDiscover,
body#websitesPage #navDiscover,
body#publicShelfPage #navDiscover,
body#dashboardPage #navDashboard,
body#progressPage #navDashboard,
body#learnPage #navTest,
body#flashcardsPage #navTest,
body#chatListPage #navTest,
body#wordsPage #navWords,
body#importWordsPage #navWords {
  color: #001;
  background-color: #f0eedf;
}

body.nativeHeader #entirePage {
  display: flow-root;
}

body.nativeHeader.showHeader {
  background-color: #f0eedf;
}

#mainContent > .pageBackLink {
  margin-bottom: 12px;
}
#mainContent > .pageBackLink + *, #mainContent > .pageBackLink + * > :first-child {
  margin-top: 0;
}

.heatmapProgressView {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  max-width: 100%;
}
.heatmapProgressView.empty {
  width: auto;
  margin: 0;
}
.heatmapProgressView h2 {
  margin-bottom: 16px;
}
.heatmapProgressView .heatmapYears {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.heatmapProgressView .heatmapYear {
  font-weight: bold;
  margin-bottom: 4px;
}
.heatmapProgressView .heatmapGrid {
  background-color: #fff;
  padding: 12px 12px 2px 12px;
  border-radius: 12px;
  width: -moz-fit-content;
  width: fit-content;
}
.heatmapProgressView .heatmapGrid .heatmapGridRow {
  display: flex;
  padding-bottom: 10px;
}
.heatmapProgressView .heatmapWeek {
  display: flex;
  flex-direction: column;
}
.heatmapProgressView .heatmapDay {
  border-radius: 4px;
  border: 1px solid #eee;
  margin: 1px;
  background: #ebedf0;
  width: 9px;
  height: 9px;
}
@media (max-width: 546px) {
  .heatmapProgressView .heatmapDay {
    width: 6px;
    height: 6px;
  }
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .heatmapProgressView .heatmapDay {
    width: 5px;
    height: 6px;
  }
}
@media (min-width: 850.02px) {
  .heatmapProgressView .heatmapDay {
    width: 11px;
    height: 11px;
  }
}
.heatmapProgressView .heatmapDay {
  position: relative;
}
.heatmapProgressView .heatmapDay .heatmapDayTooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #111;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 16px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
  text-align: left;
}
.heatmapProgressView .heatmapDay .heatmapDayTooltip.startOfRow {
  transform: translateX(0%);
}
.heatmapProgressView .heatmapDay .heatmapDayTooltip.endOfRow {
  transform: translateX(-100%);
}
.heatmapProgressView .heatmapDay .heatmapDayTooltip ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.heatmapProgressView .heatmapDay:hover {
  border-color: #999;
}
.heatmapProgressView .heatmapDay:hover .heatmapDayTooltip {
  display: block;
}
.heatmapProgressView .heatmapViewControls {
  margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.heatmapProgressView .heatmapViewControls .languageSelector {
  display: flex;
  align-items: center;
  gap: 8px;
}
.heatmapProgressView .wordCountSecondary {
  font-weight: normal;
  color: #333;
}
.heatmapProgressView .wordCountYearSummary {
  margin-top: 12px;
  font-size: 14px;
  color: #333;
}
@media (max-width: 546px) {
  .heatmapProgressView .wordCountYearSummary {
    font-size: 12px;
  }
}
.heatmapProgressView .heatmapLegend {
  display: none;
  background-color: #43b08a;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.heatmapProgressView .heatmapLegend .legendCell {
  border: 1px solid #eee;
  border-radius: 4px;
  width: 10px;
  height: 10px;
}
.heatmapProgressView .heatmapDay.filler {
  opacity: 0;
}
.heatmapProgressView .heatmapDay.none {
  background: #ebedf0;
}
.heatmapProgressView .heatmapDay.low {
  background: #c6e48b;
}
.heatmapProgressView .heatmapDay.mid {
  background: #7bc96f;
}
.heatmapProgressView .heatmapDay.high {
  background: #239a3b;
}
.heatmapProgressView .heatmapDay.max {
  background: #196127;
}
.heatmapProgressView .heatmapDay.streakRepair {
  background-color: #f2c430;
}

body span.yourWord:not(.translating) {
  border-bottom: 1px solid rgba(67, 176, 138, 0.5);
  box-shadow: 0 -4px 0 rgba(67, 176, 138, 0.5) inset;
}

body.colorDark span.yourWord:not(.translating) {
  border-bottom: 1px solid #368;
  box-shadow: 0 -4px 0 #368 inset;
}

body.colorLight span.yourWord:not(.translating) {
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
  box-shadow: 0 -4px 0 rgba(153, 153, 153, 0.5) inset;
}

body span.yourWord.translating,
body span.yourWord.translated,
body span.translating span.yourWord,
body span.translated span.yourWord {
  border-bottom: none;
  box-shadow: none;
}

body[data-clickMode=translate].notouch span[data-p]:hover,
body[data-clickMode=translate].notouch span[data-p].hovering,
body[data-clickMode=translate] span[data-p].selecting,
span.translating,
body.notouch[data-clickMode=translate] span[data-p]:hover,
body.notouch[data-clickMode=translate] span[data-p].hovering,
body span[data-p].selecting {
  outline: 2px solid rgba(67, 176, 138, 0.5);
}

body.colorDark span.audioPosition {
  color: #fff;
  text-shadow: #eee 0 0 3px;
}

span.translated {
  position: relative;
  background-color: rgba(67, 176, 138, 0.15);
}

body.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
body.colorSepia[data-clickMode=translate].notouch span[data-p].hovering,
body.colorSepia[data-clickMode=translate] span[data-p].selecting,
body.colorSepia span.translating,
body span[data-p].selecting,
body span.translating {
  outline: 2px solid rgba(67, 176, 138, 0.5);
}

body.glossStyle[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle[data-clickMode=translate].notouch span[data-p].hovering,
body.glossStyle[data-clickMode=translate] span[data-p].selecting,
body.glossStyle span.translating,
body.glossStyle.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle.colorSepia[data-clickMode=translate].notouch span[data-p].hovering,
body.glossStyle.colorSepia[data-clickMode=translate] span[data-p].selecting,
body.glossStyle.colorSepia span.translating {
  outline: none;
  border-bottom: 1px solid rgba(67, 176, 138, 0.5);
  box-shadow: 0 -4px 0 rgba(67, 176, 138, 0.5) inset;
}

body.glossStyleNew[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyleNew[data-clickMode=translate].notouch span[data-p].hovering,
body.glossStyleNew[data-clickMode=translate] span[data-p].selecting,
body.glossStyleNew span.translating,
body.glossStyleNew.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyleNew.colorSepia[data-clickMode=translate].notouch span[data-p].hovering,
body.glossStyleNew.colorSepia[data-clickMode=translate] span[data-p].selecting,
body.glossStyleNew.colorSepia span.translating {
  outline: none;
  background-color: rgba(42, 185, 123, 0.3);
}

body.glossStyleNew[data-clickMode=translate].notouch span[data-p].translated:hover,
body.glossStyleNew.colorSepia[data-clickMode=translate].notouch span[data-p].translated:hover,
body.glossStyleNew.colorDark[data-clickMode=translate].notouch span[data-p].translated:hover {
  background-color: inherit;
}

body.glossStyle.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle.colorDark[data-clickMode=translate].notouch span[data-p].hovering,
body.glossStyle.colorDark[data-clickMode=translate] span[data-p].selecting,
body.glossStyle.colorDark span.translating {
  outline: none;
  border-bottom: 1px solid #368;
  box-shadow: 0 -4px 0 #368 inset;
}

body.glossStyleNew.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyleNew.colorDark[data-clickMode=translate].notouch span[data-p].hovering,
body.glossStyleNew.colorDark[data-clickMode=translate] span[data-p].selecting,
body.glossStyleNew.colorDark span.translating {
  outline: none;
  background-color: #368;
  color: #acd;
}

body.glossStyleNew.colorLight[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyleNew.colorLight[data-clickMode=translate].notouch span[data-p].hovering,
body.glossStyleNew.colorLight[data-clickMode=translate] span[data-p].selecting,
body.glossStyleNew.colorLight span.translating {
  outline: none;
  background-color: #bbb;
  color: black;
}

body.glossStyle[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle[data-clickMode=translate].notouch span[data-p].hovering,
body.glossStyle.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle.colorSepia[data-clickMode=translate].notouch span[data-p].hovering {
  border-bottom: 1px solid #43b08a;
  box-shadow: 0 -3px 0 #43b08a inset;
}

body.glossStyle.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle.colorDark[data-clickMode=translate].notouch span[data-p].hovering {
  border-bottom: 1px solid #9bc;
  box-shadow: 0 -3px 0 #9bc inset;
}

body span.translating .original {
  display: none;
}

body span.translating .translation {
  display: inline;
  text-shadow: none;
}
body span.translating .translation .transliteration {
  font-size: 80%;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

body.glossStyle span.translating .original {
  display: block;
}

body.glossStyleNew span.translating .original {
  display: block;
  background-color: #2ab97b;
  color: white;
  padding: 2px 5px;
  margin-top: 9px;
  position: relative;
}

body.glossStyleNew span.translating.monolingual,
body.glossStyleNew.colorSepia span.translating.monolingual {
  display: inline-block;
  background-color: #2ab97b !important;
  border: 3px solid #2ab97b;
  margin: -3px;
  color: white;
  position: relative;
}

body.glossStyleNew.colorDark span.translating.monolingual {
  background-color: #368 !important;
  border-color: #368;
}

body.glossStyleNew.colorLight span.translating.monolingual {
  background-color: black !important;
  border-color: black;
}

body.glossStyleNew.colorDark span.translating .original {
  background-color: #368;
}

body.glossStyleNew span.translating .original:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #2ab97b;
  border-width: 8px;
  margin-left: -8px;
}

body.glossStyleNew.colorDark span.translating .original:after {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #368;
}

body.glossStyleNew.colorLight span.translating .original {
  background-color: black;
}

body.glossStyleNew.colorLight span.translating .original:after {
  border-color: transparent;
  border-bottom-color: black;
}

body.glossStyle span.translating .translation {
  font-weight: normal;
  font-family: sans-serif;
  line-height: 0.9;
  padding-top: 4px;
  opacity: 1;
  display: block;
  animation: fadeIn 400ms ease-out;
}

body.glossStyleNew span.translating .translation {
  animation: fadeIn 400ms ease-out;
}

body.basicLatinFirstLanguage.glossStyle span.translating .translation,
body.basicLatinFirstLanguage.glossStyleNew span.translating .translation,
body.basicLatinFirstLanguage.popoverStyle span.translating .translation {
  font-family: "Delius", sans-serif;
}

body.normalTranslationFont.basicLatinFirstLanguage.glossStyle span.translating .translation,
body.normalTranslationFont.basicLatinFirstLanguage.glossStyleNew span.translating .translation,
body.normalTranslationFont.basicLatinFirstLanguage.popoverStyle span.translating .translation {
  font-family: Jost, sans-serif;
}

body.colorSepia span.translated,
body span.translated {
  background-color: rgba(67, 176, 138, 0.15);
}

body.glossStyle span.translated,
body.glossStyle.colorSepia span.translated,
body.glossStyle.colorLight span.translated,
body.glossStyle.colorDark span.translated {
  background-color: inherit;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

body.glossStyleNew span.translated,
body.glossStyleNew.colorSepia span.translated,
body.glossStyleNew.colorLight span.translated,
body.glossStyleNew.colorDark span.translated {
  background-color: inherit;
  display: inline-block;
  text-align: center;
}

body.glossStyle span.translated,
body.glossStyle.colorSepia span.translated {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}

body.glossStyleNew span.translated,
body.glossStyleNew.colorSepia span.translated {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}

body.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
body.colorDark[data-clickMode=translate].notouch span[data-p].hovering,
body.colorDark[data-clickMode=translate] span[data-p].selecting,
body.colorDark span.translating {
  outline: 2px solid #368;
}

body.colorDark span.translated {
  background-color: #124;
  color: #9bc;
}

body.glossStyle.colorDark span.translated {
  background-color: inherit;
  color: #9bc;
}

body.popoverStyle[data-clickMode=translate].notouch span[data-p]:hover,
body.popoverStyle[data-clickMode=translate].notouch span[data-p].hovering,
body.popoverStyle[data-clickMode=translate] span[data-p].selecting,
body.popoverStyle span.translating,
body.popoverStyle.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
body.popoverStyle.colorSepia[data-clickMode=translate].notouch span[data-p].hovering,
body.popoverStyle.colorSepia[data-clickMode=translate] span[data-p].selecting,
body.popoverStyle.colorSepia span.translating {
  outline: none;
  background-color: rgba(42, 185, 123, 0.3);
}

body.popoverStyle[data-clickMode=translate].notouch span[data-p].translated:hover,
body.popoverStyle.colorSepia[data-clickMode=translate].notouch span[data-p].translated:hover,
body.popoverStyle.colorDark[data-clickMode=translate].notouch span[data-p].translated:hover {
  background-color: inherit;
}

body.popoverStyle.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
body.popoverStyle.colorDark[data-clickMode=translate].notouch span[data-p].hovering,
body.popoverStyle.colorDark[data-clickMode=translate] span[data-p].selecting,
body.popoverStyle.colorDark span.translating {
  outline: none;
  background-color: #368;
  color: #acd;
}

body.popoverStyle.colorLight[data-clickMode=translate].notouch span[data-p]:hover,
body.popoverStyle.colorLight[data-clickMode=translate].notouch span[data-p].hovering,
body.popoverStyle.colorLight[data-clickMode=translate] span[data-p].selecting,
body.popoverStyle.colorLight span.translating {
  outline: none;
  background-color: #bbb;
  color: black;
}

body.popoverStyle span.translating .original {
  display: inline;
}

body.popoverStyle span.translating .translation {
  display: none;
}

.readerPopoverLayer {
  pointer-events: none;
  position: fixed;
  overflow: hidden;
  z-index: 100;
}

.readerPopoverBubble {
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  display: none;
  max-width: min(320px, 100vw - 16px);
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #2ab97b;
  color: white;
  font-family: inherit;
  font-size: inherit;
  text-align: center;
  line-height: 1.4;
  font-weight: normal;
  white-space: normal;
  word-wrap: break-word;
  animation: fadeIn 400ms ease-out;
}

.readerPopoverBubble.deleting {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}

.readerPopoverBubble .transliteration {
  font-size: 80%;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.readerPopoverBubble:after {
  top: 100%;
  left: 50%;
  left: var(--arrow-left, 50%);
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-top-color: #2ab97b;
  border-width: 6px;
  margin-left: -6px;
}

body.popoverStyle span.translated,
body.popoverStyle.colorSepia span.translated,
body.popoverStyle.colorLight span.translated,
body.popoverStyle.colorDark span.translated {
  background-color: inherit;
}

body.popoverStyle span.translated,
body.popoverStyle.colorSepia span.translated {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}

body.popoverStyle.colorDark span.translated {
  color: #9bc;
}

body.popoverStyle.colorDark .readerPopoverBubble {
  background-color: #368;
}

body.popoverStyle.colorDark .readerPopoverBubble:after {
  border-top-color: #368;
}

body.popoverStyle.colorLight .readerPopoverBubble {
  background-color: black;
}

body.popoverStyle.colorLight .readerPopoverBubble:after {
  border-top-color: black;
}

body.popoverStyle span.translating.monolingual,
body.popoverStyle.colorSepia span.translating.monolingual {
  background-color: rgba(42, 185, 123, 0.3);
}

body.popoverStyle.colorDark span.translating.monolingual {
  background-color: #368;
}

body.popoverStyle.colorLight span.translating.monolingual {
  background-color: #eee;
}

.readerPopoverBubble.popoverBelow:after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #2ab97b;
}

body.popoverStyle.colorDark .readerPopoverBubble.popoverBelow:after {
  border-top-color: transparent;
  border-bottom-color: #368;
}

body.popoverStyle.colorLight .readerPopoverBubble.popoverBelow:after {
  border-top-color: transparent;
  border-bottom-color: black;
}

body[data-clickMode=sync] span[data-p].audioSync {
  opacity: 0.5;
}

body[data-clickMode=goto].notouch span[data-p]:hover,
body[data-clickMode=sync].notouch span[data-p]:hover,
body[data-clickMode=sync] span[data-p].audioSync.audioPosition {
  opacity: 1;
}

body.audioHighlightFade span[data-p] {
  transition: color 800ms ease-out, background-color 800ms ease-out, text-shadow 800ms ease-out;
}

body.audioHighlightFade span[data-p].audioPosition {
  transition: none;
}

span.audioPosition,
body[data-clickMode=sync] span[data-p].audioSync,
body[data-clickMode=goto].notouch span[data-p]:hover,
body[data-clickMode=sync].notouch span[data-p]:hover {
  color: #fff;
  text-shadow: #000 0 0 4px;
  background-color: #975;
  border-radius: 4px;
  transition: none;
}

span.audioPosition + span.audioPosition {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

span.audioPosition:has(+ span.audioPosition) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body.colorDark span.audioPosition,
body.colorDark[data-clickMode=sync] span[data-p].audioSync,
body.colorDark[data-clickMode=goto].notouch span[data-p]:hover,
body.colorDark[data-clickMode=sync].notouch span[data-p]:hover {
  color: #fff;
  text-shadow: #012 0 0 4px;
  background-color: #368;
}

body[data-clickMode=sync].notouch span[data-p]:hover {
  cursor: copy;
}

/** Admin impersonation banner — pinned to the bottom of every page so it can't
 *  be scrolled away or hidden behind the header. */
.impersonationBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 12px;
  background-color: #d34d2f;
  color: white;
  font-size: 14px;
  z-index: 20000;
}
.impersonationBanner button {
  background-color: white;
  color: rgb(170.8571428571, 60.7857142857, 36.1428571429);
  border: none;
  border-radius: 3px;
  padding: 3px 12px;
  cursor: pointer;
}

.importWordsView {
  text-align: left;
}
.importWordsView h1 {
  margin-top: 30px;
}
.importWordsView h2 {
  margin: 30px 0 16px;
}
.importWordsView ol {
  list-style-type: decimal;
  margin-left: 20px;
}
.importWordsView .exampleCsvFile {
  background-color: #fff;
  padding: 16px;
  border: 1px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
  border-radius: 4px;
  line-height: 1.4;
}
.importWordsView .exampleCsvFile .column-1,
.importWordsView .exampleCsvFile .column-5 {
  color: #4e4be5;
}
.importWordsView .exampleCsvFile .column-2 {
  color: #f59237;
}
.importWordsView .exampleCsvFile .column-3 {
  color: #43b08a;
}
.importWordsView .exampleCsvFile .column-4 {
  color: #d34d2f;
}
.importWordsView .inline-pre {
  white-space: pre-wrap;
  background-color: #fff;
  border: 1px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
  border-radius: 4px;
  font-family: monospace;
  padding: 2px 4px;
}
.importWordsView textarea {
  width: 100%;
  font-family: monospace;
  line-height: 1.4;
}

.languageSelectView {
  position: relative;
}
.languageSelectView .reEnableTranslation {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#languageSelectDialog h2 {
  margin-bottom: 10px;
  margin-right: 0;
}
#languageSelectDialog table td {
  padding: 3px;
}
#languageSelectDialog .continue {
  display: block;
  margin: 15px auto 10px auto;
}
#languageSelectDialog select {
  width: 100%;
}
#languageSelectDialog #languageSelectorView {
  width: 300px;
  margin: 0 auto;
}

.languageSelectorView .languageList {
  margin-top: 6px;
  text-align: left;
}
.languageSelectorView .menuLabel strong {
  font-weight: 600;
}
.languageSelectorView .menuItem.highlighted {
  background-color: rgba(0, 0, 0, 0.06);
}
.sheet .languageSelectorView .searchInputContainer {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 0;
  background-color: #fff;
}
.languageSelectorView.searchOnlyMode .languageList {
  margin-top: 8px;
  padding: 6px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
}

body#learnPage #mainContent {
  position: relative;
  text-align: center;
}
body#learnPage #mainContent h2 {
  margin-top: 25px;
  margin-bottom: 8px;
}
@media (max-width: 546px) {
  body#learnPage #mainContent h2 {
    margin-top: 15px;
  }
}
body#learnPage #mainContent h2:first-child {
  margin-top: 0;
}
body#learnPage #mainContent h2.perfectSessionMessage {
  background: linear-gradient(45deg, #f59237, #ffb74d, #ffd54f);
  background-size: 200% 200%;
  animation: perfectGradient 4s ease-in-out infinite;
  color: #fff;
  padding: 16px 24px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 20px rgba(255, 183, 77, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  font-size: 26px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  margin: 25px auto;
  display: inline-block;
  transform: scale(1.02);
  transition: all 0.3s ease;
  font-weight: 600;
}
@media (max-width: 546px) {
  body#learnPage #mainContent h2.perfectSessionMessage {
    font-size: 22px;
    padding: 12px 18px;
    margin: 15px auto;
  }
}
body#learnPage #mainContent h3 {
  margin-top: 10px;
  margin-bottom: 7px;
}
body#learnPage #mainContent table {
  width: 100%;
  text-align: left;
  margin: 10px 0;
}
body#learnPage #mainContent table th {
  border-bottom: 1px solid #777;
}
body#learnPage #mainContent .practiceOptionsTable {
  table-layout: fixed;
  width: 100%;
}
body#learnPage #mainContent .practiceOptionsTable td {
  position: relative;
}
body#learnPage #mainContent .practiceOptionsTable td:first-child {
  width: 70px;
  white-space: nowrap;
}
body#learnPage #mainContent .practiceOptionsTable select {
  width: 100%;
  box-sizing: border-box;
}
body#learnPage #mainContent .practiceOptionsTable .sourcePickerButton {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch body#learnPage #mainContent .practiceOptionsTable .sourcePickerButton {
  font-size: 16px;
}
body#learnPage #mainContent .practiceOptionsTable .sourcePickerButton {
  font-weight: 400;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 0 30px 0 12px;
  text-align: left;
  cursor: pointer;
}
body#learnPage #mainContent .practiceOptionsTable .sourcePickerButton:disabled {
  opacity: 0.6;
  cursor: default;
}
body#learnPage #mainContent .practiceOptionsTable .sourcePickerButton .sourcePickerButtonLabel {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#learnPage #mainContent .practiceOptionsTable .sourcePickerButton .sourcePickerButtonCaret {
  display: none;
}
body#learnPage #mainContent .practiceControls,
body#learnPage #mainContent .chatPractice {
  margin: 32px 0 28px;
  display: flex;
  flex-direction: row;
  gap: 28px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: space-around;
}
body#learnPage #mainContent .practiceControls > div,
body#learnPage #mainContent .chatPractice > div {
  min-width: 0;
}
body#learnPage #mainContent .practiceControls a,
body#learnPage #mainContent .chatPractice a {
  margin: 0;
}
body#learnPage #mainContent .practiceControls h3,
body#learnPage #mainContent .chatPractice h3 {
  margin-top: 0;
  text-align: left;
}
@media (max-width: 546px) {
  body#learnPage #mainContent .practiceControls,
  body#learnPage #mainContent .chatPractice {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin: 28px 0;
  }
}
body#learnPage #mainContent .practiceButton {
  margin-top: 15px;
  background-color: #419ecd;
  color: #fff;
  min-height: 84px;
  display: flex;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  -webkit-text-decoration: none;
  text-decoration: none;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#learnPage #mainContent .practiceButton {
    min-height: 80px;
  }
}
@media (max-width: 546px) {
  body#learnPage #mainContent .practiceButton {
    min-height: 68px;
  }
}
body#learnPage #mainContent .practiceButton:hover, body#learnPage #mainContent .practiceButton:focus-visible {
  box-shadow: 0 0 0 4px #419ecd;
}
body#learnPage #mainContent .practiceButton:hover .buttonIcon, body#learnPage #mainContent .practiceButton:focus-visible .buttonIcon {
  filter: brightness(1.1);
}
body#learnPage #mainContent .practiceButton .buttonIcon {
  width: 85px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2f81aa;
}
@media (min-width: 546.02px) and (max-width: 754px), (max-width: 546px) {
  body#learnPage #mainContent .practiceButton .buttonIcon {
    width: 70px;
  }
}
body#learnPage #mainContent .practiceButton img {
  width: 55px;
  display: block;
}
@media (min-width: 546.02px) and (max-width: 754px), (max-width: 546px) {
  body#learnPage #mainContent .practiceButton img {
    width: 45px;
  }
}
body#learnPage #mainContent .practiceButton .buttonTitle {
  align-self: center;
  padding: 14px 15px;
}
body#learnPage #mainContent .practiceButton {
  flex-shrink: 0;
}
body#learnPage #mainContent .reviewedToday {
  margin-top: 32px;
}
body#learnPage #mainContent .practiceEveryDay {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
body#learnPage #mainContent .chatPractice p {
  margin: 0;
  text-align: left;
}
@media (max-width: 546px) {
  body#learnPage #mainContent .chatPractice p:not(.moreLink) {
    display: none;
  }
  body#learnPage #mainContent .chatPractice p.moreLink {
    text-align: right;
  }
}
body#learnPage #weeklyChartContainer {
  padding: 12px 20px;
}
@media (max-width: 546px) {
  body#learnPage #weeklyChartContainer {
    padding: 10px 6px;
  }
}
body#learnPage #weeklyChartContainer {
  margin: 10px auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  background-color: #fff;
}

@keyframes perfectGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body#learnPage.touch #mainContent .practiceOptionsTable {
  border-collapse: collapse;
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
}
body#learnPage.touch #mainContent .practiceOptionsTable tr + tr td {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body#learnPage.touch #mainContent .practiceOptionsTable td {
  padding: 10px 0 10px 14px;
  font-size: 16px;
}
body#learnPage.touch #mainContent .practiceOptionsTable td:last-child {
  padding-right: 14px;
}
body#learnPage.touch #mainContent .practiceOptionsTable select,
body#learnPage.touch #mainContent .practiceOptionsTable .sourcePickerButton {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  color: #777;
  text-align: right;
  -moz-text-align-last: right;
       text-align-last: right;
  padding: 0 18px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3'/%3E%3C/svg%3E") no-repeat right center;
}
body#learnPage.touch #mainContent .practiceOptionsTable .sourcePickerButtonLabel {
  text-align: right;
}
body#learnPage.touch #mainContent .practiceOptionsTable .sourcePickerButtonCaret {
  display: none;
}

.libraryToolbar {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
}
.libraryToolbar .browse {
  flex: none;
  max-width: min(200px, 55%);
}
.libraryToolbar .browse select {
  field-sizing: content;
}
.libraryToolbar .search {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 546px) {
  .libraryToolbar .browse,
  .libraryToolbar .search {
    flex: 1 1 0;
  }
  .libraryToolbar .browse {
    max-width: none;
  }
  .libraryToolbar .browse .select {
    width: 100%;
  }
  .libraryToolbar .browse select {
    field-sizing: fixed;
  }
}

[data-subview=libraryListView] .listControls {
  margin-bottom: 10px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .listControls {
    flex-wrap: wrap;
  }
  [data-subview=libraryListView] .listControls .libraryButtons {
    order: -2;
    flex-basis: 100%;
  }
  [data-subview=libraryListView] .listControls .libraryToolbar {
    order: -1;
    flex-basis: 100%;
  }
}
[data-subview=libraryListView] .listControls .sortAndFilterMenu {
  margin-left: auto;
}
@media not (max-width: 546px) {
  [data-subview=libraryListView] .listControls .sortAndFilterMenu {
    display: none;
  }
}
@media (max-width: 546px) {
  [data-subview=libraryListView] thead {
    display: none;
  }
}
[data-subview=libraryListView] .permission {
  opacity: 0.5;
}
[data-subview=libraryListView] tr.subtleContainer {
  font-size: 85%;
  background-color: #fff;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] tr.subtleContainer {
    font-size: 16px;
  }
}
[data-subview=libraryListView] tr.subtleContainer.selected {
  background-color: #fff8b8;
}
[data-subview=libraryListView] tr.subtleContainer.notAvailable td {
  border-top: 2px solid #f22;
  border-bottom: 2px solid #f22;
  background-color: #fee;
}
[data-subview=libraryListView] tr.filteredOut {
  display: none;
}
[data-subview=libraryListView] .ui-sortable-helper {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
[data-subview=libraryListView] .ui-sortable-helper .col-dragHandle {
  cursor: grabbing;
  cursor: -moz-grabbing;
}
[data-subview=libraryListView] .col-dragHandle {
  color: #bbb;
  cursor: grab;
  cursor: -moz-grab;
  font-size: 130%;
  padding: 5px;
  display: none;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
}
[data-subview=libraryListView] .col-dragHandle .icon-align-justify {
  display: block;
  width: 12px;
  margin: 0 auto;
  overflow: hidden;
}
[data-subview=libraryListView] body.notouch .col-dragHandle:hover {
  color: #bbb;
}
[data-subview=libraryListView] td {
  overflow: hidden;
  padding-top: 9px;
  padding-bottom: 9px;
  color: #555;
  vertical-align: middle;
}
[data-subview=libraryListView] .col-title a {
  color: #2f81aa;
  font-weight: 500;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-title a {
    color: #333;
    -webkit-text-decoration: none;
    text-decoration: none;
  }
}
[data-subview=libraryListView] thead {
  border-bottom-color: #bbb;
}
[data-subview=libraryListView] th {
  color: #555;
  font-weight: 600;
  padding-bottom: 6px;
}
[data-subview=libraryListView] table.draggable .col-dragHandle {
  display: table-cell;
}
[data-subview=libraryListView] th.sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
[data-subview=libraryListView] .sortIndicator {
  margin-left: 2px;
  font-size: 90%;
  color: #2f81aa;
}
[data-subview=libraryListView] .sortHint {
  margin-left: 2px;
  font-size: 90%;
  color: #777;
  opacity: 0;
  transition: opacity 0.12s ease;
}
@media (hover: hover) {
  [data-subview=libraryListView] th.sortable:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  [data-subview=libraryListView] th.sortable:hover .sortHint {
    opacity: 0.6;
  }
}
[data-subview=libraryListView] th.col-contentType,
[data-subview=libraryListView] th.col-difficulty,
[data-subview=libraryListView] th.col-permissions {
  text-align: center;
}
[data-subview=libraryListView] th.col-contentType .sortHint,
[data-subview=libraryListView] th.col-difficulty .sortHint,
[data-subview=libraryListView] th.col-permissions .sortHint {
  margin-left: 0;
}
[data-subview=libraryListView] .col-checkbox {
  width: 30px;
  max-width: 30px;
}
[data-subview=libraryListView] .col-permissions,
[data-subview=libraryListView] .col-difficulty {
  width: 34px;
  max-width: 34px;
  min-width: 34px;
  text-align: center;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-permissions,
  [data-subview=libraryListView] .col-difficulty {
    display: none;
  }
}
[data-subview=libraryListView] .col-title {
  width: 600px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-title {
    width: auto;
    max-width: none;
  }
}
[data-subview=libraryListView] .col-title a {
  word-wrap: anywhere;
}
[data-subview=libraryListView] .col-contentType {
  width: 28px;
  max-width: 28px;
  min-width: 28px;
  text-align: center;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-contentType {
    display: none;
  }
}
[data-subview=libraryListView] .col-contentType .contentTypeLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
[data-subview=libraryListView] td.col-contentType {
  color: #777;
  font-size: 115%;
}
[data-subview=libraryListView] .col-owner {
  width: 52px;
  max-width: 52px;
  min-width: 52px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-owner {
    display: none;
  }
}
[data-subview=libraryListView] .col-owner a {
  display: block;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-subview=libraryListView] .col-wordCount {
  width: 70px;
  max-width: 70px;
  min-width: 70px;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  padding-right: 12px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-wordCount {
    display: none;
    width: 50px;
    max-width: 50px;
    min-width: 50px;
  }
}
[data-subview=libraryListView] th.col-wordCount {
  text-align: right;
}
[data-subview=libraryListView] .col-readStatus {
  width: 78px;
  max-width: 78px;
  min-width: 78px;
  padding-left: 5px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-readStatus {
    display: none;
  }
}
[data-subview=libraryListView] .readStatusLabel.muted {
  color: #777;
}
[data-subview=libraryListView] .readingProgress {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
[data-subview=libraryListView] .readingProgress progress {
  flex: 1 1 auto;
  min-width: 0;
  height: 5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(67, 176, 138, 0.3);
}
@supports (color: color-mix(in lch, red, blue)){
[data-subview=libraryListView] .readingProgress progress {
  background-color: color-mix(in srgb, var(--category-color, #43b08a) 30%, transparent);
}
}
[data-subview=libraryListView] .readingProgress progress::-webkit-progress-bar {
  background-color: transparent;
}
[data-subview=libraryListView] .readingProgress progress::-webkit-progress-value {
  background-color: #43b08a;
  background-color: var(--category-color, #43b08a);
  border-radius: 4px;
}
[data-subview=libraryListView] .readingProgress progress::-moz-progress-bar {
  background-color: #43b08a;
  background-color: var(--category-color, #43b08a);
  border-radius: 4px;
}
[data-subview=libraryListView] .readingProgress .completedCheck {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #43b08a;
  background-color: var(--category-color, #43b08a);
  color: #fff;
  color: var(--category-ink, #fff);
}
[data-subview=libraryListView] .readingProgress .completedCheck svg {
  width: 10px;
}
[data-subview=libraryListView] .categoryChip {
  display: inline-block;
  padding: 0 8px;
  line-height: 18px;
  border-radius: 9px;
  background-color: #43b08a;
  background-color: var(--category-color, #43b08a);
  color: #fff;
  color: var(--category-ink, #fff);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
[data-subview=libraryListView] .col-title > .categoryChip {
  margin-left: 8px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-title > .categoryChip {
    display: none;
  }
}
[data-subview=libraryListView] .mobileMetaLine {
  display: none;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .mobileMetaLine {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    -moz-column-gap: 7px;
         column-gap: 7px;
    margin-top: 4px;
    font-size: 12px;
    color: #777;
  }
}
[data-subview=libraryListView] .mobileMetaLine .metaDot {
  color: #bbb;
}
[data-subview=libraryListView] .mobileMetaLine .readingProgress {
  flex-basis: 100%;
  margin-top: 4px;
}
[data-subview=libraryListView] .mobileMetaLine a {
  color: #777;
  font-weight: 400;
}
[data-subview=libraryListView] .col-lastRead {
  width: 80px;
  max-width: 80px;
  min-width: 80px;
  white-space: nowrap;
}
@media (max-width: 754px) {
  [data-subview=libraryListView] .col-lastRead {
    display: none;
  }
}

.shelfChoices {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.shelfChoice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
body.touch .shelfChoice {
  min-height: 44px;
}
.shelfChoice input {
  margin: 0;
}
.shelfChoice .shelfName {
  flex: 1 1 auto;
}
.shelfChoice small {
  color: #999;
}

.newShelfForm {
  display: flex;
  gap: 8px;
}

[data-subview=shelfEditView] {
  padding: 20px 0;
}
[data-subview=shelfEditView] .edit {
  display: none;
  margin: 10px auto;
}
[data-subview=shelfEditView] .edit table {
  width: 100%;
}
[data-subview=shelfEditView] .edit table button,
[data-subview=shelfEditView] .edit table input {
  font-size: 16px;
  padding: 5px 8px;
}
[data-subview=shelfEditView] .edit table textarea {
  font-size: 16px;
}
[data-subview=shelfEditView] .edit table textarea,
[data-subview=shelfEditView] .edit table button {
  width: 100%;
}
[data-subview=shelfEditView] .shelfDescription.view {
  font-family: "Open Sans";
}
[data-subview=shelfEditView] .editableContainer {
  cursor: pointer;
  padding: 4px 160px 4px 0;
  position: relative;
}
@media (max-width: 546px) {
  [data-subview=shelfEditView] .editableContainer {
    padding-right: 35px;
  }
}
[data-subview=shelfEditView] .editableContainer .editableHint {
  display: none;
  margin-left: 40px;
  color: #999;
  padding: 2px 10px;
  position: absolute;
  top: 2px;
  right: 7px;
}
[data-subview=shelfEditView] .editableContainer .editableHint small {
  position: relative;
  top: -1px;
}
[data-subview=shelfEditView] .editableContainer:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
[data-subview=shelfEditView] .editableContainer:hover .editableHint {
  display: block;
}
[data-subview=shelfEditView] .shareLink {
  margin: 10px 0;
  font-size: 90%;
}

.infiniteScrollSentinel {
  min-height: 1px;
  text-align: center;
  padding: 20px 0;
}
.infiniteScrollSentinel .infiniteScrollLoading,
.infiniteScrollSentinel .infiniteScrollEnd,
.infiniteScrollSentinel .infiniteScrollEmpty {
  color: #777;
  font-size: 14px;
}
.infiniteScrollSentinel .infiniteScrollLoading p,
.infiniteScrollSentinel .infiniteScrollEnd p,
.infiniteScrollSentinel .infiniteScrollEmpty p {
  margin: 10px 0;
}
.infiniteScrollSentinel .infiniteScrollLoading a,
.infiniteScrollSentinel .infiniteScrollEnd a,
.infiniteScrollSentinel .infiniteScrollEmpty a {
  color: #2f81aa;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

body#libraryPage,
body#discoverPage {
  position: relative;
}
body#libraryPage .bookColumn,
body#discoverPage .bookColumn {
  position: relative;
}

.libraryButtons {
  display: flex;
  flex: none;
  gap: 8px;
}
@media (max-width: 546px) {
  .libraryButtons .button {
    flex: 1 1 0;
  }
}
@media (min-width: 546.02px) and (max-width: 754px) {
  .libraryButtons .button {
    width: 36px;
    padding: 0;
  }
  .libraryButtons .buttonLabel {
    display: none;
  }
}
.libraryButtons .glow {
  position: relative;
}

.shelfRow {
  width: 100%;
  float: none;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}

body.notouch .shelfRow:hover {
  background-color: #f0eedf;
}

body.notouch .shelfRow:hover h4 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.shelfRow a {
  display: block;
  padding: 15px 0;
  color: #359;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.shelfRow h4 {
  color: #457;
  margin-bottom: 4px;
}

.shelfRow:first-child {
  border-top: 1px solid #eee;
}

.shelfRow.deleted,
body.notouch .shelfRow.deleted:hover {
  background-color: #faa;
}

.sortContainer {
  position: relative;
  float: right;
  margin-left: 10px;
}

[data-subview=libraryList].fetching {
  opacity: 0.5;
}

[data-subview=libraryList] {
  clear: both;
  margin-top: 15px;
}

.webSearch input {
  width: 100%;
  margin: 0 0 10px;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #eee;
  border-radius: 12px;
}

.websitesRow {
  margin-bottom: 16px;
}
.websitesRow .websitesRowHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  text-align: left;
}
.websitesRow .websiteTiles {
  display: flex;
  gap: 10px;
  min-height: 62px;
  margin: 0 -8px;
  padding: 8px 8px 12px;
  overflow-x: auto;
  scroll-padding: 0 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.websitesRow .websiteTile {
  display: flex;
  flex: 0 0 160px;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.031372549);
  color: #333;
  text-align: left;
  -webkit-text-decoration: none;
  text-decoration: none;
  scroll-snap-align: start;
}
.websitesRow .websiteTile strong,
.websitesRow .websiteTile small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.websitesRow .websiteTile small {
  color: #999;
}
.websitesRow .searchTile strong {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}

.noPublicTexts {
  margin: 20px 0;
  text-align: left;
}

.websitesLink {
  margin: 8px 0 0;
  font-size: 14px;
  text-align: left;
}
.websitesLink a {
  color: #777;
}

.popularDomain:first-child {
  border-top: 1px solid #eee;
}

.popularDomain {
  border-radius: 12px;
  padding: 12px 16px;
  margin: 10px 0;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.031372549);
}

body.redesign .popularDomain .description {
  font-weight: 300;
}

@media (max-width: 546px) {
  .sortContainer {
    margin-left: 0;
  }
}
.newLibraryFilters {
  position: relative;
  text-align: right;
}
.newLibraryFilters .searchSortAndFilters {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.newLibraryFilters .searchSortAndFilters .searchInputContainer {
  flex: 1;
  min-width: 0;
}
.newLibraryFilters .searchSortAndFilters .select,
.newLibraryFilters .searchSortAndFilters .filtersButton {
  flex: 0 0 auto;
}
.newLibraryFilters .popover.filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 380px;
  max-width: calc(100vw - 24px);
  padding: 16px;
}
.newLibraryFilters .popover.filters .filtersFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.filterSwitches {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.listControls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.listControls .spacer {
  flex: 1 1 auto;
}
.listControls > .searchInputContainer {
  flex: 1 1 0;
  min-width: 0;
}
.listControls .selectAllContainer {
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch .listControls .selectAllContainer {
  font-size: 16px;
}
.listControls .selectAllContainer {
  font-weight: 400;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
}
.listControls .selectAllContainer input[type=checkbox] + label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.listControls .selectAllContainer label i,
.listControls .selectAllContainer input[type=checkbox]:checked + label .icon-check {
  top: 0;
  left: 0;
  width: 0.786em;
  text-align: left;
}

/** Loading page, throbbers, and ajax indicators */
body#loadingPage {
  color: #43b08a;
}

body#loadingPage #entirePage {
  background-color: #43b08a;
  color: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: "Jost", sans-serif;
}

.loadingMessage {
  margin: 20px;
  font-weight: 500;
}

body#loadingPage .loadingMessage {
  position: fixed;
  top: 25%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 150%;
}

.loadingThrobber {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -16px -16px;
}

body#loadingPage .loadingThrobber {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -16px -64px;
  width: 128px;
}

.ajaxIndicatorLight,
.ajaxIndicatorDark,
.ajaxIndicator {
  display: none;
}

#header .ajaxIndicator {
  position: absolute;
  top: 2px;
  right: 80px;
  z-index: 40;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  #header .ajaxIndicator {
    right: 65px;
  }
}
@media (max-width: 546px) {
  #header .ajaxIndicator {
    top: auto;
    bottom: 9px;
    right: 5px;
    width: 16px;
    height: 16px;
  }
}

body.ajax .ajaxIndicator,
body.ajax.colorLight .ajaxIndicatorLight,
body.ajax.colorSepia .ajaxIndicatorLight,
body.ajax.colorDark .ajaxIndicatorDark {
  display: block;
}

.pageLoading {
  opacity: 0.3;
  animation: pageLoading 100ms ease-out;
}

@keyframes pageLoading {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}
/**
 * Menus (ui/Menu.tsx): in the iOS app, iOS's own; elsewhere in a popover
 * (_popover.scss), drawn as iOS's are. Its sections are split by a line,
 * each maybe titled; a tick on the left marks an option picked.
 */
.popover.menuPopover {
  min-width: 220px;
  padding: 6px 0;
  line-height: normal;
  white-space: nowrap;
}

.menuSection + .menuSection {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.menuSectionTitle {
  padding: 4px 16px 4px 32px;
  font-size: 12px;
  font-weight: 500;
  color: #777;
}

.menuItem {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0 16px 0 8px;
  border: none;
  border-radius: 0;
  background: none;
  color: #111;
  font-size: 14px;
}
body.touch .menuItem {
  font-size: 16px;
}
.menuItem {
  text-align: left;
  cursor: pointer;
}
body.touch .menuItem {
  min-height: 44px;
}
.menuItem .menuCheck {
  flex: 0 0 24px;
  display: flex;
  justify-content: center;
}
.menuItem .menuLabel {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menuItem .menuTrailing {
  margin-left: 16px;
  color: #777;
}
.menuItem.destructive {
  color: #d34d2f;
}
.menuItem:disabled, .menuItem.disabled {
  color: rgba(0, 0, 0, 0.3);
  cursor: default;
}
.menuItem.stepper {
  cursor: default;
}
.menuItem.stepper .menuTrailing {
  display: flex;
  align-items: center;
  color: #111;
}
.menuItem.stepper button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
}
.menuItem.stepper button:disabled {
  color: rgba(0, 0, 0, 0.25);
}
.menuItem.stepper .stepperValue {
  min-width: 36px;
  text-align: center;
}

body.notouch .menuItem:not(.stepper):not(:disabled):not(.disabled):hover,
body.notouch .menuItem.stepper button:not(:disabled):hover {
  background-color: rgba(0, 0, 0, 0.06);
}

body.colorDark .menuSection + .menuSection {
  border-top-color: rgba(255, 255, 255, 0.1);
}
body.colorDark .menuItem,
body.colorDark .menuItem.stepper button {
  border: none;
  background: none;
  color: #aaa;
}
body.colorDark .menuItem.stepper .menuTrailing {
  color: #aaa;
}
body.colorDark .menuItem.destructive {
  color: #d34d2f;
}
body.colorDark .menuItem.disabled,
body.colorDark .menuItem:disabled,
body.colorDark .menuItem.stepper button:disabled {
  color: rgba(255, 255, 255, 0.3);
}

body.notouch.colorDark .menuItem:not(.stepper):not(:disabled):not(.disabled):hover,
body.notouch.colorDark .menuItem.stepper button:not(:disabled):hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/** Floating notification, sliding down from the top (or up from the bottom) */
.notification {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  margin: 12px 0;
  padding: 12px 40px 12px 16px;
  color: #fff;
  background-color: #333;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  display: none;
  z-index: 10000;
}

.notification .message {
  margin: 0;
  line-height: 1.4;
}
.notification .message a {
  color: #fff;
}

.notification .dismissButton {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  cursor: pointer;
}

.notification .dismissButton:hover {
  color: #fff;
}

.noscriptPage {
  background-color: #eee;
  margin: 0 auto;
  max-width: 700px;
  padding: 20px;
}
.noscriptPage h1,
.noscriptPage h2,
.noscriptPage h3 {
  font-family: "Open Sans", sans-serif;
  margin: 15px 0;
}
.noscriptPage div {
  margin: 25px 0;
}

[data-part] {
  display: none;
}

[data-part].partVisible {
  display: block;
}

[data-part] .skipButton {
  text-align: right;
  margin-top: 30px;
}

/** Subscription plan cards (account panel and checkout) */
.planContainer {
  clear: both;
  text-align: center;
}

.plan {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 274px;
  background-color: rgb(223.7234042553, 219.5531914894, 188.2765957447);
  padding: 10px;
  margin: 8px 8px 18px 8px;
  text-align: left;
  border-radius: 8px;
}
.plan h2 {
  margin: 2px 0 10px;
}

body.colorDark .plan {
  background-color: #263f51;
  border: none;
  color: #fff;
}
body.colorDark .plan li {
  color: #fff;
}

.plan p {
  text-align: center;
}

.plan h3 {
  text-align: center;
}

.plan .payment {
  text-align: center;
  opacity: 0.5;
}

.payButtonIcon {
  position: absolute;
  left: 25px;
  top: 18px;
  color: #fff;
  pointer-events: none;
  z-index: 1;
}

body.notouch .plan:hover .payment {
  opacity: 1;
}

.plan .payButton {
  position: relative;
  margin: 10px 0 0 0;
  padding: 5px 8px 8px 8px;
}
.plan .payButton.stripePayment {
  text-align: left;
  padding: 12px 0 12px 80px;
  vertical-align: middle;
}

.goToCheckout .icon-rocket {
  position: relative;
}

.plan h2 {
  text-align: center;
}

.plan ul {
  list-style: disc;
  padding-left: 22px;
}

.plan li {
  margin-bottom: 3px;
}

.plan .selected {
  font-size: 110%;
  text-align: center;
  margin: 10px;
}

.plan .ribbon {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 44%;
  font-weight: bold;
  padding: 8px 0;
  text-align: center;
  background-color: #2a6;
  color: #fff;
}

@media (min-width: 546.02px) and (max-width: 754px) {
  .plan {
    width: 232px;
    margin: 4px 3px 10px 3px;
    padding: 6px;
    font-size: 90%;
  }
}
@media (max-width: 546px) {
  .plan {
    width: 220px;
    margin: 4px 50px 10px 50px;
    padding: 8px;
  }
}
/**
 * Popovers (ui/Popover.tsx): what floats over the page from what opened it,
 * on the menus' surface (a menu's is one, _menu.scss). Placed below it, or
 * above it where there's more room, as Popover.tsx measures it.
 */
.popoverAnchor {
  position: relative;
}

.popover {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 100;
  box-sizing: border-box;
  width: -moz-max-content;
  width: max-content;
  max-width: min(320px, 100vw - 24px);
  padding: 14px 16px;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px) saturate(1.8);
  border-radius: 12px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 32px rgba(0, 0, 0, 0.18);
  color: #111;
  font-size: 14px;
}
body.touch .popover {
  font-size: 16px;
}
.popover {
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  cursor: default;
}
.popover > h4 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 600;
}
.popover h4,
.popover li {
  color: inherit;
}
.popover > p {
  margin: 0 0 10px;
  color: #777;
}
.popover.scrolls {
  overflow-y: auto;
}
.popover.alignStart {
  left: 0;
}
.popover.alignEnd {
  right: 0;
}
.popover.above {
  top: auto;
  bottom: calc(100% + 6px);
}
.popover.withArrow {
  top: calc(100% + 12px);
}
.popover.withArrow.above {
  top: auto;
  bottom: calc(100% + 12px);
}
.popover .popoverArrow {
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background-color: inherit;
  box-shadow: -0.5px -0.5px 0 0 rgba(0, 0, 0, 0.12);
  transform: rotate(45deg);
}
.popover.above .popoverArrow {
  top: auto;
  bottom: -7px;
  box-shadow: 0.5px 0.5px 0 0 rgba(0, 0, 0, 0.12);
}

body.colorDark .popover {
  background-color: rgba(34, 34, 34, 0.94);
  box-shadow: 0 0 0 0.5px #444, 0 10px 32px rgba(0, 0, 0, 0.5);
  color: #aaa;
}
body.colorDark .popover > p {
  color: rgba(255, 255, 255, 0.45);
}
body.colorDark .popover .popoverArrow {
  box-shadow: -0.5px -0.5px 0 0 #444;
}
body.colorDark .popover.above .popoverArrow {
  box-shadow: 0.5px 0.5px 0 0 #444;
}

.practiceEditView h2 {
  margin-bottom: 16px;
}
@media (max-width: 546px) {
  .practiceEditView h2 {
    display: none;
  }
}
.practiceEditView .topRow {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  justify-content: space-between;
  gap: 16px;
}
.practiceEditView .topRow .translatePanel,
.practiceEditView .topRow .wordPanel {
  flex: 1 1 0;
  width: 0;
}
.practiceEditView button {
  margin-top: 4px;
  border: none;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  background-color: transparent;
  color: #2f81aa;
}
.practiceEditView button:hover {
  color: #1d5b7a;
}
.practiceEditView .contextHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.practiceEditView .contextHeader button {
  font-size: 24px;
  border: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: transparent;
}
.practiceEditView .context {
  margin-top: 8px;
}
.practiceEditView h4 {
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  font-weight: 600;
}
.practiceEditView .explanation {
  color: #43b08a;
  font-size: 14px;
}
.practiceEditView .explanation button {
  margin-top: 0;
}
.practiceEditView .aiResponse {
  font-size: 14px;
}
.practiceEditView .alternativeRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2px;
}
.practiceEditView .alternativeRow input {
  margin-top: 4px;
}
.practiceEditView .alternativeRow input.mainWord:disabled {
  opacity: 1;
  background-color: transparent;
}
.practiceEditView .editableListView input {
  width: 40px;
}
.practiceEditView .editableListView .removeButton {
  padding-right: 0;
}
.practiceEditView .aiReponse {
  font-size: 14px;
}
.practiceEditView .playTTSButton {
  margin: 0 3px 0 0;
  padding-top: 8px;
}

@keyframes practiceSlideIn {
  from {
    transform: translateX(120%);
  }
  to {
    transform: translateX(0);
  }
}
@media (min-width: 880px) or (min-height: 900px) {
  body#practicePage {
    zoom: 1.1;
  }
}
@media (min-width: 1000px) or (min-height: 1050px) {
  body#practicePage {
    zoom: 1.2;
  }
}
@media (min-width: 370.02px) and (max-width: 546px) {
  body#practicePage {
    zoom: 1.15;
  }
}
body#practicePage .practiceContext {
  color: #111;
  font-size: 18px;
  line-height: 1.5;
}
@media (min-width: 546.02px) {
  body#practicePage .practiceContext {
    font-size: 20px;
  }
}
body#practicePage .practiceView {
  margin: 0 auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f0eedf;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
body#practicePage .practiceView .scrollableArea {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: stretch;
  position: relative;
}
body#practicePage .practiceView .newWord {
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 32px;
}
body#practicePage .practiceView .newWordOptions {
  padding: 16px 0;
}
body#practicePage .practiceView .newWordOptions li {
  margin: 4px 0;
}
body#practicePage .practiceView .newWordOptions li small {
  opacity: 0.5;
  margin-right: 8px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
@media (max-width: 546px) {
  body#practicePage .practiceView .newWordOptions li small {
    display: none;
  }
}
body#practicePage .practiceView .middle {
  padding: 16px;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
body#practicePage .practiceView .middle.challenge {
  padding-bottom: 48px;
}
body#practicePage .practiceView .centeredContent {
  width: 650px;
  flex-shrink: 1;
}
body#practicePage .practiceView .topSpacer {
  flex-grow: 1;
  height: 0;
  max-height: 15%;
}
body#practicePage .practiceView .bottomSpacer {
  flex-grow: 2;
  height: 0;
}
body#practicePage .footer {
  padding: 16px;
  position: relative;
  border-top: 2px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
}
@media (min-height: 700px) and (min-width: 500px) {
  body#practicePage .footer {
    padding: 32px 16px;
  }
}
@media (display-mode: standalone) {
  body#practicePage .footer {
    padding-bottom: 28px;
  }
}
body#practicePage .feedbackRibbon {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  padding: 16px;
  color: #fff;
  animation: practiceSlideIn 200ms;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
body#practicePage .feedbackRibbon h3 {
  color: #fff;
}
body#practicePage .feedbackRibbon .feedbackContent {
  width: 650px;
  margin: 0 auto;
}
body#practicePage .feedbackRibbon.correct {
  background-color: #43b08a;
}
body#practicePage .feedbackRibbon.incorrect {
  background-color: #d34d2f;
}
body#practicePage .feedbackRibbon.neutral {
  background-color: #f59237;
}
body#practicePage .feedbackRibbon .leniencySettingsButton {
  float: right;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: none;
  font-size: 18px;
}
body#practicePage .feedbackRibbon .leniencySettingsButton:hover {
  color: #fff;
}
body#practicePage .feedbackRibbon .leniencySettings label {
  font-size: 14px;
}
body#practicePage .feedbackRibbon label {
  color: #fff;
}
body#practicePage .feedbackRibbon label input {
  margin-left: 6px;
}
body#practicePage button.correct:disabled, body#practicePage button.correct {
  background-color: #43b08a;
  color: #fff;
}
body#practicePage button.incorrect:disabled, body#practicePage button.incorrect {
  background-color: #d34d2f;
  color: #fff;
}
body#practicePage .explanation {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
body#practicePage button:disabled {
  background: rgb(223.7234042553, 219.5531914894, 188.2765957447);
  color: rgb(207.4468085106, 201.1063829787, 153.5531914894);
}
body#practicePage .multipleChoiceButtonRow,
body#practicePage .footerButtons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 650px;
  margin: 0 auto;
}
body#practicePage .multipleChoiceButtonRow .continueButton,
body#practicePage .footerButtons .continueButton {
  flex-grow: 1;
  background-color: #2f81aa;
  color: #fff;
  font-weight: 600;
}
body#practicePage .multipleChoiceButtonRow .continueButton:disabled,
body#practicePage .footerButtons .continueButton:disabled {
  background: rgb(223.7234042553, 219.5531914894, 188.2765957447);
  color: rgb(207.4468085106, 201.1063829787, 153.5531914894);
}
body#practicePage .multipleChoiceButtonRow button,
body#practicePage .footerButtons button {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
}
body#practicePage .multipleChoiceButtonRow small,
body#practicePage .footerButtons small {
  opacity: 0.5;
  margin-right: 8px;
}
@media (max-width: 546px) {
  body#practicePage .multipleChoiceButtonRow small,
  body#practicePage .footerButtons small {
    display: none;
  }
}
body#practicePage .transliterationContainer {
  display: inline-block;
}
body#practicePage .transliterationContainer .transliteration {
  display: block;
  font-size: 70%;
  font-family: "Open Sans", sans-serif;
  opacity: 0.8;
  text-align: center;
}
body#practicePage .transliterationContainer .transliteration.concealed {
  visibility: hidden;
}
body#practicePage .multipleChoiceButtonRow {
  justify-content: left;
}
body#practicePage .inputRow {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 10px;
}
body#practicePage .imageURL {
  display: none;
}
body#practicePage .accentInputPanel {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}
body#practicePage .accentInputPanel button {
  padding: 6px 12px;
}
body#practicePage .hint {
  margin-top: 16px;
}
body#practicePage .hint.submitted {
  opacity: 0;
  pointer-events: none;
}
body#practicePage .callout {
  margin-left: 16px;
  margin-right: 16px;
}
body#practicePage .playTTSButton {
  color: #419ecd;
  border: none;
  background: transparent;
  margin: 0 4px 0 0;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 400;
}
body#practicePage [dir=rtl] .playTTSButton {
  margin: 0 0 0 4px;
}
body#practicePage .passiveMultipleChoiceChallenge .playTTSButton {
  margin: 0 0 0 4px;
}
body#practicePage .introChallenge .transliteration {
  font-size: 60%;
  font-family: "Open Sans", sans-serif;
  opacity: 0.8;
}
body#practicePage .practicePageMessage {
  position: absolute;
  top: 0;
  right: -304px;
  background: #43b08a;
  color: #fff;
  padding: 16px 20px;
  transition: right 0.3s ease-out;
  max-width: 300px;
  pointer-events: none;
}
body#practicePage .practicePageMessage.show {
  right: 0;
}
body#practicePage .editCardPanel .askAIView .inputRow .inputContainer .recentPrompts {
  top: auto;
  bottom: 100%;
}
body#practicePage .noteFieldContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
}
body#practicePage .noteFieldContainer .noteField {
  width: 100%;
  flex-grow: 1;
}
body#practicePage .noteFieldContainer .removeNoteField {
  flex-grow: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.webReaderInstallerContainer.active {
  display: block;
}

.webReaderInstallerContainer {
  display: none;
  position: absolute;
  right: 0;
  bottom: 2px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 3px 8px;
  opacity: 0.8;
}

.webReaderLink {
  color: #fff;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: 20px;
}

.webReaderLink img {
  position: relative;
  top: 3px;
}

.webReaderLink span {
  position: relative;
  top: -1px;
}

body.notouch .webReaderInstallerContainer:hover {
  opacity: 1;
}

body.notouch .webReaderInstallerContainer .startSpanishTooltip {
  right: 0;
  width: 400px;
}

body.notouch .webReaderInstallerContainer:hover .startSpanishTooltip {
  display: block;
}

body#webReader .webReaderInstallerContainer.active {
  display: none;
}

@media (max-width: 754px) {
  .webReaderInstallerContainer.active {
    display: none;
  }
}
body#readerPage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background-color: #f0eedf;
  color: #151513;
}
body#readerPage .signedOutTopBar {
  background-color: #43b08a;
  color: #fff;
  padding: 16px;
  display: none;
  flex-direction: row;
  justify-content: space-between;
}
body#readerPage .signedOutTopBar img {
  flex-grow: 0;
  margin-right: 16px;
}
body#readerPage .signedOutTopBar a {
  color: rgba(255, 255, 255, 0.75);
}
body#readerPage .signedOutTopBar a:hover {
  color: rgb(255, 255, 255);
}
body#readerPage .signedOutTopBar .signedOutCloseButton {
  padding: 6px;
  position: relative;
  top: -10px;
  right: -10px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
}
body#readerPage .signedOutTopBar .signedOutCloseButton:hover {
  color: rgb(255, 255, 255);
}
body#readerPage .outerContainer {
  position: relative;
  flex-grow: 1;
}
body#readerPage.colorDark {
  background-color: #222;
}
body#readerPage.colorDark #entirePage {
  background-color: #222;
  color: #aaa;
}
body#readerPage.colorDark .centralDialog {
  background-color: #111;
  color: #eee;
  border-color: #555;
  box-shadow: 0 0 40px rgba(113, 209, 209, 0.1);
}
body#readerPage.colorDark a:not(:where(.button, .payButton)) {
  color: #07a;
}
body#readerPage.colorDark.notouch a:not(:where(.button, .payButton)):hover {
  color: #29c;
}
body#readerPage.colorDark a#home {
  color: #fff;
}
body#readerPage.colorDark .sideBarButton,
body#readerPage.colorDark #dropdownMenu .menuButton {
  color: #fff;
}
body#readerPage.colorDark #streak .streakView,
body#readerPage.colorDark #streak .streakView.metGoal {
  color: #fff;
}
body#readerPage.colorDark select {
  background-color: #222;
}
body#readerPage.colorDark .callout a {
  font-weight: bold;
  color: #ccfaff;
}
body#readerPage.colorDark .callout a:hover {
  color: #fff;
}
body#readerPage.colorDark .selectBox:after {
  border-color: #fff transparent;
  opacity: 0.5;
}
body#readerPage.colorDark h1,
body#readerPage.colorDark h2,
body#readerPage.colorDark h3,
body#readerPage.colorDark h4,
body#readerPage.colorDark label {
  color: #aaa;
}
body#readerPage.colorDark .pageControls .continueButton {
  color: #222;
  background-color: #fff;
}
body#readerPage.colorDark #pageText .sectionBreak .sectionBreakLine {
  background-color: #7be;
}
body#readerPage.colorDark #pageText .sectionBreak .startReviewSession {
  color: #7be;
  border: 2px solid #7be;
}
body#readerPage.colorLight {
  background-color: white;
}
body#readerPage.colorLight #entirePage {
  background-color: white;
  color: black;
}
body#readerPage.colorLight .centralDialog {
  background-color: white;
  color: black;
  border-color: #555;
  box-shadow: 0 0 40px rgba(113, 209, 209, 0.1);
}
body#readerPage.colorLight a#home {
  color: black;
}
body#readerPage.colorLight .sideBarButton,
body#readerPage.colorLight #dropdownMenu .menuButton {
  color: black;
}
body#readerPage.colorLight #streak .streakView,
body#readerPage.colorLight #streak .streakView.metGoal {
  color: black;
}
body#readerPage.colorLight h1,
body#readerPage.colorLight h2,
body#readerPage.colorLight h3,
body#readerPage.colorLight h4 {
  color: black;
}
body#readerPage.colorLight .pageControls .continueButton {
  color: white;
  background-color: #777;
}
body#readerPage.width1 .bookColumn {
  width: 50%;
  margin-left: -25%;
}
@media (max-width: 546px) {
  body#readerPage.width1 .bookColumn {
    width: 96%;
    margin-left: -48%;
  }
}
body#readerPage.width2 .bookColumn {
  width: 70%;
  margin-left: -35%;
}
@media (max-width: 546px) {
  body#readerPage.width2 .bookColumn {
    width: 96%;
    margin-left: -48%;
  }
}
body#readerPage.width3 .bookColumn {
  width: 85%;
  margin-left: -42.5%;
}
@media (max-width: 546px) {
  body#readerPage.width3 .bookColumn {
    width: 96%;
    margin-left: -48%;
  }
}
body#readerPage.width4 .bookColumn {
  width: 100%;
  margin-left: -50%;
}
@media (max-width: 546px) {
  body#readerPage.width4 .bookColumn {
    width: 96%;
    margin-left: -48%;
  }
}
body#readerPage #title a {
  -webkit-text-decoration: none;
  text-decoration: none;
}
body#readerPage.notouch #title a:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
body#readerPage.notouch #titleBar .selectBox:hover:after {
  opacity: 1;
}
body#readerPage #titleBar .selectBox select.sections:focus {
  outline: 0;
}
body#readerPage #bookContent {
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 20px;
  right: 20px;
  font-size: 20px;
  line-height: 1.4;
}
@media (max-width: 546px) {
  body#readerPage #bookContent {
    top: 30px;
  }
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#readerPage #bookContent {
    top: 35px;
  }
}
body#readerPage.scrollMode #bookContent {
  left: 0;
  right: 0;
}
body#readerPage.fontSize0 #pageText .sectionBreak .startReviewSession, body#readerPage.fontSize1 #pageText .sectionBreak .startReviewSession, body#readerPage.fontSize2 #pageText .sectionBreak .startReviewSession {
  font-size: 14px;
  width: 16px;
  height: 16px;
}
body#readerPage #bookContent h1 {
  font-size: 220%;
}
body#readerPage #bookContent h2 {
  font-size: 180%;
  margin-top: 2px;
  margin-bottom: 8px;
}
body#readerPage #bookContent h3 {
  font-size: 120%;
  margin-top: 10px;
  margin-bottom: 6px;
}
body#readerPage.fontSize0 #bookContent,
body#readerPage.fontSize0 .smartDictionaryContent,
body#readerPage.fontSize0 .yourWordPopUp {
  font-size: 10px;
}
body#readerPage.fontSize1 #bookContent,
body#readerPage.fontSize1 .smartDictionaryContent,
body#readerPage.fontSize1 .yourWordPopUp {
  font-size: 12px;
}
body#readerPage.fontSize2 #bookContent,
body#readerPage.fontSize2 .smartDictionaryContent,
body#readerPage.fontSize2 .yourWordPopUp {
  font-size: 14px;
}
body#readerPage.fontSize3 #bookContent,
body#readerPage.fontSize3 .smartDictionaryContent,
body#readerPage.fontSize3 .yourWordPopUp {
  font-size: 16px;
}
body#readerPage.fontSize4 #bookContent,
body#readerPage.fontSize4 .smartDictionaryContent,
body#readerPage.fontSize4 .yourWordPopUp {
  font-size: 18px;
}
body#readerPage.fontSize5 #bookContent,
body#readerPage.fontSize5 .smartDictionaryContent,
body#readerPage.fontSize5 .yourWordPopUp {
  font-size: 20px;
}
body#readerPage.fontSize6 #bookContent,
body#readerPage.fontSize6 .smartDictionaryContent,
body#readerPage.fontSize6 .yourWordPopUp {
  font-size: 24px;
}
body#readerPage.fontSize7 #bookContent,
body#readerPage.fontSize7 .smartDictionaryContent,
body#readerPage.fontSize7 .yourWordPopUp {
  font-size: 30px;
}
body#readerPage.fontSize8 #bookContent,
body#readerPage.fontSize8 .smartDictionaryContent,
body#readerPage.fontSize8 .yourWordPopUp {
  font-size: 36px;
}
body#readerPage.lineHeight0 #bookContent {
  line-height: 1.2;
}
body#readerPage.lineHeight1 #bookContent {
  line-height: 1.4;
}
body#readerPage.lineHeight2 #bookContent {
  line-height: 1.6;
}
body#readerPage.lineHeight3 #bookContent {
  line-height: 1.8;
}
body#readerPage.lineHeight4 #bookContent {
  line-height: 2;
}
body#readerPage #editCardDialog .playYouTube {
  display: none;
}
body#readerPage #sideBarButtonContainer .tooltip.arrowRight {
  position: absolute;
  top: 0;
  right: 42px;
  min-width: 0;
  width: 240px;
  max-width: 80vw;
  cursor: default;
}
body#readerPage #sideBarButtonContainer .tooltip.arrowRight p {
  line-height: 1.5;
  text-wrap: balance;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#readerPage #sideBarButtonContainer .tooltip.arrowRight {
    width: 220px;
  }
}
@media (max-width: 546px) {
  body#readerPage #sideBarButtonContainer .tooltip.arrowRight {
    width: 190px;
  }
}
body#readerPage #footer button#readAloudButton {
  width: 42px;
  height: 40px;
}
body#readerPage #footer button#readAloudButton .icon {
  height: 30px;
  width: 30px;
}
body#readerPage #footer button#readAloudButton .throbber {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background: #000;
  border-radius: 16px;
  padding: 5px;
}
body#readerPage button.skipBackward,
body#readerPage button.skipForward {
  display: none;
  margin: 0 12px;
}
body#readerPage.colorDark #footer button#readAloudButton.buffering {
  opacity: 1;
}
body#readerPage.colorDark #footer button#readAloudButton.buffering .throbber {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background: #000;
  border-radius: 16px;
  padding: 5px;
  mix-blend-mode: lighten;
  filter: brightness(0.5);
}
body#readerPage.width1 #libraryContainer {
  width: 259px;
}
body#readerPage #resizer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  cursor: ns-resize;
  z-index: 5;
  background-color: #dbd6c5;
  border-top: 1px solid #c9c4af;
  border-bottom: 1px solid #c9c4af;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body#readerPage.colorDark #resizer {
  background-color: #333;
  border-color: #555;
}
body#readerPage #mediaPlayer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 4px);
  width: 100%;
}
body#readerPage .clickActionToggles {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: row;
  gap: 2px;
}
body#readerPage .clickActionToggles.syncAudioControlsHidden {
  display: none;
}
body#readerPage .clickActionToggles input {
  display: none;
}
body#readerPage .clickActionToggles label {
  position: relative;
  padding: 3px 7px;
  margin: 0 1px;
  font-size: 14px;
  font-weight: bold;
  background-color: #eee;
  color: #555;
  cursor: pointer;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
body#readerPage .clickActionToggles label {
  color: #6e6450;
  background-color: #d5d0c5;
}
body#readerPage.colorDark .clickActionToggles label {
  color: #bbb;
  background-color: #555;
}
body#readerPage.notouch .clickActionToggles label:hover, body#readerPage.notouch .clickActionToggles label.selected:hover,
body#readerPage .clickActionToggles label.selected {
  color: #fff;
  background-color: #555;
}
body#readerPage.notouch .clickActionToggles label:hover, body#readerPage.colorDark .clickActionToggles label.selected {
  color: #000;
  background-color: #bbb;
}
body#readerPage #clickModeStatus {
  position: absolute;
  padding: 5px 10px;
  right: 10px;
  left: 280px;
  top: 0px;
  min-width: 100px;
  font-size: 14px;
  background-color: #ffd;
  display: none;
  border-radius: 4px;
  z-index: 1;
}
@media (max-width: 546px) {
  body#readerPage #clickModeStatus {
    left: 175px;
    top: 32px;
  }
}
body#readerPage #clickModeStatus.visible {
  display: block;
}
body#readerPage.colorDark #clickModeStatus {
  background-color: #345;
}
body#readerPage .wordRow {
  background-color: #f5f3ed;
  border: 1px solid #c9c2a9;
}
body#readerPage.colorDark .wordRow {
  background-color: #111;
  border: 1px solid #555;
}
body#readerPage.colorDark .toolbarButton {
  background-color: #111;
  border: 1px solid #555;
  color: #bbb;
}
body#readerPage.colorDark.notouch .toolbarButton:hover:not([disabled]) {
  color: #eee;
}
body#readerPage.colorLight .wordRow, body#readerPage.colorLight .toolbarButton {
  background-color: #f8f8f8;
  color: black;
  border-color: #ccc;
}
body#readerPage .toolbarButton {
  background-color: #f5f3ed;
  border: 1px solid #c9c2a9;
}
body#readerPage #footer .pageControls {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
body#readerPage #footer .pageControls .pageNumberContainer {
  position: relative;
  cursor: pointer;
}
body#readerPage #footer .pageControls #pageNumber {
  padding: 4px 20px;
}
@media (max-width: 546px) {
  body#readerPage #footer .pageControls #pageNumber {
    padding: 4px 5px;
  }
}
body#readerPage #footer .pageControls .pageControlButton {
  flex: 1 0 auto;
  padding: 4px 35px;
  position: relative;
}
body#readerPage #footer .pageControls .pageControlButton.hover {
  opacity: 1 !important;
}
@media (max-width: 546px) {
  body#readerPage #footer .pageControls .pageControlButton {
    padding: 4px 20px;
  }
}
body#readerPage #footer .pageControls .continueButton {
  display: none;
  padding: 4px 35px;
  position: absolute;
  background-color: black;
  color: white;
  padding: 10px;
  text-align: center;
}
body#readerPage #footer .pageControls .continueButton.hover {
  opacity: 1 !important;
}
body#readerPage #footer .pageControls #continueButton {
  right: 0;
}
body#readerPage #footer .pageControls #continueButtonRTL {
  left: 0;
}
body#readerPage #footer .pageControls .spacer {
  flex: 1 0 auto;
}
body#readerPage #footer .pageControls #nextPageButton {
  text-align: right;
  padding-right: 0;
}
body#readerPage #footer .pageControls #nextPageButton.lastPage {
  min-width: 115px;
}
body#readerPage #footer .pageControls #prevPageButton {
  text-align: left;
  padding-left: 0;
}
body#readerPage #footer .pageControls .pageNavigationTooltip {
  cursor: default;
  left: 50%;
  min-width: 280px;
  width: 280px;
  box-sizing: border-box;
  margin-left: -100px;
  bottom: 100%;
  top: auto;
  text-align: left;
  padding: 16px 20px;
}
body#readerPage #footer .pageControls .pageNavigationTooltip h4 {
  margin: 0 0 18px;
}
body#readerPage #footer .pageControls .pageNavigationTooltip::before {
  left: calc(50% - 51px);
}
body#readerPage #footer .pageControls .pageNavigationTooltip::after {
  left: calc(50% - 50px);
}
body#readerPage #footer .pageControls .pageNavigationTooltip .pageNavigationOptions {
  font-size: 16px;
}
body#readerPage #footer .pageControls .pageNavigationTooltip #pageNavigationStart,
body#readerPage #footer .pageControls .pageNavigationTooltip #pageNavigationFurthest,
body#readerPage #footer .pageControls .pageNavigationTooltip #pageNavigationSpecific {
  opacity: 0.7;
  cursor: pointer;
  margin: 4px 0;
}
body#readerPage #footer .pageControls .pageNavigationTooltip #pageNavigationStart:hover,
body#readerPage #footer .pageControls .pageNavigationTooltip #pageNavigationFurthest:hover,
body#readerPage #footer .pageControls .pageNavigationTooltip #pageNavigationSpecific:hover {
  opacity: 1;
}
body#readerPage #entirePage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background-color: #f0eedf;
  color: #151513;
  display: flex;
  flex-direction: column;
}
body#readerPage .bookColumn {
  position: absolute;
  top: 0;
  bottom: 0;
}
body#readerPage .titleBar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  border-radius: 0;
  background-color: #eee;
  z-index: 20;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background-color: #d5d0c5;
}
body#readerPage .titleBar:has(.popoverAnchor.open) {
  z-index: 195;
}
body#readerPage .titleBar .homeButton {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
}
body#readerPage.colorDark .titleBar {
  background-color: #555;
  color: #bbb;
}
body#readerPage.colorDark .titleBar a {
  color: #bbb;
}
body#readerPage.colorDark .titleBar select {
  background-color: #555;
  opacity: 0.5;
}
body#readerPage.colorLight .titleBar {
  background-color: #eee;
  color: black;
}
body#readerPage.colorLight .titleBar a {
  color: black;
}
body#readerPage.colorLight .titleBar select {
  background-color: transparent;
}
body#readerPage #title {
  flex: 1 1 auto;
  overflow: hidden;
  margin-left: 12px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#readerPage #title {
    right: 120px;
  }
}
@media (max-width: 546px) {
  body#readerPage #title {
    right: 95px;
  }
}
body#readerPage .titleText {
  line-height: 1.6;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#readerPage #title .selectBox {
  vertical-align: middle;
}
body#readerPage #title .selectBox .sectionName {
  display: block;
  line-height: 1.6;
  opacity: 0.7;
  padding-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#readerPage #title .selectBox:after {
  top: 50%;
  margin-top: -2px;
}
body#readerPage #title .selectBox select {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
body#readerPage #title a {
  pointer-events: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
body#readerPage #sideBarButtonContainer {
  flex: 0 0 auto;
  line-height: 1;
  position: relative;
}
body#readerPage .sideBarButton {
  display: inline-block;
  font-size: 24px;
  position: relative;
  width: 24px;
  height: 24px;
  opacity: 0.5;
  padding: 4px 8px 4px 16px;
}
body#readerPage .titleBarWidget {
  flex: 0 0 auto;
  margin: 0 0 0 14px;
}
@media (min-width: 600.02px) and (max-width: 754px) {
  body#readerPage.sideBarVisible .titleBarWidget {
    display: none;
  }
}
body#readerPage .redDot {
  display: none;
}
body#readerPage .redDotNotice .redDot {
  display: inline-block;
}
body#readerPage #streak {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
}
body#readerPage #streak .streakView {
  color: #111;
  margin-left: 0;
}
body#readerPage #streak .streakView.metGoal {
  color: #111;
}
body#readerPage #streak .streakView.metGoal .image {
  margin-right: 0;
}
body#readerPage #streak .streakView.metGoal .days {
  opacity: 0.5;
}
body#readerPage #streak .image {
  position: relative;
  margin-right: 5px;
  opacity: 0.5;
  top: 2px;
}
body#readerPage #streak .days {
  opacity: 0.3;
}
body#readerPage #streak .fireIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6.5px;
  margin-top: -10px;
  opacity: 0.35;
}
body#readerPage #streak .fireIcon.metGoal {
  opacity: 1;
  transform: scale(1.3);
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#readerPage #streak {
    zoom: 0.9;
    right: 110px;
  }
}
@media (max-width: 546px) {
  body#readerPage #streak {
    zoom: 0.75;
    font-size: 16px;
    right: 60px;
  }
}
body#readerPage #formattingOptions {
  padding: 10px 10px 0;
}
@media (max-width: 546px) {
  body#readerPage #formattingOptions {
    backdrop-filter: blur(1px);
  }
}
body#readerPage #formattingOptions p {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  margin: 10px 0;
}
body#readerPage #formattingOptions p span.clickable {
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  margin: 3px;
  text-align: center;
  line-height: 1.6;
  width: 28px;
}
body#readerPage #formattingOptions p span.fontOption {
  min-width: 120px;
}
body#readerPage #formattingOptions p.column {
  flex-direction: column;
  align-items: stretch;
}
body#readerPage #formattingOptions p.column span.clickable {
  width: auto;
}
body#readerPage #formattingOptions span.clickable {
  padding: 4px 7px;
  border-style: solid;
  border-width: 1px;
  color: #777;
  white-space: nowrap;
  border-radius: 4px;
  background-color: #dbd6c5;
  border-color: #c9c4af;
}
body#readerPage.notouch #formattingOptions span.clickable:hover {
  background-color: #fff;
  color: #000;
}
body#readerPage.colorDark #formattingOptions span.clickable {
  background-color: #333;
  border-color: #555;
}
body#readerPage.colorDark #formattingOptions span.clickable.selected, body#readerPage.colorDark.notouch #formattingOptions span.clickable:hover {
  background-color: #111;
  color: #eee;
}
body#readerPage.colorLight #formattingOptions span.clickable {
  background-color: #eee;
  border-color: #ccc;
}
body#readerPage.colorLight #formattingOptions span.clickable.selected, body#readerPage.colorLight.notouch #formattingOptions span.clickable:hover {
  background-color: white;
  color: black;
}
body#readerPage #formattingOptions span.fontOption.clickable {
  display: inline-block;
  vertical-align: middle;
}
body#readerPage #formattingOptions span.clickable.selected,
body#readerPage .notouch #formattingOptions span.clickable:hover {
  background-color: #f7f5ed;
  color: #2e2812;
}
body#readerPage #formattingOptions li span.clickable {
  display: block;
  line-height: 1.6;
  margin: 6px 0;
}
body#readerPage a#home {
  -webkit-text-decoration: none;
  text-decoration: none;
  opacity: 0.7;
  color: #111;
  padding: 0 4px;
  font-size: 16px;
  white-space: nowrap;
}
body#readerPage a#home i {
  position: relative;
  top: 1px;
}
body#readerPage #pageTextViewport {
  position: absolute;
  overflow: hidden;
  top: 28px;
  left: 0;
  right: 0;
  bottom: 69px;
  background-color: #f0eedf;
  box-shadow: 0 5px 10px #f0eedf;
  z-index: 1;
}
body#readerPage.colorDark #pageTextViewport {
  background-color: #222;
  box-shadow: 0 5px 10px #222;
}
body#readerPage.colorLight #pageTextViewport {
  background-color: white;
  box-shadow: 0 5px 10px white;
}
body#readerPage.colorDark .sideBar h2,
body#readerPage.colorDark .sideBar h3 {
  color: #eee;
}
body#readerPage.colorLight .sideBar h2,
body#readerPage.colorLight .sideBar h3 {
  color: black;
}
body#readerPage #pageTextViewport.noFooter {
  top: 0;
}
body#readerPage #pageText {
  position: absolute;
  /* to avoid clipping the translation rectangle */
  left: 3px;
  right: 3px;
  /* Hidden while a new page lays out; .textVisible fades it in (the old
     jQuery fadeIn(100) page-flip effect). */
  opacity: 0;
}
body#readerPage #pageText.textVisible {
  opacity: 1;
  transition: opacity 100ms;
}
body#readerPage #pageText.textVisible.turnedToNext, body#readerPage #pageText[dir=rtl].textVisible.turnedToPrevious {
  animation: pageFromRight 250ms ease-out;
}
body#readerPage #pageText.textVisible.turnedToPrevious, body#readerPage #pageText[dir=rtl].textVisible.turnedToNext {
  animation: pageFromLeft 250ms ease-out;
}
body#readerPage #pageText {
  /* Strike-through while the delete-on-deselect animation plays. */
}
body#readerPage #pageText span.deleting .translation {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
body#readerPage #pageText .sectionBreak {
  text-align: center;
  position: relative;
}
body#readerPage #pageText .sectionBreak .sectionBreakLine {
  display: inline-block;
  height: 2px;
  width: 100px;
  max-width: 25%;
  background-color: #43b08a;
  margin: 0 4px;
  vertical-align: middle;
}
@media (max-width: 546px) {
  body#readerPage #pageText .sectionBreak .sectionBreakLine {
    width: 70px;
  }
}
body#readerPage #pageText .sectionBreak .startReviewSession {
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 16px;
  font-family: "Jost", sans-serif;
  position: relative;
  line-height: 1.3;
  text-align: center;
  color: #43b08a;
  border: 2px solid #43b08a;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-text-decoration: none;
  text-decoration: none;
  vertical-align: middle;
}
body#readerPage.alignJustify #pageText {
  text-align: justify;
}
body#readerPage.scrollMode #pageText {
  left: 20px;
  right: 20px;
  padding-top: 50px;
}
body#readerPage #pageText img {
  display: block;
  margin: 5px auto 10px auto;
  max-width: 100%;
}
body#readerPage #pageText p:first-child {
  margin-top: 0;
}
body#readerPage #pageText h1 {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  margin: 12px 0;
}
body#readerPage #pageText h2 {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  margin: 9px 0;
}
body#readerPage #menuBar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-bottom-style: solid;
  border-width: 1px;
  border-color: #bbb;
  background-color: #eee;
  text-align: center;
  z-index: 20;
  opacity: 0.5;
}
body#readerPage #menuBar .title {
  margin-top: 12px;
}
body#readerPage #menuBar .button {
  position: relative;
  font-size: 22px;
  padding: 8px;
}
body#readerPage #menuBar .left {
  float: left;
}
body#readerPage #menuBar .right {
  float: right;
}
body#readerPage #footer {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 10px;
  white-space: nowrap;
}
body#readerPage.fontSize6 #footer, body#readerPage.fontSize7 #footer, body#readerPage.fontSize8 #footer {
  font-size: 20px;
}
body#readerPage.scrollMode #footer {
  display: none;
}
body#readerPage #footer button {
  font-size: 100%;
  border: none;
  background-color: transparent;
  cursor: pointer;
  vertical-align: middle;
  opacity: 0.25;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #000;
}
body#readerPage #footer #pageNumber {
  opacity: 0.5;
  position: relative;
}
body#readerPage.colorDark #footer button, body#readerPage.colorDark .scrollViewFooter button {
  color: #fff;
}
@media (hover: hover) {
  body#readerPage.notouch #footer button:hover, body#readerPage.notouch .scrollViewFooter button:hover {
    opacity: 1;
  }
}
body#readerPage .scrollViewFooter {
  text-align: center;
  margin: 20px auto 30px auto;
}
body#readerPage #mediaPanel {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  height: 0px;
  z-index: 2;
}
body#readerPage #dragSurface {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  cursor: ns-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
body#readerPage .container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
body#readerPage select {
  border: 1px solid #bbb;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #151513;
}
body#readerPage.colorDark select {
  color: #fff;
  border-color: #777;
}
body#readerPage #uvTab {
  display: none;
}
body#readerPage .container .vignetteOverlay {
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  pointer-events: none;
}
body#readerPage .readAloudButtonContainer {
  position: relative;
  display: none;
}
body#readerPage .playAudioTooltip {
  text-align: left;
  white-space: normal;
  left: -112px;
}
body#readerPage .playAudioTooltip::before {
  left: 114px;
}
body#readerPage .playAudioTooltip::after {
  left: 115px;
}
body#readerPage #youTubeTranscriptWithTimings {
  width: 100%;
}
@media (max-width: 370px) {
  body#readerPage #pageTextViewport {
    top: 30px;
  }
  body#readerPage .titleBar {
    height: 30px;
    font-size: 76%;
  }
  body#readerPage #mediaPanel {
    top: 30px;
  }
  body#readerPage .tabContent {
    top: 30px;
  }
  body#readerPage .sideBarButton {
    font-size: 20px;
  }
  body#readerPage .sideBarButton {
    width: 18px;
    height: 18px;
    background-size: 18px;
  }
  body#readerPage #title {
    top: 6px;
  }
  body#readerPage #uvTab {
    visibility: hidden;
  }
}
@media (min-width: 546.02px) and (max-width: 754px), (min-width: 370.02px) and (max-width: 546px) {
  body#readerPage #pageTextViewport {
    top: 35px;
  }
  body#readerPage .titleBar {
    height: 35px;
    font-size: 85%;
  }
  body#readerPage #mediaPanel {
    top: 35px;
  }
  body#readerPage .sideBarButton {
    font-size: 22px;
  }
  body#readerPage .sideBarButton {
    width: 22px;
    height: 22px;
    background-size: 22px;
  }
  body#readerPage #title {
    top: 8px;
  }
}
body#readerPage #dropdownMenu .menuPopover {
  right: -45px;
}
body#readerPage #dropdownMenu .dropdownMenuContainer {
  margin: 0;
  color: inherit;
}
body#readerPage #dropdownMenu .menuButton {
  opacity: 0.5;
}
@media (max-width: 546px) {
  body#readerPage #dropdownMenu .menuButton {
    font-size: 18px;
  }
}
body#readerPage.colorDark .dropdownMenuContainer {
  color: rgba(255, 255, 255, 0.3);
}
body#readerPage.colorDark .dropdownMenuContainer .menuButton:hover {
  color: rgba(255, 255, 255, 0.6);
}
body#readerPage.colorDark .dropdownMenuContainer.open .menuButton {
  color: rgba(255, 255, 255, 0.6);
}
body#readerPage.colorDark .pageNavigationTooltip {
  filter: invert(1);
  box-shadow: none;
}
body#readerPage .searchHighlightFlash {
  background-color: #ffeb3b;
  animation: searchHighlightFade 2s ease-out forwards;
}
@keyframes searchHighlightFade {
  0% {
    background-color: #ffeb3b;
  }
  100% {
    background-color: transparent;
  }
}
body#readerPage .findInTextModal {
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
body#readerPage .findInTextModal .findInTextScrollable {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 4px;
}
body#readerPage .findInTextModal .findInTextSearchRow {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
body#readerPage .findInTextModal .findInTextInput {
  flex: 1;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
body#readerPage .findInTextModal .findInTextSearchButton {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #43b08a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
body#readerPage .findInTextModal .findInTextSearchButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body#readerPage .findInTextModal .findInTextError {
  color: #c00;
}
body#readerPage .findInTextModal .findInTextResultCount {
  color: #777;
  font-size: 14px;
}
body#readerPage .findInTextModal .findInTextResults {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body#readerPage .findInTextModal .findInTextResult {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.15s;
}
body#readerPage .findInTextModal .findInTextResult:hover {
  background-color: #f5f5f5;
}
body#readerPage .findInTextModal .findInTextResult.expanded {
  background-color: #f9f9f0;
}
body#readerPage .findInTextModal .findInTextResult.spoilerHidden {
  cursor: default;
  opacity: 0.6;
}
body#readerPage .findInTextModal .findInTextResult.spoilerHidden:hover {
  background-color: transparent;
}
body#readerPage .findInTextModal .findInTextResultHeader {
  margin-bottom: 6px;
}
body#readerPage .findInTextModal .findInTextPosition {
  font-size: 12px;
  color: #999;
  font-weight: bold;
}
body#readerPage .findInTextModal .findInTextContext {
  font-size: 14px;
  line-height: 1.5;
}
body#readerPage .findInTextModal .findInTextHighlight {
  background-color: #fff3a8;
  font-weight: bold;
}
body#readerPage .findInTextModal .findInTextSpoiler {
  color: #999;
  font-style: italic;
}
body#readerPage .findInTextModal .findInTextDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  color: #999;
  font-size: 14px;
}
body#readerPage .findInTextModal .findInTextDivider::before, body#readerPage .findInTextModal .findInTextDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #ccc;
}
body#readerPage .findInTextModal .findInTextReadFromHere {
  display: block;
  margin-top: 10px;
  padding: 8px 16px;
  width: 100%;
  font-size: 14px;
  background-color: #43b08a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
body#readerPage .findInTextModal .findInTextReadFromHere:hover {
  opacity: 0.9;
}
body#readerPage .findInTextModal .findInTextStickyBar {
  flex: 0 0 auto;
  padding: 12px 10px 0;
  box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.15);
  text-align: center;
}
body#readerPage .findInTextModal .findInTextStickyBar button {
  padding: 8px 20px;
  font-size: 14px;
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  color: #777;
}
body#readerPage .findInTextModal .findInTextStickyBar button:hover {
  background-color: #e8e8e8;
}
@media (max-width: 546px) {
  body#readerPage .centralDialog.fullScreen .findInTextDialog {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 10px - 16px - 32px);
  }
  body#readerPage .centralDialog.fullScreen .findInTextDialog .findInTextModal {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}
body#readerPage .centralDialog.youTubeModalDialog .dialogHeading {
  font-size: 22px;
  margin-bottom: 15px;
}
body#readerPage .youTubeModal {
  overflow-y: auto;
}
body#readerPage .youTubeModal h4 {
  margin-top: 15px;
}
body#readerPage .youTubeModal ul,
body#readerPage .youTubeModal p {
  margin-top: 5px;
}
body#readerPage .youTubeModal input#srtFileUpload {
  display: none;
}
body#readerPage .audioModal {
  overflow-y: auto;
}
body#readerPage .audioModal p {
  margin-bottom: 8px;
}
body#readerPage .audioModal .audioDivider {
  border: none;
  border-top: 1px solid #d5d0c5;
  margin: 12px 0;
}
body#readerPage .audioModal button,
body#readerPage .audioModal a.button {
  margin-top: 8px;
}
body#readerPage .audioModal a.button {
  display: inline-block;
  -webkit-text-decoration: none;
  text-decoration: none;
}
@media (min-width: 850.02px) {
  body#readerPage #pageTextViewport {
    top: 44px;
    font-size: 115%;
  }
  body#readerPage .titleBar {
    height: 44px;
    font-size: 110%;
  }
  body#readerPage #mediaPanel {
    top: 44px;
  }
  body#readerPage .sideBarButton {
    font-size: 24px;
    width: 26px;
    height: 26px;
  }
  body#readerPage .menuButton {
    position: relative;
    font-size: 22px;
    top: 1px;
  }
  body#readerPage #title {
    top: 8px;
  }
  body#readerPage #footer {
    zoom: 1.15;
  }
  body#readerPage #streak {
    zoom: 1.1;
  }
}
@media (min-width: 1000px) {
  body#readerPage #pageTextViewport {
    top: 46px;
    font-size: 125%;
  }
  body#readerPage .titleBar {
    height: 46px;
    font-size: 120%;
  }
  body#readerPage #mediaPanel {
    top: 46px;
  }
  body#readerPage .sideBarButton {
    font-size: 24px;
    width: 26px;
    height: 26px;
  }
  body#readerPage .menuButton {
    position: relative;
    font-size: 22px;
    top: 1px;
  }
  body#readerPage #title {
    top: 8px;
  }
  body#readerPage #footer {
    zoom: 1.25;
  }
  body#readerPage #streak {
    zoom: 1.2;
    position: relative;
    top: 1px;
  }
}

#next {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  right: -100%;
  cursor: pointer;
}

#prev {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
  cursor: pointer;
}

#next .arrowRight {
  position: absolute;
  left: 20%;
  top: 50%;
  margin-top: -28px;
  font-size: 56px;
  vertical-align: middle;
  opacity: 0.1;
}

body #next.activated .arrowRight {
  opacity: 0.8;
}

@media (hover: hover) {
  body.notouch #next:hover .arrowRight {
    opacity: 0.8;
  }
}
#prev .arrowLeft {
  position: absolute;
  right: 20%;
  top: 50%;
  margin-top: -28px;
  font-size: 56px;
  vertical-align: middle;
  opacity: 0.1;
}

body #prev.activated .arrowLeft {
  opacity: 0.8;
}

@media (hover: hover) {
  body.notouch #prev:hover .arrowLeft {
    opacity: 0.8;
  }
}
@keyframes pageFromRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}
@keyframes pageFromLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
}
body#readerReview {
  background: #f0eedf;
}
body#readerReview #entirePage {
  background: #f0eedf;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

.readerReview {
  position: relative;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.readerReview h2 {
  margin: 20px 0;
}
.readerReview .closeButton {
  padding: 20px;
  font-size: 20px;
}
.readerReview .footer {
  padding: 20px 0;
}
.readerReview .summary {
  margin: 20px 0;
}
.readerReview .summaryText {
  color: #43b08a;
  font-size: 18px;
  line-height: 1.4;
}
.readerReview .summarySubheading {
  margin-top: 0;
  color: #999;
  position: relative;
  top: -10px;
}

body#readerReview.colorDark {
  background: #222;
  color: #aaa;
}
body#readerReview.colorDark #entirePage {
  background: #222;
}
body#readerReview.colorDark h2 {
  color: #aaa;
}
body#readerReview.colorDark .summaryText {
  color: #7be;
}

#walkthroughWidget {
  position: absolute;
  top: 100%;
  right: 10px;
  left: 10px;
  z-index: 21;
}
@media (max-width: 546px) {
  #walkthroughWidget {
    right: 2px;
    left: 2px;
  }
}

.readerWalkthroughWidget {
  background-color: #43b08a;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  margin-top: -2px;
  display: inline-block;
  opacity: 0;
  animation: fadeIn 0.5s ease-out;
  animation-delay: 1s;
  animation-fill-mode: both;
}
.readerWalkthroughWidget .playButton {
  background-color: #fff;
  width: 16px;
  height: 16px;
  font-size: 12px;
  border-radius: 8px;
  color: #43b08a;
  display: inline-block;
}
.readerWalkthroughWidget .playButton .innerIcon {
  position: relative;
  left: 1.5px;
}
@media (max-width: 546px) {
  .readerWalkthroughWidget .playButton {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }
}
@media (max-width: 546px) {
  .readerWalkthroughWidget {
    padding: 4px 10px;
    margin-top: 2px;
    font-size: 14px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.sessionHeader {
  padding: 16px;
  border-bottom: 2px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
  background-color: #f0eedf;
}
@media (min-height: 700px) and (min-width: 500px) {
  .sessionHeader {
    padding: 32px 16px;
  }
}

.sessionHeaderContent {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 650px;
  margin: 0 auto;
}

.sessionCloseButton {
  padding: 0;
  border: none;
  background: none;
  color: rgba(0, 0, 0, 0.3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.sessionCloseButton:hover {
  color: rgba(0, 0, 0, 0.6);
}

.sessionHeaderTitle {
  flex-grow: 1;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.sessionProgress {
  flex-grow: 1;
  height: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.sessionProgress .sessionProgressBar {
  height: 100%;
  border-radius: 12px;
  background: #43b08a;
}

body#settingsPage h3 {
  margin-top: 16px;
}
body#settingsPage .activeLanguagesList {
  margin: 10px 0 20px 0;
  line-height: 2.5;
}
body#settingsPage .activeLanguagesList .languageTag {
  display: inline-block;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 6px 10px 6px 12px;
  margin: 0 8px 8px 0;
  font-size: 14px;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}
body#settingsPage .activeLanguagesList .languageTag:hover {
  background-color: #e8e8e8;
  border-color: #ccc;
}
body#settingsPage .activeLanguagesList .languageTag:hover .icon {
  opacity: 1;
}
body#settingsPage .activeLanguagesList .languageTag:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
body#settingsPage .activeLanguagesList .languageTag:active {
  background-color: #e0e0e0;
}
body#settingsPage .activeLanguagesList .languageTag .icon {
  margin-left: 8px;
  color: #777;
  font-size: 14px;
  vertical-align: middle;
  transition: color 0.2s ease;
  opacity: 0.5;
}
body#settingsPage .activeLanguagesList .noActiveLanguages {
  color: #999;
  font-style: italic;
}
@media (max-width: 546px) {
  body#settingsPage .activeLanguagesList .languageTag {
    font-size: 14px;
    padding: 5px 8px 5px 10px;
    margin: 0 6px 6px 0;
  }
}
body#settingsPage .ttsVoiceSettingsPage .settingsTable td:first-child {
  color: #555;
  padding-right: 16px;
}
body#settingsPage .ttsVoiceSettingsPage .ttsSettingsVoiceName {
  margin-right: 8px;
}
body#settingsPage .ttsVoiceSettingsPage .ttsSettingsChangeVoice {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: #2f81aa;
  cursor: pointer;
}
body#settingsPage .ttsVoiceSettingsPage .ttsSettingsChangeVoice:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
body#settingsPage .ttsVoiceSettingsPage .ttsSettingsChangeVoice:disabled {
  color: #bbb;
  cursor: default;
  -webkit-text-decoration: none;
  text-decoration: none;
}
body#settingsPage .ttsVoiceSettingsPage .ttsSettingsAutoPronounce {
  display: block;
  margin-top: 10px;
}
body#settingsPage .ttsVoiceSettingsPage .ttsSettingsAutoPronounce input {
  margin-right: 4px;
  vertical-align: middle;
}
body#settingsPage .settingsTable {
  margin-bottom: 16px;
}
body#settingsPage .settingsTable td {
  vertical-align: top;
  padding: 4px 4px 4px 0;
}
body#settingsPage .settingsTable input[type=text] {
  width: 500px;
}
@media (max-width: 546px) {
  body#settingsPage .settingsTable input[type=text] {
    width: 100%;
    max-width: 300px;
  }
}

body#readerPage .sideBar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -425px;
  width: 425px;
  display: none;
  z-index: 190;
}
body#readerPage .sideBar .titleBar {
  z-index: 30;
}
body#readerPage .sideBar h3,
body#readerPage .sideBar h4 {
  opacity: 0.8;
}
body#readerPage .sideBar #dictionaryContainer {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
body#readerPage .sideBar #dictionaryContainer p {
  margin-left: 10px;
  margin-right: 10px;
}
body#readerPage .sideBar [data-tab=dictionary] #fallback {
  font-size: 80%;
  margin: 0 0 4px 145px;
}
body#readerPage .sideBar .wordTable .noPhablet {
  display: none;
}
body#readerPage .sideBar .tabHeader {
  cursor: pointer;
  display: inline-block;
  flex: 0 0 auto;
  padding: 8px;
  opacity: 0.4;
}
body#readerPage .sideBar .tabHeader i {
  font-size: 20px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#readerPage .sideBar .tabHeader {
    padding: 7px 4px;
  }
}
@media (max-width: 546px) {
  body#readerPage .sideBar .tabHeader {
    padding: 7px 4px;
  }
}
body#readerPage .sideBar .tabHeaderSpacer {
  flex: 1 1 auto;
}
body#readerPage .sideBar.bottomSheet {
  top: auto;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 200ms, height 200ms;
}
body#readerPage .sideBar.bottomSheet.open {
  transform: translateY(0);
}
body#readerPage .sideBar.bottomSheet.dragging {
  transition: none;
}
body#readerPage .sideBar.bottomSheet {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.25);
}
body#readerPage .sideBar.bottomSheet .titleBar {
  display: flex;
  align-items: center;
  height: 58px;
  padding: 16px 8px 6px 12px;
  box-sizing: border-box;
  background-color: #f0eedf;
  touch-action: none;
}
body#readerPage .sideBar.bottomSheet .tabContent {
  top: 58px;
}
body#readerPage .sideBar.bottomSheet .segmentedControl {
  display: flex;
  flex: 1 1 auto;
  padding: 2px;
  border-radius: 9px;
  background-color: rgba(118, 118, 128, 0.2);
}
body#readerPage .sideBar.bottomSheet .segmentedControl .tabHeader {
  flex: 1 1 auto;
  margin: 0;
  padding: 5px 6px;
  border-radius: 7px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.8;
  transition: background-color 150ms;
}
body#readerPage .sideBar.bottomSheet .segmentedControl .tabHeader.selected {
  opacity: 1;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
body#readerPage .sideBar.bottomSheet #dictionaryChoice {
  margin: 6px 12px;
}
body#readerPage .sideBar.bottomSheet .tabContent[data-tab=editWord],
body#readerPage .sideBar.bottomSheet .tabContent[data-tab=guide] {
  padding-left: 12px;
  padding-right: 12px;
}
body#readerPage .sideBar.bottomSheet #smartDictionaryContainer {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 12px;
  scrollbar-gutter: auto;
}
body#readerPage .sideBar.bottomSheet #formattingOptions {
  padding-left: 12px;
  padding-right: 12px;
}
body#readerPage .sideBar.bottomSheet .sheetGrabber {
  position: absolute;
  top: 0;
  left: 50%;
  width: 60px;
  height: 14px;
  margin-left: -30px;
}
body#readerPage .sideBar.bottomSheet .sheetGrabber::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 12px;
  right: 12px;
  height: 5px;
  border-radius: 3px;
  background-color: currentColor;
  opacity: 0.3;
}
body#readerPage .sideBar.bottomSheet .sheetCloseButton {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  border-radius: 50%;
  background-color: rgba(118, 118, 128, 0.2);
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  opacity: 0.6;
}
body#readerPage .sideBar.bottomSheet .tabHeaderSpacer {
  display: none;
}
body#readerPage .sideBar .tabHeader.selected,
body#readerPage .sideBar body.notouch .tabHeader:hover {
  opacity: 1;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  body#readerPage .sideBar .tabHeader:first-child {
    margin-left: 15px;
  }
}
@media (max-width: 546px) {
  body#readerPage .sideBar .tabHeader:first-child {
    margin-left: 4px;
  }
}
body#readerPage .sideBar .tabContent {
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}
@media (max-width: 546px) {
  body#readerPage .sideBar .tabContent {
    top: 30px;
  }
}
@media (min-width: 546.02px) and (max-width: 754px), (min-width: 370.02px) and (max-width: 546px) {
  body#readerPage .sideBar .tabContent {
    top: 35px;
  }
}
@media (min-width: 850.02px) {
  body#readerPage .sideBar .tabContent {
    top: 44px;
  }
}
@media (min-width: 1000px) {
  body#readerPage .sideBar .tabContent {
    top: 46px;
  }
}
body#readerPage .sideBar .tabContent[data-tab=smartDictionary] {
  overflow-y: auto;
}
body#readerPage .sideBar .tabContent[data-tab=editWord] {
  overflow-y: auto;
  padding: 0 1px;
}
body#readerPage .sideBar .tabContent[data-tab=editWord] .wordTable {
  font-size: 76.5%;
}
body#readerPage .sideBar .tabContent[data-tab=share] {
  padding: 0 8px;
}
body#readerPage .sideBar .tabContent[data-tab=guide] {
  overflow-y: auto;
  padding: 10px 12px 24px;
}
body#readerPage .sideBar .tabContent[data-tab=guide] h3 {
  margin-bottom: 2px;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideHint,
body#readerPage .sideBar .tabContent[data-tab=guide] .guideNotice,
body#readerPage .sideBar .tabContent[data-tab=guide] .guideAllowanceEstimate {
  font-size: 14px;
  opacity: 0.7;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideHint {
  margin-top: 0;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideEntry {
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: 4px;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideEntry h4 {
  margin: 0;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideEntry p {
  margin: 2px 0 6px;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideEntry .guideEntryTranslation {
  font-weight: normal;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideEntry .guideEntryType {
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  margin-left: 8px;
  opacity: 0.5;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideEntry .guideAliases {
  font-size: 14px;
  opacity: 0.6;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideEntry.selected {
  background-color: rgba(119, 187, 238, 0.25);
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideSection {
  margin-bottom: 14px;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideSection h4 {
  margin: 0 0 2px;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideSection p {
  margin: 0;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideSection .guideSectionRange {
  font-size: 12px;
  font-weight: normal;
  margin-left: 8px;
  opacity: 0.5;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideSection .guideReadingNow {
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  margin-left: 8px;
  opacity: 0.6;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideRedactedSummary {
  position: relative;
  cursor: pointer;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideRedactedSummary p {
  filter: blur(6px);
  opacity: 0.5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideRedactedSummary button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  opacity: 0.8;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideLanguagePicker {
  display: block;
  margin: 16px 0 8px;
  font-size: 14px;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideOutdated {
  margin-bottom: 16px;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideProgressBar {
  height: 8px;
  margin-top: 12px;
  border-radius: 4px;
  background-color: rgba(204, 204, 204, 0.4);
  overflow: hidden;
}
body#readerPage .sideBar .tabContent[data-tab=guide] .guideProgressBar .guideProgressBarFill {
  height: 100%;
  background-color: #419ecd;
  transition: width 1s;
}
body#readerPage .sideBar .tabContent.selected {
  display: block;
}
body#readerPage .sideBar .tabContent[data-tab=formattingOptions] {
  overflow-y: auto;
}
body#readerPage .sideBar .tabContent[data-tab=formattingOptions] h3 {
  margin-left: 3px;
}
body#readerPage .sideBar .tabContent[data-tab=formattingOptions] span {
  font-size: 14px;
}
body#readerPage .sideBar #dictionaryChoice {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  margin: 6px 6px 6px 0;
}
body#readerPage .sideBar #dictionaryChoice .translationDirectionArrowView {
  padding: 0 5px;
}
body#readerPage .sideBar #dictionaryChoice .languageSelectView {
  flex: 1 1 auto;
}
body#readerPage .sideBar #dictionaryChoice .languageSelectView select {
  width: 100%;
  height: 100%;
}
body#readerPage .sideBar #dictionaryChoice #openDictionary {
  padding: 2px 4px 3px 4px;
  white-space: nowrap;
  margin-left: 4px;
}

body#readerPage.notouch .sideBarButton:hover,
body#readerPage.notouch #home:hover {
  opacity: 1;
}

body#readerPage.colorDark.notouch .sideBarButton:hover,
body#readerPage.colorDark.notouch #home:hover {
  opacity: 0.85;
}

body#readerPage.colorDark .sideBar.bottomSheet .titleBar {
  background-color: rgb(34, 34, 34);
}
body#readerPage.colorDark .segmentedControl {
  background-color: rgba(118, 118, 128, 0.24);
}
body#readerPage.colorDark .segmentedControl .tabHeader.selected {
  background-color: #636366;
  box-shadow: none;
}
body#readerPage.colorDark .tabContent {
  background-color: rgb(34, 34, 34);
}
body#readerPage.colorDark .sideBar:not(.bottomSheet) .tabContent[data-tab=formattingOptions] {
  background-color: rgba(34, 34, 34, 0.8);
}
body#readerPage.colorDark .audioDivider {
  border-top-color: #444;
}
body#readerPage.colorDark .lowResourceNotice {
  border-left-color: #444;
  color: #aaa;
}
body#readerPage.colorDark .lowResourceNotice a {
  color: #9bc;
}

body#readerPage.colorLight .tabContent,
body#readerPage.colorLight .sideBar.bottomSheet .titleBar {
  background-color: white;
}
body#readerPage.colorLight .sideBar:not(.bottomSheet) .tabContent[data-tab=formattingOptions] {
  background-color: rgba(255, 255, 255, 0.8);
}
body#readerPage.colorLight .audioDivider {
  border-top-color: #eee;
}

body#readerPage .tabContent {
  background-color: #f0eedf;
}
body#readerPage .sideBar:not(.bottomSheet) .tabContent[data-tab=formattingOptions] {
  background-color: rgba(240, 238, 223, 0.8);
}

body#readerPage #smartDictionaryContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 10px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  zoom: 1.05;
}
@media (max-width: 370px) {
  body#readerPage #smartDictionaryContainer {
    zoom: 1;
  }
}
@media (min-width: 850.02px) {
  body#readerPage #smartDictionaryContainer {
    zoom: 1.1;
  }
}
@media (min-width: 1000px) {
  body#readerPage #smartDictionaryContainer {
    zoom: 1.15;
  }
}
body#readerPage #smartDictionaryContainer .playTTSButton {
  -webkit-text-decoration: none;
  text-decoration: none;
  margin-right: 8px;
}
body#readerPage #smartDictionaryContainer .lowResourceNotice {
  font-size: 12px;
  color: #777;
  border-left: 3px solid #ccc;
  padding: 6px 10px;
  line-height: 1.4;
  margin-top: 8px;
}
body#readerPage #smartDictionaryContainer .lowResourceNotice a {
  color: #2f81aa;
}

body#readerPage.glossStyleNew.colorDark .smartDictionaryContent,
body#readerPage.popoverStyle.colorDark .smartDictionaryContent,
body#readerPage.colorDark .smartDictionaryContent,
body#readerPage.glossStyleNew.colorDark .smartDictionaryHeader,
body#readerPage.popoverStyle.colorDark .smartDictionaryHeader,
body#readerPage.colorDark .smartDictionaryHeader {
  color: #9bc;
}

body#readerPage.glossStyleNew.colorLight .smartDictionaryContent,
body#readerPage.popoverStyle.colorLight .smartDictionaryContent,
body#readerPage.colorLight .smartDictionaryContent,
body#readerPage.glossStyleNew.colorLight .smartDictionaryHeader,
body#readerPage.popoverStyle.colorLight .smartDictionaryHeader,
body#readerPage.colorLight .smartDictionaryHeader {
  color: black;
}

body#readerPage .smartDictionaryContent {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  padding-right: 4px;
}
body#readerPage .smartDictionaryContent .smartDictionaryHeader {
  display: flex;
  margin-top: 16px;
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  align-items: start;
}
body#readerPage .smartDictionaryContent .smartDictionaryHeader .editWordButton {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 4px;
  margin-left: auto;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 0.6em;
  line-height: 1;
}
body#readerPage .smartDictionaryContent .smartDictionaryHeader .editWordButton:hover, body#readerPage .smartDictionaryContent .smartDictionaryHeader .editWordButton:focus-visible {
  background: rgba(204, 204, 204, 0.18);
}
body#readerPage .smartDictionaryContent .smartDictionaryHeader .editWordButton:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
body#readerPage .smartDictionaryContent .smartDefinition {
  white-space: pre-wrap;
}
body#readerPage .smartDictionaryContent.trialMode {
  color: #000;
  line-height: 1.3;
  overflow-y: hidden;
}
body#readerPage .smartDictionaryContent .explanation button {
  padding-top: 2px;
  padding-bottom: 2px;
}
body#readerPage .smartDictionaryContent .explanation .translationSuggestion {
  font-size: 1em;
}

body#readerPage.glossStyleNew .smartDictionaryHeader,
body#readerPage.glossStyleNew .smartDictionaryContent,
body#readerPage.popoverStyle .smartDictionaryHeader,
body#readerPage.popoverStyle .smartDictionaryContent {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
body#readerPage.glossStyleNew .smartDictionaryHeader.trialMode,
body#readerPage.glossStyleNew .smartDictionaryContent.trialMode,
body#readerPage.popoverStyle .smartDictionaryHeader.trialMode,
body#readerPage.popoverStyle .smartDictionaryContent.trialMode {
  color: #000;
}

body#readerPage .smartDictionaryTranslation {
  font-weight: 300;
  position: relative;
}
body#readerPage .smartDictionaryTranslation .removeButton {
  border: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: transparent;
  color: #2f81aa;
  font-size: 14px;
  vertical-align: middle;
  opacity: 0.3;
  margin-right: 4px;
}
body#readerPage .smartDictionaryTranslation:hover .removeButton {
  opacity: 1;
}

body#readerPage.basicLatinFirstLanguage .smartDictionaryTranslation {
  font-family: "Delius", sans-serif;
}

body#readerPage.normalTranslationFont .smartDictionaryTranslation {
  font-family: Jost, sans-serif;
}

#wordReferenceIFrame {
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  height: 500px;
  border: none;
}

.dictionaryWarning {
  position: absolute;
  background-color: #ffa;
  border: 2px solid #aa7;
  z-index: 30;
  width: 83%;
  padding: 0 30px 0 10px;
  overflow-y: auto;
  max-height: 80%;
  bottom: 10px;
}

.dictionaryWarning img {
  max-width: 90%;
}

@media (max-width: 546px) {
  #wordReferenceIFrame {
    width: 100%;
  }
}
/** The sharePrompt1 experiment's share prompt (public/src/sharePrompt.tsx) */
.sharePrompt {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.sharePrompt .sharePromptRabbit {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto;
}
.sharePrompt h2 {
  margin-top: 4px;
}
.sharePrompt p {
  text-align: left;
  line-height: 1.5;
}
.sharePrompt .sharePromptLater {
  margin-top: 10px;
  padding: 8px;
  border: none;
  background: none;
  color: #419ecd;
  font-size: 16px;
  cursor: pointer;
}

.signInPrompt {
  max-width: 400px;
  margin: 24px auto;
  text-align: left;
}
.signInPrompt h1 {
  font-size: 24px;
  line-height: 1.25;
}

/** Sign-up / sign-in form */
#signUpForm td:first-child {
  width: 80px;
}

#signUpForm input {
  margin: 3px 0;
}

#signUpForm {
  font-weight: 300;
}

#signUpForm .signupEmailForm {
  width: 100%;
  margin: 10px 0;
  z-index: 5;
}

#signUpForm .signupEmailButton {
  margin: 10px 0 0 0;
  padding: 10px;
}

#signUpForm .signupEmailLoginNotice {
  margin-bottom: 0;
  font-weight: bold;
  opacity: 0.65;
}

#signUpForm .signupForgotPasswordContainer {
  margin-top: 10px;
  opacity: 0.8;
  font-size: 80%;
  font-style: italic;
}

#signUpForm .signupErrorMessage {
  color: #800;
  text-align: center;
  font-weight: bold;
}

#signUpForm .nativeSignInButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  font-weight: 500;
}
#signUpForm .nativeSignInButton img {
  width: 18px;
  height: 18px;
}

#signUpForm .appleSignInButton {
  background-color: #000;
  color: #fff;
}

#signUpForm .nativeGoogleSignInButton {
  background-color: #fff;
  color: #1f1f1f;
  border: 1px solid #747775;
}

.sourcePickerModal {
  margin-top: 10px;
}
.sourcePickerModal .sourceFilterInput {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 8px;
  font-size: 16px;
}
.sourcePickerModal .sourceListWrap {
  max-height: 400px;
  overflow-y: auto;
  border: solid 1px #bbb;
  border-radius: 4px;
}
.sourcePickerModal table.sourceList {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.sourcePickerModal table.sourceList thead th {
  position: sticky;
  top: 0;
  background-color: rgb(230.52, 242.76, 251.94);
  color: #1d5b7a;
  font-weight: 600;
  text-align: left;
  padding: 6px 10px;
  border-bottom: solid 1px #419ecd;
  z-index: 1;
}
.sourcePickerModal table.sourceList thead th.sourceColCount {
  text-align: right;
  white-space: nowrap;
}
.sourcePickerModal table.sourceList thead th.sourceColCheck {
  width: 32px;
  padding: 6px 4px 6px 10px;
}
.sourcePickerModal table.sourceList tbody tr {
  cursor: pointer;
}
.sourcePickerModal table.sourceList tbody tr td {
  padding: 8px 10px;
  color: #333;
  vertical-align: top;
}
.sourcePickerModal table.sourceList tbody tr td.sourceColSource {
  max-width: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sourcePickerModal table.sourceList tbody tr td.sourceColCount {
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.sourcePickerModal table.sourceList tbody tr td.sourceColCheck {
  width: 32px;
  padding: 8px 4px 8px 10px;
  text-align: center;
}
.sourcePickerModal table.sourceList tbody tr td.sourceColCheck input {
  margin: 0;
  cursor: pointer;
}
.sourcePickerModal table.sourceList tbody tr.selected {
  background-color: #419ecd;
  color: #fff;
}
.sourcePickerModal table.sourceList tbody tr.selected td {
  color: #fff;
}
.sourcePickerModal table.sourceList tbody tr.noResults td {
  color: #999;
  font-style: italic;
  cursor: default;
  text-align: center;
}
.sourcePickerModal table.sourceList tbody tr.sourceGroupHeading td {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  background-color: rgb(246.84, 250.92, 253.98);
  padding: 6px 10px;
  cursor: default;
}
.sourcePickerModal table.sourceList tbody tr.sourceGroupHeading {
  cursor: default;
}
.sourcePickerModal table.sourceList tbody tr.sourceShowMore td {
  font-style: italic;
  color: #2f81aa;
  text-align: center;
}
body.notouch .sourcePickerModal table.sourceList tbody tr:not(.noResults):not(.sourceGroupHeading):not(.selected):hover {
  background-color: rgb(225.08, 240.04, 251.26);
}
body.notouch .sourcePickerModal table.sourceList tbody tr.selected:hover {
  background-color: #2f81aa;
}

.sourceEmoji {
  margin-right: 4px;
}

.sourcePickerFooter {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.sourcePickerFooter .sourcePickerConfirm {
  min-width: 100px;
}

.startHere {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
}
.startHere h2 {
  margin: 0 0 4px;
  font-size: 24px;
}
.startHere > p {
  margin: 0 0 16px;
  color: #555;
}
.startHere .startHereOwn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.startHere .startHereOwn p {
  flex-basis: 100%;
  margin: 0;
  color: #555;
}

body#startPage {
  background-color: #f0eedf;
}
body#startPage #entirePage {
  background-color: #f0eedf;
}
body#startPage .startPageDialog {
  max-width: 700px;
  margin: 40px auto;
  padding: 16px;
}
@media (max-width: 546px) {
  body#startPage .startPageDialog {
    margin-top: 8px;
  }
}
body#startPage .startPageDialog.startPageSignupDialog {
  max-width: 400px;
  position: relative;
}
body#startPage .startPageDialog h2 {
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
}
@media (max-width: 546px) {
  body#startPage .startPageDialog h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
body#startPage .startPageDialog #languageSelectorView {
  margin-top: 20px;
}
body#startPage .startPageDialog .closeButton {
  font-size: 16px;
  background: transparent;
}
body#startPage .startPageDialog .closeButton:hover {
  color: #777;
}
body#startPage .startPageDialog .languageDialogHeading {
  text-align: center;
}
@media (max-width: 546px) {
  body#startPage .startPageDialog .languageDialogHeading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    text-align: left;
  }
  body#startPage .startPageDialog .languageDialogHeading h2 {
    margin: 0;
    font-size: 24px;
    text-wrap: balance;
  }
}
body#startPage .startPageDialog .languageRabbit {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 auto 8px;
}
@media (max-width: 546px) {
  body#startPage .startPageDialog .languageRabbit {
    flex: none;
    width: 120px;
    margin: 0;
  }
}
@media (max-width: 546px) {
  body#startPage .startPageDialog ul.flags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px 8px;
    gap: 16px 8px;
    margin: 0;
    padding: 0;
  }
  body#startPage .startPageDialog ul.flags li {
    margin: 0;
  }
  body#startPage .startPageDialog ul.flags .clickable {
    width: 80px;
    margin: 0 auto;
  }
  body#startPage .startPageDialog ul.flags .clickable .language-label {
    margin: 0 -12px;
  }
}
body#startPage .startPageDialog .signupBenefits.illustrated {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
body#startPage .startPageDialog .signupBenefits.illustrated .bullets {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}
body#startPage .startPageDialog .signupBenefits.illustrated .bullets li {
  font-size: 16px;
}
body#startPage .startPageDialog .signupBenefits.illustrated .welcomeRabbit {
  flex: none;
  width: auto;
  height: 112px;
  margin-right: 10px;
}
@media (max-width: 546px) {
  body#startPage .startPageDialog .signupBenefits.illustrated .welcomeRabbit {
    height: 88px;
  }
}
@media (max-width: 370px) {
  body#startPage .startPageDialog .signupBenefits.illustrated .welcomeRabbit {
    height: 76px;
  }
}

body#appWelcomePage,
body#appUpdatePage {
  background-color: #f0eedf;
}
body#appWelcomePage #entirePage,
body#appUpdatePage #entirePage {
  background-color: #f0eedf;
}
body#appWelcomePage .appWelcome,
body#appUpdatePage .appWelcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  max-width: 400px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
}
body#appWelcomePage .appWelcome h1,
body#appUpdatePage .appWelcome h1 {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 12px;
}
body#appWelcomePage .appWelcome p,
body#appUpdatePage .appWelcome p {
  font-size: 18px;
  margin: 0 0 32px;
}
body#appWelcomePage .appWelcome .appWelcomeActions .payButton,
body#appUpdatePage .appWelcome .appWelcomeActions .payButton {
  width: 100%;
  padding: 14px;
}
body#appWelcomePage .appWelcomeRabbit,
body#appUpdatePage .appWelcomeRabbit {
  align-self: center;
  width: 220px;
  height: auto;
  margin-bottom: 16px;
  mix-blend-mode: multiply;
}
body#appWelcomePage .appWelcomeSignIn,
body#appUpdatePage .appWelcomeSignIn {
  justify-content: flex-start;
  text-align: left;
}
body#appWelcomePage .appWelcomeSignIn .appWelcomeBack,
body#appUpdatePage .appWelcomeSignIn .appWelcomeBack {
  align-self: flex-start;
  background: transparent;
  border: none;
  font-size: 16px;
  padding: 8px 0;
  margin-bottom: 16px;
}

#storyBot .pageBackLink + .storyBotContainer {
  margin-top: 0;
}
#storyBot .storyBotContainer {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-rows: min-content auto auto;
  grid-column-gap: 20px;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
@media (min-width: 546.02px) and (max-width: 754px) {
  #storyBot .storyBotContainer {
    grid-template-columns: minmax(0, 1fr) 195px;
  }
}
@media (max-width: 546px) {
  #storyBot .storyBotContainer {
    margin-top: 16px;
    grid-template-columns: minmax(0, 1fr) 120px;
    -moz-column-gap: 12px;
         column-gap: 12px;
  }
}
#storyBot .storyBotContainer > h2 {
  grid-column: 1;
  grid-row: 1;
}
@media (max-width: 546px) {
  #storyBot .storyBotContainer > h2 {
    grid-column: 1/-1;
  }
}
#storyBot .storyBotContainer .topSection {
  grid-column: 1;
  grid-row: 2;
}
#storyBot .storyBotContainer .storyBotImage {
  grid-column: 2;
  grid-row: 1/span 3;
  align-self: start;
  width: 100%;
}
@media (max-width: 754px) {
  #storyBot .storyBotContainer .storyBotImage {
    grid-row: 1/span 2;
  }
}
@media (min-width: 546.02px) and (max-width: 754px) {
  #storyBot .storyBotContainer .storyBotImage {
    margin-top: -24px;
  }
}
@media (max-width: 546px) {
  #storyBot .storyBotContainer .storyBotImage {
    grid-row: 2;
  }
}
#storyBot .storyBotContainer .storyBotForm {
  grid-column: 1;
  grid-row: 3;
  max-width: 600px;
  margin: 8px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 754px) {
  #storyBot .storyBotContainer .storyBotForm {
    grid-column: 1/-1;
    max-width: none;
  }
}
#storyBot .storyBotContainer select,
#storyBot .storyBotContainer input {
  width: 100%;
  height: 44px;
  font-size: 16px;
}
#storyBot .storyBotContainer input {
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
body.touch #storyBot .storyBotContainer input {
  font-size: 16px;
}
#storyBot .storyBotContainer input {
  font-weight: 400;
  height: 44px;
  padding: 0 12px;
  font-size: 16px;
}
#storyBot .storyBotContainer select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
#storyBot .storyBotContainer .generatingStatus {
  margin: 6px 0 0;
  text-align: center;
  color: #777;
}
#storyBot .storyBotContainer > p {
  grid-column: 1/-1;
}
#storyBot .storyBotContainer .languageSelectorContainer {
  position: relative;
}
#storyBot .storyBotContainer .languageSelectorContainer a {
  -webkit-text-decoration: none;
  text-decoration: none;
}
#storyBot .storyBotContainer .languageSelectorContainer .languageSelect {
  pointer-events: none;
}
#storyBot .storyBotContainer .languageSelectorPopup {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
}
#storyBot .storyBotContainer .languageSelectorPopup h3 {
  margin-bottom: 10px;
}
#storyBot .storyBotContainer .aiResponse {
  height: 100px;
  overflow-y: auto;
  width: 100%;
}

.streakView {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 38px;
  margin-left: 16px;
  cursor: pointer;
  position: relative;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.5);
}
.streakView .days {
  opacity: 0.3;
}
.streakView.metGoal .days {
  opacity: 1;
}
.streakView.metGoal .image {
  margin-right: 0;
}
.streakView .image {
  position: relative;
  margin-right: 5px;
}
.streakView .fireIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6.5px;
  margin-top: -10px;
  opacity: 0.5;
}
.streakView .fireIcon.metGoal {
  opacity: 1;
  transform: scale(1.3);
}

.streakDialog {
  min-width: 480px;
}
.streakDialog .streakSummary {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.streakDialog .streakSummary li {
  margin: 4px 0;
}
.streakDialog .streakTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 16px;
}
.streakDialog .streakTable th,
.streakDialog .streakTable td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
}
.streakDialog .streakTable th {
  font-weight: 600;
}
.streakDialog .streakTable .today td {
  color: #777;
}
.streakDialog .streakTable .missedDay td {
  background-color: rgb(246.619047619, 221.0952380952, 215.380952381);
  font-weight: 600;
}
.streakDialog .streakRepairAction {
  margin-top: 8px;
}
.streakDialog .streakRepaired {
  color: #43b08a;
  font-weight: 600;
}

/* The streak's popover (StreakView.tsx): today's progress, and the daily
   reminder's switch. In the app's header, reader and chat pages, and the Web
   Reader's toolbar (bookmarklet.scss). */
.popover.streakPopover {
  width: 260px;
}
.popover.streakPopover ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.popover.streakPopover ul.byLanguage {
  margin-bottom: 6px;
}
.popover.streakPopover ul.totals {
  color: #777;
}
.popover.streakPopover .callout {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
}
.popover.streakPopover .switchRow {
  margin: 12px -16px 0;
  padding: 12px 16px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  background: none;
  color: inherit;
}
.popover.streakPopover .redDotNotice {
  position: relative;
  margin: 12px -16px 0;
  padding: 12px 40px 0 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.popover.streakPopover .redDotNotice p {
  margin: 0;
  color: inherit;
}
.popover.streakPopover .redDotNotice .redDot {
  margin-right: 6px;
}
.popover.streakPopover .dismissMessageButton,
.popover.streakPopover .closePromptButton {
  position: absolute;
  right: 10px;
  padding: 6px;
  font-size: 14px;
  color: #999;
  cursor: pointer;
}
.popover.streakPopover .dismissMessageButton {
  top: 8px;
}
.popover.streakPopover.reminderPrompt .closePromptButton {
  top: 10px;
}
.popover.streakPopover.reminderPrompt h4 {
  padding-right: 24px;
}

body.notouch .streakPopover .dismissMessageButton:hover,
body.notouch .streakPopover .closePromptButton:hover {
  color: #555;
}

body.colorDark .popover.streakPopover ul.totals {
  color: rgba(255, 255, 255, 0.45);
}
body.colorDark .popover.streakPopover .switchRow,
body.colorDark .popover.streakPopover .redDotNotice {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.styleGuide {
  max-width: 820px;
  margin: 0 auto 60px;
  text-align: left;
}
.styleGuide .styleGuideLead {
  font-size: 18px;
  line-height: 1.5;
}
.styleGuide code {
  font-size: 0.9em;
}
.styleGuide .styleGuideSection {
  margin-top: 40px;
}
.styleGuide .styleGuideSection > h2 {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgb(223.7234042553, 219.5531914894, 188.2765957447);
}
.styleGuide .styleGuideSection > p {
  color: #555;
  line-height: 1.5;
}
.styleGuide .styleGuideExample {
  margin: 12px 0;
  border-radius: 12px;
  background-color: #fff;
}
.styleGuide .styleGuideExample pre {
  margin: 0;
  padding: 10px 16px;
  border-radius: 0 0 12px 12px;
  background-color: #eee;
  white-space: pre-wrap;
  font-size: 12px;
}
.styleGuide .styleGuideDemo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
}
.styleGuide > .styleGuideSection > .styleGuideDemo {
  border-radius: 12px;
  background-color: #fff;
}
.styleGuide > .styleGuideSection > .styleGuideDemo .listControls {
  flex: 1 1 auto;
}
.styleGuide .styleGuideForm {
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  max-width: 520px;
}
.styleGuide .styleGuideNote,
.styleGuide .styleGuideSmall {
  font-size: 14px;
}
.styleGuide .styleGuideSwatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.styleGuide .styleGuideSwatch {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.styleGuide .styleGuideSwatch .swatch {
  height: 48px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.styleGuide .styleGuideSwatch .swatch.green {
  background-color: #43b08a;
}
.styleGuide .styleGuideSwatch .swatch.blue-dark1 {
  background-color: #419ecd;
}
.styleGuide .styleGuideSwatch .swatch.blue-dark2 {
  background-color: #2f81aa;
}
.styleGuide .styleGuideSwatch .swatch.red {
  background-color: #d34d2f;
}
.styleGuide .styleGuideSwatch .swatch.orange {
  background-color: #f59237;
}
.styleGuide .styleGuideSwatch .swatch.paper {
  background-color: #f0eedf;
}
.styleGuide .styleGuideSwatch .swatch.white {
  background-color: #fff;
}
.styleGuide .styleGuideSwatch .swatch.grey {
  background-color: #ccc;
}
.styleGuide .styleGuideSwatch .swatch.grey-dark3 {
  background-color: #777;
}
.styleGuide .styleGuideSwatch .swatch.standard-text-color {
  background-color: #333;
}
.styleGuide .styleGuideSwatch small {
  color: #777;
}
.styleGuide .styleGuideTable {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}
.styleGuide .styleGuideTable th,
.styleGuide .styleGuideTable td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
}

/* An on/off setting, as iOS's switch */
input[type=checkbox].switch {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 51px;
  height: 31px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 16px;
  background-color: rgba(120, 120, 128, 0.16);
  transition: background-color 0.2s;
  cursor: pointer;
  vertical-align: middle;
}
input[type=checkbox].switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s;
}
input[type=checkbox].switch:checked {
  background-color: #43b08a;
}
input[type=checkbox].switch:checked::after {
  transform: translateX(20px);
}

/* A setting on a card of its own: what it does, and its switch */
.switchRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 15px 0 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background-color: #fff;
  text-align: left;
  cursor: pointer;
}

/** Shared table styles */
.table {
  font-size: 90%;
  width: 100%;
}
@media (max-width: 546px) {
  .table {
    font-size: 80%;
  }
}

.table thead {
  border-bottom: 1px solid #000;
}

.table th {
  font-weight: bold;
  padding-right: 5px;
}

.table td {
  padding-right: 5px;
}

.table.texts tbody {
  border: 1px solid #eee;
}

.table.texts td {
  padding-top: 5px;
  padding-bottom: 5px;
}

.table textarea {
  width: 100%;
}

.lined.table tr {
  border-bottom: 1px solid #eee;
}

/* Borderless table used to lay out form labels and fields */
.tableForm {
  margin: 10px 0;
}

.tableForm td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.toggle-switch {
  display: flex;
  position: relative;
  width: 284px;
  height: 40px;
  background-color: white;
  border-radius: 20px;
  border: 1px solid #ccc;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 0 4px;
}

.toggle-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 142px;
  border-radius: 20px;
  background-color: #43b08a;
  transition: transform 0.3s ease;
  z-index: 1;
}

.toggle-pill.left {
  transform: translateX(0);
}

.toggle-pill.right {
  transform: translateX(100%);
}

.toggle-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: grey;
  font-weight: bold;
  z-index: 2;
  transition: color 0.3s ease;
}

.toggle-option.selected {
  color: white;
}

.hasTooltip {
  position: relative;
}

body.notouch .hasTooltip:hover .tooltip.hoverShow {
  display: block;
}

.tooltip {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 16px;
  color: #000;
  padding: 8px 10px;
  z-index: 150;
  min-width: 230px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  font-size: 18px;
}

.tooltip h3 {
  margin: 10px 0;
}

.tooltip.arrowBottom {
  left: -22px;
  bottom: 100%;
  margin-bottom: 10px;
}

.tooltip.arrowBottom.right {
  right: -22px;
  left: auto;
}

.tooltip.arrowBottom.middle {
  left: 50%;
}

.tooltip.arrowRight {
  top: 0;
  right: 100%;
  margin-right: 10px;
}

.tooltip.arrowLeft {
  top: -16px;
  left: 100%;
  margin-left: 10px;
}

.tooltip.arrowUp {
  right: -16px;
  top: 100%;
  margin-top: 10px;
}

.tooltip.arrowUp.center {
  right: inherit;
  left: -10px;
}

.tooltip.arrowBottom:after,
.tooltip.arrowBottom:before {
  border: solid;
  top: 100%;
  content: "";
  position: absolute;
  z-index: 39;
}

.tooltip.arrowBottom:after {
  border-color: #fff transparent;
  border-width: 10px 10px 0 10px;
  left: 25px;
}

.tooltip.arrowBottom.right:after {
  right: 25px;
  left: auto;
}

.tooltip.arrowBottom:before {
  border-color: #bbb transparent;
  border-width: 11px 11px 0 11px;
  left: 24px;
}

.tooltip.arrowBottom.right:before {
  border-color: #bbb transparent;
  right: 24px;
  left: auto;
}

.tooltip.arrowRight:after,
.tooltip.arrowRight:before {
  border: solid;
  left: 100%;
  content: "";
  position: absolute;
  z-index: 39;
}

.tooltip.arrowRight:after {
  border-color: transparent #fff;
  border-width: 17px 0 17px 17px;
  top: 11px;
}

.tooltip.arrowRight:before {
  border-color: transparent #bbb;
  border-width: 18px 0 18px 18px;
  top: 10px;
}

.tooltip.arrowLeft:after,
.tooltip.arrowLeft:before {
  border: solid;
  right: 100%;
  content: "";
  position: absolute;
  z-index: 39;
}

.tooltip.arrowLeft:after {
  border-color: transparent #fff;
  border-width: 17px 17px 17px 0;
  top: 15px;
}

.tooltip.arrowLeft:before {
  border-color: transparent #bbb;
  border-width: 18px 18px 18px 0;
  top: 14px;
}

.tooltip.arrowUp:after,
.tooltip.arrowUp:before {
  border: solid;
  bottom: 100%;
  content: "";
  position: absolute;
  z-index: 39;
}

.tooltip.arrowUp:after {
  border-color: #fff transparent;
  border-width: 0 17px 17px 17px;
  right: 15px;
}

.tooltip.arrowUp:before {
  border-color: #bbb transparent;
  border-width: 0 18px 18px 18px;
  right: 14px;
}

.tooltip.arrowUp.center:after {
  right: inherit;
  left: 21px;
}

.tooltip.arrowUp.center:before {
  right: inherit;
  left: 20px;
}

.hasTooltip:hover > .tooltip {
  display: block;
}

.tooltip ul {
  margin: 4px 4px 4px 18px;
}

@media (max-width: 546px) {
  .centralDialog:has(.ttsVoicePicker, .ttsUpsell) {
    top: 0;
    left: 0;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    min-width: auto;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
    padding: 12px;
  }
}
.ttsVoicePicker {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
@media (max-width: 546px) {
  .ttsVoicePicker {
    max-height: none;
    height: 100%;
  }
}
.ttsVoicePicker .ttsPickerTitle {
  margin: 0 0 10px;
}
.ttsVoicePicker .ttsPickerLead {
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.ttsVoicePicker .ttsPickerInlinePlay {
  display: inline-block;
  vertical-align: -3px;
  color: currentColor;
  margin: 0 2px;
}
.ttsVoicePicker .ttsScrollArea {
  flex: 1;
  min-height: 0;
  max-height: 60vh;
  overflow-y: auto;
  border: 2px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
@media (max-width: 546px) {
  .ttsVoicePicker .ttsScrollArea {
    max-height: none;
  }
}
.ttsVoicePicker .ttsGroupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #555;
  letter-spacing: 0.5px;
  padding: 10px 12px 4px;
  background: #fff;
}
.ttsVoicePicker .ttsGroupHeader + .ttsVoiceList {
  border-top: 1px solid #eee;
}
.ttsVoicePicker .ttsTierPill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgb(231.9645061728, 240.5354938272, 237.5474430853);
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  text-transform: uppercase;
}
.ttsVoicePicker .ttsTierPill.ttsTierPillPlus {
  background: rgb(198.4237345679, 223.0762654321, 214.4818051308);
  color: rgb(45.9074074074, 120.5925925926, 94.5555555556);
}
.ttsVoicePicker .ttsVoiceList {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 0;
}
.ttsVoicePicker .ttsVoiceList.disabled .ttsVoiceRow {
  color: #999;
}
.ttsVoicePicker .ttsVoiceList:last-child .ttsVoiceRow:last-child {
  border-bottom: 0;
}
.ttsVoicePicker .ttsVoiceRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
.ttsVoicePicker .ttsVoiceRow.selected {
  background: rgb(231.9645061728, 240.5354938272, 237.5474430853);
}
.ttsVoicePicker .ttsVoiceRow.locked {
  cursor: not-allowed;
  background: #fafafa;
}
.ttsVoicePicker .ttsVoiceRow:hover:not(.locked) {
  background: #eee;
}
.ttsVoicePicker .ttsVoiceRowEmpty {
  padding: 10px 12px;
  font-size: 14px;
  color: #999;
}
.ttsVoicePicker .ttsVoiceName {
  font-weight: 500;
}
.ttsVoicePicker .ttsVoiceMeta {
  font-size: 12px;
  color: #999;
}
.ttsVoicePicker .ttsVoiceTag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgb(231.9645061728, 240.5354938272, 237.5474430853);
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
.ttsVoicePicker .ttsVoiceSpacer {
  flex: 1;
}
.ttsVoicePicker .ttsVoicePlay,
.ttsVoicePicker .ttsVoiceLock {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #555;
  padding: 0;
  flex: 0 0 auto;
}
.ttsVoicePicker .ttsVoicePlay {
  cursor: pointer;
}
.ttsVoicePicker .ttsVoiceLock {
  background: #f4f4f4;
}
.ttsVoicePicker .ttsVoiceLock i {
  font-size: 12px;
  line-height: 1;
  color: #999;
}
.ttsVoicePicker .continueButton {
  width: 100%;
  font-size: 16px;
}
.ttsVoicePicker .ttsUpsellRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-top: 1px solid #eee;
  background: rgb(231.9645061728, 240.5354938272, 237.5474430853);
  font-size: 14px;
  color: rgb(45.9074074074, 120.5925925926, 94.5555555556);
}
.ttsVoicePicker .ttsUpsellRow:hover {
  background: rgb(198.4237345679, 223.0762654321, 214.4818051308);
}
.ttsVoicePicker .ttsUpsellStar {
  font-size: 16px;
}
.ttsVoicePicker .ttsUpsellLabel {
  font-weight: 500;
}
.ttsVoicePicker .ttsUpsellChevron {
  font-size: 18px;
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
  line-height: 1;
}

.ttsUpsell {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  gap: 12px;
}
@media (max-width: 546px) {
  .ttsUpsell {
    max-height: none;
    height: 100%;
  }
}
.ttsUpsell .dialogHeading {
  margin: 0;
}
.ttsUpsell .ttsUpsellLead {
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.ttsUpsell .ttsUpsellVoiceList {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 2px solid #ccc;
  border-radius: 4px;
  background: #fff;
  overflow-y: auto;
  flex: 0 1 auto;
  max-height: 40vh;
}
.ttsUpsell .ttsUpsellVoiceRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.ttsUpsell .ttsUpsellVoiceRow:last-child {
  border-bottom: 0;
}
.ttsUpsell .ttsUpsellVoiceName {
  font-weight: 500;
}
.ttsUpsell .ttsUpsellVoiceMeta {
  font-size: 12px;
  color: #999;
}
.ttsUpsell .ttsUpsellVoiceTag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgb(231.9645061728, 240.5354938272, 237.5474430853);
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}
.ttsUpsell .ttsUpsellSpacer {
  flex: 1;
}
.ttsUpsell .ttsUpsellPlay {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #555;
  padding: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.ttsUpsell .ttsUpsellTiers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ttsUpsell .ttsUpsellTier {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ttsUpsell .ttsUpsellTierTitle {
  margin: 0;
  font-size: 16px;
}
.ttsUpsell .ttsUpsellTierDescription {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}
.ttsUpsell .ttsUpsellCTA {
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.ttsRateRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.ttsRateLabel {
  font-weight: 500;
  margin-right: 4px;
}

.ttsRateOption {
  padding: 6px 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.ttsRateOption.selected {
  background: rgb(231.9645061728, 240.5354938272, 237.5474430853);
  border-color: #43b08a;
}
.ttsRateOption:hover {
  background: #eee;
}

.readAloudVoiceDescription {
  display: block;
  color: #999;
  margin: 2px 0 4px 3px;
  line-height: 1.4;
}

.readAloudVoiceHeading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ttsActivityIndicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 15px;
  height: 14px;
  color: #999;
}
.ttsActivityIndicator span {
  display: block;
  width: 3px;
  height: 5px;
  border-radius: 4px;
  background: currentColor;
  animation: ttsActivityBar 680ms ease-in-out infinite;
}
.ttsActivityIndicator span:nth-child(2) {
  animation-delay: 110ms;
}
.ttsActivityIndicator span:nth-child(3) {
  animation-delay: 220ms;
}

body#readerPage.colorLight .ttsActivityIndicator {
  color: #555;
}

body#readerPage.colorDark .ttsActivityIndicator {
  color: #999;
}

@keyframes ttsActivityBar {
  0%, 100% {
    transform: scaleY(0.55);
    opacity: 0.55;
  }
  50% {
    transform: scaleY(1.8);
    opacity: 1;
  }
}
.readAloudVoiceSummary {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

#readerPage #formattingOptions p.readAloudVoiceSummary {
  flex-wrap: nowrap;
}
#readerPage #formattingOptions p.readAloudVoiceSummary span.readAloudVoiceChooseButton {
  flex: 0 0 auto;
  width: auto;
}

.readAloudVoiceSummaryName {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  margin-left: 3px;
}

.readAloudVoiceChooseButton.clickable {
  flex: 0 0 auto;
  width: auto;
}

.speakingModeControlsDisabled {
  opacity: 0.55;
}

.speakingModeControlsDisabled span.clickable.disabled {
  opacity: 1;
}

#formattingOptions span.clickable.disabled {
  cursor: default;
  opacity: 0.48;
  pointer-events: none;
}

body.notouch #formattingOptions span.clickable.disabled:hover {
  background-color: #dbd6c5;
  color: #777;
}

body.colorDark.notouch #formattingOptions span.clickable.disabled:hover {
  background-color: #333;
  color: #777;
}

body.colorLight.notouch #formattingOptions span.clickable.disabled:hover {
  background-color: #eee;
  color: #777;
}

.uploadPage .left {
  box-sizing: border-box;
  width: 57%;
  float: left;
  vertical-align: top;
}
.uploadPage textarea.plainTextInput {
  width: 100%;
}
.uploadPage .right[disabled],
.uploadPage .left[disabled] {
  opacity: 0.5;
}
.uploadPage .right {
  box-sizing: border-box;
  width: 40%;
  float: right;
  vertical-align: top;
}
.uploadPage .fileUpload {
  position: relative;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}
.uploadPage .fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
}
.uploadPage .addDocumentForm h3 small {
  opacity: 0.6;
}
.uploadPage .languageSelector,
.uploadPage .categorySelect {
  margin-left: 0;
  padding: 3px;
  border-radius: 4px;
}
.uploadPage .chooserColumnHidden {
  display: none;
}
.uploadPage .fileChosen .buttonRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.uploadPage .fileChosen .buttonRow .payButton {
  flex: 1;
  width: auto;
  margin: 0;
}
.uploadPage .srtOptionsPanel {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 15px;
  margin-top: 10px;
}
.uploadPage .srtOptionsPanel input.srtAudioFileInput {
  display: none;
}
.uploadPage .srtOptionsPanel .srtYouTubeButton {
  margin-top: 8px;
}

body#uploadPage #content {
  position: relative;
  width: 650px;
  margin: 10px auto 0 auto;
  padding: 60px 100px 40px 100px;
  font-size: 20px;
  line-height: 1.4;
  background-color: #eeeedd;
}

.userPageSection {
  margin: 35px 0;
}

body#userPage .profilePic {
  float: left;
  padding-right: 15px;
  width: 120px;
  height: 120px;
}

body#userPage .profileUrl {
  margin: -10px 0 10px;
  color: #777;
  font-size: 14px;
}

body#userPage .profileActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body#userPage .sharedTexts {
  clear: both;
  padding-top: 5px;
}

body#userPage .sharedTexts h2,
body#userPage .sharedTexts h3 {
  margin: 20px 0;
  clear: both;
}

body#userPage .profileField {
  white-space: pre-line;
}

body#userPage .profileInfo table tr {
  font-size: 95%;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

@media (max-width: 546px) {
  body#userPage .profilePic {
    width: 80px;
    height: 80px;
  }
}
/** Small single-purpose helper classes */
/* Layout */
.row {
  width: 100%;
  overflow: hidden;
}

.col1_3,
.col2_3 {
  margin-right: 3.3%;
  float: left;
  min-height: 1px;
}

.col1_3 {
  width: 30%;
}

.col2_3 {
  width: 63%;
}

.last {
  margin-right: 0;
}

.clear {
  clear: both;
}

.centerAlign {
  text-align: center;
}

.bottomRight {
  position: absolute;
  right: 3px;
  bottom: 3px;
}

/* Interaction */
.clickable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

body.notouch .hoverGlow:hover {
  box-shadow: 0 0 8px #fff;
}

/* Text */
.warning {
  color: #f32;
}

.hangingIndent {
  padding-left: 20px;
  text-indent: -20px;
}

ul.bullets {
  list-style-type: disc;
  padding: 6px;
  margin-left: 20px;
}

h2.spacing.first,
h3.spacing.first {
  margin-top: 0;
}

h2.spacing {
  margin-top: 30px;
  margin-bottom: 10px;
}

h3.spacing {
  margin-top: 15px;
  margin-bottom: 10px;
}

/* Boxes */
.box {
  background-color: #eee;
  padding: 5px 10px;
  border: 2px solid #eee;
  margin: 8px 0;
}

.screenshot {
  box-sizing: border-box;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);
  max-width: 100%;
}

/* Responsive visibility */
.mobileOnly {
  display: none;
}
@media (max-width: 546px) {
  .mobileOnly {
    display: inline;
    display: initial;
  }
}

.tabletAndMobileOnly {
  display: none;
}
@media (min-width: 546.02px) and (max-width: 754px), (max-width: 546px) {
  .tabletAndMobileOnly {
    display: inline;
    display: initial;
  }
}

@media (max-width: 546px) {
  .noMobile {
    display: none !important;
  }
  .fullWidthMobile {
    width: 100%;
  }
}
@media (min-width: 546.02px) and (max-width: 754px), (max-width: 546px) {
  .noPhablet {
    display: none;
  }
}
.callout {
  background-color: #31899e;
  color: #fff;
  padding: 15px 20px;
  margin-top: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
}
.callout label {
  color: #fff;
}

.callout a {
  font-weight: bold;
  color: #ccfaff;
}

.callout a:hover {
  color: #fff;
}

body.touch .translatableText {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.botMessage td,
#context,
.explanationText {
  touch-action: pan-y pinch-zoom;
}

.walkthroughChecklistView .callout {
  position: relative;
}
.walkthroughChecklistView .walkthroughChecklist {
  color: #fff;
  margin-top: 10px;
}
.walkthroughChecklistView h2 {
  color: #fff;
  margin-bottom: 20px;
}
.walkthroughChecklistView td {
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
}
.walkthroughChecklistView ol {
  margin: 0;
  list-style: decimal;
}
.walkthroughChecklistView li {
  color: #fff;
}
.walkthroughChecklistView .listItemContainer {
  margin: 8px 0 4px 0;
}
.walkthroughChecklistView .listItemContainer,
.walkthroughChecklistView .listItemContainer li {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
@media (max-width: 546px) {
  .walkthroughChecklistView .listItemContainer,
  .walkthroughChecklistView .listItemContainer li {
    font-size: 14px;
  }
}
.walkthroughChecklistView .youTubeLink {
  -webkit-text-decoration: none;
  text-decoration: none;
  opacity: 0.6;
}
.walkthroughChecklistView .youTubeLink:hover {
  opacity: 1;
}
.walkthroughChecklistView .checklistName {
  font-family: "Jost", sans-serif;
  font-size: 18px;
}
@media (max-width: 546px) {
  .walkthroughChecklistView .checklistName {
    font-size: 16px;
  }
}
.walkthroughChecklistView .checklistNameContainer.complete {
  opacity: 0.6;
}
.walkthroughChecklistView .icon-check-empty,
.walkthroughChecklistView .icon-check {
  color: rgb(123.692191358, 195.807808642, 170.6665842678);
  position: relative;
  top: 1px;
}
.walkthroughChecklistView .inactive {
  display: none;
}
.walkthroughChecklistView small {
  opacity: 0.8;
}
.walkthroughChecklistView .closeButton {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 12px;
  cursor: pointer;
  color: #fff;
  opacity: 0.5;
}
.walkthroughChecklistView .closeButton:hover {
  opacity: 0.8;
}

.checklistCard {
  position: relative;
  margin: 15px 0 10px;
  padding: 20px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.031372549);
}
.checklistCard .closeButton {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: transparent;
  color: #999;
}
.checklistCard .checklistHeading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.checklistCard .checklistHeading h2 {
  margin: 0;
  font-size: 24px;
}
.checklistCard .checklistHeading p {
  margin: 2px 0 8px;
  color: #555;
}
.checklistCard .checklistRabbit {
  flex: none;
  width: 60px;
  height: auto;
  mix-blend-mode: multiply;
}
.checklistCard progress {
  display: block;
  width: 180px;
  height: 8px;
  border: none;
  border-radius: 4px;
  background-color: #eee;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: hidden;
}
.checklistCard progress::-webkit-progress-bar {
  background-color: #eee;
}
.checklistCard progress::-webkit-progress-value {
  background-color: #43b08a;
}
.checklistCard progress::-moz-progress-bar {
  background-color: #43b08a;
}
.checklistCard .checklistSteps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklistCard .checklistSteps > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #eee;
}
.checklistCard .checklistSteps > li > i {
  flex: none;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.checklistCard .checklistSteps > li.complete > i {
  border-color: #43b08a;
  background-color: #43b08a;
}
.checklistCard .checklistSteps > li.complete .checklistName {
  color: #777;
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
.checklistCard .checklistName {
  font-size: 18px;
  font-weight: 500;
}
.checklistCard .checklistActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  color: #555;
}

/** Web reader / bookmarklet installer choice boxes */
.bookmarkletLink,
#bookmarkletLink {
  display: block;
  margin: 10px auto 10px auto;
  padding: 10px;
  width: 200px;
  text-align: center;
  color: #fff;
  background-color: #43b08a;
  font-weight: bold;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.choiceContainer {
  display: inline-block;
  width: 250px;
  text-align: center;
  vertical-align: top;
}

.choiceBox {
  display: block;
  position: relative;
  width: 240px;
  height: 240px;
  margin: 10px auto;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.choiceBox.clickable {
  cursor: pointer;
}

.choiceBox:hover {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  left: 1px;
  top: 1px;
}

.choiceBox img {
  width: 100%;
}

.choiceBox .overlay {
  width: 100%;
  display: none;
}

.choiceBox .permanentOverlay,
.choiceBox .overlay {
  display: block;
  width: 100%;
  position: absolute;
  top: 185px;
  color: #000;
  background-color: #ffb;
  height: 80px;
  padding: 4px;
  box-sizing: border-box;
  font-weight: normal;
}

.choiceBox .overlay.oneLine {
  padding-top: 14px;
}

.callout .choiceBox .overlay {
  background-color: #cfb;
}

.doNotShowAgain {
  font-size: 85%;
}

.choiceBox a {
  cursor: grab;
  cursor: -moz-grab;
}

/** /webReader install page */
.webReaderPage ol {
  list-style: decimal;
  margin: 0 0 16px 0;
  padding-left: 24px;
}
.webReaderPage ol li {
  margin-bottom: 6px;
}
.webReaderPage code {
  background-color: #eee;
  border-radius: 4px;
  padding: 1px 4px;
}

.webReaderExtensions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 24px 0;
}

.webReaderExtensionCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.031372549);
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #111;
}
.webReaderExtensionCard:hover .prominent {
  background-color: #2f81aa;
}
.webReaderExtensionCard img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}
.webReaderExtensionCard .prominent {
  padding: 8px 16px;
  font-weight: bold;
}

.webReaderDemo {
  margin: 24px 0;
  text-align: center;
}
.webReaderDemo img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.webReaderDemo figcaption {
  margin-top: 8px;
  color: #777;
  font-size: 14px;
}

.webReaderBookmarklet {
  text-align: center;
}
.webReaderBookmarklet .bookmarkletLink {
  cursor: grab;
}
.webReaderBookmarklet small {
  display: block;
  margin-top: 8px;
  color: #777;
}

/** Word list table (words page and reader sidebar) */
.wordTable {
  font-size: 90%;
  width: 100%;
  margin: 6px 0 12px 0;
}
.wordTable .translationColumn {
  color: #43b08a;
  font-size: 115%;
}
body.normalTranslationFont .wordTable .translationColumn {
  font-family: Jost, sans-serif;
  font-weight: 400;
}
body.colorDark .wordTable .translationColumn {
  color: #9bc;
}
.wordTable.basicLatinFirstLanguage .translationColumn {
  font-family: "Delius", sans-serif;
  font-weight: 600;
}
.wordTable .columnSelectCheckbox {
  width: 30px;
}
.wordTable .columnTTS {
  width: 30px;
}
.wordTable .columnFavorite {
  width: 30px;
}
.wordTable .columnTranslation {
  width: 100px;
}
@media (max-width: 546px) {
  .wordTable .columnTranslation {
    width: 35%;
  }
}
.wordTable .columnSource {
  width: 140px;
}
@media (min-width: 546.02px) and (max-width: 754px), (max-width: 546px) {
  .wordTable .columnSource {
    display: none;
  }
}

.wordTable .wordColumn {
  color: #999;
}

.wordTable .wordColumn strong {
  color: #000;
}

body.colorDark .wordTable .wordColumn strong {
  color: #bbb;
}

.wordRow.selected {
  background-color: #fff8b8;
}

.wordRow {
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 0;
  margin: 0;
}

body.notouch .wordRow:hover:not(.selected) {
  background-color: #f4f4f4;
}

.wordRow td {
  padding: 5px 8px;
}

.wordRow:first-child {
  border-radius-top-right: 10px;
}

.editCardPanelRow {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
}

.editCardPanelRow td {
  position: relative;
}

.wordRow .favorite:before {
  font-size: 20px;
  font-family: FontAwesome;
  content: "\f006";
  opacity: 0.5;
  vertical-align: baseline;
}

.wordRow .favorite.selected:before {
  content: "\f005";
}

.wordRow .favorite:hover:before {
  opacity: 1;
}

.checkboxCell {
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  text-align: center;
}

.selectAllContainer {
  border: 1px solid #ccc;
  border-radius: 4px;
}

.checkboxCell input[type=checkbox] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.checkboxCell input[type=checkbox] + label {
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.checkboxCell label i {
  position: relative;
  display: block;
  top: 4px;
  font-size: 18px;
  opacity: 0.5;
}

body.notouch .checkboxCell label:hover i {
  opacity: 1;
}

.checkboxCell input[type=checkbox] + label .icon-check-minus,
.checkboxCell input[type=checkbox] + label .icon-check {
  display: none;
}

.checkboxCell input[type=checkbox]:checked + label .icon-check {
  display: inline;
  left: 2px;
}

.checkboxCell input[type=checkbox]:indeterminate + label .icon-check-empty,
.checkboxCell input[type=checkbox]:indeterminate + label .icon-check,
.checkboxCell input[type=checkbox]:checked + label .icon-check-empty {
  display: none;
}

.checkboxCell input[type=checkbox]:indeterminate + label .icon-check-minus {
  display: inline;
}

.wordTable .delete {
  visibility: hidden;
  float: right;
}

.wordListEnd {
  min-height: 1px;
  text-align: center;
  color: #999;
}

.wordSheetHeader {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 32px 4px 0;
}
.wordSheetHeader h2 {
  flex: 1 1 auto;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wordIconButton {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #777;
  font-size: 18px;
}

body#wordsPage .leftColumn {
  display: inline-block;
  box-sizing: border-box;
  width: 120px;
  vertical-align: top;
  padding-right: 8px;
}
@media (min-width: 850.02px) {
  body#wordsPage .leftColumn {
    width: 170px;
  }
}
body#wordsPage .sidebarList input[type=radio] {
  display: none;
}
body#wordsPage .sidebarList label {
  box-sizing: border-box;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 1px 4px;
}
body#wordsPage .sidebarList label:hover {
  background-color: rgb(223.7234042553, 219.5531914894, 188.2765957447);
}
body#wordsPage .sidebarList input[type=radio]:checked + label {
  font-weight: bold;
}
body#wordsPage .sidebarList hr {
  border: none;
  border-bottom: 1px solid #ccc;
  width: 70%;
  height: 6px;
}
body#wordsPage .sidebarList.sources label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#wordsPage .sidebarList.sources .showAllSources a {
  display: block;
  padding: 3px 4px;
  color: #999;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-style: italic;
}
body#wordsPage .sidebarList.sources .showAllSources a:hover {
  color: #777;
}
body#wordsPage .rightColumn {
  display: inline-block;
  box-sizing: border-box;
  width: 615px;
  vertical-align: top;
}
@media (min-width: 850.02px) {
  body#wordsPage .rightColumn {
    width: 650px;
  }
}
body#wordsPage .wordsPageTopControls {
  width: 100%;
  display: flex;
  gap: 8px;
}
@media (max-width: 546px) {
  body#wordsPage .wordsPageTopControls .searchLabel {
    display: none;
  }
}
@media (max-width: 546px) {
  body#wordsPage .wordsPageTopControls #importWordsButton {
    width: 36px;
    padding: 0;
  }
}
body#wordsPage .wordsPageTopControls .addWordContainer {
  margin: 4px 0 10px;
  flex: 1 0 auto;
}
body#wordsPage #addWord {
  display: none;
}
body#wordsPage .sidebar {
  clear: both;
  font-size: 75%;
}
body#wordsPage .mainWordList {
  font-size: 85%;
}
body#wordsPage .searchLabel {
  flex: 0 0 auto;
  width: 120px;
  padding-right: 0;
}
@media (min-width: 850.02px) {
  body#wordsPage .searchLabel {
    width: 170px;
  }
}

.wordListNotification {
  background-color: #fff8b8;
  margin-top: 6px;
  padding: 4px;
  font-size: 85%;
  display: none;
  color: #000;
}

.leftColumn {
  position: relative;
  display: inline;
  float: left;
  width: 528px;
}

.rightColumn {
  display: inline;
  float: right;
  width: 207px;
}

.wordsToolbar td {
  padding-right: 5px;
}

.wordsToolbar {
  position: relative;
  font-size: 14px;
  padding-top: 6px;
}

.wordsToolbar .wordCount {
  white-space: nowrap;
  color: #999;
}

body.notouch.colorDark .wordsToolbar button[disabled] {
  opacity: 0.3;
}

.addWordButton {
  display: none;
  padding: 4px 16px;
  cursor: pointer;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 49%;
  vertical-align: top;
  white-space: normal;
}

.addWordButton h3 {
  color: #fff;
  margin: 5px 0 10px 0;
}

.addWordButton p {
  margin: 10px 0;
}

.searchStatus {
  display: none;
}

[data-subview=addToShelfDropdown] {
  margin-left: 6px;
}

@media (min-width: 546.02px) and (max-width: 754px) {
  .leftColumn {
    position: relative;
    width: 100%;
  }
  .rightColumn {
    width: 100%;
  }
  body#wordsPage .leftColumn {
    width: 100px;
  }
  body#wordsPage .searchLabel {
    width: 100px;
  }
  body#wordsPage .rightColumn {
    width: 428px;
  }
}
@media (max-width: 546px) {
  .leftColumn {
    position: relative;
    width: 100%;
  }
  .rightColumn {
    width: 100%;
  }
  body#wordsPage .leftColumn {
    display: none;
    width: 100%;
  }
  body#wordsPage .rightColumn {
    display: block;
    width: 100%;
  }
}
@media (max-width: 546px) {
  body#wordsPage .searchLabel {
    width: 40px;
  }
}
.yourWordPopUpContainer {
  display: block;
  position: absolute;
  cursor: default;
  pointer-events: none;
}

.yourWordPopUp {
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 16px;
  color: #000;
  padding: 8px 16px;
  overflow-y: auto;
  z-index: 180;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}
.yourWordPopUp .closeDialogButton {
  font-size: 24px;
  top: 0px;
}

body#readerPage.width1 .yourWordPopUp {
  left: 20%;
  right: 20%;
}

body#readerPage.width2 .yourWordPopUp {
  left: 12%;
  right: 12%;
}

body#readerPage.width3 .yourWordPopUp {
  left: 6%;
  right: 6%;
}

body#readerPage.width4 .yourWordPopUp {
  left: 0;
  right: 0;
}

body#readerPage.colorDark .yourWordPopUp {
  background-color: #111;
  color: #bbb;
  border-color: #555;
  box-shadow: 0 0 40px rgba(113, 209, 209, 0.1);
}

body#readerPage.colorDark .yourWordPopUp li {
  color: #ccc;
}

.yourWordPopUp h3 small {
  font-weight: normal;
}

.yourWordPopUp ul {
  margin-left: 20px;
  list-style: disc;
}

.yourWordPopUp li {
  margin: 5px 0;
  font-size: 1em;
  color: inherit;
}

.yourWordPopUp .buttons {
  float: right;
  margin-right: 30px;
}

.yourWordPopUp .addContext {
  width: 100%;
  text-align: left;
}

.yourWordPopUp.guideEntryPopUp h3 {
  margin: 4px 30px 2px 0;
}
.yourWordPopUp.guideEntryPopUp h3 .guideEntryTranslation {
  font-weight: normal;
}
.yourWordPopUp.guideEntryPopUp h3 .guideEntryType {
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  margin-left: 8px;
  opacity: 0.5;
}
.yourWordPopUp.guideEntryPopUp .guideAliases {
  font-size: 14px;
  opacity: 0.6;
  margin: 0;
}
.yourWordPopUp.guideEntryPopUp p {
  margin: 4px 0;
}
.yourWordPopUp.guideEntryPopUp .guideEntryPopUpButtons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 10px 0 4px;
}

.yourWordPopUp-above {
  bottom: 100%;
}

.yourWordPopUp-below {
  top: 100%;
}

.yourWordPopUpContainer .dismissArea {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1;
}

@media (max-width: 370px) {
  body:not(#readerPage):not(#practicePage) {
    --page-zoom: min(var(--text-size, 1), max(1, var(--max-zoom, 1)));
  }
}
@media (min-width: 370.02px) and (max-width: 546px) {
  body:not(#readerPage):not(#practicePage) {
    --page-zoom: min(
      calc(1.15 * var(--text-size, 1)),
      max(1.15, var(--max-zoom, 1.15))
    );
  }
}
@media (max-width: 546px) {
  body:not(#readerPage):not(#practicePage) {
    zoom: var(--page-zoom);
  }
  body:not(#readerPage):not(#practicePage) .undoZoom {
    zoom: calc(1 / var(--page-zoom));
  }
}
@media (min-width: 1200px) and (min-height: 800px) {
  body:not(#readerPage):not(#practicePage) {
    zoom: 1.1;
  }
  body:not(#readerPage):not(#practicePage) .undoZoom {
    zoom: 0.9091;
  }
}
@media (min-width: 1500px) and (min-height: 1000px) {
  body:not(#readerPage):not(#practicePage) {
    zoom: 1.2;
  }
  body:not(#readerPage):not(#practicePage) .undoZoom {
    zoom: 0.8333;
  }
}

.mainLayout,
.keptPage {
  display: contents;
}
.mainLayout[hidden],
.keptPage[hidden] {
  display: none;
}

#entirePage {
  background-color: #f0eedf;
  position: relative;
  margin: 0;
  padding: 0;
}

img.myProfilePic {
  height: 130px;
  float: right;
  margin: 1em 5px 5px 15px;
}

#exampleOutput li {
  background-color: #fff;
  border: 1px solid #eee;
  padding: 3px;
}

#exampleOutput pre {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  margin: 0;
}

/* Main layout */
.bookColumn {
  position: relative;
  left: 50%;
  width: 735px;
  margin-left: -367.5px;
}
@media (min-width: 850.02px) {
  .bookColumn {
    width: 820px;
    margin-left: -410px;
  }
}

#content {
  position: relative;
  padding: 10px 10px 30px 10px;
}

body#chatPage span[data-p],
body#chatPage span[data-group],
#bookContent span[data-p],
#bookContent span[data-group],
body#flashcardsPage span[data-p],
body#flashcardsPage span[data-group] {
  cursor: pointer;
}

#mainContent {
  position: relative;
  margin: 0 0 20px 0;
  min-height: 400px;
}

.rabbitShare p {
  font-weight: 400;
}
.rabbitShare a {
  color: #419ecd !important;
}

.readFirstHint {
  max-width: 360px;
  margin: 24px auto;
  text-align: center;
}
.readFirstHint p {
  font-size: 18px;
  margin: 0 0 20px;
}
.readFirstHint .payButton {
  display: inline-block;
  width: auto;
  padding: 12px 24px;
}

.readFirstHintRabbit {
  width: 160px;
  height: auto;
  mix-blend-mode: multiply;
}

/* Bookmarklet */
body#bookmarklet {
  position: fixed;
  color: #fff;
  background-color: #000;
  width: 100%;
  height: 100%;
}

body#bookmarklet #info {
  position: relative;
  top: 40%;
  text-align: center;
}

body#bookmarklet a {
  color: #fff;
}

body#termsOfService #mainContent ul {
  list-style-type: disc;
  margin-left: 20px;
}

@media (min-width: 546.02px) and (max-width: 754px) {
  .bookColumn {
    width: 528px;
    margin-left: -264px;
  }
  #mainContent {
    font-size: 92%;
  }
}
@media (max-width: 546px) {
  img.myProfilePic {
    height: 100px;
  }
  .bookColumn {
    width: 316px;
    margin-left: -158px;
  }
  #mainContent {
    font-size: 85%;
    min-height: 300px;
  }
}
body.showHeader #mainContent {
  display: flow-root;
  padding-top: 18px;
}
body.showHeader#libraryPage #mainContent, body.showHeader#discoverPage #mainContent, body.showHeader#wordsPage #mainContent {
  padding-top: 10px;
}
body.showHeader #mainContent > :nth-child(1 of :not([hidden]):not(.keptPage)),
body.showHeader #mainContent > :nth-child(1 of :not([hidden]):not(.keptPage)) > :first-child,
body.showHeader #mainContent > :nth-child(1 of :not([hidden]):not(.keptPage)) > :first-child > :first-child,
body.showHeader #mainContent > .keptPage:not([hidden]) > :first-child,
body.showHeader #mainContent > .keptPage:not([hidden]) > :first-child > :first-child,
body.showHeader #mainContent > .keptPage:not([hidden]) > :first-child > :first-child > :first-child {
  margin-top: 0 !important;
}
@media (max-width: 754px) {
  body.showHeader .bookColumn {
    left: auto;
    width: auto;
    max-width: 564px;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
  }
}