@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";

/* src/styles.scss */
html {
  --mat-sys-background: light-dark(#fcf8fd, #131316);
  --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
  --mat-sys-error-container: light-dark(#ffdad6, #93000a);
  --mat-sys-inverse-on-surface: light-dark(#f3eff4, #303034);
  --mat-sys-inverse-primary: light-dark(#bec2ff, #343dff);
  --mat-sys-inverse-surface: light-dark(#303034, #e5e1e6);
  --mat-sys-on-background: light-dark(#1b1b1f, #e5e1e6);
  --mat-sys-on-error: light-dark(#ffffff, #690005);
  --mat-sys-on-error-container: light-dark(#93000a, #ffdad6);
  --mat-sys-on-primary: light-dark(#ffffff, #0001ac);
  --mat-sys-on-primary-container: light-dark(#0000ef, #e0e0ff);
  --mat-sys-on-primary-fixed: light-dark(#00006e, #00006e);
  --mat-sys-on-primary-fixed-variant: light-dark(#0000ef, #0000ef);
  --mat-sys-on-secondary: light-dark(#ffffff, #2e2f42);
  --mat-sys-on-secondary-container: light-dark(#444559, #e1e0f9);
  --mat-sys-on-secondary-fixed: light-dark(#191a2c, #191a2c);
  --mat-sys-on-secondary-fixed-variant: light-dark(#444559, #444559);
  --mat-sys-on-surface: light-dark(#1b1b1f, #e5e1e6);
  --mat-sys-on-surface-variant: light-dark(#46464f, #e4e1ec);
  --mat-sys-on-tertiary: light-dark(#ffffff, #0001ac);
  --mat-sys-on-tertiary-container: light-dark(#0000ef, #e0e0ff);
  --mat-sys-on-tertiary-fixed: light-dark(#00006e, #00006e);
  --mat-sys-on-tertiary-fixed-variant: light-dark(#0000ef, #0000ef);
  --mat-sys-outline: light-dark(#777680, #91909a);
  --mat-sys-outline-variant: light-dark(#c7c5d0, #46464f);
  --mat-sys-primary: light-dark(#343dff, #bec2ff);
  --mat-sys-primary-container: light-dark(#e0e0ff, #0000ef);
  --mat-sys-primary-fixed: light-dark(#e0e0ff, #e0e0ff);
  --mat-sys-primary-fixed-dim: light-dark(#bec2ff, #bec2ff);
  --mat-sys-scrim: light-dark(#000000, #000000);
  --mat-sys-secondary: light-dark(#5c5d72, #c5c4dd);
  --mat-sys-secondary-container: light-dark(#e1e0f9, #444559);
  --mat-sys-secondary-fixed: light-dark(#e1e0f9, #e1e0f9);
  --mat-sys-secondary-fixed-dim: light-dark(#c5c4dd, #c5c4dd);
  --mat-sys-shadow: light-dark(#000000, #000000);
  --mat-sys-surface: light-dark(#fcf8fd, #131316);
  --mat-sys-surface-bright: light-dark(#fcf8fd, #3a393c);
  --mat-sys-surface-container: light-dark(#f0edf1, #201f22);
  --mat-sys-surface-container-high: light-dark(#ebe7eb, #2a292d);
  --mat-sys-surface-container-highest: light-dark(#e5e1e6, #353438);
  --mat-sys-surface-container-low: light-dark(#f6f2f7, #1b1b1f);
  --mat-sys-surface-container-lowest: light-dark(#ffffff, #0e0e11);
  --mat-sys-surface-dim: light-dark(#dcd9dd, #131316);
  --mat-sys-surface-tint: light-dark(#343dff, #bec2ff);
  --mat-sys-surface-variant: light-dark(#e4e1ec, #46464f);
  --mat-sys-tertiary: light-dark(#343dff, #bec2ff);
  --mat-sys-tertiary-container: light-dark(#e0e0ff, #0000ef);
  --mat-sys-tertiary-fixed: light-dark(#e0e0ff, #e0e0ff);
  --mat-sys-tertiary-fixed-dim: light-dark(#bec2ff, #bec2ff);
  --mat-sys-neutral-variant20: #303038;
  --mat-sys-neutral10: #1b1b1f;
  --mat-sys-level0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-body-large: 400 1rem / 1.5rem;
  --mat-sys-body-large-font: ;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem;
  --mat-sys-body-medium-font: ;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem;
  --mat-sys-body-small-font: ;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem;
  --mat-sys-display-large-font: ;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem;
  --mat-sys-display-medium-font: ;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem;
  --mat-sys-display-small-font: ;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem;
  --mat-sys-headline-large-font: ;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem;
  --mat-sys-headline-medium-font: ;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem;
  --mat-sys-headline-small-font: ;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem;
  --mat-sys-label-large-font: ;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem;
  --mat-sys-label-medium-font: ;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem;
  --mat-sys-label-small-font: ;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem;
  --mat-sys-title-large-font: ;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem;
  --mat-sys-title-medium-font: ;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem;
  --mat-sys-title-small-font: ;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}
:root {
  font-family: "Inter" !important;
  --bg-primary: #ffffff;
  --primary-color: #8F69FC;
  --primary-light: #7D52F4;
  --primary-dark: #8B5CF6;
  --accent-color: #FCC71F;
  --accent-light: #ffe0b2;
  --secondary-color: #0E121B;
  --primary-light-30: rgba(143, 105, 252, 1 0.3);
  --translate-senten-edit-border: #FDE0CC;
  --steper-dot-active: #06D2DD;
  --bg-tence-card: #ECEAFF;
  --bg-card-second: #EBF8FF;
  --bg-card-third: #FFFAEB;
  --bg-s-card-num: #47C2FF;
  --bg-t-card-num: #F1A62D;
  --blog-chip-bg: #4B6BFB;
  --bg-primary: #ffffff;
  --mat-mdc-menu-item: #F3F4F6;
  --date-card-bg: #DDD5F9;
  --date-outline: #7F66D5;
  --date-cal: #9886FE;
  --team-count-bg: #E5ECF6;
  --team-inner-card: #F8F4F1;
  --outer-card-bg: #CCE8F7;
  --outer-card-outline: #549EC6;
  --comment-bg: #EBDBAD;
  --comment-outline: #B18B1E;
  --bg-tertiary: #EFEBFF;
  --bg-tertiary-32: #EFEBFF32;
  --result-card-border: #CAC0FF;
  --result-card-border-50: #8f69fc9c;
  --beyond-apart: #99A0AE;
  --beyond-card-bg: ;
  --lang-title: #1E1C1C;
  --bg-tertiary: #EFEBFF;
  --header-bg: #fff;
  --border-light: #E1E4EA;
  --text-secondary-light: #E5E7EB;
  --bg-acc: #F5F7FA;
  --complete-Checkpoint: #1FC16B;
  --job-btn: #37C390;
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Manrope", sans-serif;
  --text-secondary-dark: #525866;
  --testmonial-bg: #E5F8FF;
  --testmonial-bg-2: #9EB3BE;
  --user-img: #1C1C1C;
  --steper-dot: #BEDAE4;
  --dir-arrow-hover: #3F389F;
  --em-path-fea-detail: #CACFD8;
  --why-belas-slde-blur-left:
    linear-gradient(
      90deg,
      rgb(255, 255, 255) 0%,
      rgba(255, 255, 255, 0) 100%);
  --why-belas-slde-blur-right:
    linear-gradient(
      90deg,
      rgb(255, 255, 255) 0%,
      rgba(255, 255, 255, 0) 100%);
  --path-section-bg:
    linear-gradient(
      360deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 100%);
  --hero-bg:
    linear-gradient(
      0deg,
      rgba(186, 162, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.7) 100%);
  --hero-lang-upper:
    linear-gradient(
      180deg,
      rgb(250, 248, 255) 25%,
      rgba(250, 248, 255, 0) 100%);
  --hero-lang-lower:
    linear-gradient(
      0deg,
      rgb(250, 248, 255) 25%,
      rgba(250, 248, 255, 0) 100%);
  --hero-bottom-shade:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0) 100%);
  --bg-primary-40: rgba(255, 255, 255, 0.4);
  --bg-primary-80: rgba(255, 255, 255, 0.8);
  --pricing-grid-dark-border: #E1E4EA;
  --pricing-grid-dark: #fff;
  --price-page-hover: #181464;
  --ppp-message-bg: rgba(184, 181, 255, 0.1);
  --ppp-icon: #CAC0FF99;
  --xp-cart-bg: #FF8447;
  --streak-cart-bg: #1FC16B;
  --time-cart-bg: #7D52F4;
  --design-job-bg: #E0FAEC;
  --product-job-text: #124B68;
  --job-detail-border: #1C1C1C0D;
  --logout-text: #FB3748;
  --req-bg: #FFEBEC;
  --true-shadow: #02BF1833;
  --true-border: #0FAF00;
  --false-border: #D80C0F;
  --false-shadow: #F7000433;
  --selected-shadow: #A35BE733;
  --Sepia-text:#3b2a1a;
  --Sepia-post-content: #4a3728;
  --category-badge-bg: #e8d5b0;
  --catedory-badge-text: #7a5230;
  --login-bg: #FFFFFF66;
  --auth-title: #0E121B;
  --text-secondary: #525866;
  --form-field-text: #99A0AE;
  --auth-border: #E1E4EA;
  --theme-color: #8F69FC;
  --black-dark-5: #1C1C1C0D;
  --black-dark-40: rgba(28, 28, 28, 0.4);
  --or-text: #1C1C1C66;
  --bus-eng1-bg: #FFF1EB;
  --bus-eng1-text: #FF8447;
  --bus-eng2-bg: #EBF8FF;
  --bus-eng2-text: #08A9B2;
  --bus-eng3-bg: #EFEBFF;
  --bus-eng3-text: #7D52F4;
  --learn-progress: #D9D9D9;
  --learn-active-progress: #777BFE;
  --faster-card-bg:
    linear-gradient(
      90deg,
      rgba(143, 105, 252, 1) 0%,
      rgba(94, 141, 255, 1) 100%);
  --current-chapter-bg:
    linear-gradient(
      30deg,
      rgba(6, 210, 221, 1) 0%,
      rgba(245, 247, 250, 1) 28%,
      rgba(245, 247, 250, 1) 69%,
      rgba(143, 105, 252, 1) 100%);
  --profile-cover-bg: #9052E9;
  --profile-effect: #D5C0F5;
  --still-text: #E42C31;
  --job-icon-bg: #AAF1CB;
  --enable-chip-text: #C2F5DA;
  --placeholder-color: var(--beyond-apart);
  --white: var(--header-bg);
  --success-bg-color: var(--complete-Checkpoint);
  --error-bg-color: #ff9800;
  --success-color: var(--design-job-bg);
  --green-light: #D7FAE7;
  --lesson-card: rgba(224, 250, 236, 0.7);
  --btn-dark-theme: #EFEBFF;
  --bg-primary: #ffffff;
  --white-hex: #fff;
  --dot: #8F69FC;
  --magic-icon: #FFF1EB;
  --back-bg: #E0FAEC;
  --continue-learing: rgba(255, 241, 235, 0.6);
  --premium-card: #EFEBFF;
  --continue-arrow-bg: #FFE4D6;
  --carousel-dots-hover: #9CA3AF;
  --text-theme: #0E121B;
  --grammar-card-bg-1: rgba(236, 234, 255, 1);
  --blue-white: var(--dot);
  --sound-bg: var(--premium-card);
  --video-card-bg: #FFF;
  --video-card-border: #EBEBEB;
  --video-card-bg: #2D2D4A;
  --video-card-border: #0A0729;
  --video-card-drop-shadow: 0px 3.25px 1.08px 1.08px rgba(143, 143, 143, 0.2), 0px 0px 0px 1.08px #EBEBEB;
  --line-color: #000000;
  --leaderboard-bg: #F5F7FA;
  --start-climbing-card-bg: #E1E4EA;
  --start-climbing-card-empty: #CACFD8;
  --info-card-bg:
    linear-gradient(
      245deg,
      rgba(143, 105, 252, 0.02),
      rgba(143, 105, 252, 0.2));
  --orange: #FF8447;
  --active-user-card-bg: #C2F5DA;
  --active-user-card-border: #F2F5F8;
  --active-user-card-text: #14940D;
  --active-user-card-numtext: #1FC16B;
  --user-xp-text: #525866;
  --black-and-white: #0E121B;
  --white-and-blue: #FFFFFF;
  --lightblack-and-white: #525866;
  --white-and-lightblue: #FFFFFF;
  --light-dark-theme: var(--bg-acc);
  --notification-text-color: #0E121B;
  --light-gray-color: #525866;
  --experience-icon-bg: #EFEBFF;
  --white-and-black-01: #fff;
  --black-and-white-01: #0E121B;
  --transparent-and-black: transparent;
  --gem-100: #717784;
  --gem-350: #FF8447;
  --gem-750: #FB4BA3;
  --gem-2000: #7D52F4;
  --gem-card-bg-color: #FFFFFF;
  --gem-card-box-shadow: rgba(14, 18, 27, 0.1) ;
}
:root[data-theme=light] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --gradient-text: #0E121B;
  --text-light: #9CA3AF;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-heavy: rgba(0, 0, 0, 0.25);
  --text-secondary-light: #E5E7EB;
  --header-nav: #6B7280;
  --login-bg: #F9FAFB;
  --login-text: #374151;
  --auth-shade:
    linear-gradient(
      0deg,
      rgba(235, 228, 255, 1) 35%,
      rgba(235, 228, 255, 0.59) 100%);
  --bella-title: #1B1464;
  --bella-mobile-menu-bg: #F5F7FA;
  --day-color: #351A75;
  --quiz-bg: #EFEBFF99;
  --require-chip-text: #FFC0C5;
  --light-black: rgba(143, 143, 143, 0.2) --placeholder-color: #99A0AE;
  --success-color: #1FC16B;
  --green-light: #D7FAE7;
  --lesson-card: rgba(224, 250, 236, 0.7);
  --btn-dark-theme: #EFEBFF;
  --white: #fff;
  --dot: #8F69FC;
  --magic-icon: #FFF1EB;
  --back-bg: #E0FAEC;
  --continue-learing: rgba(255, 241, 235, 0.6);
  --premium-card: #EFEBFF;
  --continue-arrow-bg: #FFE4D6;
  --continue-arrow-color: #FF8447;
  --footer-bg: #1a0d4d;
  --footer-bg-2: #F2F0FF;
  --grammar-card-bg: #2d1a6b;
  --grammar-card-text:#cfc9ff;
  --text-theme: #0E121B;
  --grammar-card-bg-1: rgba(236, 234, 255, 1);
  --blue-white: var(--dot);
  --sound-bg: var(--premium-card);
  --video-card-bg: #FFF;
  --video-card-border: #EBEBEB;
  --video-card-drop-shadow: 0px 3.25px 1.08px 1.08px rgba(143, 143, 143, 0.2), 0px 0px 0px 1.08px #EBEBEB;
  --video-card-active-bg: #E9E5FB;
  --video-card-active-border: #8A61FF;
  --video-card-active-drop-shadow: 0px 3.25px 1.08px 1.08px rgba(143, 143, 143, 0.2), 0px 0px 0px 1.08px rgba(235, 235, 235, 1);
  --video-card-inactive-bg: #fff;
  --video-card-inactive-border: #EBEBEB;
  --video-card-inactive-drop-shadow: 0px 3.25px 1.08px 1.08px rgba(143, 143, 143, 0.2), 0px 0px 0px 1.08px #EBEBEB;
  --video-card-correct-bg: #DBFCEA;
  --video-card-correct-border: #37C390;
  --video-card-incorrect-bg: #FFEBEC;
  --video-card-incorrect-border: #FB3748;
  --bucket-drop-col-bg: transparent;
  --bucket-drop-col-border: #CACFD8;
  --bucket-drop-correct-border: #CCF2D1;
  --bucket-drop-correct-shadow: 0px 3px 1px 1px rgba(2, 191, 24, 0.2), 0px 0px 0px 1px #0FAF00;
  --bucket-drop-incorrect-bg: #FFEBEC;
  --bucket-drop-incorrect-border: #FDCCCD;
  --bucket-drop-incorrect-shadow: 0px 3px 1px 1px rgba(247, 0, 4, 0.2), 0px 0px 0px 1px #D80C0F;
  --text-color: #525866;
  --small-card-bg: var(--white);
  --small-card-border: var(--white);
  --small-card-shadow: 0px 3.79px 1.3px 1.3px rgba(143, 143, 143, 0.2), 0px 0px 0px 1.3px #EBEBEB;
  --small-empty-card-bg: #E1E4EA;
  --small-empty-card-border: #EBEBEB;
  --small-empty-card-shadow: 0px 3.9px 1.3px 1.3px var(--light-black), 0px 0px 0px 1.3px #EBEBEB;
  --icon-bg: rgba(255, 255, 255, 0.5);
  --text-white-black: #000;
  --line-color: #000;
  --line-opacity: 10%;
  --mtp-bg: #fff;
  --mtp-border: #EBEBEB;
  --mtp-shadow: 0px 3px 1px 1px rgba(143, 143, 143, 0.2), 0px 0px 0px 1px #EBEBEB;
  --mtp-selected-bg: #EFEBFF;
  --mtp-selected-border: #8F69FC;
  --mtp-selected-shadow: 0px 3px 1px 1px rgba(163, 91, 231, 0.2), 0px 0px 0px 1px #A74AEE;
  --true-ans-bg: #E0FAEC;
  --true-ans-border: #1FC16B;
  --true-ans-shadow: 0px 3px 1px 1px rgba(91, 231, 109, 0.2), 0px 0px 0px 1px #4AEE89;
  --false-ans-bg: #FFEBEC;
  --false-ans-border: #FB3748;
  --false-ans-shadow: 0px 3px 1px 1px rgba(231, 91, 93, 0.2), 0px 0px 0px 1px #EE4A4D;
  --black-and-white: #0E121B;
  --white-and-blue: #FFFFFF;
  --lightblack-and-white: #525866;
  --white-and-lightblue: #FFFFFF;
  --light-dark-theme: var(--bg-acc);
  --notification-text-color: #0E121B;
  --light-gray-color: #525866;
  --timeline-card: #fff;
  --experience-icon-bg: #EFEBFF;
  --white-and-black-01: #fff;
  --black-and-white-01: #0E121B;
  --transparent-and-black: transparent;
  --basic-btn: #E1E4EA;
  --gem-100: #717784;
  --gem-350: #FF8447;
  --gem-750: #FB4BA3;
  --gem-2000: #7D52F4;
  --gem-card-bg-color: #FFFFFF;
  --gem-card-box-shadow: rgba(14, 18, 27, 0.1) --sub-text-01: rgba(0, 0, 0, 0.5);
  --divider-line-color: rgba(28, 28, 28, 0.05);
  --divider-text-color: rgba(28, 28, 28, 0.6);
  --divider-line-color-2: rgba(28, 28, 28, 0.05);
  --my-itme-border: rgba(0, 0, 0, 0.3);
  --my-itme-bg-color: #FFFFFF;
  --my-itme-line-color: rgba(0, 0, 0, 0.2);
  --my-itme-text-color: #717784;
  --my-itme-heart-count: rgba(221, 46, 68, 0.7);
  --my-itme-gems-count: rgba(143, 105, 252, 1);
  --my-itme-freezes-count: rgba(106, 164, 255, 1);
  --heart-poup-bg-color: #F5F7FA;
  --heart-bg-color: rgba(143, 105, 252, 0.2);
  --refile-hert-color: #FF5257;
  --streak-freeze-color: #007AFF;
  --gray-color: #525866;
  --exercise-congrats-title: #525866;
  --exercise-congrats-redu: rgba(27, 31, 38, 0.72);
  --mat-check-icon-bg: #1FC16B;
  --mat-check-icon: rgba(224, 250, 236, 0.7);
  --green: rgba(31, 193, 107, 1);
  --progress-blank: #DDD2FE;
  --progress-filled: rgba(143, 105, 252, 1);
  --mastered: rgba(82, 88, 102, 1);
  --chip-border-color: rgba(221, 214, 254, 0.5);
  --chip-bg-color: rgba(237, 233, 254, 0.9);
  --chip-text-color: rgba(143, 105, 252, 1);
  --chip-shadow-color: rgba(0, 0, 0, 0.05);
  --text-color-001: rgba(143, 105, 252, 1);
  --section-bg-color: #F8FAFC;
  --french-card-bg-color: #8F69FC;
  --french-btn-bg-color: #633ECC;
  --german-card-bg-color: #1FC16B;
  --german-btn-bg-color: #108A4A;
  --english-card-bg-color: #04A5AD;
  --english-btn-bg-color: #02848B;
  --chinese-card-bg-color: #F1A62D;
  --chinese-btn-bg-color: #C4831B;
  --real-world-section-bg: #F8FAFC;
  --practice-border-color: rgba(226, 232, 240, 0.85);
  --light-black-color: rgba(71, 85, 105, 1);
  --sentence-card-bg-gradient: linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72));
  --black-and-white: rgba(7, 6, 38, 1);
  --gray-white-color: rgba(100, 116, 139, 1);
  --light-and-dark-blue: rgba(226, 232, 240, 0.5);
  --audio-speed-bg-color: rgba(255, 255, 255, 1);
  --audio-speed-color: rgba(143, 105, 252, 1);
  --audio-speed-shadow: rgba(143, 105, 252, 0.12);
  --audio-btn-bg-color: rgba(143, 105, 252, 0.1);
  --sentence-card-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07);
  --sentence-card-line-color: #F1F5F9;
  --video-content-card-bg: rgba(238, 238, 238, 1);
  --video-bookmark-color: rgba(185, 185, 185, 1);
  --video-title: #070626;
  --video-subtitle: #525866;
  --stop-wasting-time-bg: #F8FAFC;
  --cut-wordj-color: #000;
  --stop-wasting-time-description: #525866;
  --learn-section-bg: #fff;
  --footer-bg-3: #F2F0FF;
  --footer-text: #525866;
  --footer-text-hover: #8F69FC;
  --testimonials-card-bg: #9EB3BE;
  --testimonials-btn-bg: #DAEFF0;
  --testimonials-color: #525866;
  --your-first-title: #070626;
  --your-first-description: #045A5F;
  --header-bg-2: rgba(255, 255, 255, 0.95);
  --login-btn-text: #8F69FC;
  --language-btn-border: #E1E4EA;
  --language-btn-text: #0E121B;
  --mat-menu-bg: #fff;
  --mat-menu-border: #ECEFF4;
  --mat-menu-item-bg: #F4F0FF;
  --mat-menu-item-text: #6C47FF;
  --lang-name: #1E293B;
  --menu-item-hover: #f4f0ffa3;
  --notification-color: rgba(82, 88, 102, 1);
  --student-header-bg: rgba(255, 255, 255, 0.03);
  --student-header-border: rgba(225, 228, 234, 1);
  --start-quiz-bg: #06D2DD;
  --start-quiz-text: #070626;
  --daily-srs-bg: rgba(255, 255, 255, 0.3);
  --daily-srs-text: #fff;
}
:root[data-theme=dark] {
  --hero-bg:
    linear-gradient(
      135deg,
      #2D1B69 0%,
      #1a0d4d 50%,
      #0f0529 100%);
  --hero-lang-upper:
    linear-gradient(
      180deg,
      #2D1B69 25%,
      rgba(45, 27, 105, 0) 100%);
  --hero-lang-lower:
    linear-gradient(
      0deg,
      #2D1B69 25%,
      rgba(45, 27, 105, 0) 100%);
  --hero-bottom-shade:
    linear-gradient(
      0deg,
      #1a0d4d 0%,
      rgba(26, 13, 77, 0) 100%);
  --bg-primary: #2D1B69;
  --bg-secondary: #1a0d4d;
  --gradient-text: #FFFFFF;
  --text-primary: #FFFFFF;
  --text-secondary: #B8B5FF;
  --text-secondary-dark: #9B97D4;
  --text-light: #8B87C7;
  --bella-title: #8F69FC;
  --exer-card-bg: #2D2D4A;
  --exer-card-border: #302F61;
  --border-light: rgba(184, 181, 255, 0.15);
  --bg-primary-40: rgba(45, 27, 105, 0.3);
  --bg-primary-6: rgba(255, 255, 255, 0.06);
  --bg-primary-10: rgba(255, 255, 255, 0.1);
  --pricing-grid-dark-border: rgba(184, 181, 255, 0.2);
  --pricing-grid-dark: rgba(26, 13, 77, 0.4);
  --pricing-hover: rgba(143, 105, 252, 0.2);
  --shadow-light: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.4);
  --shadow-heavy: rgba(0, 0, 0, 0.6);
  --header-bg: #2E265E;
  --header-nav: #B8B5FF;
  --login-bg: #222530;
  --login-text: #FFFFFF;
  --beyond-apart: #9B97D4;
  --beyond-card-bg: #1a0d4d;
  --lang-title: #FFFFFF;
  --BellaSpeak-bg: #1a0d4d;
  --ppp-message-bg: rgba(184, 181, 255, 0.1);
  --ppp-icon: #CAC0FF99;
  --why-belas-slde-blur-left:
    linear-gradient(
      90deg,
      #09062a 0%,
      rgba(26, 13, 77, 0) 100%);
  --why-belas-slde-blur-right:
    linear-gradient(
      90deg,
      #09062a 0%,
      rgba(26, 13, 77, 0) 100%);
  --path-section-bg: #1a0d4d;
  --features-showcase-section-bg: #070626e6;
  --career-sections-bg: #070626;
  --bg-primary-10: rgba(255, 255, 255, 0.1);
  --bg-primary-20: rgba(255, 255, 255, 0.2);
  --bg-primary-03: rgb(15 14 45);
  --path-outer-card:
    linear-gradient(
      30deg,
      rgba(6, 210, 221, 1) 0%,
      rgba(77, 74, 100, 1) 30%,
      rgba(38, 37, 65, 1) 60%,
      rgba(143, 105, 252, 1) 100%);
  --path-card:
    linear-gradient(
      221deg,
      rgba(38, 37, 67, 1) 0%,
      rgba(82, 79, 105, 1) 100%);
  --path-Fluency-card: #1E1845;
  --team-inner-card: #3F389F;
  --real-card: #30285B;
  --faq-acc-bg: #181646;
  --testmonial-card-dark: #222240;
  --pricing-card-bg: rgba(1, 1, 1, 0.3);
  --features-bg-even: #201F3C;
  --value-card-dark: #151444;
  --career-hero-bg: rgba(31, 30, 59, 0.9);
  --pricing-grid-bg: #1D1C39;
  --pricing-hero-section-bg: rgb(34 31 64 / 91%);
  --Engineering-fleid-dark-bg: #351A75;
  --designing-fleid-dark-bg: #0B4627;
  --product-fleid-dark-bg: #124B68;
  --auth-shade:
    linear-gradient(
      0deg,
      rgba(7, 6, 38, 0.9) 0%,
      rgba(48, 40, 96, 0.9) 100%);
  --login-card-bg: #191540;
  --selected-course: #1E1D63;
  --current-chapter-bg:
    linear-gradient(
      30deg,
      rgba(6, 210, 221, 1) 0%,
      #070626 28%,
      #070626 69%,
      rgba(143, 105, 252, 1) 100%);
  --bella-mobile-menu-bg: rgb(15 14 45);
  --require-chip: #681219;
  --enable-chip-text: #C2F5DA;
  --edit-translate: #682F12;
  --placeholder-color: #99A0AE;
  --success-color: #E0FAEC;
  --green-light: rgba(215, 250, 231, 0.3);
  --lesson-card: rgba(224, 250, 236, 0.3);
  --btn-dark-theme: var(--Engineering-fleid-dark-bg);
  --white: #fff;
  --dot: #8F69FC;
  --magic-icon: #682F12;
  --back-bg: #0B4627;
  --premium-card: rgba(143, 105, 252, 0.3);
  --continue-learing: rgba(255, 241, 235, 0.3);
  --continue-arrow-bg: rgba(255, 228, 214, 0.2);
  --continue-arrow-color: rgba(255, 255, 255, 1);
  --text-theme: #fff;
  --grammar-card-bg-1: rgba(53, 26, 117, 1);
  --blue-white: var(--white);
  --sound-bg: var(--bg-primary-20);
  --video-card-bg: #2D2D4A;
  --video-card-border: #0A0729;
  --video-card-drop-shadow: 0px 0px 0px 1.08px #351A75;
  --video-card-active-bg: #C8C2E2;
  --video-card-active-border: #8A61FF;
  --video-card-active-drop-shadow: 0px 3.25px 1.08px 1.08px #EBEBEB;
  --video-card-inactive-bg: #fff;
  --video-card-inactive-border: #EBEBEB;
  --video-card-inactive-drop-shadow: 0px 3.25px 1.08px 1.08px rgba(143, 143, 143, 0.2), 0px 0px 0px 1.08px rgba(235, 235, 235, 1);
  --video-card-correct-bg: #DBFCEA;
  --video-card-correct-border: #37C390;
  --video-card-incorrect-bg: #FFEBEC;
  --video-card-incorrect-border: #FB3748;
  --bucket-drop-col-bg: rgba(255, 255, 255, 0.05);
  --bucket-drop-col-border: rgba(255, 255, 255, 0.2);
  --bucket-drop-correct-border: #CCF2D1;
  --bucket-drop-correct-shadow: 0px 3px 1px 1px rgba(2, 191, 24, 0.2), 0px 0px 0px 1px #0FAF00;
  --bucket-drop-incorrect-bg: #681219;
  --bucket-drop-incorrect-border: #FB3748;
  --bucket-drop-incorrect-shadow: 0px 3px 1px 1px rgba(247, 0, 4, 0.2), 0px 0px 0px 1px #D80C0F;
  --text-color: #CACFD8;
  --small-card-bg: #1F1E3C;
  --small-card-border: unset;
  --small-card-shadow: 0px 3.7px 1.23px 1.23px rgba(143, 143, 143, 0.2);
  --small-empty-card-bg: #222530;
  --small-empty-card-border: unset;
  --small-empty-card-shadow: 0px 3.7px 1.23px 1.23px var(--light-black);
  --watch-bg: #FF8447;
  --refresh-bgS: #fff;
  --icon-bg: rgba(255, 255, 255, 0.5);
  --text-white-black: #fff;
  --line-color: rgba(255, 255, 255, 1);
  --line-opacity: 0.6;
  --mtp-bg: #2D2D4A;
  --mtp-border: #302F61;
  --mtp-shadow: 0px 3px 1px 1px rgba(143, 143, 143, 0.2);
  --mtp-selected-bg: #351A75;
  --mtp-selected-border: #7D52F4;
  --mtp-selected-shadow: 0px 3px 1px 1px rgba(163, 91, 231, 0.2), 0px 0px 0px 1px #A74AEE;
  --true-ans-bg: #0B4627;
  --true-ans-border: #1FC16B;
  --true-ans-shadow: 0px 3px 1px 1px rgba(143, 143, 143, 0.2);
  --false-ans-bg: #681219;
  --false-ans-border: #FB3748;
  --false-ans-shadow: 0px 3px 1px 1px rgba(143, 143, 143, 0.2);
  --black-and-white: #99A0AE;
  --white-and-blue: #250D5D;
  --white-and-lightblue: #351A75;
  --lightblack-and-white: #FFFFFF;
  --light-dark-theme: var(--career-sections-bg);
  --notification-text-color: #CACFD8;
  --light-gray-color: #525866;
  --timeline-card: #070626e6;
  --experience-icon-bg: #1a0d4d;
  --white-and-black-01: #0E121B;
  --black-and-white-01: #fff;
  --transparent-and-black: #0E121B;
  --basic-btn: none;
  --gem-100: #06D2DD;
  --gem-350: #06D2DD;
  --gem-750: #06D2DD;
  --gem-2000: #06D2DD;
  --gem-card-bg-color: #3F389F;
  --gem-card-box-shadow: rgba(14, 18, 27, 0.1);
  --sub-text-01: rgba(255, 255, 255, 0.5);
  --divider-line-color: #8F69FC;
  --divider-text-color: #8F69FC;
  --divider-line-color-2: rgba(128, 128, 128, 0.55);
  --my-itme-border: rgba(0, 0, 0, 0.3);
  --my-itme-bg-color: rgba(63, 56, 159, 1);
  --my-itme-line-color: rgba(0, 0, 0, 0.2);
  --my-itme-text-color: rgba(153, 153, 153, 1);
  --my-itme-heart-count: rgba(247, 79, 158, 1);
  --my-itme-gems-count: rgba(143, 105, 252, 1);
  --my-itme-freezes-count: rgba(106, 164, 255, 1);
  --heart-poup-bg-color: #070626;
  --heart-bg-color: rgba(143, 105, 252, 0.2);
  --streak-freeze-color: #06D2DD;
  --refile-hert-color: #F74F9E;
  --exercise-congrats-title: #ACACAC;
  --exercise-congrats-redu: rgba(128, 128, 128, 0.55);
  --mat-check-icon-bg: #E0FAEC;
  --mat-check-icon: rgba(128, 128, 128, 0.55);
  --green: rgba(31, 193, 107, 1);
  --progress-blank: #392b78;
  --progress-filled: rgba(143, 105, 252, 1);
  --mastered: rgba(82, 88, 102, 1);
  --chip-border-color: rgba(53, 26, 117, 1);
  --chip-bg-color: rgba(221, 214, 254, 0.5);
  --chip-text-color: rgba(202, 192, 255, 1);
  --chip-shadow-color: rgba(0, 0, 0, 0.05);
  --text-color-001: rgba(143, 105, 252, 1);
  --sentence-card-bg-gradient: rgba(143, 105, 252, 1);
  --black-and-white: rgba(255, 255, 255, 1);
  --gray-white-color: rgba(202, 207, 216, 1);
  --light-and-dark-blue: rgba(53, 26, 117, 0.6);
  --audio-speed-bg-color: rgba(143, 105, 252, 1);
  --audio-speed-color: rgba(255, 255, 255, 1);
  --audio-speed-shadow: rgba(143, 105, 252, 0.12);
  --sentence-card-shadow: inset 0 1.5px 0 1px rgba(255, 255, 255, 0.95), 0 4px 15px -3px rgba(7, 6, 38, 0.02);
  --practice-border-color: rgba(226, 232, 240, 0.85);
  --light-black-color: rgba(71, 85, 105, 1);
  --sentence-card-line-color: #7B54E8;
  --video-content-card-bg: rgba(143, 105, 252, 0.2);
  --video-bookmark-color: rgba(56, 43, 130, 1);
  --video-title: #FFF;
  --video-subtitle: #DDD1FF;
  --stop-wasting-time-bg: linear-gradient(#0A082E, #141045);
  --cut-wordj-color: #8F69FC;
  --stop-wasting-time-description: #A3A8BD;
  --learn-section-bg: #0A082D;
  --real-world-section-bg: #070626;
  --section-bg-color: #F8FAFC;
  --french-card-bg-color: #8F69FC;
  --french-btn-bg-color: #633ECC;
  --german-card-bg-color: #1FC16B;
  --german-btn-bg-color: #108A4A;
  --english-card-bg-color: #04A5AD;
  --english-btn-bg-color: #02848B;
  --chinese-card-bg-color: #F1A62D;
  --chinese-btn-bg-color: #C4831B;
  --footer-bg-3: #040317;
  --footer-text: #8E93A6;
  --footer-text-hover: #8F69FC;
  --testimonials-card-bg: #221C63;
  --testimonials-btn-bg: #1F3445;
  --testimonials-color: #45D2DD;
  --your-first-title: #070626;
  --your-first-description: #045A5F;
  --header-bg-2: rgba(11, 9, 51, 0.95);
  --login-btn-text: #8F69FC;
  --language-btn-border: rgba(43, 39, 102, 1);
  --language-btn-text: #fff;
  --mat-menu-bg: #13103D;
  --mat-menu-border: #26205E;
  --mat-menu-item-bg: #211C54;
  --mat-menu-item-text: #A388FF;
  --lang-name: #FFF;
  --menu-item-hover: #211c54c7;
  --notification-color: rgba(202, 207, 216, 1);
  --student-header-bg: rgba(255, 255, 255, 0.03);
  --student-header-border: rgba(255, 255, 255, 0.2);
}
:root[data-theme=dark] body {
  background-color: var(--BellaSpeak-bg);
}
:root[data-theme=dark] body .home-container,
:root[data-theme=dark] body .pricing-container,
:root[data-theme=dark] body .features-container {
  width: 100%;
  background-color: var(--hero-bg);
}
:root[data-theme=dark] body .home-container .hero-section,
:root[data-theme=dark] body .pricing-container .hero-section,
:root[data-theme=dark] body .features-container .hero-section {
  background: var(--pricing-hero-section-bg) !important;
}
:root[data-theme=dark] body .home-container .hero-section .hero-title .dark,
:root[data-theme=dark] body .pricing-container .hero-section .hero-title .dark,
:root[data-theme=dark] body .features-container .hero-section .hero-title .dark {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .ppp-icon mat-icon,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .ppp-icon mat-icon,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .ppp-icon mat-icon {
  color: var(--accent-color) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .ppp-email,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .ppp-email,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .ppp-email {
  color: var(--accent-color) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid {
  background-color: var(--pricing-grid-bg) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .plan-pro,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .plan-pro,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .plan-pro {
  color: var(--beyond-apart) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .featured-badge .most,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .featured-badge .most,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .featured-badge .most {
  filter: unset !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover {
  background-color: transparent !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-button,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-button,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-button {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-type,
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-price,
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .featured-badge,
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-details .price-section .price,
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-details .price-section .period,
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .features-list .feature-item,
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-val,
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-tags,
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .features-list .feature-item span,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-type,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-price,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .featured-badge,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-details .price-section .price,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-details .price-section .period,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .features-list .feature-item,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-val,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-tags,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .features-list .feature-item span,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-type,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-price,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .featured-badge,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-details .price-section .price,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-details .price-section .period,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .features-list .feature-item,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-val,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .plan-tags,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .features-list .feature-item span {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .features-list .feature-item .check-icon,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .features-list .feature-item .check-icon,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner:hover .features-list .feature-item .check-icon {
  color: var(--primary-color) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .plan-button,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .plan-button,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .plan-button {
  color: var(--secondary-color) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .plan-header .plan-description,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .plan-header .plan-description,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .plan-header .plan-description {
  color: var(--beyond-apart) !important;
}
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .price,
:root[data-theme=dark] body .home-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .period,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .price,
:root[data-theme=dark] body .pricing-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .period,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .price,
:root[data-theme=dark] body .features-container .hero-section .price-wrapper .pricing-grid .pricing-card .pricing-card-inner .period {
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .hero-section .bellaspeak-features-outer,
:root[data-theme=dark] body .pricing-container .hero-section .bellaspeak-features-outer,
:root[data-theme=dark] body .features-container .hero-section .bellaspeak-features-outer {
  background-color: var(--beyond-apart) !important;
}
:root[data-theme=dark] body .home-container .hero-section .feature-row,
:root[data-theme=dark] body .pricing-container .hero-section .feature-row,
:root[data-theme=dark] body .features-container .hero-section .feature-row {
  background: var(--bg-primary-10) !important;
  border-radius: 16px;
  padding: 50px;
}
:root[data-theme=dark] body .home-container .hero-section .feature-row .feature-card,
:root[data-theme=dark] body .pricing-container .hero-section .feature-row .feature-card,
:root[data-theme=dark] body .features-container .hero-section .feature-row .feature-card {
  background: var(--path-outer-card) !important;
  padding: 1px;
  box-sizing: border-box;
  border: 0;
}
:root[data-theme=dark] body .home-container .hero-section .feature-row .feature-card .feature-card-inner,
:root[data-theme=dark] body .pricing-container .hero-section .feature-row .feature-card .feature-card-inner,
:root[data-theme=dark] body .features-container .hero-section .feature-row .feature-card .feature-card-inner {
  background: var(--path-card) !important;
  padding: 16px 32px;
  border-radius: 16px;
  box-sizing: border-box;
}
:root[data-theme=dark] body .home-container .hero-section .divice .phone-top,
:root[data-theme=dark] body .home-container .hero-section .divice .cart,
:root[data-theme=dark] body .home-container .hero-section .divice .bell,
:root[data-theme=dark] body .pricing-container .hero-section .divice .phone-top,
:root[data-theme=dark] body .pricing-container .hero-section .divice .cart,
:root[data-theme=dark] body .pricing-container .hero-section .divice .bell,
:root[data-theme=dark] body .features-container .hero-section .divice .phone-top,
:root[data-theme=dark] body .features-container .hero-section .divice .cart,
:root[data-theme=dark] body .features-container .hero-section .divice .bell {
  filter: invert(1);
}
:root[data-theme=dark] body .home-container .hero-section .divice .day-card .day-icon,
:root[data-theme=dark] body .pricing-container .hero-section .divice .day-card .day-icon,
:root[data-theme=dark] body .features-container .hero-section .divice .day-card .day-icon {
  background-color: var(--bg-acc);
}
:root[data-theme=dark] body .home-container .hero-section .divice .Checkpoint,
:root[data-theme=dark] body .pricing-container .hero-section .divice .Checkpoint,
:root[data-theme=dark] body .features-container .hero-section .divice .Checkpoint {
  background-color: var(--primary-light) !important;
}
:root[data-theme=dark] body .home-container .uniquefeatures-section,
:root[data-theme=dark] body .pricing-container .uniquefeatures-section,
:root[data-theme=dark] body .features-container .uniquefeatures-section {
  padding: 0 !important;
}
:root[data-theme=dark] body .home-container .uniquefeatures-section .uniquefeatures-section-inner,
:root[data-theme=dark] body .pricing-container .uniquefeatures-section .uniquefeatures-section-inner,
:root[data-theme=dark] body .features-container .uniquefeatures-section .uniquefeatures-section-inner {
  background: var(--bg-primary-10) !important;
  margin: 0 8px;
  border-radius: 16px;
  padding: 100px 0;
}
@media (max-width: 992px) {
  :root[data-theme=dark] body .home-container .uniquefeatures-section .uniquefeatures-section-inner,
  :root[data-theme=dark] body .pricing-container .uniquefeatures-section .uniquefeatures-section-inner,
  :root[data-theme=dark] body .features-container .uniquefeatures-section .uniquefeatures-section-inner {
    padding: 80px 0;
  }
}
@media (max-width: 768px) {
  :root[data-theme=dark] body .home-container .uniquefeatures-section .uniquefeatures-section-inner,
  :root[data-theme=dark] body .pricing-container .uniquefeatures-section .uniquefeatures-section-inner,
  :root[data-theme=dark] body .features-container .uniquefeatures-section .uniquefeatures-section-inner {
    padding: 50px 0;
  }
}
:root[data-theme=dark] body .home-container .uniquefeatures-section .uniquefeatures-section-inner .feature-card,
:root[data-theme=dark] body .pricing-container .uniquefeatures-section .uniquefeatures-section-inner .feature-card,
:root[data-theme=dark] body .features-container .uniquefeatures-section .uniquefeatures-section-inner .feature-card {
  background: var(--path-outer-card) !important;
  padding: 1px;
  box-sizing: border-box;
  border: 0;
}
:root[data-theme=dark] body .home-container .uniquefeatures-section .uniquefeatures-section-inner .feature-card .feature-card-inner,
:root[data-theme=dark] body .pricing-container .uniquefeatures-section .uniquefeatures-section-inner .feature-card .feature-card-inner,
:root[data-theme=dark] body .features-container .uniquefeatures-section .uniquefeatures-section-inner .feature-card .feature-card-inner {
  background: var(--path-card) !important;
  padding: 16px 32px;
  border-radius: 16px;
  box-sizing: border-box;
}
:root[data-theme=dark] body .home-container .features-showcase-section.Why-BellaSpeak,
:root[data-theme=dark] body .home-container .Real-Progress-section,
:root[data-theme=dark] body .home-container .faq-section,
:root[data-theme=dark] body .home-container .pre-footer,
:root[data-theme=dark] body .home-container .testmonial-section,
:root[data-theme=dark] body .home-container .uniquefeatures-section,
:root[data-theme=dark] body .home-container .features-section,
:root[data-theme=dark] body .pricing-container .features-showcase-section.Why-BellaSpeak,
:root[data-theme=dark] body .pricing-container .Real-Progress-section,
:root[data-theme=dark] body .pricing-container .faq-section,
:root[data-theme=dark] body .pricing-container .pre-footer,
:root[data-theme=dark] body .pricing-container .testmonial-section,
:root[data-theme=dark] body .pricing-container .uniquefeatures-section,
:root[data-theme=dark] body .pricing-container .features-section,
:root[data-theme=dark] body .features-container .features-showcase-section.Why-BellaSpeak,
:root[data-theme=dark] body .features-container .Real-Progress-section,
:root[data-theme=dark] body .features-container .faq-section,
:root[data-theme=dark] body .features-container .pre-footer,
:root[data-theme=dark] body .features-container .testmonial-section,
:root[data-theme=dark] body .features-container .uniquefeatures-section,
:root[data-theme=dark] body .features-container .features-section {
  background: var(--features-showcase-section-bg) !important;
}
:root[data-theme=dark] body .home-container .features-showcase-section.Why-BellaSpeak .feature-detail,
:root[data-theme=dark] body .home-container .features-showcase-section.Why-BellaSpeak .feature-head,
:root[data-theme=dark] body .home-container .Real-Progress-section .feature-detail,
:root[data-theme=dark] body .home-container .Real-Progress-section .feature-head,
:root[data-theme=dark] body .home-container .faq-section .feature-detail,
:root[data-theme=dark] body .home-container .faq-section .feature-head,
:root[data-theme=dark] body .home-container .pre-footer .feature-detail,
:root[data-theme=dark] body .home-container .pre-footer .feature-head,
:root[data-theme=dark] body .home-container .testmonial-section .feature-detail,
:root[data-theme=dark] body .home-container .testmonial-section .feature-head,
:root[data-theme=dark] body .home-container .uniquefeatures-section .feature-detail,
:root[data-theme=dark] body .home-container .uniquefeatures-section .feature-head,
:root[data-theme=dark] body .home-container .features-section .feature-detail,
:root[data-theme=dark] body .home-container .features-section .feature-head,
:root[data-theme=dark] body .pricing-container .features-showcase-section.Why-BellaSpeak .feature-detail,
:root[data-theme=dark] body .pricing-container .features-showcase-section.Why-BellaSpeak .feature-head,
:root[data-theme=dark] body .pricing-container .Real-Progress-section .feature-detail,
:root[data-theme=dark] body .pricing-container .Real-Progress-section .feature-head,
:root[data-theme=dark] body .pricing-container .faq-section .feature-detail,
:root[data-theme=dark] body .pricing-container .faq-section .feature-head,
:root[data-theme=dark] body .pricing-container .pre-footer .feature-detail,
:root[data-theme=dark] body .pricing-container .pre-footer .feature-head,
:root[data-theme=dark] body .pricing-container .testmonial-section .feature-detail,
:root[data-theme=dark] body .pricing-container .testmonial-section .feature-head,
:root[data-theme=dark] body .pricing-container .uniquefeatures-section .feature-detail,
:root[data-theme=dark] body .pricing-container .uniquefeatures-section .feature-head,
:root[data-theme=dark] body .pricing-container .features-section .feature-detail,
:root[data-theme=dark] body .pricing-container .features-section .feature-head,
:root[data-theme=dark] body .features-container .features-showcase-section.Why-BellaSpeak .feature-detail,
:root[data-theme=dark] body .features-container .features-showcase-section.Why-BellaSpeak .feature-head,
:root[data-theme=dark] body .features-container .Real-Progress-section .feature-detail,
:root[data-theme=dark] body .features-container .Real-Progress-section .feature-head,
:root[data-theme=dark] body .features-container .faq-section .feature-detail,
:root[data-theme=dark] body .features-container .faq-section .feature-head,
:root[data-theme=dark] body .features-container .pre-footer .feature-detail,
:root[data-theme=dark] body .features-container .pre-footer .feature-head,
:root[data-theme=dark] body .features-container .testmonial-section .feature-detail,
:root[data-theme=dark] body .features-container .testmonial-section .feature-head,
:root[data-theme=dark] body .features-container .uniquefeatures-section .feature-detail,
:root[data-theme=dark] body .features-container .uniquefeatures-section .feature-head,
:root[data-theme=dark] body .features-container .features-section .feature-detail,
:root[data-theme=dark] body .features-container .features-section .feature-head {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .home-container .features-showcase-section.Why-BellaSpeak .bellaspeak-features-outer,
:root[data-theme=dark] body .home-container .Real-Progress-section .bellaspeak-features-outer,
:root[data-theme=dark] body .home-container .faq-section .bellaspeak-features-outer,
:root[data-theme=dark] body .home-container .pre-footer .bellaspeak-features-outer,
:root[data-theme=dark] body .home-container .testmonial-section .bellaspeak-features-outer,
:root[data-theme=dark] body .home-container .uniquefeatures-section .bellaspeak-features-outer,
:root[data-theme=dark] body .home-container .features-section .bellaspeak-features-outer,
:root[data-theme=dark] body .pricing-container .features-showcase-section.Why-BellaSpeak .bellaspeak-features-outer,
:root[data-theme=dark] body .pricing-container .Real-Progress-section .bellaspeak-features-outer,
:root[data-theme=dark] body .pricing-container .faq-section .bellaspeak-features-outer,
:root[data-theme=dark] body .pricing-container .pre-footer .bellaspeak-features-outer,
:root[data-theme=dark] body .pricing-container .testmonial-section .bellaspeak-features-outer,
:root[data-theme=dark] body .pricing-container .uniquefeatures-section .bellaspeak-features-outer,
:root[data-theme=dark] body .pricing-container .features-section .bellaspeak-features-outer,
:root[data-theme=dark] body .features-container .features-showcase-section.Why-BellaSpeak .bellaspeak-features-outer,
:root[data-theme=dark] body .features-container .Real-Progress-section .bellaspeak-features-outer,
:root[data-theme=dark] body .features-container .faq-section .bellaspeak-features-outer,
:root[data-theme=dark] body .features-container .pre-footer .bellaspeak-features-outer,
:root[data-theme=dark] body .features-container .testmonial-section .bellaspeak-features-outer,
:root[data-theme=dark] body .features-container .uniquefeatures-section .bellaspeak-features-outer,
:root[data-theme=dark] body .features-container .features-section .bellaspeak-features-outer {
  background-color: var(--dir-arrow-hover) !important;
}
:root[data-theme=dark] body .home-container .features-section:nth-child(even),
:root[data-theme=dark] body .pricing-container .features-section:nth-child(even),
:root[data-theme=dark] body .features-container .features-section:nth-child(even) {
  background-color: var(--features-bg-even) !important;
}
:root[data-theme=dark] body .home-container .testmonial-section .testmonial-card,
:root[data-theme=dark] body .pricing-container .testmonial-section .testmonial-card,
:root[data-theme=dark] body .features-container .testmonial-section .testmonial-card {
  background: var(--path-outer-card);
  padding: 1px !important;
  height: 420px;
  box-sizing: border-box;
}
:root[data-theme=dark] body .home-container .testmonial-section .testmonial-card .testmonial-card-inner,
:root[data-theme=dark] body .pricing-container .testmonial-section .testmonial-card .testmonial-card-inner,
:root[data-theme=dark] body .features-container .testmonial-section .testmonial-card .testmonial-card-inner {
  padding: 48px;
  background-color: var(--testmonial-card-dark);
  border-radius: 56px;
  height: 100%;
  box-sizing: border-box;
}
:root[data-theme=dark] body .home-container .testmonial-section .testmonial-card .testmonial-card-inner .user-comment,
:root[data-theme=dark] body .home-container .testmonial-section .testmonial-card .testmonial-card-inner .user-title,
:root[data-theme=dark] body .pricing-container .testmonial-section .testmonial-card .testmonial-card-inner .user-comment,
:root[data-theme=dark] body .pricing-container .testmonial-section .testmonial-card .testmonial-card-inner .user-title,
:root[data-theme=dark] body .features-container .testmonial-section .testmonial-card .testmonial-card-inner .user-comment,
:root[data-theme=dark] body .features-container .testmonial-section .testmonial-card .testmonial-card-inner .user-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .home-container .path-section,
:root[data-theme=dark] body .pricing-container .path-section,
:root[data-theme=dark] body .features-container .path-section {
  padding: 5px;
  background: var(--features-showcase-section-bg) !important;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner,
:root[data-theme=dark] body .features-container .path-section .path-section-inner {
  padding: 100px 0;
  background-color: var(--bg-primary-10);
  border-radius: 16px;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer {
  background: var(--path-outer-card);
  position: relative;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card {
  background: var(--path-card);
  z-index: 3;
  overflow: hidden;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .card-number,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .card-number,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .card-number {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card:after,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card::before,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card:after,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card::before,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card:after,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card::before {
  background-image: url("./media/banner-lines.svg");
  position: absolute;
  top: 0;
  z-index: -1;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  left: 0;
  border-radius: 8px;
  opacity: 0.3;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card::after,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card::after,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card::after {
  background:
    linear-gradient(
      90deg,
      rgba(82, 79, 105, 0) 100%,
      rgba(82, 79, 105, 0.5) 100%);
  z-index: 2;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .outer-card,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .date-back-outer,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .outer-card,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .date-back-outer,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .outer-card,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .date-back-outer {
  background-color: var(--team-inner-card) !important;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .team-card,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .user-comment,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .team-card,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .user-comment,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .team-card,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .user-comment {
  background-color: var(--path-Fluency-card) !important;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card p,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner p,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .team-card p,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .user-comment p,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card p,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner p,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .team-card p,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .user-comment p,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card p,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner p,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .team-card p,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .user-comment p {
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card .user-comment-icon,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner .user-comment-icon,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .team-card .user-comment-icon,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .user-comment .user-comment-icon,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card .user-comment-icon,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner .user-comment-icon,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .team-card .user-comment-icon,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .user-comment .user-comment-icon,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card .user-comment-icon,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner .user-comment-icon,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .team-card .user-comment-icon,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .user-comment .user-comment-icon {
  background-color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card .date-day,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner .date-day,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .team-card .date-day,
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .user-comment .date-day,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card .date-day,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner .date-day,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .team-card .date-day,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .user-comment .date-day,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .Fluency-card .date-day,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .date-back-inner .date-day,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .team-card .date-day,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .user-comment .date-day {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .team-inner-card,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .team-inner-card,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .team-inner-card {
  border: 1px solid var(--text-primary);
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .path-section .path-section-inner .card-row .card-outer .card .team-inner-card .flag-icon,
:root[data-theme=dark] body .pricing-container .path-section .path-section-inner .card-row .card-outer .card .team-inner-card .flag-icon,
:root[data-theme=dark] body .features-container .path-section .path-section-inner .card-row .card-outer .card .team-inner-card .flag-icon {
  background-color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .beyond-section .beyond-section-inner .features-header .what-makes,
:root[data-theme=dark] body .home-container .beyond-section .beyond-section-inner .features-header .bellaspeak-name,
:root[data-theme=dark] body .pricing-container .beyond-section .beyond-section-inner .features-header .what-makes,
:root[data-theme=dark] body .pricing-container .beyond-section .beyond-section-inner .features-header .bellaspeak-name,
:root[data-theme=dark] body .features-container .beyond-section .beyond-section-inner .features-header .what-makes,
:root[data-theme=dark] body .features-container .beyond-section .beyond-section-inner .features-header .bellaspeak-name {
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .beyond-section .beyond-section-inner .beyond-card.lesson-card .lang-card,
:root[data-theme=dark] body .pricing-container .beyond-section .beyond-section-inner .beyond-card.lesson-card .lang-card,
:root[data-theme=dark] body .features-container .beyond-section .beyond-section-inner .beyond-card.lesson-card .lang-card {
  border: 1px solid var(--bg-acc) !important;
}
:root[data-theme=dark] body .home-container .beyond-section .beyond-section-inner .beyond-card.test-card .lang-wrapper .cards .card-list .card .Checkpoint-subtitle,
:root[data-theme=dark] body .pricing-container .beyond-section .beyond-section-inner .beyond-card.test-card .lang-wrapper .cards .card-list .card .Checkpoint-subtitle,
:root[data-theme=dark] body .features-container .beyond-section .beyond-section-inner .beyond-card.test-card .lang-wrapper .cards .card-list .card .Checkpoint-subtitle {
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .beyond-section .beyond-section-inner .beyond-card.test-card .lang-wrapper .cards .card-list .card .Checkpoint-title,
:root[data-theme=dark] body .pricing-container .beyond-section .beyond-section-inner .beyond-card.test-card .lang-wrapper .cards .card-list .card .Checkpoint-title,
:root[data-theme=dark] body .features-container .beyond-section .beyond-section-inner .beyond-card.test-card .lang-wrapper .cards .card-list .card .Checkpoint-title {
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .beyond-section .beyond-section-inner .beyond-card .card .lang-card,
:root[data-theme=dark] body .home-container .beyond-section .beyond-section-inner .beyond-card .card .left-msg,
:root[data-theme=dark] body .home-container .beyond-section .beyond-section-inner .beyond-card .card .right-msg,
:root[data-theme=dark] body .pricing-container .beyond-section .beyond-section-inner .beyond-card .card .lang-card,
:root[data-theme=dark] body .pricing-container .beyond-section .beyond-section-inner .beyond-card .card .left-msg,
:root[data-theme=dark] body .pricing-container .beyond-section .beyond-section-inner .beyond-card .card .right-msg,
:root[data-theme=dark] body .features-container .beyond-section .beyond-section-inner .beyond-card .card .lang-card,
:root[data-theme=dark] body .features-container .beyond-section .beyond-section-inner .beyond-card .card .left-msg,
:root[data-theme=dark] body .features-container .beyond-section .beyond-section-inner .beyond-card .card .right-msg {
  background-color: var(--primary-color) !important;
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .beyond-section .beyond-section-inner .beyond-card .beyond-card-title,
:root[data-theme=dark] body .pricing-container .beyond-section .beyond-section-inner .beyond-card .beyond-card-title,
:root[data-theme=dark] body .features-container .beyond-section .beyond-section-inner .beyond-card .beyond-card-title {
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .Real-Progress-section .real-cards-wrapper .real-card,
:root[data-theme=dark] body .pricing-container .Real-Progress-section .real-cards-wrapper .real-card,
:root[data-theme=dark] body .features-container .Real-Progress-section .real-cards-wrapper .real-card {
  background: var(--real-card) !important;
  border-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] body .home-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header,
:root[data-theme=dark] body .pricing-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header,
:root[data-theme=dark] body .features-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header {
  background-color: var(--faq-acc-bg) !important;
}
:root[data-theme=dark] body .home-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header mat-panel-title,
:root[data-theme=dark] body .pricing-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header mat-panel-title,
:root[data-theme=dark] body .features-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header mat-panel-title {
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header mat-panel-title img,
:root[data-theme=dark] body .pricing-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header mat-panel-title img,
:root[data-theme=dark] body .features-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header mat-panel-title img {
  filter: invert(1);
}
:root[data-theme=dark] body .home-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-indicator svg,
:root[data-theme=dark] body .pricing-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-indicator svg,
:root[data-theme=dark] body .features-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-indicator svg {
  fill: var(--text-primary);
}
:root[data-theme=dark] body .home-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-body,
:root[data-theme=dark] body .pricing-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-body,
:root[data-theme=dark] body .features-container .faq-section .faq-acc .mat-expansion-panel .mat-expansion-panel-body {
  background-color: var(--faq-acc-bg) !important;
  color: var(--text-primary) !important;
}
:root[data-theme=dark] body .home-container .faq-section .viewallfaq,
:root[data-theme=dark] body .pricing-container .faq-section .viewallfaq,
:root[data-theme=dark] body .features-container .faq-section .viewallfaq {
  background-color: var(--login-bg);
  border-color: var(--login-bg);
  color: var(--text-primary);
}
:root[data-theme=dark] body .home-container .Why-BellaSpeak .why-card-row .why-card,
:root[data-theme=dark] body .pricing-container .Why-BellaSpeak .why-card-row .why-card,
:root[data-theme=dark] body .features-container .Why-BellaSpeak .why-card-row .why-card {
  background-color: var(--real-card) !important;
}
:root[data-theme=dark] body .home-container .Why-BellaSpeak .why-card-row .why-card .phone.Choose-phone,
:root[data-theme=dark] body .pricing-container .Why-BellaSpeak .why-card-row .why-card .phone.Choose-phone,
:root[data-theme=dark] body .features-container .Why-BellaSpeak .why-card-row .why-card .phone.Choose-phone {
  background-color: var(--dir-arrow-hover) !important;
}
:root[data-theme=dark] body .career-container {
  background-color: var(--career-sections-bg) !important;
  margin-left: 6px;
}
:root[data-theme=dark] body .career-container .hero-section {
  background: var(--career-hero-bg) !important;
  border-radius: 5px;
}
:root[data-theme=dark] body .career-container .hero-section .container {
  background-color: var(--bg-primary-40);
}
:root[data-theme=dark] body .career-container .section-title,
:root[data-theme=dark] body .career-container .value-card-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .career-container .section-title span,
:root[data-theme=dark] body .career-container .value-card-title span {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] body .career-container .section-detail,
:root[data-theme=dark] body .career-container .value-card-detail {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] body .career-container .Values-section,
:root[data-theme=dark] body .career-container .Culture-section,
:root[data-theme=dark] body .career-container .Benefits-section,
:root[data-theme=dark] body .career-container .Positions-section {
  background-color: var(--career-sections-bg);
}
:root[data-theme=dark] body .career-container .Values-section .value-card,
:root[data-theme=dark] body .career-container .Culture-section .value-card,
:root[data-theme=dark] body .career-container .Benefits-section .value-card,
:root[data-theme=dark] body .career-container .Positions-section .value-card {
  background-color: var(--value-card-dark) !important;
}
:root[data-theme=dark] body .career-container .Values-section .position-card .features-chip,
:root[data-theme=dark] body .career-container .Culture-section .position-card .features-chip,
:root[data-theme=dark] body .career-container .Benefits-section .position-card .features-chip,
:root[data-theme=dark] body .career-container .Positions-section .position-card .features-chip {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] body .career-container .Values-section .position-card .Engineering-fleid,
:root[data-theme=dark] body .career-container .Culture-section .position-card .Engineering-fleid,
:root[data-theme=dark] body .career-container .Benefits-section .position-card .Engineering-fleid,
:root[data-theme=dark] body .career-container .Positions-section .position-card .Engineering-fleid {
  background-color: var(--Engineering-fleid-dark-bg) !important;
}
:root[data-theme=dark] body .career-container .Values-section .position-card .Design-fleid,
:root[data-theme=dark] body .career-container .Culture-section .position-card .Design-fleid,
:root[data-theme=dark] body .career-container .Benefits-section .position-card .Design-fleid,
:root[data-theme=dark] body .career-container .Positions-section .position-card .Design-fleid {
  background-color: var(--designing-fleid-dark-bg) !important;
}
:root[data-theme=dark] body .career-container .Values-section .position-card .Product-fleid,
:root[data-theme=dark] body .career-container .Culture-section .position-card .Product-fleid,
:root[data-theme=dark] body .career-container .Benefits-section .position-card .Product-fleid,
:root[data-theme=dark] body .career-container .Positions-section .position-card .Product-fleid {
  background-color: var(--product-fleid-dark-bg) !important;
  color: var(--bg-s-card-num) !important;
}
:root[data-theme=dark] body .career-container .Values-section .position-card .Apply-btn,
:root[data-theme=dark] body .career-container .Culture-section .position-card .Apply-btn,
:root[data-theme=dark] body .career-container .Benefits-section .position-card .Apply-btn,
:root[data-theme=dark] body .career-container .Positions-section .position-card .Apply-btn {
  background-color: var(--primary-color) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .career-container .Values-section .Challenge-accordion .mat-expansion-panel,
:root[data-theme=dark] body .career-container .Culture-section .Challenge-accordion .mat-expansion-panel,
:root[data-theme=dark] body .career-container .Benefits-section .Challenge-accordion .mat-expansion-panel,
:root[data-theme=dark] body .career-container .Positions-section .Challenge-accordion .mat-expansion-panel {
  background-color: transparent !important;
}
:root[data-theme=dark] body .career-container .Values-section .Challenge-accordion .mat-expansion-panel.mat-expanded,
:root[data-theme=dark] body .career-container .Culture-section .Challenge-accordion .mat-expansion-panel.mat-expanded,
:root[data-theme=dark] body .career-container .Benefits-section .Challenge-accordion .mat-expansion-panel.mat-expanded,
:root[data-theme=dark] body .career-container .Positions-section .Challenge-accordion .mat-expansion-panel.mat-expanded {
  background-color: #151444 !important;
}
:root[data-theme=dark] body .career-container .Values-section .Challenge-accordion .mat-expansion-panel:hover,
:root[data-theme=dark] body .career-container .Values-section .Challenge-accordion .mat-expansion-panel:focus,
:root[data-theme=dark] body .career-container .Culture-section .Challenge-accordion .mat-expansion-panel:hover,
:root[data-theme=dark] body .career-container .Culture-section .Challenge-accordion .mat-expansion-panel:focus,
:root[data-theme=dark] body .career-container .Benefits-section .Challenge-accordion .mat-expansion-panel:hover,
:root[data-theme=dark] body .career-container .Benefits-section .Challenge-accordion .mat-expansion-panel:focus,
:root[data-theme=dark] body .career-container .Positions-section .Challenge-accordion .mat-expansion-panel:hover,
:root[data-theme=dark] body .career-container .Positions-section .Challenge-accordion .mat-expansion-panel:focus {
  background-color: transparent !important;
}
:root[data-theme=dark] body .career-container .Values-section .Challenge-accordion .mat-expansion-panel mat-panel-title,
:root[data-theme=dark] body .career-container .Culture-section .Challenge-accordion .mat-expansion-panel mat-panel-title,
:root[data-theme=dark] body .career-container .Benefits-section .Challenge-accordion .mat-expansion-panel mat-panel-title,
:root[data-theme=dark] body .career-container .Positions-section .Challenge-accordion .mat-expansion-panel mat-panel-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container {
  margin-top: 60px;
  padding-top: 40px;
  background-color: var(--features-showcase-section-bg);
}
:root[data-theme=dark] body .apply-container .Back-btn {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .job-details .job-detail-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .job-details .job-description {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] body .apply-container .position-card .features-chip {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] body .apply-container .position-card .Apply-btn {
  background-color: var(--primary-color) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .position-card .Engineering-fleid {
  color: var(--primary-light);
  background-color: Accent/Vivid Violet;
  border-radius: 12px;
}
:root[data-theme=dark] body .apply-container .Application-form .app-label {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .Application-form .Application-chip {
  background-color: var(--value-card-dark) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .Application-form .form-field-area {
  background-color: transparent !important;
}
:root[data-theme=dark] body .apply-container .Application-form .form-field .mdc-text-field {
  background-color: var(--bg-primary-20);
  border-radius: 10px;
}
:root[data-theme=dark] body .apply-container .Application-form .form-field-area {
  background-color: var(--bg-primary-20) !important;
}
:root[data-theme=dark] body .apply-container .Application-form .dragdrop-wrapper {
  background-color: var(--bg-primary-20);
}
:root[data-theme=dark] body .apply-container .Application-form .dragdrop-wrapper .drag-wrapper .dragdrop-chip {
  background-color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .Application-form .dragdrop-wrapper .dragdrop-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .Application-form .dragdrop-wrapper .dragdrop-subtitle {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] body .apply-container .Application-form .ql-toolbar.ql-snow,
:root[data-theme=dark] body .apply-container .Application-form .ql-container.ql-snow,
:root[data-theme=dark] body .apply-container .Application-form .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border: 1px solid var(--border-light);
  background-color: var(--bg-primary-20);
}
:root[data-theme=dark] body .apply-container .Application-form .ql-snow .ql-stroke {
  stroke: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .Application-form .ql-snow .ql-fill {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .Application-form .quill-editor .ql-container .ql-editor {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .apply-container .Application-form .submit-btn {
  background-color: var(--primary-color) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] body .login-button,
:root[data-theme=dark] body .enterprise-login-button {
  background: var(--login-bg) !important;
  border-color: var(--bg-primary-40) !important;
  color: #fff !important;
}
:root[data-theme=dark] body .login-button2 {
  background: var(--team-inner-card) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content {
  background-color: var(--bg-primary-6) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card {
  background-color: var(--login-card-bg) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .auth-title {
  color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .auth-description {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .auth-btn {
  background-color: var(--team-inner-card) !important;
  color: var(--lang-title);
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card input {
  background-color: transparent !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card input:focus {
  border-color: var(--theme-color) !important;
  color: var(--theme-color) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .mat-icon {
  color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .auth-label {
  color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .login-form .auth-form-field .mat-mdc-input-element {
  background-color: transparent !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .login-form .auth-form-field .mat-mdc-form-field-icon-suffix > .mat-icon {
  color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .continue-btns-wrapper .Continue-btn {
  border-color: var(--bg-primary-10) !important;
  color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .continue-btns-wrapper .Continue-btn:nth-child(odd) img {
  filter: invert(1);
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .continue-btns-wrapper .Enterprise-btn img {
  filter: invert(1);
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .continue-btns-wrapper .divider .or-text {
  background-color: var(--login-card-bg) !important;
  color: var(--lang-title);
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .lang-label {
  color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .speak-selector-wrapper .speak-field .mat-mdc-text-field-wrapper {
  background-color: var(--value-card-dark) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .speak-selector-wrapper .speak-field .mat-mdc-text-field-wrapper .mat-mdc-notch-piece {
  border-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .speak-selector-wrapper .speak-field .spokenLanguages {
  color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container mat-radio-group .mat-mdc-radio-checked .lang-card {
  border-color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container mat-radio-group .mat-mdc-radio-checked .mdc-form-field .check_circle {
  width: 16px;
  height: 15px;
  text-align: center;
  background-color: var(--lang-title) !important;
  color: var(--theme-color) !important;
  padding-top: 1.5px;
  border-radius: 100%;
  right: -10px;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container .lang-card .Chapters-wrapper img {
  filter: invert(1);
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container .lang-card .Chapters-wrapper .bus-chip.first {
  background-color: rgba(255, 241, 235, 0.2);
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container .lang-card .Chapters-wrapper .bus-chip.second {
  background-color: rgba(140, 194, 223, 0.2);
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container .lang-card .Chapters-wrapper .bus-chip.third {
  background-color: rgba(239, 235, 255, 0.2);
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container .lang-card {
  border-color: var(--bg-primary-10) !important;
  background-color: var(--value-card-dark) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container .lang-card p {
  color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container .lang-card.selected-course {
  background-color: var(--selected-course) !important;
  border-color: var(--primary-color) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container mat-radio-group .mdc-form-field {
  border-color: var(--bg-primary-10) !important;
  background-color: var(--value-card-dark) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container mat-radio-group .mdc-form-field .check_circle {
  background-color: var(--login-card-bg) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container mat-radio-group .mdc-form-field .lang-name {
  color: var(--lang-title) !important;
}
:root[data-theme=dark] body .auth-wrapper .auth-shade .login-content .login-card .bella-form-container mat-radio-group .mat-mdc-radio-checked .mdc-form-field {
  border-color: var(--lang-title) !important;
}
:root[data-theme=dark] body .learn-wrapper {
  background-color: var(--career-sections-bg) !important;
}
:root[data-theme=dark] body .learn-wrapper .bella-header {
  border-color: var(--bg-primary-20);
  background-color: var(--bg-primary-03);
}
:root[data-theme=dark] body .learn-wrapper .bella-header .language-selector button {
  color: var(--acc-bg);
}
:root[data-theme=dark] body .learn-wrapper .bella-header .header-center-menu {
  color: var(--em-path-fea-detail);
}
:root[data-theme=dark] body .learn-wrapper .bella-header .profile-wrapper .menu-right-item {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-header .chapter-name {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-header .chapter-progress .mdc-linear-progress__buffer-bar {
  background-color: var(--learn-progress) !important;
  opacity: 0.2 !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-header .progress-value {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-header .faster-card .faster-title {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .download-btn {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .chapter-list .left .chapter-icon-wrapper .chapter-icon {
  background-color: var(--current-chapter-bg) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .chapter-list .left .mat-icon {
  color: var(--beyond-apart) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .chapter-list .left.locked .chapter-icon-wrapper mat-icon {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .Premium-chip,
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .Review-card {
  background-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .Review-card .Review-card-title {
  color: var(--acc-bg) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .Review-card .Review-icon-wrapper .Review-icon mat-icon {
  color: var(--login-text) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .Review-card .play-btn {
  background-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .Review-card.Ready_to_levelup {
  background-color: var(--primary-color) !important;
}
:root[data-theme=dark] body .learn-wrapper .learn-container .chapter-body .Review-card.Ready_to_levelup .play-btn {
  background-color: var(--login-text) !important;
}
:root[data-theme=dark] body .mat-mdc-select-panel {
  background-color: var(--lang-title) !important;
}
:root[data-theme=dark] .profile-container .profile-card,
:root[data-theme=dark] .profile-container .rewards-card {
  background-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .profile-container .profile_img {
  border-color: var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .profile-name {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .profile-cover .free-label {
  background-color: var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .profile_img_wrapper .edit-profile-icon {
  border-color: var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .profile-detail {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .profile-container .cate-name {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .profile-container .days .day {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .profile-container .days .day .day-icon {
  border: 1px solid var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .days .day.active-day {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .Progress-btn {
  color: var(--bg-acc) !important;
  border-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .profile-container .rewards-card .rewards-icon svg path {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .rewards-card .rewards-label {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .profile-container .faster-card .faster-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .faster-card .upgrade-btn {
  background-color: var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .viewall_btn {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .profile-container .Achievements-icon path {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] .Settings-container .card-radio ::ng-deep .mat-internal-form-field {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Settings-container .card-radio ::ng-deep .mdc-radio__outer-circle {
  background-color: var(--bg-primary-10);
}
:root[data-theme=dark] .Settings-container .card-radio ::ng-deep .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__outer-circle {
  background: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}
:root[data-theme=dark] .Settings-container .require-chip {
  background-color: var(--require-chip) !important;
  color: var(--require-chip-text) !important;
}
:root[data-theme=dark] .Settings-container .enable-chip {
  background-color: var(--designing-fleid-dark-bg) !important;
  color: var(--enable-chip-text) !important;
}
:root[data-theme=dark] .Settings-container .page-title,
:root[data-theme=dark] .Settings-container .menu-label,
:root[data-theme=dark] .Settings-container .menu-item {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Settings-container .page-title svg {
  filter: invert(1);
}
:root[data-theme=dark] .Settings-container .menu-item {
  background-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .Settings-container .menu-item svg path {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] .Settings-container .menu-item.logout {
  color: var(--logout-text) !important;
}
:root[data-theme=dark] .Settings-container .menu-item.logout svg path {
  fill: var(--logout-text) !important;
}
:root[data-theme=dark] .Settings-container .menu-item .Setting_imput,
:root[data-theme=dark] .Settings-container .menu-item .access-box {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .Settings-container .menu-item .Setting_imput::-webkit-input-placeholder,
:root[data-theme=dark] .Settings-container .menu-item .access-box::-webkit-input-placeholder {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Settings-container .menu-item .Wifi {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Settings-container .menu-item .access-box svg path {
  fill: var(--primary-light) !important;
}
:root[data-theme=dark] .Settings-container .Permissions .menu-item-title,
:root[data-theme=dark] .Settings-container .Permissions .menu-item-subtitle {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .Settings-container .mat-expansion-indicator svg path {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] .Manage_Accounts .menu-item {
  box-shadow: none !important;
  background-color: var(--bg-primary-10) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Manage_Accounts .menu-item svg path {
  filter: invert(1);
}
:root[data-theme=dark] .Manage_Accounts .menu-item.Delete-acc {
  color: var(--logout-text) !important;
}
:root[data-theme=dark] .Manage_Accounts .menu-item .menu-item-label {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Manage_Accounts .menu-item.Link-acc-wrapper {
  background: unset !important;
  background-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .Manage_Accounts .menu-item.Link-acc-wrapper path {
  filter: unset !important;
}
:root[data-theme=dark] .Manage_Accounts .menu-item.Link-acc-wrapper:nth-child(2n) path,
:root[data-theme=dark] .Manage_Accounts .menu-item.Link-acc-wrapper:nth-child(3n) svg path {
  filter: invert(1) !important;
}
:root[data-theme=dark] .getcode-overlay .getcode-popup {
  background-color: var(--secondary-color) !important;
}
:root[data-theme=dark] .getcode-overlay .getcode-popup .popup-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .getcode-overlay .getcode-popup .popup-subtitle {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .getcode-overlay .getcode-popup .help-wrapper {
  background-color: var(--bg-primary-10) !important;
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .getcode-overlay .getcode-popup .help-wrapper .popup-icon {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .getcode-overlay .getcode-popup .Setting_imput {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .getcode-overlay .getcode-popup .mat-mdc-checkbox .mdc-label {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .getcode-overlay .getcode-popup .popup-action,
:root[data-theme=dark] .getcode-overlay .getcode-popup .Cancel {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .getcode-overlay .getcode-popup .popup-action button,
:root[data-theme=dark] .getcode-overlay .getcode-popup .Cancel button {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .getcode-overlay.show .changenumber,
:root[data-theme=dark] .getcode-overlay.show .sendcode,
:root[data-theme=dark] .getcode-overlay.show .sendagain {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .setupauthenticator .authenticator-subtitle,
:root[data-theme=dark] .setupauthenticator .verify-text,
:root[data-theme=dark] .setupauthenticator .or-text {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .setupauthenticator .or-text::after,
:root[data-theme=dark] .setupauthenticator .or-text::before {
  background-color: var(--text-secondary) !important;
}
:root[data-theme=dark] .setupauthenticator .verify-code {
  background-color: var(--bg-primary-10) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .Review-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .Review-title svg {
  filter: invert(1);
}
:root[data-theme=dark] .Review-container .quiz-icon {
  background-color: var(--Engineering-fleid-dark-bg) !important;
}
:root[data-theme=dark] .Review-container .quiz-icon path {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .quiz-item-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .Review-tab.Review-tab-dark .mat-mdc-tab-label-container .mdc-tab-indicator--active .mdc-tab__text-label {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .Review-tab .mat-mdc-tab-label-container {
  background-color: var(--login-bg) !important;
}
:root[data-theme=dark] .Review-container .Review-tab .mat-mdc-tab-label-container .mdc-tab-indicator--active {
  background-color: var(--bg-primary-20) !important;
}
:root[data-theme=dark] .Review-container .Review-tab .vocabulary-section-title,
:root[data-theme=dark] .Review-container .Review-tab .quiz-card-title,
:root[data-theme=dark] .Review-container .Review-tab .quiz-item-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .faster-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .Upgrade-btn {
  background-color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .vocabulary-card {
  background-color: var(--bg-primary-10);
}
:root[data-theme=dark] .Review-container .vocabulary-card .nogrammer-icon {
  padding: 10px 12px;
  padding-bottom: 6px;
  background-color: var(--bg-acc) !important;
  border-radius: 10px;
  width: max-content;
  margin: 0 auto;
}
:root[data-theme=dark] .Review-container .vocabulary-card .vocabulary-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .vocabulary-card .vocabulary-subtitle {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .Review-container .tries-text {
  background-color: var(--Engineering-fleid-dark-bg) !important;
  color: var(--result-card-border) !important;
}
:root[data-theme=dark] .Review-container .tries-wrapper path {
  filter: invert(1);
}
:root[data-theme=dark] .Review-container .search-input .mdc-text-field {
  background-color: var(--bg-primary-20) !important;
}
:root[data-theme=dark] .Review-container .search-input .mdc-text-field .mdc-text-field__input {
  color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .Review-container .search-input .search-icon {
  filter: invert(1);
}
:root[data-theme=dark] .Review-container .filtericon path {
  filter: invert(1);
}
:root[data-theme=dark] .Review-container .grammar-card {
  background-color: var(--bg-primary-10);
}
:root[data-theme=dark] .Review-container .grammar-card .grammar-card-title,
:root[data-theme=dark] .Review-container .grammar-card .readmore {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .Review-container .grammar-card .Intermediate {
  background-color: var(--Engineering-fleid-dark-bg) !important;
  color: var(--result-card-border) !important;
}
:root[data-theme=dark] .Review-container .grammar-card .Tense {
  background-color: var(--product-job-text) !important;
  color: var(--bg-s-card-num) !important;
}
:root[data-theme=dark] .ex-container .ex-header-title {
  color: var(--text-secondary-dark);
}
:root[data-theme=dark] .ex-container .ex-card-container .ex-card {
  background-color: var(--bg-primary-20) !important;
}
:root[data-theme=dark] .ex-container .ex-card-container .ex-card.know-card,
:root[data-theme=dark] .ex-container .ex-card-container .ex-card.still-card {
  background-color: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container .ex-card-container .ex-card.know-card .ex-card-text,
:root[data-theme=dark] .ex-container .ex-card-container .ex-card.still-card .ex-card-text {
  color: var(--secondary-color) !important;
}
:root[data-theme=dark] .ex-container .ex-card-container .ex-card svg path {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container .ex-card-container .ex-card .ex-card-text {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container .ex-card-container .dir-arrow {
  border-color: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container .ex-card-container .dir-arrow path {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container .practice-wrapper {
  background-color: var(--login-bg) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container .practice-wrapper path {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card {
  background-color: var(--career-sections-bg) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .session-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .session-subtitle {
  color: var(--text-secondary-dark) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .devider {
  background-color: var(--bg-primary-20) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .word-card .word-card-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .word-card .word-card-inner {
  background-color: var(--designing-fleid-dark-bg) !important;
  color: var(--enable-chip-text) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .word-card.Review-card .word-card-inner {
  background-color: var(--Engineering-fleid-dark-bg) !important;
  color: var(--result-card-border) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .progress-container .title {
  background-color: var(--career-sections-bg) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .progress-container .title .value {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .quiz-item {
  background-color: var(--bg-primary-20) !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .quiz-item .quiz-icon {
  background-color: transparent !important;
}
:root[data-theme=dark] .ex-container.ex-complete-section .ex-card .done-btn {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup {
  background-color: var(--login-bg) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup .popup-header,
:root[data-theme=dark] .popup-overlay .popup-popup .popup-body {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup .popup-header svg path {
  filter: invert(1);
}
:root[data-theme=dark] .popup-overlay .popup-popup .popup-footer .pro-btn {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-header .left svg path {
  filter: unset;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body .level-item:hover {
  background-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body .level-item:after {
  background-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body .level-item .level-item-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body .another-lang-text {
  color: var(--em-path-fea-detail) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body .acc-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body .another-acc {
  border-color: transparent !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body ::ng-deep .mat-expansion-indicator path {
  filter: invert(1) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body .course-item {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body .course-item .course-item-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .popup-overlay .popup-popup.level-popup .popup-body .course-item .Premium-text {
  background-color: var(--bg-primary-10) !important;
  color: var(--primary-color) !important;
}
:root[data-theme=dark] .popup-overlay.filter-box .sort-btn {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .popup-overlay.filter-box .sort-btn.active {
  background-color: var(--Engineering-fleid-dark-bg) !important;
}
:root[data-theme=dark] .tense-slider-container .tense-card {
  background-color: var(--Engineering-fleid-dark-bg) !important;
}
:root[data-theme=dark] .tense-slider-container .tense-card .card-count,
:root[data-theme=dark] .tense-slider-container .tense-card .tense-card-subtitle,
:root[data-theme=dark] .tense-slider-container .tense-card .tense-card-detail,
:root[data-theme=dark] .tense-slider-container .tense-card .tense-card-example {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .tense-slider-container .tense-card .tense-card-example path {
  fill: var(--bg-acc) !important;
}
:root[data-theme=dark] .earned-gems .gems-inner-card {
  background-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .earned-gems .gems-detail,
:root[data-theme=dark] .earned-gems .job-title,
:root[data-theme=dark] .earned-gems .job-subtitle,
:root[data-theme=dark] .earned-gems .Challenge-card-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .earned-gems .Challenge-card {
  box-shadow: none !important;
  border: 0 !important;
}
:root[data-theme=dark] .earned-gems .Challenge-card .target-inner {
  background-color: var(--bg-acc) !important;
}
:root[data-theme=dark] .earned-gems .Purchase-card {
  background-color: var(--product-job-text) !important;
  border-color: var(--designing-fleid-dark-bg) !important;
}
:root[data-theme=dark] .earned-gems .Purchase-card .purchase-title {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .exercise-header {
  background-color: var(--bg-primary-03) !important;
  border-color: var(--bg-primary-20) !important;
}
:root[data-theme=dark] .exercise-header .go-back-btn,
:root[data-theme=dark] .exercise-header .need-btn {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .exercise-header .go-back-btn path,
:root[data-theme=dark] .exercise-header .need-btn path {
  fill: var(--bg-acc);
}
:root[data-theme=dark] .exercise-header .exe-progress .menu path {
  fill: var(--bg-acc);
}
:root[data-theme=dark] .student-content {
  background-color: var(--career-sections-bg) !important;
}
:root[data-theme=dark] .quesion-card {
  background-color: var(--exer-card-bg) !important;
  border-color: var(--exer-card-border) !important;
}
:root[data-theme=dark] .quesion-card .ques-text,
:root[data-theme=dark] .quesion-card .meaning-text {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .exer-footer {
  background-color: var(--bg-primary-03) !important;
}
:root[data-theme=dark] .translate-exercise .translate-text {
  background-color: var(--Engineering-fleid-dark-bg) !important;
}
:root[data-theme=dark] .translate-exercise .type-btn,
:root[data-theme=dark] .translate-exercise .space-btn,
:root[data-theme=dark] .translate-exercise .mat-mdc-text-field-wrapper {
  background-color: var(--bg-primary-20) !important;
}
:root[data-theme=dark] .translate-exercise .clear-btn {
  background-color: var(--designing-fleid-dark-bg) !important;
}
:root[data-theme=dark] .translate-exercise .mat-mdc-text-field-wrapper {
  border-radius: 8px !important;
}
:root[data-theme=dark] .translate-exercise .mat-mdc-text-field-wrapper ::ng-deep .mat-focused .placeholder {
  color: #00D318 !important;
}
:root[data-theme=dark] .translate-exercise.exercise-wrapper .translate-edit {
  background-color: var(--edit-translate) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper .answer-text {
  border-color: var(--bg-primary-10) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper .type-btn {
  background-color: var(--exer-card-bg) !important;
  border-color: var(--exer-card-border) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper .type-btn.filled {
  background-color: var(--exer-card-border) !important;
  border-color: var(--result-card-border) !important;
  color: var(--exer-card-border) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper .translate-edit {
  background-color: var(--edit-translate) !important;
  border-color: var(--xp-cart-bg) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper .ques-text .answer-text {
  border-color: var(--bg-acc) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper.MatchingPairs-wrapper .type-text {
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper.MatchingPairs-wrapper .Drop-wrapper.true {
  background-color: var(--designing-fleid-dark-bg) !important;
  border-color: var(--complete-Checkpoint) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper.MatchingPairs-wrapper .Drop-wrapper.true .Drop-btn {
  background-color: unset !important;
  border-color: unset !important;
  box-shadow: none !important;
}
:root[data-theme=dark] .translate-sentence-wrapper.MatchingPairs-wrapper .Drop-wrapper .Drop-btn {
  background-color: var(--exer-card-bg) !important;
  border-color: var(--exer-card-border) !important;
  box-shadow: inset 0 0 15px var(--bg-primary-10) !important;
  color: var(--bg-acc) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper.MatchingPairs-wrapper .Drop-wrapper .Drop-btn.true {
  background-color: var(--designing-fleid-dark-bg) !important;
  border-color: var(--complete-Checkpoint) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper.MatchingPairs-wrapper .Drop-wrapper .Drop-btn.false {
  background-color: var(--require-chip) !important;
  border-color: var(--logout-text) !important;
}
:root[data-theme=dark] .translate-sentence-wrapper.MatchingPairs-wrapper .Drop-wrapper .Drop-btn.selected {
  background-color: var(--Engineering-fleid-dark-bg) !important;
  border-color: var(--primary-color) !important;
}
html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--font-primary);
  line-height: 1.8;
  scroll-behavior: smooth;
}
body {
  background-color: var(--career-sections-bg) !important;
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-secondary);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
p {
  margin: 0;
  line-height: 1.6;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: end;
}
.text-start {
  text-align: start;
}
* {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.m-0 {
  margin: 0px;
}
.mt-0 {
  margin-block-start: 0px;
}
.mb-0 {
  margin-block-end: 0px;
}
.ms-0 {
  margin-inline-start: 0px;
}
.me-0 {
  margin-inline-end: 0px;
}
.mx-0 {
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.my-0 {
  margin-block-start: 0px;
  margin-block-end: 0px;
}
.p-0 {
  padding: 0px;
}
.pt-0 {
  padding-block-start: 0px;
}
.pb-0 {
  padding-block-end: 0px;
}
.ps-0 {
  padding-inline-start: 0px;
}
.pe-0 {
  padding-inline-end: 0px;
}
.px-0 {
  padding-inline-start: 0px;
  padding-inline-end: 0px;
}
.py-0 {
  padding-block-start: 0px;
  padding-block-end: 0px;
}
@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0px;
  }
  .mt-sm-0 {
    margin-block-start: 0px;
  }
  .mb-sm-0 {
    margin-block-end: 0px;
  }
  .ms-sm-0 {
    margin-inline-start: 0px;
  }
  .me-sm-0 {
    margin-inline-end: 0px;
  }
  .mx-sm-0 {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  .my-sm-0 {
    margin-block-start: 0px;
    margin-block-end: 0px;
  }
  .p-sm-0 {
    padding: 0px;
  }
  .pt-sm-0 {
    padding-block-start: 0px;
  }
  .pb-sm-0 {
    padding-block-end: 0px;
  }
  .ps-sm-0 {
    padding-inline-start: 0px;
  }
  .pe-sm-0 {
    padding-inline-end: 0px;
  }
  .px-sm-0 {
    padding-inline-start: 0px;
    padding-inline-end: 0px;
  }
  .py-sm-0 {
    padding-block-start: 0px;
    padding-block-end: 0px;
  }
}
@media (min-width: 768px) {
  .m-md-0 {
    margin: 0px;
  }
  .mt-md-0 {
    margin-block-start: 0px;
  }
  .mb-md-0 {
    margin-block-end: 0px;
  }
  .ms-md-0 {
    margin-inline-start: 0px;
  }
  .me-md-0 {
    margin-inline-end: 0px;
  }
  .mx-md-0 {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  .my-md-0 {
    margin-block-start: 0px;
    margin-block-end: 0px;
  }
  .p-md-0 {
    padding: 0px;
  }
  .pt-md-0 {
    padding-block-start: 0px;
  }
  .pb-md-0 {
    padding-block-end: 0px;
  }
  .ps-md-0 {
    padding-inline-start: 0px;
  }
  .pe-md-0 {
    padding-inline-end: 0px;
  }
  .px-md-0 {
    padding-inline-start: 0px;
    padding-inline-end: 0px;
  }
  .py-md-0 {
    padding-block-start: 0px;
    padding-block-end: 0px;
  }
}
@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0px;
  }
  .mt-lg-0 {
    margin-block-start: 0px;
  }
  .mb-lg-0 {
    margin-block-end: 0px;
  }
  .ms-lg-0 {
    margin-inline-start: 0px;
  }
  .me-lg-0 {
    margin-inline-end: 0px;
  }
  .mx-lg-0 {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  .my-lg-0 {
    margin-block-start: 0px;
    margin-block-end: 0px;
  }
  .p-lg-0 {
    padding: 0px;
  }
  .pt-lg-0 {
    padding-block-start: 0px;
  }
  .pb-lg-0 {
    padding-block-end: 0px;
  }
  .ps-lg-0 {
    padding-inline-start: 0px;
  }
  .pe-lg-0 {
    padding-inline-end: 0px;
  }
  .px-lg-0 {
    padding-inline-start: 0px;
    padding-inline-end: 0px;
  }
  .py-lg-0 {
    padding-block-start: 0px;
    padding-block-end: 0px;
  }
}
@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0px;
  }
  .mt-xl-0 {
    margin-block-start: 0px;
  }
  .mb-xl-0 {
    margin-block-end: 0px;
  }
  .ms-xl-0 {
    margin-inline-start: 0px;
  }
  .me-xl-0 {
    margin-inline-end: 0px;
  }
  .mx-xl-0 {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  .my-xl-0 {
    margin-block-start: 0px;
    margin-block-end: 0px;
  }
  .p-xl-0 {
    padding: 0px;
  }
  .pt-xl-0 {
    padding-block-start: 0px;
  }
  .pb-xl-0 {
    padding-block-end: 0px;
  }
  .ps-xl-0 {
    padding-inline-start: 0px;
  }
  .pe-xl-0 {
    padding-inline-end: 0px;
  }
  .px-xl-0 {
    padding-inline-start: 0px;
    padding-inline-end: 0px;
  }
  .py-xl-0 {
    padding-block-start: 0px;
    padding-block-end: 0px;
  }
}
@media (min-width: 1400px) {
  .m-xxl-0 {
    margin: 0px;
  }
  .mt-xxl-0 {
    margin-block-start: 0px;
  }
  .mb-xxl-0 {
    margin-block-end: 0px;
  }
  .ms-xxl-0 {
    margin-inline-start: 0px;
  }
  .me-xxl-0 {
    margin-inline-end: 0px;
  }
  .mx-xxl-0 {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  .my-xxl-0 {
    margin-block-start: 0px;
    margin-block-end: 0px;
  }
  .p-xxl-0 {
    padding: 0px;
  }
  .pt-xxl-0 {
    padding-block-start: 0px;
  }
  .pb-xxl-0 {
    padding-block-end: 0px;
  }
  .ps-xxl-0 {
    padding-inline-start: 0px;
  }
  .pe-xxl-0 {
    padding-inline-end: 0px;
  }
  .px-xxl-0 {
    padding-inline-start: 0px;
    padding-inline-end: 0px;
  }
  .py-xxl-0 {
    padding-block-start: 0px;
    padding-block-end: 0px;
  }
}
.m-1 {
  margin: 4px;
}
.mt-1 {
  margin-block-start: 4px;
}
.mb-1 {
  margin-block-end: 4px;
}
.ms-1 {
  margin-inline-start: 4px;
}
.me-1 {
  margin-inline-end: 4px;
}
.mx-1 {
  margin-inline-start: 4px;
  margin-inline-end: 4px;
}
.my-1 {
  margin-block-start: 4px;
  margin-block-end: 4px;
}
.p-1 {
  padding: 4px;
}
.pt-1 {
  padding-block-start: 4px;
}
.pb-1 {
  padding-block-end: 4px;
}
.ps-1 {
  padding-inline-start: 4px;
}
.pe-1 {
  padding-inline-end: 4px;
}
.px-1 {
  padding-inline-start: 4px;
  padding-inline-end: 4px;
}
.py-1 {
  padding-block-start: 4px;
  padding-block-end: 4px;
}
@media (min-width: 576px) {
  .m-sm-1 {
    margin: 4px;
  }
  .mt-sm-1 {
    margin-block-start: 4px;
  }
  .mb-sm-1 {
    margin-block-end: 4px;
  }
  .ms-sm-1 {
    margin-inline-start: 4px;
  }
  .me-sm-1 {
    margin-inline-end: 4px;
  }
  .mx-sm-1 {
    margin-inline-start: 4px;
    margin-inline-end: 4px;
  }
  .my-sm-1 {
    margin-block-start: 4px;
    margin-block-end: 4px;
  }
  .p-sm-1 {
    padding: 4px;
  }
  .pt-sm-1 {
    padding-block-start: 4px;
  }
  .pb-sm-1 {
    padding-block-end: 4px;
  }
  .ps-sm-1 {
    padding-inline-start: 4px;
  }
  .pe-sm-1 {
    padding-inline-end: 4px;
  }
  .px-sm-1 {
    padding-inline-start: 4px;
    padding-inline-end: 4px;
  }
  .py-sm-1 {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }
}
@media (min-width: 768px) {
  .m-md-1 {
    margin: 4px;
  }
  .mt-md-1 {
    margin-block-start: 4px;
  }
  .mb-md-1 {
    margin-block-end: 4px;
  }
  .ms-md-1 {
    margin-inline-start: 4px;
  }
  .me-md-1 {
    margin-inline-end: 4px;
  }
  .mx-md-1 {
    margin-inline-start: 4px;
    margin-inline-end: 4px;
  }
  .my-md-1 {
    margin-block-start: 4px;
    margin-block-end: 4px;
  }
  .p-md-1 {
    padding: 4px;
  }
  .pt-md-1 {
    padding-block-start: 4px;
  }
  .pb-md-1 {
    padding-block-end: 4px;
  }
  .ps-md-1 {
    padding-inline-start: 4px;
  }
  .pe-md-1 {
    padding-inline-end: 4px;
  }
  .px-md-1 {
    padding-inline-start: 4px;
    padding-inline-end: 4px;
  }
  .py-md-1 {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }
}
@media (min-width: 992px) {
  .m-lg-1 {
    margin: 4px;
  }
  .mt-lg-1 {
    margin-block-start: 4px;
  }
  .mb-lg-1 {
    margin-block-end: 4px;
  }
  .ms-lg-1 {
    margin-inline-start: 4px;
  }
  .me-lg-1 {
    margin-inline-end: 4px;
  }
  .mx-lg-1 {
    margin-inline-start: 4px;
    margin-inline-end: 4px;
  }
  .my-lg-1 {
    margin-block-start: 4px;
    margin-block-end: 4px;
  }
  .p-lg-1 {
    padding: 4px;
  }
  .pt-lg-1 {
    padding-block-start: 4px;
  }
  .pb-lg-1 {
    padding-block-end: 4px;
  }
  .ps-lg-1 {
    padding-inline-start: 4px;
  }
  .pe-lg-1 {
    padding-inline-end: 4px;
  }
  .px-lg-1 {
    padding-inline-start: 4px;
    padding-inline-end: 4px;
  }
  .py-lg-1 {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }
}
@media (min-width: 1200px) {
  .m-xl-1 {
    margin: 4px;
  }
  .mt-xl-1 {
    margin-block-start: 4px;
  }
  .mb-xl-1 {
    margin-block-end: 4px;
  }
  .ms-xl-1 {
    margin-inline-start: 4px;
  }
  .me-xl-1 {
    margin-inline-end: 4px;
  }
  .mx-xl-1 {
    margin-inline-start: 4px;
    margin-inline-end: 4px;
  }
  .my-xl-1 {
    margin-block-start: 4px;
    margin-block-end: 4px;
  }
  .p-xl-1 {
    padding: 4px;
  }
  .pt-xl-1 {
    padding-block-start: 4px;
  }
  .pb-xl-1 {
    padding-block-end: 4px;
  }
  .ps-xl-1 {
    padding-inline-start: 4px;
  }
  .pe-xl-1 {
    padding-inline-end: 4px;
  }
  .px-xl-1 {
    padding-inline-start: 4px;
    padding-inline-end: 4px;
  }
  .py-xl-1 {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }
}
@media (min-width: 1400px) {
  .m-xxl-1 {
    margin: 4px;
  }
  .mt-xxl-1 {
    margin-block-start: 4px;
  }
  .mb-xxl-1 {
    margin-block-end: 4px;
  }
  .ms-xxl-1 {
    margin-inline-start: 4px;
  }
  .me-xxl-1 {
    margin-inline-end: 4px;
  }
  .mx-xxl-1 {
    margin-inline-start: 4px;
    margin-inline-end: 4px;
  }
  .my-xxl-1 {
    margin-block-start: 4px;
    margin-block-end: 4px;
  }
  .p-xxl-1 {
    padding: 4px;
  }
  .pt-xxl-1 {
    padding-block-start: 4px;
  }
  .pb-xxl-1 {
    padding-block-end: 4px;
  }
  .ps-xxl-1 {
    padding-inline-start: 4px;
  }
  .pe-xxl-1 {
    padding-inline-end: 4px;
  }
  .px-xxl-1 {
    padding-inline-start: 4px;
    padding-inline-end: 4px;
  }
  .py-xxl-1 {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }
}
.m-2 {
  margin: 8px;
}
.mt-2 {
  margin-block-start: 8px;
}
.mb-2 {
  margin-block-end: 8px;
}
.ms-2 {
  margin-inline-start: 8px;
}
.me-2 {
  margin-inline-end: 8px;
}
.mx-2 {
  margin-inline-start: 8px;
  margin-inline-end: 8px;
}
.my-2 {
  margin-block-start: 8px;
  margin-block-end: 8px;
}
.p-2 {
  padding: 8px;
}
.pt-2 {
  padding-block-start: 8px;
}
.pb-2 {
  padding-block-end: 8px;
}
.ps-2 {
  padding-inline-start: 8px;
}
.pe-2 {
  padding-inline-end: 8px;
}
.px-2 {
  padding-inline-start: 8px;
  padding-inline-end: 8px;
}
.py-2 {
  padding-block-start: 8px;
  padding-block-end: 8px;
}
@media (min-width: 576px) {
  .m-sm-2 {
    margin: 8px;
  }
  .mt-sm-2 {
    margin-block-start: 8px;
  }
  .mb-sm-2 {
    margin-block-end: 8px;
  }
  .ms-sm-2 {
    margin-inline-start: 8px;
  }
  .me-sm-2 {
    margin-inline-end: 8px;
  }
  .mx-sm-2 {
    margin-inline-start: 8px;
    margin-inline-end: 8px;
  }
  .my-sm-2 {
    margin-block-start: 8px;
    margin-block-end: 8px;
  }
  .p-sm-2 {
    padding: 8px;
  }
  .pt-sm-2 {
    padding-block-start: 8px;
  }
  .pb-sm-2 {
    padding-block-end: 8px;
  }
  .ps-sm-2 {
    padding-inline-start: 8px;
  }
  .pe-sm-2 {
    padding-inline-end: 8px;
  }
  .px-sm-2 {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
  }
  .py-sm-2 {
    padding-block-start: 8px;
    padding-block-end: 8px;
  }
}
@media (min-width: 768px) {
  .m-md-2 {
    margin: 8px;
  }
  .mt-md-2 {
    margin-block-start: 8px;
  }
  .mb-md-2 {
    margin-block-end: 8px;
  }
  .ms-md-2 {
    margin-inline-start: 8px;
  }
  .me-md-2 {
    margin-inline-end: 8px;
  }
  .mx-md-2 {
    margin-inline-start: 8px;
    margin-inline-end: 8px;
  }
  .my-md-2 {
    margin-block-start: 8px;
    margin-block-end: 8px;
  }
  .p-md-2 {
    padding: 8px;
  }
  .pt-md-2 {
    padding-block-start: 8px;
  }
  .pb-md-2 {
    padding-block-end: 8px;
  }
  .ps-md-2 {
    padding-inline-start: 8px;
  }
  .pe-md-2 {
    padding-inline-end: 8px;
  }
  .px-md-2 {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
  }
  .py-md-2 {
    padding-block-start: 8px;
    padding-block-end: 8px;
  }
}
@media (min-width: 992px) {
  .m-lg-2 {
    margin: 8px;
  }
  .mt-lg-2 {
    margin-block-start: 8px;
  }
  .mb-lg-2 {
    margin-block-end: 8px;
  }
  .ms-lg-2 {
    margin-inline-start: 8px;
  }
  .me-lg-2 {
    margin-inline-end: 8px;
  }
  .mx-lg-2 {
    margin-inline-start: 8px;
    margin-inline-end: 8px;
  }
  .my-lg-2 {
    margin-block-start: 8px;
    margin-block-end: 8px;
  }
  .p-lg-2 {
    padding: 8px;
  }
  .pt-lg-2 {
    padding-block-start: 8px;
  }
  .pb-lg-2 {
    padding-block-end: 8px;
  }
  .ps-lg-2 {
    padding-inline-start: 8px;
  }
  .pe-lg-2 {
    padding-inline-end: 8px;
  }
  .px-lg-2 {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
  }
  .py-lg-2 {
    padding-block-start: 8px;
    padding-block-end: 8px;
  }
}
@media (min-width: 1200px) {
  .m-xl-2 {
    margin: 8px;
  }
  .mt-xl-2 {
    margin-block-start: 8px;
  }
  .mb-xl-2 {
    margin-block-end: 8px;
  }
  .ms-xl-2 {
    margin-inline-start: 8px;
  }
  .me-xl-2 {
    margin-inline-end: 8px;
  }
  .mx-xl-2 {
    margin-inline-start: 8px;
    margin-inline-end: 8px;
  }
  .my-xl-2 {
    margin-block-start: 8px;
    margin-block-end: 8px;
  }
  .p-xl-2 {
    padding: 8px;
  }
  .pt-xl-2 {
    padding-block-start: 8px;
  }
  .pb-xl-2 {
    padding-block-end: 8px;
  }
  .ps-xl-2 {
    padding-inline-start: 8px;
  }
  .pe-xl-2 {
    padding-inline-end: 8px;
  }
  .px-xl-2 {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
  }
  .py-xl-2 {
    padding-block-start: 8px;
    padding-block-end: 8px;
  }
}
@media (min-width: 1400px) {
  .m-xxl-2 {
    margin: 8px;
  }
  .mt-xxl-2 {
    margin-block-start: 8px;
  }
  .mb-xxl-2 {
    margin-block-end: 8px;
  }
  .ms-xxl-2 {
    margin-inline-start: 8px;
  }
  .me-xxl-2 {
    margin-inline-end: 8px;
  }
  .mx-xxl-2 {
    margin-inline-start: 8px;
    margin-inline-end: 8px;
  }
  .my-xxl-2 {
    margin-block-start: 8px;
    margin-block-end: 8px;
  }
  .p-xxl-2 {
    padding: 8px;
  }
  .pt-xxl-2 {
    padding-block-start: 8px;
  }
  .pb-xxl-2 {
    padding-block-end: 8px;
  }
  .ps-xxl-2 {
    padding-inline-start: 8px;
  }
  .pe-xxl-2 {
    padding-inline-end: 8px;
  }
  .px-xxl-2 {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
  }
  .py-xxl-2 {
    padding-block-start: 8px;
    padding-block-end: 8px;
  }
}
.m-3 {
  margin: 12px;
}
.mt-3 {
  margin-block-start: 12px;
}
.mb-3 {
  margin-block-end: 12px;
}
.ms-3 {
  margin-inline-start: 12px;
}
.me-3 {
  margin-inline-end: 12px;
}
.mx-3 {
  margin-inline-start: 12px;
  margin-inline-end: 12px;
}
.my-3 {
  margin-block-start: 12px;
  margin-block-end: 12px;
}
.p-3 {
  padding: 12px;
}
.pt-3 {
  padding-block-start: 12px;
}
.pb-3 {
  padding-block-end: 12px;
}
.ps-3 {
  padding-inline-start: 12px;
}
.pe-3 {
  padding-inline-end: 12px;
}
.px-3 {
  padding-inline-start: 12px;
  padding-inline-end: 12px;
}
.py-3 {
  padding-block-start: 12px;
  padding-block-end: 12px;
}
@media (min-width: 576px) {
  .m-sm-3 {
    margin: 12px;
  }
  .mt-sm-3 {
    margin-block-start: 12px;
  }
  .mb-sm-3 {
    margin-block-end: 12px;
  }
  .ms-sm-3 {
    margin-inline-start: 12px;
  }
  .me-sm-3 {
    margin-inline-end: 12px;
  }
  .mx-sm-3 {
    margin-inline-start: 12px;
    margin-inline-end: 12px;
  }
  .my-sm-3 {
    margin-block-start: 12px;
    margin-block-end: 12px;
  }
  .p-sm-3 {
    padding: 12px;
  }
  .pt-sm-3 {
    padding-block-start: 12px;
  }
  .pb-sm-3 {
    padding-block-end: 12px;
  }
  .ps-sm-3 {
    padding-inline-start: 12px;
  }
  .pe-sm-3 {
    padding-inline-end: 12px;
  }
  .px-sm-3 {
    padding-inline-start: 12px;
    padding-inline-end: 12px;
  }
  .py-sm-3 {
    padding-block-start: 12px;
    padding-block-end: 12px;
  }
}
@media (min-width: 768px) {
  .m-md-3 {
    margin: 12px;
  }
  .mt-md-3 {
    margin-block-start: 12px;
  }
  .mb-md-3 {
    margin-block-end: 12px;
  }
  .ms-md-3 {
    margin-inline-start: 12px;
  }
  .me-md-3 {
    margin-inline-end: 12px;
  }
  .mx-md-3 {
    margin-inline-start: 12px;
    margin-inline-end: 12px;
  }
  .my-md-3 {
    margin-block-start: 12px;
    margin-block-end: 12px;
  }
  .p-md-3 {
    padding: 12px;
  }
  .pt-md-3 {
    padding-block-start: 12px;
  }
  .pb-md-3 {
    padding-block-end: 12px;
  }
  .ps-md-3 {
    padding-inline-start: 12px;
  }
  .pe-md-3 {
    padding-inline-end: 12px;
  }
  .px-md-3 {
    padding-inline-start: 12px;
    padding-inline-end: 12px;
  }
  .py-md-3 {
    padding-block-start: 12px;
    padding-block-end: 12px;
  }
}
@media (min-width: 992px) {
  .m-lg-3 {
    margin: 12px;
  }
  .mt-lg-3 {
    margin-block-start: 12px;
  }
  .mb-lg-3 {
    margin-block-end: 12px;
  }
  .ms-lg-3 {
    margin-inline-start: 12px;
  }
  .me-lg-3 {
    margin-inline-end: 12px;
  }
  .mx-lg-3 {
    margin-inline-start: 12px;
    margin-inline-end: 12px;
  }
  .my-lg-3 {
    margin-block-start: 12px;
    margin-block-end: 12px;
  }
  .p-lg-3 {
    padding: 12px;
  }
  .pt-lg-3 {
    padding-block-start: 12px;
  }
  .pb-lg-3 {
    padding-block-end: 12px;
  }
  .ps-lg-3 {
    padding-inline-start: 12px;
  }
  .pe-lg-3 {
    padding-inline-end: 12px;
  }
  .px-lg-3 {
    padding-inline-start: 12px;
    padding-inline-end: 12px;
  }
  .py-lg-3 {
    padding-block-start: 12px;
    padding-block-end: 12px;
  }
}
@media (min-width: 1200px) {
  .m-xl-3 {
    margin: 12px;
  }
  .mt-xl-3 {
    margin-block-start: 12px;
  }
  .mb-xl-3 {
    margin-block-end: 12px;
  }
  .ms-xl-3 {
    margin-inline-start: 12px;
  }
  .me-xl-3 {
    margin-inline-end: 12px;
  }
  .mx-xl-3 {
    margin-inline-start: 12px;
    margin-inline-end: 12px;
  }
  .my-xl-3 {
    margin-block-start: 12px;
    margin-block-end: 12px;
  }
  .p-xl-3 {
    padding: 12px;
  }
  .pt-xl-3 {
    padding-block-start: 12px;
  }
  .pb-xl-3 {
    padding-block-end: 12px;
  }
  .ps-xl-3 {
    padding-inline-start: 12px;
  }
  .pe-xl-3 {
    padding-inline-end: 12px;
  }
  .px-xl-3 {
    padding-inline-start: 12px;
    padding-inline-end: 12px;
  }
  .py-xl-3 {
    padding-block-start: 12px;
    padding-block-end: 12px;
  }
}
@media (min-width: 1400px) {
  .m-xxl-3 {
    margin: 12px;
  }
  .mt-xxl-3 {
    margin-block-start: 12px;
  }
  .mb-xxl-3 {
    margin-block-end: 12px;
  }
  .ms-xxl-3 {
    margin-inline-start: 12px;
  }
  .me-xxl-3 {
    margin-inline-end: 12px;
  }
  .mx-xxl-3 {
    margin-inline-start: 12px;
    margin-inline-end: 12px;
  }
  .my-xxl-3 {
    margin-block-start: 12px;
    margin-block-end: 12px;
  }
  .p-xxl-3 {
    padding: 12px;
  }
  .pt-xxl-3 {
    padding-block-start: 12px;
  }
  .pb-xxl-3 {
    padding-block-end: 12px;
  }
  .ps-xxl-3 {
    padding-inline-start: 12px;
  }
  .pe-xxl-3 {
    padding-inline-end: 12px;
  }
  .px-xxl-3 {
    padding-inline-start: 12px;
    padding-inline-end: 12px;
  }
  .py-xxl-3 {
    padding-block-start: 12px;
    padding-block-end: 12px;
  }
}
.m-4 {
  margin: 16px;
}
.mt-4 {
  margin-block-start: 16px;
}
.mb-4 {
  margin-block-end: 16px;
}
.ms-4 {
  margin-inline-start: 16px;
}
.me-4 {
  margin-inline-end: 16px;
}
.mx-4 {
  margin-inline-start: 16px;
  margin-inline-end: 16px;
}
.my-4 {
  margin-block-start: 16px;
  margin-block-end: 16px;
}
.p-4 {
  padding: 16px;
}
.pt-4 {
  padding-block-start: 16px;
}
.pb-4 {
  padding-block-end: 16px;
}
.ps-4 {
  padding-inline-start: 16px;
}
.pe-4 {
  padding-inline-end: 16px;
}
.px-4 {
  padding-inline-start: 16px;
  padding-inline-end: 16px;
}
.py-4 {
  padding-block-start: 16px;
  padding-block-end: 16px;
}
@media (min-width: 576px) {
  .m-sm-4 {
    margin: 16px;
  }
  .mt-sm-4 {
    margin-block-start: 16px;
  }
  .mb-sm-4 {
    margin-block-end: 16px;
  }
  .ms-sm-4 {
    margin-inline-start: 16px;
  }
  .me-sm-4 {
    margin-inline-end: 16px;
  }
  .mx-sm-4 {
    margin-inline-start: 16px;
    margin-inline-end: 16px;
  }
  .my-sm-4 {
    margin-block-start: 16px;
    margin-block-end: 16px;
  }
  .p-sm-4 {
    padding: 16px;
  }
  .pt-sm-4 {
    padding-block-start: 16px;
  }
  .pb-sm-4 {
    padding-block-end: 16px;
  }
  .ps-sm-4 {
    padding-inline-start: 16px;
  }
  .pe-sm-4 {
    padding-inline-end: 16px;
  }
  .px-sm-4 {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }
  .py-sm-4 {
    padding-block-start: 16px;
    padding-block-end: 16px;
  }
}
@media (min-width: 768px) {
  .m-md-4 {
    margin: 16px;
  }
  .mt-md-4 {
    margin-block-start: 16px;
  }
  .mb-md-4 {
    margin-block-end: 16px;
  }
  .ms-md-4 {
    margin-inline-start: 16px;
  }
  .me-md-4 {
    margin-inline-end: 16px;
  }
  .mx-md-4 {
    margin-inline-start: 16px;
    margin-inline-end: 16px;
  }
  .my-md-4 {
    margin-block-start: 16px;
    margin-block-end: 16px;
  }
  .p-md-4 {
    padding: 16px;
  }
  .pt-md-4 {
    padding-block-start: 16px;
  }
  .pb-md-4 {
    padding-block-end: 16px;
  }
  .ps-md-4 {
    padding-inline-start: 16px;
  }
  .pe-md-4 {
    padding-inline-end: 16px;
  }
  .px-md-4 {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }
  .py-md-4 {
    padding-block-start: 16px;
    padding-block-end: 16px;
  }
}
@media (min-width: 992px) {
  .m-lg-4 {
    margin: 16px;
  }
  .mt-lg-4 {
    margin-block-start: 16px;
  }
  .mb-lg-4 {
    margin-block-end: 16px;
  }
  .ms-lg-4 {
    margin-inline-start: 16px;
  }
  .me-lg-4 {
    margin-inline-end: 16px;
  }
  .mx-lg-4 {
    margin-inline-start: 16px;
    margin-inline-end: 16px;
  }
  .my-lg-4 {
    margin-block-start: 16px;
    margin-block-end: 16px;
  }
  .p-lg-4 {
    padding: 16px;
  }
  .pt-lg-4 {
    padding-block-start: 16px;
  }
  .pb-lg-4 {
    padding-block-end: 16px;
  }
  .ps-lg-4 {
    padding-inline-start: 16px;
  }
  .pe-lg-4 {
    padding-inline-end: 16px;
  }
  .px-lg-4 {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }
  .py-lg-4 {
    padding-block-start: 16px;
    padding-block-end: 16px;
  }
}
@media (min-width: 1200px) {
  .m-xl-4 {
    margin: 16px;
  }
  .mt-xl-4 {
    margin-block-start: 16px;
  }
  .mb-xl-4 {
    margin-block-end: 16px;
  }
  .ms-xl-4 {
    margin-inline-start: 16px;
  }
  .me-xl-4 {
    margin-inline-end: 16px;
  }
  .mx-xl-4 {
    margin-inline-start: 16px;
    margin-inline-end: 16px;
  }
  .my-xl-4 {
    margin-block-start: 16px;
    margin-block-end: 16px;
  }
  .p-xl-4 {
    padding: 16px;
  }
  .pt-xl-4 {
    padding-block-start: 16px;
  }
  .pb-xl-4 {
    padding-block-end: 16px;
  }
  .ps-xl-4 {
    padding-inline-start: 16px;
  }
  .pe-xl-4 {
    padding-inline-end: 16px;
  }
  .px-xl-4 {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }
  .py-xl-4 {
    padding-block-start: 16px;
    padding-block-end: 16px;
  }
}
@media (min-width: 1400px) {
  .m-xxl-4 {
    margin: 16px;
  }
  .mt-xxl-4 {
    margin-block-start: 16px;
  }
  .mb-xxl-4 {
    margin-block-end: 16px;
  }
  .ms-xxl-4 {
    margin-inline-start: 16px;
  }
  .me-xxl-4 {
    margin-inline-end: 16px;
  }
  .mx-xxl-4 {
    margin-inline-start: 16px;
    margin-inline-end: 16px;
  }
  .my-xxl-4 {
    margin-block-start: 16px;
    margin-block-end: 16px;
  }
  .p-xxl-4 {
    padding: 16px;
  }
  .pt-xxl-4 {
    padding-block-start: 16px;
  }
  .pb-xxl-4 {
    padding-block-end: 16px;
  }
  .ps-xxl-4 {
    padding-inline-start: 16px;
  }
  .pe-xxl-4 {
    padding-inline-end: 16px;
  }
  .px-xxl-4 {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }
  .py-xxl-4 {
    padding-block-start: 16px;
    padding-block-end: 16px;
  }
}
.m-5 {
  margin: 20px;
}
.mt-5 {
  margin-block-start: 20px;
}
.mb-5 {
  margin-block-end: 20px;
}
.ms-5 {
  margin-inline-start: 20px;
}
.me-5 {
  margin-inline-end: 20px;
}
.mx-5 {
  margin-inline-start: 20px;
  margin-inline-end: 20px;
}
.my-5 {
  margin-block-start: 20px;
  margin-block-end: 20px;
}
.p-5 {
  padding: 20px;
}
.pt-5 {
  padding-block-start: 20px;
}
.pb-5 {
  padding-block-end: 20px;
}
.ps-5 {
  padding-inline-start: 20px;
}
.pe-5 {
  padding-inline-end: 20px;
}
.px-5 {
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}
.py-5 {
  padding-block-start: 20px;
  padding-block-end: 20px;
}
@media (min-width: 576px) {
  .m-sm-5 {
    margin: 20px;
  }
  .mt-sm-5 {
    margin-block-start: 20px;
  }
  .mb-sm-5 {
    margin-block-end: 20px;
  }
  .ms-sm-5 {
    margin-inline-start: 20px;
  }
  .me-sm-5 {
    margin-inline-end: 20px;
  }
  .mx-sm-5 {
    margin-inline-start: 20px;
    margin-inline-end: 20px;
  }
  .my-sm-5 {
    margin-block-start: 20px;
    margin-block-end: 20px;
  }
  .p-sm-5 {
    padding: 20px;
  }
  .pt-sm-5 {
    padding-block-start: 20px;
  }
  .pb-sm-5 {
    padding-block-end: 20px;
  }
  .ps-sm-5 {
    padding-inline-start: 20px;
  }
  .pe-sm-5 {
    padding-inline-end: 20px;
  }
  .px-sm-5 {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
  }
  .py-sm-5 {
    padding-block-start: 20px;
    padding-block-end: 20px;
  }
}
@media (min-width: 768px) {
  .m-md-5 {
    margin: 20px;
  }
  .mt-md-5 {
    margin-block-start: 20px;
  }
  .mb-md-5 {
    margin-block-end: 20px;
  }
  .ms-md-5 {
    margin-inline-start: 20px;
  }
  .me-md-5 {
    margin-inline-end: 20px;
  }
  .mx-md-5 {
    margin-inline-start: 20px;
    margin-inline-end: 20px;
  }
  .my-md-5 {
    margin-block-start: 20px;
    margin-block-end: 20px;
  }
  .p-md-5 {
    padding: 20px;
  }
  .pt-md-5 {
    padding-block-start: 20px;
  }
  .pb-md-5 {
    padding-block-end: 20px;
  }
  .ps-md-5 {
    padding-inline-start: 20px;
  }
  .pe-md-5 {
    padding-inline-end: 20px;
  }
  .px-md-5 {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
  }
  .py-md-5 {
    padding-block-start: 20px;
    padding-block-end: 20px;
  }
}
@media (min-width: 992px) {
  .m-lg-5 {
    margin: 20px;
  }
  .mt-lg-5 {
    margin-block-start: 20px;
  }
  .mb-lg-5 {
    margin-block-end: 20px;
  }
  .ms-lg-5 {
    margin-inline-start: 20px;
  }
  .me-lg-5 {
    margin-inline-end: 20px;
  }
  .mx-lg-5 {
    margin-inline-start: 20px;
    margin-inline-end: 20px;
  }
  .my-lg-5 {
    margin-block-start: 20px;
    margin-block-end: 20px;
  }
  .p-lg-5 {
    padding: 20px;
  }
  .pt-lg-5 {
    padding-block-start: 20px;
  }
  .pb-lg-5 {
    padding-block-end: 20px;
  }
  .ps-lg-5 {
    padding-inline-start: 20px;
  }
  .pe-lg-5 {
    padding-inline-end: 20px;
  }
  .px-lg-5 {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
  }
  .py-lg-5 {
    padding-block-start: 20px;
    padding-block-end: 20px;
  }
}
@media (min-width: 1200px) {
  .m-xl-5 {
    margin: 20px;
  }
  .mt-xl-5 {
    margin-block-start: 20px;
  }
  .mb-xl-5 {
    margin-block-end: 20px;
  }
  .ms-xl-5 {
    margin-inline-start: 20px;
  }
  .me-xl-5 {
    margin-inline-end: 20px;
  }
  .mx-xl-5 {
    margin-inline-start: 20px;
    margin-inline-end: 20px;
  }
  .my-xl-5 {
    margin-block-start: 20px;
    margin-block-end: 20px;
  }
  .p-xl-5 {
    padding: 20px;
  }
  .pt-xl-5 {
    padding-block-start: 20px;
  }
  .pb-xl-5 {
    padding-block-end: 20px;
  }
  .ps-xl-5 {
    padding-inline-start: 20px;
  }
  .pe-xl-5 {
    padding-inline-end: 20px;
  }
  .px-xl-5 {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
  }
  .py-xl-5 {
    padding-block-start: 20px;
    padding-block-end: 20px;
  }
}
@media (min-width: 1400px) {
  .m-xxl-5 {
    margin: 20px;
  }
  .mt-xxl-5 {
    margin-block-start: 20px;
  }
  .mb-xxl-5 {
    margin-block-end: 20px;
  }
  .ms-xxl-5 {
    margin-inline-start: 20px;
  }
  .me-xxl-5 {
    margin-inline-end: 20px;
  }
  .mx-xxl-5 {
    margin-inline-start: 20px;
    margin-inline-end: 20px;
  }
  .my-xxl-5 {
    margin-block-start: 20px;
    margin-block-end: 20px;
  }
  .p-xxl-5 {
    padding: 20px;
  }
  .pt-xxl-5 {
    padding-block-start: 20px;
  }
  .pb-xxl-5 {
    padding-block-end: 20px;
  }
  .ps-xxl-5 {
    padding-inline-start: 20px;
  }
  .pe-xxl-5 {
    padding-inline-end: 20px;
  }
  .px-xxl-5 {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
  }
  .py-xxl-5 {
    padding-block-start: 20px;
    padding-block-end: 20px;
  }
}
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
.d-flex {
  display: flex;
}
.d-block {
  display: block !important;
}
.d-inline-block {
  display: inline-block;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-end {
  justify-content: end;
}
.justify-content-start {
  justify-content: start;
}
.justify-content-space-evenly {
  justify-content: space-evenly;
}
.align-items-center {
  align-items: center;
}
.text-center {
  text-align: center;
}
.justify-content-between {
  justify-content: space-between;
}
.ms-auto {
  margin-left: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.bottom-0 {
  bottom: 0;
}
.right-0 {
  right: 0;
}
.left-0 {
  left: 0;
}
.w-50 {
  width: 50%;
}
.w-75 {
  width: 75%;
}
.w-60 {
  width: 60%;
}
.w-40 {
  width: 40%;
}
.inset-0 {
  left: 0;
  right: 0;
}
.h-100 {
  height: 100%;
}
.flex-1 {
  flex: 1;
}
.w-100 {
  min-width: 100%;
}
.flex-col {
  flex-direction: column;
}
.d-inline {
  display: inline;
}
.h-auto {
  height: auto !important;
}
.border-0 {
  border-width: 0px !important;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-grow-1 {
  flex-grow: 1;
}
.start-learning-button {
  font-family: "Inter", sans-serif;
  color: var(--bg-acc) !important;
  background: var(--primary-color);
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  transition: all 0.2s ease;
  min-width: auto;
  height: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.start-learning-button:hover {
  background: var(--primary-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.start-learning-button .mat-button-wrapper {
  padding: 0;
  line-height: normal;
}
.features-showcase-section {
  padding: 100px 0 87px;
  background: var(--BellaSpeak-bg);
}
@media (max-width: 992px) {
  .features-showcase-section {
    padding: 80px 0;
  }
}
@media (max-width: 992px) {
  .features-showcase-section {
    padding: 50px 0;
  }
}
.features-header {
  text-align: center;
  margin-bottom: 60px;
}
@media (max-width: 768px) {
  .features-header {
    margin-bottom: 40px;
  }
}
.features-subtitle {
  color: var(--primary-dark);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0px;
}
.features-title {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
}
@media (max-width: 992px) {
  .features-title {
    font-size: 36px;
  }
}
@media (max-width: 768px) {
  .features-title {
    font-size: 24px;
  }
}
.features-title .what-makes {
  color: var(--gradient-text);
}
.features-title .bellaspeak-name {
  display: inline-block;
  color: var(--gradient-text);
  padding-right: 5px;
}
.features-title .different-text {
  display: inline-block;
  color: var(--text-secondary-dark);
}
.fs-6 {
  font-size: 6px;
}
.fs-8 {
  font-size: 10px;
}
.fs-11 {
  font-size: 11px;
}
.fs-12 {
  font-size: 12px;
}
.fs-14 {
  font-size: 14px;
}
.fs-15 {
  font-size: 15px;
}
.fs-16 {
  font-size: 16px;
}
.fs-18 {
  font-size: 18px;
}
.fs-20 {
  font-size: 20px;
}
.fs-22 {
  font-size: 22px;
}
.fs-24 {
  font-size: 24px;
}
.fs-30 {
  font-size: 30px;
}
.fs-40 {
  font-size: 40px;
}
.fs-48 {
  font-size: 48px;
}
.fs-64 {
  font-size: 64px;
}
.fw-semibold {
  font-weight: 600;
}
.fw-bold {
  font-weight: bold;
}
.fw-medium {
  font-weight: 500;
}
.features-container .testmonial-section {
  padding-bottom: 370px !important;
  display: block;
}
.auth-btn {
  padding: 12px;
  width: 100%;
  background-color: var(--theme-color);
  border-radius: 8px;
  color: #fff;
  border: 0px;
  height: 44px;
  cursor: pointer;
}
.auth-btn .button-content {
  display: flex;
  align-items: center;
  justify-self: center;
}
.auth-wrapper {
  background: url("./media/auth-wrapper-bg.svg");
  min-height: 100vh;
  height: max-content;
}
.auth-wrapper .auth-shade {
  background: var(--auth-shade);
  min-height: 100vh;
  height: max-content;
  flex-direction: column;
}
.auth-wrapper .auth-shade .login-content {
  width: 475px;
  margin: 0 auto;
  background-color: var(--login-bg);
  border-radius: 33px;
  margin-top: auto;
}
.auth-wrapper .auth-shade .login-content .login-card {
  background-color: var(--bg-primary);
  padding: 20px;
  border: 0px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 33px;
}
.auth-wrapper .auth-shade .login-content .login-card .logo-section {
  width: 50px;
  height: 50px;
  display: flex;
}
.auth-wrapper .auth-shade .login-content .login-card .mat-icon {
  font-size: 14px;
}
.auth-wrapper .auth-shade .login-content .login-card .auth-title {
  color: var(--auth-title);
}
.auth-wrapper .auth-shade .login-content .login-card .auth-description {
  color: var(--text-secondary);
}
.auth-wrapper .auth-shade .login-content .login-card .auth-form {
  margin: 24px 0;
  margin-bottom: 0;
}
.auth-wrapper .auth-shade .login-content .login-card .auth-form .auth-label {
  color: var(--text-secondary);
}
.auth-wrapper .auth-shade .login-content .login-card .auth-form .forgot {
  color: var(--text-secondary);
  text-decoration: none;
}
.auth-wrapper .auth-shade .login-content .login-card .auth-form .auth-btn {
  margin-top: 24px;
}
.auth-wrapper .auth-shade .login-content .account-text {
  color: var(--text-secondary);
}
.auth-wrapper .auth-shade .login-content .account-text a {
  color: var(--theme-color);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  cursor: pointer;
}
.auth-wrapper .auth-shade .navi-link {
  margin-top: auto;
  gap: 20px;
  margin-bottom: 15px;
}
.auth-wrapper .auth-shade .navi-link a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (max-width: 575px) {
  .auth-wrapper .auth-shade {
    padding-inline: 1rem;
  }
  .auth-wrapper .auth-shade .login-content {
    max-width: 90%;
    overflow: auto;
  }
  .auth-wrapper .auth-shade .login-content .login-card {
    padding: 0;
  }
  .auth-wrapper .auth-shade .login-content .continue-btns-wrapper .signing-agree-text {
    max-width: unset;
    width: 100%;
  }
}
mat-icon {
  font-family: "Material Symbols Outlined" !important;
  font-variation-settings:
    "FILL" 0,
    "wght" 200,
    "GRAD" 0,
    "opsz" 24 !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  overflow: visible !important;
  vertical-align: middle !important;
  box-sizing: content-box !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  font-weight: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: "liga" !important;
}
mat-icon::before,
mat-icon::after {
  display: none !important;
}
.d-flex mat-icon,
.flex mat-icon,
[class*=d-flex] mat-icon,
[class*=flex] mat-icon,
.align-items-center mat-icon,
.align-item-center mat-icon {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  overflow: visible !important;
}
mat-toolbar mat-icon,
mat-menu mat-icon,
mat-list mat-icon,
mat-nav-list mat-icon,
mat-button mat-icon,
button mat-icon {
  overflow: visible !important;
  vertical-align: middle !important;
}
button[mat-menu-item] {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 0 16px !important;
}
button[mat-menu-item] mat-icon {
  margin-right: 16px !important;
  overflow: visible !important;
}
button[mat-menu-item] span {
  line-height: normal !important;
}
.mat-mdc-menu-content,
.mat-menu-content {
  padding: 8px 0 !important;
}
.mat-mdc-menu-content button[mat-menu-item] mat-icon,
.mat-menu-content button[mat-menu-item] mat-icon {
  overflow: visible !important;
}
mat-toolbar {
  overflow: visible !important;
}
mat-toolbar mat-icon {
  overflow: visible !important;
}
.fs-14 mat-icon,
.fs-16 mat-icon,
.fs-18 mat-icon,
.fs-20 mat-icon {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
}
.sidebar mat-icon {
  overflow: visible !important;
  vertical-align: middle !important;
}
.sidebar a {
  display: flex !important;
  align-items: center !important;
}
.sidebar a mat-icon {
  margin-right: 8px !important;
}
.mat-mdc-button mat-icon,
.mat-mdc-raised-button mat-icon,
.mat-mdc-icon-button mat-icon {
  overflow: visible !important;
}
mat-icon.icon-18 {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}
mat-icon.icon-20 {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}
mat-icon.icon-24 {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}
mat-icon.icon-32 {
  font-size: 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}
mat-icon.icon-48 {
  font-size: 48px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
}
.mat-icon-mirror {
  transform: scaleX(-1);
}
.mat-icon-rotate-90 {
  transform: rotate(90deg);
}
.mat-icon-rotate-180 {
  transform: rotate(180deg);
}
.mat-icon-rotate-270 {
  transform: rotate(270deg);
}
.mat-icon-rotate-30 {
  transform: rotate(30deg);
}
.mat-icon-flip-vertical {
  transform: scaleY(-1);
}
.mat-icon-flip-both {
  transform: scale(-1, -1);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--placeholder-color) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--login-card-bg) inset !important;
  background-color: transparent !important;
  transition: background-color 5000s ease-in-out 0s;
}
.mat-mdc-input-element:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: var(--placeholder-color) !important;
}
.cdk-overlay-pane .success-snackbar .mdc-snackbar__surface {
  background-color: var(--success-bg-color);
  color: var(--white);
  border-radius: 0.5rem;
}
.cdk-overlay-pane .error-snackbar2 .mdc-snackbar__surface {
  background-color: var(--error-bg-color);
  color: var(--white);
  border-radius: 0.5rem;
}
.gap-4 {
  gap: 0.25rem;
}
.gap-8 {
  gap: 0.5rem;
}
.gap-16 {
  gap: 1rem;
}
.cursor-pointer {
  cursor: pointer;
}
.flex-direction-column {
  flex-direction: column;
}
.opacity-07 {
  opacity: 0.7;
}
:root {
  --direction: ltr;
  --text-align: left;
  --start: left;
  --end: right;
  --flex-dir: row;
}
[dir=rtl],
.rtl {
  --direction: rtl;
  --text-align: right;
  --start: right;
  --end: left;
  --flex-dir: row-reverse;
}
body {
  direction: var(--direction);
  text-align: var(--text-align);
}
.border-box {
  box-sizing: border-box;
}
.icon-mute {
  position: relative;
  display: inline-block;
}
.icon-mute svg {
  display: block;
}
.icon-mute::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 3px;
  background: white;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
  border: 2px solid var(--theme-color);
}
#app-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.loader-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e0e0e0;
  border-top: 3px solid #3f51b5;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
#app-loader p {
  margin-top: 12px;
  font-size: 14px;
  color: #666;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
body.app-ready #app-loader {
  display: none;
}
body.app-ready app-root {
  display: block !important;
}
.green {
  color: var(--green);
}
.theme-color {
  color: var(--text-color-001);
}
.line-height-1 {
  line-height: 1.3;
}
.my-auto {
  margin-inline: auto;
}
.width-100 {
  width: 100%;
  box-sizing: border-box;
}
.cursor-not-allowed {
  cursor: not-allowed !important;
}
.cdk-global-scrollblock {
  position: unset !important;
  width: 100%;
  overflow-y: scroll;
}
@media (max-width: 575px) {
  .padding-inline-bottom {
    padding-inline: 1rem;
    padding-bottom: 1rem;
  }
  .padding-bottom {
    padding-bottom: 1rem;
  }
  .padding-inline {
    padding-inline: 1rem;
  }
}

/* node_modules/quill/dist/quill.core.css */
/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family:
    Helvetica,
    Arial,
    sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
  cursor: pointer;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
}
@supports (counter-set:none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor table {
  border-collapse: collapse;
}
.ql-editor td {
  border: 1px solid #000;
  padding: 2px 5px;
}
.ql-editor ol {
  padding-left: 1.5em;
}
.ql-editor li {
  list-style-type: none;
  padding-left: 1.5em;
  position: relative;
}
.ql-editor li > .ql-ui:before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: .3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li[data-list=checked] > .ql-ui,
.ql-editor li[data-list=unchecked] > .ql-ui {
  color: #777;
}
.ql-editor li[data-list=bullet] > .ql-ui:before {
  content: "\2022";
}
.ql-editor li[data-list=checked] > .ql-ui:before {
  content: "\2611";
}
.ql-editor li[data-list=unchecked] > .ql-ui:before {
  content: "\2610";
}
@supports (counter-set:none) {
  .ql-editor li[data-list] {
    counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list] {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered] {
  counter-increment: list-0;
}
.ql-editor li[data-list=ordered] > .ql-ui:before {
  content: counter(list-0, decimal) ". ";
}
.ql-editor li[data-list=ordered].ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
  content: counter(list-1, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
  content: counter(list-2, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
  content: counter(list-3, decimal) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
  content: counter(list-4, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-set: list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
  content: counter(list-5, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-set: list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
  content: counter(list-6, decimal) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-set: list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
  content: counter(list-7, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-set: list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-reset: list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
  content: counter(list-8, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-set: list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-reset: list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
  content: counter(list-9, decimal) ". ";
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor li.ql-direction-rtl > .ql-ui:before {
  margin-left: .3em;
  margin-right: -1.5em;
  text-align: left;
}
.ql-editor table {
  table-layout: fixed;
  width: 100%;
}
.ql-editor table td {
  outline: none;
}
.ql-editor .ql-code-block-container {
  font-family: monospace;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family:
    Georgia,
    Times New Roman,
    serif;
}
.ql-editor .ql-font-monospace {
  font-family:
    Monaco,
    Courier New,
    monospace;
}
.ql-editor .ql-size-small {
  font-size: .75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor .ql-ui {
  position: absolute;
}
.ql-editor.ql-blank::before {
  color: rgba(0, 0, 0, 0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}

/* node_modules/quill/dist/quill.snow.css */
/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family:
    Helvetica,
    Arial,
    sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
  cursor: pointer;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
}
@supports (counter-set:none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor table {
  border-collapse: collapse;
}
.ql-editor td {
  border: 1px solid #000;
  padding: 2px 5px;
}
.ql-editor ol {
  padding-left: 1.5em;
}
.ql-editor li {
  list-style-type: none;
  padding-left: 1.5em;
  position: relative;
}
.ql-editor li > .ql-ui:before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: .3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li[data-list=checked] > .ql-ui,
.ql-editor li[data-list=unchecked] > .ql-ui {
  color: #777;
}
.ql-editor li[data-list=bullet] > .ql-ui:before {
  content: "\2022";
}
.ql-editor li[data-list=checked] > .ql-ui:before {
  content: "\2611";
}
.ql-editor li[data-list=unchecked] > .ql-ui:before {
  content: "\2610";
}
@supports (counter-set:none) {
  .ql-editor li[data-list] {
    counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list] {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered] {
  counter-increment: list-0;
}
.ql-editor li[data-list=ordered] > .ql-ui:before {
  content: counter(list-0, decimal) ". ";
}
.ql-editor li[data-list=ordered].ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
  content: counter(list-1, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
  content: counter(list-2, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
  content: counter(list-3, decimal) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
  content: counter(list-4, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-set: list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
  content: counter(list-5, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-set: list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
  content: counter(list-6, decimal) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-set: list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
  content: counter(list-7, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-set: list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-reset: list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
  content: counter(list-8, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-set: list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-reset: list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
  content: counter(list-9, decimal) ". ";
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor li.ql-direction-rtl > .ql-ui:before {
  margin-left: .3em;
  margin-right: -1.5em;
  text-align: left;
}
.ql-editor table {
  table-layout: fixed;
  width: 100%;
}
.ql-editor table td {
  outline: none;
}
.ql-editor .ql-code-block-container {
  font-family: monospace;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family:
    Georgia,
    Times New Roman,
    serif;
}
.ql-editor .ql-font-monospace {
  font-family:
    Monaco,
    Courier New,
    monospace;
}
.ql-editor .ql-size-small {
  font-size: .75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor .ql-ui {
  position: absolute;
}
.ql-editor.ql-blank::before {
  color: rgba(0, 0, 0, 0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: "";
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer:coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: "";
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: .4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: .83em;
}
.ql-snow .ql-editor h6 {
  font-size: .67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor .ql-code-block-container {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor .ql-code-block-container {
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor .ql-code-block-container {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "Normal";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "Heading 1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "Heading 2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "Heading 3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "Heading 4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "Heading 5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "Heading 6";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: .83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: .67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "Sans Serif";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: "Serif";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: "Monospace";
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family:
    Georgia,
    Times New Roman,
    serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family:
    Monaco,
    Courier New,
    monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "Normal";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: "Small";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: "Large";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: "Huge";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-code-block-container {
  position: relative;
}
.ql-code-block-container .ql-ui {
  right: 5px;
  top: 5px;
}
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family:
    "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: "Edit";
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: "Remove";
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0;
  content: "Save";
  padding-right: 0;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */