@charset "UTF-8";
/* Colors */
/**
 * From highlights.scss
 * Consider consolidating these with the other colors above
 */
/** End from highlights.scss */
/**
 * Media Queries
 */
/* 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;
}
body#accountPage #mainContent .table th {
  padding-right: 30px;
}
body#accountPage #mainContent .table td {
  padding: 4px;
}
body#accountPage #mainContent .table td button,
body#accountPage #mainContent .table td select {
  width: 100%;
}

.accountPanel2 .planContainer2 {
  display: flex;
  flex-direction: row;
  gap: 28px;
}
@media (min-width: 547px) 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: 547px) 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: 6px;
  padding: 10px;
}
.accountPanel2 .plan2 .goToCheckout:hover {
  background-color: #358b6d;
}
.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: 547px) 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");
}

.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;
}

[id^=admin] h1 {
  margin: 20px 0;
}

.askAIView {
  min-height: 150px;
}
.askAIView .inputRow {
  display: flex;
  flex-direction: row;
  margin-top: 5px;
}
.askAIView .inputContainer {
  position: relative;
  flex-grow: 1;
}
.askAIView .inputContainer .recentPrompts {
  z-index: 1;
  position: absolute;
  bottom: 100%;
  background-color: #fff;
  padding: 0 8px;
  border: 1px solid #e0dcbc;
  border-radius: 5px;
}
.askAIView .inputContainer .recentPrompts li {
  cursor: pointer;
  display: flex;
  flex-direction: row;
}
.askAIView .inputContainer .recentPrompts li .prompt {
  display: inline-block;
  flex-grow: 1;
  padding: 4px;
}
.askAIView .inputContainer .recentPrompts li .prompt:hover {
  background-color: #e0dcbc;
}
.askAIView .inputContainer .recentPrompts li:hover .pinButton {
  opacity: 1;
  color: #f0eedf;
}
.askAIView .inputContainer .recentPrompts li:hover .pinButton:hover {
  color: #cfc99a;
}
.askAIView .inputContainer .recentPrompts li:hover .pinButton.pinned {
  color: #111;
}
.askAIView .inputContainer .recentPrompts li .pinButton {
  padding: 4px 8px;
  opacity: 0;
  margin-right: 2px;
}
.askAIView .inputContainer .recentPrompts li .pinButton.pinned {
  opacity: 1;
  color: #111;
}
.askAIView .inputContainer .recentPrompts h3 {
  margin-top: 10px;
}
.askAIView button {
  margin-left: 4px;
}
.askAIView .aiResponse {
  color: #3c9e7c;
  white-space: pre-wrap;
}

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

body.colorDark .askAIView .recentPrompts {
  background-color: #222;
  color: #aaa;
  border-color: #444;
}
body.colorDark .askAIView .recentPrompts li {
  color: #aaa;
}
body.colorDark .askAIView .recentPrompts li .prompt:hover {
  background-color: #444;
}
body.colorDark .askAIView .recentPrompts li:hover .pinButton {
  opacity: 1;
  color: #444;
}
body.colorDark .askAIView .recentPrompts li:hover .pinButton:hover {
  color: #aaa;
}
body.colorDark .askAIView .recentPrompts li:hover .pinButton.pinned {
  color: #aaa;
}
body.colorDark .askAIView .recentPrompts li .pinButton.pinned {
  opacity: 1;
  color: #aaa;
}
body.colorDark .askAIView .aiResponse {
  color: #9bc;
}

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

/** Override browser defaults and apply base Readlang style */
body,
html {
  color: #333;
  margin: 0;
  font-family: "Jost", sans-serif;
}

body {
  background-color: #323847;
}

h1,
h2,
h3,
h4 {
  font-family: "Jost";
  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 {
  background-color: #fff;
  max-width: 100%;
}

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

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

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;
}

.libraryDocumentContainer {
  position: relative;
}
.libraryDocumentContainer .libraryDocument {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  color: #111;
  background-color: #43b08a;
  overflow: hidden;
  margin-bottom: 15px;
  border-radius: 10px;
  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;
}
.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;
}
@media (min-width: 547px) 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: 547px) and (max-width: 754px), (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument .categoryContainer .category.compactMode {
    font-size: 16px;
  }
}
.libraryDocumentContainer .libraryDocument .categoryColor {
  background-color: #43b08a;
}
.libraryDocumentContainer .libraryDocument .mainInfoRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.libraryDocumentContainer .libraryDocument.category-Fiction {
  background-color: #f2c430;
}
.libraryDocumentContainer .libraryDocument.category-Fiction .categoryContainer {
  background-image: url("/content/backgroundFiction.svg");
}
.libraryDocumentContainer .libraryDocument.category-Fiction .categoryContainer .category {
  color: #5d4803;
}
.libraryDocumentContainer .libraryDocument.category-Fiction:hover {
  box-shadow: 0 0 0 4px #f2c430;
}
.libraryDocumentContainer .libraryDocument.category-Fiction .categoryColor {
  background-color: #f2c430;
}
.libraryDocumentContainer .libraryDocument.category-Non-Fiction {
  background-color: #3c4da5;
}
.libraryDocumentContainer .libraryDocument.category-Non-Fiction .categoryContainer {
  background-image: url("/content/backgroundNonFiction.svg");
}
.libraryDocumentContainer .libraryDocument.category-Non-Fiction:hover {
  box-shadow: 0 0 0 4px #3c4da5;
}
.libraryDocumentContainer .libraryDocument.category-Non-Fiction .categoryColor {
  background-color: #3c4da5;
}
.libraryDocumentContainer .libraryDocument.category-Song {
  background-color: #911542;
}
.libraryDocumentContainer .libraryDocument.category-Song .categoryContainer {
  background-image: url("/content/backgroundSong.svg");
}
.libraryDocumentContainer .libraryDocument.category-Song:hover {
  box-shadow: 0 0 0 4px #911542;
}
.libraryDocumentContainer .libraryDocument.category-Song .categoryColor {
  background-color: #911542;
}
.libraryDocumentContainer .libraryDocument.category-Dialogue {
  background-color: #f59237;
}
.libraryDocumentContainer .libraryDocument.category-Dialogue .categoryContainer {
  background-image: url("/content/backgroundDialogue.svg");
}
.libraryDocumentContainer .libraryDocument.category-Dialogue:hover {
  box-shadow: 0 0 0 4px #f59237;
}
.libraryDocumentContainer .libraryDocument.category-Dialogue .categoryColor {
  background-color: #f59237;
}
.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;
  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: 547px) and (max-width: 754px) {
  .libraryDocumentContainer .libraryDocument h4 {
    font-size: 18px;
  }
}
@media (max-width: 546px) {
  .libraryDocumentContainer .libraryDocument h4 {
    font-size: 17px;
  }
}
.libraryDocumentContainer .libraryDocument h4.compactMode {
  font-size: 17px;
}
.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: 547px) 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: 547px) 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: 547px) 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: 13px;
}
.libraryDocumentContainer .voteControl .upVote {
  cursor: pointer;
  font-size: 21px;
}
.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;
}

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: 13px;
  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: #ab3d24;
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
body#chatPage .changed,
body#chatListPage .changed {
  color: #3c9e7c;
  font-weight: bold;
  position: relative;
}
body#chatPage .endOfChat .changed,
body#chatListPage .endOfChat .changed {
  background-color: #3c9e7c;
  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: 13px;
  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;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 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;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 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 #e0dcbc;
}
@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 .chatHistory .deleteButton,
body#chatListPage .chatHistory .deleteButton {
  cursor: pointer;
  color: #111;
  opacity: 0.3;
  margin-left: 10px;
}
body#chatPage .chatHistory .deleteButton:hover,
body#chatListPage .chatHistory .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 .header,
body#chatListPage .header {
  max-width: 600px;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  border-bottom: 2px solid #e0dcbc;
  background-color: #f0eedf;
  align-items: center;
  padding: 8px 0;
}
body#chatPage .header .headerTitle,
body#chatListPage .header .headerTitle {
  flex-grow: 1;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 6px 0;
}
body#chatPage .header .chatCloseButton,
body#chatListPage .header .chatCloseButton {
  opacity: 0.5;
  padding: 6px 8px 6px 12px;
  margin-right: 12px;
  cursor: pointer;
}
body#chatPage .header .chatCloseButton:hover,
body#chatListPage .header .chatCloseButton:hover {
  opacity: 1;
}
body#chatPage .correctionMenu,
body#chatListPage .correctionMenu {
  z-index: 1;
  position: absolute;
  bottom: 100%;
  background: #fff;
  padding: 4px 8px;
  border: 2px solid #e0dcbc;
  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 #e0dcbc;
}
body#chatPage .correctionMenu .alternativeTranslation,
body#chatListPage .correctionMenu .alternativeTranslation {
  font-family: "Coming Soon", sans-serif;
  color: #3c9e7c;
  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 #e0dcbc;
  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: 13px;
  }
}
body#chatPage .vocabSelector .translation,
body#chatListPage .vocabSelector .translation {
  font-family: "Coming Soon", sans-serif;
  color: #3c9e7c;
  padding-left: 16px;
}
body#chatPage .vocabSelector button:disabled,
body#chatListPage .vocabSelector button:disabled {
  background-color: #eee;
  color: #bbb;
  cursor: not-allowed;
}
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 #e0dcbc;
  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 .demoScreenshot,
body#chatListPage .demoScreenshot {
  padding: 16px;
  margin: 16px 16px 16px 0;
  background-color: #fff;
  width: 60%;
  border-radius: 12px;
}

body#chatPage .streakTooltip {
  position: fixed;
  top: 55px;
  left: calc(50% + 300px - 220px);
}
@media (max-width: 600px) {
  body#chatPage .streakTooltip {
    left: auto;
    right: 10px;
  }
}

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: 11px;
}
@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: 547px) 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: 19px;
}
@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: 547px) 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: 547px) 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: 547px) 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: 547px) and (max-width: 754px) {
  body#checkout2Page .planContainer2 .plan2 .price small {
    font-size: 13px;
  }
}
@media (min-width: 547px) 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: 547px) 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: #3c9e7c;
}
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: 547px) 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: 6px;
  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: 547px) 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: 6px;
}
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: 547px) 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: 19px;
}
body#checkoutPage #justVerifiedEmail {
  color: #fff;
  margin: 20px auto;
  font-size: 19px;
}

.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 #e0dcbc;
}

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: 6px;
  border-top-right-radius: 6px;
}

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#dashboardPage .forumCallout {
  text-align: center;
}
body#dashboardPage .dashboardRow {
  display: flex;
  display: -webkit-flex;
  gap: 16px;
  flex-direction: row;
  justify-content: space-around;
  margin: 22px 0;
  align-items: stretch;
  -webkit-align-items: stretch;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
@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 .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: 10px;
  text-align: left;
}
body#dashboardPage .dashboardPanel.continueReading p,
body#dashboardPage .dashboardPanel.practiceFlashcards p {
  text-align: left;
}
body#dashboardPage .practiceFlashcards {
  display: flex;
  flex-direction: column;
}
body#dashboardPage .practiceFlashcards .startChatButton,
body#dashboardPage .practiceFlashcards .startFlashcardsButton {
  margin-top: 15px;
  background-color: #419ecd;
  color: #fff;
  padding: 14px 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  -webkit-text-decoration: none;
  text-decoration: none;
}
@media (min-width: 547px) and (max-width: 754px) {
  body#dashboardPage .practiceFlashcards .startChatButton,
  body#dashboardPage .practiceFlashcards .startFlashcardsButton {
    padding: 20px;
    font-size: 18px;
  }
}
body#dashboardPage .practiceFlashcards .startChatButton:hover,
body#dashboardPage .practiceFlashcards .startFlashcardsButton:hover {
  background-color: #7be;
  box-shadow: 0 0 0 4px #419ecd;
}
body#dashboardPage .practiceFlashcards .startChatButton img,
body#dashboardPage .practiceFlashcards .startFlashcardsButton img {
  width: 70px;
  display: block;
}
@media (min-width: 547px) and (max-width: 754px), (max-width: 546px) {
  body#dashboardPage .practiceFlashcards .startChatButton img,
  body#dashboardPage .practiceFlashcards .startFlashcardsButton img {
    width: 50px;
  }
}
body#dashboardPage .practiceFlashcards .startChatButton .buttonTitle,
body#dashboardPage .practiceFlashcards .startFlashcardsButton .buttonTitle {
  min-width: 165px;
}
@media (min-width: 547px) and (max-width: 754px) {
  body#dashboardPage .practiceFlashcards .startChatButton .buttonTitle,
  body#dashboardPage .practiceFlashcards .startFlashcardsButton .buttonTitle {
    min-width: 140px;
  }
}
body#dashboardPage .practiceFlashcards .startChatButton small {
  opacity: 0.5;
}
body#dashboardPage .practiceFlashcards .startChatButton img {
  width: 55px;
  margin-left: 15px;
}
@media (min-width: 547px) and (max-width: 754px), (max-width: 546px) {
  body#dashboardPage .practiceFlashcards .startChatButton img {
    margin-left: 10px;
    margin-right: 10px;
    width: 40px;
  }
}
body#dashboardPage .dashboardPanel {
  padding: 22px 0;
  position: relative;
}
body#dashboardPage .dashboardPanel p,
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: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 546px) {
  body#dashboardPage .dashboardPanel .progressChartView {
    padding: 10px;
    border-radius: 7px;
  }
}
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 #ddd;
  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: 10px;
}
body#dashboardPage .dashboardPanel .streakPanel {
  border-radius: 6px;
  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: 13px;
  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 {
  width: 25px;
  margin: 0 auto;
}
@media (max-width: 546px) {
  body#dashboardPage .dashboardPanel .streakPanel .emptyBar,
  body#dashboardPage .dashboardPanel .streakPanel .wordsReadBar,
  body#dashboardPage .dashboardPanel .streakPanel .wordsPracticedBar {
    width: 20px;
  }
}
body#dashboardPage .dashboardPanel .streakPanel .wordsReadBar,
body#dashboardPage .dashboardPanel .streakPanel .wordsPracticedBar {
  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: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 .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;
}

.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.open .menuButton {
  color: rgba(0, 0, 0, 0.6);
}
.dropdownMenuContainer .dropdownMenu {
  position: absolute;
  right: 0;
  top: 100%;
  background-color: #fff;
  padding: 3px;
  min-width: 90px;
  border: 2px solid #e0dcbc;
  text-align: left;
  z-index: 999;
}
.dropdownMenuContainer .dropdownMenu li {
  white-space: nowrap;
}
.dropdownMenuContainer .dropdownMenu li .iconContainer {
  display: inline-block;
  width: 20px;
}
.dropdownMenuContainer .dropdownMenu li.actionOrToggle {
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
}
.dropdownMenuContainer .dropdownMenu li.actionOrToggle:hover {
  background-color: #f0eedf;
}
.dropdownMenuContainer .dropdownMenu li.actionOrToggle.disabled {
  color: rgba(0, 0, 0, 0.3);
  cursor: auto;
}
.dropdownMenuContainer .dropdownMenu li.separator {
  display: flex;
}
.dropdownMenuContainer .dropdownMenu li.separator .dividerLine {
  display: inline-block;
  margin: 8px 8px;
  border-bottom: 1px solid #e0dcbc;
  flex-grow: 1;
}

.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: 11px;
}
.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: 11px;
}
.editCardPanel .linkButton.removeContext {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.editCardPanel .contextContainer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.editCardPanel .contextContainer .contextContainerInner {
  flex-grow: 1;
  position: relative;
}
.editCardPanel .contextContainer .contextLinkContainer {
  position: absolute;
  right: 0;
  top: calc(100% - 5px);
  padding: 12px;
  background-color: #f0eedf;
  border: 2px solid #e0dcbc;
  display: none;
  border-radius: 6px;
  z-index: 1;
}
.editCardPanel .contextContainer .contextLinkContainer h3 {
  margin-top: 0 !important;
  margin-bottom: 8px;
}
.editCardPanel .contextContainer:hover .contextLinkContainer {
  display: block;
}

body#readerPage.colorDark .contextContainer .contextLinkContainer {
  background-color: #000;
  border: 2px solid #555;
}

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

body#readerPage.glossStyleNew .editCardPanel .editCardTable .explanation {
  color: #3c9e7c;
}

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;
}

.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.9);
  }
  100% {
    transform: scale(1.5);
  }
}
body#readerPage #endOfText {
  text-align: left;
}
body#readerPage #endOfText .endOfTextHeader {
  margin-top: 0;
}
body#readerPage #endOfText .pageEndButtons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 500px;
}
body#readerPage #endOfText .pageEndButtons button {
  flex: 1 0 auto;
  padding: 20px;
  font-size: inherit;
  background-color: #eee;
  color: #777;
}
@media (max-width: 546px) {
  body#readerPage #endOfText .pageEndButtons button {
    padding: 10px;
  }
}
body#readerPage #endOfText .pageEndButtons button span {
  display: inline-block;
}
body#readerPage #endOfText .pageEndButtons button.selected {
  background-color: #fff;
  color: #000;
}
body#readerPage #endOfText .pageEndButtons button.selected span {
  animation: endOfTextPop 0.2s;
  transform: scale(1.5);
}
body#readerPage #endOfText .pageEndButtons .nextText {
  display: none;
}
body#readerPage #endOfText #upVote {
  margin-right: 3px;
}
body#readerPage #endOfText #downVote {
  margin-left: 3px;
}

body#readerPage #endOfText button {
  background-color: #dbd6c5;
  border-color: #c9c4af;
}
body#readerPage #endOfText button:hover, body#readerPage #endOfText button.selected {
  background-color: #f7f5ed;
  color: #2e2812;
}

body#readerPage.colorDark #endOfText button {
  background-color: #333;
  border-color: #444;
}
body#readerPage.colorDark #endOfText button:hover, body#readerPage.colorDark #endOfText button.selected {
  background-color: #111;
  color: #ddd;
}

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;
}
body#flashcardsPage .bookColumn {
  position: relative;
}
body#flashcardsPage #mainContent {
  position: relative;
  padding: 10px;
  text-align: center;
}
body#flashcardsPage #mainContent h3 {
  margin-top: 10px;
  margin-bottom: 7px;
}
body#flashcardsPage #mainContent h4#cardCount {
  color: #5e5b48;
  margin-left: 4px;
  margin-right: 4px;
}
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: #ab3d24;
}
body#flashcardsPage button.recall.prominent[data-score="2"] {
  background-color: #db7a21;
}
body#flashcardsPage button.recall.prominent[data-score="2"]:hover {
  background-color: #af611a;
}
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: #3c9e7c;
}
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 #ab3d24;
}
body#flashcardsPage #nextCardButton {
  margin: 12px 0 20px 0;
}
body#flashcardsPage #buttons h2 {
  margin: 10px;
  font-weight: 600;
}
body#flashcardsPage .flashcardTopBar {
  position: relative;
}
body#flashcardsPage #toggleSpeakingModeButton {
  display: block;
  font-size: 17px;
  opacity: 0.5;
  flex: 1 0 auto;
  position: absolute;
  top: -3px;
  right: 38px;
  cursor: pointer;
}
body#flashcardsPage #toggleSpeakingModeButton i {
  vertical-align: middle;
}
body#flashcardsPage .flashcardsContainer {
  background-color: #f0eedf;
}
@media (max-width: 546px) {
  body#flashcardsPage .flashcardsContainer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 6px;
    z-index: 1;
    overflow-y: auto;
  }
}
body#flashcardsPage #contextContainer {
  position: relative;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 4px 5px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 5px;
}
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 #exitTest {
  position: absolute;
  right: 0;
  top: -5px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: #888;
}
body#flashcardsPage #exitTest:hover {
  color: #000;
}
body#flashcardsPage #delete {
  margin-top: 25px;
}
body#flashcardsPage button.recall {
  font-size: 100%;
  padding: 5px 6px;
}
body#flashcardsPage .transliteration {
  font-size: 60%;
  margin-bottom: 16px;
}
body#flashcardsPage #showNote {
  margin: 0 16px;
}
.heatmapProgressView {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  max-width: 100%;
}
.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: 10px;
  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: 2px;
  border: 1px solid #ddd;
  margin: 1px;
  background: #ebedf0;
  width: 9px;
  height: 9px;
  position: relative;
}
@media (max-width: 546px) {
  .heatmapProgressView .heatmapDay {
    width: 6px;
    height: 6px;
  }
}
@media (min-width: 547px) and (max-width: 754px) {
  .heatmapProgressView .heatmapDay {
    width: 5px;
    height: 6px;
  }
}
@media (min-width: 850px) {
  .heatmapProgressView .heatmapDay {
    width: 11px;
    height: 11px;
  }
}
.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: #888;
}
.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 .heatmapViewControls .languageSelector label {
  font-size: 14px;
  color: #333;
}
.heatmapProgressView .heatmapViewControls .languageSelector select {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}
.heatmapProgressView .heatmapViewControls .languageSelector select:hover {
  border-color: #2f81aa;
}
.heatmapProgressView .heatmapViewControls .languageSelector select:focus {
  outline: none;
  border-color: #2f81aa;
}
@media (max-width: 546px) {
  .heatmapProgressView .heatmapViewControls .languageSelector select {
    padding: 4px 8px;
    font-size: 12px;
  }
}
.heatmapProgressView .heatmapViewControls .viewModeToggle {
  display: inline-flex;
  gap: 8px;
}
.heatmapProgressView .heatmapViewControls .viewModeToggle .toggleButton {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.heatmapProgressView .heatmapViewControls .viewModeToggle .toggleButton:hover {
  background: #f4f4f4;
}
.heatmapProgressView .heatmapViewControls .viewModeToggle .toggleButton.active {
  background: #2f81aa;
  color: #fff;
  border-color: #2f81aa;
}
.heatmapProgressView .heatmapViewControls .viewModeToggle .toggleButton.active:hover {
  background: #1d5b7a;
  border-color: #1d5b7a;
}
@media (max-width: 546px) {
  .heatmapProgressView .heatmapViewControls .viewModeToggle .toggleButton {
    padding: 6px 12px;
    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 #ddd;
  border-radius: 2px;
  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(0, 127, 0, 0.4);
  box-shadow: 0 -4px 0 rgba(0, 127, 0, 0.4) inset;
}

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

body[data-clickMode=translate].notouch span[data-p]:hover,
body[data-clickMode=translate] span[data-p].selecting,
span.translating,
body.notouch[data-clickMode=translate] span[data-p]:hover,
body span[data-p].selecting {
  outline: 2px solid rgba(0, 127, 0, 0.4);
}

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

span.translated {
  position: relative;
  background-color: rgba(0, 127, 0, 0.1);
}

body.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
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(0, 127, 0, 0.4);
}

body.glossStyle[data-clickMode=translate].notouch span[data-p]:hover,
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] span[data-p].selecting,
body.glossStyle.colorSepia span.translating {
  outline: none;
  border-bottom: 1px solid rgba(0, 127, 0, 0.4);
  box-shadow: 0 -4px 0 rgba(0, 127, 0, 0.4) inset;
}

body.glossStyleNew[data-clickMode=translate].notouch span[data-p]:hover,
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] 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] 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] 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] span[data-p].selecting,
body.glossStyleNew.colorLight span.translating {
  outline: none;
  background-color: #eee;
  color: black;
}

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

body.glossStyle.colorDark[data-clickMode=translate].notouch span[data-p]:hover {
  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: "Jost", sans-serif;
  font-weight: 400;
}

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

body.glossStyleNew span.translating .original {
  display: block;
  background-color: rgb(42, 185, 123);
  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: rgb(42, 185, 123) !important;
  border: 3px solid rgb(42, 185, 123);
  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: rgb(42, 185, 123);
  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 {
  font-family: "Coming Soon", sans-serif;
}

body.colorSepia span.translated,
body span.translated {
  background-color: rgba(0, 127, 0, 0.1);
}

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: green;
}

body.glossStyleNew span.translated,
body.glossStyleNew.colorSepia span.translated {
  color: #3c9e7c;
}

body.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
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[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;
}

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: 3px;
}

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;
}

.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 #e0dcbc;
  border-radius: 5px;
  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 #e0dcbc;
  border-radius: 5px;
  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;
}

body#readerPage .languageSelectView select {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}

.languageSelectorView li {
  margin: 4px 0;
}
.languageSelectorView a {
  color: #777;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.languageSelectorView.searchOnlyMode ul {
  margin-top: 0;
  border: solid 1px #bbb;
  border-radius: 5px;
  overflow-y: auto;
}
.languageSelectorView.searchOnlyMode ul li:hover a,
.languageSelectorView.searchOnlyMode ul li:hover a.selected {
  color: #777;
  background-color: transparent;
}
.languageSelectorView.searchOnlyMode ul li:hover a:hover,
.languageSelectorView.searchOnlyMode ul li:hover a.selected:hover {
  background-color: #777;
  color: #fff;
}
.languageSelectorView.searchOnlyMode a {
  display: block;
  padding: 10px;
}
.languageSelectorView.searchOnlyMode a.selected {
  background-color: #777;
  color: #fff;
}
.languageSelectorView.browseAndSearchMode ul li:hover a,
.languageSelectorView.browseAndSearchMode ul li:hover a.selected {
  color: #777;
}
.languageSelectorView.browseAndSearchMode ul li:hover a:hover,
.languageSelectorView.browseAndSearchMode ul li:hover a.selected:hover {
  color: #111;
}
.languageSelectorView.browseAndSearchMode a.selected {
  color: #111;
}

body#learnPage #mainContent {
  position: relative;
  padding: 10px;
  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.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 #666;
}
body#learnPage #mainContent .practiceOptionsTable td {
  position: relative;
}
body#learnPage #mainContent .practiceOptionsTable select {
  width: 100%;
}
body#learnPage #mainContent .practiceControls {
  margin: 32px 0 28px;
  display: flex;
  flex-direction: row;
  gap: 28px;
  max-width: 510px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: space-around;
}
body#learnPage #mainContent .practiceControls a {
  margin: 0;
}
body#learnPage #mainContent .practiceControls h3 {
  margin-top: 0;
  text-align: left;
}
@media (max-width: 546px) {
  body#learnPage #mainContent .practiceControls {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin: 28px 0;
  }
}
body#learnPage #mainContent .startFlashcardsButton {
  margin-top: 15px;
  background-color: #419ecd;
  color: #fff;
  padding: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  -webkit-text-decoration: none;
  text-decoration: none;
  gap: 30px;
}
@media (min-width: 547px) and (max-width: 754px) {
  body#learnPage #mainContent .startFlashcardsButton {
    padding: 20px;
    font-size: 18px;
  }
}
body#learnPage #mainContent .startFlashcardsButton:hover {
  background-color: #7be;
  box-shadow: 0 0 0 4px #419ecd;
}
body#learnPage #mainContent .startFlashcardsButton img {
  width: 80px;
  display: block;
}
@media (min-width: 547px) and (max-width: 754px) {
  body#learnPage #mainContent .startFlashcardsButton img {
    width: 60px;
  }
}
body#learnPage #weeklyChartContainer {
  display: inline-block;
  padding: 12px 20px;
  margin: 10px auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #fff;
}
@media (max-width: 546px) {
  body#learnPage #weeklyChartContainer {
    padding: 10px 6px;
  }
}

@keyframes perfectGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.libraryToolbar {
  display: flex;
  flex-direction: row;
  padding: 8px 0;
}
.libraryToolbar .browse {
  padding-right: 10px;
  white-space: nowrap;
}
@media (max-width: 546px) {
  .libraryToolbar .browse {
    padding-right: 1px;
  }
}
.libraryToolbar .browse [data-subview=privateLibraryTagSelectorView] select {
  max-width: 400px;
}
@media (min-width: 547px) and (max-width: 754px) {
  .libraryToolbar .browse [data-subview=privateLibraryTagSelectorView] select {
    max-width: 200px;
  }
}
@media (max-width: 546px) {
  .libraryToolbar .browse [data-subview=privateLibraryTagSelectorView] select {
    max-width: 130px;
  }
}
.libraryToolbar .flexFixed {
  flex: 0 0 fit-content;
}
.libraryToolbar .flexExpanding {
  flex: 1 1 auto;
}
.libraryToolbar .libraryToolbarSearchInputContainer {
  position: relative;
  width: 100%;
}
.libraryToolbar .libraryToolbarSearchInputContainer input {
  padding: 5px 5px 5px 30px;
}
.libraryToolbar .libraryToolbarSearchInputContainer .searchIcon {
  position: absolute;
  left: 7px;
  top: 1px;
  color: #888;
}

[data-subview=libraryListView] .permission {
  opacity: 0.5;
}
[data-subview=libraryListView] tr.subtleContainer {
  font-size: 85%;
  background-color: #fff;
}
[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] .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: #aaa;
}
[data-subview=libraryListView] td {
  overflow: hidden;
}
[data-subview=libraryListView] table.shelfMode .col-dragHandle {
  display: table-cell;
}
[data-subview=libraryListView] .col-checkbox {
  width: 30px;
  max-width: 30px;
}
[data-subview=libraryListView] .col-permissions {
  width: 20px;
  max-width: 20px;
}
[data-subview=libraryListView] .col-title {
  width: 600px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-title {
    max-width: 130px;
  }
}
[data-subview=libraryListView] .col-owner {
  width: 80px;
  max-width: 80px;
  min-width: 80px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-owner {
    width: 40px;
    max-width: 40px;
    min-width: 40px;
  }
}
[data-subview=libraryListView] .col-wordCount {
  width: 70px;
  max-width: 70px;
  min-width: 70px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-wordCount {
    display: none;
    width: 50px;
    max-width: 50px;
    min-width: 50px;
  }
}
[data-subview=libraryListView] .col-readStatus {
  width: 80px;
  max-width: 80px;
  min-width: 80px;
  padding-left: 5px;
}
@media (max-width: 546px) {
  [data-subview=libraryListView] .col-readStatus {
    width: 60px;
    max-width: 60px;
    min-width: 60px;
  }
}

.dropdownButtonList .undoChanges {
  background-color: #fe8;
  padding: 5px;
  color: blue;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.dropdownButtonList .showIfChanged {
  display: none;
}
.dropdownButtonList .addNewShelfInputRow {
  display: none;
}
.dropdownButtonList .createNewShelfButton {
  width: 100%;
}

.dropdownButtonList.changed .showIfChanged {
  display: block;
}

.dropdownButtonList.addNewShelfMode .addNewShelf {
  display: none;
}
.dropdownButtonList.addNewShelfMode .addNewShelfInputRow {
  display: block;
}

[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: 15px;
}
[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: #888;
  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%;
}

.newLibraryFilters {
  text-align: right;
}
.newLibraryFilters .searchBar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 4px;
}
.newLibraryFilters .searchBar .searchInputContainer {
  flex: 1 1 auto;
}
.newLibraryFilters .searchBar .searchButton {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 15;
  background-color: #419ecd;
  color: #fff;
  font-size: 16px;
  border: none;
  padding: 10px 0;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.newLibraryFilters .filters {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 5px 0 0;
  text-align: right;
  padding: 4px 8px;
  border: 2px solid #ccc;
  border-radius: 10px;
}
.newLibraryFilters .filters .filter {
  display: inline-block;
  margin: 4px 0;
}
.newLibraryFilters .filters .filter .multiSelectDropdown {
  left: auto;
  right: 0;
}
.newLibraryFilters .filters .filter .customSelectLabel {
  text-align: left;
}
@media (min-width: 547px) and (max-width: 754px), (max-width: 546px) {
  .newLibraryFilters .filters {
    display: inline-block;
  }
  .newLibraryFilters .filters .filter {
    display: block;
  }
}

.dialogButtonGroup {
  float: right;
  margin: 0;
}
.dialogButtonGroup li {
  display: inline;
  margin-left: 10px;
}
.dialogButtonGroup button {
  padding: 7px 15px;
}
.dialogButtonGroup button.grey {
  background-color: #aaa;
}

.multiSelectDropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  z-index: 10;
  width: 170px;
  border: 1px solid #ccc;
}
.multiSelectDropdown li {
  display: block;
  padding: 4px;
}
.multiSelectDropdown li label {
  display: block;
  width: 100%;
}

.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;
}

.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;
  }
}
body#practicePage .practiceCloseButton {
  color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
body#practicePage .practiceCloseButton:hover {
  color: rgba(0, 0, 0, 0.6);
}
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 .header {
  display: flex;
  flex-direction: row;
}
body#practicePage .practiceView .header .practiceCloseButton {
  margin-right: 16px;
}
body#practicePage .practiceView .topSpacer {
  flex-grow: 1;
  height: 0;
  max-height: 15%;
}
body#practicePage .practiceView .bottomSpacer {
  flex-grow: 2;
  height: 0;
}
body#practicePage .header,
body#practicePage .footer {
  padding: 16px;
  position: relative;
}
@media (min-height: 700px) and (min-width: 500px) {
  body#practicePage .header,
  body#practicePage .footer {
    padding: 32px 16px;
  }
}
body#practicePage .footer {
  border-top: 2px solid #e0dcbc;
}
@media (display-mode: standalone) {
  body#practicePage .footer {
    padding-bottom: 28px;
  }
}
body#practicePage .header {
  border-bottom: 2px solid #e0dcbc;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
body#practicePage .header .headerContent {
  display: flex;
  flex-direction: row;
}
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: 19px;
}
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: #3c9e7c;
}
body#practicePage button:disabled {
  background: #e0dcbc;
  color: #cfc99a;
}
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: #e0dcbc;
  color: #cfc99a;
}
body#practicePage .multipleChoiceButtonRow button,
body#practicePage .footerButtons button {
  padding: 6px 12px;
  font-size: 16px;
}
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%;
  opacity: 0.8;
  text-align: center;
}
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 .passiveMultipleChoiceChallenge .playTTSButton {
  margin: 0 0 0 4px;
}
body#practicePage .introChallenge .transliteration {
  font-size: 60%;
  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;
}

.practiceProgressBarContainer {
  background: white;
  height: 20px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  flex-grow: 1;
}
.practiceProgressBarContainer .progressBar {
  background: #43b08a;
  height: 100%;
  border-radius: 10px;
}

.webReaderInstallerContainer.active {
  display: block;
}

.webReaderInstallerContainer {
  display: none;
  position: absolute;
  right: 0;
  bottom: 2px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  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 all and (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 #entirePage {
  background-color: #222;
  color: #aaa;
}
body#readerPage.colorDark .centralDialog {
  background-color: #111;
  color: #eee;
  border-color: #444;
  box-shadow: 0 0 40px rgba(113, 209, 209, 0.1);
}
body#readerPage.colorDark a {
  color: #07a;
}
body#readerPage.colorDark.notouch a:hover {
  color: #29c;
}
body#readerPage.colorDark a#home .icon {
  color: #222;
  background-color: #fff;
}
body#readerPage.colorDark a#home {
  color: #fff;
}
body#readerPage.colorDark div#sideBarButton {
  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 {
  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 #entirePage {
  background-color: white;
  color: black;
}
body#readerPage.colorLight .centralDialog {
  background-color: white;
  color: black;
  border-color: #444;
  box-shadow: 0 0 40px rgba(113, 209, 209, 0.1);
}
body#readerPage.colorLight a#home {
  color: black;
}
body#readerPage.colorLight div#sideBarButton {
  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: #666;
}
body#readerPage h2 {
  margin-top: 2px;
  margin-bottom: 8px;
}
body#readerPage h3 {
  margin-top: 10px;
  margin-bottom: 6px;
}
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: 21px;
  line-height: 1.4;
}
@media (max-width: 546px) {
  body#readerPage #bookContent {
    top: 30px;
  }
}
@media (min-width: 547px) 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: 13px;
  width: 16px;
  height: 16px;
}
body#readerPage #bookContent h1 {
  font-size: 220%;
}
body#readerPage #bookContent h2 {
  font-size: 180%;
}
body#readerPage #bookContent h3 {
  font-size: 120%;
}
body#readerPage.fontSize0 #bookContent {
  font-size: 10px;
}
body#readerPage.fontSize1 #bookContent {
  font-size: 12px;
}
body#readerPage.fontSize2 #bookContent {
  font-size: 14px;
}
body#readerPage.fontSize3 #bookContent {
  font-size: 16px;
}
body#readerPage.fontSize4 #bookContent {
  font-size: 18px;
}
body#readerPage.fontSize5 #bookContent {
  font-size: 21px;
}
body#readerPage.fontSize6 #bookContent {
  font-size: 25px;
}
body#readerPage.fontSize7 #bookContent {
  font-size: 30px;
}
body#readerPage.fontSize8 #bookContent {
  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 .actions.dropdown {
  margin-left: 3px;
  margin-right: 3px;
}
body#readerPage #sideBarButtonContainer .tooltip.arrowRight {
  position: fixed;
  top: 0;
  right: 56px;
  max-width: 320px;
  cursor: default;
}
@media (min-width: 547px) and (max-width: 754px) {
  body#readerPage #sideBarButtonContainer .tooltip.arrowRight {
    max-width: 260px;
  }
}
@media (max-width: 546px) {
  body#readerPage #sideBarButtonContainer .tooltip.arrowRight {
    max-width: 200px;
  }
}
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: 15px;
  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: 15px;
  padding: 5px;
  mix-blend-mode: lighten;
  filter: brightness(0.5);
}
body#readerPage.width1 #libraryContainer {
  width: 259px;
}
body#readerPage .addToQueueContainer {
  display: none;
}
body#readerPage #footer.showQueue .addToQueueContainer {
  display: inline;
}
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: #444;
}
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 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: #444;
  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: #aaa;
  background-color: #444;
}
body#readerPage.notouch .clickActionToggles label:hover, body#readerPage.notouch .clickActionToggles label.selected:hover,
body#readerPage .clickActionToggles label.selected {
  color: #fff;
  background-color: #444;
}
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: 5px;
  z-index: 1;
}
@media (max-width: 546px) {
  body#readerPage #clickModeStatus {
    left: 175px;
    top: 32px;
  }
}
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: #aaa;
}
body#readerPage.colorDark.notouch .toolbarButton:hover:not([disabled]) {
  color: #ddd;
}
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 .homeButton {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
}
body#readerPage.colorDark .titleBar {
  background-color: #444;
  color: #aaa;
}
body#readerPage.colorDark .titleBar a {
  color: #aaa;
}
body#readerPage.colorDark .titleBar select {
  background-color: #444;
  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 #showTitleBar {
  z-index: 10;
}
body#readerPage #hideTitleBar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
body#readerPage #title {
  flex: 1 1 auto;
  overflow: hidden;
  height: 1.4em;
}
@media (min-width: 547px) 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;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
body#readerPage #title a {
  pointer-events: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  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: 28px;
  height: 28px;
  opacity: 0.5;
  padding: 4px 8px 4px 16px;
}
body#readerPage .titleBarWidget {
  flex: 0 0 auto;
  margin: 0 0 0 14px;
}
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: 19px;
}
body#readerPage #streak .streakView {
  color: #111;
}
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: 547px) 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 .streakTooltip {
  position: fixed;
  top: 40px;
  right: 45px;
  background-color: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
}
body#readerPage.sideBarVisible .streakTooltip {
  right: 470px;
}
body#readerPage #formattingOptions {
  padding: 0 10px;
}
@media (max-width: 546px) {
  body#readerPage #formattingOptions {
    -webkit-backdrop-filter: blur(1px);
            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: 5px;
  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: #444;
}
body#readerPage.colorDark #formattingOptions span.clickable.selected, body#readerPage.colorDark.notouch #formattingOptions span.clickable:hover {
  background-color: #111;
  color: #ddd;
}
body#readerPage.colorLight #formattingOptions span.clickable {
  background-color: #ddd;
  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.5;
  color: #111;
  padding: 0 4px;
}
body#readerPage a#home i {
  position: relative;
  top: -2px;
}
body#readerPage a#home .icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  font-family: "Jost";
  font-weight: 500;
  font-size: 25px;
  line-height: 1.2;
  color: #fff;
  background-color: #000;
  border-radius: 5px;
}
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;
}
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: #aaa;
  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: 21px;
}
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;
}
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 .container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
body#readerPage select {
  border: 1px solid #aaa;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #151513;
}
body#readerPage.colorDark select {
  color: #fff;
}
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%;
}
body#readerPage #submitYouTubeTranscript {
  display: none;
}
@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: 21px;
    height: 21px;
    background-size: 21px;
  }
  body#readerPage a#home .icon {
    width: 21px;
    height: 21px;
    font-size: 17px;
    line-height: 1.3;
    background-size: 24px;
  }
  body#readerPage #title {
    top: 6px;
  }
  body#readerPage #uvTab {
    visibility: hidden;
  }
  body#readerPage #footer.showQueue .addToQueueContainer {
    display: inline;
  }
  body#readerPage #footer.showQueue .pageControls {
    display: none;
  }
}
@media (min-width: 547px) and (max-width: 754px), (min-width: 370px) 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 a#home .icon {
    top: 4px;
    width: 26px;
    height: 26px;
    font-size: 22px;
    background-size: 28px;
  }
  body#readerPage #sideBarButton {
    width: 26px;
    height: 26px;
    background-size: 26px;
  }
  body#readerPage #title {
    top: 8px;
  }
}
body#readerPage #dropdownMenu .dropdownMenu {
  right: -45px;
}
body#readerPage #dropdownMenu .dropdownMenuContainer {
  margin: 0;
}
@media (max-width: 546px) {
  body#readerPage #dropdownMenu .menuButton {
    font-size: 18px;
  }
}
body#readerPage.colorLight .dropdownMenuContainer .dropdownMenu {
  border-color: #ddd;
}
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 .dropdownMenuContainer .dropdownMenu {
  background-color: #222;
  border-color: #444;
  color: #aaa;
}
body#readerPage.colorDark .dropdownMenuContainer .dropdownMenu li {
  color: #aaa;
}
body#readerPage.colorDark .dropdownMenuContainer .dropdownMenu li.actionOrToggle:hover {
  background-color: #368;
}
body#readerPage.colorDark .dropdownMenuContainer .dropdownMenu li.actionOrToggle.disabled {
  color: rgba(255, 255, 255, 0.3);
}
body#readerPage.colorDark .pageNavigationTooltip {
  filter: invert(1);
  box-shadow: none;
}
body#readerPage.colorDark .streakTooltip {
  filter: invert(1);
  box-shadow: none;
}
@media (min-width: 850px) {
  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: 23px;
    width: 30px;
    height: 30px;
  }
  body#readerPage a#home .icon {
    width: 32px;
    height: 32px;
    font-size: 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: 31px;
    height: 31px;
  }
  body#readerPage a#home .icon {
    width: 33px;
    height: 33px;
    font-size: 27px;
  }
  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;
  }
}

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: 19px;
  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: 9px;
  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: 13px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
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;
  scrollbar-gutter: stable;
}
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: 547px) 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 .tabHeader.selected,
body#readerPage .sideBar body.notouch .tabHeader:hover {
  opacity: 1;
}
@media (min-width: 547px) 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: 547px) and (max-width: 754px), (min-width: 370px) and (max-width: 546px) {
  body#readerPage .sideBar .tabContent {
    top: 35px;
  }
}
@media (min-width: 850px) {
  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=youTube] {
  overflow-y: auto;
  padding: 0 8px;
}
body#readerPage .sideBar .tabContent[data-tab=youTube] h4 {
  margin-top: 15px;
}
body#readerPage .sideBar .tabContent[data-tab=youTube] ul,
body#readerPage .sideBar .tabContent[data-tab=youTube] p {
  margin-top: 5px;
}
body#readerPage .sideBar .tabContent[data-tab=share] {
  padding: 0 8px;
}
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 .tabContent[data-tab=audio] {
  margin-top: 15px;
}
body#readerPage .sideBar .tabContent[data-tab=edit] {
  padding: 7px;
  flex-direction: column;
  overflow-y: auto;
}
body#readerPage .sideBar .tabContent[data-tab=edit].selected {
  display: flex;
}
body#readerPage .sideBar .tabContent[data-tab=edit] #editDocumentPanel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body#readerPage .sideBar .tabContent[data-tab=edit] .editDocumentHeader {
  flex-shrink: 0;
}
body#readerPage .sideBar .tabContent[data-tab=edit] .editDocumentContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body#readerPage .sideBar .tabContent[data-tab=edit] #documentText {
  box-sizing: border-box;
  width: 100%;
  resize: none;
  font-size: 13px;
  flex: 1;
  min-height: 60px;
  margin-bottom: 4px;
}
body#readerPage .sideBar .tabContent[data-tab=edit] h4 {
  margin-top: 5px;
  margin-bottom: 1px;
}
body#readerPage .sideBar .tabContent[data-tab=edit] table {
  width: 100%;
}
body#readerPage .sideBar .tabContent[data-tab=edit] input[type=text],
body#readerPage .sideBar .tabContent[data-tab=edit] select {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
}
body#readerPage .sideBar .tabContent[data-tab=edit] .authorRow {
  display: flex;
  align-items: center;
}
body#readerPage .sideBar .tabContent[data-tab=edit] .authorRow #authorInput {
  flex: 1;
  margin-right: 10px;
}
body#readerPage .sideBar .tabContent[data-tab=edit] .authorRow .aiCheckboxLabel {
  white-space: nowrap;
}
body#readerPage .sideBar .tabContent[data-tab=edit] .editDocumentFooter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
body#readerPage .sideBar .tabContent[data-tab=edit] .editDocumentFooter button {
  flex: 1;
}
body#readerPage .sideBar #dictionaryChoice {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
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%;
}

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 .tabContent {
  background-color: rgb(34, 34, 34);
}
body#readerPage.colorDark .tabContent label {
  color: #aaa;
}
body#readerPage.colorDark .tabContent[data-tab=formattingOptions] {
  background-color: rgba(34, 34, 34, 0.8);
}

body#readerPage.colorLight .tabContent {
  background-color: white;
}
body#readerPage.colorLight .tabContent[data-tab=formattingOptions] {
  background-color: rgba(255, 255, 255, 0.8);
}

body#readerPage .tabContent {
  background-color: #f0eedf;
}
body#readerPage .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;
}
body#readerPage #smartDictionaryContainer .editWordButton {
  float: right;
  margin-bottom: 5px;
}
@media (max-width: 370px) {
  body#readerPage #smartDictionaryContainer {
    zoom: 1;
  }
}
@media (min-width: 850px) {
  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.glossStyleNew.colorDark .smartDictionaryContent,
body#readerPage.colorDark .smartDictionaryContent,
body#readerPage.glossStyleNew.colorDark .smartDictionaryHeader,
body#readerPage.colorDark .smartDictionaryHeader {
  color: #9bc;
}

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

body#readerPage .smartDictionaryContent {
  color: green;
  padding-right: 4px;
}
body#readerPage .smartDictionaryContent .smartDictionaryHeader {
  margin-top: 16px;
  color: green;
}
body#readerPage .smartDictionaryContent .smartDefinition {
  white-space: pre-wrap;
}
body#readerPage .smartDictionaryContent.trialMode {
  color: #000;
  line-height: 1.3;
  overflow-y: hidden;
}

body#readerPage.glossStyleNew .smartDictionaryHeader,
body#readerPage.glossStyleNew .smartDictionaryContent {
  color: #3c9e7c;
}
body#readerPage.glossStyleNew .smartDictionaryHeader.trialMode,
body#readerPage.glossStyleNew .smartDictionaryContent.trialMode {
  color: #000;
}

body#readerPage .smartDictionaryTranslation {
  font-family: "Coming Soon", sans-serif;
  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#startPage {
  background-color: #f0eedf;
}
body#startPage #entirePage {
  background-color: #f0eedf;
}
body#startPage .startPageDialog {
  max-width: 700px;
  margin: 40px auto;
  padding: 16px;
}
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;
}

#storyBot .storyBotContainer {
  margin-top: 28px;
  position: relative;
}
@media (max-width: 546px) {
  #storyBot .storyBotContainer {
    margin-top: 16px;
  }
}
#storyBot .storyBotContainer .topSection {
  padding-right: 220px;
}
@media (max-width: 546px) {
  #storyBot .storyBotContainer .topSection {
    padding-right: 120px;
  }
}
#storyBot .storyBotContainer .storyBotImage {
  position: absolute;
  top: -8px;
  right: -10px;
  width: 220px;
}
@media (min-width: 547px) and (max-width: 754px) {
  #storyBot .storyBotContainer .storyBotImage {
    width: 195px;
  }
}
@media (max-width: 546px) {
  #storyBot .storyBotContainer .storyBotImage {
    width: 150px;
  }
}
#storyBot .storyBotContainer table {
  width: 600px;
}
@media (min-width: 547px) and (max-width: 754px), (max-width: 546px) {
  #storyBot .storyBotContainer table {
    width: 100%;
  }
}
#storyBot .storyBotContainer table td:first-child {
  width: 150px;
}
@media (max-width: 546px) {
  #storyBot .storyBotContainer table td:first-child {
    width: 115px;
  }
}
#storyBot .storyBotContainer table td {
  vertical-align: top;
  padding: 2px 0;
}
#storyBot .storyBotContainer table select,
#storyBot .storyBotContainer table input {
  min-width: 150px;
}
#storyBot .storyBotContainer table .generateButton {
  margin-top: 20px;
  width: 100%;
}
#storyBot .storyBotContainer .languageSelectorContainer {
  position: relative;
}
#storyBot .storyBotContainer .languageSelectorContainer a {
  -webkit-text-decoration: none;
  text-decoration: none;
}
#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: 19px;
  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);
}

.streakTooltip {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 250;
}

.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 #aaa;
  border-radius: 14px;
  color: #000;
  padding: 8px 10px;
  z-index: 150;
  min-width: 230px;
  width: 100%;
  max-width: 450px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
  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: #aaa transparent;
  border-width: 11px 11px 0 11px;
  left: 24px;
}

.tooltip.arrowBottom.right:before {
  border-color: #aaa 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 #aaa;
  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 #aaa;
  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: #aaa 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;
}

.ttsVoicePicker {
  max-height: 75vh;
  display: flex;
  flex-direction: column;
}
.ttsVoicePicker .voiceList {
  border: 2px solid #ccc;
  overflow-y: auto;
}
.ttsVoicePicker .voiceOption {
  cursor: pointer;
  padding: 6px;
}
.ttsVoicePicker .voiceOption.selected {
  background-color: #ccc;
}
.ttsVoicePicker .voiceOption:hover {
  background-color: #eee;
}
.ttsVoicePicker .rateOption {
  padding: 6px;
  margin: 0 8px 0 0;
  border: 2px solid #ccc;
  cursor: pointer;
}
.ttsVoicePicker .rateOption.selected {
  background-color: #ccc;
}
.ttsVoicePicker .rateOption:hover {
  background-color: #eee;
}
.ttsVoicePicker .rateLabel {
  display: inline-block;
  padding: 10px 0;
}
.ttsVoicePicker .continueButton {
  width: 100%;
  font-size: 16px;
}

.userPageSection {
  margin: 35px 0;
}

.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: #7cc4ab;
  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;
}

body#wordsPage .leftColumn {
  display: inline-block;
  box-sizing: border-box;
  width: 120px;
  vertical-align: top;
  padding-right: 8px;
}
@media (min-width: 850px) {
  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: #e0dcbc;
}
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.books label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
body#wordsPage .rightColumn {
  display: inline-block;
  box-sizing: border-box;
  width: 615px;
  vertical-align: top;
}
@media (min-width: 850px) {
  body#wordsPage .rightColumn {
    width: 650px;
  }
}
body#wordsPage .wordsPageTopControls {
  width: 100%;
  display: flex;
}
@media (max-width: 546px) {
  body#wordsPage .wordsPageTopControls .searchLabel {
    display: none;
  }
}
body#wordsPage .wordsPageTopControls button {
  width: 80px;
  margin-left: 4px;
}
body#wordsPage .wordsPageTopControls button#importWordsButton {
  width: auto;
}
body#wordsPage .wordsPageTopControls .clearSearchButton {
  display: none;
}
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: 850px) {
  body#wordsPage .searchLabel {
    width: 170px;
  }
}
body#wordsPage .sortByLabel {
  margin-right: 15px;
}

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

.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: 14px;
  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: 23px;
  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: #aaa;
  border-color: #444;
  box-shadow: 0 0 40px rgba(113, 209, 209, 0.1);
}

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

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

.yourWordPopUp li {
  margin: 5px 0;
}

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

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

.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 (min-width: 370px) and (max-width: 546px) {
  body:not(#readerPage) {
    zoom: 1.15;
  }
  body:not(#readerPage) .undoZoom {
    zoom: 0.8696;
  }
}
@media (min-width: 1200px) and (min-height: 800px) {
  body:not(#readerPage) {
    zoom: 1.1;
  }
  body:not(#readerPage) .undoZoom {
    zoom: 0.9091;
  }
}
@media (min-width: 1500px) and (min-height: 1000px) {
  body:not(#readerPage) {
    zoom: 1.2;
  }
  body:not(#readerPage) .undoZoom {
    zoom: 0.8333;
  }
}

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

/* loading page */
body#loadingPage {
  color: green;
}

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;
}

/* ajax info */
.ajaxIndicatorLight,
.ajaxIndicatorDark,
.ajaxIndicator {
  display: none;
}

#header .ajaxIndicator {
  position: absolute;
  top: 2px;
  right: 80px;
  z-index: 40;
}

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

/* notification bar */
.notification {
  display: block;
  position: absolute;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  color: #000;
  background-color: #fe8;
  display: none;
  border: 1px solid #ed7;
  z-index: 10000;
}

.notification .message {
  margin-left: 10px;
  margin-right: 30px;
}

.notification .dismissButton {
  position: absolute;
  right: 4px;
  top: 4px;
  background-color: #ba6;
  border: none;
  width: 21px;
  color: #fe8;
  cursor: pointer;
}

.notification .dismissButton:hover {
  background-color: #874;
}

/* columns */
.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;
}

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

body.colorDark .payButton,
.payButton {
  color: #fff;
  background-color: #419ecd;
  border: none;
  padding: 10px;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  display: block;
  margin: 10px 0 0 0;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-appearance: none;
}

#newAccountButton {
  background-color: #3c9e7c;
}
#newAccountButton:hover:not([disabled]) {
  background-color: #63c3a2;
}

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

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

input.payButton {
  width: 100%;
}

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

select.prominent {
  -webkit-appearance: none !important;
  border-radius: 0;
}

.prominent.large {
  font-size: 16px;
}

.prominent.largeWithIcon {
  display: inline-block;
  font-size: 16px;
  text-align: center;
  padding: 10px;
  width: 150px;
  margin: 8px;
  border-radius: 15px;
}
.prominent.largeWithIcon img {
  margin: 10px auto;
  display: block;
}

.prominent {
  color: #fff;
  background-color: #419ecd;
  border: none;
  margin: 1px 0;
  padding: 5px 8px;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
}

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

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

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

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

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

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

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

.tableForm {
  margin: 10px 0;
}

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

.table {
  font-size: 90%;
  width: 100%;
}

.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 #ddd;
}

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

.divLink {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.table textarea {
  width: 100%;
}

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;
}

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

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

#bookmarkletInstallerDialog pre {
  word-break: break-all;
  word-wrap: break-word;
  padding: 8px;
  border-style: solid;
  border-color: #333;
  border-width: 1px;
  background-color: #fff;
}

#exampleOutput li {
  background-color: #fff;
  border: 1px solid #ddd;
  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;
}

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

.warning {
  color: #f32;
}

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;
}

.clear {
  clear: both;
}

.dropdownBox {
  position: relative;
}

.dropdownTitle {
  position: relative;
  padding-right: 18px;
  color: #c5e6cf;
  color: #c6dfd6;
  font-weight: bold;
}

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

.dropdownTitle .dropdownArrow {
  border-color: #c5e6cf 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;
}

.dropdownList {
  position: absolute;
  top: 120%;
  left: 0;
  width: 212px;
  padding: 9px;
  display: none;
  color: #222;
  background-color: #eee;
  border-style: solid;
  border-width: 1px;
  border-color: #bbb;
  z-index: 10;
  border-radius: 4px;
}
.dropdownList .languageSearchInput {
  margin: 0 0 10px;
}

.dropdownList a {
  color: #777;
  -webkit-text-decoration: none;
  text-decoration: none;
  line-height: 1.4;
}
.dropdownList a:hover {
  color: #000;
}

.dropdownList h4 {
  margin-bottom: 9px;
}

.dropdownList h3 {
  color: #666;
  font-weight: 600;
  margin-bottom: 15px;
}

.dropdownList ul {
  margin: 0 0 0 0;
  padding: 0px;
  color: #888;
}

.dropdownList table {
  color: #888;
}

.dropdownList li {
  clear: both;
}

body.notouch .dropdownList .clickable:hover {
  color: #000;
}

#userDropdownList {
  right: 0;
  left: auto;
}
#userDropdownList table {
  width: 100%;
}
#userDropdownList table td {
  padding-top: 4px;
  padding-bottom: 4px;
}
#userDropdownList table td:first-child {
  text-align: center;
}
#userDropdownList table tr.horizontalLine {
  border-bottom: 1px solid #888;
}
#userDropdownList table tr.horizontalLine td {
  height: 8px;
}
#userDropdownList table tr.belowHorizontalLine td {
  height: 8px;
}

.topRightCorner {
  float: right;
  position: relative;
}

.clickable {
  cursor: pointer;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

body.notouch .hoverGlow:hover {
  box-shadow: 0 0 8px #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: 4px 4px 30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  border-radius: 5px;
}
.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);
  padding: 16px 40px 26px;
  border-radius: 16px;
}
@media (min-width: 547px) and (max-width: 754px) {
  .centralDialog.greenBackground {
    padding: 14px 26px 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;
    padding: 16px;
    border-radius: 0;
  }
}
.centralDialog.greenBackground .closeDialogButton {
  color: #fff;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 20px;
  right: 20px;
}
@media (min-width: 547px) and (max-width: 754px) {
  .centralDialog.greenBackground .closeDialogButton {
    top: 12px;
    right: 8px;
  }
}
@media (max-width: 546px) {
  .centralDialog.greenBackground .closeDialogButton {
    top: 8px;
    right: 8px;
  }
}

.fadedHoverButton {
  opacity: 0.5;
}

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

.centerAlign {
  text-align: center;
}

.fullScreenOverlay {
  position: fixed;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px 15px;
  box-shadow: 2px 2px 10px #444;
}

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

@keyframes pageLoading {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}
[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; /*, slideIn 200ms, ease-out;*/
  animation: fadeIn 200ms ease-out; /*, slideIn 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;
  }
}
.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: #aaa;
}

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

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

#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;
}

#signUpForm .throbber {
  display: none;
}

#signUpForm.syncing .throbber {
  display: inline;
}

#signUpForm td:first-child {
  width: 80px;
}

#signUpForm input {
  margin: 3px 0;
}

#signUpForm {
  font-weight: 300;
}

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

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

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

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

.closeButton,
.closeDialogButton {
  font-weight: bold;
  font-size: 21px;
  color: #aaa;
  position: absolute;
  top: 4px;
  right: 6px;
  cursor: pointer;
  border: none;
}

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

.boxed {
  border-style: solid;
  border-width: 1px;
  border-color: #444;
}

.verticalScrollArea {
  position: absolute;
  left: -8px;
  right: 0;
  top: 36px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.tabBar {
  position: absolute;
  bottom: 100%;
}

.tabBar ul {
  list-style-type: none;
  height: 35px;
  margin: 0;
}

.tabBar li {
  float: left;
  margin-right: 6px;
}

.tabBar li a {
  display: block;
  float: left;
  padding: 0 15px;
  line-height: 35px;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: #f0eedf;
  color: #888;
}

body.notouch .tabBar li a:hover {
  background-color: #ddd;
  color: #000;
}

.tabPanel {
  position: relative;
  display: inline-block;
  background-color: #ddd;
  margin-top: 30px;
  width: 260px;
  height: 350px;
}

/* Account page */
.planContainer {
  clear: both;
  text-align: center;
}

.plan {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 274px;
  background-color: #e0dcbc;
  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;
}

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

.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;
}

.selectBox select {
  font-size: 15px;
  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;
}

#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;
}

#libraryContainer {
  position: relative;
  width: 518px;
}

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

#uploadDialog .throbber {
  position: relative;
  top: 3px;
  display: none;
}

/* nav buttons */
#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;
}

#user {
  position: absolute;
  top: 60px;
  right: 100px;
}

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

body #next.activated .arrowRight,
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,
body.notouch #prev:hover .arrowLeft {
  opacity: 0.8;
}

#trialModeNotification {
  background-color: #ff8;
  padding: 6px 0;
  text-align: center;
  font-style: italic;
  color: rgba(0, 0, 0, 0.5);
}

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

#header {
  position: relative;
  padding: 8px 0 0 0;
  margin-bottom: 10px;
  background-color: #43b08a;
  color: #fff;
  border-radius: 0;
}

#logo {
  display: inline;
  margin: 0 15px 15px 0;
  font-weight: 500;
  font-size: 32px;
  text-shadow: 1px 1px #173;
  font-family: "Jost";
  text-shadow: none;
  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: 547px) 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: 547px) and (max-width: 754px) {
  #logo .readlangLogoContainer .rabbit {
    width: 21px;
  }
}
#logo .readlangLogoContainer:hover .rabbit {
  bottom: -22px;
}
#logo .readlangLogoText {
  position: relative;
  vertical-align: top;
  left: 4px;
  top: 14px;
  font-family: "Jost", sans-serif;
  font-weight: 600;
}
@media (min-width: 547px) and (max-width: 754px) {
  #logo .readlangLogoText {
    top: 11px;
  }
}

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

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;
}

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

.languageContainer {
  position: relative;
  float: left;
  margin: 0 10px 0 0;
}

#userInfo {
  position: absolute;
  top: 0;
  right: 0;
}

.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: 19px;
}
#headerSettings #streak .streakView {
  color: rgb(255, 255, 255);
}
#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);
}
#headerSettings #streak .streakTooltip {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 99;
}
@media (max-width: 546px) {
  #headerSettings #streak {
    zoom: 0.8;
    font-size: 16px;
    top: -4px;
    bottom: auto;
    bottom: initial;
    right: 72px;
  }
}

.streakTooltip {
  cursor: default;
  display: none;
  color: #666;
  background-color: #eee;
  border-style: solid;
  border-width: 1px;
  border-color: #bbb;
  border-radius: 4px;
  padding: 8px 16px;
  width: 180px;
  font-size: 18px;
}
.streakTooltip .redDotNotice {
  position: relative;
  border-top: 1px solid #ccc;
  padding-right: 18px;
}
.streakTooltip .redDotNotice .dismissMessageButton {
  position: absolute;
  top: 4px;
  right: 0;
  cursor: pointer;
}
.streakTooltip p,
.streakTooltip ul {
  font-size: 85%;
}
.streakTooltip ul {
  margin-bottom: 6px;
}
.streakTooltip .optIn {
  font-size: 14px;
}
.streakTooltip .optIn .callout {
  padding: 10px 15px;
}

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

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

/* nav tabs */
#navBar ul {
  list-style-type: none;
  height: 32px;
  margin: 8px 0 0 0;
}

#navBar li {
  float: left;
  margin-right: 6px;
  position: relative;
}

#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: #83cc99;
  background-color: #a2d0c0;
  color: #3c9e7c;
}

#navBar li a i {
  margin-right: 2px;
}
#navBar li a i svg {
  position: relative;
  top: 2px;
  width: 16px;
  height: 16px;
}

body.notouch #navBar li a:hover,
body.notouch #navBar li a#navTest.glow:hover {
  background-color: #fff;
  color: #2e795f;
}

body#libraryPage #navLibrary,
body#homePage #navBookshelf,
body#dashboardPage #navDashboard,
body#learnPage #navTest,
body#flashcardsPage #navTest,
body#wordsPage #navWords,
body#chatListPage #navChat {
  color: #001;
  background-color: #f0eedf;
}

/* nav-tabs */
ul.nav-tabs li {
  display: inline-block;
  padding: 4px 8px;
  cursor: pointer;
}

ul.nav-tabs li,
ul.nav-tabs li a {
  color: #272;
  -webkit-text-decoration: none;
  text-decoration: none;
}

body.no-touch ul.nav-tabs li:hover {
  background-color: #dfd;
}

ul.nav-tabs li.active {
  background-color: #319e52;
}

ul.nav-tabs li.active,
ul.nav-tabs li.active a {
  color: #fff;
}

.tab-content {
  position: relative;
  display: none;
}

.tab-content.active {
  display: block;
}

/* modal dialog */
.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  margin-top: -100px;
  margin-left: -155px;
  padding: 5px;
  background-color: white;
  color: black;
}

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

/* book viewer */
a.buttonLink {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.hintArrow {
  margin-left: 80px;
  text-align: left;
  position: relative;
  height: 150px;
}
@media (max-width: 546px) {
  .hintArrow {
    margin-left: 40px;
  }
}

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

body#bookStatsPresentationPage #wordReferenceIFrame {
  height: 100%;
}

.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%;
}

.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");
}

#openDictionary {
  padding: 2px 4px 3px 4px;
  margin-bottom: 3px;
  white-space: nowrap;
  margin-left: 4px;
}

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

/* homepage */
body#homePage {
  position: relative;
}

body#homePage .bookColumn {
  position: relative;
}

h3.libraryTitle {
  /*  display: inline;*/
  margin: 10px 0;
}

#bulkActions {
  display: none;
}

.miniContentBlock {
  display: inline-block;
  border-style: solid;
  border-color: #cbb;
  border-width: 1px;
  background-color: #eeebdb;
  font-size: 85%;
  padding: 4px;
  margin: 3px 1px;
}

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

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

body#homePage #user {
  font-size: 18px;
}

body#checkout2Page #footer,
body#checkoutPage #footer,
body.showHeader #footer {
  position: relative;
  clear: both;
  font-size: 13px;
  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 .facebookShare {
  width: 260px;
  height: 60px;
}

#socialLinks {
  position: absolute;
  top: 0;
  right: 0;
}

#socialLinks li {
  opacity: 0.8;
}

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

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

#socialLinks h3 {
  color: #bbb;
}

#headerSettings {
  position: absolute;
  left: 190px;
  right: 0;
  top: 15px;
}

#homePageContent {
  padding-top: 8px;
}

.libraryViewTabBar {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.libraryViewTabBar li {
  position: relative;
  top: 1px;
  display: inline-block;
  padding: 4px 8px 5px 8px;
  margin: 7px 1px 1px 10px;
  cursor: pointer;
}

.libraryViewTabBar li.selected,
body.notouch .libraryViewTabBar li:hover {
  margin: 7px 0px 0px 9px;
  border: 1px solid #aaa;
  border-bottom-color: #f0eedf;
  background-color: #f0eedf;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.libraryViewTabBar li a {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #888;
}

.libraryViewTabBar li.selected a {
  color: #333;
}

.libraryHeader {
  position: relative;
  border-bottom: 1px solid #aaa;
}
.libraryHeader .libraryButtons {
  position: absolute;
  bottom: 2px;
  right: 0;
}
.libraryHeader #storyBot,
.libraryHeader #addDocument {
  font-size: 16px;
}
@media (max-width: 546px) {
  .libraryHeader #storyBot,
  .libraryHeader #addDocument {
    padding: 2px 6px;
  }
}

/* new library filters */
table.libraryFilters {
  width: 100%;
  margin-bottom: 20px;
}
table.libraryFilters th {
  color: #777;
}
table.libraryFilters td,
table.libraryFilters th {
  text-align: center;
}

.libraryFilters .categories {
  line-height: 2;
  margin: 10px 0;
}

.libraryFilters .categories label {
  white-space: nowrap;
}

.libraryFilters input[type=radio][name=type] {
  display: none;
}

.libraryFilters label {
  color: #888;
  padding: 4px 8px 4px 4px;
  margin: 0 10px 0 0;
  cursor: pointer;
}

.libraryFilters label:hover {
  color: #333;
  background-color: #ddd;
}

.libraryFilters label.selected {
  opacity: 1;
  background-color: #999;
  color: #fff;
  cursor: default;
}

.libraryFilters {
  clear: both;
  margin: 20px 0 5px 0;
  padding-top: 7px;
}

.libraryFilters label i {
  font-size: 20px;
}

.libraryFilterTabs {
  margin: 0 0 15px 0;
}

.libraryFilters .slider {
  font-size: 14px;
  display: inline-block;
  box-sizing: border-box;
  width: 45%;
  padding-right: 34px;
}

.libraryFilters .slider h3 {
  color: #888;
  text-align: center;
}

.libraryFilters .slider .ui-slider-handle {
  top: -8px;
  width: auto;
  padding: 3px 4px 5px 4px;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.8);
  border-color: transparent;
  outline: none;
}

.libraryFilters .slider .ui-slider-handle.ui-state-hover,
.libraryFilters .slider .ui-slider-handle.ui-state-focus {
  color: #1c94c4;
}

.libraryFilters .ui-slider {
  margin: 7px 0 10px 0;
}

.libraryFilters .slider .ui-slider-range {
  background-color: #bbb;
}

.libraryFilters[data-type=link] .sliders {
  display: none;
}

.libraryFilters .slider .tooltip {
  min-width: inherit;
  width: auto;
}

body.notouch .libraryFilters .ui-slider:hover .tooltip,
.libraryFilters .ui-slider.selecting .tooltip {
  display: block;
}

body.notouch .libraryFilters .slider .ui-slider:hover .ui-slider-handle {
  background-color: rgb(255, 255, 255);
  border-color: #ccc;
}

body.notouch .libraryFilters .ui-slider-handle.ui-state-hover .tooltip {
  z-index: 50;
}

.searchView {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 5px;
}

.searchInputContainer {
  position: relative;
  display: inline-block;
  width: 100%;
}
.searchInputContainer input {
  padding: 5px 30px;
  width: 100%;
}
.searchInputContainer .searchIcon {
  position: absolute;
  left: 9px;
  top: 6px;
  color: #888;
}
.searchInputContainer .clearSearchButton {
  position: absolute;
  right: 7px;
  top: 1px;
  padding: 6px 3px;
  color: #888;
  cursor: pointer;
}

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

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 #ddd;
}

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

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;
}

.librarySearchContainer {
  display: flex;
}

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

.libraryTable {
  margin: 0;
  border-width: 0;
  margin-top: 0;
  margin-bottom: 12px;
  border-collapse: separate;
  border-spacing: 0 3px;
  width: 100%;
}

.libraryTable th {
  white-space: nowrap;
}

.libraryTable thead tr {
  background-color: transparent;
}

.libraryTable tr {
  font-family: arial, sans-serif;
  font-size: 90%;
  background-color: #eeebdb;
}

.libraryTable td {
  margin: 0;
  border-bottom: 1px solid #cbb;
  border-top: 1px solid #cbb;
  padding: 5px 8px 5px 8px;
}

.libraryTable td.urlDomain {
  word-wrap: break-word;
}

.libraryTable td:first-child {
  border-left: 1px solid #cbb;
}

.libraryTable td:last-child {
  border-right: 1px solid #cbb;
}

.libraryTable .sortButton .sortArrow {
  opacity: 0.3;
}

body.notouch .libraryTable .sortButton:hover .sortArrow,
.libraryTable .sortButton.selected .sortArrow {
  opacity: 1;
}

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

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

select.tag {
  padding: 1px 5px;
  font-family: "Open Sans";
}

.tag {
  position: relative;
  margin: 2px 2px 4px 2px;
  padding: 1px 2px;
  background-color: #feb;
  border: 1px solid #dc9;
  line-height: 1.5;
  white-space: nowrap;
  border-radius: 4px;
  font-size: 80%;
}

.tagText {
  position: relative;
  top: -1px;
  padding: 2px 5px;
}

.tag i {
  position: relative;
  top: 1px;
  left: 2px;
}

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

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

.popularDomain.approved {
  background-color: #fff;
}

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

#addDocumentDialog button {
  padding: 4px;
  width: 100%;
}

/* word cards */
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: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
@media (min-width: 850px) {
  .wordCard {
    width: 371px;
  }
}

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

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

.shrinkText1 {
  font-size: 80%;
}

.shrinkText2 {
  font-size: 70%;
}

.shrinkText3 {
  font-size: 60%;
}

.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;
  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: 13px;
  line-height: 1em;
  opacity: 0.6;
  font-style: italic;
  display: none;
}

#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 table {
  margin: 0 auto 0 auto;
  width: 100%;
}

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

.originalDocumentLink {
  display: block;
  text-align: right;
}

/* 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;
}

.bookmarkletLink,
#bookmarkletLink {
  display: block;
  margin: 10px auto 10px auto;
  padding: 10px;
  width: 200px;
  text-align: center;
  color: #fff;
  background-color: #319e52;
  font-weight: bold;
  -webkit-text-decoration: none;
  text-decoration: none;
}

/* WordsPage */
ul#translator li {
  margin: 0 0 8px 0;
}

#userWordsTable {
  position: absolute;
  left: 10px;
  right: 10px;
  text-align: left;
  background-color: #fff;
  margin: 10px;
}

#userWordsTable tbody tr {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

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

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

.wordsToolbar .paginationControls {
  margin-left: 4px;
  white-space: nowrap;
}
@media (max-width: 546px) {
  .wordsToolbar .paginationControls {
    font-size: 11px;
  }
}

.wordsToolbar .toolbarButton {
  border: 1px solid #ccc;
  background-color: #fff;
  color: #666;
}

body.notouch .wordsToolbar .toolbarButton:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #000;
}

.wordsToolbar .paginationControls button:last-child {
  margin-right: 0;
}

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

.customSelectLabel {
  display: inline-flex;
  position: relative;
  font-size: 14px;
  flex: 0 1 auto;
}

.customSelectLabel i {
  color: #888;
}

.customSelectLabel .icon {
  position: absolute;
  right: 8px;
  top: 7px;
  z-index: 5;
  pointer-events: none;
}

.customSelect {
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 5px 24px 5px 8px;
  cursor: pointer;
}

body.notouch .customSelect:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #000;
}

.dragFields {
  display: inline-block;
  width: 200px;
}

.otherDelimiter:disabled {
  opacity: 0.2;
}

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

/* --- sortable --- */
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;
}

/* --- words page --- */
.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;
}

/* --- word list dialog --- */
.wordTable {
  font-size: 90%;
  width: 100%;
  margin: 6px 0 12px 0;
}
.wordTable .translationColumn {
  font-family: "Coming Soon", sans-serif;
  color: #43b08a;
  font-weight: 600;
  font-size: 115%;
}
.wordTable .columnSelectCheckbox {
  width: 30px;
}
.wordTable .columnTTS {
  width: 30px;
}
.wordTable .columnFavorite {
  width: 30px;
}
.wordTable .columnTranslation {
  width: 100px;
}
@media (max-width: 546px) {
  .wordTable .columnTranslation {
    width: 80px;
  }
}
.wordTable .columnSource {
  width: 140px;
}
@media (min-width: 547px) and (max-width: 754px), (max-width: 546px) {
  .wordTable .columnSource {
    display: none;
  }
}

.wordTable .wordColumn {
  color: #888;
}

.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;
}

.libraryTable .checkboxCell {
  min-width: 30px;
  height: 20px;
}

.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] {
  display: none;
}

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

.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;
}

#payPalButton {
  border: none;
}

.wordTable .column1 {
  min-width: 150px;
}

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

.box {
  background-color: #eee;
  padding: 5px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #ddd;
  margin: 8px 0;
}

#magicWordMachine {
  text-align: left;
  font-size: 11px;
}

#magicWordMachine span {
  line-height: 1.75em;
  padding: 3px 4px;
  cursor: default;
}

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

#magicWordMachine .N {
  background-color: #fe8;
}

#magicWordMachine .S {
  background-color: #f88;
}

#magicWordMachine .G {
  background-color: #8f8;
}

#magicWordMachine .M {
  background-color: #88f;
}

#magicWordMachine .old {
  font-weight: normal;
  box-shadow: inset 0 0 16px #000;
  color: #fff;
}

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

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

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 #ddd;
  border-bottom: 1px solid #ddd;
}

#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;
}

.settingsTable td {
  vertical-align: top;
  padding: 4px 4px 4px 0;
}

.settingsTable input[type=text] {
  width: 500px;
}

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

.wordListControls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.wordListControls .spacer {
  flex: 1 1 auto;
}
.wordListControls .selectAllContainer {
  flex: 0 0 auto;
}
.wordListControls .sortByLabel {
  flex: 0 1 auto;
  min-width: 45px;
}

.actions.dropdown {
  position: relative;
}

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

body#wordsPage .actions.dropdown {
  margin-left: 3px;
  margin-right: 3px;
}

.dropdownButtonList {
  position: absolute;
  z-index: 100;
  left: 0;
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 5px #888;
  padding: 8px 10px;
  margin: 0;
  width: 200px;
  display: none;
  border-radius: 4px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.dropdownButtonList label {
  display: block;
  cursor: pointer;
}
.dropdownButtonList small {
  opacity: 0.6;
}
.dropdownButtonList hr {
  border: none;
  border-bottom: 1px solid #ddd;
}
.dropdownButtonList li.shelf {
  padding-left: 22px;
  text-indent: -22px;
}

.dropdown.active .dropdownButtonList {
  display: block;
}

.buttonBar {
  margin-bottom: 10px;
}

.selectOption {
  color: #888;
  margin: 4px 0;
}

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

button.editDescription {
  float: right;
  margin-top: 4px;
}

.glow {
  -webkit-animation-duration: 0.8s;
  -webkit-animation-name: glow;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  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: 10px;
  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;
  }
}
.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;
}

.callout {
  background-color: #31899e;
  color: #fff;
  padding: 15px 20px;
  margin-top: 15px;
  margin-bottom: 10px;
  border-radius: 6px;
}
.callout label {
  color: #fff;
}

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

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

.accountPanelSocialButtons {
  margin-top: 30px;
  margin-left: 32px;
  width: 140px;
}

.topQuoteContainer {
  position: relative;
  margin: 25px 15px 25px 30px;
}

.quoteContainer {
  position: absolute;
  top: 100%;
  margin-top: 35px;
}

.quote {
  display: block;
  color: #111;
  font-size: 90%;
  font-weight: 300;
}

.quote:before {
  display: block;
  padding-left: 10px;
  content: "“";
  font-size: 60px;
  position: absolute;
  top: -8px;
  left: -43px;
  color: rgba(0, 0, 0, 0.4);
  font-family: "Georgia", serif;
}

.source .nolink,
.source {
  display: inline-block;
  font-weight: normal;
  color: #999;
  margin-top: 8px;
  float: right;
  text-align: right;
  font-size: 80%;
}

.source a {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #999;
}

.source a:hover {
  color: #000;
}

.source .nolink:before,
.source:before {
  content: "— ";
}

.mobileOnly {
  display: none;
}

.tabletAndMobileOnly {
  display: none;
}

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

#accountForm .buttonContainer {
  text-align: right;
}
#accountForm table {
  width: 100%;
}

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

@media (min-width: 547px) and (max-width: 754px) {
  .tabletAndMobileOnly {
    display: inline;
    display: initial;
  }
  select.tag {
    padding: 0;
  }
  .tagText {
    padding: 2px 2px;
  }
  .libraryFilters label {
    margin-right: 2px;
    padding: 4px 8px 4px 3px;
  }
  .quoteContainer {
    margin-left: 20px;
  }
  .accountPanelSocialButtons {
    margin-top: 50px;
    margin-left: 28px;
  }
  body.colorDark .payButton,
  .payButton {
    font-size: 90%;
  }
  .plan {
    width: 232px;
    margin: 4px 3px 10px 3px;
    padding: 6px;
    font-size: 90%;
  }
  .libraryViewTabBar li {
    padding: 3px 6px 2px 6px;
    margin: 6px 1px 1px 7px;
    cursor: pointer;
  }
  .libraryViewTabBar li.selected,
  body.notouch .libraryViewTabBar li:hover {
    margin: 6px 0px 0px 6px;
  }
  input[name=translateInput] {
    width: 150px;
  }
  #editCardDialog {
    min-width: 400px;
  }
  .contentBlockContainer {
    width: 263px;
  }
  button.bright {
    font-size: 12px;
  }
  #headerSettings {
    left: 150px;
    font-size: 97%;
    top: 2px;
  }
  body.redesign #headerSettings {
    /*
    left: 130px;
    */
  }
  .languageContainer {
    font-size: 85%;
    margin: 0 8px 0 0;
  }
  #userInfo {
    font-size: 85%;
    bottom: 0;
    top: auto;
    top: initial;
  }
  .bookColumn {
    width: 528px;
    margin-left: -264px;
  }
  .leftColumn {
    position: relative;
    width: 100%;
  }
  .rightColumn {
    width: 100%;
  }
  body#wordsPage .leftColumn {
    width: 100px;
  }
  body#wordsPage .searchLabel {
    width: 100px;
  }
  body#wordsPage .rightColumn {
    width: 428px;
  }
  #wordCardInput {
    font-size: 24px;
  }
  .wordCard {
    font-size: 26px;
    padding: 40px 0;
    width: 240px;
    margin: 10px 0;
  }
  #mainContent {
    font-size: 92%;
  }
  .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;
  }
  .selectBox select {
    font-size: 14px;
  }
  .selectBox:after {
    top: 10px;
  }
  .dropdownList {
    width: 175px;
    left: 0;
  }
  .noPhablet {
    display: none;
  }
  #header .ajaxIndicator {
    right: 65px;
  }
}
@media (max-width: 546px) {
  .tabletAndMobileOnly {
    display: inline;
    display: initial;
  }
  .tag {
    font-size: 75%;
  }
  .fullWidthMobile {
    width: 100%;
  }
  #socialLinks {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
  }
  .libraryFilters .slider {
    font-size: 12px;
    display: inline-block;
    box-sizing: border-box;
    width: 95%;
  }
  #header .ajaxIndicator {
    top: auto;
    bottom: 9px;
    right: 5px;
    width: 16px;
    height: 16px;
  }
  img.myProfilePic {
    height: 100px;
  }
  #uvTab {
    display: none;
  }
  #sortSelect {
    max-width: 125px;
  }
  #logo {
    display: none;
  }
  .table {
    font-size: 80%;
  }
  .plan {
    width: 220px;
    margin: 4px 50px 10px 50px;
    padding: 8px;
  }
  .libraryViewTabBar li {
    padding: 4px 4px 3px 6px;
  }
  #navBar ul {
    height: 28px;
    margin: 5px 0 0 0;
    font-size: 13px;
  }
  #navBar li {
    margin-right: 5px;
  }
  #navBar li a {
    padding: 0 8px;
    line-height: 28px;
  }
  #navBar li a i {
    display: none;
  }
  .libraryTable td.urlDomain {
    max-width: 70px;
  }
  #editCardDialog {
    min-width: 290px;
  }
  .wordTable .column1 {
    min-width: 120px;
  }
  button.bright {
    font-size: 11px;
    padding: 2px 2px 2px 2px;
    margin: 2px;
    top: 0;
  }
  #headerSettings {
    position: relative;
    left: 0;
    top: 0;
  }
  .languageContainer {
    margin: -2px 6px 4px 0;
    font-size: 80%;
  }
  #userInfo {
    margin-top: 13px;
    font-size: 80%;
    max-width: 85px;
    text-align: right;
  }
  #userDropdownList {
    text-align: left;
  }
  #userInfo .avatar {
    bottom: 4px;
    border-width: 1.6px;
    height: 26px;
    width: 26px;
  }
  .bookColumn {
    width: 316px;
    margin-left: -158px;
  }
  .leftColumn {
    position: relative;
    width: 100%;
  }
  .rightColumn {
    width: 100%;
  }
  body#wordsPage .leftColumn {
    display: none;
    width: 100%;
  }
  body#wordsPage .rightColumn {
    display: block;
    width: 100%;
  }
  .contentBlockContainer {
    width: 100%;
    height: 190px;
  }
  .wordCard {
    box-sizing: border-box;
    width: 100%;
    margin: 10px 0;
    padding: 40px 0;
  }
  .wordCard .cornerRibbon {
    font-size: 11px;
    top: 2px;
  }
  #wordCardInput {
    font-size: 20px;
  }
  #mainContent {
    font-size: 85%;
    min-height: 300px;
  }
  .centralDialog {
    max-width: 304px;
    min-width: 280px;
    margin-left: -157px;
    padding: 16px 8px;
    font-size: 85%;
    width: auto;
  }
  .centralDialog.fullScreen {
    top: 20px;
    max-width: 304px;
    margin-left: -152px;
  }
  .selectBox select {
    font-size: 13px;
  }
  .selectBox:after {
    top: 9px;
  }
  .dropdownList {
    width: 162px;
    left: 0;
  }
  #wordReferenceIFrame {
    width: 100%;
  }
  #newCardHint {
    font-size: 11px;
  }
  body#userPage .profilePic {
    width: 80px;
    height: 80px;
  }
  body#wordsPage .searchLabel {
    width: 40px;
  }
  .noMobile {
    display: none !important;
  }
  .mobileOnly {
    display: inline;
    display: initial;
  }
  .sortContainer {
    margin-left: 0;
  }
  .noPhablet {
    display: none;
  }
}