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-width: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  min-height: 100%;
}

ol, ul {
  list-style-type: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "''";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, label, input, textarea, button, select {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: bold;
  color: #333;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

action, function, on, init, map-value, property, on-property-change, map-property {
  display: none;
}

body, label, input, textarea, button, select {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

h1 {
  font-size: 200%;
  font-weight: bold;
}

h2 {
  font-size: 180%;
  font-weight: bold;
}

h3 {
  font-size: 160%;
  font-weight: bold;
}

h4 {
  font-size: 140%;
  font-weight: bold;
}

h5 {
  font-size: 120%;
  font-weight: bold;
}

h6 {
  font-size: 100%;
  font-weight: bold;
}

input, textarea {
  border-radius: 5px;
  border-color: rgb(204, 204, 204);
  border-style: solid;
  border-width: 1px;
  padding: 5px 8px;
}

.hidden {
  display: none !important;
}

mjx-container[jax='CHTML'][display='true'] {
  margin-bottom: 4px !important;
}

[view~=vstack] {
  display: flex;
  flex-direction: column;
}

[view~=vstack][alignment=left] {
  align-items: flex-start;
}

[view~=vstack][alignment=center] {
  align-items: center;
}

[view~=vstack][alignment=right] {
  align-items: flex-end;
}

[view~=vstack] > [h-position=left] {
  align-self: flex-start;
}

[view~=vstack] > [h-position=center] {
  align-self: center;
}

[view~=vstack] > [h-position=right] {
  align-self: flex-end;
}

[view~=vstack] > [v-size=expand] {
  flex-grow: 1.0;
}

[view~=vstack] > [v-size=fixed] {
  flex-shrink: 0.0;
}

[view~=vstack] > [v-size=fraction] {
  flex-shrink: 0.0;
}

[view~=vstack] > [view~=vstack], [view~=vstack] > [view~=hstack], [view~=vstack] > [view~=zstack] {
  width: 100%;
}

[view~=vstack] > [h-size=expand] {
  width: 100%;
}

[view~=vstack] > [h-size=intrinsic] {
  width: unset;
}

[view~=vstack] > [v-size=expand] {
  align-self: stretch;
}

[view~=vstack] > [view~=spacer] {
  width: auto !important;
}

[view~=hstack] {
  display: flex;
  flex-direction: row;
}

[view~=hstack][alignment=top] {
  align-items: flex-start;
}

[view~=hstack][alignment=middle] {
  align-items: center;
}

[view~=hstack][alignment=bottom] {
  align-items: flex-end;
}

[view~=hstack] > [v-position=top] {
  align-self: flex-start;
}

[view~=hstack] > [v-position=middle] {
  align-self: center;
}

[view~=hstack] > [v-position=bottom] {
  align-self: flex-end;
}

[view~=hstack] > [h-size=expand] {
  flex-grow: 1.0;
}

[view~=hstack] > [h-size=fixed] {
  flex-shrink: 0.0;
}

[view~=hstack] > [h-size=fraction] {
  flex-shrink: 0.0;
}

[view~=hstack] > [view~=vstack], [view~=hstack] > [view~=zstack] {
  width: 100%;
}

[view~=hstack] > [v-size=expand] {
  align-self: stretch;
}

[view~=hstack] > [h-size=intrinsic] {
  width: unset;
}

[view~=hstack] > [h-size=expand] {
  width: 100%;
}

[view~=hstack] > [view~=spacer] {
  height: auto !important;
}

[view~=zstack] {
  position: relative;
}

[view~=zstack] > [zstack-overlay] {
  position: absolute;
}

[view~=zstack] > [h-size=expand] {
  width: 100%;
}

[view~=zstack] > [v-size=expand] {
  height: 100%;
}

[view~=spacer] {
  flex-shrink: 1.0;
  flex-grow: 1.0;
  align-self: stretch !important;
}

[view~=spacer][h-size=fixed] {
  flex-grow: 0.0;
}

[view~=spacer][h-size=fraction] {
  flex-grow: 0.0;
}

[view~=spacer][h-size=intrinsic] {
  flex-grow: 0.0;
}

[view~=spacer][v-size=fixed] {
  flex-grow: 0.0;
}

[view~=spacer][v-size=fraction] {
  flex-grow: 0.0;
}

[view~=spacer][v-size=intrinsic] {
  flex-grow: 0.0;
}

[view~=bordered-box] {
  border-radius: 5px;
  border-color: rgb(204, 204, 204);
  border-style: solid;
  border-width: 1px;
  background-color: rgb(252, 252, 252);
  padding: 20px;
}

[view~=content-column] > * {
  max-width: 996px;
  padding: 0px 16px;
}

[view~=action-button] {
  border-radius: 5px;
  border-color: rgb(204, 204, 204);
  border-style: solid;
  border-width: 1px;
  background-color: rgb(39, 86, 173);
  padding: 5px 8px;
  font-size: 14px;
  color: white;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.0;
}

[view~=action-button]:hover {
  background-color: rgb(23, 73, 165);
}

[view~=action-button]:active {
  background-color: rgb(39, 86, 173);
}

[view~=action-button].secondary {
  background-color: rgb(222, 226, 232);
  color: rgb(0, 0, 0);
}

[view~=action-button].secondary:active, [view~=action-button].secondary:hover, [view~=action-button].secondary.active {
  background-color: rgb(213, 219, 232);
}

[view~=action-button].inline {
  background-color: transparent;
  color: rgb(0, 0, 0);
  border: unset;
  margin: -5px 0px;
}

[view~=action-button].inline:active, [view~=action-button].inline:hover, [view~=action-button].inline.active {
  background-color: rgb(222, 226, 232);
}

[view~=action-button].destructive {
  background-color: rgb(224, 11, 11);
  color: white;
}

[view~=action-button].destructive:active, [view~=action-button].destructive:hover, [view~=action-button].destructive.active {
  background-color: rgb(224, 11, 11);
}

[view~=action-form] > input[type=submit].form-trigger {
  display: none;
}

[view~=fullscreen] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
}

[view~=navigation-bar] {
  background-color: rgb(239, 243, 249);
}

[view~=modal-container] {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
}

[view~=modal-container] > .background {
  pointer-events: none;
  background-color: black;
  opacity: 0.0;
}

[view~=internal-link] {
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

[view~=internal-link]:hover {
  text-decoration: underline;
}

[view~=internal-link].highlighted {
  text-decoration: underline;
  color: rgb(23, 73, 165);
}

[view~=modal-window] {
  position: absolute;
  top: 10%;
  left: 50%;
  margin: auto;
  width: 600px;
  min-height: 200px;
  max-height: 75%;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(136, 136, 136);
  border-radius: 5px;
  transform: translate(-50%, 100vh);
}

[view~=modal-form] .error-container {
  color: red;
}

[view~=loading-indicator] {
  position: relative;
  width: 20px;
  height: 20px;
}

@keyframes loading-indicator {
  to {
    transform: rotate(360deg);
  }
}

[view~=loading-indicator]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(204, 204, 204);
  border-top-color: rgb(0, 0, 0);
  animation: loading-indicator .6s linear infinite;
}

[view~=loading-bar] {
  position: relative;
  background-color: rgb(196, 210, 237);
  max-width: unset !important;
  overflow: hidden;
}

[view~=loading-bar].loading::before {
  content: "";
  position: absolute;
  background-color: rgb(98, 134, 201);
  top: 0;
  left: -50%;
  width: 40%;
  height: 100%;
  animation: loading-bar 1.5s linear infinite;
}

@keyframes loading-bar {
  0% {
    left: -40%;
  }

  50% {
    left: 20%;
    width: 80%;
  }

  100% {
    left: 100%;
    width: 100%;
  }
}

[view~=modal-container] {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
}

[view~=modal-container] > .background {
  pointer-events: none;
  background-color: black;
  opacity: 0.0;
}

[view~=modal-navigation] {
  overflow: hidden;
}

[view~=modal-navigation][data-back-button-state=hidden] > .top-bar > button:first-child {
  visibility: hidden;
}

[view~=modal-navigation] > .top-bar {
  padding: 5px 8px;
  border-bottom-color: rgb(238, 238, 238);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: rgb(250, 250, 250);
}

[view~=modal-navigation] > .top-bar > h2 {
  font-weight: bold;
  font-size: 16px;
}

[view~=modal-navigation] > .scroll-container {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px;
}

[view~=modal-navigation] > .bottom-bar {
  padding: 5px 16px;
  border-top-color: rgb(238, 238, 238);
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: rgb(250, 250, 250);
}

[view~=modal-navigation-button] {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 2px;
  border: unset;
  background: unset;
  cursor: pointer;
}

[view~=modal-navigation-button]::before, [view~=modal-navigation-button]::after {
  position: absolute;
  content: ' ';
  background-color: rgb(51, 51, 51);
}

[view~=modal-navigation-button].secondary::before, [view~=modal-navigation-button].secondary::after {
  background-color: rgb(170, 170, 170);
}

[view~=modal-navigation-button].close::before, [view~=modal-navigation-button].close::after {
  left: 45%;
  top: 10%;
  height: 80%;
  width: 2px;
}

[view~=modal-navigation-button].close::before {
  transform: rotate(45deg);
}

[view~=modal-navigation-button].close::after {
  transform: rotate(-45deg);
}

[view~=modal-navigation-button].back::before, [view~=modal-navigation-button].back::after {
  left: 45%;
  height: 40%;
  width: 2px;
}

[view~=modal-navigation-button].back::before {
  transform: rotate(45deg);
  top: 19%;
}

[view~=modal-navigation-button].back::after {
  transform: rotate(-45deg);
  top: 44%;
}

[view~=modal-dialog] {
  position: absolute;
  top: 20%;
  left: 50%;
  margin: auto;
  width: 300px;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(136, 136, 136);
  border-radius: 5px;
  transform: translate(-50%, 0);
  padding: 16px 24px;
}

[view~=modal-dialog] > h5 {
  font-weight: bold;
  font-size: 100%;
  margin-bottom: 4px;
}

[view~=modal-dialog] > .bottom-bar {
  margin-top: 16px;
  margin-bottom: 4px;
}

[view~=modal-dialog] > .bottom-bar > [view~=action-button] {
  padding: 5px 24px;
}

@keyframes modal-dialog-show {
  0% {
    transform: translate(-50%, 0) scale(1.5);
  }

  100% {
    transform: translate(-50%, 0);
  }
}

[view~=data-table-header] {
  font-weight: bold;
}

[view~=data-table-row] > * {
  line-break: anywhere;
}

[view~=data-table-row] > [h-size=fixed] {
  flex-shrink: 0.0;
  flex-grow: 0.0;
}

[view~=data-table-row-separator] {
  background-color: rgb(222, 226, 232);
  width: 100%;
  height: 1px;
  margin: 4px 0px;
}

[view~=data-table-row-separator].header {
  height: 2px;
}

[view~=sortable-list].controls-top > [view~=sortable-list-row] > [view~=hstack] > [view~=sortable-list-drag-item] {
  height: 16px;
}

[view~=sortable-list].controls-top > [view~=sortable-list-row] > [view~=hstack] > [view~=sortable-list-delete-button] {
  height: 16px;
}

[view~=sortable-list].colors-plain {
  background-color: rgb(243, 243, 243);
}

[view~=sortable-list].colors-plain > [view~=sortable-list-row] {
  background-color: white;
}

[view~=sortable-list-row] {
  padding: 0px;
  background-color: rgb(243, 243, 243);
}

[view~=sortable-list-row]:not(:last-of-type) {
  margin-bottom: 1px;
}

[view~=sortable-list-row] > [view~=hstack] {
  padding: 4px 0px;
}

[view~=sortable-list-row].over-top > [view~=sortable-list-separator].top {
  visibility: visible;
}

[view~=sortable-list-row].over-bottom > [view~=sortable-list-separator].bottom {
  visibility: visible;
}

[view~=sortable-list-row]:last-child {
  margin-bottom: 0px;
}

[view~=sortable-list-row] .content {
  align-self: center;
}

[view~=sortable-list-separator] {
  position: relative;
  height: 2px;
  width: 100%;
  background-color: rgb(23, 73, 165);
  visibility: hidden;
}

[view~=sortable-list-separator].top {
  top: -1px;
}

[view~=sortable-list-separator].bottom {
  top: 2px;
}

[view~=sortable-list-drag-item] {
  height: 32px;
  min-width: 32px;
  cursor: move;
  background-image: url(drag.GQ7MGRHY.svg);
  background-repeat: no-repeat;
  background-position: center center;
}

[view~=sortable-list-delete-button] {
  height: 32px;
  width: 32px;
  cursor: move;
  background-image: url(delete.IAYJ4ERV.svg);
  background-repeat: no-repeat;
  background-position: center center;
  border: unset;
  background-color: unset;
  cursor: pointer;
}

[view~=header-bar] {
  border-bottom-color: rgb(222, 226, 232);
  border-bottom-style: solid;
  border-bottom-width: 2px;
  padding-bottom: 8px;
}

[view~=header-bar] > h1 {
  font-size: 16px;
}

[view~=context-menu] {
  position: absolute;
  right: 0px;
  top: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(213, 219, 232);
  border-radius: 4px;
  background-color: white;
  padding: 4px 0px;
  min-width: 150px;
  z-index: 1;
  box-shadow: 0px 8px 24px 0px rgba(150, 150, 150, 0.2);
}

[view~=menu-button] > [view~=menu-container] {
  position: relative;
  display: none;
}

[view~=menu-item] {
  border: unset;
  background-color: white;
  padding: 8px 12px;
  font-size: 100%;
  color: rgb(0, 0, 0);
  cursor: pointer;
  width: 100%;
  text-align: left;
  line-height: 1.0;
}

[view~=menu-item]:hover {
  background-color: rgb(23, 73, 165);
  color: white;
}

[view~=menu-separator] {
  position: relative;
  height: 5px;
  width: 100%;
}

[view~=menu-separator]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
  height: 1px;
  background-color: rgb(213, 219, 232);
  transform: translateY(-50%);
}

[view~=navigation-item] > [view~=zstack] > :first-child {
  font-weight: 500.0;
  visibility: hidden;
}

[view~=navigation-item] > [view~=zstack] > :nth-child(2) {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

[view~=navigation-item] > [view~=zstack] > a {
  display: flex;
  gap: 0;
  justify-content: space-around;
  padding: 4px 8px;
  margin: 6px 0px;
  color: black;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

[view~=navigation-item] > [view~=zstack] > a:hover {
  background-color: rgb(222, 226, 232);
}

[view~=navigation-item] > .marker-container {
  position: relative;
  align-self: stretch;
  margin: 0px 4px;
}

[view~=navigation-item].selected .selection-marker {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 2px;
  background-color: rgb(23, 73, 165);
}

[view~=navigation-item].selected > [view~=zstack] > :first-child {
  visibility: visible;
}

[view~=list-view-frame] {
  border-style: solid;
  border-width: 1px;
  border-color: rgb(213, 219, 232);
  border-radius: 5px;
}

[view~=list-view-frame] > .header {
  width: 100%;
  background-color: rgb(239, 243, 249);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

[view~=list-view-frame] > * {
  padding: 8px 12px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: rgb(213, 219, 232);
}

[view~=list-view-frame] > *:first-child {
  border-top: unset;
}

[view~=list-view-empty-state] > h4 {
  font-weight: bold;
  color: rgb(213, 219, 232);
}

[view~=body-text][data-style=bold] {
  font-weight: bold;
}

[view~=body-text][data-style=secondary] {
  color: rgb(136, 136, 136);
}

[view~=caption-text] {
  font-size: 12px;
  line-height: 1.4;
}

[view~=caption-text][data-style=regular] {
  color: rgb(102, 102, 102);
}

[view~=caption-text][data-style=bold] {
  color: rgb(102, 102, 102);
  font-weight: bold;
}

[view~=caption-text][data-style=secondary] {
  color: rgb(153, 153, 153);
}

[view~=empty-state] {
  background-image: url(empty.RB7HIAJ6.svg);
  background-size: 100% 100%;
}

[view~=empty-state] > h4 {
  font-weight: bold;
  color: rgb(213, 219, 232);
}

[view~=select-button] {
  border-radius: 5px;
  border-color: rgb(204, 204, 204);
  border-style: solid;
  border-width: 1px;
  background-color: rgb(222, 226, 232);
  padding: 3px 3px;
  font-size: 14px;
  color: rgb(0, 0, 0);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.0;
}

[view~=form-field-label] {
  white-space: nowrap;
}

[view~=alternative-content] > :not(.selected) {
  display: none;
}

[view~=collapsible] > [view~=collapsible-view-content-container] {
  overflow: hidden;
}

[view~=collapsible].collapsed > [view~=collapsible-view-header] > [view~=collapsible-view-toggle-button]::before {
  transform: rotate(0deg);
}

[view~=collapsible-view-toggle-button] {
  position: relative;
  height: 24px;
  min-width: 16px;
  cursor: move;
  border: unset;
  background-color: unset;
  cursor: pointer;
}

[view~=collapsible-view-toggle-button]::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transform: rotate(90deg);
  transition: transform 0.15s;
  transform-origin: center;
  background: url(triangle_right.UGGTR5R3.svg) no-repeat center center;
}

[view~=divider] {
  border: unset;
  height: 1px;
  background-color: rgb(238, 238, 238);
}

[view~=small-form-input] > :first-child > label {
  text-transform: uppercase;
  font-weight: 500.0;
  color: rgb(51, 51, 51);
  font-size: 10px;
  margin-left: 4px;
}

[view~=small-form-input] > input {
  background-color: white;
}

[view~=form-field-label] {
  white-space: nowrap;
}

[view~=course-learning-frame] {
  position: absolute;
  top: 10%;
  left: 50%;
  margin: auto;
  width: 100%;
  max-width: 720px;
  min-height: 480px;
  max-height: 85%;
  background-color: white;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(136, 136, 136);
  border-color: rgb(148, 159, 179);
  border-radius: 5px;
  opacity: 0.0;
  transform: translate(-50%, 0);
}

[view~=course-learning-frame] > .content {
  width: 100%;
  padding: 40px;
}

[view~=course-learning-frame] > .top-bar {
  padding: 8px;
  color: rgb(170, 170, 170);
}

[view~=course-learning-frame] > [view~=course-learning-bottom-bar] {
  padding: 8px;
  color: rgb(170, 170, 170);
}

[view~=course-learning-frame] [view~=course-learning-result] .emoji {
  font-size: 40px;
}

[view~=course-learning-frame] [view~=course-learning-result] h2 {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

[view~=learning-progress-item] > [view~=zstack] {
  height: 24px;
}

[view~=learning-progress-item] > [view~=zstack] > :not(:first-child) {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  transform-origin: center;
}

[view~=learning-progress-item] > [view~=body-text] {
  line-height: 1.0;
  min-width: 27px;
}

[view~=learning-progress-item].two > [view~=body-text] {
  min-width: 18px;
}

[view~=progress-circle] {
  width: 24px;
  height: 24px;
  position: relative;
  border-radius: 4px;
}

[view~=progress-circle]::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 6px;
  left: 6px;
  border-radius: 50%;
  opacity: 0.4;
}

[view~=progress-circle] > .inner {
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 6px;
  left: 6px;
  border-radius: 50%;
}

[view~=progress-circle]::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 8px;
  left: 8px;
  border-radius: 50%;
}

[view~=progress-circle].inactive {
  background-color: rgb(240, 240, 240);
}

[view~=progress-circle].inactive::before {
  background-color: rgb(170, 170, 170);
}

[view~=progress-circle].inactive::after {
  background-color: rgb(240, 240, 240);
}

[view~=progress-circle].active {
  background-color: rgb(170, 170, 170);
}

[view~=progress-circle].active::before {
  background-color: rgb(240, 240, 240);
}

[view~=progress-circle].active::after {
  background-color: rgb(170, 170, 170);
}

[view~=progress-circle].wrong {
  background-color: rgb(188, 0, 0);
}

[view~=progress-circle].wrong::before {
  background-color: white;
}

[view~=progress-circle].wrong::after {
  background-color: rgb(188, 0, 0);
}

[view~=progress-circle].correct {
  background-color: rgb(23, 186, 0);
}

[view~=progress-circle].correct::before {
  background-color: white;
}

[view~=progress-circle].correct::after {
  background-color: rgb(23, 186, 0);
}

[view~=course-learning-queue] {
  height: 24px;
  position: relative;
  border-radius: 4px;
  padding: 4px;
}

[view~=course-learning-queue] > div {
  width: 2px;
  height: 12px;
}

[view~=course-learning-queue].inactive {
  background-color: rgb(240, 240, 240);
}

[view~=course-learning-queue].inactive > div {
  background-color: rgb(170, 170, 170);
}

[view~=course-learning-queue].inactive > .invisible {
  opacity: 0.4;
}

[view~=course-learning-queue].active {
  background-color: rgb(170, 170, 170);
}

[view~=course-learning-queue].active > div {
  background-color: rgb(240, 240, 240);
}

[view~=course-learning-queue].active > .invisible {
  opacity: 0.4;
}

[view~=course-learning-queue].wrong {
  background-color: rgb(188, 0, 0);
}

[view~=course-learning-queue].wrong > div {
  background-color: white;
}

[view~=course-learning-queue].wrong > .invisible {
  opacity: 1.0;
}

[view~=course-learning-queue].correct {
  background-color: rgb(23, 186, 0);
}

[view~=course-learning-queue].correct > div {
  background-color: white;
}

[view~=course-learning-queue].correct > .invisible {
  opacity: 1.0;
}

[view~=form-status-container] {
  color: red;
}

[view~=menu-bar-title] {
  min-height: 26px;
}

[view~=infobox] {
  background-color: rgb(239, 243, 249);
  border-radius: 5px;
  padding: 12px 12px;
}

[view~=checkbox] > .container > [data-state=collapsed] {
  display: none;
}

[view~=secondary-background] {
  background-color: rgb(243, 243, 243);
}

[view~=formatted-text] b {
  font-weight: bold;
}

[view~=inline-formula] {
  position: relative;
  vertical-align: top;
}

[view~=inline-formula].small {
  top: 2px;
}

[view~=inline-formula].regular {
  top: 3px;
}

[view~=form-input-box] {
  background-color: white;
  border-radius: 5px;
  border-color: rgb(204, 204, 204);
  border-style: solid;
  border-width: 1px;
  padding: 5px 8px;
}

[view~=icon-toggle-button] img.hidden {
  display: none;
}

[view~=question-title] {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

[view~=question-body-text] {
  font-size: 16px;
}

[view~=question-text-entry] > textarea, [view~=question-text-entry] > input {
  width: 400px;
  border-color: rgb(159, 170, 191);
  border-radius: 3px;
  border-width: 2px;
  font-size: 16px;
}

[view~=question-text-entry] > textarea {
  resize: none;
}

[view~=question-text-entry] > .solution {
  width: 400px;
  padding: 5px 8px;
  border-style: solid;
  border-radius: 3px;
  border-width: 2px;
  font-size: 16px;
}

[view~=question-text-entry] > .solution.correct {
  border-color: rgb(23, 186, 0);
  background-color: rgb(243, 251, 242);
}

[view~=question-text-entry] > .solution.wrong {
  border-color: rgb(188, 0, 0);
  background-color: rgb(251, 242, 242);
}

[view~=question-text-entry] > .entered-text {
  font-size: 16px;
  padding: 5px 10px;
  width: 400px;
  text-decoration-line: line-through;
}

[view~=question-text-entry] > .entered-text.empty {
  visibility: hidden;
}

[view~=question-multiple-choice] {
  width: 80%;
  font-size: 16px;
}

[view~=question-multiple-choice] > .entry {
  padding: 5px 8px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  border-color: rgb(240, 240, 240);
  background-color: rgb(240, 240, 240);
  border-radius: 5px;
}

[view~=question-multiple-choice] > .entry.correct [view~=question-shortcut], [view~=question-multiple-choice] > .entry.wrong [view~=question-shortcut] {
  visibility: hidden;
}

[view~=question-multiple-choice] > .entry.correct {
  border-color: rgb(23, 186, 0);
  background-color: rgb(243, 251, 242);
}

[view~=question-multiple-choice] > .entry.wrong {
  border-color: rgb(188, 0, 0);
  background-color: rgb(251, 242, 242);
}

[view~=question-multiple-choice-checkbox] {
  width: 16px;
  height: 16px;
  background-size: 100% 100%;
}

[view~=question-multiple-choice-checkbox].checked {
  background-image: url(checkbox_active.M43AKAW6.svg);
}

[view~=question-multiple-choice-checkbox].checked:hover {
  background-image: url(checkbox_active_hover.RSYRULBR.svg);
}

[view~=question-multiple-choice-checkbox].unchecked {
  background-image: url(checkbox_inactive.VVHS5VFN.svg);
}

[view~=question-multiple-choice-checkbox].unchecked:hover {
  background-image: url(checkbox_inactive_hover.XLFB55C4.svg);
}

[view~=question-shortcut] {
  font-size: 12px;
  background-color: rgb(255, 255, 255);
  border-radius: 3px;
  padding: 3px 8px;
  color: rgb(102, 102, 102);
  font-weight: bold;
}

[view~=question-shortcut].narrow {
  padding: 3px 3px;
}

[view~=loading-container] {
  position: relative;
}

[view~=loading-container][data-state=notLoading] > [view~=loading-overlay] {
  display: none;
}

[view~=loading-overlay] {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: rgb(255, 255, 255, 0.8);
}

[view~=loading-overlay] > [view~=progress] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: -50%, -50%;
}

[view~=progress] {
  width: 24px;
  height: 24px;
  flex-shrink: 0.0;
  border-radius: 20%;
  position: relative;
  display: inline-block;
}

[view~=progress] > div {
  transform-origin: 12.0px 12.0px;
  animation: opacityOneToZero 1.2s linear infinite;
}

[view~=progress] > div::after {
  content: " ";
  display: block;
  position: absolute;
  top: 2px;
  left: 11.5px;
  width: 1px;
  height: 6px;
  border-radius: 10%;
  background-color: rgb(136, 136, 136);
}

[view~=progress] > div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

[view~=progress] > div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1.0s;
}

[view~=progress] > div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.90000004s;
}

[view~=progress] > div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

[view~=progress] > div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

[view~=progress] > div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

[view~=progress] > div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

[view~=progress] > div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

[view~=progress] > div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

[view~=progress] > div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

[view~=progress] > div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

[view~=progress] > div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: -0.0s;
}

@keyframes opacityOneToZero {
  from {
    opacity: 1.0;
  }

  to {
    opacity: 0.0;
  }
}

[view~=show-course-invitation-code] {
  position: absolute;
  top: 0px;
  left: 0px;
}

[view~=show-course-invitation-code] > a > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

[view~=markdown-content] h1, [view~=markdown-content] h2, [view~=markdown-content] h3, [view~=markdown-content] h4, [view~=markdown-content] h5, [view~=markdown-content] h6 {
  font-size: 14px;
}

[view~=markdown-content] em {
  font-weight: bold;
}

[view~=markdown-content] ol, [view~=markdown-content] ul {
  padding-left: 20px;
}

[view~=markdown-content] ul {
  list-style-type: disc;
}

[view~=markdown-content] ol {
  list-style-type: decimal;
}

[view~=markdown-content] > ol:not(:first-child) {
  margin-top: -21px;
}

[view~=markdown-content] > ul:not(:first-child) {
  margin-top: -21px;
}

[view~=markdown-content] mjx-container[jax="CHTML"][display="true"] {
  margin: 4px !important;
}

[view~=markdown-text-area] > .buttonBar > button {
  padding: 2px 8px;
  background-color: white;
  border-radius: 5px;
  margin-top: 5px;
  border: 1px solid rgb(204, 204, 204);
  cursor: pointer;
  user-select: none;
}

[view~=markdown-text-area] > .buttonBar > button > .checkbox {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

[view~=markdown-text-area] > .content {
  position: relative;
}

[view~=markdown-text-area] > .content > .edit {
  position: relative;
}

[view~=markdown-text-area] > .content > .edit > .background {
  padding: 5px 8px;
  border: 1px solid transparent;
  visibility: hidden;
}

[view~=markdown-text-area] > .content > .edit > textarea {
  resize: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 5px 8px;
}

[view~=markdown-text-area] > .content > .preview {
  padding: 5px 8px;
  border: 1px solid rgb(204, 204, 204);
  background-color: rgb(251, 251, 251);
  border-radius: 5px;
  align-items: stretch;
}

[view~=markdown-text-area] > .content > .preview.hasAiConsole {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

[view~=markdown-text-area] > .content > [view~=ai-console] {
  position: relative;
}

[view~=markdown-text-area][data-state=edit] .loading {
  display: none;
}

[view~=markdown-text-area][data-state=edit] .preview {
  display: none;
}

[view~=markdown-text-area][data-state=edit] .checkbox {
  background-image: url(checkbox_inactive.VVHS5VFN.svg);
}

[view~=markdown-text-area][data-state=loading] .preview {
  display: none;
}

[view~=markdown-text-area][data-state=loading] .loading {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  justify-content: center;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
}

[view~=markdown-text-area][data-state=loading] .checkbox {
  background-image: url(checkbox_active.M43AKAW6.svg);
}

[view~=markdown-text-area][data-state=preview] .edit {
  display: none;
}

[view~=markdown-text-area][data-state=preview] .loading {
  display: none;
}

[view~=markdown-text-area][data-state=preview] .checkbox {
  background-image: url(checkbox_active.M43AKAW6.svg);
}

[view~=growing-text-area] {
  border-radius: 5px;
  border-color: rgb(204, 204, 204);
  border-style: solid;
  border-width: 1px;
  background: white;
  padding: 1px;
}

[view~=growing-text-area][data-focus-state=focussed] {
  border-width: 2px;
  border-color: rgb(23, 73, 165);
  padding: 0px;
}

[view~=growing-text-area][data-border-style=top] {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

[view~=growing-text-area][data-border-style=bottom] {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-width: 0px;
  padding-top: 2px;
  background: linear-gradient(to bottom, transparent 1px, white 1px);
}

[view~=growing-text-area][data-border-style=bottom][data-focus-state=focussed] {
  border-top-width: 2px;
  padding-top: 0px;
}

[view~=growing-text-area] > .mainContent {
  position: relative;
}

[view~=growing-text-area] > .mainContent .background {
  padding: 4px 7px;
  visibility: hidden;
}

[view~=growing-text-area] > .mainContent textarea {
  resize: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 4px 7px;
  border-width: 0px;
  outline: none;
}

[view~=growing-text-area] > .sidebar {
  padding: 2px 2px;
}

[view~=markdown-document] b {
  font-weight: bold;
}

[view~=markdown-document] i {
  font-style: italic;
}

[view~=markdown-document] ol, [view~=markdown-document] ul {
  padding-left: 20px;
}

[view~=markdown-document] ul {
  list-style-type: disc;
}

[view~=markdown-document] ol {
  list-style-type: decimal;
}

[view~=markdown-document] pre {
  font-family: monospace;
}

[view~=markdown-document] mjx-container[jax="CHTML"][display="true"] {
  margin: 4px !important;
}

[view~=markdown-document] mjx-container[jax="CHTML"][display="true"] + br {
  display: none;
}

[view~=evaluation-circle] {
  width: 12px;
  height: 12px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

[view~=evaluation-circle] > .half {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
}

[view~=evaluation-circle] > .gray {
  border-color: rgb(204, 204, 204);
  background-color: rgb(250, 250, 250);
}

[view~=evaluation-circle] > .green {
  border-color: rgb(23, 186, 0, 1.0);
  background-color: rgb(23, 186, 0, 0.1);
}

[view~=evaluation-circle] > .yellow {
  border-color: rgb(255, 141, 0, 1.0);
  background-color: rgb(255, 141, 0, 0.1);
}

[view~=evaluation-circle] > .red {
  border-color: rgb(188, 0, 0, 1.0);
  background-color: rgb(188, 0, 0, 0.1);
}

[view~=evaluation-circle] > .top {
  clip-path: polygon(0% 100%, 100% 0%, 0% 0%);
}

[view~=evaluation-circle] > .bottom {
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

[view~=chapter-question-evaluation-item] {
  padding: 6px 8px;
}

[view~=chapter-question-evaluation-item].gray {
  background-color: rgb(250, 250, 250);
  border-color: rgb(204, 204, 204);
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
}

[view~=chapter-question-evaluation-item].green {
  background-color: rgb(23, 186, 0, 0.1);
  border-color: rgb(23, 186, 0, 1.0);
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
}

[view~=chapter-question-evaluation-item].yellow {
  background-color: rgb(255, 141, 0, 0.1);
  border-color: rgb(255, 141, 0, 1.0);
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
}

[view~=chapter-question-evaluation-item].red {
  background-color: rgb(188, 0, 0, 0.1);
  border-color: rgb(188, 0, 0, 1.0);
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
}

[view~=list-navigation-panel] .arrowActive {
  font-size: 21px;
}

[view~=list-navigation-panel] .arrowInactive {
  font-size: 21px;
  color: rgb(170, 170, 170);
  padding: 0px 8px;
  margin: 0px;
  line-height: 1.0;
  display: inline-block;
  user-select: none;
}