@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 */
:root {
  --primary-color: #fff;
  --auth-shade:
    linear-gradient(
      0deg,
      rgba(235, 228, 255, 1) 35%,
      rgba(235, 228, 255, 0.59) 100%);
  --login-bg: #FFFFFF66;
  --auth-title: #0E121B;
  --text-secondary: #525866;
  --form-field-text: #99A0AE;
  --auth-border: #E1E4EA;
  --theme-color: #8F69FC;
  --header-bg: #fff;
  --black-dark-5: #1C1C1C0D;
  --or-text: #1C1C1C66;
  --bus-eng1-bg: #FFF1EB;
  --bus-eng1-text: #FF8447;
  --course-header-bg: #F5F7FA;
  --Thumbnail-border: #CACFD8;
  --auth-btn-border: #7D52F4;
  --auth-btn-inner-bg: #8F69FC;
  --Authoring-text: #1FC16B;
  --Authoring-bg: #E0FAEC;
  --Reviewer-text: #FF8447;
  --Reviewer-bg: #FFF1EB;
  --Access-Bundles-arrow: #0B4627;
  --Translation-bg: #EBF1FF;
  --Translation-text: #335CFF;
  --module-td-hover: #F2F5F8;
  --active-filters: #fef3c7;
  --active-filters-border: #fde047;
  --upload-bg: #e9ecef;
  --btn-submit-review-text:#495057;
  --btn-submit-review-hove-bg: #f8f9fa;
  --btn-submit-review-hove-text:#adb5bd;
  --btn-add-card-bg: #7c3aed;
  --btn-add-card-bg-hover: #6d28d9;
  --status-completed-bg: #d4edda;
  --status-completed-text: #155724;
  --status-progress-bg: #d1ecf1;
  --status-progress-text: #0c5460;
  --required-tag-bg: #fff3cd;
  --required-tag-text: #856404;
  --premium-tag-bg: #e9d5ff;
  --step-card-hover: #f8f7ff;
  --learn-arrow: #FFE4D6;
  --premium-bg: #CAC0FF4D;
  --bg-primary-50: rgba(255, 255, 255, 0.5);
  --bg-primary-20: rgba(143, 143, 143, 0.2);
  --bg-dark-40: rgba(0, 0, 0, 0.4);
  --flag-icon-bg: #FCC71F;
  --VideoCard-wrapper-bg: #A79678;
  --btn-del-tiny-bg: #FCA5A5;
  --btn-del-tiny-text: #EF4444;
  --btn-del-tiny-hover: #FEE2E2;
  --stepp-action-bg: #F9FAFB;
  --disabled-unselected-bg: #F3F4F6;
  --field-label-text: #374151;
  --bus-eng2-bg: #EBF8FF;
  --bus-eng2-text: #08A9B2;
  --bus-eng3-bg: #EFEBFF;
  --bus-eng3-text: #7D52F4;
  --black-80: rgba(28,28,28,0.8) --loading-indicator: #f0f9ff;
  --admin-text: #FB4BA3;
  --Reviewers-text: #06D2DD;
  --Translators-text: #F1A62D;
  --stage1-bg: #FFEBEC;
  --stage2-bg: #FFF1EB;
  --stage3-bg: #E0FAEC;
  --stage4-bg: #EBF1FF;
  --stage5-bg: #EFEBFF;
  --stage6-bg: #EBF8FF;
  --stage7-bg: #E4FBF8;
  --role-bg: #FFECC0;
  --role-text: #624C18;
  --logo-text: #1B1464;
  --logout-text: #FB3748;
  --review-chip-text: #47C2FF;
  --review-chip-bg: #EBF8FF;
  --lesson-row-hover: #f3f4f6;
  --status-update-bg: #fff3e0;
  --status-update-text: #ff9800;
  --status-waiting-bg: #e3f2fd;
  --status-waiting-text: #2196f3;
  --type-lesson-bg: #fef3e7;
  --type-lesson-text: #f39c12;
  --type-module-bg: #e8f5e9;
  --type-module-text: #4caf50;
  --type-course-bg: #fff3e0;
  --type-course-text: #ff9800;
  --completed-stage-bg: #37C390;
  --dropdown-toggle: #dee2e6;
  --update-tran-text: #FFC0C5;
  --watch-and-tap-instruction-bg-color: #1C1C1C1A --mat-option-border-bottom-line-color: #0000002e;
}
.dark-theme {
  --primary-color: #181358;
  --header-bg: #1f196a;
  --text-secondary: #c5c4c4;
  --auth-title: #fff;
  --bg-secondary: #1a0d4d;
  --bg-primary-05: rgba(255, 255, 255, 0.03);
  --bg-primary-08: #201f3c;
  --draft-dark-bg: #222530;
  --bg-primary-10: rgba(255, 255, 255, 0.1);
  --bg-primary-5: rgba(255, 255, 255, 0.05);
  --header-border: #2D2D4A;
  --step-options-border: #302F61;
  --body-wrapper-bg: #070626;
  --bella-logo-text: #3F389F;
  --text-mat-mdc-menu-item: #525866;
  --logo-text:#3F389F;
  --white-80: rgba(255, 255, 255, 0.8);
  --white-10: #515066;
  --popup-dark-bg: #3c3c54;
  --premium-bg: #2F11CE4D;
  --template-selector-bg: #141331;
  --vocabulary-wrapper-bg: #0B0D27;
  --vocabulary-header-border: rgba(45, 45, 74, 1);
  --step-preview-border: #414159;
  --preview-action-wrapper: #15142E;
  --stage1-bg: #681219;
  --stage2-bg: #682F12;
  --stage3-bg: #0B4627;
  --stage4-bg: #0E121B;
  --stage5-bg: #351A75;
  --stage6-bg: #124B68;
  --stage7-bg: #0B463E;
  --remove-dark-bg: #FF67671A;
  background-color: var(--body-wrapper-bg) !important;
}
.dark-theme .admin-toolbar {
  background-color: var(--bg-primary-08) !important;
  border: 1px solid var(--header-border) !important;
}
.dark-theme .admin-toolbar .user-info {
  color: var(--auth-title) !important;
}
.dark-theme .logo-img span {
  color: var(--logo-text);
}
.dark-theme .sidebar {
  background-color: var(--bg-primary-08) !important;
}
.dark-theme .sidebar ul li a:hover {
  background-color: var(--theme-color) !important;
  color: var(--auth-title) !important;
}
.dark-theme .sidebar .menu-toggle:after {
  border-bottom-color: var(--bg-primary-08) !important;
  right: -55px;
}
.dark-theme .content-area {
  background-color: var(--bg-primary-05) !important;
}
.dark-theme .content-area .course-subtitle {
  color: var(--auth-title) !important;
}
.dark-theme .content-area .user-title {
  color: var(--auth-title) !important;
}
.dark-theme .content-area .col-half {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .content-area .col-half table {
  background-color: transparent !important;
}
.dark-theme .content-area .col-half table tr td {
  border-color: var(--bg-primary-05) !important;
}
.dark-theme .content-area .col-half .stage1 p:last-child,
.dark-theme .content-area .col-half .stage2 p:last-child,
.dark-theme .content-area .col-half .stage3 p:last-child,
.dark-theme .content-area .col-half .stage4 p:last-child,
.dark-theme .content-area .col-half .stage5 p:last-child,
.dark-theme .content-area .col-half .stage6 p:last-child,
.dark-theme .content-area .col-half .stage7 p:last-child {
  color: var(--auth-title) !important;
}
.dark-theme .mat-mdc-menu-content {
  background-color: var(--bg-primary-08) !important;
}
.dark-theme .mat-mdc-menu-content .mat-mdc-menu-item {
  color: var(--auth-border) !important;
}
.dark-theme .mat-mdc-menu-content .mat-mdc-menu-item .mat-icon {
  color: var(--auth-border) !important;
}
.dark-theme .mat-mdc-menu-panel {
  background-color: transparent !important;
}
.dark-theme .caught::after,
.dark-theme .caught::before {
  background: var(--bg-primary-05) !important;
}
.dark-theme .create-lesson-container .header-actions .invite-btn {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .create-lesson-container .header-actions .invite-btn .auth-btn-inner {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .create-lesson-container .lesson-steps-view {
  background-color: var(--bg-primary-10);
}
.dark-theme .create-lesson-container .lesson-steps-view .steps-view-title,
.dark-theme .create-lesson-container .lesson-steps-view .step-card-name {
  color: var(--auth-title);
}
.dark-theme .create-lesson-container .lesson-steps-view .step-card-item {
  background-color: transparent;
  border-color: var(--bg-primary-10);
}
.dark-theme .create-lesson-container .lesson-steps-view .step-card-subtitle {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--auth-title) !important;
}
.dark-theme .create-lesson-container .lesson-form {
  background-color: var(--bg-primary-10);
}
.dark-theme .create-lesson-container .lesson-form .form-input,
.dark-theme .create-lesson-container .lesson-form .form-textarea,
.dark-theme .create-lesson-container .lesson-form .upload-area {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .create-lesson-container .preview-text {
  background-color: var(--bg-primary-10);
}
.dark-theme .create-lesson-container .btn-browse,
.dark-theme .create-lesson-container .btn-upload,
.dark-theme .create-lesson-container .btn-add-step,
.dark-theme .create-lesson-container .modal-content .modal-body,
.dark-theme .create-lesson-container .modal-content .modal-header,
.dark-theme .create-lesson-container .modal-content .modal-footer,
.dark-theme .create-lesson-container .btn-modal-cancel,
.dark-theme .create-lesson-container .btn-modal-save {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--auth-title) !important;
}
.dark-theme .create-lesson-container .step-item {
  background-color: transparent;
  border: 0px;
  border: 1px solid var(--bg-primary-05) !important;
  border-width: 1px 0 1px 0;
}
.dark-theme .create-lesson-container .status-draft {
  background-color: var(--draft-dark-bg) !important;
  color: var(--auth-title) !important;
}
.dark-theme .create-lesson-container .required {
  background-color: var(--stage2-bg) !important;
}
.dark-theme .create-lesson-container .premium {
  background-color: var(--premium-bg) !important;
}
.dark-theme .create-lesson-container .toggle-switch .slider {
  background-color: var(--white-10) !important;
}
.dark-theme .create-lesson-container .toggle-switch .slider::before {
  border-color: var(--bg-primary-10) !important;
  background-color: var(--white-10) !important;
}
.dark-theme .create-lesson-container .toggle-switch input:checked + .slider {
  background-color: var(--auth-btn-border) !important;
}
.dark-theme .create-lesson-container .toggle-switch input:checked + .slider::before {
  background-color: var(--auth-btn-border) !important;
}
.dark-theme .create-lesson-container .btn-add-more-cards {
  background-color: var(--white-10);
  color: var(--auth-title);
}
.dark-theme .create-lesson-container .btn-add-more-cards:hover {
  background-color: var(--white-10);
}
.dark-theme .create-lesson-container .btn-submit-review {
  background-color: var(--white-10);
  color: var(--theme-color);
  border-color: var(--theme-color);
}
.dark-theme .create-lesson-container .btn-submit-review:hover {
  background-color: var(--white-10);
}
.dark-theme .create-lesson-container .modal-content {
  background-color: #141331 !important;
}
.dark-theme .create-lesson-container .modal-content .modal-title,
.dark-theme .create-lesson-container .modal-content .step-name {
  color: var(--auth-title) !important;
}
.dark-theme .create-lesson-container .modal-content .step-card {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-05) !important;
}
.dark-theme .no-cards-container .no-cards-card {
  background-color: var(--bg-primary-10);
}
.dark-theme .no-cards-container .no-cards-card .tabs-header {
  background-color: var(--bg-primary-10);
}
.dark-theme .no-cards-container .no-cards-card .tabs-header .tab:hover {
  color: var(--auth-title);
}
.dark-theme .no-cards-container .no-cards-card .tabs-container .cards-list .card-item {
  background-color: transparent;
  border-color: var(--bg-primary-05);
}
.dark-theme .no-cards-container .no-cards-card .tabs-container .cards-list .card-item .card-title {
  color: var(--auth-title);
}
.dark-theme .no-cards-container .no-cards-card .tabs-container .cards-list .card-item .card-type-vocabulary {
  background-color: var(--Access-Bundles-arrow);
  color: var(--Authoring-text);
}
.dark-theme .no-cards-container .no-cards-card .tabs-container .cards-list .card-item .card-type-grammar {
  background-color: var(--stage2-bg);
  color: var(--bus-eng1-text);
}
.dark-theme .no-cards-container .no-cards-card .tabs-container .cards-list .card-item .card-type-sentence {
  background-color: var(--stage5-bg);
}
.dark-theme .no-cards-container .no-cards-card .empty-icon-circle {
  background-color: var(--bg-primary-10);
}
.dark-theme .no-cards-container .no-cards-card .empty-title {
  color: var(--auth-title);
}
.dark-theme .no-cards-container .no-cards-card .btn-add-card {
  background-color: var(--bg-primary-10);
  border-color: var(--bg-primary-5);
}
.dark-theme .no-cards-container .no-cards-card .btn-add-more-cards-bottom,
.dark-theme .no-cards-container .no-cards-card .btn-mark-complete {
  background-color: var(--white-10);
  color: var(--auth-title);
}
.dark-theme .no-cards-container .no-cards-card .btn-add-more-cards-bottom:hover,
.dark-theme .no-cards-container .no-cards-card .btn-mark-complete:hover {
  background-color: var(--white-10);
}
.dark-theme .no-cards-container .no-cards-card .btn-mark-complete {
  opacity: 0.5;
}
.dark-theme .no-cards-container .no-cards-card .bottom-actions {
  background-color: transparent;
  border-color: var(--bg-primary-05);
}
.dark-theme .preview-step-popup-backdrop .preview-step-popup-container {
  background-color: var(--template-selector-bg);
  border: 1px solid var(--white-10);
}
.dark-theme .preview-step-popup-backdrop .preview-step-popup-container .preview-step-popup-body p {
  color: var(--auth-title);
}
.dark-theme .preview-step-popup-backdrop .preview-step-popup-container .preview-footer {
  border-color: var(--white-10) !important;
}
.dark-theme .preview-step-popup-backdrop .preview-step-popup-container .preview-footer .mdc-label {
  color: var(--auth-title);
}
.dark-theme .preview-step-popup-backdrop .preview-step-popup-container .preview-footer .cancel-btn {
  background-color: var(--white-10) !important;
  border: 1px solid var(--bg-primary-08) !important;
}
.dark-theme .preview-step-popup-backdrop .preview-step-popup-container .preview-footer .save-btn {
  color: var(--auth-title) !important;
}
.dark-theme .template-selector-overlay .template-selector-container {
  background-color: var(--template-selector-bg) !important;
}
.dark-theme .template-selector-overlay .template-selector-container .selector-header,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer {
  background-color: var(--white-10);
  border: 1px solid var(--bg-primary-05);
}
.dark-theme .template-selector-overlay .template-selector-container .selector-header .btn-footer-secondary,
.dark-theme .template-selector-overlay .template-selector-container .selector-header .btn-footer-primary,
.dark-theme .template-selector-overlay .template-selector-container .selector-header .btn-footer-save,
.dark-theme .template-selector-overlay .template-selector-container .selector-header .btn-footer-info,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer .btn-footer-secondary,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer .btn-footer-primary,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer .btn-footer-save,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer .btn-footer-info {
  background-color: var(--white-10) !important;
}
.dark-theme .template-selector-overlay .template-selector-container .selector-header .btn-footer-secondary:hover,
.dark-theme .template-selector-overlay .template-selector-container .selector-header .btn-footer-primary:hover,
.dark-theme .template-selector-overlay .template-selector-container .selector-header .btn-footer-save:hover,
.dark-theme .template-selector-overlay .template-selector-container .selector-header .btn-footer-info:hover,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer .btn-footer-secondary:hover,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer .btn-footer-primary:hover,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer .btn-footer-save:hover,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer .btn-footer-info:hover {
  background-color: var(--white-10) !important;
}
.dark-theme .template-selector-overlay .template-selector-container .selector-header .btn-footer-save,
.dark-theme .template-selector-overlay .template-selector-container .selector-footer .btn-footer-save {
  border: 1px solid var(--auth-border);
}
.dark-theme .template-selector-overlay .template-selector-container .selector-left,
.dark-theme .template-selector-overlay .template-selector-container .selector-preview {
  background-color: var(--bg-primary-08);
}
.dark-theme .template-selector-overlay .template-selector-container .selector-left .dropdown-wrapper .dropdown-toggle,
.dark-theme .template-selector-overlay .template-selector-container .selector-preview .dropdown-wrapper .dropdown-toggle {
  background-color: var(--white-10);
}
.dark-theme .template-selector-overlay .template-selector-container .selector-left .dropdown-wrapper .category-item:hover,
.dark-theme .template-selector-overlay .template-selector-container .selector-preview .dropdown-wrapper .category-item:hover {
  background-color: var(--theme-color);
  color: var(--auth-title);
}
.dark-theme .template-selector-overlay .template-selector-container .selector-left .template-list .template-item:hover,
.dark-theme .template-selector-overlay .template-selector-container .selector-preview .template-list .template-item:hover {
  background-color: var(--theme-color);
  color: var(--auth-title);
}
.dark-theme .template-selector-overlay .template-selector-container .selector-left .preview-placeholder .preview-title,
.dark-theme .template-selector-overlay .template-selector-container .selector-preview .preview-placeholder .preview-title {
  color: var(--black-80);
}
.dark-theme .template-selector-overlay .template-selector-container .selector-left .preview-placeholder .preview-subtitle,
.dark-theme .template-selector-overlay .template-selector-container .selector-preview .preview-placeholder .preview-subtitle {
  color: var(--black-80);
}
.dark-theme .template-selector-overlay .template-selector-container .selector-left .empty-state,
.dark-theme .template-selector-overlay .template-selector-container .selector-preview .empty-state {
  background-color: var(--white-10);
}
.dark-theme .template-selector-overlay .template-selector-container .selector-left .empty-icon,
.dark-theme .template-selector-overlay .template-selector-container .selector-preview .empty-icon {
  border: 1px solid var(--auth-title);
  background-color: transparent;
}
.dark-theme .template-selector-overlay .template-selector-container .selector-left .empty-icon svg path,
.dark-theme .template-selector-overlay .template-selector-container .selector-preview .empty-icon svg path {
  fill: var(--auth-title) !important;
}
.dark-theme .preview-text {
  background-color: var(--white-10) !important;
}
.dark-theme .preview-wrapper .selector-body {
  background-color: var(--template-selector-bg);
}
.dark-theme .preview-wrapper .selector-body .preview-steps {
  background-color: var(--auth-title) !important;
}
.dark-theme .Bucket-Drop .template-selector-btn {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-panel-header-title {
  color: var(--auth-title) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel .mat-expansion-panel-header svg {
  fill: var(--auth-border) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel .mat-expansion-panel-header:hover {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel .mat-expansion-panel-body input {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel .mat-expansion-panel-body .word-table {
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel .mat-expansion-panel-body .word-table .table-header-row {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel .mat-expansion-panel-body .word-table .table-data-row {
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel .mat-expansion-panel-body .word-table .table-data-row .btn-gen,
.dark-theme .Bucket-Drop .selector-body .col-half .mat-expansion-panel .mat-expansion-panel-body .word-table .table-data-row .btn-upl {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .footer-buttons {
  background-color: var(--body-wrapper-bg) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .footer-buttons .btn-cancel {
  background-color: var(--body-wrapper-bg) !important;
}
.dark-theme .Bucket-Drop .selector-body .col-half .footer-buttons .btn-save {
  background-color: var(--theme-color) !important;
  color: var(--auth-title) !important;
}
.dark-theme .multioption-wrapper .error-explanation-box-inner {
  background-color: var(--popup-dark-bg) !important;
  color: var(--auth-border);
}
.dark-theme .multioption-wrapper .error-explanation-box-inner .Explain-btn,
.dark-theme .multioption-wrapper .error-explanation-box-inner .error-action-btn,
.dark-theme .multioption-wrapper .error-explanation-box-inner .error-edit-btn,
.dark-theme .multioption-wrapper .error-explanation-box-inner .explanation-intro {
  background-color: var(--bg-primary-10) !important;
  color: var(--auth-border) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .multioption-wrapper .error-explanation-box-inner .Explain-btn path,
.dark-theme .multioption-wrapper .error-explanation-box-inner .error-action-btn path,
.dark-theme .multioption-wrapper .error-explanation-box-inner .error-edit-btn path,
.dark-theme .multioption-wrapper .error-explanation-box-inner .explanation-intro path {
  fill: var(--auth-border) !important;
}
.dark-theme .multioption-wrapper .Pick-text {
  color: var(--auth-border) !important;
}
.dark-theme .multioption-wrapper .Option-wrapper .Option {
  background-color: var(--header-border) !important;
  border-color: var(--step-options-border) !important;
  box-shadow: rgba(255, 255, 255, 0.2) 0px 4px 2.6px !important;
}
.dark-theme .vocabulary-wrapper .mat-expansion-panel {
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .mat-expansion-panel .collection-content {
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .mat-expansion-panel .mat-expansion-panel-header.mat-expanded {
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .collection-content .word-pair-label,
.dark-theme .vocabulary-wrapper .collection-content .form-input-small {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .selector-header {
  background-color: var(--vocabulary-wrapper-bg) !important;
  border: 1px solid var(--vocabulary-header-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .vocabulary-accordions .upload-picture-title {
  color: var(--auth-border);
}
.dark-theme .vocabulary-wrapper .step-col .vocabulary-accordions .video-card-wrapper {
  background-color: var(--bg-primary-10);
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .vocabulary-accordions .video-info-wrapper {
  background-color: var(--stage5-bg) !important;
  border: 1px solid var(--theme-color);
}
.dark-theme .vocabulary-wrapper .step-col .vocabulary-accordions .video-info-wrapper .play-icon {
  background-color: var(--theme-color) !important;
}
.dark-theme .vocabulary-wrapper .step-col .vocabulary-accordions .video-info-wrapper .play-icon path {
  fill: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .vocabulary-accordions .video-info-wrapper .ready-text {
  background-color: var(--theme-color) !important;
  color: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .vocabulary-accordions .video-info-wrapper .marking_mode {
  color: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .vocabulary-accordions .video-info-wrapper .marking_mode path {
  fill: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .exit_mode {
  color: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .confirm-exit-popup {
  background-color: var(--popup-dark-bg) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .confirm-exit-popup svg path {
  fill: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .confirm-exit-popup .confirm-exit-footer {
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .confirm-exit-popup .confirm-exit-footer .cancelBtn {
  border-color: var(--bg-primary-10) !important;
  color: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .confirm-exit-popup .confirm-exit-footer .saveBtn {
  background-color: var(--theme-color) !important;
  color: var(--auth-border) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .confirm-exit-popup::after {
  background-color: var(--popup-dark-bg) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .play-alert {
  background-color: var(--popup-dark-bg) !important;
}
.dark-theme .vocabulary-wrapper .step-col .play-alert svg path {
  fill: var(--auth-border);
}
.dark-theme .vocabulary-wrapper .step-col .progress-slides-left {
  background-color: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .use-instraction {
  background-color: var(--popup-dark-bg) !important;
}
.dark-theme .vocabulary-wrapper .step-col .use-instraction span {
  background-color: var(--auth-border) !important;
  color: var(--primary-color) !important;
}
.dark-theme .vocabulary-wrapper .step-col .Press-wrapper {
  color: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .Press-wrapper .Press-text,
.dark-theme .vocabulary-wrapper .step-col .Press-wrapper .ques-text {
  color: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps {
  background-color: var(--body-wrapper-bg) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .progress-icon strong {
  color: var(--auth-title) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .step-body .type-text {
  color: var(--auth-title) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .step-body .options-wrapper .option,
.dark-theme .vocabulary-wrapper .step-col .preview-steps .step-body .options-wrapper .word-card,
.dark-theme .vocabulary-wrapper .step-col .preview-steps .step-body .word-pairs-container .option,
.dark-theme .vocabulary-wrapper .step-col .preview-steps .step-body .word-pairs-container .word-card {
  background-color: var(--header-border) !important;
  border-color: var(--step-options-border) !important;
  color: var(--auth-title) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .step-body .config-col {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .template-selector-btn {
  background-color: #2C2B46 !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .Sentence-card {
  background-color: var(--bg-primary-5) !important;
}
.dark-theme .vocabulary-wrapper .step-col .Sentence-card .Sentence-card-header {
  color: var(--auth-title) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .add-card-btn {
  background-color: var(--bg-primary-10) !important;
  color: var(--auth-title) !important;
}
.dark-theme .vocabulary-wrapper .step-col .add-card-btn svg path {
  fill: var(--auth-title);
}
.dark-theme .vocabulary-wrapper .step-col .audio-player-wrapper .audio-waveform {
  background-color: var(--bg-primary-10) !important;
  border: 1px solid var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .audio-player-wrapper .audio-waveform .play-pause-btn {
  background-color: transparent !important;
}
.dark-theme .vocabulary-wrapper .step-col .audio-player-wrapper .audio-waveform .play-pause-btn path {
  fill: var(--auth-title);
  stroke: var(--auth-title);
}
.dark-theme .vocabulary-wrapper .step-col .audio-player-wrapper .audio-waveform .waveform-bars .bar {
  background-color: var(--text-secondary) !important;
}
.dark-theme .vocabulary-wrapper .step-col .quill-editor-wrapper .char-count-bottom {
  background-color: var(--bg-primary-5) !important;
}
.dark-theme .vocabulary-wrapper .step-col .quill-editor-wrapper .custom-quill-editor {
  background-color: var(--bg-primary-5) !important;
}
.dark-theme .vocabulary-wrapper .step-col .quill-editor-wrapper .custom-quill-editor .ql-toolbar,
.dark-theme .vocabulary-wrapper .step-col .quill-editor-wrapper .custom-quill-editor .ql-container {
  background-color: var(--bg-primary-5) !important;
}
.dark-theme .vocabulary-wrapper .step-col .upload-btn {
  background-color: var(--bg-primary-5) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--auth-title) !important;
}
.dark-theme .vocabulary-wrapper .step-col .form-input,
.dark-theme .vocabulary-wrapper .step-col .form-textarea {
  background-color: var(--bg-primary-05);
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .mat-expansion-panel-header {
  background-color: var(--white-10) !important;
  border-color: var(--auth-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .mat-expansion-panel-header .mat-expansion-panel-header-title,
.dark-theme .vocabulary-wrapper .step-col .mat-expansion-panel-header .mat-expansion-panel-header-description {
  color: var(--auth-title) !important;
}
.dark-theme .vocabulary-wrapper .step-col .mat-expansion-panel-header .mat-expansion-indicator svg {
  fill: var(--auth-title) !important;
}
.dark-theme .vocabulary-wrapper .step-col .mat-expansion-panel-body {
  background-color: var(--white-10) !important;
}
.dark-theme .vocabulary-wrapper .step-col .dev-action {
  background-color: var(--body-wrapper-bg) !important;
  border-color: var(--bg-primary-10);
}
.dark-theme .vocabulary-wrapper .step-col .dev-action .cancel {
  background-color: var(--stage4-bg) !important;
  color: var(--auth-title);
  border-color: transparent !important;
}
.dark-theme .vocabulary-wrapper .step-col .dev-action .save {
  background-color: var(--theme-color) !important;
  color: var(--auth-title) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps {
  background-color: var(--body-wrapper-bg) !important;
  border-color: var(--step-preview-border) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .preview-header {
  color: var(--auth-title);
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .preview-header img {
  filter: invert(1);
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .value-card {
  background-color: var(--stage5-bg) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .progress-icon path {
  fill: var(--auth-title) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .newword {
  background-color: var(--stage5-bg) !important;
}
.dark-theme .vocabulary-wrapper .step-col .preview-steps .step-action {
  background-color: var(--preview-action-wrapper) !important;
}
.dark-theme .CardTemplateSelector .selector-column {
  background-color: var(--popup-dark-bg) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .CardTemplateSelector .selector-column .column-header,
.dark-theme .CardTemplateSelector .selector-column .column-body,
.dark-theme .CardTemplateSelector .selector-column .category-item {
  background-color: var(--popup-dark-bg) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .CardTemplateSelector .selector-column .subcategory-item:hover,
.dark-theme .CardTemplateSelector .selector-column .template-item:hover {
  background-color: var(--popup-dark-bg) !important;
}
.dark-theme .CardTemplateSelector .selector-content .selector-center {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .CardTemplateSelector .selector-content .selector-center .preview-card {
  background-color: var(--template-selector-bg) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .CardTemplateSelector .selector-content .selector-center .preview-card svg path {
  fill: var(--auth-title) !important;
}
.dark-theme .AssemblySplitFromText .audio-wave-full,
.dark-theme .AssemblySplitFromAudio .audio-wave-full,
.dark-theme .AssemblyBuildFromAudio .audio-wave-full,
.dark-theme .AssemblyBuildFromText .audio-wave-full,
.dark-theme .CardTemplateSelector .audio-wave-full {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .AssemblySplitFromText .audio-wave-full .play-btn-full,
.dark-theme .AssemblySplitFromAudio .audio-wave-full .play-btn-full,
.dark-theme .AssemblyBuildFromAudio .audio-wave-full .play-btn-full,
.dark-theme .AssemblyBuildFromText .audio-wave-full .play-btn-full,
.dark-theme .CardTemplateSelector .audio-wave-full .play-btn-full {
  background-color: transparent !important;
}
.dark-theme .AssemblySplitFromText .audio-wave-full .play-btn-full svg,
.dark-theme .AssemblySplitFromAudio .audio-wave-full .play-btn-full svg,
.dark-theme .AssemblyBuildFromAudio .audio-wave-full .play-btn-full svg,
.dark-theme .AssemblyBuildFromText .audio-wave-full .play-btn-full svg,
.dark-theme .CardTemplateSelector .audio-wave-full .play-btn-full svg {
  fill: var(--auth-title) !important;
}
.dark-theme .AssemblySplitFromText .vocabulary-accordions .mat-expansion-panel,
.dark-theme .AssemblySplitFromAudio .vocabulary-accordions .mat-expansion-panel,
.dark-theme .AssemblyBuildFromAudio .vocabulary-accordions .mat-expansion-panel,
.dark-theme .AssemblyBuildFromText .vocabulary-accordions .mat-expansion-panel,
.dark-theme .CardTemplateSelector .vocabulary-accordions .mat-expansion-panel {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .AssemblySplitFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header:hover,
.dark-theme .AssemblySplitFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header:hover,
.dark-theme .AssemblyBuildFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header:hover,
.dark-theme .AssemblyBuildFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header:hover,
.dark-theme .CardTemplateSelector .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header:hover {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .AssemblySplitFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-panel-header-title,
.dark-theme .AssemblySplitFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-panel-header-title,
.dark-theme .AssemblyBuildFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-panel-header-title,
.dark-theme .AssemblyBuildFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-panel-header-title,
.dark-theme .CardTemplateSelector .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-panel-header-title {
  color: var(--auth-title) !important;
}
.dark-theme .AssemblySplitFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header svg,
.dark-theme .AssemblySplitFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header svg,
.dark-theme .AssemblyBuildFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header svg,
.dark-theme .AssemblyBuildFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header svg,
.dark-theme .CardTemplateSelector .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-header svg {
  fill: var(--auth-title) !important;
}
.dark-theme .AssemblySplitFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body input,
.dark-theme .AssemblySplitFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body input,
.dark-theme .AssemblyBuildFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body input,
.dark-theme .AssemblyBuildFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body input,
.dark-theme .CardTemplateSelector .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body input {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssemblySplitFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-gen-audio,
.dark-theme .AssemblySplitFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-upl-audio,
.dark-theme .AssemblySplitFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-gen-audio,
.dark-theme .AssemblySplitFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-upl-audio,
.dark-theme .AssemblyBuildFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-gen-audio,
.dark-theme .AssemblyBuildFromAudio .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-upl-audio,
.dark-theme .AssemblyBuildFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-gen-audio,
.dark-theme .AssemblyBuildFromText .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-upl-audio,
.dark-theme .CardTemplateSelector .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-gen-audio,
.dark-theme .CardTemplateSelector .vocabulary-accordions .mat-expansion-panel .mat-expansion-panel-body .audio-controls .btn-upl-audio {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssemblySplitFromText .footer-buttons,
.dark-theme .AssemblySplitFromText .template-selector-btn,
.dark-theme .AssemblySplitFromAudio .footer-buttons,
.dark-theme .AssemblySplitFromAudio .template-selector-btn,
.dark-theme .AssemblyBuildFromAudio .footer-buttons,
.dark-theme .AssemblyBuildFromAudio .template-selector-btn,
.dark-theme .AssemblyBuildFromText .footer-buttons,
.dark-theme .AssemblyBuildFromText .template-selector-btn,
.dark-theme .CardTemplateSelector .footer-buttons,
.dark-theme .CardTemplateSelector .template-selector-btn {
  background-color: var(--body-wrapper-bg) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssemblySplitFromText .footer-buttons .template-label,
.dark-theme .AssemblySplitFromText .template-selector-btn .template-label,
.dark-theme .AssemblySplitFromAudio .footer-buttons .template-label,
.dark-theme .AssemblySplitFromAudio .template-selector-btn .template-label,
.dark-theme .AssemblyBuildFromAudio .footer-buttons .template-label,
.dark-theme .AssemblyBuildFromAudio .template-selector-btn .template-label,
.dark-theme .AssemblyBuildFromText .footer-buttons .template-label,
.dark-theme .AssemblyBuildFromText .template-selector-btn .template-label,
.dark-theme .CardTemplateSelector .footer-buttons .template-label,
.dark-theme .CardTemplateSelector .template-selector-btn .template-label {
  color: var(--auth-title) !important;
}
.dark-theme .AssemblySplitFromText .footer-buttons .btn-cancel,
.dark-theme .AssemblySplitFromText .template-selector-btn .btn-cancel,
.dark-theme .AssemblySplitFromAudio .footer-buttons .btn-cancel,
.dark-theme .AssemblySplitFromAudio .template-selector-btn .btn-cancel,
.dark-theme .AssemblyBuildFromAudio .footer-buttons .btn-cancel,
.dark-theme .AssemblyBuildFromAudio .template-selector-btn .btn-cancel,
.dark-theme .AssemblyBuildFromText .footer-buttons .btn-cancel,
.dark-theme .AssemblyBuildFromText .template-selector-btn .btn-cancel,
.dark-theme .CardTemplateSelector .footer-buttons .btn-cancel,
.dark-theme .CardTemplateSelector .template-selector-btn .btn-cancel {
  background-color: var(--stage4-bg) !important;
  color: var(--auth-title) !important;
  border-color: var(--stage4-bg) !important;
}
.dark-theme .AssemblySplitFromText .footer-buttons .btn-save,
.dark-theme .AssemblySplitFromText .template-selector-btn .btn-save,
.dark-theme .AssemblySplitFromAudio .footer-buttons .btn-save,
.dark-theme .AssemblySplitFromAudio .template-selector-btn .btn-save,
.dark-theme .AssemblyBuildFromAudio .footer-buttons .btn-save,
.dark-theme .AssemblyBuildFromAudio .template-selector-btn .btn-save,
.dark-theme .AssemblyBuildFromText .footer-buttons .btn-save,
.dark-theme .AssemblyBuildFromText .template-selector-btn .btn-save,
.dark-theme .CardTemplateSelector .footer-buttons .btn-save,
.dark-theme .CardTemplateSelector .template-selector-btn .btn-save {
  background-color: var(--theme-color) !important;
  color: var(--auth-title) !important;
  border-color: var(--theme-color) !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .status-icons,
.dark-theme .AssemblySplitFromAudio .preview-steps .status-icons,
.dark-theme .AssemblyBuildFromAudio .preview-steps .status-icons,
.dark-theme .AssemblyBuildFromText .preview-steps .status-icons,
.dark-theme .CardTemplateSelector .preview-steps .status-icons {
  filter: invert(1);
}
.dark-theme .AssemblySplitFromText .preview-steps .display-word,
.dark-theme .AssemblySplitFromAudio .preview-steps .display-word,
.dark-theme .AssemblyBuildFromAudio .preview-steps .display-word,
.dark-theme .AssemblyBuildFromText .preview-steps .display-word,
.dark-theme .CardTemplateSelector .preview-steps .display-word {
  background-color: var(--stage5-bg) !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .question-title,
.dark-theme .AssemblySplitFromAudio .preview-steps .question-title,
.dark-theme .AssemblyBuildFromAudio .preview-steps .question-title,
.dark-theme .AssemblyBuildFromText .preview-steps .question-title,
.dark-theme .CardTemplateSelector .preview-steps .question-title {
  color: var(--auth-title) !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .empty-sentence-placeholder,
.dark-theme .AssemblySplitFromText .preview-steps .built-words-container,
.dark-theme .AssemblySplitFromAudio .preview-steps .empty-sentence-placeholder,
.dark-theme .AssemblySplitFromAudio .preview-steps .built-words-container,
.dark-theme .AssemblyBuildFromAudio .preview-steps .empty-sentence-placeholder,
.dark-theme .AssemblyBuildFromAudio .preview-steps .built-words-container,
.dark-theme .AssemblyBuildFromText .preview-steps .empty-sentence-placeholder,
.dark-theme .AssemblyBuildFromText .preview-steps .built-words-container,
.dark-theme .CardTemplateSelector .preview-steps .empty-sentence-placeholder,
.dark-theme .CardTemplateSelector .preview-steps .built-words-container {
  background-color: transparent !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .built-sentence-area .built-words-container .built-word,
.dark-theme .AssemblySplitFromAudio .preview-steps .built-sentence-area .built-words-container .built-word,
.dark-theme .AssemblyBuildFromAudio .preview-steps .built-sentence-area .built-words-container .built-word,
.dark-theme .AssemblyBuildFromText .preview-steps .built-sentence-area .built-words-container .built-word,
.dark-theme .CardTemplateSelector .preview-steps .built-sentence-area .built-words-container .built-word {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--auth-title) !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .step-action .check-btn,
.dark-theme .AssemblySplitFromAudio .preview-steps .step-action .check-btn,
.dark-theme .AssemblyBuildFromAudio .preview-steps .step-action .check-btn,
.dark-theme .AssemblyBuildFromText .preview-steps .step-action .check-btn,
.dark-theme .CardTemplateSelector .preview-steps .step-action .check-btn {
  background-color: var(--bg-primary-20) !important;
  border-color: var(--bg-primary-10) !important;
  color: var(--auth-title) !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .word-chips-container .word-chip,
.dark-theme .AssemblySplitFromAudio .preview-steps .word-chips-container .word-chip,
.dark-theme .AssemblyBuildFromAudio .preview-steps .word-chips-container .word-chip,
.dark-theme .AssemblyBuildFromText .preview-steps .word-chips-container .word-chip,
.dark-theme .CardTemplateSelector .preview-steps .word-chips-container .word-chip {
  background-color: var(--header-border);
  border-color: var(--step-options-border);
  color: var(--auth-title);
}
.dark-theme .AssemblySplitFromText .preview-steps .sentence-display,
.dark-theme .AssemblySplitFromAudio .preview-steps .sentence-display,
.dark-theme .AssemblyBuildFromAudio .preview-steps .sentence-display,
.dark-theme .AssemblyBuildFromText .preview-steps .sentence-display,
.dark-theme .CardTemplateSelector .preview-steps .sentence-display {
  background-color: var(--stage5-bg) !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .typing-area .typing-input-wrapper,
.dark-theme .AssemblySplitFromAudio .preview-steps .typing-area .typing-input-wrapper,
.dark-theme .AssemblyBuildFromAudio .preview-steps .typing-area .typing-input-wrapper,
.dark-theme .AssemblyBuildFromText .preview-steps .typing-area .typing-input-wrapper,
.dark-theme .CardTemplateSelector .preview-steps .typing-area .typing-input-wrapper {
  border-color: var(--bg-primary-10) !important;
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .letter-row .letter-key,
.dark-theme .AssemblySplitFromAudio .preview-steps .letter-row .letter-key,
.dark-theme .AssemblyBuildFromAudio .preview-steps .letter-row .letter-key,
.dark-theme .AssemblyBuildFromText .preview-steps .letter-row .letter-key,
.dark-theme .CardTemplateSelector .preview-steps .letter-row .letter-key {
  border-color: var(--bg-primary-10) !important;
  background-color: var(--bg-primary-10) !important;
  border-bottom-width: 3px !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .space-btn,
.dark-theme .AssemblySplitFromAudio .preview-steps .space-btn,
.dark-theme .AssemblyBuildFromAudio .preview-steps .space-btn,
.dark-theme .AssemblyBuildFromText .preview-steps .space-btn,
.dark-theme .CardTemplateSelector .preview-steps .space-btn {
  border-color: var(--bg-primary-10) !important;
  background-color: var(--bg-primary-10) !important;
  border-bottom-width: 3px !important;
}
.dark-theme .AssemblySplitFromText .preview-steps .step-action button path,
.dark-theme .AssemblySplitFromAudio .preview-steps .step-action button path,
.dark-theme .AssemblyBuildFromAudio .preview-steps .step-action button path,
.dark-theme .AssemblyBuildFromText .preview-steps .step-action button path,
.dark-theme .CardTemplateSelector .preview-steps .step-action button path {
  stroke: var(--auth-title) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .template-selector-btn {
  background-color: var(--popup-dark-bg) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .preview-steps {
  border-color: var(--popup-dark-bg) !important;
  background-color: var(--body-wrapper-bg) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .preview-steps .preview-header {
  color: var(--auth-border) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .preview-steps .preview-header svg {
  filter: invert(1);
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .preview-steps .progress-wrapper {
  color: var(--auth-border);
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .preview-steps .progress-wrapper path {
  fill: var(--auth-border);
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .preview-steps .word-pairs-container .word-pair-row .word-card {
  background-color: var(--header-border) !important;
  border-width: 0px 0px 3px 0;
  border-color: var(--bg-primary-20) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .preview-steps .step-action {
  background-color: transparent !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .preview-steps .step-action .Continue-btn {
  color: var(--auth-title) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .dev-action {
  background-color: var(--body-wrapper-bg) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .dev-action .cancel {
  background-color: var(--stage4-bg) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .dev-action .save {
  background-color: var(--theme-color) !important;
  color: var(--auth-title) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .collection-content {
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .collection-content .word-pair-label {
  background-color: var(--bg-primary-10) !important;
  color: var(--auth-title) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .collection-content .pair-display,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .collection-content .collection-pair-item,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .collection-content .pair-inputs-row {
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel-header,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .form-input-small {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel-header .mat-expansion-panel-header-title,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel .mat-expansion-panel-header-title,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .form-input-small .mat-expansion-panel-header-title {
  color: var(--auth-border) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel-header svg,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel svg,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .form-input-small svg {
  fill: var(--auth-border);
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel-header:hover,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel:hover,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .form-input-small:hover {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel-header .form-input,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel .form-input,
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .form-input-small .form-input {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel-body {
  background-color: var(--popup-dark-bg) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel-body .btn-remove-pair-icon {
  background-color: var(--remove-dark-bg) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel-body .btn-remove-pair-icon path {
  fill: var(--auth-title) !important;
}
.dark-theme .AssosiationMatch-wrapper .selector-body .step-col .mat-expansion-panel-body .btn-add-pair-icon {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .video-wrapper .mat-expansion-panel {
  background-color: transparent !important;
}
.dark-theme .video-wrapper .step-body {
  color: var(--auth-title);
}
.dark-theme .video-wrapper .step-body .VideoCard-text {
  color: var(--auth-title) !important;
}
.dark-theme .video-wrapper .step-body .Swipe-text {
  color: var(--body-wrapper-bg) !important;
}
.dark-theme .video-wrapper .step-action {
  background-color: transparent !important;
}
.dark-theme .video-wrapper .step-action .Continue-btn {
  color: var(--auth-title) !important;
}
.dark-theme .reviewer-dashboard .course-subtitle {
  color: var(--white-80) !important;
}
.dark-theme .reviewer-dashboard .mdc-tab {
  background-color: var(--white-10) !important;
  border-color: var(--white-10) !important;
  color: var(--auth-title) !important;
}
.dark-theme .reviewer-dashboard .mdc-tab.mdc-tab--active {
  background-color: var(--theme-color) !important;
  border-color: var(--stage5-bg) !important;
}
.dark-theme .reviewer-dashboard .mdc-tab.mdc-tab--active .mdc-tab__text-label {
  color: var(--auth-title) !important;
}
.dark-theme .reviewer-dashboard .mdc-tab .mdc-tab__text-label {
  color: var(--auth-title) !important;
}
.dark-theme .reviewer-dashboard .Lesson-card {
  background-color: var(--bg-primary-10) !important;
  border-color: var(--bg-primary-10) !important;
}
.dark-theme .reviewer-dashboard .Lesson-card .type-lesson {
  background-color: transparent !important;
}
.dark-theme .reviewer-dashboard .Lesson-card.card-needs-update {
  background-color: var(--stage1-bg) !important;
  border-color: var(--logout-text) !important;
}
.dark-theme .reviewer-dashboard .Lesson-card.card-needs-update .review-chip {
  background-color: var(--bg-primary-10) !important;
  color: var(--update-tran-text) !important;
}
.dark-theme .reviewer-dashboard .Lesson-card .review-chip {
  background-color: var(--stage6-bg) !important;
}
.dark-theme .reviewer-dashboard .Lesson-card .Rejected-chip {
  background-color: var(--stage1-bg) !important;
}
.dark-theme .reviewer-dashboard .Lesson-card .Approved-chip {
  background-color: var(--stage3-bg) !important;
}
.dark-theme .reviewer-dashboard .Lesson-card .feedback-wrapper {
  background-color: var(--bg-primary-10) !important;
}
.dark-theme .reviewer-dashboard .Lesson-card .feedback-wrapper a {
  color: var(--theme-color) !important;
}
html {
  --mat-sys-background: light-dark(#faf9fd, #121316);
  --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
  --mat-sys-error-container: light-dark(#ffdad6, #93000a);
  --mat-sys-inverse-on-surface: light-dark(#f2f0f4, #2f3033);
  --mat-sys-inverse-primary: light-dark(#abc7ff, #005cbb);
  --mat-sys-inverse-surface: light-dark(#2f3033, #e3e2e6);
  --mat-sys-on-background: light-dark(#1a1b1f, #e3e2e6);
  --mat-sys-on-error: light-dark(#ffffff, #690005);
  --mat-sys-on-error-container: light-dark(#93000a, #ffdad6);
  --mat-sys-on-primary: light-dark(#ffffff, #002f65);
  --mat-sys-on-primary-container: light-dark(#00458f, #d7e3ff);
  --mat-sys-on-primary-fixed: light-dark(#001b3f, #001b3f);
  --mat-sys-on-primary-fixed-variant: light-dark(#00458f, #00458f);
  --mat-sys-on-secondary: light-dark(#ffffff, #283041);
  --mat-sys-on-secondary-container: light-dark(#3e4759, #dae2f9);
  --mat-sys-on-secondary-fixed: light-dark(#131c2b, #131c2b);
  --mat-sys-on-secondary-fixed-variant: light-dark(#3e4759, #3e4759);
  --mat-sys-on-surface: light-dark(#1a1b1f, #e3e2e6);
  --mat-sys-on-surface-variant: light-dark(#44474e, #e0e2ec);
  --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(#74777f, #8e9099);
  --mat-sys-outline-variant: light-dark(#c4c6d0, #44474e);
  --mat-sys-primary: light-dark(#005cbb, #abc7ff);
  --mat-sys-primary-container: light-dark(#d7e3ff, #00458f);
  --mat-sys-primary-fixed: light-dark(#d7e3ff, #d7e3ff);
  --mat-sys-primary-fixed-dim: light-dark(#abc7ff, #abc7ff);
  --mat-sys-scrim: light-dark(#000000, #000000);
  --mat-sys-secondary: light-dark(#565e71, #bec6dc);
  --mat-sys-secondary-container: light-dark(#dae2f9, #3e4759);
  --mat-sys-secondary-fixed: light-dark(#dae2f9, #dae2f9);
  --mat-sys-secondary-fixed-dim: light-dark(#bec6dc, #bec6dc);
  --mat-sys-shadow: light-dark(#000000, #000000);
  --mat-sys-surface: light-dark(#faf9fd, #121316);
  --mat-sys-surface-bright: light-dark(#faf9fd, #38393c);
  --mat-sys-surface-container: light-dark(#efedf0, #1f2022);
  --mat-sys-surface-container-high: light-dark(#e9e7eb, #292a2c);
  --mat-sys-surface-container-highest: light-dark(#e3e2e6, #343537);
  --mat-sys-surface-container-low: light-dark(#f4f3f6, #1a1b1f);
  --mat-sys-surface-container-lowest: light-dark(#ffffff, #0d0e11);
  --mat-sys-surface-dim: light-dark(#dbd9dd, #121316);
  --mat-sys-surface-tint: light-dark(#005cbb, #abc7ff);
  --mat-sys-surface-variant: light-dark(#e0e2ec, #44474e);
  --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: #2d3038;
  --mat-sys-neutral10: #1a1b1f;
  --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 Roboto;
  --mat-sys-body-large-font: Roboto;
  --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 Roboto;
  --mat-sys-body-medium-font: Roboto;
  --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 Roboto;
  --mat-sys-body-small-font: Roboto;
  --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 Roboto;
  --mat-sys-display-large-font: Roboto;
  --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 Roboto;
  --mat-sys-display-medium-font: Roboto;
  --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 Roboto;
  --mat-sys-display-small-font: Roboto;
  --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 Roboto;
  --mat-sys-headline-large-font: Roboto;
  --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 Roboto;
  --mat-sys-headline-medium-font: Roboto;
  --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 Roboto;
  --mat-sys-headline-small-font: Roboto;
  --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 Roboto;
  --mat-sys-label-large-font: Roboto;
  --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 Roboto;
  --mat-sys-label-medium-font: Roboto;
  --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 Roboto;
  --mat-sys-label-small-font: Roboto;
  --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 Roboto;
  --mat-sys-title-large-font: Roboto;
  --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 Roboto;
  --mat-sys-title-medium-font: Roboto;
  --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 Roboto;
  --mat-sys-title-small-font: Roboto;
  --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;
}
body {
  color-scheme: light;
  height: max-content !important;
  min-height: 100vh !important;
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: var(--mat-sys-body-medium);
  margin: 0;
}
body .preview-steps {
  height: 850px !important;
  display: flex;
  flex-direction: column;
}
body .preview-steps .step-action {
  margin-top: auto !important;
}
button {
  cursor: pointer;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family:
    Roboto,
    "Helvetica Neue",
    sans-serif;
}
.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;
  }
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: white !important;
}
.mat-mdc-form-field-focus-overlay {
  background-color: transparent !important;
}
.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;
}
.flex-1 {
  flex: 1;
}
.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;
}
.text-center {
  text-align: center !important;
}
.right-0 {
  right: 0;
}
.left-0 {
  left: 0;
}
.w-50 {
  width: 50%;
}
.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;
}
.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;
}
.fw-semibold {
  font-weight: 600;
}
.fw-bold {
  font-weight: bold;
}
.fw-medium {
  font-weight: 500;
}
.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(--primary-color);
  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);
}
.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: none;
}
.course-title {
  color: var(--auth-title);
}
.course-subtitle {
  color: var(--black-80);
}
.add-new-btn {
  border: 1px solid var(--auth-btn-border);
  border-bottom-width: 3px;
  background-color: var(--auth-btn-border);
  padding: 0;
  position: relative;
  width: 150px;
}
.add-new-btn .auth-btn-inner {
  background-color: var(--auth-btn-inner-bg);
  padding: 5px 12px;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 5px;
  height: 95%;
}
@media (max-width: 575px) {
  .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%;
  }
}
.fw-light {
  font-weight: 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;
  font-size: 14px !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);
}
.cancel-btn {
  border: 1px solid var(--auth-border) !important;
  color: var(--auth-title) !important;
  padding: 12px;
  background-color: white !important;
  border-radius: 10px;
}
.d-grid {
  display: grid;
}
.cursor-pointer {
  cursor: pointer;
}
.gap-16 {
  gap: 1rem;
}
.width-100 {
  width: 100% !important;
  box-sizing: border-box;
}

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