@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes blur-in {
  0% {
    filter: url("#blur-10");
  }
  10% {
    filter: url("#blur-9");
  }
  20% {
    filter: url("#blur-8");
  }
  30% {
    filter: url("#blur-7");
  }
  40% {
    filter: url("#blur-6");
  }
  50% {
    filter: url("#blur-5");
  }
  60% {
    filter: url("#blur-4");
  }
  70% {
    filter: url("#blur-3");
  }
  80% {
    filter: url("#blur-2");
  }
  90% {
    filter: url("#blur-1");
  }
  100% {
    filter: url("#blur-0");
  }
}

@keyframes blur-out {
  0% {
    filter: url("#blur-0");
  }
  10% {
    filter: url("#blur-1");
  }
  20% {
    filter: url("#blur-2");
  }
  30% {
    filter: url("#blur-3");
  }
  40% {
    filter: url("#blur-4");
  }
  50% {
    filter: url("#blur-5");
  }
  60% {
    filter: url("#blur-6");
  }
  70% {
    filter: url("#blur-7");
  }
  80% {
    filter: url("#blur-8");
  }
  90% {
    filter: url("#blur-9");
  }
  100% {
    filter: url("#blur-10");
  }
}
/* Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/**** GENERAL [optional] NICENESS ****/
/* Zero-out "matter of taste" styles (Ivan) */
/* line 8, app/assets/stylesheets/application/reset.scss */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Disable text selection for UI... (Ivan) */
/* line 19, app/assets/stylesheets/application/reset.scss */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

/* ...but keep selection enabled for text! (Ivan) */
/* line 29, app/assets/stylesheets/application/reset.scss */
p,
p *,
em,
em *,
input,
textarea,
.selectable,
.selectable *,
[contentEditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  cursor: inherit;
}

/* Editable elements deserve a text cursor (Ivan) */
/* line 50, app/assets/stylesheets/application/reset.scss */
input, input.selectable, .selectable input,
textarea,
textarea.selectable, .selectable textarea,
[contentEditable],
.selectable[contentEditable], .selectable [contentEditable] {
  cursor: text;
}

/* Links and inputs deserve a pointer (Ivan) */
/* line 69, app/assets/stylesheets/application/reset.scss */
a, a *, a.selectable, a.selectable *, .selectable a, .selectable a *,
label,
label *,
label.selectable,
label.selectable *, .selectable label, .selectable label *,
button,
button *,
button.selectable,
button.selectable *, .selectable button, .selectable button *,
input[type="button"],
input[type="button"] *,
input.selectable[type="button"],
input.selectable[type="button"] *, .selectable input[type="button"], .selectable input[type="button"] *,
input[type="checkbox"],
input[type="checkbox"] *,
input.selectable[type="checkbox"],
input.selectable[type="checkbox"] *, .selectable input[type="checkbox"], .selectable input[type="checkbox"] *,
input[type="file"],
input[type="file"] *,
input.selectable[type="file"],
input.selectable[type="file"] *, .selectable input[type="file"], .selectable input[type="file"] *,
input[type="image"],
input[type="image"] *,
input.selectable[type="image"],
input.selectable[type="image"] *, .selectable input[type="image"], .selectable input[type="image"] *,
input[type="radio"],
input[type="radio"] *,
input.selectable[type="radio"],
input.selectable[type="radio"] *, .selectable input[type="radio"], .selectable input[type="radio"] *,
input[type="reset"],
input[type="reset"] *,
input.selectable[type="reset"],
input.selectable[type="reset"] *, .selectable input[type="reset"], .selectable input[type="reset"] *,
input[type="submit"],
input[type="submit"] *,
input.selectable[type="submit"],
input.selectable[type="submit"] *, .selectable input[type="submit"], .selectable input[type="submit"] *,
select,
select *,
select.selectable,
select.selectable *, .selectable select, .selectable select * {
  cursor: pointer;
}

/* Style links like their surrounding content (Ivan) */
/* line 77, app/assets/stylesheets/application/reset.scss */
a {
  color: inherit;
  text-decoration: none;
}

/* Embedded contexts should be big and beefy! (Ivan) */
/* line 84, app/assets/stylesheets/application/reset.scss */
iframe,
object,
canvas,
progress,
video {
  display: block;
}

/* Remove the outline around GUI (Ivan) */
/* line 94, app/assets/stylesheets/application/reset.scss */
input:not([type="checkbox"]),
select,
textarea {
  outline: 0;
}

/* Remove the styling from fieldsets (Ivan) */
/* line 102, app/assets/stylesheets/application/reset.scss */
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/**** BEST PRACTICES ****/
/* Include padding and borders in width calculations (Paul Irish: paulirish.com/2012/box-sizing-border-box-ftw) */
/* line 113, app/assets/stylesheets/application/reset.scss */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove the 2px border around iframes (Ivan) */
/* line 121, app/assets/stylesheets/application/reset.scss */
iframe {
  border: 0;
}

/**** CROSS-BROWSER STANDARDIZATION ****/
/* Prevent modern browsers from displaying audio without controls. */
/* line 130, app/assets/stylesheets/application/reset.scss */
audio:not([controls]) {
  display: none;
}

/* Remove those annoying link glows */
/* line 136, app/assets/stylesheets/application/reset.scss */
a:active,
a:hover {
  outline: 0;
}

/* Don't default to bolder in Firefox, Safari, and Chrome */
/* line 143, app/assets/stylesheets/application/reset.scss */
b,
strong {
  font-weight: bold;
}

/* Standarize h1 values within section and article contexts in Firefox, Safari, and Chrome. */
/* line 150, app/assets/stylesheets/application/reset.scss */
h1 {
  font-size: 2em;
}

/* Fix inconsistent and variable font size in all browsers. */
/* line 156, app/assets/stylesheets/application/reset.scss */
small {
  font-size: 80%;
}

/* Prevent `sub` and `sup` affecting `line-height` in all browsers. */
/* line 162, app/assets/stylesheets/application/reset.scss */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/* line 170, app/assets/stylesheets/application/reset.scss */
sup {
  top: -.5em;
}

/* line 174, app/assets/stylesheets/application/reset.scss */
sub {
  bottom: -.25em;
}

/* Address differences between Firefox and other browsers. */
/* line 180, app/assets/stylesheets/application/reset.scss */
hr {
  height: 0;
}

/* Contain overflow in all browsers. */
/* line 186, app/assets/stylesheets/application/reset.scss */
pre {
  overflow: auto;
}

/* Address odd `em`-unit font size rendering in all browsers. */
/* line 192, app/assets/stylesheets/application/reset.scss */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* 1. Correct color not being inherited. Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox, Safari, and Chrome.
 */
/* line 205, app/assets/stylesheets/application/reset.scss */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/* Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
/* line 221, app/assets/stylesheets/application/reset.scss */
button,
select {
  text-transform: none;
}

/* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type `input` and others.
 */
/* line 231, app/assets/stylesheets/application/reset.scss */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/* Re-set default cursor for disabled elements. */
/* line 241, app/assets/stylesheets/application/reset.scss */
button[disabled],
html input[disabled] {
  cursor: default;
}

/* Remove inner padding and border in Firefox */
/* line 248, app/assets/stylesheets/application/reset.scss */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Address Firefox setting `line-height` on `input` using `!important` in the UA stylesheet. */
/* line 256, app/assets/stylesheets/application/reset.scss */
input {
  line-height: normal;
}

/* Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
/* line 265, app/assets/stylesheets/application/reset.scss */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/* Preserve spacing between table cells. */
/* line 272, app/assets/stylesheets/application/reset.scss */
table {
  border-collapse: separate;
  border-spacing: 0;
}

/* line 278, app/assets/stylesheets/application/reset.scss */
td,
th {
  padding: 0;
}

/* line 289, app/assets/stylesheets/application/reset.scss */
html {
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
}

/* line 295, app/assets/stylesheets/application/reset.scss */
body {
  margin: 0;
  touch-action: manipulation;
}

/* line 300, app/assets/stylesheets/application/reset.scss */
img,
video {
  vertical-align: middle;
}
/* line 3, app/assets/stylesheets/application/ids/banner.scss */
#banner {
  position: relative;
  padding: .8em .5em;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #ffb700;
  background: #060613;
  z-index: 5000;
}
/* line 3, app/assets/stylesheets/application/ids/header.scss */
.leaving-home #header {
  animation: fade-in .6s .4s both;
}

/* line 4, app/assets/stylesheets/application/ids/header.scss */
.hide-header #header {
  display: none;
}

/* line 6, app/assets/stylesheets/application/ids/header.scss */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: linear-gradient(to right, #384c94, #406abf, #384c94);
  z-index: 2000;
}

/* line 15, app/assets/stylesheets/application/ids/header.scss */
#header .header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: linear-gradient(to right, #384c94, #4b73c3, #384c94);
  box-shadow: 0 2px 6px rgba(56, 76, 148, 0.5);
  border-bottom: 1px solid rgba(56, 76, 148, 0.6);
  opacity: 0;
  z-index: 2001;
  transition: opacity .3s;
}

/* line 29, app/assets/stylesheets/application/ids/header.scss */
#header[lift] .header-bg {
  opacity: 1;
}

/* line 33, app/assets/stylesheets/application/ids/header.scss */
#header .inner {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  overflow-x: auto;
  z-index: 2002;
}

@media (max-width: 560px) {
  /* line 33, app/assets/stylesheets/application/ids/header.scss */
  #header .inner {
    font-size: .9em;
  }
}

@media (max-width: 400px) {
  /* line 33, app/assets/stylesheets/application/ids/header.scss */
  #header .inner {
    font-size: .8em;
  }
}

/* line 48, app/assets/stylesheets/application/ids/header.scss */
#header .inner .logo {
  display: inline-block;
  margin: 0 1.5em;
  text-decoration: none;
  opacity: 1;
}

/* line 54, app/assets/stylesheets/application/ids/header.scss */
#header .inner .logo:hover {
  opacity: .8;
}

/* line 56, app/assets/stylesheets/application/ids/header.scss */
#header .inner .logo svg {
  vertical-align: middle;
}

@media (max-width: 480px) {
  /* line 56, app/assets/stylesheets/application/ids/header.scss */
  #header .inner .logo svg {
    width: 36px;
  }
}

/* line 62, app/assets/stylesheets/application/ids/header.scss */
#header .inner .half {
  flex: 1 1 50%;
}

/* line 65, app/assets/stylesheets/application/ids/header.scss */
#header .inner .half.left {
  text-align: right;
}

/* line 66, app/assets/stylesheets/application/ids/header.scss */
#header .inner .half.right {
  text-align: left;
}

/* line 69, app/assets/stylesheets/application/ids/header.scss */
#header .inner .half .buttons {
  text-align: center;
  flex-flow: row nowrap;
  display: inline-flex;
  flex-flow: row wrap;
  border-radius: 4px;
}

/* line 78, app/assets/stylesheets/application/ids/header.scss */
#header .inner .half .buttons .button {
  flex: 0 0 auto;
  width: auto;
  padding: .5em 1em;
  margin-top: 0;
  margin-bottom: 0;
  min-width: 11em;
  border-radius: 0;
}

/* line 86, app/assets/stylesheets/application/ids/header.scss */
#header .inner .half .buttons .button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* line 91, app/assets/stylesheets/application/ids/header.scss */
#header .inner .half .buttons .button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

@media (max-width: 480px) {
  /* line 78, app/assets/stylesheets/application/ids/header.scss */
  #header .inner .half .buttons .button {
    min-width: 0;
    padding: .5em .4em;
  }
}

/* line 104, app/assets/stylesheets/application/ids/header.scss */
#header .inner .author {
  float: right;
  margin-right: 4px;
}

@media (max-width: 700px) {
  /* line 104, app/assets/stylesheets/application/ids/header.scss */
  #header .inner .author {
    display: none;
  }
}

/* line 116, app/assets/stylesheets/application/ids/header.scss */
.has-admin #header .right.half .buttons .button,
.possessed #header .right.half .buttons .button {
  min-width: 0;
}

/* line 119, app/assets/stylesheets/application/ids/header.scss */
.has-admin #header .right.half .buttons .button.depossess,
.possessed #header .right.half .buttons .button.depossess {
  padding-left: .3em;
  padding-right: .6em;
}

@media (max-width: 480px) {
  /* line 119, app/assets/stylesheets/application/ids/header.scss */
  .has-admin #header .right.half .buttons .button.depossess,
.possessed #header .right.half .buttons .button.depossess {
    padding-left: 0em;
    padding-right: .2em;
  }
  /* line 125, app/assets/stylesheets/application/ids/header.scss */
  .has-admin #header .right.half .buttons .button.depossess span,
.possessed #header .right.half .buttons .button.depossess span {
    display: none;
  }
}
/* line 1, app/assets/stylesheets/application/ids/page.scss */
#page {
  position: relative;
  width: 100%;
  transition: opacity .3s linear;
}
/* line 3, app/assets/stylesheets/application/ids/popover.scss */
#popover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding-top: calc(50vh - 10em);
  font-size: 16px;
}

/* line 20, app/assets/stylesheets/application/ids/popover.scss */
#popover > div {
  max-width: 34em;
  margin: 1em auto;
  border-radius: 8px;
  padding: 2em;
  color: white;
  background-color: #384c94;
  line-height: 1.3;
}

/* line 30, app/assets/stylesheets/application/ids/popover.scss */
#popover h2 {
  margin: 0;
  font-size: 1.5em;
}

/* line 35, app/assets/stylesheets/application/ids/popover.scss */
#popover p {
  margin: 1em 0;
  text-align: left;
}

/* line 40, app/assets/stylesheets/application/ids/popover.scss */
#popover a {
  text-decoration: underline;
  color: #ffa366;
}

/* line 45, app/assets/stylesheets/application/ids/popover.scss */
#popover button {
  color: white;
}
/* line 3, app/assets/stylesheets/application/ids/toasts.scss */
#toasts {
  position: fixed;
  top: 5em;
  right: 0;
  z-index: 2001;
  pointer-events: none;
}

/* line 10, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .type {
  position: relative;
  margin-bottom: .4em;
}

/* line 14, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .type * {
  cursor: pointer;
}

/* line 16, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .type .message {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: calc(100vw + 9em);
  margin-right: -10em;
  padding: .6em;
  padding-right: 11em;
  border-radius: 5px;
  -webkit-mask-image: paint(superellipse);
          mask-image: paint(superellipse);
  text-align: left;
  color: black;
  background: linear-gradient(to right, white, #e9eaed);
  transform: translateX(100%);
  transition: transform 0.7s var(--delay) cubic-bezier(0.4, 0.01, 0.4, -0.2);
  animation: blur-out 0.3s calc(.2s + var(--delay)) linear;
  will-change: transform, filter;
}

@media (prefers-color-scheme: dark) {
  /* line 16, app/assets/stylesheets/application/ids/toasts.scss */
  #toasts .type .message {
    color: white;
    background: linear-gradient(to right, #363a49, #1e2138);
  }
}

/* line 40, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .type .icon {
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  padding: 4px;
  border-radius: 3px;
  -webkit-mask-image: paint(superellipse);
          mask-image: paint(superellipse);
}

/* line 48, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .type .icon::after {
  width: 100%;
  height: 100%;
}

/* line 54, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .type .text {
  margin-left: .5em;
}

/* line 59, app/assets/stylesheets/application/ids/toasts.scss */
#toasts[fade-in] {
  pointer-events: auto;
}

/* line 61, app/assets/stylesheets/application/ids/toasts.scss */
#toasts[fade-in] .message {
  transform: translateX(0%);
  transition: transform 0.7s cubic-bezier(0.7, 1.2, 0, 0.99);
  animation: blur-in .1s linear backwards;
  transition-delay: calc(.2s + var(--delay));
  animation-delay: calc(.2s + .22s + var(--delay));
}

/* line 70, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .success .icon {
  background-color: #15bc71;
  background-color: color(display-p3 0.28 0.81 0.5);
}

/* line 73, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .success .icon::after {
  content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="35" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"><path d="M20 100L75 155 185 45"/></svg>');
}

/* line 75, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .notice .icon {
  background-color: #ffb700;
  background-color: color(display-p3 1 0.74 0.2);
}

/* line 78, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .notice .icon::after {
  content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="25" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"><path d="M100 35 L100 165 M35 100 L165 100 M55 145 L145 55 M55 55 L145 145"/></svg>');
}

/* line 80, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .alert .icon {
  background-color: #ff8533;
  background-color: color(display-p3 1 0.5 0.2);
}

/* line 83, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .alert .icon::after {
  content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="45" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"><path d="M100 35 L100 110 M100 165 L100 165"/></svg>');
}

/* line 85, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .error .icon {
  background-color: #e83037;
  background-color: color(display-p3 0.95 0.25 0.25);
}

/* line 88, app/assets/stylesheets/application/ids/toasts.scss */
#toasts .error .icon::after {
  content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="30" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"><path d="M35 165 L165 35 M35 35 L165 165"/></svg>');
}
/* line 11, app/assets/stylesheets/artifact.scss */
html {
  width: 100%;
  height: 100%;
}

/* line 16, app/assets/stylesheets/artifact.scss */
body {
  height: 100%;
  margin: 0;
  touch-action: manipulation;
  padding-top: var(--header-height);
}

/* line 21, app/assets/stylesheets/artifact.scss */
body.hide-header {
  padding-top: 0;
}

/* line 24, app/assets/stylesheets/artifact.scss */
#page {
  height: 100%;
  padding-bottom: 0px;
}

/* line 29, app/assets/stylesheets/artifact.scss */
.language-picker {
  position: relative;
  text-align: center;
  background: #060613;
  color: white;
}

/* line 34, app/assets/stylesheets/artifact.scss */
.language-picker span {
  display: inline-block;
  padding: .5em;
}

/* line 38, app/assets/stylesheets/artifact.scss */
.language-picker a {
  text-decoration: underline;
}

/* line 43, app/assets/stylesheets/artifact.scss */
#page #quizzer-language-picker {
  height: auto;
}

/* line 47, app/assets/stylesheets/artifact.scss */
#lesson-ratings {
  position: relative;
  padding-bottom: calc(2vw + 1em);
  text-align: center;
  color: white;
  background-color: #363a49;
}

/* line 54, app/assets/stylesheets/artifact.scss */
#lesson-ratings select {
  font-size: 16px;
  padding: .4em .6em;
  border: 2px solid transparent;
  border-radius: 4px;
  line-height: 1.3;
  vertical-align: middle;
  color: #363a49;
  background-color: #e9eaed;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: .01px;
  text-overflow: '';
}

/* line 72, app/assets/stylesheets/artifact.scss */
#lesson-ratings select:hover, #lesson-ratings select:focus {
  background-color: #dbdde1;
}

/* line 73, app/assets/stylesheets/artifact.scss */
#lesson-ratings select:focus, #lesson-ratings select:active {
  border: 2px solid #7a8190;
}

/* line 76, app/assets/stylesheets/artifact.scss */
#lesson-ratings table {
  margin: 0 auto 0;
  border: none;
}

/* line 80, app/assets/stylesheets/artifact.scss */
#lesson-ratings table tr {
  background-color: transparent;
}

/* line 84, app/assets/stylesheets/artifact.scss */
#lesson-ratings table td {
  text-align: left;
  border: none;
}

@media (max-width: 600px) {
  /* line 84, app/assets/stylesheets/artifact.scss */
  #lesson-ratings table td {
    padding-left: .2em;
    padding-right: .2em;
  }
}

/* line 90, app/assets/stylesheets/artifact.scss */
#lesson-ratings table td:first-child {
  text-align: right;
  padding-left: 2.5em;
}

@media (max-width: 600px) {
  /* line 90, app/assets/stylesheets/artifact.scss */
  #lesson-ratings table td:first-child {
    padding-left: .2em;
  }
}

/* line 97, app/assets/stylesheets/artifact.scss */
#lesson-ratings table .status {
  display: inline-block;
  min-width: 1em;
  color: #ffb700;
}

/* line 104, app/assets/stylesheets/artifact.scss */
#lesson-ratings small {
  display: block;
  margin-top: 1em;
}

/* line 107, app/assets/stylesheets/artifact.scss */
#lesson-ratings small span {
  color: #ffb700;
}

/* line 111, app/assets/stylesheets/artifact.scss */
#header {
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  font-family: Lato, "Trebuchet MS", sans-serif;
  color: white;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* line 128, app/assets/stylesheets/artifact.scss */
#header button,
#header .button {
  display: inline-block;
  margin-top: .3em;
  margin-bottom: .3em;
  padding: .6em .8em;
  border: 2px solid transparent;
  outline: none;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  color: white;
  background-color: #507ed3;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/* line 146, app/assets/stylesheets/artifact.scss */
#header button + .button,
#header .button + .button {
  margin-left: 1px;
}

/* line 150, app/assets/stylesheets/artifact.scss */
#header button.active,
#header .button.active {
  background-color: #00a3a3;
}

/* line 152, app/assets/stylesheets/artifact.scss */
#header button.active:hover,
#header .button.active:hover {
  background-color: #009494;
}

/* line 155, app/assets/stylesheets/artifact.scss */
#header button:focus,
#header .button:focus {
  border-color: #363a49;
}

/* line 159, app/assets/stylesheets/artifact.scss */
#header button:hover,
#header .button:hover {
  background-color: #4375d0;
}

/* line 164, app/assets/stylesheets/artifact.scss */
#header .buttons {
  display: inline-block;
  vertical-align: middle;
}

@media (min-width: 500px) {
  /* line 164, app/assets/stylesheets/artifact.scss */
  #header .buttons {
    display: inline-flex;
    flex-flow: row wrap;
    border-radius: 4px;
  }
  /* line 173, app/assets/stylesheets/artifact.scss */
  #header .buttons > * {
    flex: 1 1 auto;
    border-radius: 0;
  }
  /* line 177, app/assets/stylesheets/artifact.scss */
  #header .buttons > *:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  /* line 182, app/assets/stylesheets/artifact.scss */
  #header .buttons > *:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}