[v-cloak] {
  display: none;
}

html {
  min-height: 100%;
}

body {
  background: darkgray;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.container {
  background: white;
}

.header-role-badge[data-student-view-tooltip] {
  cursor: help;
}

.tippy-box[data-theme~='eigoai'] {
  font-size: 0.86rem;
  line-height: 1.35;
  text-align: left;
}

.tippy-box[data-theme~='eigoai'] .tippy-content {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.account-auth-shell {
  padding: 1.25rem 0 2.5rem;
}

.account-auth-card {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
}

.account-auth-card .card-body {
  padding: 2rem;
}

.account-auth-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.account-auth-header {
  text-align: center;
}

.account-auth-header h1 {
  margin: 0;
  color: #172033;
  font-size: 1.85rem;
  font-weight: 750;
  line-height: 1.2;
}

.account-auth-header p {
  max-width: 28rem;
  margin: 0.6rem auto 0;
  color: #5d6b7b;
  font-size: 1rem;
  line-height: 1.45;
}

.account-auth-options,
.account-auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.account-auth-section-title {
  margin: 0;
  color: #344054;
  font-size: 0.95rem;
  font-weight: 700;
}

.account-auth-provider {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.account-auth-ms-button {
  align-items: center;
  align-self: center;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  width: 320px;
  max-width: 100%;
}

.account-auth-ms-button:hover,
.account-auth-ms-button:focus-visible {
  border-color: #9aa4b2;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  outline: 0;
}

.account-auth-ms-button img {
  display: block;
  height: auto;
  max-height: 40px;
  max-width: 100%;
}

.account-auth-divider {
  align-items: center;
  color: #697586;
  display: flex;
  font-size: 0.88rem;
  gap: 0.85rem;
}

.account-auth-divider::before,
.account-auth-divider::after {
  background: #e3e8ef;
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

.account-auth-form .form-label {
  color: #344054;
  font-weight: 650;
  margin-bottom: 0.35rem;
}

.account-auth-form .form-control {
  min-height: 46px;
}

.account-auth-note {
  display: block;
  line-height: 1.35;
}

.account-auth-submit {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.35rem;
  min-height: 48px;
  width: 100%;
}

.account-auth-help-card {
  border-color: #d9e2ec;
  border-radius: 8px;
  margin-top: 1rem;
}

.account-auth-help-card .card-header {
  background: #f8fafc;
  border-bottom: 0;
  padding: 0;
}

.account-auth-help-toggle {
  color: #344054;
  font-weight: 650;
  padding: 1rem 1.25rem;
  text-decoration: none;
}

.account-auth-help-toggle:hover,
.account-auth-help-toggle:focus {
  color: #0d6efd;
  text-decoration: none;
}

.account-page-card {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.account-page-card > .card-body {
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.account-page {
  color: #243041;
  --dashboard-avatar-column-width: 220px;
  --dashboard-avatar-rail-min-height: 330px;
  --dashboard-avatar-width: 190px;
  --dashboard-avatar-height: 285px;
  --dashboard-avatar-mobile-width: 104px;
  --dashboard-avatar-mobile-height: 126px;
}

.account-tabs {
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.account-tabs .nav-link {
  align-items: center;
  border: 0;
  border-radius: 8px;
  color: #526172;
  display: inline-flex;
  gap: 0.4rem;
  font-weight: 650;
  min-height: 42px;
  padding: 0.6rem 0.85rem;
}

.account-tabs .nav-link:hover,
.account-tabs .nav-link:focus-visible {
  background: #f4f7fb;
  color: #172033;
}

.account-tabs .nav-link.active {
  background: #e7f1ff;
  color: #0b5ed7;
}

.account-section {
  min-width: 0;
}

.account-section--with-avatar {
  align-items: start;
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  grid-template-columns: minmax(150px, var(--dashboard-avatar-column-width)) minmax(0, 1fr);
}

.account-section-avatar-rail {
  align-items: flex-start;
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  justify-content: center;
  min-height: var(--dashboard-avatar-rail-min-height);
  overflow: hidden;
  padding: 0.8rem 0.6rem 0;
}

.account-section-panel {
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  min-width: 0;
  overflow: hidden;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.account-section-header {
  border-bottom: 1px solid #dce3ea;
  margin-bottom: 1.15rem;
  padding: 0 0 1rem;
}

.account-section-content {
  padding: 0;
}

.account-section-content > :last-child {
  margin-bottom: 0;
}

.account-section-header h2 {
  align-items: center;
  color: #172033;
  display: inline-flex;
  gap: 0.55rem;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 750;
  line-height: 1.15;
  margin: 0;
}

.account-section-header h2 .bi {
  color: #0d6efd;
  font-size: 0.92em;
}

.account-section-avatar {
  display: block;
  height: var(--dashboard-avatar-height);
  object-fit: contain;
  object-position: top center;
  width: var(--dashboard-avatar-width);
}

.account-section--with-avatar .badge {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.2;
  margin: 0.15rem 0.2rem 0.15rem 0;
  min-height: 30px;
  padding: 0.35rem 0.65rem;
  white-space: normal;
}

.account-section--with-avatar .badge .bi {
  font-size: 0.95em;
}

.account-detail-list {
  border-radius: 0;
  overflow: visible;
}

.account-detail-list .list-group-item {
  background: transparent;
  border-color: #e1e7ee;
  border-left: 0;
  border-right: 0;
  padding: 1rem 0;
}

.account-detail-list .list-group-item:first-child {
  border-top: 0;
}

.account-detail-list .list-group-item:last-child {
  border-bottom: 0;
}

.account-detail-list .list-group-item:nth-child(odd) {
  background: transparent;
}

.account-settings-group {
  background: transparent;
  border: 0;
  border-top: 1px solid #e1e7ee;
  border-radius: 0;
  margin-bottom: 0;
  padding: 1.15rem 0;
}

.account-settings-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.account-settings-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.account-settings-group--danger {
  background: transparent;
  border-color: #f1c4c4;
}

.account-settings-title {
  color: #172033;
  margin-bottom: 0.75rem;
}

.account-settings-group .form-control,
.account-settings-group .form-select {
  min-height: 44px;
}

.bio-data {
  width: 100%;
}

.bio-data-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-width: 0;
}

.bio-data-edit-btn {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  min-height: 34px;
}

.bio-data-summary-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.bio-data-chip {
  align-items: center;
  background: #f4f7fb;
  border: 1px solid #dce3ea;
  border-radius: 999px;
  color: #344054;
  display: inline-flex;
  gap: 0.3rem;
  font-size: 0.88rem;
  line-height: 1.2;
  min-height: 30px;
  padding: 0.25rem 0.55rem;
}

.bio-data-chip .bi {
  color: #0d6efd;
}

.bio-modal-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, 0.58);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 1rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1050;
}

.bio-modal {
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  max-height: min(880px, calc(100vh - 2rem));
  max-width: 880px;
  overflow: hidden;
  width: min(100%, 880px);
}

.bio-modal-hero {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #dce3ea;
  padding: 1.25rem 1.5rem;
}

.bio-modal-hero__copy {
  max-width: 680px;
}

.bio-modal-kicker {
  color: #0b5ed7;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.bio-modal h2 {
  color: #172033;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 750;
  line-height: 1.15;
  margin: 0 0 0.45rem;
}

.bio-modal-hero p:last-child {
  color: #526172;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}

.bio-modal-body {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

.bio-modal-error {
  align-items: center;
  display: flex;
  gap: 0.55rem;
}

.bio-form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bio-form-field {
  min-width: 0;
}

.bio-form-field .form-label {
  align-items: center;
  color: #172033;
  display: inline-flex;
  gap: 0.4rem;
  font-weight: 650;
}

.bio-form-field .form-label .bi {
  color: #0d6efd;
}

.bio-form-field .form-select {
  min-height: 44px;
}

.bio-role-options {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bio-role-option {
  align-items: center;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
}

.bio-role-option.is-selected {
  background: #e7f1ff;
  border-color: #9ec5fe;
  color: #0b5ed7;
  font-weight: 650;
}

.bio-role-option input {
  margin: 0;
}

.bio-role-options.is-invalid .bio-role-option {
  border-color: #dc3545;
}

.bio-modal-actions {
  align-items: center;
  background: #fff;
  border-top: 1px solid #dce3ea;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
}

.report-page {
  align-items: start;
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  grid-template-columns: minmax(150px, var(--dashboard-avatar-column-width, 220px)) minmax(0, 1fr);
  --dashboard-avatar-column-width: 220px;
  --dashboard-avatar-rail-min-height: 330px;
  --dashboard-avatar-width: 190px;
  --dashboard-avatar-height: 285px;
  --dashboard-avatar-mobile-width: 104px;
  --dashboard-avatar-mobile-height: 126px;
}

.report-page-avatar-rail {
  align-items: center;
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: var(--dashboard-avatar-rail-min-height);
  overflow: hidden;
  padding: 0.85rem 0.65rem 0;
}

.report-page-avatar {
  display: block;
  height: var(--dashboard-avatar-height);
  object-fit: contain;
  object-position: top center;
  width: var(--dashboard-avatar-width);
}

.report-page-card {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  min-width: 0;
}

.report-page-card > .card-body {
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.report-page-header {
  border-bottom: 1px solid #dce3ea;
  margin-bottom: 1.15rem;
  padding-bottom: 1rem;
}

.report-page-kicker {
  color: #0b5ed7;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.report-page-header h2 {
  align-items: center;
  color: #172033;
  display: inline-flex;
  gap: 0.55rem;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 750;
  line-height: 1.15;
  margin: 0;
}

.report-page-header h2 .bi {
  color: #0d6efd;
  font-size: 0.92em;
}

.error-page {
  align-items: center;
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1040px;
  padding: clamp(0.75rem, 2vw, 1.25rem) 0;
}

.error-page-visual {
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  justify-self: center;
  max-width: 360px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.error-page-avatar {
  display: block;
  height: auto;
  width: 100%;
}

.error-page-code {
  color: #172033;
  font-size: clamp(4rem, 10vw, 6.4rem);
  font-weight: 850;
  left: 50%;
  line-height: 0.9;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 0 #fff, 0 6px 20px rgba(15, 23, 42, 0.12);
  top: 66%;
  transform: translate(-50%, -50%);
  width: 72%;
}

.error-page-panel {
  background: #fff;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.error-page-kicker {
  color: #0b5ed7;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.error-page-panel h1 {
  align-items: center;
  color: #172033;
  display: inline-flex;
  gap: 0.6rem;
  font-size: clamp(1.65rem, 3.5vw, 2.4rem);
  font-weight: 780;
  line-height: 1.12;
  margin: 0 0 1rem;
}

.error-page-panel h1 .bi {
  color: #0d6efd;
  font-size: 0.9em;
}

.error-page-message {
  color: #344054;
  font-size: 1.08rem;
  line-height: 1.55;
}

.error-page-message > :last-child,
.error-page-message p:last-child {
  margin-bottom: 0;
}

.error-page-support {
  color: #667085;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0.65rem 0 0;
}

.error-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.35rem;
}

.error-page-actions .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
}

.error-page-followup {
  border-top: 1px solid #dce3ea;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
}

.error-page-followup-title {
  color: #172033;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.error-page-followup .list-group-item {
  cursor: pointer;
}

@media (max-width: 576px) {
  .account-auth-shell {
    padding-top: 0.75rem;
  }

  .account-auth-card .card-body {
    padding: 1.35rem;
  }

  .account-auth-header h1 {
    font-size: 1.55rem;
  }

  .account-page-card > .card-body {
    padding: 0.85rem;
  }

  .account-page,
  .report-page {
    --dashboard-avatar-mobile-width: 104px;
    --dashboard-avatar-mobile-height: 126px;
  }

  .account-tabs {
    border-bottom: 0;
  }

  .account-tabs .nav-link {
    font-size: 0.92rem;
    min-height: 40px;
    padding: 0.5rem 0.65rem;
  }

  .account-section--with-avatar {
    gap: 0.75rem;
    grid-template-columns: 1fr;
  }

  .account-section-avatar-rail {
    align-items: center;
    flex-direction: row;
    justify-content: center;
    min-height: 0;
    padding: 0.65rem;
  }

  .account-section-header {
    padding: 0 0 0.85rem;
  }

  .account-section-header h2 {
    font-size: 1.45rem;
  }

  .account-section-content {
    padding: 0;
  }

  .account-section-avatar {
    height: var(--dashboard-avatar-mobile-height);
    width: var(--dashboard-avatar-mobile-width);
  }

  .bio-data-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .bio-modal-backdrop {
    align-items: stretch;
    padding: 0.75rem;
  }

  .bio-modal {
    max-height: calc(100vh - 1.5rem);
  }

  .bio-modal-hero {
    padding: 1rem;
  }

  .bio-modal-body {
    padding: 1rem;
  }

  .bio-form-grid {
    grid-template-columns: 1fr;
  }

  .bio-role-options {
    grid-template-columns: 1fr;
  }

  .bio-modal-actions {
    padding: 0.85rem 1rem;
  }

  .bio-modal-actions .btn {
    flex: 1 1 0;
  }

  .report-page {
    gap: 0.75rem;
    grid-template-columns: 1fr;
  }

  .report-page-avatar-rail {
    flex-direction: row;
    justify-content: center;
    min-height: 0;
    padding: 0.65rem;
  }

  .report-page-avatar {
    height: var(--dashboard-avatar-mobile-height);
    width: var(--dashboard-avatar-mobile-width);
  }

  .report-page-card > .card-body {
    padding: 0.85rem;
  }

  .report-page-header {
    margin-bottom: 0.9rem;
    padding-bottom: 0.85rem;
  }

  .report-page-header h2 {
    font-size: 1.45rem;
  }

  .error-page {
    grid-template-columns: 1fr;
  }

  .error-page-visual {
    max-width: 270px;
  }

  .error-page-panel {
    padding: 1.15rem;
  }

  .error-page-panel h1 {
    font-size: 1.55rem;
  }

  .error-page-actions .btn {
    justify-content: center;
    width: 100%;
  }
}

.level-switcher-panel {
  background: #f8fbff;
  border: 1px solid #cfe2ff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1rem;
  width: 100%;
}

.level-switcher-inner {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr);
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

.level-switcher-heading span {
  color: #0d6efd;
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.level-switcher-heading {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.level-switcher-options {
  background: #fff;
  border: 1px solid #b6d4fe;
  border-radius: 8px;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.35rem;
}

.level-switcher-option {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #084298;
  display: flex;
  flex-direction: column;
  font-size: 1.05rem;
  font-weight: 800;
  gap: 0.16rem;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  text-align: center;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.level-switcher-option small {
  color: #0d6efd;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
}

.level-switcher-option:hover,
.level-switcher-option:focus-visible {
  background: #e7f1ff;
  color: #052c65;
  outline: none;
}

.level-switcher-option:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.level-switcher-option.active {
  background: #0d6efd;
  color: #fff;
}

.level-switcher-option.active small {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 800;
}

.lesson-card {
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  margin: 0.5rem 0.5rem 1.5rem;
  min-height: 560px;
  text-align: left;
  vertical-align: top;
  width: calc(33.333% - 1.25rem);
}

.lesson-card:hover {
  filter: drop-shadow(2px 2px 5px #000);
}

.lesson-card-image {
  aspect-ratio: 1 / 1;
  background: #f8f9fa;
  border: 1px solid darkgray;
  object-fit: contain;
  width: 100%;
}

.lesson-card-body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: 19rem;
  padding-bottom: 0.45rem;
}

.lesson-card-title,
.lesson-card-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.lesson-card-title {
  -webkit-line-clamp: 2;
  line-height: 1.3;
  margin-bottom: 0.08rem;
}

.lesson-card-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.lesson-card-preview {
  -webkit-line-clamp: 5;
  height: 6.9em;
  line-height: 1.38;
  margin-bottom: 0.25rem;
}

.lesson-card-categories {
  height: 4.45rem;
  margin-top: auto;
  position: relative;
  overflow: hidden;
}

.lesson-category-badge {
  font-size: 0.82rem;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.35em 0.6em;
}

.lesson-activity-footer {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin-top: auto;
  padding: 0.5rem;
}

.lesson-activity-status {
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  display: inline-flex;
  flex: 1 1 0;
  font-size: 1rem;
  gap: 0.12rem;
  justify-content: center;
  min-height: 2.3rem;
  min-width: 0;
  padding: 0.25rem 0.15rem;
}

.lesson-magazine,
.lesson-browse {
  background: #fff;
  border-bottom: 1px solid #d8dde3;
  border-top: 3px solid #15171a;
  text-align: left;
}

.lesson-library-cta {
  background: #fff;
  padding: 0.45rem 0 0.8rem;
}

.lesson-library-cta-button {
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 6px;
  color: #343a40;
  display: flex;
  font-size: 0.98rem;
  font-weight: 800;
  gap: 0.5rem;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  width: 100%;
}

.lesson-library-cta-button:hover,
.lesson-library-cta-button:focus-visible {
  background: #e9ecef;
  border-color: #adb5bd;
  color: #212529;
  outline: none;
}

.lesson-magazine {
  min-height: calc(100vh - 230px);
  padding: 1.4rem 0 2rem;
}

.lesson-sample-library {
  border-bottom: 0;
  min-height: 0;
  padding-bottom: 0.25rem;
}

.lesson-sample-library .lesson-cover-section {
  padding-bottom: 0.5rem;
}

.lesson-browse {
  border-top: 1px solid #d8dde3;
  padding: 1.25rem 0 0.3rem;
}

.lesson-browse-header {
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.lesson-browse-header .lesson-section-heading {
  margin-bottom: 0;
}

.lesson-magazine-header,
.lesson-magazine-actions,
.lesson-magazine-header-actions,
.lesson-browse-header,
.lesson-section-heading,
.lesson-missed-item,
.lesson-rail-item,
.lesson-cover-card,
.lesson-sample-card,
.lesson-category-shelf-header,
.lesson-category-sample,
.lesson-fact,
.lesson-avatar-prompt {
  align-items: center;
  display: flex;
}

.lesson-magazine-header {
  border-bottom: 1px solid #d8dde3;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
}

.lesson-magazine-header h1 {
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
}

.lesson-magazine-header-actions {
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.lesson-magazine-kicker {
  color: #b13a2f;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.lesson-magazine-level {
  border: 1px solid #15171a;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
}

.lesson-magazine-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
}

.lesson-feature {
  cursor: pointer;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(220px, 0.95fr) minmax(0, 1.05fr);
  min-height: 340px;
  padding: 1rem;
}

.lesson-feature,
.lesson-cover-card,
.lesson-sample-card,
.lesson-rail-item,
.lesson-fact,
.lesson-missed-item,
.lesson-category-sample,
.lesson-classroom-pick,
.lesson-pronunciation-word,
.lesson-avatar-prompt {
  border-radius: 6px;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.lesson-feature:hover,
.lesson-cover-card:hover,
.lesson-sample-card:hover,
.lesson-rail-item:hover,
.lesson-fact:hover,
.lesson-missed-item:hover,
.lesson-category-sample:hover,
.lesson-classroom-pick:hover,
.lesson-pronunciation-word:hover,
.lesson-avatar-prompt:hover,
.lesson-feature:focus-visible,
.lesson-cover-card:focus-visible,
.lesson-sample-card:focus-visible,
.lesson-rail-item:focus-visible,
.lesson-fact:focus-visible,
.lesson-missed-item:focus-visible,
.lesson-category-sample:focus-visible,
.lesson-classroom-pick:focus-visible,
.lesson-pronunciation-word:focus-visible,
.lesson-avatar-prompt:focus-visible {
  background: #f2eadf;
  outline: none;
}

.lesson-feature:focus-visible,
.lesson-cover-card:focus-visible,
.lesson-sample-card:focus-visible,
.lesson-rail-item:focus-visible,
.lesson-fact:focus-visible,
.lesson-missed-item:focus-visible,
.lesson-category-sample:focus-visible,
.lesson-classroom-pick:focus-visible,
.lesson-pronunciation-word:focus-visible,
.lesson-avatar-prompt:focus-visible {
  box-shadow: 0 0 0 2px rgba(177, 58, 47, 0.18);
}

.lesson-feature img,
.lesson-cover-card img,
.lesson-sample-card img,
.lesson-rail-item img,
.lesson-missed-item img,
.lesson-category-sample img {
  background: #f5f6f7;
  border: 1px solid #d8dde3;
  object-fit: cover;
}

.lesson-feature img {
  aspect-ratio: 4 / 3;
  height: 100%;
  width: 100%;
}

.lesson-cover-section {
  border-top: 1px solid #d8dde3;
  padding: 1.75rem 0 1.95rem;
  width: 100%;
}

.lesson-cover-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.lesson-cover-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-cover-card,
.lesson-sample-card {
  align-items: stretch;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  gap: 1rem;
  min-width: 0;
  padding: 1.15rem;
  text-align: left;
  width: 100%;
}

.lesson-cover-card img,
.lesson-sample-card img {
  aspect-ratio: 4 / 3;
  flex: 0 0 42%;
  width: 42%;
}

.lesson-cover-copy {
  min-width: 0;
}

.lesson-cover-copy h3 {
  color: #15171a;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 0.28rem;
}

.lesson-cover-copy time {
  color: #0d6efd;
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.lesson-cover-copy p {
  color: #636a73;
  display: -webkit-box;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.lesson-feature-copy {
  align-self: center;
}

.lesson-feature h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 0.7rem;
}

.lesson-feature-copy p:not(.lesson-magazine-kicker),
.lesson-fact p {
  color: #33383f;
  line-height: 1.55;
}

.lesson-magazine-skeleton {
  pointer-events: none;
}

.lesson-magazine-skeleton .lesson-feature,
.lesson-magazine-skeleton .lesson-rail-item,
.lesson-magazine-skeleton .lesson-fact,
.lesson-magazine-skeleton .lesson-category-sample,
.lesson-magazine-skeleton .lesson-classroom-pick,
.lesson-magazine-skeleton .lesson-pronunciation-word,
.lesson-magazine-skeleton .lesson-avatar-prompt {
  cursor: default;
}

.lesson-magazine-skeleton .lesson-feature:hover,
.lesson-magazine-skeleton .lesson-rail-item:hover,
.lesson-magazine-skeleton .lesson-fact:hover,
.lesson-magazine-skeleton .lesson-category-sample:hover,
.lesson-magazine-skeleton .lesson-classroom-pick:hover,
.lesson-magazine-skeleton .lesson-pronunciation-word:hover,
.lesson-magazine-skeleton .lesson-avatar-prompt:hover {
  background: transparent;
}

.lesson-skeleton-component {
  animation: lesson-skeleton-shimmer 1.35s ease-in-out infinite;
  background: linear-gradient(90deg, #eceff1 0%, #f8f9fa 45%, #eceff1 90%);
  background-size: 220% 100%;
  border-radius: 6px;
  display: block;
  width: 100%;
}

.lesson-skeleton-heading-block {
  height: 1.25rem;
  width: 240px;
}

.lesson-skeleton-heading-wide {
  max-width: 420px;
  width: 48%;
}

.lesson-skeleton-cover-card-block {
  min-height: 156px;
}

.lesson-skeleton-fact-block {
  height: 178px;
}

.lesson-skeleton-classroom-block {
  min-height: 220px;
}

.lesson-skeleton-pronunciation-block {
  height: 4.6rem;
}

.lesson-skeleton-category-name-block {
  height: 1.55rem;
  max-width: 210px;
}

.lesson-skeleton-category-action-block {
  height: 2.55rem;
  max-width: 140px;
}

.lesson-skeleton-category-sample-block {
  min-height: 210px;
}

@keyframes lesson-skeleton-shimmer {
  0% {
    background-position: 110% 0;
  }

  100% {
    background-position: -110% 0;
  }
}

.lesson-magazine-actions {
  flex-wrap: wrap;
  gap: 0.7rem;
}

.lesson-feature-rail {
  border-left: 1px solid #d8dde3;
  display: grid;
  gap: 0;
  padding-left: 1rem;
}

.lesson-missed-rail .lesson-section-heading {
  margin-bottom: 0.2rem;
}

.lesson-missed-rail .lesson-section-heading h2 {
  color: #b13a2f;
  font-size: 1.26rem;
}

.lesson-rail-item {
  border-bottom: 1px solid #d8dde3;
  cursor: pointer;
  gap: 0.8rem;
  padding: 1rem;
}

.lesson-rail-item + .lesson-rail-item {
  margin-top: 0.15rem;
}

.lesson-rail-item:last-child {
  border-bottom: 0;
}

.lesson-rail-item img {
  aspect-ratio: 1 / 1;
  flex: 0 0 104px;
  width: 104px;
}

.lesson-rail-item h3,
.lesson-missed-item h3 {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 0.3rem;
}

.lesson-rail-item p {
  color: #636a73;
  display: -webkit-box;
  font-size: 0.84rem;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lesson-text-link {
  background: transparent;
  border: 0;
  color: #0b5c8a;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 0;
  text-decoration: underline;
}

.lesson-magazine-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 1.85rem;
  padding-bottom: 1.95rem;
}

.lesson-magazine-wide-row {
  border-top: 1px solid #d8dde3;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 1.85rem;
  padding: 1.85rem 0 1.95rem;
}

.lesson-section-heading {
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.lesson-section-heading h2 {
  font-size: 1.28rem;
  font-weight: 800;
  margin: 0;
}

.lesson-section-heading .bi {
  color: #b13a2f;
}

.lesson-facts {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-facts .lesson-section-heading {
  grid-column: 1 / -1;
}

.lesson-fact {
  align-items: flex-start;
  border-top: 1px solid #15171a;
  cursor: pointer;
  gap: 0.9rem;
  padding: 1.1rem;
}

.lesson-fact img {
  align-self: flex-end;
  background: transparent;
  border: 0;
  border-radius: 0;
  flex: 0 0 112px;
  height: 158px;
  object-fit: contain;
  object-position: center bottom;
  width: 112px;
}

.lesson-fact .lesson-speech-bubble {
  background: #fffdf8;
  border: 2px solid #15171a;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-left: 0.35rem;
  min-height: 186px;
  padding: 1rem 1.1rem;
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.lesson-fact .lesson-speech-bubble:before {
  background: transparent;
  border: 0;
  border-bottom: 15px solid transparent;
  border-right: 28px solid #15171a;
  border-top: 15px solid transparent;
  bottom: 84px;
  height: 0;
  left: -28px;
  top: auto;
  transform: none;
  width: 0;
}

.lesson-fact .lesson-speech-bubble:after {
  border-bottom: 12px solid transparent;
  border-right: 24px solid #fffdf8;
  border-top: 12px solid transparent;
  bottom: 87px;
  content: "";
  height: 0;
  left: -24px;
  position: absolute;
  transition: border-right-color 0.16s ease;
  width: 0;
}

.lesson-fact:hover,
.lesson-fact:focus-visible {
  background: transparent;
}

.lesson-fact:hover .lesson-speech-bubble,
.lesson-fact:focus-visible .lesson-speech-bubble {
  background: #f2eadf;
  box-shadow: 0 0 0 2px rgba(177, 58, 47, 0.12);
}

.lesson-fact:hover .lesson-speech-bubble:after,
.lesson-fact:focus-visible .lesson-speech-bubble:after {
  border-right-color: #f2eadf;
}

.lesson-fact .lesson-speech-bubble p {
  align-items: center;
  display: grid;
  flex: 1 1 auto;
  margin-bottom: 0;
}

.lesson-fact .lesson-speech-bubble .lesson-fact-copy {
  min-height: 0;
  width: 100%;
}

.lesson-fact .lesson-speech-bubble .lesson-fact-copy--short {
  font-size: 1.14rem;
  line-height: 1.38;
}

.lesson-fact .lesson-speech-bubble .lesson-fact-copy--medium {
  font-size: 1.04rem;
  line-height: 1.35;
}

.lesson-fact .lesson-speech-bubble .lesson-fact-copy--full {
  font-size: 0.94rem;
  line-height: 1.32;
}

.lesson-fact .lesson-speech-bubble span {
  border-top: 1px solid #e7d7c3;
  flex: 0 0 auto;
  margin: 0.65rem 0 0;
  padding-top: 0.5rem;
}

.lesson-missed {
  border-left: 1px solid #d8dde3;
  padding-left: 1rem;
}

.lesson-missed-item {
  cursor: pointer;
  gap: 0.75rem;
  padding: 1rem;
}

.lesson-missed-item + .lesson-missed-item {
  border-top: 1px solid #eef0f2;
}

.lesson-missed-item img {
  aspect-ratio: 1 / 1;
  flex: 0 0 72px;
  width: 72px;
}

.lesson-missed-item p {
  color: #636a73;
  display: -webkit-box;
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lesson-category-shelves,
.lesson-classroom-picks,
.lesson-pronunciation-desk,
.lesson-avatar-desk {
  min-width: 0;
}

.lesson-classroom-picks {
  background: #f8f9fa;
  border: 1px solid #d8dde3;
  border-top: 4px solid #15171a;
  padding: 1.15rem;
  width: 100%;
}

.lesson-classroom-pick-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-classroom-pick {
  align-items: flex-start;
  background: #fff;
  border: 1px solid #d8dde3;
  border-top: 0;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  min-height: 250px;
  min-width: 0;
  padding: 1.45rem;
  text-align: left;
}

.lesson-classroom-pick > .bi {
  align-items: center;
  background: #f8f0e8;
  border-radius: 8px;
  color: #b13a2f;
  display: inline-flex;
  flex: 0 0 46px;
  font-size: 1.35rem;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.lesson-classroom-pick-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 220px;
  min-width: 0;
}

.lesson-classroom-pick span,
.lesson-classroom-pick strong {
  display: block;
}

.lesson-classroom-pick span {
  align-self: flex-start;
  background: #fff4ef;
  border: 1px solid #efc9bd;
  color: #9f2f25;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 0.9rem;
  padding: 0.42rem 0.58rem;
  text-transform: uppercase;
}

.lesson-classroom-pick p {
  color: #252b31;
  display: -webkit-box;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 1rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.lesson-classroom-pick strong {
  color: #4c535c;
  border-top: 1px solid #e4e8ed;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  margin-top: auto;
  padding-top: 0.85rem;
}

.app-footer-spacer {
  flex: 0 0 auto;
  margin-top: auto;
  min-height: 50px;
}

.app-study-cta {
  align-items: center;
  background: #f8fbff;
  border: 1px solid #b6d4fe;
  border-radius: 8px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 1.5rem 0 50px;
  padding: 1.25rem;
}

.app-study-cta h2 {
  color: #084298;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.app-study-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.app-footer {
  align-items: center;
  background: #5f6772;
  border-top: 1px solid #4f5863;
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  font-size: 0.9rem;
  font-weight: 700;
  justify-content: center;
  margin-top: 0;
  min-height: 100px;
  padding: 1rem;
  position: relative;
  text-align: center;
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  width: auto;
}

.app-footer a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.lesson-category-shelf {
  border-top: 1px solid #d8dde3;
  padding: 1rem;
  width: 100%;
}

.lesson-category-heading {
  align-items: center;
  justify-content: space-between;
}

.lesson-category-heading-title {
  align-items: center;
  display: flex;
}

.lesson-category-heading-title {
  gap: 0.45rem;
}

.lesson-category-shelf-header {
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.lesson-category-name {
  background: transparent;
  border: 0;
  color: #b13a2f;
  font-size: 1.52rem;
  font-weight: 900;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
}

.lesson-category-samples {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-category-sample {
  align-items: stretch;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.2rem;
  text-align: left;
}

.lesson-category-explore {
  align-items: center;
  background: #fff;
  border: 1px solid #b6d4fe;
  border-radius: 8px;
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0.5rem 0.8rem;
}

.lesson-category-explore span,
.lesson-category-explore .bi {
  color: #0b5c8a;
  text-align: center;
}

.lesson-category-explore .bi {
  font-size: 1.25rem;
}

.lesson-category-explore:hover,
.lesson-category-explore:focus-visible {
  background: #e7f1ff;
  border-color: #86b7fe;
  outline: none;
}

.lesson-category-sample img {
  aspect-ratio: 4 / 3;
  flex: 0 0 146px;
  width: 146px;
}

.lesson-category-sample span {
  color: #15171a;
  display: -webkit-box;
  font-size: 1.34rem;
  font-weight: 800;
  line-height: 1.22;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lesson-category-sample time {
  color: #0d6efd;
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 0.2rem;
  text-transform: uppercase;
}

.lesson-category-explore span {
  color: #0b5c8a;
  font-size: 0.95rem;
  font-weight: 900;
  text-align: center;
}

.lesson-category-view-more {
  align-items: center;
  display: inline-flex;
  font-weight: 800;
  gap: 0.45rem;
  justify-content: center;
  margin: 1rem auto 0;
  min-height: 3rem;
  width: 100%;
}

.lesson-pronunciation-desk {
  border-top: 1px solid #d8dde3;
  margin-top: 1.85rem;
  padding-top: 1.85rem;
}

.lesson-pronunciation-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-pronunciation-word {
  background: #fff;
  border: 1px solid #d8dde3;
  border-left: 4px solid #b13a2f;
  cursor: pointer;
  min-width: 0;
  padding: 1rem;
  text-align: left;
}

.lesson-pronunciation-word.has-audio {
  display: grid;
  gap: 0.45rem 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.lesson-pronunciation-word strong,
.lesson-pronunciation-word span {
  display: block;
  overflow: hidden;
}

.lesson-pronunciation-word.has-audio strong,
.lesson-pronunciation-word.has-audio span {
  grid-column: 2;
}

.lesson-pronunciation-audio {
  align-items: center;
  align-self: start;
  background: #f8f0e8;
  border: 1px solid #c98d82;
  border-radius: 999px;
  color: #b13a2f;
  display: inline-flex;
  grid-row: 1 / span 2;
  height: 34px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
  width: 34px;
}

.lesson-pronunciation-audio:hover,
.lesson-pronunciation-audio:focus-visible,
.lesson-pronunciation-audio.is-playing {
  background: #b13a2f;
  border-color: #b13a2f;
  color: #fff;
  outline: none;
}

.lesson-pronunciation-audio:hover {
  transform: translateY(-1px);
}

.lesson-pronunciation-audio.is-loading i {
  animation: lesson-pronunciation-audio-spin 0.8s linear infinite;
}

@keyframes lesson-pronunciation-audio-spin {
  to {
    transform: rotate(360deg);
  }
}

.lesson-pronunciation-word strong {
  color: #15171a;
  display: -webkit-box;
  font-size: 1rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lesson-pronunciation-word span {
  color: #636a73;
  font-size: 0.84rem;
  line-height: 1.25;
  margin-top: 0.3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-avatar-desk {
  border-top: 1px solid #d8dde3;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.lesson-avatar-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-avatar-prompt {
  align-items: flex-start;
  cursor: pointer;
  gap: 0.8rem;
  min-width: 0;
  padding: 1rem;
}

.lesson-avatar-prompt img {
  aspect-ratio: 1 / 1;
  background: #f5f6f7;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  flex: 0 0 104px;
  object-fit: cover;
  object-position: center top;
  width: 104px;
}

.lesson-speech-bubble {
  background: #f8f9fa;
  border: 1px solid #d8dde3;
  border-radius: 8px;
  min-width: 0;
  padding: 0.85rem;
  position: relative;
}

.lesson-speech-bubble:before {
  background: #f8f9fa;
  border-bottom: 1px solid #d8dde3;
  border-left: 1px solid #d8dde3;
  content: "";
  height: 14px;
  left: -8px;
  position: absolute;
  top: 20px;
  transform: rotate(45deg);
  width: 14px;
}

.lesson-speech-bubble span {
  color: #b13a2f;
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.lesson-speech-bubble p {
  color: #33383f;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

@media (max-width: 991.98px) {
  .lesson-magazine-grid,
  .lesson-magazine-row,
  .lesson-magazine-wide-row,
  .lesson-cover-grid,
  .lesson-avatar-grid,
  .lesson-classroom-pick-grid,
  .lesson-pronunciation-grid {
    grid-template-columns: 1fr;
  }

  .lesson-feature-rail,
  .lesson-missed {
    border-left: 0;
    padding-left: 0;
  }

  .lesson-feature-rail {
    border-top: 1px solid #d8dde3;
    padding-top: 1rem;
  }

  .lesson-card {
    width: calc(50% - 1.25rem);
  }
}

@media (max-width: 767.98px) {
  .definition-popup-word-row,
  .definition-popup-note {
    flex-direction: column;
  }

  .definition-popup-word-row {
    align-items: stretch;
  }

  .definition-popup-word-line {
    align-items: flex-start;
  }

  .level-switcher-inner {
    grid-template-columns: 1fr;
  }

  .word-card-grid {
    grid-template-columns: 1fr;
  }

  .level-switcher-options {
    grid-template-columns: 1fr;
  }

  .level-switcher-option {
    min-height: 2.8rem;
  }

  .lesson-magazine-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .lesson-magazine-header-actions {
    justify-content: flex-start;
  }

  .lesson-magazine-header h1,
  .lesson-feature h2 {
    font-size: 1.7rem;
  }

  .lesson-feature,
  .lesson-cover-card,
  .lesson-sample-card,
  .lesson-facts {
    grid-template-columns: 1fr;
  }

  .lesson-cover-card,
  .lesson-sample-card {
    align-items: stretch;
    flex-direction: column;
  }

  .lesson-cover-card img,
  .lesson-sample-card img {
    flex: 0 0 auto;
    width: 100%;
  }

  .lesson-category-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .lesson-library-cta-button {
    font-size: 1.05rem;
  }

  .app-study-cta {
    align-items: stretch;
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }

  .app-study-cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .lesson-category-samples {
    grid-template-columns: 1fr;
  }

  .lesson-category-explore {
    align-self: stretch;
    min-height: 88px;
  }

  .lesson-feature {
    min-height: 0;
  }

  .lesson-feature img {
    height: auto;
  }

  .lesson-card {
    min-height: 0;
    width: calc(100% - 1rem);
  }
}

.preserve-newlines {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sentence {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid lightgray;
}

.word {
  margin-right: 5px;
  color: green;
  display: inline-block;
}

.phone {
  font-size: 24px;
  margin-right: 5px;
  display: inline-block;
}

.wordRed {
  color: red;
}

.wordOrange {
  color: orange;
}

.wordGreen {
  color: green;
}

.phoneRed {
  color: red;
}

.phoneOrange {
  color: orange;
}

.phoneGreen {
  color: green;
}

#radial-scores-container {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

.gapfill-word {
  display: inline-block;
  font-size: 20px;
  border-radius: 4px;
  padding: 0 2px;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.listen-word-active {
  background-color: #fff3bf;
  box-shadow: 0 0 0 2px #ffe066;
}

.listen-gap-active .gapfill-input {
  border-color: #f08c00;
  box-shadow: 0 0 0 0.2rem rgba(240, 140, 0, 0.18);
}

.read-quiz-audio-btn,
.review-quiz-audio-btn {
  line-height: 1;
  vertical-align: baseline;
}

.read-quiz-audio-btn .bi,
.review-quiz-audio-btn .bi {
  font-size: 1rem;
}

.definition-popup {
  border-radius: 8px;
  max-width: calc(100vw - 2rem);
}

.definition-popup-html {
  margin: 0;
}

.definition-modal-backdrop {
  align-items: center;
  background: rgba(21, 23, 26, 0.52);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 2050;
}

.definition-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(21, 23, 26, 0.28);
  max-height: calc(100vh - 2rem);
  max-width: 720px;
  overflow-y: auto;
  padding: 1.4rem;
  position: relative;
  width: min(720px, 100%);
}

.definition-modal-close {
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #d8dde3;
  border-radius: 999px;
  color: #33383f;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0.85rem;
  top: 0.85rem;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  width: 36px;
  z-index: 1;
}

.definition-modal-close:hover,
.definition-modal-close:focus-visible {
  background: #b13a2f;
  border-color: #b13a2f;
  color: #fff;
  outline: none;
}

.definition-popup-body {
  color: #222831;
  text-align: left;
}

.definition-popup-word-row {
  align-items: center;
  border-bottom: 1px solid #d8dde3;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.1rem 0 1rem;
}

.definition-modal .definition-popup-word-row {
  padding-right: 2.35rem;
}

.definition-popup-kicker,
.definition-popup-label {
  color: #b13a2f;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.definition-popup-word {
  color: #15171a;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.definition-popup-word-line {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  margin-top: 0.2rem;
}

.definition-popup-audio-button {
  align-items: center;
  background: #fff4f5;
  border: 1px solid #efc4ca;
  border-radius: 999px;
  color: #b13a2f;
  display: inline-flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
  padding: 0;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  width: 42px;
}

.definition-popup-audio-button:hover,
.definition-popup-audio-button:focus-visible,
.definition-popup-audio-button.is-playing {
  background: #b13a2f;
  border-color: #b13a2f;
  color: #fff;
  outline: none;
}

.definition-popup-audio-button.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.definition-popup-audio-button .bi {
  font-size: 1.15rem;
}

.definition-popup-sentence-audio-button {
  flex-basis: 34px;
  height: 34px;
  width: 34px;
}

.definition-popup-sentence-audio-button .bi {
  font-size: 1rem;
}

.definition-popup-section {
  border-bottom: 1px solid #eef0f2;
  padding: 1rem 0;
}

.definition-popup-body > .definition-popup-section:first-child {
  padding-top: 0.1rem;
}

.definition-popup-section p,
.definition-popup-note span {
  color: #33383f;
  font-size: 1rem;
  line-height: 1.5;
}

.definition-popup-section p {
  margin: 0.45rem 0 0;
}

.definition-lesson-section p,
.definition-progress-lesson {
  color: #15171a;
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.35;
  margin-top: 0.45rem;
}

.definition-popup-label {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.definition-popup-label span {
  background: #f2eadf;
  border-radius: 999px;
  color: #6f2f27;
  font-size: 0.72rem;
  padding: 0.24rem 0.55rem;
  text-transform: none;
}

.definition-context-section {
  background: #f8f9fa;
  border: 1px solid #d8dde3;
  border-radius: 6px;
  margin-top: 1rem;
  padding: 0.95rem 1rem;
}

.definition-context-sentence {
  color: #15171a;
  font-size: 1.05rem;
  font-weight: 700;
}

.definition-context-word {
  background: #fff3bf;
  border-radius: 4px;
  box-decoration-break: clone;
  color: #15171a;
  padding: 0.06rem 0.18rem;
  -webkit-box-decoration-break: clone;
}

.definition-phrase-section {
  border-left: 4px solid #b13a2f;
  padding-left: 1rem;
}

.definition-phrase-text {
  color: #15171a;
  font-size: 1.1rem;
  font-weight: 800;
}

.definition-phrase-translation {
  color: #636a73 !important;
  font-size: 0.92rem !important;
}

.definition-phrase-translation strong {
  color: #33383f;
}

.definition-popup-note {
  align-items: center;
  background: #eef7fb;
  border: 1px solid #b7d7e6;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  text-align: center;
}

.definition-popup-note strong {
  color: #164f73;
}

.lesson-definition-preview-modal {
  padding-bottom: 1rem;
}

.lesson-definition-preview-pager {
  align-items: center;
  border-top: 1px solid #eef0f2;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
}

.lesson-definition-preview-pager span {
  color: #33383f;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
}

#gapfill-container {
  line-height: 2.5;
  font-family: 'Roboto Mono', monospace;
}

.gapfill-input {
  height: 35px;
  border: 1px solid black;
  padding: 2px;
}

.ngsl-item {
  cursor: pointer;
  border-bottom: 1px solid green;
}

.nawl-item {
  cursor: pointer;
  border-bottom: 1px solid blue;
}

.unknown-item {
  cursor: pointer;
  border-bottom: 1px solid red;
}

.propn-item {
  cursor: pointer;
  border-bottom: 1px solid purple;
}

.number-item {
  cursor: pointer;
  border-bottom: 1px solid yellow;
}

.other-item {
  cursor: pointer;
  border-bottom: 1px solid black;
}

.was-checked {
  background-color: yellow;
}

#loading-modal {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 999999;
  position: fixed;
}

#loading-modal-inner {
  position: fixed;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: white;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('/images/loading.gif');
  background-position: center;
  border: 1px solid black;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.75);
}

.tracker-sort {
  cursor: pointer
}

#user-table th {
  background-color: #f5f5f5 !important;
}

#user-table tr {
  cursor: pointer;
}

#user-table tr:hover {
  background-color: darkgray;
}

.user-table-chevron {
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
}

.user-table-chevron:hover {
  background-color: darkgray;
}

.centered-spinner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 75px;
  height: 75px;
}

.lesson-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111827;
  border-radius: 6px;
}

.lesson-video-frame .plyr,
.lesson-video-frame .plyr--video,
.lesson-video-frame .plyr__video-wrapper,
.lesson-video-frame .plyr__poster,
.lesson-video-frame video {
  width: 100%;
  height: 100%;
}

.lesson-video-frame video {
  display: block;
  object-fit: contain;
  background: #111827;
}

.lesson-video-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  color: #fff;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.lesson-video-frame:not(.is-loading) .lesson-video-loading {
  opacity: 0;
}

.lesson-video-frame.is-loading .plyr {
  visibility: hidden;
}

.video-avatar-option {
  display: block;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  background: #fff;
}

.video-avatar-option:hover {
  border-color: #6c757d;
}

.video-avatar-option.is-selected {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}

.video-avatar-option img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}

.video-avatar-option span {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: 0.85rem;
  color: #495057;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#user-table td,
#user-table th {
  vertical-align: middle;
}

.activity-sort-div {
  border: 1px solid black;
  padding: 10px;
  cursor: pointer;
  background: white;
  margin-top: 5px;
  border-radius: 5px;
  cursor: move;
}

#lesson-table td,
#lesson-table td {
  vertical-align: middle;
}

.draggable-word {
  background-color: #f5f5f5;
  margin: 5px;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
}

:root {
  --send-bg: #0B93F6;
  --send-color: white;
  --receive-bg: #E5E5EA;
  --receive-text: black;
  --page-background: white;
}

#chat-container {
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid black;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  background-color: var(--page-background);
  padding: 10px;
}

.chat-msg {
  display: flex;
  align-items: center;
  word-wrap: break-word;
  margin-bottom: 12px;
  line-height: 24px;
  position: relative;
  padding: 10px 20px;
  border-radius: 25px;
  &:before,
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 25px;
  }
}

.chat-msg-chatbot {
  cursor: default;
  color: var(--receive-text);
  background: var(--receive-bg);
  align-self: flex-start;
  &:before {
    left: -7px;
    width: 20px;
    background-color: var(--receive-bg);
    border-bottom-right-radius: 16px 14px;
  }
  &:after {
    left: -26px;
    width: 26px;
    background-color: var(--page-background);
    border-bottom-right-radius: 10px;
  }
}

.chat-msg .btn-link {
  color: inherit;
}

.chat-msg-chatbot.chat-msg-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}

.chat-msg-typing {
  min-width: 72px;
  min-height: 44px;
  justify-content: center;
}

.chat-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
}

.chat-typing-dots span {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  animation: chatTypingPulse 1.1s ease-in-out infinite;
}

.chat-typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.audio-recording-field {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff8f8;
  border-color: #dc3545;
  color: #842029;
}

.discuss-recording-field {
  justify-content: center;
}

.recording-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #dc3545;
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55);
  animation: recordingDotPulse 1.25s ease-out infinite;
}

.recording-vu {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.recording-vu span {
  width: 4px;
  height: 8px;
  display: block;
  border-radius: 999px;
  background: #dc3545;
  opacity: 0.72;
  transition: height 70ms linear, opacity 70ms linear;
}

.speak-sentence-text {
  font-size: 1.08rem;
  line-height: 1.45;
}

.speak-action-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  font-size: 1.08rem;
  line-height: 1;
}

.speak-recording-status {
  min-width: 132px;
  min-height: 38px;
  margin-left: 4px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #f1aeb5;
  border-radius: 8px;
  background: #fff8f8;
  color: #842029;
}

.speak-recording-countdown {
  min-width: 24px;
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}

.speak-recording-time {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border: 1px solid #6c757d;
  border-radius: 0.375rem;
  background: #fff;
  color: #6c757d;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.speak-recording-vu {
  justify-content: flex-start;
}

@keyframes chatTypingPulse {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes recordingDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

.chat-msg-user {
  background: var(--send-bg);
  color: var(--send-color);
  align-self: flex-end;
  &:before {
    right: -7px;
    width: 20px;
    background-color: var(--send-bg);
    border-bottom-left-radius: 16px 14px;
  }
  &:after {
    right: -26px;
    width: 26px;
    background-color: var(--page-background);
    border-bottom-left-radius: 10px;
  }
}

.chat-msg-system,
.chat-msg-system-notice {
  align-self: center;
  max-width: 90%;
  border-radius: 8px;
  background: #eef4ff;
  color: #344054;
  font-size: 0.92rem;
  line-height: 1.4;
}

.chat-msg-system:before,
.chat-msg-system:after,
.chat-msg-system-notice:before,
.chat-msg-system-notice:after {
  display: none;
}

.chat-msg-system-notice {
  margin-left: auto;
  margin-right: auto;
}

.chat-msg-system-notice button i,
.chat-msg-system-notice .spinner-border {
  color: #344054 !important;
}

.discussion-end-note {
  max-width: 90%;
  margin: 0.75rem auto 0;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: #eef4ff;
  color: #344054;
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: center;
}

.chat-msg-pending {
  opacity: 0.6;
}

.speech-alert-message {
  text-align: left;
  color: #344054;
}

.speech-alert-lead {
  margin: 0 0 12px;
  color: #101828;
  font-weight: 600;
  line-height: 1.45;
}

.speech-alert-tips {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #f9fafb;
  padding: 12px 14px;
}

.speech-alert-tips p {
  margin: 0 0 8px;
  color: #475467;
  font-size: 0.95rem;
}

.speech-alert-tips ol {
  margin: 0;
  padding-left: 1.25rem;
}

.speech-alert-tips li {
  margin: 6px 0;
  line-height: 1.4;
}

.eigoai-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.eigoai-modal-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 90%;
  max-width: 1000px;
  height: 90%;
  background-color: white;
  z-index: 11;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.eigoai-modal-header {
  sposition: sticky;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.user-table-row:hover {
  background-color: darkgray !important;
}

.institution-row:hover {
  background-color: lightgray;
  cursor: pointer;
}

#header-flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#header-container {
  background: #5f6772 !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #4f5863;
  height: 120px;
}

#site-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  padding-top: 120px;
  padding-bottom: 0;
}

#app-content {
  flex: 1 0 auto;
}

.student-view-notice {
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
}

.blurred {
  filter: blur(4px);
}

#header-badge-holder {
  flex-direction: row;
}

#header-badge-holder .badge {
  margin-right: 5px;
}

.progress-table-cell-div {
  cursor: pointer;
  border-radius: 5px;
  min-width: 100px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-table-cell-div:hover {
  border: 1px solid black;
}

.progress-current-level-badge {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid #badbcc;
  border-radius: 999px;
  background-color: #d1e7dd;
  color: #0f5132;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.word-card-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.word-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid #e5e0d8;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 1px 2px rgba(32, 29, 26, 0.06);
}

.word-progress-card-wrap {
  position: relative;
  min-width: 0;
}

.word-progress-card-wrap .word-card {
  height: 100%;
  padding-right: 54px;
}

.word-progress-delete-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e2d8cd;
  border-radius: 50%;
  background: #fff;
  color: #7b6257;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.word-progress-delete-btn:hover,
.word-progress-delete-btn:focus-visible {
  border-color: #dc3545;
  background: #fff5f5;
  color: #dc3545;
}

.word-progress-delete-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.definition-progress-lesson {
  display: inline-block;
  text-decoration: none;
}

.definition-progress-lesson:hover {
  color: #b13a2f;
  text-decoration: underline;
}

.chart-label-with-asterisk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chart-label-with-asterisk .chart-asterisk {
  margin-left: 4px;
}

.chart-asterisk {
  color: #dc3545;
  font-weight: 600;
}

/* General table styles */

.sortable-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Container to make the table body scrollable */

.sortable-table-container {
  height: 600px;
  /* Adjust as needed */
  overflow-y: scroll;
  overflow-x: scroll;
  border: 1px solid black;
}

/* Sticky table header */

.sortable-table-header {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Table header cells */

.sortable-table th {
  background-color: #f0f0f0;
  /* Light gray */
  border-right: 1px solid #a0a0a0;
  /* Darker gray */
  padding: 5px;
  text-align: center;
  user-select: none;
}

/* Cursor pointer for sortable headers */

.sortable-th {
  cursor: pointer;
}

/* Hover effect on sortable headers, except when active */

.sortable-th:hover:not(.active-sort) {
  background-color: #d0d0d0;
  /* Slightly darker gray */
}

/* Active sort column */

.active-sort {
  font-weight: bold;
  background-color: #c0c0c0 !important;
  /* Slightly darker than hover */
}

/* Ensure active sort background color persists on hover */

.sortable-th.active-sort:hover {
  background-color: #c0c0c0;
}

/* Table data cells */

.sortable-table td {
  border-bottom: 1px solid #a0a0a0;
  border-right: 1px solid #a0a0a0;
  padding: 5px;
}

.sortable-table tr:hover {
  background-color: lightgray;
  cursor: pointer;
}

/* Text alignment classes */

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.vertical-th {
  writing-mode: vertical-rl;
  min-width: 50px;
}

.status-completed {
  background-color: rgba(0, 255, 0, 0.3) !important;
}

.status-attempted {
  background-color: rgba(0, 0, 255, 0.3) !important;
}

.status-not-attempted {
  background-color: rgba(255, 0, 0, 0.3) !important;
}

.timer-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background-color: #fff;
  position: relative;
}

.timer-modal-btn {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom:0;
  width:200px;
  height:100px;
  font-size:16px;
}

.activity-start-guide {
  display: grid;
  grid-template-columns: minmax(150px, 30%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #f8fafc;
}

.activity-start-guide__avatar {
  width: min(118%, 255px);
  max-height: 285px;
  height: auto;
  margin: -1rem 0 -1.25rem -0.4rem;
  object-fit: contain;
  object-position: bottom center;
  align-self: end;
  justify-self: end;
}

.activity-start-guide__content {
  align-self: center;
  min-width: 0;
}

.activity-start-guide__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
  color: #22272e;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 700;
}

.activity-start-guide__title .bi {
  color: #0d6efd;
}

.activity-start-guide__content p {
  margin: 0 0 1.05rem;
  color: #5f6873;
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  line-height: 1.5;
}

.activity-start-guide__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 190px;
  min-height: 48px;
}

@media (max-width: 767.98px) {
  .activity-start-guide {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    min-height: 300px;
    padding-top: 0.75rem;
  }

  .activity-start-guide__avatar {
    width: min(70vw, 190px);
    max-height: 205px;
    margin: -0.25rem auto -1rem;
    justify-self: center;
  }

  .activity-start-guide__title {
    justify-content: center;
  }

  .activity-start-guide__button {
    width: 100%;
  }
}

.activity-timer-div {
  font-family: monospace;
  font-size: 16px;
  color: white;
  background-color: #111;
  width: 120px;
  height: 38px;
  line-height: 38px;
  padding: 0;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 3px;
}

.class-activities-panel {
  background: #fbfcfd;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  overflow: hidden;
}

.class-activities-panel__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #ffffff;
  border-bottom: 1px solid #dce3ea;
}

.class-activities-panel__header > div:last-child {
  min-width: 0;
}

.class-activities-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #e7f1ff;
  color: #0d6efd;
  font-size: 1.35rem;
}

.class-activities-panel__header h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.class-activities-panel__header p {
  margin: 0.2rem 0 0;
  color: #5f6873;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.class-activities-panel__body {
  padding: 1.1rem;
}

.class-activities-layout {
  display: block;
}

.class-activity-section {
  background: #fff;
  border: 1px solid #dce3ea;
  border-left: 5px solid #6c757d;
  border-radius: 8px;
  margin-bottom: 1.4rem;
  overflow: hidden;
}

.class-activity-section:last-child {
  margin-bottom: 0;
}

.class-activity-section--discussion {
  border-left-color: #0d6efd;
}

.class-activity-section--debate {
  border-left-color: #dc3545;
}

.class-activity-section--brainstorm {
  border-left-color: #f0ad00;
}

.class-activity-section--roleplay {
  border-left-color: #198754;
}

.class-activity-section__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e8edf2;
}

.class-activity-section__header .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  color: #343a40;
  box-shadow: inset 0 0 0 1px #e0e5ea;
}

.class-activity-section__header h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.class-activity-section__body {
  padding: 1rem;
}

.class-activity-section__body > :last-child {
  margin-bottom: 0;
}

.class-activity-section__body p {
  margin-bottom: 0.65rem;
  color: #2f363d;
}

.class-activity-section__body ol,
.class-activity-section__body ul {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0;
  padding-left: 1.35rem;
}

.class-activity-section__body li {
  padding-left: 0.15rem;
}

.class-activity-table-wrap {
  overflow-x: auto;
  margin-top: 0.65rem;
}

.class-activity-table {
  margin-bottom: 0;
  min-width: 520px;
}

.class-activity-table th {
  background: #f8f9fa;
  color: #404852;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.submitted-cell {
  background-color: rgba(0, 255, 0, 0.3) !important;
}

.unsubmitted-cell {
  background-color: rgba(255, 0, 0, 0.3) !important;
}

.clickable-topic-cell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* On hover, slightly shade the background */
.clickable-topic-cell:hover {
  color: blue;
}

.sentence-verification-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.lesson-editor {
  padding: 14px 0 28px;
}

.lesson-editor hr {
  margin: 14px 0;
  opacity: 0.12;
}

.lesson-editor-pagination {
  margin-bottom: 12px;
}

.lesson-editor-pagination .page-link {
  line-height: 1.3;
}

.lesson-editor-statusbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.lesson-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-vendor-balances {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-vendor-balance {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 4px 8px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  color: #495057;
  background: #fff;
  font-size: 0.82rem;
  line-height: 1.2;
}

.admin-vendor-balance.is-ok {
  color: #146c43;
  border-color: #a3cfbb;
  background: #f0f8f4;
}

.admin-vendor-balance.is-warning {
  color: #997404;
  border-color: #ffda6a;
  background: #fff8e1;
}

.admin-vendor-balance.is-muted {
  color: #6c757d;
  background: #f8f9fa;
}

.admin-vendor-balance-refresh {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lesson-editor-label,
.lesson-editor-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin-bottom: 4px;
  color: #495057;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.lesson-editor-scrollbox {
  height: 200px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 8px 10px;
  background: #fff;
}

.lesson-editor-scrollbox .form-check {
  margin-bottom: 2px;
}

.lesson-editor-panel-actions {
  display: flex;
  gap: 8px;
}

.lesson-editor-image-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.lesson-editor-image {
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
  cursor: zoom-in;
  object-fit: cover;
}

.lesson-editor-image:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  outline: 0;
}

.lesson-editor-image-controls {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.lesson-editor .nav-pills .nav-link {
  padding: 7px 12px;
}

.lesson-editor h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0 0 8px;
  color: #212529;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.lesson-editor h2 .btn:first-of-type,
.lesson-editor h2 select:first-of-type {
  margin-left: auto;
}

.lesson-editor h2 .btn + .btn,
.lesson-editor h2 select + .btn,
.lesson-editor h2 .btn + select {
  margin-left: 0;
}

.lesson-editor-title-select {
  width: auto;
  min-width: 92px;
}

.lesson-editor textarea[style*="height: 500px"] {
  height: 360px !important;
  min-height: 360px;
}

.lesson-editor div[id^="read_"],
.lesson-editor div[id^="review_"],
.lesson-editor div[id^="words_"],
.lesson-editor div[id^="sentences_"] {
  max-height: 360px !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .lesson-editor-statusbar {
    justify-content: flex-start;
  }

  .lesson-editor-toolbar {
    flex-wrap: wrap;
  }

  .lesson-editor-toolbar .ms-auto {
    margin-left: 0 !important;
  }

  .lesson-editor-image-row {
    flex-direction: column;
  }
}