@charset "UTF-8";
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(359deg);
  }
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@-moz-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(359deg);
  }
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@-ms-keyframes rotation {
  /* line 83, app/assets/stylesheets/utils/_mixins.scss */
  from {
    -webkit-transform: rotate(0deg);
  }
  /* line 86, app/assets/stylesheets/utils/_mixins.scss */
  to {
    -webkit-transform: rotate(359deg);
  }
  /* line 89, app/assets/stylesheets/utils/_mixins.scss */
  from {
    -ms-transform: rotate(0deg);
  }
  /* line 92, app/assets/stylesheets/utils/_mixins.scss */
  to {
    -ms-transform: rotate(359deg);
  }
  /* line 95, app/assets/stylesheets/utils/_mixins.scss */
  from {
    transform: rotate(0deg);
  }
  /* line 98, app/assets/stylesheets/utils/_mixins.scss */
  to {
    transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(359deg);
  }
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(359deg);
  }
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url(/assets/ibm-plex-sans/IBMPlexSans-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url(/assets/ibm-plex-sans/IBMPlexSans-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url(/assets/ibm-plex-sans/IBMPlexSans-SemiBold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* line 43, app/assets/stylesheets/base/_tokens.scss */
:root {
  --ink:        #14273F;
  --ink-soft:   #33465E;
  --muted:      #5B6577;
  --accent:     #0B6E99;
  --accent-hi:  #0A5C80;
  --accent-lo:  #D6E9F2;
  --surface:     #FBFAF8;
  --surface-alt: #F0EDE7;
  --line:        #DCD8D0;
  --success: #1E7A5E;
  --warning: #8A5510;
  --error:   #A32E28;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* line 6, app/assets/stylesheets/base/_reset.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
/* line 27, app/assets/stylesheets/base/_reset.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* line 31, app/assets/stylesheets/base/_reset.scss */
body {
  line-height: 1;
}

/* line 34, app/assets/stylesheets/base/_reset.scss */
ol, ul {
  list-style: none;
}

/* line 37, app/assets/stylesheets/base/_reset.scss */
blockquote, q {
  quotes: none;
}

/* line 40, app/assets/stylesheets/base/_reset.scss */
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* line 45, app/assets/stylesheets/base/_reset.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 1, app/assets/stylesheets/base/_theme.scss */
:root {
  --bg-body: #efeded;
  --bg-main: #f3f3f3;
  --bg-card: #fcfcfc;
  --bg-card-hover: #f3f3f3;
  --bg-course-objective: #f1f1f1;
  --bg-popover: #efefef;
  --bg-modal: #ffffff;
  --bg-code: #f2f2f2;
  --bg-highlight: #f8f8f8;
  --bg-input: #ffffff;
  --bg-input-active: #222;
  --bg-notification-banner: #fcfad4;
  --bg-exhausted: #ffffff;
  --bg-page-section: #f8f8f8;
  --bg-badge: #aaa;
  --bg-challenge-progress: #eae9e9;
  --text-primary: #4e4e4e;
  --text-secondary: #666666;
  --text-tertiary: #888888;
  --text-heading: #333333;
  --text-inverse: #ffffff;
  --text-black: #000000;
  --text-muted: #aaa;
  --text-link: #0072b6;
  --text-link-visited: #333;
  --text-code: #888;
  --text-name: #000;
  --text-heading-orientation: #282828;
  --text-body-orientation: #3e3e3e;
  --text-h1-orientation: #004c7c;
  --text-cover-orientation: #111111;
  --text-proverb-orientation: #292c2d;
  --text-proverb-body-orientation: #682222;
  --border-color: #d7d7d7;
  --border-light: #ddd;
  --border-input: #d9d9d9;
  --border-table: #ddd;
  --border-notification-close: #aaa;
  --color-secondary: #5b3ec2;
  --color-amaranth: #e4254d;
  --color-pigment-green: #0ba650;
  --color-button-green: #009900;
  --color-blue: #1daeec;
  --color-red: #e12950;
  --color-info-border: #d8d8d8;
  --color-orange-accent: #f06440;
  --color-orange-accent-hover: #ef7859;
  --color-heading-modal: #313848;
  --color-intro-bg: #D7D7D7;
  --color-browser-warning: #EFECC7;
  --color-review-alert-bg: #34ab52;
  --color-review-alert-link: #b137df;
  --color-artifact-notice-bg: #666;
  --color-artifact-link-bg: #19A950;
  --color-exhausted-title: #458573;
  --color-goal-complete: #4d32d2;
  --color-goal-alternate: #d4674f;
  --color-goal-ring-bg: #dddddd;
  --color-poor-primary: #e66d6b;
  --color-poor-secondary: #e4e5c3;
  --color-poor-foreground: #fcf9d6;
  --color-poor-background: #feffe9;
  --color-good-primary: #1e9166;
  --color-good-secondary: lightgray;
  --color-good-foreground: #45ca9a;
  --color-good-background: #e6f8e2;
  --nav-link-color: #fff;
  --nav-link-hover-bg: rgba(0, 0, 0, 0.5);
  --nav-sub-bg: #222;
  --nav-sub-border: #555;
  --nav-sub-link-hover-bg: grey;
  --button-shadow: rgba(0, 0, 0, 0.5);
  --button-shadow-hover: rgba(0, 0, 0, 0.5);
  --cover-bg: rgba(128, 128, 128, 0.5);
  --meta-bg: #ededed;
  --card-border: #d7d7d7;
  --card-footer-color: white;
  --tab-bg: #f3f3f3;
  --tab-color: #666;
  --tab-selected-bg: #ffffff;
  --tab-selected-color: #333333;
  --tab-hover-bg: #edecec;
  --category-menu-bg: #f8f8f8;
  --category-menu-link-color: #707070;
  --category-menu-link-visited: #2e2e2e;
  --search-bg: #f2f2f2;
  --search-border: #d5d5d5;
  --loader-border: rgba(93, 164, 55, 0.45);
  --loader-border-top: rgba(93, 164, 55, 0.8);
  --lesson-popover-item-bg: #ddd;
  --text-blue: #2222aa;
  --help-bg: #fff;
  --field-odd-bg: #ccc;
  --admin-bg: #fff;
  --admin-hover-bg: #eee;
  --app-launch-btn-bg: #2d2d2d;
  --app-launch-choice-bg: #cacaca;
  --app-launch-installed-bg: #fff;
  --app-launch-fallback-bg: #ffffff;
  --app-launch-fallback-text: #2d2d2d;
  --app-launch-fallback-border: #d9d9d9;
  --app-launch-fallback-muted: #5a5a5a;
  --app-launch-fallback-help: #333;
  --app-launch-fallback-disabled: #bfbfbf;
  --app-launch-success-bg: #1f7a4d;
  --app-launch-overlay: rgba(0, 0, 0, 0.4);
  --app-launch-content-bg: rgba(255, 255, 255, 0.9);
  --app-launch-shadow: rgba(0, 0, 0, 0.2);
  --orientation-dot-bg: #e1e1e1;
  --orientation-dot-current: #478eff;
  --orientation-dot-done: #bababa;
  --orientation-arrow-bg: #58acee;
  --orientation-arrow-hover: #3171d5;
  --orientation-section-bg: #f8f8f8;
  --orientation-backtomenu: #333;
  --proverb-border: #adb8bd;
}

/* line 140, app/assets/stylesheets/base/_theme.scss */
[data-theme="dark"] {
  --bg-body: #121212;
  --bg-main: #1e1e1e;
  --bg-card: #2a2a2a;
  --bg-card-hover: #333;
  --bg-course-objective: #2a2a2a;
  --bg-popover: #2a2a2a;
  --bg-modal: #2d2d2d;
  --bg-code: #1a1a1a;
  --bg-highlight: #2a2a2a;
  --bg-input: #333;
  --bg-input-active: #3a3a3a;
  --bg-notification-banner: #3a3520;
  --bg-exhausted: #2a2a2a;
  --bg-page-section: #2a2a2a;
  --bg-badge: #555;
  --bg-challenge-progress: #2a2a2a;
  --text-primary: #d4d4d4;
  --text-secondary: #b0b0b0;
  --text-tertiary: #999;
  --text-heading: #e0e0e0;
  --text-inverse: #e0e0e0;
  --text-black: #d4d4d4;
  --text-muted: #777;
  --text-link: #66b3ff;
  --text-link-visited: #b0b0b0;
  --text-code: #999;
  --text-name: #d4d4d4;
  --text-heading-orientation: #d4d4d4;
  --text-body-orientation: #c0c0c0;
  --text-h1-orientation: #66b3ff;
  --text-cover-orientation: #e0e0e0;
  --text-proverb-orientation: #c0c0c0;
  --text-proverb-body-orientation: #c08080;
  --border-color: #444;
  --border-light: #444;
  --border-input: #555;
  --border-table: #444;
  --border-notification-close: #666;
  --color-secondary: #7b5ed2;
  --color-amaranth: #ff4d6d;
  --color-pigment-green: #2bc070;
  --color-button-green: #2bc070;
  --color-blue: #4dc4f0;
  --color-red: #ff4d6d;
  --color-info-border: #555;
  --color-orange-accent: #d06030;
  --color-orange-accent-hover: #e07040;
  --color-heading-modal: #4a5060;
  --color-intro-bg: #3a3a3a;
  --color-browser-warning: #4a4830;
  --color-review-alert-bg: #2a8a3a;
  --color-review-alert-link: #a030c0;
  --color-artifact-notice-bg: #555;
  --color-artifact-link-bg: #1a8a40;
  --color-exhausted-title: #5aa080;
  --color-goal-complete: #6a52e0;
  --color-goal-alternate: #d07050;
  --color-goal-ring-bg: #555;
  --color-poor-primary: #d06060;
  --color-poor-secondary: #555540;
  --color-poor-foreground: #5a5040;
  --color-poor-background: #4a4a30;
  --color-good-primary: #2aa070;
  --color-good-secondary: #555;
  --color-good-foreground: #3aaa70;
  --color-good-background: #2a4a30;
  --nav-link-color: #d4d4d4;
  --nav-link-hover-bg: rgba(255, 255, 255, 0.1);
  --nav-sub-bg: #333;
  --nav-sub-border: #555;
  --nav-sub-link-hover-bg: #555;
  --button-shadow: rgba(0, 0, 0, 0.5);
  --button-shadow-hover: rgba(0, 0, 0, 0.7);
  --cover-bg: rgba(0, 0, 0, 0.6);
  --meta-bg: #333;
  --card-border: #444;
  --card-footer-color: #d4d4d4;
  --tab-bg: #2a2a2a;
  --tab-color: #b0b0b0;
  --tab-selected-bg: #333;
  --tab-selected-color: #e0e0e0;
  --tab-hover-bg: #3a3a3a;
  --category-menu-bg: #2a2a2a;
  --category-menu-link-color: #b0b0b0;
  --category-menu-link-visited: #b0b0b0;
  --search-bg: #1a1a1a;
  --search-border: #444;
  --loader-border: rgba(93, 164, 55, 0.3);
  --loader-border-top: rgba(93, 164, 55, 0.7);
  --lesson-popover-item-bg: #3a3a3a;
  --text-blue: #8888ff;
  --help-bg: #1e1e1e;
  --field-odd-bg: #333;
  --admin-bg: #1e1e1e;
  --admin-hover-bg: #333;
  --app-launch-btn-bg: #3a3a3a;
  --app-launch-choice-bg: #3a3a3a;
  --app-launch-installed-bg: #2a2a2a;
  --app-launch-fallback-bg: #2a2a2a;
  --app-launch-fallback-text: #e0e0e0;
  --app-launch-fallback-border: #555;
  --app-launch-fallback-muted: #999;
  --app-launch-fallback-help: #ccc;
  --app-launch-fallback-disabled: #555;
  --app-launch-success-bg: #1a6a3d;
  --app-launch-overlay: rgba(0, 0, 0, 0.6);
  --app-launch-content-bg: rgba(30, 30, 30, 0.95);
  --app-launch-shadow: rgba(0, 0, 0, 0.4);
  --orientation-dot-bg: #555;
  --orientation-dot-current: #2a7aff;
  --orientation-dot-done: #666;
  --orientation-arrow-bg: #3a7acc;
  --orientation-arrow-hover: #2a61b5;
  --orientation-section-bg: #1e1e1e;
  --orientation-backtomenu: #d4d4d4;
  --proverb-border: #666;
}

/* line 23, app/assets/stylesheets/base/_lexora_shell.scss */
:root {
  --bg-body:              var(--surface-alt);
  --bg-main:              var(--surface);
  --bg-card:              #fff;
  --bg-card-hover:        var(--accent-lo);
  --bg-modal:             #fff;
  --bg-page-section:      var(--surface);
  --bg-highlight:         var(--surface-alt);
  --bg-course-objective:  var(--surface-alt);
  --bg-popover:           #fff;
  --bg-input:             #fff;
  --text-primary:   var(--ink-soft);
  --text-secondary: var(--muted);
  --text-tertiary:  var(--muted);
  --text-heading:   var(--ink);
  --text-name:      var(--ink);
  --text-black:     var(--ink);
  --text-link:      var(--accent);
  --text-link-visited: var(--accent-hi);
  --text-muted:     var(--muted);
  --border-color: var(--line);
  --border-light: var(--line);
  --border-input: var(--line);
  --border-table: var(--line);
  --card-border:  var(--line);
  --nav-link-color:        #fff;
  --nav-link-hover-bg:     rgba(255, 255, 255, 0.14);
  --nav-sub-bg:            var(--ink);
  --nav-sub-border:        rgba(255, 255, 255, 0.16);
  --nav-sub-link-hover-bg: var(--accent-hi);
  --bg-input-active:       var(--ink-soft);
  --color-pigment-green: var(--success);
  --color-button-green:  var(--success);
  --color-red:           var(--error);
  --color-amaranth:      var(--error);
  --color-secondary:     var(--accent);
  --color-blue:          var(--accent);
  --tab-bg:             var(--surface-alt);
  --tab-color:          var(--muted);
  --tab-selected-bg:    #fff;
  --tab-selected-color: var(--ink);
  --tab-hover-bg:       var(--accent-lo);
  --search-bg:     var(--surface-alt);
  --search-border: var(--line);
  --category-menu-bg:            var(--surface);
  --category-menu-link-color:    var(--ink-soft);
  --category-menu-link-visited:  var(--ink);
  --orientation-dot-bg:       var(--line);
  --orientation-dot-current:  var(--accent);
  --orientation-dot-done:     var(--accent-lo);
  --orientation-arrow-bg:     var(--accent);
  --orientation-arrow-hover:  var(--accent-hi);
  --orientation-section-bg:   #fff;
  --orientation-backtomenu:   var(--ink);
  --text-heading-orientation: var(--ink);
  --text-body-orientation:    var(--ink-soft);
  --text-h1-orientation:      var(--ink);
  --text-cover-orientation:   var(--ink);
  --text-proverb-orientation: var(--ink-soft);
  --text-proverb-body-orientation: var(--accent-hi);
  --proverb-border:           var(--line);
  --meta-bg:   var(--surface-alt);
  --cover-bg:  rgba(20, 39, 63, 0.45);
  --field-odd-bg: var(--surface-alt);
}

/* line 117, app/assets/stylesheets/base/_lexora_shell.scss */
footer .copyright {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* line 128, app/assets/stylesheets/base/_lexora_shell.scss */
html, body {
  max-width: 100%;
}

/* line 129, app/assets/stylesheets/base/_lexora_shell.scss */
body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  /* line 149, app/assets/stylesheets/base/_lexora_shell.scss */
  ul.lessons li .lesson_card .title-container .name {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
    font-size: 1.15rem;
  }
}

/* line 29, app/assets/stylesheets/base/_typography.scss */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 35, app/assets/stylesheets/base/_typography.scss */
body h1, body h2, body h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 0.5em 0;
}

/* line 59, app/assets/stylesheets/base/_typography.scss */
html.locale-ja body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, "Yu Gothic", var(--font-sans);
}

/* line 61, app/assets/stylesheets/base/_typography.scss */
html.locale-ja body h1, html.locale-ja body h2, html.locale-ja body h3 {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, "Yu Gothic", var(--font-sans);
}

/* line 63, app/assets/stylesheets/base/_typography.scss */
html.locale-zh-cn body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", SimHei, var(--font-sans);
}

/* line 65, app/assets/stylesheets/base/_typography.scss */
html.locale-zh-cn body h1, html.locale-zh-cn body h2, html.locale-zh-cn body h3 {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", SimHei, var(--font-sans);
}

/* line 67, app/assets/stylesheets/base/_typography.scss */
html.locale-zh-tw body {
  font-family: "PingFang TC", "Microsoft JhengHei", "Heiti TC", var(--font-sans);
}

/* line 69, app/assets/stylesheets/base/_typography.scss */
html.locale-zh-tw body h1, html.locale-zh-tw body h2, html.locale-zh-tw body h3 {
  font-family: "PingFang TC", "Microsoft JhengHei", "Heiti TC", var(--font-sans);
}

/* line 72, app/assets/stylesheets/base/_typography.scss */
h1 {
  font-size: 1.6em;
}

/* line 73, app/assets/stylesheets/base/_typography.scss */
h2 {
  font-size: 1.5em;
}

/* line 74, app/assets/stylesheets/base/_typography.scss */
h3 {
  font-size: 1.25em;
}

/* line 76, app/assets/stylesheets/base/_typography.scss */
.small {
  font-size: 0.8em;
}

/* line 1, app/assets/stylesheets/base/_table.scss */
table {
  border-collapse: collapse;
  width: 100%;
}

/* line 4, app/assets/stylesheets/base/_table.scss */
table td, table th {
  padding: 0.5em;
}

/* line 7, app/assets/stylesheets/base/_table.scss */
table tr {
  border-bottom: 1px solid var(--border-table);
}

/* line 1, app/assets/stylesheets/base/_form.scss */
.field {
  padding: 0.5em;
}

/* line 2, app/assets/stylesheets/base/_form.scss */
.field:nth-child(odd) {
  background-color: var(--field-odd-bg);
}

/* line 8, app/assets/stylesheets/base/_form.scss */
.field label {
  font-weight: bold;
  display: inline-block;
  width: 20%;
}

/* line 1, app/assets/stylesheets/components/_button.scss */
.btn {
  border-radius: 100px;
  transition: all 0.2s;
  backface-visibility: hidden;
  background-color: rgba(91, 62, 194, 0.8);
  box-shadow: 1px 1px 1px var(--button-shadow);
}

/* line 8, app/assets/stylesheets/components/_button.scss */
.btn:hover {
  background-color: #5b3ec2;
  transform: translateY(-1px);
  box-shadow: 3px 1px 2px var(--button-shadow-hover);
}

/* line 14, app/assets/stylesheets/components/_button.scss */
.btn:active {
  background-color: rgba(91, 62, 194, 0.2);
  transform: translateY(0px);
  box-shadow: none;
}

/* line 20, app/assets/stylesheets/components/_button.scss */
.disabled.btn {
  background-color: rgba(91, 62, 194, 0.2);
  transform: translateY(0px);
  box-shadow: none;
}

/* line 1, app/assets/stylesheets/components/_lesson_card.scss */
li.tab-fixed {
  display: none;
}

/* line 5, app/assets/stylesheets/components/_lesson_card.scss */
.review_alert a:after {
  display: inline-block;
  content: ' ';
  width: 20px;
  height: 20px;
  vertical-align: -25%;
}

/* line 13, app/assets/stylesheets/components/_lesson_card.scss */
.cover-it {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background-color: var(--cover-bg);
  filter: grayscale(80%);
}

/* line 28, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons li {
  margin-top: 0.5em;
  border: 1px solid var(--card-border);
}

/* line 32, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons li:first-child {
  margin-top: 0;
}

/* line 71, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card {
  background: var(--bg-card);
  font-family: var(--font-sans);
  font-weight: 400;
  color: #666666;
  display: flex;
  flex: 0 0 100%;
  position: relative;
  flex-wrap: wrap;
}

/* line 80, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card:hover {
  background-color: #fff;
}

/* line 83, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .icon-wrapper {
  padding: 0.9rem 0.9rem 0 0.9rem;
  flex: none;
  display: inline-block;
}

/* line 87, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .icon-wrapper .icon {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background-size: 63%;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 96, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .title-container {
  display: flex;
  flex: 1 1 45%;
  flex-direction: column;
  min-width: 0;
  padding-top: 0.9rem;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* line 104, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .title-container .name {
  font-size: 1.3rem;
  margin-bottom: 5px;
  color: #333333;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 114, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .title-container .lesson-card-level,
ul.lessons .lesson_card .title-container .lesson-card-category {
  color: #888888;
  font-size: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* line 122, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .title-container .lesson-card-level:before {
  content: '-';
}

/* line 127, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .title-container .topic {
  font-size: 0.6rem;
  margin: 10px 0 5px 0;
  color: #888888;
}

/* line 133, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .title-container .topic span.subtopic:before {
  content: '-';
}

/* line 139, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .title-container .name-translation {
  font-size: 0.85em;
  margin-bottom: 5px;
}

/* line 145, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container {
  display: flex;
  justify-self: flex-end;
  padding: 1.6rem 0.9rem 0 0;
}

/* line 152, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .disabled {
  background: url(/assets/icons/padlock-icon.png) no-repeat right;
  background-size: contain;
  height: 1.5em;
  width: 1.5em;
  margin-bottom: 0.45rem;
}

/* line 160, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container a {
  display: block;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 25px;
  margin-right: 0.9rem;
}

/* line 169, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container a.pdf {
  background: transparent url(/assets/icons/black_PDF.svg) no-repeat;
  width: 57px;
  margin-right: 0.6rem;
}

/* line 176, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container a.external-app-launch {
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
  overflow: visible;
  width: 1.5em;
  height: 1.5em;
  font-size: 1.5em;
  color: inherit;
  text-decoration: none;
  margin-right: 0.3em;
}

/* line 190, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .resource-icons {
  display: flex;
  align-items: center;
}

/* line 195, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent url(/assets/icons/info_black.svg) no-repeat;
  background-position: center top;
  width: 1.5em;
  height: 1.5em;
}

/* line 204, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta {
  display: none;
  transform: scale(0);
  transition: opacity 1s ease-in;
}

/* line 210, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  box-sizing: border-box;
  min-width: max-content;
  left: calc(1.5em / 2);
  z-index: 1001;
  height: auto;
  border: 1px solid #d8d8d8;
  font-weight: 400;
  background-color: var(--meta-bg);
  padding: 1em;
  text-align: left;
  animation-name: fade-in;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  transform-origin: left;
}

@media all and (max-width: 800px) {
  /* line 210, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .lesson_card .resources-container .meta-container .meta.open {
    transform: translate(-100%, 50%);
    animation-name: fade-in-from-right;
    transform-origin: right;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0) translate(-50%, 50%);
  }
  to {
    opacity: 1;
    transform: scale(1) translate(-50%, 50%);
  }
}

@keyframes fade-in-from-right {
  from {
    opacity: 0;
    transform: scale(0) translate(-100%, 50%);
  }
  to {
    opacity: 1;
    transform: scale(1) translate(-100%, 50%);
  }
}

/* line 261, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open strong {
  color: black;
  font-weight: 700;
}

/* line 266, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open > * {
  display: none;
}

/* line 270, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open .info {
  display: block;
}

/* line 274, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open .info .grammar h2 {
  margin: 0 0 0.5em 0;
  padding: 0.2em;
  border-radius: 5px;
  background-color: #CEECEB;
  font-weight: 700;
}

/* line 274, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open .info .listening h2 {
  margin: 0 0 0.5em 0;
  padding: 0.2em;
  border-radius: 5px;
  background-color: #F4E9CA;
  font-weight: 700;
}

/* line 274, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open .info .reading h2 {
  margin: 0 0 0.5em 0;
  padding: 0.2em;
  border-radius: 5px;
  background-color: #CAE9D9;
  font-weight: 700;
}

/* line 274, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open .info .tests h2 {
  margin: 0 0 0.5em 0;
  padding: 0.2em;
  border-radius: 5px;
  background-color: rgba(208, 120, 43, 0.5);
  font-weight: 700;
}

/* line 274, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open .info .videos h2 {
  margin: 0 0 0.5em 0;
  padding: 0.2em;
  border-radius: 5px;
  background-color: rgba(90, 133, 242, 0.5);
  font-weight: 700;
}

/* line 274, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open .info .speaking h2 {
  margin: 0 0 0.5em 0;
  padding: 0.2em;
  border-radius: 5px;
  background-color: rgba(232, 117, 16, 0.5);
  font-weight: 700;
}

/* line 274, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open .info .writing h2 {
  margin: 0 0 0.5em 0;
  padding: 0.2em;
  border-radius: 5px;
  background-color: rgba(179, 52, 176, 0.5);
  font-weight: 700;
}

/* line 284, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open .info p {
  margin-bottom: 0.5em;
}

/* line 289, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .resources-container .meta-container .meta.open:before {
  content: '';
  position: absolute;
  top: calc(1.5em / -2);
  height: 1.5em;
  width: 1.5em;
  transform: rotate(45deg);
  background: transparent url(/assets/open-btn.svg) no-repeat center center;
}

@media all and (max-width: 800px) {
  /* line 289, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .lesson_card .resources-container .meta-container .meta.open:before {
    right: calc(1.5em / -2);
  }
}

/* line 306, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .feedback-container {
  text-align: right;
  margin-bottom: 0.45rem;
}

/* line 311, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .feedback-container .stars img {
  height: 1.6em;
  margin: 0;
}

/* line 318, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .level-wrapper {
  flex: 0 1 100%;
  font-size: 0.7em;
  padding: 0 0 0.45rem 1.4rem;
}

/* line 324, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .footer-container {
  flex: 1 1 100%;
  align-items: flex-end;
  padding: 0.3em 0.9rem;
  display: flex;
  flex-direction: row;
  min-height: 1.97em;
  text-decoration: none;
}

/* line 333, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .footer-container .message {
  flex: 1 0 50%;
  margin-left: 3.4rem;
}

/* line 337, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .footer-container .message.poor,
ul.lessons .lesson_card .footer-container .message .poor {
  color: #e4254d;
}

/* line 340, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .footer-container .message.poor:before,
ul.lessons .lesson_card .footer-container .message .poor:before {
  content: '❌';
}

/* line 345, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .footer-container .message.good,
ul.lessons .lesson_card .footer-container .message .good {
  color: #0ba650;
}

/* line 348, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .footer-container .message.good:before,
ul.lessons .lesson_card .footer-container .message .good:before {
  content: '✔';
}

/* line 354, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .footer-container .action {
  color: #888888;
}

/* line 357, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card .footer-container .action span {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* line 367, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card_image {
  position: relative;
}

/* line 130, app/assets/stylesheets/utils/_mixins.scss */
ul.lessons .lesson_card_image:before {
  display: block;
  content: ' ';
  width: 100%;
  padding-top: 37.5%;
}

/* line 137, app/assets/stylesheets/utils/_mixins.scss */
ul.lessons .lesson_card_image > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* line 370, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card_image .content {
  display: flex;
  align-items: flex-end;
}

/* line 374, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .lesson_card_image .content.downloaded_image {
  background: transparent url(/images/speaking-defaults/tests.png) no-repeat center top;
  background-size: cover;
}

/* line 385, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .grammar .lesson_card .icon-wrapper .icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 2.5rem;
  width: 2.5rem;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .grammar .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/grammar@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .grammar .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/grammar@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .grammar .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/grammar@3x.png);
  }
}

/* line 396, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .grammar .lesson_card .footer-container {
  color: var(--card-footer-color);
}

/* line 385, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .listening .lesson_card .icon-wrapper .icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 2.5rem;
  width: 2.5rem;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .listening .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/listening@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .listening .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/listening@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .listening .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/listening@3x.png);
  }
}

/* line 396, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .listening .lesson_card .footer-container {
  color: var(--card-footer-color);
}

/* line 385, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .reading .lesson_card .icon-wrapper .icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 2.5rem;
  width: 2.5rem;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .reading .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/reading@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .reading .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/reading@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .reading .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/reading@3x.png);
  }
}

/* line 396, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .reading .lesson_card .footer-container {
  color: var(--card-footer-color);
}

/* line 385, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .tests .lesson_card .icon-wrapper .icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 2.5rem;
  width: 2.5rem;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .tests .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/tests@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .tests .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/tests@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .tests .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/tests@3x.png);
  }
}

/* line 396, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .tests .lesson_card .footer-container {
  color: var(--card-footer-color);
}

/* line 385, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .videos .lesson_card .icon-wrapper .icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 2.5rem;
  width: 2.5rem;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .videos .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/videos@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .videos .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/videos@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .videos .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/videos@3x.png);
  }
}

/* line 396, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .videos .lesson_card .footer-container {
  color: var(--card-footer-color);
}

/* line 385, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking .lesson_card .icon-wrapper .icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 2.5rem;
  width: 2.5rem;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .speaking .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/speaking@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .speaking .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/speaking@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .speaking .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/speaking@3x.png);
  }
}

/* line 396, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking .lesson_card .footer-container {
  color: var(--card-footer-color);
}

/* line 385, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .writing .lesson_card .icon-wrapper .icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 2.5rem;
  width: 2.5rem;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .writing .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/writing@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .writing .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/writing@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 385, app/assets/stylesheets/components/_lesson_card.scss */
  ul.lessons .writing .lesson_card .icon-wrapper .icon {
    background-image: url(/assets/study-lesson-icons/writing@3x.png);
  }
}

/* line 396, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .writing .lesson_card .footer-container {
  color: var(--card-footer-color);
}

/* line 406, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.awaiting_feedback .footer-container {
  background: #fcfad4;
  color: #666;
}

/* line 410, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.awaiting_feedback .footer-container a {
  color: #666;
}

/* line 406, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.booked_ahead .footer-container {
  background: #3dcb99;
  color: #fff;
}

/* line 410, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.booked_ahead .footer-container a {
  color: #fff;
}

/* line 406, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.cancelled .footer-container {
  background: #e86c68;
  color: #fff;
}

/* line 410, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.cancelled .footer-container a {
  color: #fff;
}

/* line 406, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.notify .footer-container {
  background: #fcfad4;
  color: #666;
}

/* line 410, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.notify .footer-container a {
  color: #666;
}

/* line 406, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.completed .footer-container {
  background: #3dcb99;
  color: #fff;
}

/* line 410, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.completed .footer-container a {
  color: #fff;
}

/* line 406, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.about_to_start .footer-container {
  background: #3dcb99;
  color: #fff;
}

/* line 410, app/assets/stylesheets/components/_lesson_card.scss */
ul.lessons .speaking.lesson_card.about_to_start .footer-container a {
  color: #fff;
}

/* line 1, app/assets/stylesheets/components/_course_summary.scss */
.right_col > #time-left {
  padding: 1em;
  background: var(--bg-modal);
  font-family: var(--font-sans);
  font-weight: 600;
}

/* line 9, app/assets/stylesheets/components/_course_summary.scss */
.right_col > #time-left .course-name {
  display: inline-block;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* line 16, app/assets/stylesheets/components/_course_summary.scss */
#course_summary {
  min-height: 6.5em;
  display: flex;
  background-color: var(--bg-course-objective);
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0px 8px 10px -10px var(--color-good-secondary), 8px 0px 10px -10px var(--color-good-secondary), -8px 0px 10px -10px var(--color-good-secondary);
}

/* line 17, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goals-container {
  display: flex;
  flex: 2;
  justify-content: center;
  justify-content: space-around;
}

/* line 44, app/assets/stylesheets/components/_course_summary.scss */
#course_summary[data-goal-count="1"] #goals-container {
  flex-direction: column;
}

/* line 48, app/assets/stylesheets/components/_course_summary.scss */
#course_summary[data-goal-count="1"] #goal-progress-rings-wrapper {
  align-self: center;
  margin-top: 0.6rem;
}

/* line 53, app/assets/stylesheets/components/_course_summary.scss */
#course_summary[data-goal-count="1"] .goal-progress-wrapper {
  align-self: center;
}

/* line 55, app/assets/stylesheets/components/_course_summary.scss */
#course_summary[data-goal-count="1"] .goal-progress-wrapper .name {
  display: none;
}

/* line 62, app/assets/stylesheets/components/_course_summary.scss */
#course_summary[data-goal-count="2"] .goal-progress-wrapper {
  height: 7em;
}

/* line 66, app/assets/stylesheets/components/_course_summary.scss */
#course_summary[data-goal-count="2"] #goal-progress-rings-wrapper {
  margin: 0 0.2em;
}

/* line 71, app/assets/stylesheets/components/_course_summary.scss */
#course_summary strong {
  font-weight: bold;
}

/* line 84, app/assets/stylesheets/components/_course_summary.scss */
#course_summary .goal-progress-text {
  margin-top: 1.3rem;
}

/* line 88, app/assets/stylesheets/components/_course_summary.scss */
#course_summary h2 {
  text-align: center;
  font-size: 1.1em;
  color: var(--text-secondary);
  padding-top: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 0;
}

/* line 97, app/assets/stylesheets/components/_course_summary.scss */
#course_summary .goal-progress-wrapper {
  line-height: 1em;
  font-size: 0.85em;
  display: table;
}

/* line 102, app/assets/stylesheets/components/_course_summary.scss */
#course_summary .goal-progress-wrapper .goal-progress {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* line 107, app/assets/stylesheets/components/_course_summary.scss */
#course_summary .goal-progress-wrapper .goal-progress span .number-progress {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
}

/* line 116, app/assets/stylesheets/components/_course_summary.scss */
#course_summary .goal-progress-wrapper[data-goal-position="1"] span.name {
  color: var(--color-goal-complete);
}

/* line 122, app/assets/stylesheets/components/_course_summary.scss */
#course_summary .goal-progress-wrapper[data-goal-position="2"] span.name {
  color: #d4674f;
}

/* line 128, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper {
  transform: rotate(-90deg);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-secondary);
  height: 4.9rem;
  width: 4.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.9rem;
}

/* line 138, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper span.percentage-label {
  transform: rotate(90deg);
  font-size: 1.5rem;
  position: absolute;
  padding-left: 0.1em;
  line-height: 1.2em;
}

/* line 144, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper span.percentage-label:after {
  content: "%";
}

@keyframes RingProgress {
  0% {
    stroke-dasharray: 0 100;
  }
}

/* line 155, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper .progress-rings {
  height: 100%;
  width: 100%;
}

/* line 158, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper .progress-rings .ring {
  transform-origin: 50%;
}

/* line 160, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper .progress-rings .ring .background {
  stroke: var(--color-good-secondary);
}

/* line 164, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper .progress-rings .ring[data-ring-position="1"] {
  stroke: var(--color-goal-complete);
}

/* line 167, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper .progress-rings .ring[data-ring-position="2"] {
  stroke: #d4674f;
}

/* line 172, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper .progress-rings circle {
  fill: none;
}

/* line 174, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #goal-progress-rings-wrapper .progress-rings circle.completed {
  stroke-linecap: square;
}

/* line 181, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #progress-message {
  margin-bottom: 1em;
  font-size: 1em;
  padding: 0.3em;
  text-align: center;
  width: 100%;
}

/* line 188, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #progress-message.good {
  background-color: var(--color-good-foreground);
  color: var(--text-inverse);
}

/* line 191, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #progress-message.good img {
  margin: 0;
  vertical-align: middle;
}

/* line 195, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #progress-message.good a {
  color: var(--text-inverse);
}

/* line 200, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #progress-message.poor {
  background-color: var(--color-poor-foreground);
}

/* line 204, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #time-left {
  margin: 0.6rem 3rem;
}

/* line 206, app/assets/stylesheets/components/_course_summary.scss */
#course_summary #time-left .course-name {
  display: inline-block;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* line 1, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs {
  padding: 0;
  margin-top: 1.5em;
}

/* line 5, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li {
  border: 1px solid var(--border-light);
  margin: 0.5em 0;
}

/* line 12, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li.current a.grammar {
  background-color: #CEECEB;
  cursor: default;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
#category_tabs li.current a.grammar:hover {
  text-decoration: none;
  cursor: default;
}

/* line 12, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li.current a.listening {
  background-color: #F4E9CA;
  cursor: default;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
#category_tabs li.current a.listening:hover {
  text-decoration: none;
  cursor: default;
}

/* line 12, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li.current a.reading {
  background-color: #CAE9D9;
  cursor: default;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
#category_tabs li.current a.reading:hover {
  text-decoration: none;
  cursor: default;
}

/* line 12, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li.current a.tests {
  background-color: rgba(208, 120, 43, 0.5);
  cursor: default;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
#category_tabs li.current a.tests:hover {
  text-decoration: none;
  cursor: default;
}

/* line 12, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li.current a.videos {
  background-color: rgba(90, 133, 242, 0.5);
  cursor: default;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
#category_tabs li.current a.videos:hover {
  text-decoration: none;
  cursor: default;
}

/* line 12, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li.current a.speaking {
  background-color: rgba(232, 117, 16, 0.5);
  cursor: default;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
#category_tabs li.current a.speaking:hover {
  text-decoration: none;
  cursor: default;
}

/* line 12, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li.current a.writing {
  background-color: rgba(179, 52, 176, 0.5);
  cursor: default;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
#category_tabs li.current a.writing:hover {
  text-decoration: none;
  cursor: default;
}

/* line 18, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a {
  position: relative;
  transition: background-color 0.5s ease;
  display: block;
  font-size: 1.2em;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  text-decoration: none;
  padding: 1em 0 1em 3.2em;
  background-color: var(--category-menu-bg);
}

/* line 29, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a:link {
  color: var(--category-menu-link-color);
}

/* line 32, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a:visited {
  color: var(--category-menu-link-visited);
}

/* line 39, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.grammar {
  color: #0C5D76;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.grammar .category-icon {
    background-image: url(/assets/study-lesson-icons/grammar@1x);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.grammar .category-icon {
    background-image: url(/assets/study-lesson-icons/grammar@2x);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.grammar .category-icon {
    background-image: url(/assets/study-lesson-icons/grammar@3x);
  }
}

/* line 46, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.grammar:hover {
  background-color: #CEECEB;
}

/* line 39, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.listening {
  color: #A77208;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.listening .category-icon {
    background-image: url(/assets/study-lesson-icons/listening@1x);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.listening .category-icon {
    background-image: url(/assets/study-lesson-icons/listening@2x);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.listening .category-icon {
    background-image: url(/assets/study-lesson-icons/listening@3x);
  }
}

/* line 46, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.listening:hover {
  background-color: #F4E9CA;
}

/* line 39, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.reading {
  color: #0C814C;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.reading .category-icon {
    background-image: url(/assets/study-lesson-icons/reading@1x);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.reading .category-icon {
    background-image: url(/assets/study-lesson-icons/reading@2x);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.reading .category-icon {
    background-image: url(/assets/study-lesson-icons/reading@3x);
  }
}

/* line 46, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.reading:hover {
  background-color: #CAE9D9;
}

/* line 39, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.tests {
  color: #e095b1;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.tests .category-icon {
    background-image: url(/assets/study-lesson-icons/tests@1x);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.tests .category-icon {
    background-image: url(/assets/study-lesson-icons/tests@2x);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.tests .category-icon {
    background-image: url(/assets/study-lesson-icons/tests@3x);
  }
}

/* line 46, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.tests:hover {
  background-color: rgba(208, 120, 43, 0.5);
}

/* line 39, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.videos {
  color: #b48c69;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.videos .category-icon {
    background-image: url(/assets/study-lesson-icons/videos@1x);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.videos .category-icon {
    background-image: url(/assets/study-lesson-icons/videos@2x);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.videos .category-icon {
    background-image: url(/assets/study-lesson-icons/videos@3x);
  }
}

/* line 46, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.videos:hover {
  background-color: rgba(90, 133, 242, 0.5);
}

/* line 39, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.speaking {
  color: #d07388;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.speaking .category-icon {
    background-image: url(/assets/study-lesson-icons/speaking@1x);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.speaking .category-icon {
    background-image: url(/assets/study-lesson-icons/speaking@2x);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.speaking .category-icon {
    background-image: url(/assets/study-lesson-icons/speaking@3x);
  }
}

/* line 46, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.speaking:hover {
  background-color: rgba(232, 117, 16, 0.5);
}

/* line 39, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.writing {
  color: #ae85d8;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.writing .category-icon {
    background-image: url(/assets/study-lesson-icons/writing@1x);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.writing .category-icon {
    background-image: url(/assets/study-lesson-icons/writing@2x);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 41, app/assets/stylesheets/components/_category_menu.scss */
  #category_tabs li a.writing .category-icon {
    background-image: url(/assets/study-lesson-icons/writing@3x);
  }
}

/* line 46, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a.writing:hover {
  background-color: rgba(179, 52, 176, 0.5);
}

/* line 52, app/assets/stylesheets/components/_category_menu.scss */
#category_tabs li a .category-icon {
  display: inline;
  position: absolute;
  top: 0.25em;
  left: 0.4em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
}

/* line 1, app/assets/stylesheets/components/_challenges.scss */
.review_alert a:after {
  content: " ";
  width: 20px;
  height: 20px;
  vertical-align: -25%;
}

/* line 14, app/assets/stylesheets/components/_challenges.scss */
.list_item {
  display: flex;
  flex-direction: column;
}

@media all and (max-width: 800px) {
  /* line 19, app/assets/stylesheets/components/_challenges.scss */
  .challenges {
    padding: 0em;
  }
}

/* line 25, app/assets/stylesheets/components/_challenges.scss */
.challenge-progress {
  display: grid;
  min-height: 4.5rem;
  grid-template-columns: 2fr 1fr;
  background-color: var(--bg-challenge-progress);
  align-items: center;
  margin-bottom: 1em;
}

/* line 33, app/assets/stylesheets/components/_challenges.scss */
.challenge-progress .challenges-title {
  font-size: 1.5em;
  font-weight: bold;
  padding: 0.5em;
}

@media all and (max-width: 800px) {
  /* line 33, app/assets/stylesheets/components/_challenges.scss */
  .challenge-progress .challenges-title {
    font-size: 1rem;
  }
}

/* line 40, app/assets/stylesheets/components/_challenges.scss */
.challenge-progress .challenges-title .challenges-completed {
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--text-muted);
}

/* line 49, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge {
  display: flex;
  justify-content: center;
}

/* line 52, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge .challenge {
  text-align: center;
}

/* line 56, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge a,
.grammar-challenge a:link,
.grammar-challenge a:visited,
.grammar-challenge a:hover {
  text-decoration: none;
}

/* line 64, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge .activity-card {
  display: flex;
  background-size: cover;
  align-content: center;
  justify-content: center;
  height: 22.2em;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .grammar-challenge .activity-card {
    background-image: url(/assets/icons/assessments/challenge_cards/desktop_ipad/1x/grammar@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .grammar-challenge .activity-card {
    background-image: url(/assets/icons/assessments/challenge_cards/desktop_ipad/2x/grammar@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .grammar-challenge .activity-card {
    background-image: url(/assets/icons/assessments/challenge_cards/desktop_ipad/3x/grammar@3x.png);
  }
}

/* line 71, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge .activity-card .name {
  padding: 0.5em;
}

@media all and (max-width: 800px) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .grammar-challenge .activity-card {
    height: 230px;
  }
}

/* line 89, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge .activity-card .title {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
}

/* line 94, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge .activity-card .title .name {
  color: var(--text-inverse);
  font-size: 2em;
  justify-self: flex-end;
  justify-content: flex-end;
}

@media all and (max-width: 800px) {
  /* line 94, app/assets/stylesheets/components/_challenges.scss */
  .grammar-challenge .activity-card .title .name {
    font-size: 1em;
  }
}

/* line 105, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge .activity-card img {
  max-height: 100%;
  min-width: 100%;
}

/* line 111, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge .link-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  color: var(--text-inverse);
  padding: 0.5em;
  background-color: #0c5d76;
}

/* line 119, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge .link-container:hover {
  background-color: #0a4b5f;
}

/* line 123, app/assets/stylesheets/components/_challenges.scss */
.grammar-challenge .link-container:after {
  content: " ";
  margin-left: 0.3em;
  width: 20px;
  height: 20px;
  background: url(/assets/icons/white_arrow.svg) no-repeat;
}

/* line 133, app/assets/stylesheets/components/_challenges.scss */
.all-challenges {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

@media all and (max-width: 800px) {
  /* line 133, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges {
    height: 70px;
  }
}

/* line 142, app/assets/stylesheets/components/_challenges.scss */
.all-challenges #grammar-challenge .icon,
.all-challenges #completed-grammar-challenge .icon {
  padding: 1.5em;
  background-size: cover;
}

@media all and (max-width: 800px) {
  /* line 142, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #grammar-challenge .icon,
.all-challenges #completed-grammar-challenge .icon {
    padding: 1em;
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 152, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #grammar-challenge .icon {
    background-image: url(/assets/icons/assessments/badges/empty/grammar@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 152, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #grammar-challenge .icon {
    background-image: url(/assets/icons/assessments/badges/empty/grammar@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 152, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #grammar-challenge .icon {
    background-image: url(/assets/icons/assessments/badges/empty/grammar@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-grammar-challenge .challenge-bronze-icon {
    background-image: url(/assets/icons/assessments/badges/complete/1x/grammar-bronze@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-grammar-challenge .challenge-bronze-icon {
    background-image: url(/assets/icons/assessments/badges/complete/2x/grammar-bronze@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-grammar-challenge .challenge-bronze-icon {
    background-image: url(/assets/icons/assessments/badges/complete/3x/grammar-bronze@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-grammar-challenge .challenge-silver-icon {
    background-image: url(/assets/icons/assessments/badges/complete/1x/grammar-silver@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-grammar-challenge .challenge-silver-icon {
    background-image: url(/assets/icons/assessments/badges/complete/2x/grammar-silver@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-grammar-challenge .challenge-silver-icon {
    background-image: url(/assets/icons/assessments/badges/complete/3x/grammar-silver@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-grammar-challenge .challenge-gold-icon {
    background-image: url(/assets/icons/assessments/badges/complete/1x/grammar-gold@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-grammar-challenge .challenge-gold-icon {
    background-image: url(/assets/icons/assessments/badges/complete/2x/grammar-gold@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-grammar-challenge .challenge-gold-icon {
    background-image: url(/assets/icons/assessments/badges/complete/3x/grammar-gold@3x.png);
  }
}

/* line 49, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge {
  display: flex;
  justify-content: center;
}

/* line 52, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge .challenge {
  text-align: center;
}

/* line 56, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge a,
.listening-challenge a:link,
.listening-challenge a:visited,
.listening-challenge a:hover {
  text-decoration: none;
}

/* line 64, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge .activity-card {
  display: flex;
  background-size: cover;
  align-content: center;
  justify-content: center;
  height: 22.2em;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .listening-challenge .activity-card {
    background-image: url(/assets/icons/assessments/challenge_cards/desktop_ipad/1x/listening@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .listening-challenge .activity-card {
    background-image: url(/assets/icons/assessments/challenge_cards/desktop_ipad/2x/listening@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .listening-challenge .activity-card {
    background-image: url(/assets/icons/assessments/challenge_cards/desktop_ipad/3x/listening@3x.png);
  }
}

/* line 71, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge .activity-card .name {
  padding: 0.5em;
}

@media all and (max-width: 800px) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .listening-challenge .activity-card {
    height: 230px;
  }
}

/* line 89, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge .activity-card .title {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
}

/* line 94, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge .activity-card .title .name {
  color: var(--text-inverse);
  font-size: 2em;
  justify-self: flex-end;
  justify-content: flex-end;
}

@media all and (max-width: 800px) {
  /* line 94, app/assets/stylesheets/components/_challenges.scss */
  .listening-challenge .activity-card .title .name {
    font-size: 1em;
  }
}

/* line 105, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge .activity-card img {
  max-height: 100%;
  min-width: 100%;
}

/* line 111, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge .link-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  color: var(--text-inverse);
  padding: 0.5em;
  background-color: #a77208;
}

/* line 119, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge .link-container:hover {
  background-color: #8f6107;
}

/* line 123, app/assets/stylesheets/components/_challenges.scss */
.listening-challenge .link-container:after {
  content: " ";
  margin-left: 0.3em;
  width: 20px;
  height: 20px;
  background: url(/assets/icons/white_arrow.svg) no-repeat;
}

/* line 133, app/assets/stylesheets/components/_challenges.scss */
.all-challenges {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

@media all and (max-width: 800px) {
  /* line 133, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges {
    height: 70px;
  }
}

/* line 142, app/assets/stylesheets/components/_challenges.scss */
.all-challenges #listening-challenge .icon,
.all-challenges #completed-listening-challenge .icon {
  padding: 1.5em;
  background-size: cover;
}

@media all and (max-width: 800px) {
  /* line 142, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #listening-challenge .icon,
.all-challenges #completed-listening-challenge .icon {
    padding: 1em;
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 152, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #listening-challenge .icon {
    background-image: url(/assets/icons/assessments/badges/empty/listening@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 152, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #listening-challenge .icon {
    background-image: url(/assets/icons/assessments/badges/empty/listening@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 152, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #listening-challenge .icon {
    background-image: url(/assets/icons/assessments/badges/empty/listening@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-listening-challenge .challenge-bronze-icon {
    background-image: url(/assets/icons/assessments/badges/complete/1x/listening-bronze@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-listening-challenge .challenge-bronze-icon {
    background-image: url(/assets/icons/assessments/badges/complete/2x/listening-bronze@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-listening-challenge .challenge-bronze-icon {
    background-image: url(/assets/icons/assessments/badges/complete/3x/listening-bronze@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-listening-challenge .challenge-silver-icon {
    background-image: url(/assets/icons/assessments/badges/complete/1x/listening-silver@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-listening-challenge .challenge-silver-icon {
    background-image: url(/assets/icons/assessments/badges/complete/2x/listening-silver@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-listening-challenge .challenge-silver-icon {
    background-image: url(/assets/icons/assessments/badges/complete/3x/listening-silver@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-listening-challenge .challenge-gold-icon {
    background-image: url(/assets/icons/assessments/badges/complete/1x/listening-gold@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-listening-challenge .challenge-gold-icon {
    background-image: url(/assets/icons/assessments/badges/complete/2x/listening-gold@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-listening-challenge .challenge-gold-icon {
    background-image: url(/assets/icons/assessments/badges/complete/3x/listening-gold@3x.png);
  }
}

/* line 49, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge {
  display: flex;
  justify-content: center;
}

/* line 52, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge .challenge {
  text-align: center;
}

/* line 56, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge a,
.reading-challenge a:link,
.reading-challenge a:visited,
.reading-challenge a:hover {
  text-decoration: none;
}

/* line 64, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge .activity-card {
  display: flex;
  background-size: cover;
  align-content: center;
  justify-content: center;
  height: 22.2em;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .reading-challenge .activity-card {
    background-image: url(/assets/icons/assessments/challenge_cards/desktop_ipad/1x/reading@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .reading-challenge .activity-card {
    background-image: url(/assets/icons/assessments/challenge_cards/desktop_ipad/2x/reading@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .reading-challenge .activity-card {
    background-image: url(/assets/icons/assessments/challenge_cards/desktop_ipad/3x/reading@3x.png);
  }
}

/* line 71, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge .activity-card .name {
  padding: 0.5em;
}

@media all and (max-width: 800px) {
  /* line 64, app/assets/stylesheets/components/_challenges.scss */
  .reading-challenge .activity-card {
    height: 230px;
  }
}

/* line 89, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge .activity-card .title {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
}

/* line 94, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge .activity-card .title .name {
  color: var(--text-inverse);
  font-size: 2em;
  justify-self: flex-end;
  justify-content: flex-end;
}

@media all and (max-width: 800px) {
  /* line 94, app/assets/stylesheets/components/_challenges.scss */
  .reading-challenge .activity-card .title .name {
    font-size: 1em;
  }
}

/* line 105, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge .activity-card img {
  max-height: 100%;
  min-width: 100%;
}

/* line 111, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge .link-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  color: var(--text-inverse);
  padding: 0.5em;
  background-color: #0b794a;
}

/* line 119, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge .link-container:hover {
  background-color: #09623c;
}

/* line 123, app/assets/stylesheets/components/_challenges.scss */
.reading-challenge .link-container:after {
  content: " ";
  margin-left: 0.3em;
  width: 20px;
  height: 20px;
  background: url(/assets/icons/white_arrow.svg) no-repeat;
}

/* line 133, app/assets/stylesheets/components/_challenges.scss */
.all-challenges {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

@media all and (max-width: 800px) {
  /* line 133, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges {
    height: 70px;
  }
}

/* line 142, app/assets/stylesheets/components/_challenges.scss */
.all-challenges #reading-challenge .icon,
.all-challenges #completed-reading-challenge .icon {
  padding: 1.5em;
  background-size: cover;
}

@media all and (max-width: 800px) {
  /* line 142, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #reading-challenge .icon,
.all-challenges #completed-reading-challenge .icon {
    padding: 1em;
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 152, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #reading-challenge .icon {
    background-image: url(/assets/icons/assessments/badges/empty/reading@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 152, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #reading-challenge .icon {
    background-image: url(/assets/icons/assessments/badges/empty/reading@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 152, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #reading-challenge .icon {
    background-image: url(/assets/icons/assessments/badges/empty/reading@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-reading-challenge .challenge-bronze-icon {
    background-image: url(/assets/icons/assessments/badges/complete/1x/reading-bronze@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-reading-challenge .challenge-bronze-icon {
    background-image: url(/assets/icons/assessments/badges/complete/2x/reading-bronze@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-reading-challenge .challenge-bronze-icon {
    background-image: url(/assets/icons/assessments/badges/complete/3x/reading-bronze@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-reading-challenge .challenge-silver-icon {
    background-image: url(/assets/icons/assessments/badges/complete/1x/reading-silver@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-reading-challenge .challenge-silver-icon {
    background-image: url(/assets/icons/assessments/badges/complete/2x/reading-silver@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-reading-challenge .challenge-silver-icon {
    background-image: url(/assets/icons/assessments/badges/complete/3x/reading-silver@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-reading-challenge .challenge-gold-icon {
    background-image: url(/assets/icons/assessments/badges/complete/1x/reading-gold@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-reading-challenge .challenge-gold-icon {
    background-image: url(/assets/icons/assessments/badges/complete/2x/reading-gold@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 163, app/assets/stylesheets/components/_challenges.scss */
  .all-challenges #completed-reading-challenge .challenge-gold-icon {
    background-image: url(/assets/icons/assessments/badges/complete/3x/reading-gold@3x.png);
  }
}

/* line 1, app/assets/stylesheets/components/_content_box.scss */
.content_box {
  padding-bottom: 1.5em;
  border: 1px solid var(--border-light);
}

/* line 5, app/assets/stylesheets/components/_content_box.scss */
.content_box .head {
  border-bottom: 1px solid var(--border-light);
}

/* line 8, app/assets/stylesheets/components/_content_box.scss */
.content_box .body {
  width: 100%;
}

/* line 1, app/assets/stylesheets/components/_debug_tools.scss */
.debug {
  z-index: 9999;
}

/* line 4, app/assets/stylesheets/components/_debug_tools.scss */
.debug.panel {
  position: absolute;
  right: 0;
  top: 100%;
  width: 30%;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.5em 1em 1em 1em;
  font-size: 0.8em;
  border-radius: 15px;
  color: var(--text-inverse);
}

/* line 15, app/assets/stylesheets/components/_debug_tools.scss */
.debug.panel h1,
.debug.panel h2 {
  font-family: var(--font-sans);
  font-weight: 400;
}

/* line 20, app/assets/stylesheets/components/_debug_tools.scss */
.debug.panel ul {
  clear: both;
  margin-bottom: 1em;
}

/* line 26, app/assets/stylesheets/components/_debug_tools.scss */
.debug a {
  color: var(--text-inverse);
}

/* line 30, app/assets/stylesheets/components/_debug_tools.scss */
.activity-card {
  position: relative;
}

/* line 32, app/assets/stylesheets/components/_debug_tools.scss */
.activity-card .debug {
  position: absolute;
  right: 1em;
  bottom: 0;
  padding: 1em;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
}

/* line 43, app/assets/stylesheets/components/_debug_tools.scss */
.lesson_card .debug {
  background: rgba(0, 0, 0, 0.7);
  color: var(--text-inverse);
  padding: 1em;
  position: absolute;
  top: 1em;
  right: 1em;
  border-radius: 15px;
}

/* line 51, app/assets/stylesheets/components/_debug_tools.scss */
.lesson_card .debug form {
  display: inline;
}

/* line 1, app/assets/stylesheets/components/_loading_indicator.scss */
.loading_indicator {
  margin: 1em auto;
  display: block;
  height: 35px;
  width: 35px;
  -webkit-transform: translateZ(0);
  -webkit-animation: rotation 0.6s infinite linear;
  -moz-animation: rotation 0.6s infinite linear;
  -ms-animation: rotation 0.6s infinite linear;
  -o-animation: rotation 0.6s infinite linear;
  animation: rotation 0.6s infinite linear;
  border-left: 3px solid var(--loader-border);
  border-right: 3px solid var(--loader-border);
  border-bottom: 3px solid var(--loader-border);
  border-top: 3px solid var(--loader-border-top);
  border-radius: 100%;
  text-indent: -5000px;
}

/* line 1, app/assets/stylesheets/components/search.scss */
#search_results {
  width: 100%;
  max-width: 90rem;
  margin: 1em auto 0 auto;
  margin: 1em auto;
  padding: 1em;
  background-color: var(--search-bg);
  border: 1px solid var(--search-border);
}

@media all and (max-width: 800px) {
  /* line 1, app/assets/stylesheets/components/search.scss */
  #search_results {
    width: 100%;
  }
}

/* line 10, app/assets/stylesheets/components/search.scss */
#search_results .head span {
  font-style: italic;
}

/* line 15, app/assets/stylesheets/components/search.scss */
#search_results #close-icon {
  color: blue;
  float: right;
  display: block;
  background: url(/assets/icons/notification_close.svg) no-repeat;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}

/* line 27, app/assets/stylesheets/components/search.scss */
#search_results .head {
  padding: 1em 20%;
}

/* line 30, app/assets/stylesheets/components/search.scss */
#search_results .head h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2em;
}

/* line 37, app/assets/stylesheets/components/search.scss */
#search_results .body .lessons {
  padding: 1em 20%;
}

/* line 41, app/assets/stylesheets/components/search.scss */
#search_results .body .no_search_results_message {
  background: var(--search-bg) url(/assets/icons/no-search-result.svg) no-repeat center 20%;
  background-size: 25%;
  min-height: 25em;
  position: relative;
  margin-top: 1.5em;
}

/* line 48, app/assets/stylesheets/components/search.scss */
#search_results .body .no_search_results_message .title,
#search_results .body .no_search_results_message .tips {
  position: absolute;
  width: 100%;
  bottom: 1em;
  text-align: center;
}

/* line 61, app/assets/stylesheets/components/search.scss */
.search #keywords:focus,
.search #keywords .has-text {
  animation-name: stretch;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  cursor: text;
  background-color: var(--bg-input-active);
  background-position: left;
  background-position: 10px;
}

@keyframes stretch {
  from {
  }
  to {
    width: 15em;
    cursor: text;
    background-color: var(--bg-input-active);
    background-position: left;
    background-position: 10px;
  }
}

/* line 3, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs {
  width: 66.5%;
  margin: 1em 0;
}

@media all and (min-width: 1440px) {
  /* line 3, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs {
    --max-width: $max-app-width;
  }
}

@media all and (max-width: 800px) {
  /* line 3, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs {
    width: 100%;
    text-align: center;
  }
}

/* line 58, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs {
  width: 100%;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  list-style: none;
  display: flex;
  flex-direction: row;
}

@media all and (max-width: 800px) {
  /* line 58, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs {
    justify-content: space-around;
  }
}

/* line 70, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs .tab {
  flex: 1 1;
}

/* line 73, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs .tab:not(:first-child) {
  margin-left: 5px;
}

/* line 77, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs .tab:not(:last-child) {
  margin-right: 5px;
}

/* line 83, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs .active .lessons-tab {
  background-color: var(--bg-modal);
}

/* line 88, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li {
  font-size: 0.8em;
}

@media all and (max-width: 800px) {
  /* line 88, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li {
    justify-content: space-around;
  }
}

/* line 16, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li a {
  display: block;
  text-indent: -5000px;
  border-radius: 100px;
  border: 1px solid var(--border-light);
  background: var(--tab-bg) url(/assets/icons/lp_icon_black.svg) no-repeat center center;
  background-size: 25px 25px;
  padding: 0.8em 1em 0.8em 50px;
  text-decoration: none;
  font-size: 1rem;
  color: var(--tab-color);
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

/* line 30, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li a span {
  vertical-align: middle;
}

/* line 34, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li a.selected {
  background: var(--tab-selected-bg) url(/assets/icons/lp_icon_black.svg) no-repeat center center;
  color: var(--tab-selected-color);
  background-size: 25px 25px;
  cursor: default;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
.list-tabs .tabs li a.selected:hover {
  text-decoration: none;
  cursor: default;
}

/* line 44, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li a:hover {
  background-color: var(--tab-hover-bg);
}

@media all and (min-width: 800px) {
  /* line 16, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li a {
    text-indent: 0;
    background-position: 15px center;
  }
  /* line 51, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li a.selected {
    background-position: 15px center !important;
  }
}

/* line 16, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-learning_path a {
  display: block;
  text-indent: -5000px;
  border-radius: 100px;
  border: 1px solid var(--border-light);
  background: var(--tab-bg) url(/assets/icons/lp_icon_black.svg) no-repeat center center;
  background-size: 25px 25px;
  padding: 0.8em 1em 0.8em 50px;
  text-decoration: none;
  font-size: 1rem;
  color: var(--tab-color);
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

/* line 30, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-learning_path a span {
  vertical-align: middle;
}

/* line 34, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-learning_path a.selected {
  background: var(--tab-selected-bg) url(/assets/icons/lp_icon_black.svg) no-repeat center center;
  color: var(--tab-selected-color);
  background-size: 25px 25px;
  cursor: default;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
.list-tabs .tabs li.tab-learning_path a.selected:hover {
  text-decoration: none;
  cursor: default;
}

/* line 44, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-learning_path a:hover {
  background-color: var(--tab-hover-bg);
}

@media all and (min-width: 800px) {
  /* line 16, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li.tab-learning_path a {
    text-indent: 0;
    background-position: 15px center;
  }
  /* line 51, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li.tab-learning_path a.selected {
    background-position: 15px center !important;
  }
}

/* line 16, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-fixed a, .list-tabs .tabs li.tab-all a, .list-tabs .tabs li.tab-incomplete_units a {
  display: block;
  text-indent: -5000px;
  border-radius: 100px;
  border: 1px solid var(--border-light);
  background: var(--tab-bg) url(/assets/icons/all_icon_black.svg) no-repeat center center;
  background-size: 25px 25px;
  padding: 0.8em 1em 0.8em 50px;
  text-decoration: none;
  font-size: 1rem;
  color: var(--tab-color);
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

/* line 30, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-fixed a span, .list-tabs .tabs li.tab-all a span, .list-tabs .tabs li.tab-incomplete_units a span {
  vertical-align: middle;
}

/* line 34, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-fixed a.selected, .list-tabs .tabs li.tab-all a.selected, .list-tabs .tabs li.tab-incomplete_units a.selected {
  background: var(--tab-selected-bg) url(/assets/icons/all_icon_black.svg) no-repeat center center;
  color: var(--tab-selected-color);
  background-size: 25px 25px;
  cursor: default;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
.list-tabs .tabs li.tab-fixed a.selected:hover, .list-tabs .tabs li.tab-all a.selected:hover, .list-tabs .tabs li.tab-incomplete_units a.selected:hover {
  text-decoration: none;
  cursor: default;
}

/* line 44, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-fixed a:hover, .list-tabs .tabs li.tab-all a:hover, .list-tabs .tabs li.tab-incomplete_units a:hover {
  background-color: var(--tab-hover-bg);
}

@media all and (min-width: 800px) {
  /* line 16, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li.tab-fixed a, .list-tabs .tabs li.tab-all a, .list-tabs .tabs li.tab-incomplete_units a {
    text-indent: 0;
    background-position: 15px center;
  }
  /* line 51, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li.tab-fixed a.selected, .list-tabs .tabs li.tab-all a.selected, .list-tabs .tabs li.tab-incomplete_units a.selected {
    background-position: 15px center !important;
  }
}

/* line 16, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-focus a, .list-tabs .tabs li.tab-adaptive a, .list-tabs .tabs li.tab-focus_active a {
  display: block;
  text-indent: -5000px;
  border-radius: 100px;
  border: 1px solid var(--border-light);
  background: var(--tab-bg) url(/assets/icons/focus_icon_black.svg) no-repeat center center;
  background-size: 25px 25px;
  padding: 0.8em 1em 0.8em 50px;
  text-decoration: none;
  font-size: 1rem;
  color: var(--tab-color);
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

/* line 30, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-focus a span, .list-tabs .tabs li.tab-adaptive a span, .list-tabs .tabs li.tab-focus_active a span {
  vertical-align: middle;
}

/* line 34, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-focus a.selected, .list-tabs .tabs li.tab-adaptive a.selected, .list-tabs .tabs li.tab-focus_active a.selected {
  background: var(--tab-selected-bg) url(/assets/icons/focus_icon_black.svg) no-repeat center center;
  color: var(--tab-selected-color);
  background-size: 25px 25px;
  cursor: default;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
.list-tabs .tabs li.tab-focus a.selected:hover, .list-tabs .tabs li.tab-adaptive a.selected:hover, .list-tabs .tabs li.tab-focus_active a.selected:hover {
  text-decoration: none;
  cursor: default;
}

/* line 44, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-focus a:hover, .list-tabs .tabs li.tab-adaptive a:hover, .list-tabs .tabs li.tab-focus_active a:hover {
  background-color: var(--tab-hover-bg);
}

@media all and (min-width: 800px) {
  /* line 16, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li.tab-focus a, .list-tabs .tabs li.tab-adaptive a, .list-tabs .tabs li.tab-focus_active a {
    text-indent: 0;
    background-position: 15px center;
  }
  /* line 51, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li.tab-focus a.selected, .list-tabs .tabs li.tab-adaptive a.selected, .list-tabs .tabs li.tab-focus_active a.selected {
    background-position: 15px center !important;
  }
}

/* line 16, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-completed a, .list-tabs .tabs li.tab-complete_units a {
  display: block;
  text-indent: -5000px;
  border-radius: 100px;
  border: 1px solid var(--border-light);
  background: var(--tab-bg) url(/assets/icons/completed_icon_black.svg) no-repeat center center;
  background-size: 25px 25px;
  padding: 0.8em 1em 0.8em 50px;
  text-decoration: none;
  font-size: 1rem;
  color: var(--tab-color);
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

/* line 30, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-completed a span, .list-tabs .tabs li.tab-complete_units a span {
  vertical-align: middle;
}

/* line 34, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-completed a.selected, .list-tabs .tabs li.tab-complete_units a.selected {
  background: var(--tab-selected-bg) url(/assets/icons/completed_icon_black.svg) no-repeat center center;
  color: var(--tab-selected-color);
  background-size: 25px 25px;
  cursor: default;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4) inset;
}

/* line 120, app/assets/stylesheets/utils/_mixins.scss */
.list-tabs .tabs li.tab-completed a.selected:hover, .list-tabs .tabs li.tab-complete_units a.selected:hover {
  text-decoration: none;
  cursor: default;
}

/* line 44, app/assets/stylesheets/components/_list_tabs.scss */
.list-tabs .tabs li.tab-completed a:hover, .list-tabs .tabs li.tab-complete_units a:hover {
  background-color: var(--tab-hover-bg);
}

@media all and (min-width: 800px) {
  /* line 16, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li.tab-completed a, .list-tabs .tabs li.tab-complete_units a {
    text-indent: 0;
    background-position: 15px center;
  }
  /* line 51, app/assets/stylesheets/components/_list_tabs.scss */
  .list-tabs .tabs li.tab-completed a.selected, .list-tabs .tabs li.tab-complete_units a.selected {
    background-position: 15px center !important;
  }
}

/* line 1, app/assets/stylesheets/components/_review_alert.scss */
.review_alert {
  margin: 1em 0;
  background-color: var(--color-review-alert-bg);
}

/* line 5, app/assets/stylesheets/components/_review_alert.scss */
.review_alert .message {
  padding: 1em;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-inverse);
  font-weight: bold;
}

/* line 13, app/assets/stylesheets/components/_review_alert.scss */
.review_alert a {
  padding: 0.3em 0.6em;
  text-align: right;
  background-color: var(--color-review-alert-link);
  display: block;
  font-weight: bold;
  text-decoration: none;
  color: var(--text-inverse);
}

/* line 22, app/assets/stylesheets/components/_review_alert.scss */
.review_alert a:hover {
  background-color: color-mix(in srgb, var(--color-review-alert-link), black 10%);
}

/* line 23, app/assets/stylesheets/components/_review_alert.scss */
.review_alert a:after {
  margin-left: 0.3em;
  background: url(/assets/icons/white_arrow.svg) no-repeat;
}

/* line 1, app/assets/stylesheets/components/_notifications.scss */
.notification {
  padding: 22px;
  margin-bottom: 1em;
  background-color: var(--color-artifact-notice-bg);
  color: var(--text-inverse);
}

/* line 7, app/assets/stylesheets/components/_notifications.scss */
.notification-title {
  font-size: 1.2em;
  margin-bottom: 22px;
}

/* line 12, app/assets/stylesheets/components/_notifications.scss */
.notification-close {
  background: transparent url(/assets/open-btn.svg) no-repeat center center;
  transform: rotate(45deg);
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  border: 1px solid var(--border-notification-close);
  cursor: pointer;
  float: right;
  outline: 0;
  text-indent: -9999px;
}

/* line 24, app/assets/stylesheets/components/_notifications.scss */
.notification-close:hover {
  background-color: var(--bg-input);
}

/* line 1, app/assets/stylesheets/layout/_grid.scss */
html {
  box-sizing: border-box;
  height: 100%;
}

/* line 6, app/assets/stylesheets/layout/_grid.scss */
* {
  box-sizing: inherit;
}

/* line 10, app/assets/stylesheets/layout/_grid.scss */
body,
html {
  margin: 0;
  padding: 0;
  background-color: var(--bg-body);
  color: var(--text-primary);
  z-index: -2;
}

/* line 19, app/assets/stylesheets/layout/_grid.scss */
.meta {
  display: none;
}

/* line 23, app/assets/stylesheets/layout/_grid.scss */
footer {
  padding: 1em;
  font-size: 0.8em;
  color: var(--text-secondary);
}

/* line 29, app/assets/stylesheets/layout/_grid.scss */
.main-content, .content_box {
  background-color: var(--bg-main);
  border-radius: 3px;
  padding: 1em;
}

/* line 35, app/assets/stylesheets/layout/_grid.scss */
.columns {
  display: flex;
  flex-direction: row;
}

/* line 39, app/assets/stylesheets/layout/_grid.scss */
.columns .right_col {
  flex: 0.5;
}

/* line 43, app/assets/stylesheets/layout/_grid.scss */
.columns .left_col {
  padding: 1em;
  border: 1px solid var(--border-light);
  flex: 1;
  margin-right: 1em;
}

/* line 47, app/assets/stylesheets/layout/_grid.scss */
.columns .left_col .head {
  border-bottom: 1px solid var(--border-light);
}

@media all and (max-width: 800px) {
  /* line 47, app/assets/stylesheets/layout/_grid.scss */
  .columns .left_col .head {
    display: none;
  }
}

/* line 58, app/assets/stylesheets/layout/_grid.scss */
.columns .left_col .body {
  padding: 1em 2em 2em 2em;
}

/* line 62, app/assets/stylesheets/layout/_grid.scss */
.columns .left_col h3 {
  font-family: var(--font-sans);
  font-weight: 600;
}

/* line 64, app/assets/stylesheets/layout/_grid.scss */
.columns .left_col h3 .count {
  height: 2em;
  min-width: 2em;
  font-size: 0.6em;
  margin-left: 1em;
  text-align: center;
  padding: 0.55em;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 20px;
  background-color: var(--bg-badge);
  color: var(--text-inverse);
  vertical-align: middle;
  line-height: 1em;
}

@media all and (max-width: 800px) {
  /* line 35, app/assets/stylesheets/layout/_grid.scss */
  .columns {
    flex-direction: column-reverse;
  }
  /* line 85, app/assets/stylesheets/layout/_grid.scss */
  .columns .left_col {
    margin-right: 0;
    margin-left: 0;
    padding: 0;
  }
  /* line 89, app/assets/stylesheets/layout/_grid.scss */
  .columns .left_col .body {
    padding: 0;
  }
}

/* line 96, app/assets/stylesheets/layout/_grid.scss */
.debug {
  display: none;
}

/* line 1, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice {
  position: relative;
  margin-bottom: 1em;
}

/* line 5, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice .footer {
  padding: 1em;
}

/* line 8, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice .footer .hide {
  float: left;
  width: 50%;
}

/* line 13, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice .footer .continue {
  float: left;
  text-align: right;
  width: 50%;
}

/* line 18, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice .footer .continue a {
  display: inline-block;
  background-color: var(--color-orange-accent);
  border-radius: 100px, 100px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
  color: var(--text-inverse);
  padding: 0.5em 3em;
  text-decoration: none;
  transition: background-color 0.5s ease;
}

/* line 28, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice .footer .continue a:hover {
  transition: background-color 0.5s ease;
  background-color: color-mix(in srgb, var(--color-orange-accent), black 5%);
}

/* line 36, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice.modal {
  position: absolute;
  background-color: var(--bg-modal);
  width: 500px;
  overflow: hidden;
  border-radius: 5px;
}

/* line 42, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice.modal .heading {
  padding: 0.5em;
  background-color: var(--color-heading-modal);
  color: var(--text-inverse);
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1em;
}

/* line 50, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice.modal .heading img {
  float: left;
  margin: 0.5em;
}

/* line 56, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice.modal .message {
  padding: 1em;
  line-height: 1.2em;
}

/* line 60, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice.modal .message p {
  padding: 0.5em 0;
}

/* line 64, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice.modal .message img {
  width: 1.2em;
  height: 1.2em;
}

/* line 68, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice.modal .message a {
  color: var(--color-orange-accent-hover);
  font-weight: bold;
}

/* line 72, app/assets/stylesheets/layout/_notifications.scss */
.one-off-notice.modal .message .highlight {
  color: var(--color-orange-accent);
}

/* line 79, app/assets/stylesheets/layout/_notifications.scss */
#focus_intro, #adaptive_intro {
  background-color: var(--color-intro-bg);
  font-size: 1.2em;
  padding: 1em;
  box-shadow: 0px 1px 3px rgba(204, 204, 204, 0.3), 0px 1px 2px rgba(204, 204, 204, 0.3);
}

/* line 85, app/assets/stylesheets/layout/_notifications.scss */
#focus_intro .close-icon a, #adaptive_intro .close-icon a {
  float: right;
  display: block;
  background: url(/assets/icons/notification_close.svg) no-repeat;
  display: inline-block;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  overflow: hidden;
}

/* line 96, app/assets/stylesheets/layout/_notifications.scss */
#focus_intro .title, #adaptive_intro .title {
  margin-top: 1em;
}

/* line 100, app/assets/stylesheets/layout/_notifications.scss */
#focus_intro .message, #adaptive_intro .message {
  line-height: 1.4em;
  margin-top: .4em;
  margin-right: 2.5em;
}

/* line 106, app/assets/stylesheets/layout/_notifications.scss */
#focus_intro .footer, #adaptive_intro .footer {
  padding: 1em 0 .4em;
}

/* line 111, app/assets/stylesheets/layout/_notifications.scss */
#browser_warning {
  display: none;
  background-color: var(--color-browser-warning);
  text-align: center;
  font-family: arial;
  padding: 1em;
}

/* line 118, app/assets/stylesheets/layout/_notifications.scss */
#browser_warning .title {
  font-weight: bold;
}

/* line 121, app/assets/stylesheets/layout/_notifications.scss */
#browser_warning p {
  margin: 0px;
}

/* line 126, app/assets/stylesheets/layout/_notifications.scss */
.completed_message {
  background: var(--bg-modal) url(/assets/icons/icon-empty-completed.png) no-repeat center 30%;
  background-size: 25%;
  min-height: 20em;
  position: relative;
  margin-top: 1em;
}

/* line 132, app/assets/stylesheets/layout/_notifications.scss */
.completed_message .title {
  position: absolute;
  width: 100%;
  bottom: 1em;
  text-align: center;
}

/* line 2, app/assets/stylesheets/pages/_base.scss */
.page li, .page h1, .page h2, .page h3 {
  margin: 0.5em 0;
}

/* line 2, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch body {
  font-size: 1.3em;
  line-height: 1.2em;
}

/* line 5, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch body .content {
  padding: 0em 1em 1.5em 1em;
}

/* line 10, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .theme_square_logo {
  text-align: center;
}

/* line 12, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .theme_square_logo img {
  max-height: 5em;
}

/* line 17, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch p {
  margin: 1.5em 0;
  line-height: 1.4em;
}

/* line 22, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch a {
  display: block;
  padding: 0.5em;
  text-align: center;
  text-decoration: none;
  color: var(--text-blue);
}

/* line 30, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch button[type=submit] {
  -webkit-appearance: none;
  margin-top: 1em;
  width: 100%;
  max-width: 26rem;
  font-size: 1.5em;
  text-align: center;
  background: var(--app-launch-btn-bg);
  border: 0;
  color: var(--text-inverse);
  padding: 0.3em;
  border-radius: 1em;
}

/* line 44, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch {
  position: relative;
  opacity: 0.3;
}

/* line 49, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .get {
  opacity: 0.3;
}

/* line 54, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch.enabled, .app_launch .get.enabled {
  opacity: 1;
}

/* line 59, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .choice {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0.8em 1em 0.8em 3em;
  background-color: var(--app-launch-choice-bg);
  background-size: 2em;
  background-repeat: no-repeat;
  background-position: 0.5em;
}

/* line 67, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .choice.installed {
  background-color: var(--app-launch-installed-bg);
}

/* line 71, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .choice.installed, .app_launch .choice.not-installed {
  background-image: url(/assets/black-tick-de-selected@3x.png);
}

/* line 74, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .choice.installed.selected, .app_launch .choice.not-installed.selected {
  background-image: url(/assets/black-tick@3x.png);
}

/* line 79, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .choice.get {
  background-image: url(/assets/link-away@3x.png);
  background-size: 1.5em;
  background-position: 0.8em;
}

/* line 85, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .choice.installed {
  margin-bottom: 1.5em;
}

/* line 89, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .choice.not-installed {
  margin-bottom: 1px;
}

/* line 97, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch.top_bar body .content {
  padding: 0em 1em 1.5em 1em;
}

/* line 102, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch.top_bar .theme_square_logo {
  text-align: center;
}

/* line 104, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch.top_bar .theme_square_logo img {
  max-height: 5em;
}

/* line 109, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch.top_bar .full_screen_background_logo_container {
  display: none;
}

/* line 116, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch.full_screen body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* line 126, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch.full_screen .full_screen_background_logo_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* line 137, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch.full_screen .full_screen_background_logo_container .background_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--app-launch-overlay);
}

/* line 147, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch.full_screen .content {
  position: relative;
  z-index: 1;
  background-color: var(--app-launch-content-bg);
  padding: 1.5em;
  margin: 2em;
  border-radius: 0.5em;
  max-width: 90%;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* line 161, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch.full_screen .theme_square_logo {
  display: none;
}

/* line 166, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0 auto;
  z-index: 5;
  width: calc(100% - 1.5em);
  padding: 1em 1.25em 1.25em 1.25em;
  border-radius: 0.75em;
  background-color: var(--app-launch-fallback-bg);
  box-shadow: 0 10px 30px var(--app-launch-shadow);
}

/* line 180, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback.is-hidden {
  display: none;
}

/* line 184, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  border: 0;
  background: transparent;
  font-size: 1.25em;
  line-height: 1;
  font-weight: 600;
  color: var(--app-launch-fallback-muted);
  cursor: pointer;
}

/* line 196, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__close:focus {
  outline: 2px solid var(--app-launch-fallback-text);
  outline-offset: 2px;
}

/* line 202, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__token-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5em;
}

/* line 208, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__token {
  display: grid;
  gap: 0.75em;
}

/* line 212, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__token .launch-fallback__token-value {
  display: block;
  width: 100%;
  padding: 0.75em;
  border: 1px solid var(--app-launch-fallback-border);
  border-radius: 0.3em;
  background: var(--app-launch-fallback-bg);
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: 1.1em;
  color: var(--app-launch-fallback-text);
  white-space: nowrap;
  overflow-x: auto;
  user-select: all;
  -webkit-user-select: all;
}

/* line 228, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__token .launch-fallback__token-value:focus {
  outline: none;
  border-color: var(--app-launch-fallback-text);
  box-shadow: 0 0 0 1px var(--app-launch-fallback-text);
}

/* line 234, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__token .launch-fallback__copy-button {
  appearance: none;
  border: 1px solid var(--app-launch-fallback-text);
  border-radius: 0.3em;
  padding: 0.5em 0.75em;
  background-color: var(--app-launch-fallback-text);
  color: var(--bg-modal);
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* line 246, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__token .launch-fallback__copy-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--app-launch-fallback-disabled);
  border-color: var(--app-launch-fallback-disabled);
}

/* line 253, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__token .launch-fallback__copy-button.is-success {
  background-color: var(--app-launch-success-bg);
  border-color: var(--app-launch-success-bg);
  color: var(--text-inverse);
}

/* line 261, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback .launch-fallback__help {
  margin-top: 0.75em;
  font-size: 0.9em;
  color: var(--app-launch-fallback-help);
}

/* line 269, app/assets/stylesheets/pages/_app_launch.scss */
.app_launch .launch-fallback__show-button.is-hidden {
  display: none;
}

/* line 5, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts, .lesson_artifacts, #artifact {
  padding: 1em;
}

@media (hover: hover) {
  /* line 10, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .row-hover:hover, .lessons_with_artifacts .view-artifacts a:hover, .view-artifacts .lessons_with_artifacts a:hover, .lessons_with_artifacts .artifacts .artifact:hover, .lessons_with_artifacts a.content:hover, .lesson_artifacts .row-hover:hover, .lesson_artifacts .view-artifacts a:hover, .view-artifacts .lesson_artifacts a:hover, .lesson_artifacts .artifacts .artifact:hover, .lesson_artifacts a.content:hover, #artifact .row-hover:hover, #artifact .view-artifacts a:hover, .view-artifacts #artifact a:hover, .lessons_with_artifacts .artifacts #artifact .artifact:hover, .lesson_artifacts .artifacts #artifact .artifact:hover, #artifact .artifacts .artifact:hover, #artifact a.content:hover {
    background-color: var(--bg-card-hover);
  }
}

/* line 16, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .back, .lesson_artifacts .back, #artifact .back {
  margin-bottom: 1em;
}

/* line 20, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .notice, .lesson_artifacts .notice, #artifact .notice {
  background-color: var(--color-artifact-notice-bg);
  border-radius: 10px;
  margin-bottom: 1em;
  padding: 1em;
  color: var(--text-inverse);
  font-size: 1.2em;
  font-weight: bold;
}

/* line 30, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .content, .lesson_artifacts .content, #artifact .content {
  padding: 1em;
  background-color: var(--bg-modal);
}

/* line 33, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .content + .content, .lesson_artifacts .content + .content, #artifact .content + .content {
  margin-top: 10px;
}

/* line 42, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .lesson, .lessons_with_artifacts .content, .lessons_with_artifacts .artifact, .lesson_artifacts .lesson, .lesson_artifacts .content, .lesson_artifacts .artifact, #artifact .lesson, #artifact .content, #artifact .artifact {
  display: block;
  text-decoration: none;
}

/* line 48, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .lesson, .lessons_with_artifacts .artifact, .lesson_artifacts .lesson, .lesson_artifacts .artifact, #artifact .lesson, #artifact .artifact {
  padding: 0.4em 48px;
  background-size: 40px;
  min-height: 40px;
  color: var(--text-code);
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.grammar, .lesson_artifacts .lesson.grammar, #artifact .lesson.grammar {
    background-image: url(/assets/study-lesson-icons/grammar@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.grammar, .lesson_artifacts .lesson.grammar, #artifact .lesson.grammar {
    background-image: url(/assets/study-lesson-icons/grammar@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.grammar, .lesson_artifacts .lesson.grammar, #artifact .lesson.grammar {
    background-image: url(/assets/study-lesson-icons/grammar@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.listening, .lesson_artifacts .lesson.listening, #artifact .lesson.listening {
    background-image: url(/assets/study-lesson-icons/listening@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.listening, .lesson_artifacts .lesson.listening, #artifact .lesson.listening {
    background-image: url(/assets/study-lesson-icons/listening@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.listening, .lesson_artifacts .lesson.listening, #artifact .lesson.listening {
    background-image: url(/assets/study-lesson-icons/listening@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.reading, .lesson_artifacts .lesson.reading, #artifact .lesson.reading {
    background-image: url(/assets/study-lesson-icons/reading@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.reading, .lesson_artifacts .lesson.reading, #artifact .lesson.reading {
    background-image: url(/assets/study-lesson-icons/reading@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.reading, .lesson_artifacts .lesson.reading, #artifact .lesson.reading {
    background-image: url(/assets/study-lesson-icons/reading@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.tests, .lesson_artifacts .lesson.tests, #artifact .lesson.tests {
    background-image: url(/assets/study-lesson-icons/tests@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.tests, .lesson_artifacts .lesson.tests, #artifact .lesson.tests {
    background-image: url(/assets/study-lesson-icons/tests@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.tests, .lesson_artifacts .lesson.tests, #artifact .lesson.tests {
    background-image: url(/assets/study-lesson-icons/tests@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.videos, .lesson_artifacts .lesson.videos, #artifact .lesson.videos {
    background-image: url(/assets/study-lesson-icons/videos@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.videos, .lesson_artifacts .lesson.videos, #artifact .lesson.videos {
    background-image: url(/assets/study-lesson-icons/videos@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.videos, .lesson_artifacts .lesson.videos, #artifact .lesson.videos {
    background-image: url(/assets/study-lesson-icons/videos@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.speaking, .lesson_artifacts .lesson.speaking, #artifact .lesson.speaking {
    background-image: url(/assets/study-lesson-icons/speaking@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.speaking, .lesson_artifacts .lesson.speaking, #artifact .lesson.speaking {
    background-image: url(/assets/study-lesson-icons/speaking@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.speaking, .lesson_artifacts .lesson.speaking, #artifact .lesson.speaking {
    background-image: url(/assets/study-lesson-icons/speaking@3x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.writing, .lesson_artifacts .lesson.writing, #artifact .lesson.writing {
    background-image: url(/assets/study-lesson-icons/writing@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.writing, .lesson_artifacts .lesson.writing, #artifact .lesson.writing {
    background-image: url(/assets/study-lesson-icons/writing@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 57, app/assets/stylesheets/pages/_artifacts.scss */
  .lessons_with_artifacts .lesson.writing, .lesson_artifacts .lesson.writing, #artifact .lesson.writing {
    background-image: url(/assets/study-lesson-icons/writing@3x.png);
  }
}

/* line 66, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .artifact.writing, .lesson_artifacts .artifact.writing, #artifact .artifact.writing {
  background-image: url(/assets/icons/storage/writing.svg);
}

/* line 70, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .artifact.conversation, .lessons_with_artifacts .artifact.timed_recording, .lesson_artifacts .artifact.conversation, .lesson_artifacts .artifact.timed_recording, #artifact .artifact.conversation, #artifact .artifact.timed_recording {
  background-image: url(/images/icons/storage/speaking.svg);
}

/* line 76, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .artifacts .artifact, .lesson_artifacts .artifacts .artifact, #artifact .artifacts .artifact {
  padding: 0.4em 50px;
  margin-top: 0.4em;
  background-size: 30px;
  min-height: 30px;
  background-position: .4em 50%;
}

/* line 86, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .lesson, .lessons_with_artifacts .artifact, .lesson_artifacts .lesson, .lesson_artifacts .artifact, #artifact .lesson, #artifact .artifact {
  background-repeat: no-repeat;
}

/* line 89, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .lesson.active:hover, .lessons_with_artifacts .artifact.active:hover, .lesson_artifacts .lesson.active:hover, .lesson_artifacts .artifact.active:hover, #artifact .lesson.active:hover, #artifact .artifact.active:hover {
  cursor: pointer;
}

/* line 93, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .lesson .time, .lessons_with_artifacts .lesson .user, .lessons_with_artifacts .artifact .time, .lessons_with_artifacts .artifact .user, .lesson_artifacts .lesson .time, .lesson_artifacts .lesson .user, .lesson_artifacts .artifact .time, .lesson_artifacts .artifact .user, #artifact .lesson .time, #artifact .lesson .user, #artifact .artifact .time, #artifact .artifact .user {
  padding-top: 0.4em;
  font-size: 11px;
}

/* line 98, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .lesson .name, .lessons_with_artifacts .artifact .name, .lesson_artifacts .lesson .name, .lesson_artifacts .artifact .name, #artifact .lesson .name, #artifact .artifact .name {
  color: var(--text-name);
}

/* line 100, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .lesson .name a, .lessons_with_artifacts .artifact .name a, .lesson_artifacts .lesson .name a, .lesson_artifacts .artifact .name a, #artifact .lesson .name a, #artifact .artifact .name a {
  color: var(--text-name);
  text-decoration: none;
}

/* line 104, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .lesson .name a:hover, .lessons_with_artifacts .artifact .name a:hover, .lesson_artifacts .lesson .name a:hover, .lesson_artifacts .artifact .name a:hover, #artifact .lesson .name a:hover, #artifact .artifact .name a:hover {
  text-decoration: underline;
}

/* line 111, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .share, .lesson_artifacts .share, #artifact .share {
  text-align: right;
}

/* line 113, app/assets/stylesheets/pages/_artifacts.scss */
.lessons_with_artifacts .share .btn, .lesson_artifacts .share .btn, #artifact .share .btn {
  height: 40px;
  width: 40px;
  display: inline-block;
  float: right;
  color: transparent;
  background: url(/assets/icons/storage/share.svg) center left no-repeat;
  background-size: 40px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-indent: -9999px;
  cursor: pointer;
}

/* line 131, app/assets/stylesheets/pages/_artifacts.scss */
.view-artifacts {
  margin-bottom: 1em;
}

/* line 134, app/assets/stylesheets/pages/_artifacts.scss */
.view-artifacts a {
  display: block;
  padding: 1em 1.5em;
  text-decoration: none;
  border-radius: 8px;
  color: var(--text-inverse);
  font-weight: bold;
  background-color: var(--color-artifact-link-bg);
  width: 36.6%;
}

/* line 3, app/assets/stylesheets/pages/_lessons.scss */
ul.lessons {
  margin: 0;
  padding: 0;
}

/* line 8, app/assets/stylesheets/pages/_lessons.scss */
ul.lessons ul + ul {
  border-top: 1px solid var(--border-color);
  padding-top: 0.5em;
}

/* line 13, app/assets/stylesheets/pages/_lessons.scss */
ul.lessons .training + .failed {
  border-top: 1px solid var(--border-color);
}

/* line 18, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover {
  margin-top: 0.8em;
  position: absolute;
}

/* line 22, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content {
  width: 25em;
  padding: 0.5em;
}

/* line 28, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content .grammar h2 {
  background-color: #CEECEB;
  padding: 0.5em;
  font-size: 1em;
}

/* line 28, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content .listening h2 {
  background-color: #F4E9CA;
  padding: 0.5em;
  font-size: 1em;
}

/* line 28, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content .reading h2 {
  background-color: #CAE9D9;
  padding: 0.5em;
  font-size: 1em;
}

/* line 28, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content .tests h2 {
  background-color: rgba(208, 120, 43, 0.5);
  padding: 0.5em;
  font-size: 1em;
}

/* line 28, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content .videos h2 {
  background-color: rgba(90, 133, 242, 0.5);
  padding: 0.5em;
  font-size: 1em;
}

/* line 28, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content .speaking h2 {
  background-color: rgba(232, 117, 16, 0.5);
  padding: 0.5em;
  font-size: 1em;
}

/* line 28, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content .writing h2 {
  background-color: rgba(179, 52, 176, 0.5);
  padding: 0.5em;
  font-size: 1em;
}

/* line 36, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content h3 {
  padding: 0.5em 0;
  font-size: 1em;
}

/* line 41, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content .time {
  padding: 0.5em 0;
}

/* line 42, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content .time strong {
  font-family: var(--font-sans);
  font-weight: 600;
}

/* line 49, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content ul li {
  font-family: var(--font-sans);
  font-weight: 600;
  background-color: var(--lesson-popover-item-bg);
  padding: 0.5em;
  margin-bottom: 0.25em;
}

/* line 58, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content dl dt {
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 0.3em 0;
}

/* line 63, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content dl dd {
  font-size: 0.9em;
  margin: 0.3em 0;
  line-height: 1.2em;
}

/* line 69, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content dl i {
  font-style: italic;
}

/* line 73, app/assets/stylesheets/pages/_lessons.scss */
.lessons-popover .popover-content dl b {
  font-family: var(--font-sans);
  font-weight: 600;
}

/* line 10, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 40px;
  color: var(--ink);
}

/* line 17, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--ink);
}

/* line 27, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 14px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}

/* line 39, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 160px;
  min-width: 0;
}

/* line 47, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

/* line 53, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__input,
.catalogue__select {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* line 66, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__input:focus-visible,
.catalogue__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* line 73, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* line 80, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__button {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 9px 20px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--surface);
  cursor: pointer;
}

/* line 91, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__button:hover {
  background: var(--accent-hi);
}

/* line 92, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__button:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}

/* line 95, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__clear {
  font-size: 0.9rem;
  color: var(--accent);
  padding: 10px 6px;
}

/* line 103, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__count {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* line 112, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* line 118, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--surface);
  color: var(--ink);
}

/* line 132, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__table th, .catalogue__table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--surface);
  color: var(--ink);
}

/* line 141, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__table th {
  background: var(--surface-alt);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.85rem;
}

/* line 148, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__table tbody tr:last-child td {
  border-bottom: 0;
}

/* line 149, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__table tbody tr:hover td {
  background: var(--accent-lo);
}

/* line 153, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__name {
  white-space: normal !important;
  min-width: 200px;
  font-weight: 500;
}

/* line 159, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__name-link {
  display: block;
  color: var(--ink);
  padding: 8px 0;
}

/* line 166, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__name-link:hover {
  color: var(--accent-hi);
  text-decoration: underline;
}

/* line 167, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__name-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* line 170, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

/* line 175, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__open {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 500;
}

/* line 184, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__open:hover {
  background: var(--accent);
  color: var(--surface);
}

/* line 185, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__open:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}

/* line 188, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

/* line 196, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__page-link {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.9rem;
}

/* line 204, app/assets/stylesheets/pages/_catalogue.scss */
.catalogue__page-of {
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 700px) {
  /* line 215, app/assets/stylesheets/pages/_catalogue.scss */
  .catalogue__open-cell {
    display: none;
  }
  /* line 217, app/assets/stylesheets/pages/_catalogue.scss */
  .catalogue__name {
    min-width: 150px;
  }
  /* line 220, app/assets/stylesheets/pages/_catalogue.scss */
  .catalogue__field {
    flex: 1 1 100%;
  }
  /* line 221, app/assets/stylesheets/pages/_catalogue.scss */
  .catalogue__actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* line 1, app/assets/stylesheets/pages/_orientation.scss */
#orientation {
  padding-top: 50px;
}

/* line 4, app/assets/stylesheets/pages/_orientation.scss */
#orientation #container {
  width: 960px;
  margin: 0 auto;
  padding-top: 26px;
  padding-bottom: 54px;
  background: url(/assets/orientatin_bg.png) no-repeat bottom;
}

/* line 12, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window,
#orientation #section_window_inner,
#orientation #section_container,
#orientation .section {
  width: 830px;
  height: 447px;
}

/* line 20, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window {
  position: relative;
  margin: 0 auto 1px;
  overflow: hidden;
}

/* line 24, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window ul.nav {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

/* line 30, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window li {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 3px;
  line-height: 10px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: var(--bg-badge);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset;
}

/* line 42, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window li a {
  display: block;
}

/* line 48, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window li:hover,
#orientation #section_window li.done:hover {
  background-color: #76acff;
}

/* line 51, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window li:active,
#orientation #section_window li.done:active {
  background-color: #0041a7;
}

/* line 55, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window li.current {
  background-color: var(--orientation-dot-current);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
}

/* line 59, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window li.done {
  background-color: var(--orientation-dot-done);
}

/* line 63, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window a.prev,
#orientation #section_window a.next {
  display: block;
  position: absolute;
  top: 200px;
  width: 35px;
  height: 50px;
  background-color: var(--orientation-arrow-bg);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* line 74, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window a.prev:hover,
#orientation #section_window a.next:hover {
  background-color: var(--orientation-arrow-hover);
}

/* line 77, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window a.prev:active,
#orientation #section_window a.next:active {
  background-color: #0041a7;
}

/* line 81, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window a.prev {
  left: 0px;
  background-image: url(/assets/prev_arrow.png);
}

/* line 85, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window a.next {
  right: 0px;
  background-image: url(/assets/next_arrow.png);
}

/* line 89, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window a.prev.hidden,
#orientation #section_window a.next.hidden {
  display: none;
}

/* line 94, app/assets/stylesheets/pages/_orientation.scss */
#orientation #section_window_inner {
  position: absolute;
  clip: rect(0 830px 447px 0);
}

/* line 98, app/assets/stylesheets/pages/_orientation.scss */
#orientation .place-counter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5%;
  z-index: 1;
}

/* line 105, app/assets/stylesheets/pages/_orientation.scss */
#orientation .place-counter .place-dot {
  height: 1em;
  width: 1em;
  border: 1px solid var(--text-link);
  background-color: var(--bg-card);
  border-radius: 50%;
}

/* line 113, app/assets/stylesheets/pages/_orientation.scss */
#orientation .place-counter .place-dot.current {
  background-color: var(--text-link);
}

/* line 118, app/assets/stylesheets/pages/_orientation.scss */
#orientation .place-counter #section_container {
  position: absolute;
  width: auto;
  overflow: visible;
}

/* line 125, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--orientation-section-bg);
}

/* line 132, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section.hidden {
  display: none;
}

/* line 136, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section h2 {
  font-size: 25px;
  color: var(--text-heading-orientation);
  font-weight: normal;
  padding: 45px 0 0 64px;
  margin-bottom: 24px;
  max-width: 45%;
}

/* line 144, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section .text,
#orientation .section .text_left,
#orientation .section .text_long {
  font-size: 17px;
  color: var(--text-body-orientation);
  line-height: 1.5;
  padding-left: 65px;
  font-weight: normal;
}

/* line 153, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section .text {
  position: absolute;
  top: 120px;
  left: 436px;
  width: 320px;
}

/* line 159, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section .text_left {
  width: 390px;
}

/* line 162, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section .text_long {
  width: 620px;
}

/* line 165, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section p {
  line-height: 1.5;
}

/* line 168, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section h1 {
  position: absolute;
  top: 45px;
  left: 42px;
  font-size: 24px;
  color: var(--text-h1-orientation);
  font-weight: normal;
}

/* line 176, app/assets/stylesheets/pages/_orientation.scss */
#orientation #cover.section {
  background-image: none;
}

/* line 178, app/assets/stylesheets/pages/_orientation.scss */
#orientation #cover.section h2 {
  position: absolute;
  top: 84px;
  left: 42px;
  font-size: 36px;
  color: var(--text-cover-orientation);
  padding: 0 0 0 0;
}

/* line 187, app/assets/stylesheets/pages/_orientation.scss */
#orientation #whatsnext.section {
  background-image: none;
}

/* line 190, app/assets/stylesheets/pages/_orientation.scss */
#orientation #whatsnext.section .proverb {
  padding-left: 15px;
  border-left: 4px solid var(--proverb-border);
  color: var(--text-proverb-orientation);
  margin-bottom: 14px;
}

/* line 196, app/assets/stylesheets/pages/_orientation.scss */
#orientation #whatsnext.section .proverb .body {
  margin-bottom: 0;
  font-style: italic;
  color: var(--text-proverb-body-orientation);
}

/* line 201, app/assets/stylesheets/pages/_orientation.scss */
#orientation #whatsnext.section .proverb .author {
  font-size: 14px;
}

/* line 205, app/assets/stylesheets/pages/_orientation.scss */
#orientation #whatsnext.section .gotomenu {
  width: 207px;
  position: absolute;
  top: 350px;
  right: 312px;
  font-family: sans-serif;
  width: 207px;
  height: 60px;
}

/* line 213, app/assets/stylesheets/pages/_orientation.scss */
#orientation #whatsnext.section .gotomenu a {
  display: block;
  height: 60px;
  line-height: 60px;
  text-decoration: none;
  text-align: center;
  background: url(/assets/getstarted.png) no-repeat;
  background-position: -3px -4px;
}

/* line 221, app/assets/stylesheets/pages/_orientation.scss */
#orientation #whatsnext.section .gotomenu a:hover {
  color: #4f96f6;
  background-position: -3px -84px;
}

/* line 225, app/assets/stylesheets/pages/_orientation.scss */
#orientation #whatsnext.section .gotomenu a:active {
  color: #4f96f6;
  background-position: -3px -164px;
}

/* line 233, app/assets/stylesheets/pages/_orientation.scss */
#orientation .backtomenu {
  width: 300px;
  float: right;
  margin-top: 20px;
  margin-right: 75px;
  text-align: right;
}

/* line 240, app/assets/stylesheets/pages/_orientation.scss */
#orientation .backtomenu a {
  color: var(--orientation-backtomenu);
  padding-left: 20px;
  font-weight: bold;
  font-size: 15px;
  padding-left: 20px;
  background-image: url(/assets/backto.png);
  background-repeat: no-repeat;
  background-position: 0 2px;
  text-decoration: none;
}

/* line 251, app/assets/stylesheets/pages/_orientation.scss */
#orientation .backtomenu a:active {
  position: relative;
  top: 1px;
}

/* line 259, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section {
  background-image: url(/assets/orientation_stage_af_bg@2x.png);
  background-repeat: no-repeat;
}

/* line 260, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section h2 {
  font-size: 22px;
}

/* line 267, app/assets/stylesheets/pages/_orientation.scss */
#orientation #introduction.section {
  background-image: none;
}

/* line 271, app/assets/stylesheets/pages/_orientation.scss */
#orientation #find_out_your_level.section.section {
  background-position: -30px 50px;
}

/* line 275, app/assets/stylesheets/pages/_orientation.scss */
#orientation #follow_your_learning_path.section, #orientation #follow_your_personalised_course.section {
  background-position: -30px -420px;
}

/* line 280, app/assets/stylesheets/pages/_orientation.scss */
#orientation #choose_a_lesson.section {
  background-position: -30px -910px;
}

/* line 284, app/assets/stylesheets/pages/_orientation.scss */
#orientation #how_does_a_lesson_work.section {
  background-position: -60px -1320px;
}

/* line 288, app/assets/stylesheets/pages/_orientation.scss */
#orientation #how_often_should_i_study.section {
  background-position: -30px -1680px;
}

/* line 293, app/assets/stylesheets/pages/_orientation.scss */
#orientation.learning_path .section {
  background-image: url(/assets/orientation_stage_lp_bg@1x.png);
  background-repeat: no-repeat;
}

/* line 298, app/assets/stylesheets/pages/_orientation.scss */
#orientation .section {
  background-image: url(/assets/orientation_stage_af_bg@2x.png);
  background-repeat: no-repeat;
  background-size: 1118px 1958px;
}

/* line 304, app/assets/stylesheets/pages/_orientation.scss */
#orientation.learning_path .section {
  background-image: url(/assets/orientation_stage_lp_bg@2x.png);
  background-repeat: no-repeat;
}

/* line 311, app/assets/stylesheets/pages/_orientation.scss */
.slide-left-in,
.slide-left-out,
.slide-right-in,
.slide-right-out {
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/* line 318, app/assets/stylesheets/pages/_orientation.scss */
.slide-left-in {
  animation-name: slide-left-in;
}

/* line 321, app/assets/stylesheets/pages/_orientation.scss */
.slide-right-in {
  animation-name: slide-right-in;
}

/* line 324, app/assets/stylesheets/pages/_orientation.scss */
.slide-left-out {
  animation-name: slide-left-out;
}

/* line 327, app/assets/stylesheets/pages/_orientation.scss */
.slide-right-out {
  animation-name: slide-right-out;
}

@keyframes slide-left-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-left-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-right-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-right-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* line 14, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation {
  padding-top: 2rem;
}

/* line 17, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation #container {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  background: none;
}

/* line 27, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation #section_window,
#orientation #section_window_inner,
#orientation #section_container,
#orientation .section {
  width: 100%;
  height: auto;
  min-height: 24rem;
}

/* line 36, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation #section_window {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2rem 2rem 3.5rem;
  overflow: visible;
}

/* line 52, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation #section_window_inner {
  position: static;
  clip: auto;
  clip-path: none;
}

/* line 58, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .section {
  position: static;
  background: transparent;
}

/* line 65, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .section h2,
#orientation .section .section_header {
  max-width: none;
  padding: 0;
}

/* line 71, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .section .text,
#orientation .section .text_left,
#orientation .section .text_long {
  position: static;
  width: auto;
  max-width: 46rem;
  padding-left: 0;
  font-size: 1rem;
}

/* line 83, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .section {
  background-image: none;
}

/* line 85, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .section h2,
#orientation .section .section_header {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1rem;
  line-height: 1.25;
}

/* line 94, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .section p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46rem;
}

/* line 101, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .place-counter {
  position: absolute;
  bottom: 1.25rem;
  right: 2rem;
}

/* line 107, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .place-dot {
  background: var(--orientation-dot-bg);
}

/* line 109, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .place-dot.current {
  background: var(--orientation-dot-current);
}

/* line 112, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation .backtomenu a,
#orientation .gotomenu a {
  color: var(--accent);
  font-weight: 600;
}

/* line 132, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation #section_window a.prev,
#orientation #section_window a.next {
  top: auto;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 143, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation #section_window a.prev {
  left: 1.25rem;
}

/* line 144, app/assets/stylesheets/pages/_lexora_orientation.scss */
#orientation #section_window a.next {
  right: 1.25rem;
}

/* line 1, app/assets/stylesheets/pages/_help.scss */
#index_nav a:link {
  color: var(--text-link);
}

/* line 4, app/assets/stylesheets/pages/_help.scss */
#index_nav a:visited {
  color: var(--text-link-visited);
}

/* line 7, app/assets/stylesheets/pages/_help.scss */
.cntnr_link_to_top, .cntnr_link_to_top a:visited {
  color: var(--text-link);
  margin: 1em 0;
}

/* line 12, app/assets/stylesheets/pages/_help.scss */
.help dl, .help ol, .help ul {
  margin: 1em 0;
}

/* line 16, app/assets/stylesheets/pages/_help.scss */
.help ol li, .help ul li, .help p, .help dd, .help dt {
  line-height: 1.5em;
  font-size: 1em;
}

/* line 21, app/assets/stylesheets/pages/_help.scss */
.help h2 {
  font-size: 18px;
  border-bottom: 1px;
  background: var(--help-bg);
  padding: 0.55em;
  margin-top: 1em;
}

/* line 29, app/assets/stylesheets/pages/_help.scss */
table {
  background: var(--help-bg);
}

/* line 33, app/assets/stylesheets/pages/_help.scss */
img {
  max-width: 100%;
  margin: 1em 0;
}

/* line 2, app/assets/stylesheets/pages/advice/_exhausted.scss */
.lessons .exhausted {
  display: block;
  padding-top: 50px;
  position: relative;
  border: none;
}

/* line 7, app/assets/stylesheets/pages/advice/_alert.scss */
.lessons .exhausted .icon {
  height: 100px;
  width: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: calc(50% - 50px);
  z-index: 999;
}

/* line 18, app/assets/stylesheets/pages/advice/_alert.scss */
.lessons .exhausted .details {
  text-align: center;
  padding: 4em 0.9em 2em 0.9em;
  position: relative;
  color: var(--text-heading);
  line-height: 1.5em;
}

/* line 25, app/assets/stylesheets/pages/advice/_alert.scss */
.lessons .exhausted .details .title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2em;
}

/* line 30, app/assets/stylesheets/pages/advice/_alert.scss */
.lessons .exhausted .details .description {
  padding: 0.5em 20%;
}

/* line 5, app/assets/stylesheets/pages/advice/_exhausted.scss */
.lessons .exhausted .title {
  color: var(--color-exhausted-title);
}

/* line 9, app/assets/stylesheets/pages/advice/_exhausted.scss */
.lessons .exhausted .details {
  background-color: var(--bg-exhausted);
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 13, app/assets/stylesheets/pages/advice/_exhausted.scss */
  .lessons .exhausted .icon {
    background-image: url(/assets/icons/completed-tick@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 13, app/assets/stylesheets/pages/advice/_exhausted.scss */
  .lessons .exhausted .icon {
    background-image: url(/assets/icons/completed-tick@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 13, app/assets/stylesheets/pages/advice/_exhausted.scss */
  .lessons .exhausted .icon {
    background-image: url(/assets/icons/completed-tick@3x.png);
  }
}

/* line 2, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment, ul.lessons .level_down_adjustment {
  display: block;
  padding-top: 50px;
  position: relative;
  border: none;
}

/* line 7, app/assets/stylesheets/pages/advice/_alert.scss */
ul.lessons .level_up_adjustment .icon, ul.lessons .level_down_adjustment .icon {
  height: 100px;
  width: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: calc(50% - 50px);
  z-index: 999;
}

/* line 18, app/assets/stylesheets/pages/advice/_alert.scss */
ul.lessons .level_up_adjustment .details, ul.lessons .level_down_adjustment .details {
  text-align: center;
  padding: 4em 0.9em 2em 0.9em;
  position: relative;
  color: var(--text-heading);
  line-height: 1.5em;
}

/* line 25, app/assets/stylesheets/pages/advice/_alert.scss */
ul.lessons .level_up_adjustment .details .title, ul.lessons .level_down_adjustment .details .title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2em;
}

/* line 30, app/assets/stylesheets/pages/advice/_alert.scss */
ul.lessons .level_up_adjustment .details .description, ul.lessons .level_down_adjustment .details .description {
  padding: 0.5em 20%;
}

/* line 5, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment a, ul.lessons .level_down_adjustment a {
  text-decoration: none;
}

/* line 10, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment .details .start, ul.lessons .level_down_adjustment .details .start {
  font-family: var(--font-sans);
  font-weight: 600;
  position: absolute;
  bottom: 0.3em;
  right: 0.9em;
}

/* line 20, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.grammar .title, ul.lessons .level_down_adjustment.grammar .title {
  color: #0C5D76;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.grammar .icon, ul.lessons .level_down_adjustment.grammar .icon {
    background-image: url(/assets/icons/assessments/level_adjustment/grammar@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.grammar .icon, ul.lessons .level_down_adjustment.grammar .icon {
    background-image: url(/assets/icons/assessments/level_adjustment/grammar@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.grammar .icon, ul.lessons .level_down_adjustment.grammar .icon {
    background-image: url(/assets/icons/assessments/level_adjustment/grammar@3x.png);
  }
}

/* line 29, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.grammar .details, ul.lessons .level_down_adjustment.grammar .details {
  background-color: #CEECEB;
}

/* line 20, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.listening .title, ul.lessons .level_down_adjustment.listening .title {
  color: #A77208;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.listening .icon, ul.lessons .level_down_adjustment.listening .icon {
    background-image: url(/assets/icons/assessments/level_adjustment/listening@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.listening .icon, ul.lessons .level_down_adjustment.listening .icon {
    background-image: url(/assets/icons/assessments/level_adjustment/listening@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.listening .icon, ul.lessons .level_down_adjustment.listening .icon {
    background-image: url(/assets/icons/assessments/level_adjustment/listening@3x.png);
  }
}

/* line 29, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.listening .details, ul.lessons .level_down_adjustment.listening .details {
  background-color: #F4E9CA;
}

/* line 20, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.reading .title, ul.lessons .level_down_adjustment.reading .title {
  color: #0C814C;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.reading .icon, ul.lessons .level_down_adjustment.reading .icon {
    background-image: url(/assets/icons/assessments/level_adjustment/reading@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.reading .icon, ul.lessons .level_down_adjustment.reading .icon {
    background-image: url(/assets/icons/assessments/level_adjustment/reading@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.reading .icon, ul.lessons .level_down_adjustment.reading .icon {
    background-image: url(/assets/icons/assessments/level_adjustment/reading@3x.png);
  }
}

/* line 29, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.reading .details, ul.lessons .level_down_adjustment.reading .details {
  background-color: #CAE9D9;
}

/* line 20, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.tests .title, ul.lessons .level_down_adjustment.tests .title {
  color: #e095b1;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.tests .icon, ul.lessons .level_down_adjustment.tests .icon {
    background-image: url(/images/icons/assessments/level_adjustment/tests@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.tests .icon, ul.lessons .level_down_adjustment.tests .icon {
    background-image: url(/images/icons/assessments/level_adjustment/tests@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.tests .icon, ul.lessons .level_down_adjustment.tests .icon {
    background-image: url(/images/icons/assessments/level_adjustment/tests@3x.png);
  }
}

/* line 29, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.tests .details, ul.lessons .level_down_adjustment.tests .details {
  background-color: rgba(208, 120, 43, 0.5);
}

/* line 20, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.videos .title, ul.lessons .level_down_adjustment.videos .title {
  color: #b48c69;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.videos .icon, ul.lessons .level_down_adjustment.videos .icon {
    background-image: url(/images/icons/assessments/level_adjustment/videos@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.videos .icon, ul.lessons .level_down_adjustment.videos .icon {
    background-image: url(/images/icons/assessments/level_adjustment/videos@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.videos .icon, ul.lessons .level_down_adjustment.videos .icon {
    background-image: url(/images/icons/assessments/level_adjustment/videos@3x.png);
  }
}

/* line 29, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.videos .details, ul.lessons .level_down_adjustment.videos .details {
  background-color: rgba(90, 133, 242, 0.5);
}

/* line 20, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.speaking .title, ul.lessons .level_down_adjustment.speaking .title {
  color: #d07388;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.speaking .icon, ul.lessons .level_down_adjustment.speaking .icon {
    background-image: url(/images/icons/assessments/level_adjustment/speaking@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.speaking .icon, ul.lessons .level_down_adjustment.speaking .icon {
    background-image: url(/images/icons/assessments/level_adjustment/speaking@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.speaking .icon, ul.lessons .level_down_adjustment.speaking .icon {
    background-image: url(/images/icons/assessments/level_adjustment/speaking@3x.png);
  }
}

/* line 29, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.speaking .details, ul.lessons .level_down_adjustment.speaking .details {
  background-color: rgba(232, 117, 16, 0.5);
}

/* line 20, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.writing .title, ul.lessons .level_down_adjustment.writing .title {
  color: #ae85d8;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.writing .icon, ul.lessons .level_down_adjustment.writing .icon {
    background-image: url(/images/icons/assessments/level_adjustment/writing@1x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.writing .icon, ul.lessons .level_down_adjustment.writing .icon {
    background-image: url(/images/icons/assessments/level_adjustment/writing@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  /* line 23, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
  ul.lessons .level_up_adjustment.writing .icon, ul.lessons .level_down_adjustment.writing .icon {
    background-image: url(/images/icons/assessments/level_adjustment/writing@3x.png);
  }
}

/* line 29, app/assets/stylesheets/pages/advice/_level_adjustment.scss */
ul.lessons .level_up_adjustment.writing .details, ul.lessons .level_down_adjustment.writing .details {
  background-color: rgba(179, 52, 176, 0.5);
}

/* line 1, app/assets/stylesheets/application/_container.scss */
.container {
  display: grid;
  min-height: 100%;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  background-color: none;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1em;
}

/* line 26, app/assets/stylesheets/application/_container.scss */
.container:after {
  content: '';
  display: block;
  grid-row: 1;
  grid-column: 1;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--menu-background);
  z-index: 1;
}

/* line 1, app/assets/stylesheets/application/_nav.scss */
nav {
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: space-between;
}

/* line 10, app/assets/stylesheets/application/_nav.scss */
nav .links {
  display: flex;
}

/* line 14, app/assets/stylesheets/application/_nav.scss */
nav .utils {
  display: flex;
}

/* line 18, app/assets/stylesheets/application/_nav.scss */
nav a {
  display: inline-block;
  color: var(--nav-link-color);
  text-decoration: none;
  text-align: center;
  padding: 1em;
}

/* line 25, app/assets/stylesheets/application/_nav.scss */
nav a:hover {
  background-color: var(--nav-link-hover-bg) !important;
  cursor: pointer;
}

/* line 30, app/assets/stylesheets/application/_nav.scss */
nav a:focus {
  color: color-mix(in srgb, var(--nav-link-color), black 10%);
}

/* line 34, app/assets/stylesheets/application/_nav.scss */
nav a.back {
  position: relative;
  padding-left: 2em;
}

/* line 38, app/assets/stylesheets/application/_nav.scss */
nav a.back:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0.5em;
  width: 1em;
  height: 100%;
  background: url(/assets/icons/back_chevron.svg) center no-repeat;
}

/* line 50, app/assets/stylesheets/application/_nav.scss */
nav .search {
  display: grid;
  align-items: center;
}

/* line 54, app/assets/stylesheets/application/_nav.scss */
nav .search input {
  background-image: url(/assets/search_icon_white.svg);
  background-repeat: no-repeat;
  background-position: center;
  appearance: none;
  border-radius: 1.2em;
  border: none;
  color: var(--nav-link-color);
  font-size: 1.2em;
  vertical-align: middle;
  outline: 0;
  padding: 0.2em;
  padding-left: 2em;
  width: 2em;
  cursor: pointer;
  background-color: transparent;
}

/* line 71, app/assets/stylesheets/application/_nav.scss */
nav .search input.active {
  cursor: text;
  background-color: var(--bg-input-active);
  background-position: left;
  background-position: 10px;
}

/* line 78, app/assets/stylesheets/application/_nav.scss */
nav .search input:hover {
  background-color: var(--nav-sub-link-hover-bg);
}

/* line 84, app/assets/stylesheets/application/_nav.scss */
nav .sub-nav {
  position: relative;
  text-align: right;
}

/* line 88, app/assets/stylesheets/application/_nav.scss */
nav .sub-nav .heading {
  background: url(/assets/icons/extras.svg) center no-repeat;
  text-indent: -9999px;
  background-size: 1.5em;
  width: 3em;
}

/* line 95, app/assets/stylesheets/application/_nav.scss */
nav .sub-nav .items {
  display: none;
  position: absolute;
  background-color: var(--nav-sub-bg);
  width: 10em;
  right: 0;
}

/* line 102, app/assets/stylesheets/application/_nav.scss */
nav .sub-nav .items a {
  display: block;
  border-bottom: 1px solid var(--nav-sub-border);
  padding: 1em;
  text-align: left;
}

/* line 108, app/assets/stylesheets/application/_nav.scss */
nav .sub-nav .items a:hover {
  background-color: var(--nav-sub-link-hover-bg) !important;
}

/* line 113, app/assets/stylesheets/application/_nav.scss */
nav .sub-nav .items:last-child {
  border: 0;
}

/* line 119, app/assets/stylesheets/application/_nav.scss */
nav .sub-nav:hover .items, nav .sub-nav:active .items {
  display: grid;
}

/* line 125, app/assets/stylesheets/application/_nav.scss */
nav .debug-toggle {
  background: url(/assets/icons/debug.png) center no-repeat;
  background-size: 1.5em;
  height: 100%;
  width: 3em;
}

/* line 132, app/assets/stylesheets/application/_nav.scss */
nav .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  padding: 1em;
  border: 0;
  color: var(--nav-link-color);
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

/* line 145, app/assets/stylesheets/application/_nav.scss */
nav .theme-toggle .theme-toggle__icon {
  font-size: 1.3em;
  line-height: 1;
}

/* line 150, app/assets/stylesheets/application/_nav.scss */
nav .theme-toggle:hover {
  background-color: var(--nav-link-hover-bg) !important;
}

/* line 62, app/assets/stylesheets/application.css.scss */
body {
  height: 100%;
}