@charset "UTF-8";

.tippy-box,
.tippy-box[data-theme~=white] {
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .4))
}

:root {
  --z-marco-layout-float-panel: 7000;
  --z-editor-footer-panel: 7020;
  --z-datepicker-calendar: 7040;
  --z-player-sidebar: 7060;
  --z-marco-layout-nav: 7080;
  --z-loading-overlay-content: 7100;
  --z-main-header: 7120;
  --z-data-tooltip: 7140;
  --z-ember-tooltip: 7160;
  --z-quiz-linux-terminal: 7180;
  --z-loading-overlay: 7200;
  --z-old-modals: 7220;
  --z-modal-popup: 7240;
  --z-tippy-tooltip: 7260;
  --z-ckeditor-base: 7280;
  --z-uploadcare-dialog: 7300;
  --z-woof: 7320;
  --z-video-fullscreen: 7340;
  --z-mobile-banner: 7360;
  --z-loading-slider: 7380;
  --z-debug-translation-keys: 7400;
  --z-stripe-popup: 7420;
  --z-image-lightbox: 7440;
  --course-badge-default-bg: transparent;
  --course-badge-default-bgi: linear-gradient(106deg, #e7f2ff -26%, #f1f1f4 135%);
  --course-badge-default-fg: #535366;
  --course-badge-private-bg: var(--course-badge-default-bg);
  --course-badge-private-bgi: linear-gradient(105deg, #f6faff -26%, #c8e2ff 135%);
  --course-badge-private-fg: #4485ed;
  --course-badge-draft-bg: transparent;
  --course-badge-draft-bgi: linear-gradient(106deg, #e7f2ff -26%, #f1f1f4 135%);
  --course-badge-draft-fg: #535366;
  --course-badge-basic-bg: var(--course-badge-default-bg);
  --course-badge-basic-bgi: linear-gradient(107deg, #e7f2ff -26%, #e3fff0 136%);
  --course-badge-basic-fg: #56a4ff;
  --course-badge-basic-invalid-bg: var(--course-badge-default-bg);
  --course-badge-basic-invalid-bgi: linear-gradient(107deg, #e7f2ff -26%, #e3fff0 136%);
  --course-badge-basic-invalid-fg: #56a4ff;
  --course-badge-paid-bg: var(--course-badge-default-bg);
  --course-badge-paid-bgi: linear-gradient(107deg, #e7f2ff -26%, #cbffd2 136%);
  --course-badge-paid-fg: #54ad54;
  --course-badge-paid-invalid-bg: var(--course-badge-default-bg);
  --course-badge-paid-invalid-bgi: linear-gradient(107deg, #e7f2ff -26%, #cbffd2 136%);
  --course-badge-paid-invalid-fg: #54ad54;
  --course-badge-enterprise-bg: var(--course-badge-default-bg);
  --course-badge-enterprise-bgi: linear-gradient(92.32deg, #F4F5FD 47.03%, #E9F2FF 100.95%);
  --course-badge-enterprise-fg: #6c7bdf;
  --course-badge-spec-bg: #6C7BDF;
  --course-badge-spec-bgi: none;
  --course-badge-spec-fg: #fff;
  --show-more-fog: rgba(0, 0, 0, 1) calc(100% - 50px), rgba(0, 0, 0, 0.5) calc(100% - 40px), rgba(0, 0, 0, 0.1) calc(100% - 20px), rgba(0, 0, 0, 0) 100%;
  --validation-var-border-color: #d41f1f;
  --validation-var-bg-color: #feebe8;
  --validation-var-fg-color: #d41f1f;
  --rich-text-editor-border-radius: 0;
  --step-pin-icon-size: 32px;
  --step-pin-icon-icon-size: 22px;
  --step-pin-icon-subicon-size: 11px;
  --step-pin-icon-color: rgba(0, 0, 0, 0.5);
  --step-pin-icon-subicon-color: #fff
}

input[without-arrows] {
  -moz-appearance: textfield
}

input[without-arrows]::-webkit-inner-spin-button,
input[without-arrows]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

t {
  position: absolute;
  margin: -8px 0 0 -32px;
  padding: .1em .2em;
  max-width: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  background: #ff0;
  color: #000;
  border: 1px ridge #737373;
  font-family: monospace;
  font-size: .8em;
  line-height: 1.1;
  letter-spacing: -1px;
  opacity: .9;
  z-index: calc(var(--z-debug-translation-keys) - 1)
}

.html-checklist__item-hint,
t:hover {
  font-size: .9em
}

.hamburger.is-active:hover,
.hamburger:hover,
.learn-last-activity-card[data-theme=light] .learn-last-activity-card__advice,
.paid-features__list-item-link-wrapper:hover~.paid-features__view-link,
[data-theme=light] .learn-last-activity-card .learn-last-activity-card__advice,
t:hover {
  opacity: 1
}

t:hover {
  padding: .4em .4em .4em 30px;
  max-width: none;
  overflow: visible;
  letter-spacing: -.5px;
  z-index: var(--z-debug-translation-keys)
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 0;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: .15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::after,
.hamburger.is-active .hamburger-inner::before {
  background-color: currentColor
}

.hamburger-box {
  width: 1.5em;
  height: 1.00001em;
  display: inline-block;
  position: relative
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -.083335em
}

.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
  width: 1.5em;
  height: .16667em;
  background-color: currentColor;
  border-radius: 1px;
  position: absolute;
  transition-property: transform;
  transition-duration: .15s;
  transition-timing-function: ease
}

.hamburger-inner::after,
.hamburger-inner::before {
  content: "";
  display: block
}

.hamburger-inner::before {
  top: -.41667em
}

.hamburger-inner::after {
  bottom: -.41667em
}

.hamburger--squeeze .hamburger-inner {
  transition-duration: 75ms;
  transition-timing-function: cubic-bezier(.55, .055, .675, .19)
}

.hamburger--squeeze .hamburger-inner::before {
  transition: top 75ms .12s ease, opacity 75ms ease
}

.hamburger--squeeze .hamburger-inner::after {
  transition: bottom 75ms .12s ease, transform 75ms cubic-bezier(.55, .055, .675, .19)
}

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: .12s;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1)
}

.hamburger--squeeze.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 75ms ease, opacity 75ms .12s ease
}

.hamburger--squeeze.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 75ms ease, transform 75ms .12s cubic-bezier(.215, .61, .355, 1)
}

.hamburger {
  display: inline-flex
}

.custom-scrollbar {
  --custom-scrollbar-background: #fff;
  --custom-scrollbar-thumb-color: #e6e9ed;
  --custom-scrollbar-thumb-hover-color: #b7b7b7;
  --custom-scrollbar-thumb-active-color: #5e5e5e;
  --custom-scrollbar-resize-grip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23ccc'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>")
}

.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--custom-scrollbar-background)
}

.custom-scrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-background)
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-thumb-color);
  border: 3px solid var(--custom-scrollbar-background)
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover-color)
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
  background-color: var(--custom-scrollbar-thumb-active-color)
}

.custom-scrollbar::-webkit-scrollbar-corner {
  background-color: var(--custom-scrollbar-background)
}

.custom-scrollbar::-webkit-resizer {
  background-image: var(--custom-scrollbar-resize-grip);
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: 2px 2px
}

.custom-scrollbar_dark {
  --custom-scrollbar-background: #222;
  --custom-scrollbar-thumb-color: #5e5e5e;
  --custom-scrollbar-thumb-hover-color: #777;
  --custom-scrollbar-thumb-active-color: #999;
  --custom-scrollbar-resize-grip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23999'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>")
}

.ember-popover,
.ember-tooltip {
  z-index: var(--z-ember-tooltip)
}

.ember-popover {
  padding: 16px;
  background-color: #fff;
  color: #222;
  border-radius: 4px;
  box-shadow: 0 2px 15px 0 #ccc;
  border: none;
  --arrow-color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px;
  white-space: normal
}

.ember-popover[x-placement^=top] .ember-popover-arrow {
  border-top-color: var(--arrow-color)
}

.ember-popover[x-placement^=bottom] .ember-popover-arrow {
  border-bottom-color: var(--arrow-color)
}

.ember-popover[x-placement^=left] .ember-popover-arrow {
  border-left-color: var(--arrow-color)
}

.ember-popover[x-placement^=right] .ember-popover-arrow {
  border-right-color: var(--arrow-color)
}

.ember-popover h1 {
  margin: 0 0 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .15px
}

.ember-popover p {
  margin: 16px 0;
  line-height: inherit
}

.ember-popover p:first-child {
  margin-top: 0
}

.ember-popover p:last-child {
  margin-bottom: 0
}

.ember-popover .button:not(.st-button_style_none),
.ember-popover button:not(.st-button_style_none) {
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px
}

.ember-popover_dark {
  background-color: #222;
  color: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .4);
  --arrow-color: #222
}

.ember-popover_dark h1,
.ember-popover_dark h2,
.ember-popover_dark h3,
.ember-popover_dark h4,
.ember-popover_dark h5,
.ember-popover_dark h6 {
  color: inherit
}

.ember-popover_dark .link-secondary {
  --link-color: currentColor;
  --link-line-color: currentColor;
  --link-hover-color: currentColor;
  --link-hover-line-color: currentColor;
  --link-active-color: currentColor;
  --link-active-line-color: currentColor
}

.ember-popover[data-no-arrow],
.ember-popover_no-arrow,
.ember-tooltip[data-no-arrow],
.ember-tooltip_no-arrow {
  --arrow-display: none
}

.ember-popover-arrow,
.ember-tooltip-arrow {
  display: var(--arrow-display, block)
}

.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0
}

.tippy-box {
  position: relative;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
  background-color: #222;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.17;
  letter-spacing: .4px
}

.tippy-box[data-placement^=top]>.tippy-arrow {
  bottom: 0
}

.tippy-box[data-placement^=top]>.tippy-arrow::before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top
}

.tippy-box[data-placement^=bottom]>.tippy-arrow {
  top: 0
}

.tippy-box[data-placement^=bottom]>.tippy-arrow::before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom
}

.tippy-box[data-placement^=left]>.tippy-arrow {
  right: 0
}

.tippy-box[data-placement^=left]>.tippy-arrow::before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left
}

.tippy-box[data-placement^=right]>.tippy-arrow {
  left: 0
}

.tippy-box[data-placement^=right]>.tippy-arrow::before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #222
}

.tippy-arrow::before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
  transform: scale(.75)
}

.image-by-time-of-day,
.tippy-content {
  position: relative
}

.tippy-content {
  z-index: 1;
  padding: 10px 12px
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
  z-index: var(--z-tippy-tooltip)
}

.tippy-box[data-theme~=whitespace-pre-wrap] .tippy-content {
  white-space: pre-wrap
}

.tippy-box[data-theme~=center] .tippy-content {
  text-align: center
}

.tippy-box[data-theme~=white] {
  background-color: #fff;
  color: #222;
  border: 1px solid #F6F6F6
}

.tippy-box[data-theme~=white] .tippy-arrow {
  color: #fff
}

.diff-viewer[data-method=diffJson],
.diff-viewer[data-method=diffLines] {
  --diff-viewer-span-spacing: 0
}

.diff-viewer[data-text-overflow=wrap] .diff-viewer__diff-spot {
  white-space: pre-wrap;
  overflow-wrap: break-word
}

.diff-viewer[data-text-overflow=ellipsis] .diff-viewer__diff-spot {
  padding: 4px;
  margin: -4px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis
}

.diff-viewer[data-text-overflow=ellipsis] [data-added]:focus,
.diff-viewer[data-text-overflow=ellipsis] [data-removed]:focus,
.rich-text-editor__content[data-cke-editorplaceholder]::before {
  white-space: pre-wrap
}

.diff-viewer[data-text-overflow=ellipsis] .diff-viewer__diff-spot:focus-within {
  overflow: visible
}

.diff-viewer__diff-spot {
  margin: 0;
  line-height: 1.4;
  font-size: 12px;
  letter-spacing: normal;
  color: #222
}

.diff-viewer__diff-spot span {
  margin: 0 3px 0 0
}

.diff-viewer__diff-spot [data-added],
.diff-viewer__diff-spot [data-removed] {
  line-height: 1.7;
  outline: solid 1px;
  outline-offset: 1px
}

.diff-viewer__diff-spot [data-added]:focus,
.diff-viewer__diff-spot [data-removed]:focus {
  outline-width: 2px !important;
  outline-style: solid !important
}

.diff-viewer__diff-spot [data-added] {
  color: #246024;
  outline-color: #aad6aa !important;
  background-color: #e9f9e9;
  box-shadow: 0 0 0 2px #e9f9e9
}

.diff-viewer__diff-spot [data-removed] {
  color: #d41f1f;
  outline-color: #ffbcb2 !important;
  background-color: #feebe8;
  box-shadow: 0 0 0 2px #feebe8;
  -webkit-text-decoration: line-through solid rgba(212, 31, 31, .3);
  text-decoration: line-through solid rgba(212, 31, 31, .3)
}

.diff-viewer__diff-spot span[data-added]+span[data-removed],
.diff-viewer__diff-spot span[data-removed]+span[data-added] {
  margin-left: var(--diff-viewer-span-spacing, 2px)
}

.diff-viewer__diff-spot span[data-lf]+span[data-lf] {
  margin-left: 0
}

.diff-viewer__loader>.dots-loader {
  margin: 0 0 0 2px
}

.diff-viewer__may-be-slow-msg {
  margin: 0 0 0 20px;
  color: #999;
  font-size: 12px;
  visibility: hidden;
  max-height: 0;
  -webkit-animation: diff-viewer-may-be-slow-msg-show 0s 5s forwards;
  animation: diff-viewer-may-be-slow-msg-show 0s 5s forwards
}

@-webkit-keyframes diff-viewer-may-be-slow-msg-show {
  to {
    visibility: visible;
    max-height: none
  }
}

@keyframes diff-viewer-may-be-slow-msg-show {
  to {
    visibility: visible;
    max-height: none
  }
}

.user-financial-details-form .the-form-field {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 18px 0 0
}

.user-financial-details-form .the-form-field>.the-form-field__messages {
  grid-column: 1
}

.user-financial-details-form .the-form-field>.the-form-field__caption {
  grid-column: 1;
  grid-row: 1/span 100;
  margin: 7px 12px 0 0;
  width: var(--form-caption-width, 130px);
  overflow-wrap: break-word;
  line-height: 1.29
}

.user-financial-details-form .the-form-field>.the-form-field__caption~* {
  grid-column: 2;
  justify-self: flex-start
}

.user-financial-details-form .the-form-field .the-form-field__footnote {
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px;
  color: #5e5e5e
}

.user-financial-details-form .the-form-field input.st-input {
  height: 32px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px
}

.user-financial-details-form .the-form-field input.st-input[disabled] {
  border-color: rgba(204, 204, 204, .38);
  background: #fff;
  color: #999
}

.user-financial-details-form .the-form-field>.form-checkbox {
  padding: 5px 0
}

.user-financial-details-form .the-form-field>textarea.st-input {
  margin: 0;
  width: 100%;
  max-width: 370px;
  resize: vertical
}

.user-financial-details-form .the-form-field input[data-type=email] {
  width: 232px
}

.user-financial-details-form .the-form-field input[data-type=legal-full-name],
.user-financial-details-form .the-form-field input[data-type=legal-title] {
  width: 316px
}

.user-financial-details-form .the-form-field input[data-type=inn] {
  width: 150px
}

.user-financial-details-form .the-form-field input[data-type=bank-account] {
  width: 220px
}

.user-financial-details-form .the-form-field input[data-type=bank-bic] {
  width: 120px
}

.user-financial-details-form .the-form-field input.user-financial-details-form-branch__registration-date {
  width: 150px
}

.user-financial-details-form .the-form-field__caption[data-required]::after {
  display: none
}

.user-financial-details-form .the-form-field__char-counter[data-pos=footnote] {
  top: auto;
  bottom: 2px;
  left: 0;
  margin: 0;
  background: #fff;
  font-size: 12px
}

.user-financial-details-form__branches {
  list-style: none;
  margin: 0;
  padding: 0
}

.user-financial-details-form-branch[data-active] .user-financial-details-form-branch__title {
  font-weight: 500
}

.user-financial-details-form-branch[data-branch=course-price] {
  --form-caption-width: auto
}

.user-financial-details-form-branch__block {
  margin: 24px 0
}

.user-financial-details-form-branch__block p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  margin: 16px 0 0
}

.user-financial-details-form-branch__block p+p {
  margin: 24px 0 0
}

.user-financial-details-form-branch__block .button,
.user-financial-details-form-branch__block button:not(.st-button_style_none) {
  padding: 9px 24px
}

.user-financial-details-form-branch__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3
}

.user-financial-details-form-branch__agreement {
  margin-top: 14px;
  font-size: 14px
}

.user-financial-details-form-branch__fieldset {
  margin: 32px 0 24px;
  padding: 0;
  border: none
}

.user-financial-details-form-branch__fieldset:first-child {
  margin-top: 0
}

.user-financial-details-form-branch__fieldset>h4:first-child {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .15px
}

.user-financial-details-form-branch__fieldset>.toast-panel {
  margin: 14px 0;
  max-width: 580px
}

.user-financial-details-form-branch__content>.toast-panel {
  margin: 14px 0
}

.user-financial-details-form-branch__content+.toast-panel {
  margin: 24px 0
}

.user-financial-details-form-branch__toast-panel a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.user-financial-details-form-branch__nav-btns {
  display: grid;
  justify-content: flex-start;
  grid-gap: 14px;
  grid-auto-flow: column;
  margin-top: 24px
}

.user-financial-details-form-branch__nav-btns>button {
  padding: 9px 24px
}

.user-financial-details-form-branch__hint {
  color: rgba(153, 153, 153, .38);
  transition: color .3s
}

.user-financial-details-form-branch__hint:hover {
  color: #999
}

.user-financial-details-form-branch__registration-date-footnote>b {
  white-space: nowrap
}

.image-by-time-of-day img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%
}

.image-by-time-of-day img[data-active] {
  pointer-events: auto;
  -webkit-animation: image-by-time-of-day-enter 1s ease-in-out forwards;
  animation: image-by-time-of-day-enter 1s ease-in-out forwards
}

.image-by-time-of-day img[data-active]:first-child {
  -webkit-animation-duration: 0s;
  animation-duration: 0s
}

.image-by-time-of-day img:not([data-active]) {
  pointer-events: none;
  -webkit-animation: image-by-time-of-day-exit 1s ease-in-out forwards;
  animation: image-by-time-of-day-exit 1s ease-in-out forwards
}

@-webkit-keyframes image-by-time-of-day-enter {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes image-by-time-of-day-enter {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes image-by-time-of-day-exit {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes image-by-time-of-day-exit {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.nav-menu {
  --course-badge-default-bg: transparent;
  --course-badge-default-bgi: linear-gradient(106deg, #e7f2ff -26%, #f1f1f4 135%);
  --course-badge-default-fg: #535366;
  --course-badge-private-bg: var(--course-badge-default-bg);
  --course-badge-private-bgi: linear-gradient(105deg, #f6faff -26%, #c8e2ff 135%);
  --course-badge-private-fg: #4485ed;
  --course-badge-draft-bg: transparent;
  --course-badge-draft-bgi: linear-gradient(106deg, #e7f2ff -26%, #f1f1f4 135%);
  --course-badge-draft-fg: #535366;
  --course-badge-basic-bg: var(--course-badge-default-bg);
  --course-badge-basic-bgi: linear-gradient(107deg, #e7f2ff -26%, #e3fff0 136%);
  --course-badge-basic-fg: #56a4ff;
  --course-badge-basic-invalid-bg: var(--course-badge-default-bg);
  --course-badge-basic-invalid-bgi: linear-gradient(107deg, #e7f2ff -26%, #e3fff0 136%);
  --course-badge-basic-invalid-fg: #56a4ff;
  --course-badge-paid-bg: var(--course-badge-default-bg);
  --course-badge-paid-bgi: linear-gradient(107deg, #e7f2ff -26%, #cbffd2 136%);
  --course-badge-paid-fg: #54ad54;
  --course-badge-paid-invalid-bg: var(--course-badge-default-bg);
  --course-badge-paid-invalid-bgi: linear-gradient(107deg, #e7f2ff -26%, #cbffd2 136%);
  --course-badge-paid-invalid-fg: #54ad54;
  --course-badge-enterprise-bg: var(--course-badge-default-bg);
  --course-badge-enterprise-bgi: linear-gradient(92.32deg, #F4F5FD 47.03%, #E9F2FF 100.95%);
  --course-badge-enterprise-fg: #6c7bdf;
  --course-badge-spec-bg: #6C7BDF;
  --course-badge-spec-bgi: none;
  --course-badge-spec-fg: #fff;
  padding: 16px 16px 12px 24px;
  background-color: var(--nav-menu-bg);
  overflow-y: auto;
  overflow-x: hidden;
  --custom-scrollbar-background: #fff;
  --custom-scrollbar-thumb-color: #e6e9ed;
  --custom-scrollbar-thumb-hover-color: #b7b7b7;
  --custom-scrollbar-thumb-active-color: #5e5e5e;
  --custom-scrollbar-resize-grip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23ccc'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>")
}

.nav-menu::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--custom-scrollbar-background)
}

.nav-menu::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-background)
}

.nav-menu::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-thumb-color);
  border: 3px solid var(--custom-scrollbar-background)
}

.nav-menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover-color)
}

.nav-menu::-webkit-scrollbar-thumb:active {
  background-color: var(--custom-scrollbar-thumb-active-color)
}

.nav-menu::-webkit-scrollbar-corner {
  background-color: var(--custom-scrollbar-background)
}

.nav-menu::-webkit-resizer {
  background-image: var(--custom-scrollbar-resize-grip);
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: 2px 2px
}

.nav-menu:not([data-is-tabs]) {
  --nav-menu-bg: #fcfcfc
}

.nav-menu[data-is-tabs] {
  overflow-y: hidden;
  overflow-x: auto
}

.nav-menu__menu {
  --menu-background: transparent;
  --menu-border: none;
  --menu-border-radius: 0px;
  --menu-item-ctrl-border-radius: 4px;
  --menu-min-width: 0px;
  --menu-offset-y: 0px;
  --menu-box-shadow: none;
  --menu-item-spacing: 4px;
  --menu-item-padding-v: 8px;
  --menu-item-padding-h: 12px;
  --menu-item-color: #535366;
  --menu-item-hover-color: #000;
  --menu-item-active-color: var(--menu-item-hover-color);
  --menu-item-selected-color: #288b28;
  --menu-item-hover-background: #e9f9e9;
  --menu-item-active-background: #e1f7e1;
  --menu-item-selected-background: transparent;
  --menu-item-selected-hover-background: var(--menu-item-hover-background);
  --menu-item-selected-active-background: var(--menu-item-active-background);
  --menu-item-divider-color: #eaecf0;
  --nav-menu-icon-size: 16px;
  --nav-menu-icon-margin-right: 12px;
  --nav-menu-level-offset: 0px;
  margin-left: calc(var(--menu-item-padding-h) * -1)
}

.nav-menu__menu:not([data-level="1"]) {
  margin: calc(var(--menu-item-padding-v) + var(--menu-item-spacing)) calc(var(--menu-item-padding-h) * -1) calc(var(--menu-item-padding-v) * -1)
}

.nav-menu__menu[data-level="3"] {
  --nav-menu-level-offset: 16px
}

.nav-menu__menu[data-level="4"] {
  --nav-menu-level-offset: 32px
}

.nav-menu__menu[data-level="5"] {
  --nav-menu-level-offset: 48px
}

.nav-menu__menu .menu-item>a,
.nav-menu__menu .menu-item>button {
  display: flex;
  align-items: center;
  padding-left: calc(var(--menu-item-padding-h) + var(--nav-menu-level-offset) + var(--nav-menu-icon-size) + var(--nav-menu-icon-margin-right));
  height: 32px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .15px
}

.nav-menu__menu .menu-item>a>.svg-icon,
.nav-menu__menu .menu-item>button>.svg-icon {
  transform: none
}

.nav-menu__menu .menu-item>a>.svg-icon:first-child,
.nav-menu__menu .menu-item>button>.svg-icon:first-child {
  margin: 0 var(--nav-menu-icon-margin-right) 0 calc(-1 * var(--nav-menu-icon-size) - var(--nav-menu-icon-margin-right));
  font-size: var(--nav-menu-icon-size)
}

.nav-menu__menu .menu-item>a>.nav-menu__menu-item-fold-icon,
.nav-menu__menu .menu-item>button>.nav-menu__menu-item-fold-icon {
  margin: 0 0 0 10px;
  font-size: 11px;
  color: #999
}

.nav-menu__menu .menu-item>a:active>.nav-menu__menu-item-fold-icon,
.nav-menu__menu .menu-item>a:hover>.nav-menu__menu-item-fold-icon,
.nav-menu__menu .menu-item>a[aria-disabled=true]>.nav-menu__menu-item-fold-icon,
.nav-menu__menu .menu-item>a[disabled]>.nav-menu__menu-item-fold-icon,
.nav-menu__menu .menu-item>button:active>.nav-menu__menu-item-fold-icon,
.nav-menu__menu .menu-item>button:hover>.nav-menu__menu-item-fold-icon,
.nav-menu__menu .menu-item>button[aria-disabled=true]>.nav-menu__menu-item-fold-icon,
.nav-menu__menu .menu-item>button[disabled]>.nav-menu__menu-item-fold-icon {
  color: inherit
}

.nav-menu__menu .menu-item-divider {
  margin: 16px var(--menu-item-padding-h) 11px
}

.nav-menu__menu-toggler[aria-expanded=true] .nav-menu__menu-item-fold-icon svg {
  transform: rotate(90deg)
}

.nav-menu__menu-item-badge {
  display: inline-block;
  margin: 0 0 0 8px;
  padding: 1px 6px;
  height: 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: .4px;
  background-color: #54ad54;
  color: #fff
}

.nav-menu__menu-item-feature-plan {
  margin: 0 0 0 8px
}

.nav-menu__menu-item-feature-plan:empty {
  display: none
}

.nav-menu__menu-item-feature-plan>.feature-tariff-badge {
  display: flex;
  position: static;
  top: 0;
  margin: 0
}

.nav-menu__menu-item_collapse-icon {
  --nav-menu-icon-size: 0px;
  --nav-menu-icon-margin-right: 0px
}

@media (max-width:768px) {
  .nav-menu:not([data-is-tabs]) {
    --nav-menu-bg: #282b41;
    padding: 16px 0 16px 16px;
    --custom-scrollbar-thumb-color: #5e5e5e;
    --custom-scrollbar-thumb-hover-color: #777;
    --custom-scrollbar-thumb-active-color: #999;
    --custom-scrollbar-resize-grip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23999'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>");
    --custom-scrollbar-background: var(--nav-menu-bg);
    --feature-tariff-badge-bg: #6c7bdf;
    --feature-tariff-badge-fg: #fff;
    --feature-tariff-badge-hem: #3e50cb;
    --feature-tariff-badge-active-bg: #E9EBFA;
    --feature-tariff-badge-active-fg: #3e50cb;
    --feature-tariff-badge-active-hem: #9ca6e6;
    --course-badge-default-bg: transparent;
    --course-badge-default-bgi: linear-gradient(106deg, rgba(179, 214, 255, 0.5) -26%, rgba(255, 255, 255, 0.5) 135%);
    --course-badge-default-fg: #f3f4f6;
    --course-badge-private-bg: var(--course-badge-default-bg);
    --course-badge-private-bgi: linear-gradient(105deg, rgb(144, 195, 255, 0.5) -26%, rgb(84, 138, 255, 0.5) 135%);
    --course-badge-private-fg: #fff;
    --course-badge-draft-bg: transparent;
    --course-badge-draft-bgi: linear-gradient(106deg, rgba(179, 214, 255, 0.5) -26%, rgba(255, 255, 255, 0.5) 135%);
    --course-badge-draft-fg: #f3f4f6;
    --course-badge-basic-bg: var(--course-badge-default-bg);
    --course-badge-basic-bgi: linear-gradient(107deg, rgb(158, 251, 255, 0.5) -26%, rgb(131, 173, 255, 0.5) 136%);
    --course-badge-basic-fg: #fff;
    --course-badge-basic-invalid-bg: var(--course-badge-default-bg);
    --course-badge-basic-invalid-bgi: linear-gradient(107deg, rgb(158, 251, 255, 0.5) -26%, rgb(131, 173, 255, 0.5) 136%);
    --course-badge-basic-invalid-fg: #fff;
    --course-badge-paid-bg: var(--course-badge-default-bg);
    --course-badge-paid-bgi: linear-gradient(107deg, rgb(126, 255, 244, 0.5) -26%, rgb(102, 204, 102, 0.5) 136%);
    --course-badge-paid-fg: #fff;
    --course-badge-paid-invalid-bg: var(--course-badge-default-bg);
    --course-badge-paid-invalid-bgi: linear-gradient(107deg, rgb(126, 255, 244, 0.5) -26%, rgb(102, 204, 102, 0.5) 136%);
    --course-badge-paid-invalid-fg: #fff;
    --course-badge-enterprise-bg: var(--course-badge-default-bg);
    --course-badge-enterprise-bgi: linear-gradient(92.32deg, rgba(207, 209, 254, 0.5) 47.03%, rgba(158, 139, 212, 0.5) 100.95%);
    --course-badge-enterprise-fg: #fff;
    --course-badge-spec-bg: #6C7BDF;
    --course-badge-spec-bgi: none;
    --course-badge-spec-fg: #fff
  }

  .nav-menu__menu {
    --menu-item-padding-h: 16px;
    --menu-item-color: #c9c9cf;
    --menu-item-hover-color: #fff;
    --menu-item-selected-color: #66cc66;
    --menu-item-hover-background: rgba(255, 255, 255, 0.05);
    --menu-item-active-background: rgba(255, 255, 255, 0.1);
    --menu-item-divider-color: #535366;
    --menu-item-disabled-opacity: 0.4
  }

  .nav-menu__menu .menu-item-divider {
    margin-left: 0;
    margin-right: 0
  }
}

.course-nav__cover {
  height: 56px;
  width: 56px;
  margin: 0 0 16px;
  border-radius: 8px;
  border: 1px solid #eaecf0;
  background-color: #eaecf0;
  box-sizing: content-box
}

.course-nav__title {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .15px
}

.course-nav__badges {
  display: flex;
  flex-wrap: wrap;
  margin: -4px -6px 20px
}

.course-nav__badges>* {
  margin: 4px 6px
}

.course-nav__badges:empty {
  display: none
}

.button:not(.st-button_style_none).course-nav__course-preview,
.button:not(.st-button_style_none).course-nav__publish-btn {
  margin: 0 0 16px;
  padding: 9px 24px
}

.course-nav__course-join {
  display: block;
  margin: 0 0 16px
}

.course-nav__course-join .button:not(.st-button_style_none),
.course-nav__course-join button:not(.st-button_style_none) {
  padding: 9px 24px
}

.course-nav__site-menu-mobile {
  margin-top: 64px;
  padding-top: 16px;
  border-top: 1px solid var(--menu-item-divider-color)
}

.course-nav__watermark-logo {
  margin-top: 47px;
  height: 24px;
  opacity: .37
}

.course-nav__menu-item-platform-news .nav-menu__menu-item-badge {
  all: revert;
  margin: 0 0 0 8px
}

.course-nav__course-stat {
  margin: 0 0 24px
}

.course-nav__course-stat>meter {
  --meter-color: #54ad54;
  --meter-background: #eaeaea;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px
}

.course-nav__course-stat>p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px
}

@media (min-width:769px) {

  .course-nav__site-menu-mobile,
  .course-nav__watermark-logo {
    display: none
  }
}

@media (max-width:768px) {

  .course-nav__badges,
  .course-nav__course-join,
  .course-nav__course-preview,
  .course-nav__course-stat,
  .course-nav__cover,
  .course-nav__publish-btn,
  .course-nav__title {
    display: none !important
  }
}

.learn-nav__header-img,
.teach-nav__header-img {
  flex-shrink: 0;
  width: 264px;
  height: 72px;
  margin: 0 0 24px
}

.teach-nav__new-course-btn.button:not(.st-button_style_none) {
  align-self: flex-start;
  margin: 0 0 16px;
  padding: 9px 16px
}

.learn-nav__menu:not([data-is-tabs]),
.teach-nav__menu:not([data-is-tabs]) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column
}

.learn-featured-course-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  max-width: 496px;
  min-width: 328px;
  min-height: 246px;
  border-radius: 16px;
  background-image: linear-gradient(92.32deg, #f4f5fd 47.03%, #e9f2ff 100.95%);
  --skeleton-color-1: #fff;
  --skeleton-color-2: #f3f4f6;
  transition: box-shadow .1s
}

.learn-featured-course-card:hover {
  box-shadow: 0 0 0 1px #E9EBFA, 1px 2px 12px rgba(156, 166, 230, .5)
}

.learn-featured-course-card[data-state=done] {
  background-image: url(/static/frontend/tak/success.svg), linear-gradient(92.32deg, #E8FCF2 47.03%, #E2F4FF 100.95%);
  background-size: 120px auto, auto;
  background-repeat: no-repeat;
  background-position: 65% calc(100% - 20px), 0 0
}

.lfcc__header {
  display: flex;
  margin-bottom: 18px
}

.lfcc__title {
  flex: 1;
  margin: 0 16px 0 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: .15px;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.learn-last-activity__section,
.lfcc__footer-note,
.lfcc__progress-stat-items>p {
  line-height: 14px;
  letter-spacing: .4px;
  font-size: 12px
}

.lfcc__cover {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #fff
}

.lfcc__link-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  border-radius: inherit
}

.learn-featured-course-card {
  position: relative
}

.learn-featured-course-card>* {
  z-index: 1;
  pointer-events: none
}

.learn-featured-course-card .ember-tooltip-target,
.learn-featured-course-card [tabindex="0"],
.learn-featured-course-card a,
.learn-featured-course-card button {
  pointer-events: auto
}

.lfcc__progress>meter {
  --meter-color: #54ad54;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px
}

.lfcc__progress-stat {
  display: flex;
  margin-top: 8px
}

.lfcc__progress-stat-items {
  flex: 1
}

.lfcc__progress-stat-items>p {
  margin: 0
}

.lfcc__progress-stat-items>p+p {
  margin-top: 8px
}

.lfcc__footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 8px 16px
}

.lfcc__footer-action-wrapper {
  align-self: flex-start;
  flex: 1;
  display: inline-flex
}

.lfcc__footer-action-wrapper .button:not(.st-button_style_none),
.lfcc__footer-action-wrapper button:not(.st-button_style_none) {
  padding: 9px 24px
}

.lfcc__footer-note {
  align-self: flex-start
}

.lfcc__footer-cert-info:hover .svg-icon {
  color: #999
}

.lfcc__footer-cert-info .svg-icon {
  margin-left: 2px;
  color: #ccc
}

.lfcc__footer-cert-info .svg-icon svg {
  transform: scale(1.4)
}

.lfcc__footer-unavailable-info .svg-icon {
  margin-left: 2px;
  color: #d41f1f
}

.lfcc__footer-unavailable-info .svg-icon svg {
  transform: scale(1.5)
}

.learn-last-activity {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 416px
}

html.no-flexbox-gap .learn-last-activity__section {
  margin: 0 16px 16px 0
}

.learn-last-activity[data-loading] .learn-last-activity__stat-item b {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  background-image: linear-gradient(to right, var(--skeleton-color-1, #eee) 8%, var(--skeleton-color-2, #ddd) 18%, var(--skeleton-color-1, #eee) 33%) !important;
  background-size: 1000px 104px !important;
  position: relative;
  border: none !important;
  cursor: default !important;
  border-radius: 4px !important;
  pointer-events: none !important;
  color: transparent !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important
}

.learn-last-activity__section {
  padding: 24px;
  border-radius: 16px;
  background-color: #fcfcfc
}

.learn-last-activity__section-title {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase
}

.learn-last-activity__stat-item {
  display: flex;
  align-items: center
}

.learn-last-activity__stat-item>.svg-icon {
  margin-right: 8px;
  padding: 1px;
  font-size: 22px
}

.learn-last-activity__stat-item b {
  margin-right: 2px;
  font-weight: 500;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: .15px
}

.learn-last-activity__stat-item+.learn-last-activity__stat-item {
  margin-top: 10px
}

.learn-last-activity__pins {
  display: flex
}

.learn-last-activity__pin {
  padding: 3px;
  min-width: 24px;
  border-radius: 4px;
  text-align: center;
  cursor: help
}

.learn-last-activity__pin+.learn-last-activity__pin {
  margin-left: 2px
}

.learn-last-activity__pin[data-current] {
  border: 1px solid #9ca6e6;
  color: #3e50cb
}

.learn-last-activity__pin[data-quizzes-solved]:not([data-quizzes-solved="0"]) {
  background-color: #E9EBFA
}

.learn-last-activity__pin-weekday {
  display: block;
  font-weight: 500;
  font-size: 10px;
  line-height: 16px
}

.learn-last-activity__pin-day {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 12px
}

.learn-last-activity__days-streak {
  color: #6c7bdf
}

.learn-last-activity__days-streak b {
  color: #3e50cb
}

.learn-last-activity__quiz-streak {
  flex: 1;
  display: flex;
  flex-direction: column
}

.learn-last-activity__quiz-streak-body {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 12px
}

html.no-flexbox-gap .learn-last-activity__quiz-streak-body>.learn-last-activity__stat-item {
  margin-top: 8px
}

.learn-last-activity-pin {
  max-width: 24px;
  text-align: center
}

.learn-last-activity-pin[data-is-future] .learn-last-activity-pin__streak {
  border: 1px solid #5e5e5e;
  background-color: #333;
  padding: 1px
}

.learn-last-activity-pin[data-is-future] .learn-last-activity-pin__caption {
  color: rgba(255, 255, 255, .6)
}

.learn-last-activity-pin[data-is-today] .learn-last-activity-pin__streak {
  border: 2px solid #fff;
  background-color: transparent;
  padding: 0
}

.learn-last-activity-pin[data-is-current]:not([data-is-today]) .learn-last-activity-pin__caption {
  border-bottom: 1px solid rgba(255, 255, 255, .8)
}

.learn-last-activity-pin[data-is-solved] .learn-last-activity-pin__streak {
  background-color: #6c6
}

.learn-last-activity-pin[data-is-solved] .learn-last-activity-pin__streak::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 13px;
  height: 13px;
  -webkit-mask-image: url(/static/frontend/common_icons/check.svg);
  mask-image: url(/static/frontend/common_icons/check.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  background-color: #fff
}

[data-theme=light] .learn-last-activity-pin .learn-last-activity-pin__streak {
  background-color: #ccc
}

[data-theme=light] .learn-last-activity-pin .learn-last-activity-pin__caption {
  color: #222
}

[data-theme=light] .learn-last-activity-pin[data-is-future] .learn-last-activity-pin__streak {
  border: none;
  background-color: #EAEAEA
}

[data-theme=light] .learn-last-activity-pin[data-is-future] .learn-last-activity-pin__caption {
  color: #777
}

[data-theme=light] .learn-last-activity-pin[data-is-today] .learn-last-activity-pin__streak {
  border: 2px solid #54ad54;
  background-color: #fff
}

[data-theme=light] .learn-last-activity-pin[data-is-current]:not([data-is-today]) .learn-last-activity-pin__caption {
  border-bottom: 1px solid rgba(84, 173, 84, .8)
}

[data-theme=light] .learn-last-activity-pin[data-is-solved] .learn-last-activity-pin__streak {
  background-color: #6c6
}

.learn-last-activity-pin__caption {
  display: flex;
  justify-content: center;
  height: 16px;
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: .11px;
  color: #fff
}

.learn-last-activity-pin__streak {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 2px;
  background-color: #5e5e5e;
  border-radius: 4px
}

.learn-last-activity-pin__caption+.learn-last-activity-pin__streak {
  margin-top: 4px
}

.learn-last-activity-week {
  display: inline-flex;
  gap: 4px
}

.learn-last-activity-card {
  height: 246px;
  width: 416px;
  padding: 24px;
  border-radius: 16px;
  display: grid;
  grid-template-areas: "icon title title action" "icon desc desc action" "streak streak timer timer" "advice advice advice advice" ". . . ." "stat stat stat stat";
  align-items: start;
  grid-template-columns: -webkit-min-content 1fr -webkit-min-content -webkit-min-content;
  grid-template-columns: min-content 1fr min-content min-content;
  grid-template-rows: -webkit-min-content -webkit-min-content -webkit-min-content -webkit-min-content 1fr -webkit-min-content;
  grid-template-rows: min-content min-content min-content min-content 1fr min-content;
  gap: 16px;
  color: var(--last-activity-card-color, #fff);
  background-color: var(--last-activity-card-bg-color, #222);
  background-image: var(--last-activity-card-bgi);
  border: 1px solid transparent;
  border-color: var(--last-activity-card-border-color, transparent);
  -webkit-font-smoothing: antialiased
}

.learn-last-activity-card[data-theme=light],
[data-theme=light] .learn-last-activity-card {
  --last-activity-card-color: #222;
  --last-activity-card-bg-color: #FCFCFC;
  --last-activity-card-border-color: #EAEAEA;
  --last-activity-card-icon-neutral: #ccc;
  --last-activity-card-icon-success: #54ad54
}

.learn-last-activity-card[data-theme=light][data-is-active],
[data-theme=light] .learn-last-activity-card[data-is-active] {
  --last-activity-card-bgi: linear-gradient(124deg, #E8FCF2 0%, #E2F4FF 100%);
  --last-activity-card-border-color: transparent
}

.learn-last-activity-card[data-card-type=navbar] {
  width: 362px;
  height: auto;
  border-radius: 4px;
  padding: 16px 24px 24px;
  grid-template-areas: "icon title" "icon advice" "icon timer" "streak streak";
  grid-template-columns: -webkit-min-content 1fr;
  grid-template-columns: min-content 1fr;
  grid-template-rows: repeat(4, -webkit-min-content);
  grid-template-rows: repeat(4, min-content)
}

.learn-last-activity-card[data-card-type=navbar] .learn-last-activity-card__advice {
  margin-top: -14px
}

.learn-last-activity-card[data-card-type=navbar] .learn-last-activity-card__timer {
  margin-top: -14px;
  margin-bottom: 8px
}

.learn-last-activity-card[data-is-active] .learn-last-activity-card__timer {
  display: none
}

.learn-last-activity-card[data-is-active] .learn-last-activity-card__week {
  margin-top: -8px
}

.learn-last-activity-card__icon {
  grid-area: icon;
  color: var(--last-activity-card-icon-neutral, #5e5e5e)
}

.learn-last-activity-card__icon,
.learn-last-activity-card__icon svg {
  width: 40px;
  height: 40px
}

.learn-last-activity-card__icon[data-is-active],
.learn-last-activity-card__icon[data-is-bestresult],
.learn-last-activity-card__icon[data-is-streak] {
  color: var(--last-activity-card-icon-success, #fff)
}

.learn-last-activity-card__title {
  grid-area: title;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .15px
}

.learn-last-activity-card__title b {
  font-weight: 500
}

.learn-last-activity-card__advice,
.learn-last-activity-card__desc,
.learn-last-activity-card__stat,
.learn-last-activity-card__tip {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px
}

.learn-last-activity-card__advice b,
.learn-last-activity-card__desc b,
.learn-last-activity-card__stat b,
.learn-last-activity-card__tip b {
  font-weight: 400
}

.learn-last-activity-card__desc {
  grid-area: desc;
  margin-top: -12px
}

.learn-last-activity-card__tip {
  grid-area: advice;
  margin-top: -8px
}

.learn-last-activity-card__week {
  grid-area: streak
}

.learn-last-activity-card__advice {
  grid-area: advice;
  margin-top: -8px;
  opacity: .6
}

.learn-last-activity-card__timer {
  grid-area: timer;
  align-self: end;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .15px
}

.learn-last-activity-card__timer .time-left {
  display: flex
}

.learn-last-activity-card__timer [data-sep]+[data-part] {
  margin-left: 4px
}

.learn-last-activity-card__timer [data-sep] {
  display: none
}

.learn-last-activity-card__timer [data-label] {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px
}

@media (max-width:390px) {
  .learn-last-activity-card__timer {
    font-size: 15px;
    padding-bottom: 4px
  }

  .learn-last-activity-card__timer .learn-last-activity-card__timer [data-label] {
    font-size: 9px
  }
}

.learn-last-activity-card__stat {
  grid-area: stat;
  display: flex;
  gap: 16px
}

.learn-last-activity-card__stat-item b {
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .15px
}

.learn-last-activity-dropdown[data-is-result-now] {
  -webkit-animation: toggler-highlight .5s alternate 2;
  animation: toggler-highlight .5s alternate 2
}

@media (max-width:576px) {
  .learn-last-activity-dropdown .drop-down__body {
    width: 100vw;
    right: -60px
  }

  .learn-last-activity-dropdown .learn-last-activity-dropdown__card {
    width: auto
  }
}

.learn-last-activity-dropdown__toggler {
  color: var(--last-activity-toggler-btn-color, #fff);
  display: flex;
  align-items: center;
  gap: 4px;
  transition-property: color, background-color;
  transition-duration: .3s
}

.learn-last-activity-dropdown__toggler[data-is-loading] .learn-last-activity-dropdown__counter {
  opacity: .5
}

.learn-last-activity-dropdown__toggler.st-button_style_none {
  background-color: var(--last-activity-toggler-bg-color, #333);
  height: 36px;
  padding: 8px;
  border-radius: 4px
}

.learn-last-activity-dropdown__toggler:hover {
  --last-activity-toggler-bg-color: rgba(102, 204, 102, 0.12);
  --last-activity-toggler-counter-color: #fff
}

.learn-last-activity-dropdown__icon {
  border-radius: 4px
}

.learn-last-activity-dropdown__icon,
.learn-last-activity-dropdown__icon svg {
  display: flex;
  width: 20px;
  height: 20px
}

.learn-last-activity-dropdown__card[data-card-type=navbar] {
  border-radius: 0 0 4px 4px
}

.learn-last-activity-dropdown__counter {
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: .3px;
  text-transform: capitalize;
  color: var(--last-activity-toggler-counter-color, rgba(255, 255, 255, .75));
  transition-property: color, opacity;
  transition-duration: .3s;
  -webkit-font-smoothing: antialiased
}

.learn-last-activity-dropdown__counter:empty {
  margin-left: -4px
}

@-webkit-keyframes toggler-highlight {
  100% {
    --last-activity-toggler-bg-color: rgba(102, 204, 102, 0.12);
    --last-activity-toggler-btn-color: #66cc66;
    --last-activity-toggler-counter-color: #66cc66
  }
}

@keyframes toggler-highlight {
  100% {
    --last-activity-toggler-bg-color: rgba(102, 204, 102, 0.12);
    --last-activity-toggler-btn-color: #66cc66;
    --last-activity-toggler-counter-color: #66cc66
  }
}

.last-activity-stats {
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0;
  padding-top: 15px
}

.last-activity-stats__value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 3px
}

.last-activity-stats__desc {
  font-size: 14px;
  color: #777;
  margin: 0;
  padding-right: 1em
}

.licl {
  list-style: none;
  margin: 0
}

.licl__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 8px 12px
}

.licl__item+.licl__item {
  margin-top: 24px
}

.licl__item[data-unavailable] .licl__cover,
.licl__item[data-unavailable] .licl__progress,
.licl__item[data-unavailable] .licl__title {
  opacity: .38
}

.licl__cover,
.licl__cover-link {
  grid-row: span 2;
  height: 32px;
  width: 32px;
  border-radius: 4px
}

.licl__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .15px;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.licl__title[data-skeleton] {
  grid-column: span 2
}

.licl__title-link {
  --link-line: underline;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222;
  --link-color: initial;
  --link-hover-color: initial;
  --link-active-color: initial;
  --link-hover-line-color: currentColor;
  --link-active-line-color: currentColor;
  --link-line-color: transparent;
  --link-line-offset: .1em
}

.licl__progress {
  align-self: baseline;
  margin-left: 2px;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .4px
}

.licl__progress>.progress-pie {
  margin-right: 4px;
  font-size: 13px;
  color: #54ad54
}

.licl__item-action,
button:not(.st-button_style_none).licl__item-action {
  grid-column: span 2;
  justify-self: start;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .15px;
  --link-color: #54ad54;
  --link-hover-color: initial;
  --link-active-color: initial;
  --link-disabled-color: rgba(84, 173, 84, 0.5);
  --link-line-color: transparent;
  --link-hover-line-color: #54ad54;
  --link-active-line-color: #54ad54
}

.licl__item-action>.svg-icon,
button:not(.st-button_style_none).licl__item-action>.svg-icon {
  display: inline-flex;
  margin-left: 5px;
  font-size: 10px
}

.licl__item-action[data-appearance=label-danger],
button:not(.st-button_style_none).licl__item-action[data-appearance=label-danger] {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px;
  color: #ff7965
}

.course-badge {
  display: none;
  align-items: center;
  vertical-align: center;
  padding: var(--course-badge-padding, 1px 6px);
  height: var(--course-badge-height, 24px);
  position: relative;
  top: var(--course-badge-top, auto);
  font-size: var(--course-badge-font-size, 9px);
  font-weight: var(--course-badge-font-weight, 600);
  line-height: var(--course-badge-line-height, normal);
  letter-spacing: var(--course-badge-letter-spacing, 1px);
  text-transform: var(--course-badge-text-transform, uppercase);
  color: var(--course-badge-default-fg);
  background-color: var(--course-badge-default-bg);
  background-image: var(--course-badge-default-bgi);
  --link-line: none;
  border-radius: 4px
}

.course-badge .svg-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  margin-right: 6px;
  font-size: var(--course-badge-icon-size, 12px)
}

.course-badge .svg-icon svg {
  width: 100%;
  height: 100%
}

.course-badge[data-type=basic],
.course-badge[data-type=basic_invalid],
.course-badge[data-type=basic_paid],
.course-badge[data-type=basic_paid_invalid],
.course-badge[data-type=deprecated],
.course-badge[data-type=draft],
.course-badge[data-type=enterprise],
.course-badge[data-type=private],
.course-badge[data-type=spec] {
  display: inline-flex
}

.course-badge[data-type=private] {
  color: var(--course-badge-private-fg);
  background-color: var(--course-badge-private-bg);
  background-image: var(--course-badge-private-bgi)
}

.course-badge[data-type=draft] {
  color: var(--course-badge-draft-fg);
  background-color: var(--course-badge-draft-bg);
  background-image: var(--course-badge-draft-bgi)
}

.course-badge[data-type=deprecated] {
  color: var(--course-badge-basic-invalid-fg);
  background-color: var(--course-badge-basic-invalid-bg);
  background-image: var(--course-badge-basic-invalid-bgi)
}

.course-badge[data-type=basic] {
  color: var(--course-badge-basic-fg);
  background-color: var(--course-badge-basic-bg);
  background-image: var(--course-badge-basic-bgi)
}

.course-badge[data-type=basic_invalid] {
  color: var(--course-badge-basic-invalid-fg);
  background-color: var(--course-badge-basic-invalid-bg);
  background-image: var(--course-badge-basic-invalid-bgi)
}

.course-badge[data-type=basic_paid] {
  color: var(--course-badge-paid-fg);
  background-color: var(--course-badge-paid-bg);
  background-image: var(--course-badge-paid-bgi)
}

.course-badge[data-type=basic_paid_invalid] {
  color: var(--course-badge-paid-invalid-fg);
  background-color: var(--course-badge-paid-invalid-bg);
  background-image: var(--course-badge-paid-invalid-bgi)
}

.course-badge[data-type=enterprise] {
  color: var(--course-badge-enterprise-fg);
  background-color: var(--course-badge-enterprise-bg);
  background-image: var(--course-badge-enterprise-bgi)
}

.course-badge[data-type=spec] {
  color: var(--course-badge-spec-fg);
  background-color: var(--course-badge-spec-bg);
  background-image: var(--course-badge-spec-bgi)
}

.course-tariff-badge {
  --course-badge-default-bg: transparent;
  --course-badge-default-bgi: linear-gradient(106deg, #e7f2ff -26%, #f1f1f4 135%);
  --course-badge-default-fg: #535366;
  --course-badge-private-bg: var(--course-badge-default-bg);
  --course-badge-private-bgi: linear-gradient(105deg, #f6faff -26%, #c8e2ff 135%);
  --course-badge-private-fg: #4485ed;
  --course-badge-draft-bg: #999;
  --course-badge-draft-bgi: none;
  --course-badge-draft-fg: #fff;
  --course-badge-basic-bg: var(--course-badge-default-bg);
  --course-badge-basic-bgi: linear-gradient(107deg, #e7f2ff -26%, #e3fff0 136%);
  --course-badge-basic-fg: #56a4ff;
  --course-badge-basic-invalid-bg: #FFEBE8;
  --course-badge-basic-invalid-bgi: none;
  --course-badge-basic-invalid-fg: #d41f1f;
  --course-badge-paid-bg: var(--course-badge-default-bg);
  --course-badge-paid-bgi: linear-gradient(107deg, #e7f2ff -26%, #cbffd2 136%);
  --course-badge-paid-fg: #54ad54;
  --course-badge-paid-invalid-bg: #FFEBE8;
  --course-badge-paid-invalid-bgi: none;
  --course-badge-paid-invalid-fg: #d41f1f;
  --course-badge-enterprise-bg: var(--course-badge-default-bg);
  --course-badge-enterprise-bgi: linear-gradient(93.02deg, #2A264D -20.29%, #5F5ACE 86.05%);
  --course-badge-enterprise-fg: #fff;
  --course-badge-spec-bg: #6C7BDF;
  --course-badge-spec-bgi: none;
  --course-badge-spec-fg: #fff;
  --course-badge-padding: 1px 6px;
  --course-badge-height: 16px;
  --course-badge-font-size: 10px;
  --course-badge-font-weight: 500;
  --course-badge-line-height: normal;
  --course-badge-letter-spacing: 0.11px;
  --course-badge-text-transform: none;
  --course-badge-icon-size: 10px
}

.course-tariff-badge:not([data-type=basic_invalid]):not([data-type=basic_paid_invalid]):not([data-type=enterprise]) {
  display: none
}

.lessons-paid-features .paid-features__list-item[data-owner-type=lesson] {
  --marker-width: 40px
}

.course-paid-features .paid-features__list-item,
.lessons-paid-features .paid-features__list-item[data-owner-type=step] {
  --marker-width: 28px
}

.paid-features__modal-popup {
  --modal-popup-width: 640px;
  --modal-popup-max-width: calc(100vw - 24px);
  --modal-popup-min-width: 0
}

.paid-features__modal-popup .paid-features__content {
  max-height: min(calc(100vh - 400px), 490px);
  min-height: 40px;
  overflow: auto;
  --custom-scrollbar-background: #fff;
  --custom-scrollbar-thumb-color: #e6e9ed;
  --custom-scrollbar-thumb-hover-color: #b7b7b7;
  --custom-scrollbar-thumb-active-color: #5e5e5e;
  --custom-scrollbar-resize-grip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23ccc'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>");
  margin: -8px;
  padding: 8px
}

.paid-features__modal-popup .paid-features__content::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--custom-scrollbar-background)
}

.paid-features__modal-popup .paid-features__content::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-background)
}

.paid-features__modal-popup .paid-features__content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-thumb-color);
  border: 3px solid var(--custom-scrollbar-background)
}

.paid-features__modal-popup .paid-features__content::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover-color)
}

.paid-features__modal-popup .paid-features__content::-webkit-scrollbar-thumb:active {
  background-color: var(--custom-scrollbar-thumb-active-color)
}

.paid-features__modal-popup .paid-features__content::-webkit-scrollbar-corner {
  background-color: var(--custom-scrollbar-background)
}

.paid-features__modal-popup .paid-features__content::-webkit-resizer {
  background-image: var(--custom-scrollbar-resize-grip);
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: 2px 2px
}

@media (max-width:768px) {
  .licl__item {
    grid-template-columns: auto 1fr auto
  }

  .paid-features__modal-popup .paid-features__content {
    max-height: min(calc(100vh - 260px), 490px)
  }
}

@media (max-width:576px) {
  .paid-features__modal-popup .paid-features__content {
    max-height: min(calc(100vh - 330px), 490px)
  }
}

.paid-features__features-list {
  list-style: none;
  margin: 0;
  padding-left: 2px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.paid-features__list-item {
  --marker-width: 28px;
  --section-offset: var(--marker-width);
  --list-item-checkbox-marker-left-offset: -0.125em;
  --list-item-checkbox-marker-top-offset: 8px;
  --list-item-checkbox-marker-space: var(--marker-width);
  --list-item-checkbox-marker-size: 20px;
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px
}

.paid-features__list-item[data-marker=not-satisfied]::before,
.paid-features__list-item[data-marker=satisfied]::before {
  left: var(--list-item-checkbox-marker-left-offset, 0);
  top: var(--list-item-checkbox-marker-top-offset, .125em);
  display: inline-block;
  width: var(--list-item-checkbox-marker-size, 1.25em);
  height: var(--list-item-checkbox-marker-size, 1.25em)
}

.paid-features__list-item[data-marker=not-satisfied] {
  position: relative;
  padding-left: var(--list-item-checkbox-marker-space, 1.7em);
  will-change: transform
}

.paid-features__list-item[data-marker=not-satisfied]::before {
  content: url(/static/frontend/common_icons/list-red-cross-mark.svg);
  position: absolute
}

.paid-features__list-item[data-marker=satisfied] {
  position: relative;
  padding-left: var(--list-item-checkbox-marker-space, 1.7em);
  will-change: transform
}

.paid-features__list-item[data-marker=satisfied]::before {
  content: url(/static/frontend/common_icons/list-check-mark.svg);
  position: absolute
}

.paid-features__list-item[data-marker=pos]::before {
  content: attr(data-pos);
  min-width: var(--marker-width);
  padding: 0 2px 0 0;
  font-weight: 500;
  letter-spacing: .15px
}

.paid-features__list-item>span {
  flex: 1;
  margin-right: 16px
}

.paid-features__list-item>span>.feature-tariff-badge {
  vertical-align: bottom;
  top: 0;
  margin-left: 6px
}

.paid-features__list-item-section {
  padding-bottom: 0
}

.paid-features__list-item-section:not(:first-child) {
  margin-top: 12px
}

.paid-features__list-item-section>span {
  font-weight: 500;
  letter-spacing: .15px
}

.paid-features__list-item-section>ul {
  list-style: none;
  flex-basis: 100%;
  margin: 4px 0 0 var(--section-offset);
  line-height: inherit
}

.paid-features__collapsible-block-title {
  display: flex;
  align-items: center;
  margin: 24px 0 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px;
  color: #999
}

.paid-features__collapsible-block-title:first-child {
  margin-top: 0
}

.paid-features__collapsible-block-title::after {
  content: "";
  flex: 1;
  margin-left: 8px;
  border-bottom: 1px solid #f3f4f6
}

.paid-features__collapsible-block-title>button:not(.st-button_style_none).btn-details {
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  --btn-details-color: currentColor;
  --btn-details-arrow-color: #ccc;
  --btn-details-arrow-size: 9px;
  --btn-details-arrow-offset: 4px;
  --btn-details-valign: baseline
}

.paid-features__list-item-link-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0
}

.paid-features__list-item-link-wrapper~.paid-features__edit-link,
.paid-features__list-item-link-wrapper~.paid-features__view-link {
  z-index: 1
}

.paid-features__list-item-link-wrapper:hover~.paid-features__edit-link,
.paid-features__list-item-link-wrapper:hover~.paid-features__view-link {
  color: var(--link-hover-color, var(--link-color));
  -webkit-text-decoration-color: var(--link-hover-line-color, var(--link-line-color));
  text-decoration-color: var(--link-hover-line-color, var(--link-line-color))
}

.paid-features__list-item-link-wrapper:active~.paid-features__edit-link,
.paid-features__list-item-link-wrapper:active~.paid-features__view-link {
  color: var(--link-active-color, var(--link-color));
  -webkit-text-decoration-color: var(--link-active-line-color, var(--link-line-color));
  text-decoration-color: var(--link-active-line-color, var(--link-line-color))
}

.paid-features__edit-link,
.paid-features__view-link {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.paid-features__view-link {
  opacity: .38
}

.paid-features__view-link:focus,
.paid-features__view-link:hover {
  opacity: 1
}

.paid-features__edit-icon-link,
.paid-features__view-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  padding: 2px;
  margin: -2px;
  box-sizing: content-box;
  text-decoration: none
}

.paid-features__edit-icon-link svg,
.paid-features__view-icon-link svg {
  display: flex
}

.paid-features__edit-icon-link {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5);
  font-size: 16px
}

.paid-features__view-icon-link {
  font-size: 13px;
  color: #ccc
}

.paid-features__view-icon-link:focus,
.paid-features__view-icon-link:hover {
  color: #5e5e5e
}

.lesson-paid-features__step-pin {
  --step-pin-icon-size: 20px;
  --step-pin-icon-icon-size: 14px;
  --step-pin-icon-subicon-size: 8px;
  --step-pin-icon-color: #fff;
  --step-pin-icon-subicon-color: #fff;
  margin-right: 4px;
  vertical-align: top;
  background-color: #535366;
  border-radius: 4px
}

.show-more[data-truncatable-unknown]:not([data-expanded]),
.show-more[data-truncated] {
  max-height: calc(var(--max-height) * 1px);
  overflow: hidden
}

.show-more[data-truncated] {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, var(--show-more-fog));
  mask-image: linear-gradient(to bottom, #000 0, var(--show-more-fog))
}

.show-more__content {
  position: relative
}

[data-validation-invalid] {
  --validation-border-color: var(--validation-var-border-color);
  --validation-bg-color: var(--validation-var-bg-color);
  --validation-fg-color: var(--validation-var-fg-color)
}

.player-content-wrapper {
  position: initial;
  display: flex;
  margin-top: 20px
}

.fullscreen.lesson-wrapper {
  padding: 0
}

.fullscreen .lesson-player {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0;
  position: absolute;
  margin: 0
}

.step-dynamic-container,
.step-view {
  min-height: 100%
}

.step-dynamic-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%
}

.profile-social-icon,
.profile-social-icon svg {
  height: 18px;
  width: 18px
}

.step-dynamic-container>.step-view {
  min-height: 100%;
  padding: 0;
  border: none
}

.upgrade-course-modal-dialog__features-list {
  margin: 16px 0 24px;
  font-size: 14px
}

.upgrade-course-modal-dialog__text a {
  text-decoration: underline;
  font-size: 14px
}

.user-edit__page-wrapper {
  padding-top: 2em;
  padding-bottom: 2em
}

.user-edit__page-wrapper textarea {
  resize: none
}

.profile-social-icon {
  display: inline-block;
  top: 3px
}

.user-edit__emails-table,
.user-edit__form,
.user-edit__social-label {
  width: 100%
}

.form__header {
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 2rem;
  margin-top: 0
}

.user-edit__settings-divider {
  margin: 15px 0;
  border-top: 1px solid #f3f4f6
}

.user-edit__image-field {
  padding: 16px;
  background-color: #F6F6F6;
  border-radius: 4px;
  margin-bottom: 32px
}

.user-edit__image-field-note {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.user-edit__image-field-pic+.user-edit__image-field-note {
  margin-top: 16px
}

.user-edit__image-field-pic {
  max-height: 128px
}

.user-edit__image-field-pic[data-is-avatar] {
  max-width: 128px;
  border-radius: 16px
}

.user-edit__image-field-tools {
  margin-top: 16px;
  font-size: 14px
}

button:not(.st-button_style_none).user-edit__image-upload {
  margin-right: 16px
}

.user-edit__connected {
  vertical-align: middle;
  font-weight: 700
}

.user-edit__social-base-url {
  position: relative;
  padding-left: 5px
}

.user-edit__social-base-url[data-has-footnote]::after {
  content: "*";
  color: var(--theme-color-fg-primary);
  position: absolute;
  right: -1em
}

.user-edit__social-base-url[data-has-footnote]::after:hover {
  color: var(--theme-color-base-danger-1)
}

.user-edit__footnote {
  margin-top: 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px;
  color: var(--theme-color-fg-secondary)
}

.user-edit__footnote span,
.user-edit__footnote:hover {
  color: var(--theme-color-fg-primary)
}

.user-edit__footnote:hover span {
  color: var(--theme-color-base-danger-2)
}

.user-edit__course-subscription-cover {
  width: 32px;
  height: 32px
}

.klass-gradebook__section-toggler,
.klass-gradebook__section-toggler svg,
.user-edit__city-name svg {
  width: 16px;
  height: 16px
}

.user-edit {
  padding-bottom: 50px
}

.user-edit .horizontal-scroll-menu-widget__list li {
  min-width: 230px
}

.user-edit__city-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap
}

.user-edit__city-autocomplete {
  display: block;
  width: 100%
}

.user-edit__reset-link {
  display: inline-block;
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 18px
}

@media (max-width:1024px) {
  .page-content.user-edit {
    padding-top: 0
  }

  .user-edit__reset-link {
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem
  }
}

@media (min-width:768px) {
  .user-edit__social-base-url {
    float: right
  }
}

@media (min-width:1024px) {
  .user-edit .horizontal-scroll-menu-widget {
    display: block;
    white-space: normal;
    flex-basis: 25%;
    max-width: 25%;
    border: none;
    padding-right: 1em
  }

  .user-edit .horizontal-scroll-menu-widget__list {
    display: block;
    margin-bottom: 1em
  }

  .user-edit .horizontal-scroll-menu-widget__list li {
    text-align: left
  }

  .user-edit .horizontal-scroll-menu-widget__link {
    text-decoration: none;
    padding: 15px 20px;
    background: #fff;
    display: flex;
    color: #5e5e5e;
    border: 1px solid #ccc;
    margin-bottom: -1px
  }

  .user-edit .horizontal-scroll-menu-widget__link.active {
    outline: 0;
    border-top: solid 3px #6c6
  }

  .user-edit .user-edit__page-wrapper {
    padding-top: 0
  }
}

.klass {
  padding: 0 0 100px;
  display: grid;
  grid-template-areas: "title title" "nav content";
  grid-template-columns: auto minmax(0, 1fr)
}

.klass__title {
  grid-area: title;
  margin: 30px 0 32px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3
}

.klass__nav {
  grid-area: nav
}

.klass__content {
  grid-area: content
}

.klass__invite {
  display: grid;
  grid-template-columns: -webkit-max-content -webkit-max-content auto;
  grid-template-columns: max-content max-content auto;
  grid-gap: 8px 24px;
  align-items: center
}

.klass__invite>span {
  grid-column: 1/span 3;
  font-size: 14px;
  line-height: 1.17;
  letter-spacing: .4px
}

.klass__invite>.invitation-item {
  min-width: 0;
  max-width: none;
  font-size: 14px
}

.klass__invite>.clipboard-button>button {
  padding: 7px 16px;
  font-size: 14px;
  white-space: nowrap
}

.klass__subtitle {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .15px
}

.klass-gradebook__block+.klass-gradebook__block {
  margin-top: 32px
}

.klass-gradebook__report-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: -4px -12px
}

.klass-gradebook__report-buttons>.button,
.klass-gradebook__report-buttons>button {
  margin: 4px 12px;
  padding: 9px 24px
}

.klass-gradebook__report-loading {
  display: inline-block;
  padding: 9px 24px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px;
  color: #3e50cb
}

.klass-gradebook__attachments-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0 0
}

.klass-gradebook__attachments-note {
  margin: 4px 16px 4px 0;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px
}

.klass-gradebook__sections {
  counter-reset: section
}

.klass-gradebook__section:not(:first-child) {
  margin-top: -1px
}

.klass-gradebook__section-widget {
  padding: 16px;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  align-items: baseline;
  background-color: #fff;
  transition: background-color .3s;
  border: 1px solid #ccc
}

.klass-gradebook__section-widget:hover,
.plan-card {
  background-color: #f3f4f6
}

.klass-gradebook__section-widget[data-foldable] {
  cursor: pointer
}

.klass-gradebook__section-widget-title {
  flex-grow: 1
}

.klass-gradebook__section-widget-title::before {
  counter-increment: section;
  content: counter(section);
  font-size: 16px;
  margin-right: 14px
}

.klass-gradebook__section-toggler {
  display: flex;
  align-items: center;
  align-self: center;
  color: #999;
  transition: background-color .3s
}

.klass-gradebook__section-toggler:hover {
  color: #222
}

.klass-gradebook__lessons {
  margin: 0 0 32px 32px;
  padding: 0 0 16px;
  border-radius: 0 0 4px 4px;
  border: 1px solid #ccc;
  border-top: none;
  counter-reset: lesson;
  list-style-type: none
}

.klass-gradebook__lesson {
  padding: 16px 24px
}

.klass-gradebook__lesson-title {
  font-size: 16px
}

.klass-gradebook__lesson-title::before {
  margin-right: .3em;
  counter-increment: lesson;
  content: counter(section) "." counter(lesson)
}

.klass-gradebook__lesson-title-sk {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 18px;
  top: 4px
}

.klass-gradebook__steps {
  display: flex;
  flex-direction: row;
  margin-top: 4px;
  height: 32px
}

.klass-gradebook__step {
  background-color: #eaecf0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s;
  --step-pin-icon-size: 32px;
  --step-pin-icon-icon-size: 22px;
  --step-pin-icon-color: #ccc;
  --step-pin-icon-subicon-color: #ccc
}

.klass-gradebook__step+.klass-gradebook__step {
  margin-left: 4px
}

.klass-gradebook__step_link {
  background-color: #535366;
  --step-pin-icon-color: #fff;
  --step-pin-icon-subicon-color: #fff
}

.klass-gradebook__step_link .svg-icon {
  --icon-line-color: #535366
}

.klass-gradebook__step_link:hover {
  background-color: #282b41
}

.klass-gradebook__step_link:hover .svg-icon {
  --icon-line-color: #282b41
}

.klass-gradebook__attachments {
  display: inline-flex;
  margin: -4px
}

input.klass-assistants__add-input {
  margin: 4px 12px 0 0;
  padding: 6px 12px;
  height: auto;
  width: 144px;
  line-height: normal;
  vertical-align: bottom;
  font-size: 14px
}

button:not(.st-button_style_none).klass-assistants__add-button {
  padding: 7px 16px;
  vertical-align: bottom;
  font-size: 14px
}

.klass-new__wrapper {
  padding-top: 70px
}

.klass-new__wrapper .klass-new__header {
  font-size: 24px;
  color: #000
}

.klass-new__wrapper .klass-new__title-hint-wrapper {
  float: left
}

.klass-new__wrapper .klass-new__hint {
  font-size: 13px;
  color: #b7b7b7
}

.klass-new__wrapper textarea {
  resize: none
}

.klass-new__wrapper .the-form-field {
  margin: 0
}

.course-grade-book__container {
  height: calc(100vh - var(--header-height));
  overflow: auto
}

.course-grade-book_fixed-header {
  min-height: 135px
}

.course-grade-book_fixed-header .course-grade-book__header {
  position: fixed;
  max-width: 62.5em;
  width: 100%
}

.course-grade-book__title {
  margin: 28px 0 24px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3
}

.course-grade-book__not-available {
  margin-bottom: 24px
}

.course-grade-book__not-available a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.course-grade-book__subtitle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -10px -20px 20px
}

.course-grade-book__subtitle-row>* {
  margin: 10px 20px
}

.course-grade-book__klass-link {
  font-size: 14px
}

.course-grade-book__search-form {
  display: inline-block
}

.course-grade-book__search-form input {
  width: 280px;
  margin: 0
}

.course-grade-book__search-input-wrapper {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  margin-right: 8px
}

.course-grade-book__search-input-wrapper input {
  padding-right: 28px
}

.course-grade-book__search-input-wrapper button[type=reset] {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px;
  color: #b7b7b7;
  font-size: 14px
}

.course-grade-book__search-input-wrapper button[type=reset]:focus,
.course-grade-book__search-input-wrapper button[type=reset]:hover {
  color: #999
}

.course-grade-book__search-input-wrapper button[type=reset] .svg-icon {
  display: flex
}

.course-grade-book__search-input-wrapper button[type=reset] svg {
  width: 1em;
  height: 1em
}

.course-grade-book__download {
  font-size: 14px
}

.course-grade-book__table {
  position: relative;
  margin-bottom: 100px;
  z-index: 1
}

.course-grade-book__table .course-grade-book-table__table {
  margin: 0 auto
}

.course-grade-book__load-more-btn.button:not(.st-button_style_none) {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0
}

body[data-route=course_grade_book] .page-footer {
  display: none
}

.course-permissions-edit__group .delete-member {
  cursor: pointer
}

.course-permissions-edit__course-state {
  margin-bottom: 24px;
  padding: 16px;
  background: #E9EBFA;
  border-radius: 4px;
  font-size: 14px
}

.course-permissions-edit__course-state b {
  font-weight: 500
}

.course-permissions-edit__input {
  display: inline-flex;
  width: 260px
}

.course-permissions-edit__load-more {
  list-style: none;
  cursor: pointer
}

.course-permissions-edit__copy-invite {
  display: inline-block
}

.course-permissions-edit__description-toggler {
  padding: 0;
  display: flex;
  align-items: baseline
}

.course-permissions-edit__description-toggler .svg-icon {
  margin-left: .3em;
  color: #5e5e5e;
  position: relative;
  top: 1px
}

.course-permissions-edit__description-toggler .svg-icon,
.course-permissions-edit__description-toggler .svg-icon svg {
  width: 12px;
  height: 12px
}

.course-permissions-edit__description-toggler-text {
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .15px;
  border-bottom: 1px dashed #5e5e5e
}

.course-permissions-edit__description-toggler-text b {
  font-weight: 500
}

[data-collapsed] .course-permissions-edit__description-toggler-text {
  color: #5e5e5e;
  font-weight: 400;
  letter-spacing: .3px;
  border-bottom: 1px dashed rgba(94, 94, 94, .28)
}

.delete-invitation_top {
  display: inline-block;
  vertical-align: top;
  padding: 8px
}

.course-permissions-edit__tooltip-hint {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px
}

.course-permissions-edit__tooltip-hint.tooltip-hint .tooltip-hint_inside {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  width: 60vw;
  font-size: 14px
}

.course-permissions-edit__tooltip-hint.tooltip-hint .tooltip-hint_inside p {
  margin-bottom: .5em
}

.course-permissions-edit__tooltip-hint svg {
  opacity: .6
}

.course-permissions-edit__tooltip-hint svg:hover {
  opacity: 1
}

.course-permissions-edit__learners-limit {
  margin: 0 -16px 32px
}

.course-permissions-edit__personal-invitations-actions {
  display: flex;
  align-items: flex-start
}

.course-permissions-edit__personal-invitations-desc {
  font-size: 14px;
  margin-left: 1em
}

.course-permissions-edit__section-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .15px;
  margin-bottom: 16px
}

.course-permissions-edit__section+.course-permissions-edit__section {
  margin-top: 2em
}

.course-permissions-edit__rights-list {
  -moz-column-count: 2;
  column-count: 2;
  font-size: 14px;
  max-width: 700px;
  line-height: 1.21
}

.course-permissions-edit__rights-list li {
  margin-bottom: .64em;
  -moz-column-break-inside: avoid;
  break-inside: avoid-column;
  overflow: hidden
}

.course-permissions-edit__note {
  display: flex;
  align-items: center;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px
}

.course-permissions-edit__note>.svg-icon {
  display: flex;
  margin-right: 8px;
  font-size: 17px
}

.course-permissions-edit__members-list_restricted {
  color: #5e5e5e;
  font-size: 14px
}

.course-permissions-edit__search-members {
  margin-bottom: .5em;
  display: flex
}

.course-permissions-edit__tab .tab__item[data-marked] a {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline
}

.course-permissions-edit__tab .tab__item[data-marked] a::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  background-color: #54ad54;
  border-radius: 50%;
  margin-right: .5em;
  margin-left: -5px
}

.course-permissions-edit__transfer-ownership p {
  font-size: 14px
}

.course-permissions-edit__aside-toast-panel {
  flex-direction: column;
  align-items: flex-start;
  background-color: transparent;
  padding: 16px;
  border: 1px solid #ff7965;
  border-radius: 4px
}

.course-permissions-edit__aside-toast-panel .toast-panel__icon {
  display: none
}

.course-permissions-edit__aside-toast-panel .toast-panel__button:not(.st-button_style_none) {
  height: 28px;
  padding: 7px 16px;
  margin: 16px 0 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px
}

.course-assessments__title {
  margin: 1em 0 .8em;
  font-size: 24px;
  font-weight: 400;
  line-height: 28.13px
}

.course-assessments__section-title,
.course-assessments__title-empty {
  font-weight: 500;
  line-height: 18px;
  letter-spacing: .15px;
  font-size: 16px
}

.course-assessments__title-empty {
  margin: 0;
  padding: 30px;
  background-color: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 3px
}

.course-assessments__section-title {
  margin: 1em 0 .8em
}

.course-assessments__lesson {
  margin-left: 28px
}

.course-assessments__lesson-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: .3px
}

.course-assessments__step-issue {
  display: grid;
  grid-template-columns: 56px 56px auto;
  grid-gap: 32px;
  margin: 1em 0 0 30px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px;
  -webkit-font-smoothing: antialiased
}

.course-assessments__pending-reviews {
  display: grid;
  grid-template-columns: auto 20px;
  grid-gap: 2px
}

.course-assessments__pending-reviews>span {
  padding: 2px
}

.course-assessments__pending-reviews>span:first-child {
  text-align: center
}

.course-assessments__pending-reviews-badge {
  display: inline-flex;
  padding: 1px 6px;
  text-align: center;
  vertical-align: top;
  border-radius: 10px;
  background-color: var(--theme-color-base-accent2-1);
  color: var(--theme-color-fg-oncolorbg);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: .4px
}

.course-assessments__pending-reviews-badge::before {
  content: attr(data-instructor-sessions)
}

.course-assessments__load-more-btn {
  margin-top: 40px
}

.course-assessments__empty-placeholder {
  -webkit-font-smoothing: antialiased
}

.course-assessments__empty-placeholder h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: .17px;
  margin: 0 0 24px
}

.course-assessments__empty-placeholder p {
  line-height: 23px;
  letter-spacing: .3px
}

.plan-card,
.plan-upgrade-card {
  line-height: 1.43;
  letter-spacing: .25px;
  border-radius: 4px
}

.course-assessments__empty-placeholder a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.course-reports {
  position: relative;
  margin-bottom: 140px
}

.course-reports__not-available {
  margin-bottom: 28px
}

.course-reports__not-available a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.anypage {
  position: relative;
  max-width: 990px;
  margin: 6px auto;
  padding: 1em
}

.anypage .stepik-loader {
  padding: 30px 0
}

.anypage-title {
  font-size: 48px;
  margin-left: -4px;
  margin-bottom: 16px
}

.anypage__top-info {
  margin-bottom: 30px
}

@media screen and (max-width:580px) {
  .anypage-title {
    font-size: 2.9em
  }
}

@media screen and (max-width:555px) {
  .anypage-title {
    font-size: 2.3em
  }
}

.dots-loader {
  display: inline-block;
  width: auto;
  height: 1em;
  vertical-align: middle;
  margin-left: 8px
}

.plan-card {
  padding: 16px 16px 24px;
  font-size: 14px
}

.plan-card[data-theme=light] {
  background-color: #fff
}

.plan-card__title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .15px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between
}

.plan-card__title>a {
  display: inline-block;
  padding: 7px 16px;
  margin: 0 0 0 6px;
  white-space: nowrap;
  --link-color: #fff;
  --link-line-color: transparent;
  --link-hover-color: #fff;
  --link-hover-line-color: currentColor;
  --link-active-color: #fff;
  --link-active-line-color: currentColor;
  background-color: #6c7bdf;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.17;
  letter-spacing: .4px
}

.plan-card__meter {
  display: block;
  margin: 24px 0 0;
  position: relative;
  color: #222;
  font-size: 1em;
  font-weight: 400
}

.plan-card__meter>var {
  float: right;
  display: inline-block;
  margin: 0 0 0 6px;
  font-style: normal
}

.plan-card__meter>meter {
  display: block;
  width: 100%;
  height: 8px;
  margin: 4px 0 0
}

.plan-card__subnote {
  margin: 4px 0 0;
  color: #999;
  line-height: inherit
}

.plan-card__text {
  margin: 24px 0 0;
  line-height: inherit
}

.plan-card__text:first-child {
  margin-top: 6px
}

.plan-card__text+.plan-card__text {
  margin-top: 8px
}

.plan-card__text a {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

button.st-button_style_none.plan-card__text-details-expand {
  margin: 0 0 0 2px;
  padding: 0;
  border-bottom: 1px dashed;
  color: inherit
}

.plan-upgrade-card {
  padding: 20px 16px 244px;
  background-color: #f3f4f6;
  border-top: 4px solid #6c7bdf;
  font-size: 14px;
  background-image: url(/static/frontend/upgrade-plan-background.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain
}

.plan-upgrade-card[data-theme=light] {
  background-color: #fff;
  background-image: url(/static/frontend/upgrade-plan-light-background.svg)
}

.plan-upgrade-card__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .17px
}

.plan-upgrade-card__text {
  margin: 10px 0;
  line-height: inherit
}

.button:not(.st-button_style_none).plan-upgrade-card__button {
  margin: 0;
  padding: 7px 16px 7px 38px;
  border-radius: 4px;
  background-color: #222;
  color: #fff;
  border: none;
  background-image: url(/static/frontend/upgrade-plan-btn-icon.svg);
  background-repeat: no-repeat;
  background-position: 6px 4px;
  background-size: 28px;
  font-size: 12px;
  line-height: 1.17;
  letter-spacing: .4px
}

.button:not(.st-button_style_none).plan-upgrade-card__button:active,
.button:not(.st-button_style_none).plan-upgrade-card__button:focus,
.button:not(.st-button_style_none).plan-upgrade-card__button:hover,
.vjs-error-display {
  background-color: #444
}

.woof-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 24px 12px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  pointer-events: none;
  z-index: var(--z-woof)
}

.woof-message {
  display: inline-block;
  margin: 4px 0;
  max-width: 700px;
  min-width: 344px;
  pointer-events: auto;
  will-change: max-height
}

.woof-message[data-type=info]>.woof-message__content,
.woof-message[data-type=success]>.woof-message__content,
.woof-message[data-type=warning]>.woof-message__content {
  border: 1px solid #222;
  background-color: rgba(34, 34, 34, .9);
  color: #fff
}

.woof-message[data-type=warning]>.woof-message__content {
  --woof-icon-color: #ff7965
}

.woof-message[data-type=error]>.woof-message__content {
  border: 1px solid #73134a;
  background-color: rgba(115, 19, 74, .9);
  color: #fff;
  --woof-icon-color: #feebe8
}

.woof-message[data-type=error]>.woof-message__content .woof-message__text a {
  --link-color: currentColor;
  --link-line-color: currentColor;
  --link-hover-color: currentColor;
  --link-hover-line-color: currentColor;
  --link-active-color: currentColor;
  --link-active-line-color: currentColor
}

.woof-message[data-status=opening] {
  -webkit-animation-name: woof-opening;
  animation-name: woof-opening;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(.54, 1.12, .32, 1.03);
  animation-timing-function: cubic-bezier(.54, 1.12, .32, 1.03);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  pointer-events: none
}

.woof-message[data-status=closed],
.woof-message[data-status=closing] {
  -webkit-animation-name: woof-closing;
  animation-name: woof-closing;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(.56, 1, .33, 1);
  animation-timing-function: cubic-bezier(.56, 1, .33, 1);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  pointer-events: none
}

.woof-message__content {
  display: flex;
  align-items: center;
  padding: 13px 15px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px
}

.woof-message__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  color: var(--woof-icon-color, inherit)
}

.woof-message__icon>svg {
  width: 100%;
  height: 100%
}

.woof-message__text {
  flex: 1;
  word-wrap: break-word;
  word-break: break-word
}

.woof-message__text a {
  --link-line: underline;
  --link-line-offset: .2em;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222;
  --link-color: #56a4ff;
  --link-line-color: #56a4ff;
  --link-hover-color: #63c8ff;
  --link-hover-line-color: #63c8ff;
  --link-active-color: #63c8ff;
  --link-active-line-color: #63c8ff
}

button:not(.st-button_style_none).woof-message__button {
  margin: -8px 0 -8px 20px;
  padding: 8px;
  background: 0 0;
  border: none;
  transition: none;
  color: #6c6;
  font-size: 14px;
  letter-spacing: .25px
}

button:not(.st-button_style_none).woof-message__button:focus,
button:not(.st-button_style_none).woof-message__button:hover {
  color: #85d685;
  background-color: rgba(255, 255, 255, .1)
}

button:not(.st-button_style_none).woof-message__button+button {
  margin-left: 4px
}

button:not(.st-button_style_none).woof-message__close {
  margin: -8px -8px -8px 20px;
  padding: 8px;
  background: 0 0;
  border: none;
  transition: none;
  color: inherit;
  font-size: 12px;
  --focus-outline-color: rgba(100, 200, 255, 0.5)
}

button:not(.st-button_style_none).woof-message__close:focus,
button:not(.st-button_style_none).woof-message__close:hover {
  background-color: rgba(255, 255, 255, .1)
}

button:not(.st-button_style_none).woof-message__close>.svg-icon {
  display: flex
}

button:not(.st-button_style_none).woof-message__close>.svg-icon svg {
  width: 1em;
  height: 1em
}

@media (max-width:400px) {
  .woof-container {
    margin: 0 12px 6px
  }

  .woof-message {
    min-width: 0
  }
}

@-webkit-keyframes woof-opening {
  0% {
    max-height: 0;
    transform: translateY(100px)
  }

  100% {
    max-height: 100px;
    transform: translateY(0)
  }
}

@keyframes woof-opening {
  0% {
    max-height: 0;
    transform: translateY(100px)
  }

  100% {
    max-height: 100px;
    transform: translateY(0)
  }
}

@-webkit-keyframes woof-closing {
  0% {
    opacity: 1;
    max-height: 100px
  }

  25% {
    max-height: 80px
  }

  75% {
    opacity: 0
  }

  100% {
    opacity: 0;
    filter: blur(10px);
    max-height: 0;
    margin: 0
  }
}

@keyframes woof-closing {
  0% {
    opacity: 1;
    max-height: 100px
  }

  25% {
    max-height: 80px
  }

  75% {
    opacity: 0
  }

  100% {
    opacity: 0;
    filter: blur(10px);
    max-height: 0;
    margin: 0
  }
}

.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(34, 34, 34, .85);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  z-index: var(--z-loading-overlay);
  cursor: progress;
  outline: 0
}

.loading-overlay[data-open] {
  display: flex
}

.loading-overlay[aria-hidden=false] {
  -webkit-animation: loading-overlay-show .3s cubic-bezier(0, 0, .2, 1) .2s forwards;
  animation: loading-overlay-show .3s cubic-bezier(0, 0, .2, 1) .2s forwards
}

.loading-overlay[aria-hidden=true] {
  -webkit-animation: loading-overlay-hide .3s cubic-bezier(0, 0, .2, 1);
  animation: loading-overlay-hide .3s cubic-bezier(0, 0, .2, 1)
}

.loading-overlay[data-mode=content] {
  z-index: var(--z-loading-overlay-content);
  cursor: default
}

.loading-overlay[data-mode=content][aria-hidden=false] {
  -webkit-animation: loading-overlay-show 0s forwards;
  animation: loading-overlay-show 0s forwards
}

.loading-overlay[data-mode=content][aria-hidden=true] {
  -webkit-animation: loading-overlay-hide 0s;
  animation: loading-overlay-hide 0s
}

.loading-overlay__text {
  margin: 0;
  padding: 80px;
  color: #fff;
  font-size: 32px;
  font-weight: 400
}

@media (max-width:768px) {
  .loading-overlay__text {
    padding: 40px;
    font-size: 24px
  }
}

@-webkit-keyframes loading-overlay-show {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes loading-overlay-show {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes loading-overlay-hide {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes loading-overlay-hide {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.dnd-quiz__item {
  position: relative;
  padding: .8em;
  font-size: 17px;
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #a5a5a5
}

.dnd-quiz__has-controls {
  display: flex;
  justify-content: space-between;
  align-items: baseline
}

.dnd-quiz__item-content {
  flex-grow: 1;
  min-width: 0;
  max-height: 180px;
  word-wrap: break-word;
  overflow: auto
}

.dnd-quiz__item-handle {
  cursor: -webkit-grab;
  cursor: grab;
  color: #a5a5a5;
  position: relative;
  top: .15em;
  padding: .8em;
  margin: -.8em 0 -.8em -.8em
}

.html-quiz__input[type=text],
.quiz-editor .light-tabs__header .flex-row {
  margin: 0
}

.dnd-quiz__item-handle.svg-icon {
  display: flex
}

.dnd-quiz__item-handle.svg-icon svg {
  height: 17px;
  width: 11px
}

.dnd-quiz__item-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing
}

.dnd-quiz__item:not(.animated) .dnd-quiz__item-handle:hover,
.smooth-dnd-ghost .dnd-quiz__item-handle {
  color: #222
}

.dnd-quiz__item-actions {
  display: flex;
  position: relative;
  top: .15em
}

.dnd-quiz__item-btn {
  display: flex;
  padding: 6px;
  cursor: pointer;
  color: #a5a5a5
}

.dnd-quiz__item-btn .svg-icon {
  display: flex
}

.dnd-quiz__item-btn .svg-icon svg {
  width: 1em;
  height: 1em
}

.dnd-quiz__item-btn:focus,
.dnd-quiz__item-btn:hover {
  color: #222;
  outline: 0
}

.dnd-quiz__item-btn[disabled] {
  color: #a5a5a5;
  opacity: .2
}

.html-quiz__input_has-error {
  border-color: red !important
}

.html-quiz__input-tip {
  font-style: italic;
  margin-top: .3em;
  opacity: .85
}

.group-editor__load-more,
.html-checklist__item[data-running] {
  opacity: .6
}

.rendered-html {
  background: #fff;
  display: flex
}

.rendered-html__iframe {
  width: 100%;
  height: 300px;
  border: none
}

.html-checklist {
  list-style-type: none
}

.html-checklist__item {
  display: flex;
  align-items: center;
  color: #222;
  cursor: default
}

.html-checklist__item[data-status=correct] {
  color: green
}

.html-checklist__item[data-status=wrong] {
  color: red
}

.html-checklist__item[data-status=pending] {
  opacity: 1
}

.html-checklist__item-icon.svg-icon {
  margin-right: .5em
}

.html-checklist__item-icon.svg-icon,
.html-checklist__item-icon.svg-icon svg {
  width: 1.2em;
  height: 1.2em
}

.quiz-editor__bootstrap-script {
  height: 355px;
  overflow: hidden;
  transition: height 1s
}

.quiz-editor__bootstrap-script_hidden {
  height: 0
}

.quiz-editor__is-bootstrap-label {
  display: inline
}

.quiz-linux-challenge__terminal-window.window {
  position: fixed;
  top: 20px;
  left: 20px;
  min-width: 200px;
  min-height: 200px;
  padding-top: 20px;
  z-index: var(--z-quiz-linux-terminal);
  border: 1px solid #fafafa;
  background-color: #272829;
  line-height: 1;
  box-shadow: rgba(0, 0, 0, .8) 2px 2px 20px;
  opacity: .7
}

.quiz-linux-challenge__terminal-window.window:focus,
.quiz-linux-challenge__terminal-window.window:focus-within {
  opacity: 1
}

.maximized .quiz-linux-challenge__terminal-window.window {
  border: none;
  box-shadow: none
}

.maximized body {
  overflow: hidden
}

.quiz-linux-challenge__terminal-window.window .bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
  color: #fafafa
}

.quiz-linux-challenge__terminal-window.window .bar .title {
  position: absolute;
  right: 5px;
  top: 3px;
  font-size: 14px;
  cursor: default
}

.quiz-linux-challenge__terminal-window .grip {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23ccc'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat
}

.quiz-linux-challenge__terminal-window .tab {
  all: revert;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
  cursor: pointer
}

.parsons-quiz__item-content,
.quiz-linux-challenge__terminal-window .tab:hover {
  font-size: 16px
}

.quiz-linux-challenge__terminal-window .terminal {
  border: 5px solid #000;
  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 14px;
  color: #f0f0f0;
  background: #000
}

.quiz-linux-challenge__terminal-window .terminal:focus {
  box-shadow: none
}

.quiz-linux-challenge__terminal-window .reverse-video {
  color: #000;
  background: #f0f0f0
}

.matching-quiz {
  margin: -10px
}

.matching-quiz[data-state=evaluation] .matching-quiz__drag-and-replace[data-disabled] .matching-quiz__handle,
.matching-quiz[data-state=evaluation] .matching-quiz__drag-and-replace[data-disabled] .matching-quiz__item-actions,
.matching-quiz[data-state=pending] .matching-quiz__drag-and-replace[data-disabled] .matching-quiz__handle,
.matching-quiz[data-state=pending] .matching-quiz__drag-and-replace[data-disabled] .matching-quiz__item-actions {
  pointer-events: none;
  opacity: .3
}

.matching-quiz:not([data-state=pending]):not([data-state=evaluation]) .matching-quiz__drag-and-replace[data-disabled] .matching-quiz__handle,
.matching-quiz:not([data-state=pending]):not([data-state=evaluation]) .matching-quiz__drag-and-replace[data-disabled] .matching-quiz__item-actions {
  display: none
}

.matching-quiz:not([data-state=pending]):not([data-state=evaluation]) .matching-quiz__drag-and-replace[data-disabled] .dnd-quiz__has-controls .matching-quiz__item-content {
  padding-left: .8em;
  padding-right: .8em
}

.matching-quiz__container {
  display: flex;
  flex-direction: row
}

.matching-quiz__left {
  flex-basis: 50%;
  text-align: right
}

.matching-quiz__right {
  flex-basis: 50%
}

.matching-quiz__drag-and-replace .smooth-dnd-ghost {
  opacity: .9;
  box-shadow: 1em 1em 2em rgba(34, 34, 34, .2)
}

.matching-quiz__drag-and-replace .smooth-dnd-ghost .matching-quiz__item-actions {
  visibility: hidden
}

.matching-quiz__item {
  align-items: center;
  margin: 10px;
  padding: 0
}

.matching-quiz__item.dnd-quiz__has-controls .matching-quiz__item-content {
  padding-left: 0;
  padding-right: 0
}

.matching-quiz__item.dnd-quiz__has-controls.smooth-dnd-draggable-wrapper {
  display: flex !important
}

.matching-quiz__item[data-drag-added] {
  background-color: #85d685;
  border-color: transparent;
  color: #fff
}

.matching-quiz__item[data-drag-added] .dnd-quiz__item-btn,
.matching-quiz__item[data-drag-added] .matching-quiz__handle {
  color: #fff
}

.matching-quiz__item[data-drag-removed] {
  opacity: .2
}

.matching-quiz__item[data-drag-added][data-drag-removed] {
  opacity: .7
}

.matching-quiz__item-content {
  align-self: baseline;
  padding: .8em
}

.matching-quiz__handle {
  margin: 0;
  top: 0;
  height: 100%;
  align-items: center
}

.matching-quiz__item-actions {
  padding: 0 .8em;
  top: 0
}

.matching-quiz-edit__half-item {
  width: 49%
}

.matching-quiz-edit__gap {
  width: 2%;
  height: auto;
  background-color: #aeaeae
}

.matching-quiz-edit__first-input-container {
  margin-left: 1em;
  margin-right: 0
}

.matching-quiz-edit__second-input-container {
  margin-left: 0;
  margin-right: 6em
}

.matching-quiz-edit__matching-pair {
  display: flex;
  align-items: center
}

@media (max-width:1024px) {
  .matching-quiz {
    margin: -5px
  }

  .matching-quiz__item {
    margin: 5px;
    font-size: 14px
  }
}

@media (max-width:600px) {
  .matching-quiz__container {
    flex-direction: column
  }

  .matching-quiz__left {
    counter-reset: matching;
    margin-right: 60px
  }

  .matching-quiz__left .matching-quiz__item::before {
    right: -30px
  }

  .matching-quiz__right {
    counter-reset: matching;
    margin-top: 10px;
    margin-left: 60px
  }

  .matching-quiz__right .matching-quiz__item::before {
    left: -30px
  }

  .matching-quiz__item {
    position: relative;
    overflow: visible !important
  }

  .matching-quiz__item::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    counter-increment: matching;
    content: counter(matching, upper-alpha);
    color: #222
  }

  .matching-quiz__item.smooth-dnd-ghost::before {
    display: none
  }
}

.chemical-template li {
  display: inline-block;
  vertical-align: top;
  width: 2em;
  height: 2.7em
}

.chemical-template input[type=text] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
  border-radius: 0;
  color: #000;
  border-color: #ccc
}

li.chemical-template__slot-sub,
li.chemical-template__slot-sup {
  width: 1.5em;
  position: relative
}

.chemical-template__slot-sub input[type=text],
.chemical-template__slot-sup input[type=text] {
  font-size: .8em;
  height: 1.5em;
  margin: 0;
  position: absolute
}

input[type=text].chemical-template__slot-sub {
  bottom: 0
}

input[type=text].chemical-template__slot:focus {
  border: 2px solid #6c6
}

.choice-quiz-editor__dnd {
  margin: -.25em -.25em 8px
}

.choice-quiz-editor__dnd[data-disabled] .choice-quiz-editor__dnd-handle,
.choice-quiz-editor__dnd[data-disabled] .choice-quiz-editor__dnd-item-actions {
  display: none
}

.choice-quiz-editor__dnd-actions,
.choice-quiz-editor__dnd-handle.svg-icon,
.choice-quiz-editor__dnd-item-content,
.code-quiz__container {
  display: flex
}

.choice-quiz-editor__dnd-item {
  margin: .25em;
  padding: 8px 16px 8px 24px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.choice-quiz-editor__dnd-handle {
  top: 2px
}

.choice-quiz-editor__dnd-handle.svg-icon svg {
  height: 15px;
  width: 8px
}

.choice-quiz-editor__dnd-ghost {
  box-shadow: 1em 1em 2em rgba(34, 34, 34, .2);
  cursor: -webkit-grabbing;
  cursor: grabbing
}

.choice-quiz-editor__dnd-inputs {
  width: 100%
}

input[type=text].choice-quiz-editor__dnd-input {
  border: none;
  padding: 8px 12px;
  margin: 0 !important;
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

input[type=text].choice-quiz-editor__dnd-input[data-type=feedback] {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 8px !important
}

.choice-quiz-editor__checkbox-answer {
  margin: 0
}

.choice-quiz-editor__tabs {
  margin-bottom: 8px
}

.choice-quiz-editor__option-caption {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px;
  color: #777
}

.choice-quiz-show__option-feedback {
  margin: 0 0 10px
}

.choice-quiz-editor__add-option:not(.st-button_style_none) {
  margin-bottom: 32px
}

.choice-quiz-edit__input-container {
  margin-left: 3em;
  margin-right: 6em
}

.choice-quiz-edit__switcher {
  margin: .5em 0 1em
}

.choice-quiz-edit__switcher .form-checkbox,
.choice-quiz-edit__switcher .form-radio {
  margin-left: 6px;
  padding: 0;
  font-size: inherit;
  opacity: .38;
  --form-radio-border-color: var(--theme-color-base-accent2-2);
  --form-radio-background-color: var(--theme-color-base-accent2-2);
  --form-checkbox-border-color: var(--theme-color-base-accent2-2);
  --form-checkbox-background-color: var(--theme-color-base-accent2-2);
  pointer-events: none
}

.choice-quiz-edit__switcher label[aria-checked] .form-checkbox,
.choice-quiz-edit__switcher label[aria-checked] .form-radio {
  opacity: 1
}

.code-quiz__lang-select {
  width: 100%;
  text-align: center;
  position: relative;
  margin-bottom: 1em
}

.code-quiz__lang-selected .s-select,
.code-quiz__lang-selected .s-select__select {
  width: 100%
}

.code-quiz__limits {
  text-align: left;
  margin-right: auto
}

.code-quiz__upload-tests,
.test-case {
  margin-top: 1em
}

.test-case .test-case__block {
  width: 100%;
  padding: .8em 1em;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-bottom: 1em
}

.test-case .test-case__title {
  font-size: 18px;
  margin-bottom: .5em
}

.test-case .test-case__remove {
  float: right;
  height: 15px;
  width: 15px;
  cursor: pointer;
  position: relative;
  right: 5px
}

.test-case .test-case__remove svg {
  width: 20px;
  height: 16px
}

.test-case .test-case__codemirror .CodeMirror {
  height: auto
}

.code-quiz__container {
  flex-direction: column;
  background: #eee
}

.code-quiz__code {
  background: #ddd;
  width: 100%
}

.code-quiz__run-panel,
.sql-quiz__run-panel {
  margin-top: -2px
}

.code-quiz__code-run-button {
  float: right;
  margin-top: 15px
}

@media screen and (min-width:768px) {
  .code-quiz__lang-selected {
    text-align: right;
    display: flex
  }

  .code-quiz__lang-selected .s-select,
  .code-quiz__lang-selected .s-select__select {
    width: auto
  }
}

.external-grader-quiz-edit__invalid-json {
  color: red
}

.fill-blanks-quiz {
  padding-bottom: 10px
}

.fill-blanks-quiz__component {
  display: inline
}

.fill-blanks-quiz__component[data-feedback=false] .fill-blanks-quiz__input {
  padding-left: 34px;
  background-repeat: no-repeat;
  background-position: .5em 50%;
  background-size: 20px;
  background-image: url(/static/frontend/common_icons/wrong.svg);
  border-color: #d41f1f
}

.fill-blanks-quiz__component[data-feedback=false] .fill-blanks-quiz__input:focus {
  border: solid #666
}

.fill-blanks-quiz__component[data-feedback=false] .fill-blanks-quiz__select {
  padding-left: 34px;
  background-repeat: no-repeat;
  background-image: url(/static/frontend/common_icons/wrong.svg), url(/static/frontend/common_icons/down-arrow.svg);
  background-position: .5em 50%, 97%;
  background-size: 20px, 1em;
  border-color: #d41f1f
}

.fill-blanks-quiz__component[data-feedback=false] .fill-blanks-quiz__select:focus {
  border: solid #666
}

.fill-blanks-quiz__component[data-feedback=true] .fill-blanks-quiz__input {
  padding-left: 34px;
  background-repeat: no-repeat;
  background-position: .5em 50%;
  background-size: 20px;
  background-image: url(/static/frontend/common_icons/correct.svg);
  border-color: #6c6
}

.fill-blanks-quiz__component[data-feedback=true] .fill-blanks-quiz__input:focus {
  border: solid #666
}

.fill-blanks-quiz__component[data-feedback=true] .fill-blanks-quiz__select {
  padding-left: 34px;
  background-repeat: no-repeat;
  background-image: url(/static/frontend/common_icons/correct.svg), url(/static/frontend/common_icons/down-arrow.svg);
  background-position: .5em 50%, 97%;
  background-size: 20px, 1em;
  border-color: #6c6
}

.fill-blanks-quiz__component[data-feedback=true] .fill-blanks-quiz__select:focus {
  border: solid #666
}

.fill-blanks-quiz__component .fill-blanks-quiz__input,
.fill-blanks-quiz__component .fill-blanks-quiz__select,
.fill-blanks-quiz__component .fill-blanks-quiz__text {
  display: inline-block;
  margin: .2em 0;
  height: 2.625em;
  line-height: 2em;
  vertical-align: baseline;
  border-radius: .125em
}

.fill-blanks-quiz__component .fill-blanks-quiz__text {
  display: inline
}

.fill-blanks-quiz__component .fill-blanks-quiz__input {
  width: 220px
}

.fill-blanks-quiz__component .fill-blanks-quiz__select {
  line-height: normal
}

.fill-blanks-quiz__component .fill-blanks-quiz__select:disabled {
  background-color: #eee
}

.free-answer__rich-text-viewer,
.free-answer__textarea-disabled,
.free-answer__textarea-disabled:focus {
  background: #fff;
  border: 1px solid #ccc
}

.fill-blanks-quiz-edit__component-container,
.fill-blanks-quiz-edit__options-container {
  margin-top: 1em
}

.fill-blanks-quiz-edit__options-list {
  list-style-type: none;
  margin-left: 0;
  margin-top: 1em
}

.fill-blanks-quiz-edit__option .s-checkbox {
  display: inline-flex;
  margin-right: .8em
}

.fill-blanks-quiz-edit__option input[type=text] {
  display: inline
}

.fill-blanks-quiz-edit__textarea {
  width: 100%;
  height: 5em;
  margin-top: 1em;
  resize: none
}

.fill-blanks-quiz-edit__option-remove {
  cursor: pointer
}

.fill-blanks-quiz-edit__option-remove svg {
  width: 20px;
  height: 16px
}

.free-answer__rich-text-viewer {
  margin: .5em 0;
  padding: .5em;
  border-radius: .125em
}

.free-answer__rich-text-viewer p:first-child {
  margin-top: 0
}

.free-answer__rich-text-viewer p:last-child {
  margin-bottom: 0
}

.mathdiv {
  margin: 1em 0 0;
  min-height: 50px;
  transition: all 1s;
  padding-bottom: 2px
}

.mathdiv .mathdiv-preview {
  display: inline-block;
  padding: .5em;
  border-radius: 3px;
  background: #d8d8d8;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5)
}

.mathdiv .mathdiv-preview .mathdiv__placeholder {
  color: #5e5e5e;
  display: none
}

.mathdiv .mathdiv-preview .mathdiv__error,
.mathdiv .mathdiv-preview .mathdiv__loader,
.mathdiv.mathdiv_warning .mathdiv-preview .mathdiv__formula {
  display: none
}

.mathdiv.mathdiv_warning .mathdiv-preview .mathdiv__error {
  display: block
}

.mathdiv.mathdiv_updating .mathdiv-preview {
  opacity: .3;
  transition-delay: .3s
}

.mathdiv.mathdiv_start .mathdiv-preview .mathdiv__formula {
  display: none
}

.mathdiv.mathdiv_start .mathdiv-preview .mathdiv__loader {
  display: block
}

.mathdiv.mathdiv_rendering .mathdiv-preview .mathdiv__formula {
  display: none
}

.mathdiv.mathdiv_rendering .mathdiv-preview .mathdiv__loader {
  display: block
}

.mathdiv.mathdiv_empty .mathdiv-preview .mathdiv__formula {
  display: none
}

.mathdiv.mathdiv_empty .mathdiv-preview .mathdiv__placeholder {
  display: block
}

.mathdiv.mathdiv_empty .mathdiv-preview .mathdiv__loader {
  display: none
}

.number-quiz__buttons-block {
  width: 100%;
  float: left;
  padding: 0 .7em
}

.number-quiz__options-button {
  cursor: pointer;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  display: inline-block
}

.number-quiz__options-button_add {
  background: url(/static/frontend/common_icons/add.svg) center center no-repeat #6C6
}

.number-quiz__options-button_delete {
  background: url(/static/frontend/common_icons/delete.svg) center center no-repeat #6C6
}

.parsons-quiz {
  margin: -.25em
}

.parsons-quiz__drag-and-drop[data-disabled] .parsons-quiz__handle,
.parsons-quiz__drag-and-drop[data-disabled] .parsons-quiz__item-actions,
.parsons-quiz__drag-and-drop[data-disabled] .parsons-quiz__item-pre-actions {
  display: none
}

.parsons-quiz__item {
  margin: .25em
}

.parsons-quiz__item-pre-actions {
  margin-left: -.4em;
  margin-right: .4em
}

.parsons-quiz__handle {
  top: 0
}

.parsons-quiz__item-content .html-content {
  position: relative;
  top: -.15em
}

.parsons-quiz__item-actions,
.parsons-quiz__item-pre-actions,
.table-quiz__table td .s-checkbox__border,
.table-quiz__table td .s-radio__border,
.table-quiz__table th .s-checkbox__border,
.table-quiz__table th .s-radio__border {
  top: 0
}

.parsons-quiz__indent {
  display: inline-flex
}

.parsons-quiz__indent>span {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-image: radial-gradient(#ccc 2px, transparent 2px);
  background-size: 1.1em 1.1em;
  background-position: center center
}

.parsons-quiz__ghost {
  box-shadow: 1em 1em 2em rgba(34, 34, 34, .2);
  cursor: -webkit-grabbing;
  cursor: grabbing
}

.puzzle-quiz-edit__input {
  opacity: 0;
  position: absolute
}

.puzzle-quiz {
  text-align: center
}

.puzzle-quiz__image {
  max-width: 940px
}

.puzzle-quiz__hidden {
  visibility: hidden
}

.random-tasks-quiz-edit__textarea {
  width: 100%;
  height: 5em;
  margin: 4px 0 1em
}

.random-tasks-quiz-edit__small-textarea {
  width: 20%;
  height: 2em;
  margin-top: 1em;
  resize: none
}

.random-tasks-edit__small-block {
  width: 33.3%;
  float: left;
  padding: 0 .7em
}

.random-tasks-edit__section {
  display: flex;
  gap: 0 8px;
  flex-direction: row;
  flex-wrap: nowrap
}

.random-tasks-edit__half-block {
  flex: 1
}

.random-tasks-edit__info {
  padding: 0
}

.schulte-quiz__table {
  background-color: #fff;
  transition: background-color .2s;
  display: table;
  border-collapse: collapse;
  margin: 0 auto;
  border: 1px solid #aaa;
  position: relative
}

.schulte-quiz__table-row {
  display: table-row
}

.schulte-quiz__table-cell {
  display: table-cell;
  border: 1px solid #aaa;
  width: 6em;
  height: 6em;
  text-align: center;
  vertical-align: middle
}

.schulte-quiz__table-cell_small {
  width: 4em;
  height: 4em
}

.schulte-quiz__table-cell:hover {
  background-color: #fafafa;
  cursor: pointer
}

.schulte-quiz__table-cell_correct {
  background-color: #7BCF69 !important;
  transition-duration: .1s
}

.schulte-quiz__table-cell_wrong {
  background-color: #EA6658 !important;
  transition-duration: .1s
}

.schulte-quiz__table-cell:active {
  font-weight: 700
}

.schulte-quiz__table-float-cell {
  display: inline-block;
  position: absolute;
  font-size: 1.5em
}

.check-item__remove,
.quiz-component[data-type=html-quiz][data-submission-view],
.table-quiz {
  position: relative
}

.schulte-quiz__table-float-cell:hover {
  cursor: pointer
}

.sorting-quiz {
  margin: -.25em
}

.sorting-quiz__drag-and-drop[data-disabled] .sorting-quiz__handle,
.sorting-quiz__drag-and-drop[data-disabled] .sorting-quiz__item-actions {
  display: none
}

.sorting-quiz__item {
  margin: .25em
}

.sorting-quiz__ghost {
  box-shadow: 1em 1em 2em rgba(34, 34, 34, .2);
  cursor: -webkit-grabbing;
  cursor: grabbing
}

.sorting-quiz-edit__input-container {
  margin-left: 1em;
  margin-right: 6em
}

.sorting-quiz-editor__sort-options {
  padding: 0 !important;
  margin-top: -10px
}

.sorting-quiz-editor__sort-options .sortable-item__inner-box {
  margin: 0
}

.sorting-quiz-editor__sort-options .sortable-item__control {
  margin-top: 15px
}

.sorting-quiz-editor__sort-options .sortable-item__arrow-down,
.sorting-quiz-editor__sort-options .sortable-item__arrow-up,
.sorting-quiz-editor__sort-options .sortable-item__remove {
  color: var(--theme-color-fg-tertiary)
}

.sorting-quiz-editor__sort-options .sortable-item__arrow-down:focus,
.sorting-quiz-editor__sort-options .sortable-item__arrow-down:hover,
.sorting-quiz-editor__sort-options .sortable-item__arrow-up:focus,
.sorting-quiz-editor__sort-options .sortable-item__arrow-up:hover,
.sorting-quiz-editor__sort-options .sortable-item__remove:focus,
.sorting-quiz-editor__sort-options .sortable-item__remove:hover {
  color: var(--theme-color-fg-primary)
}

.sorting-quiz-editor__sort-options .sortable-item__arrow-down svg,
.sorting-quiz-editor__sort-options .sortable-item__arrow-up svg,
.sorting-quiz-editor__sort-options .sortable-item__remove svg {
  height: 14px;
  width: 14px
}

.sorting-quiz-editor__sort-options .sortable-item__input-container input[type=text] {
  padding: 6px;
  margin: 10px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px
}

.sql-quiz__run-panel .code-runner__block {
  flex-wrap: wrap;
  margin: -4px -10px
}

.sql-quiz__run-panel .code-runner__block>* {
  margin: 4px 10px
}

.sql-quiz__run-panel .code-runner__hints {
  flex: 1;
  align-self: stretch;
  min-width: 400px
}

.sql-quiz__run-panel button:not(.st-button_style_none).secondary.code-runner__button {
  margin-left: auto
}

.sql-quiz__run-panel--collapsed {
  visibility: collapse
}

.sql-quiz__run-panel--collapsed.code-runner_panel {
  padding: 0;
  margin: 0;
  border: none
}

.sql-quiz__run-panel--collapsed .code-runner__block {
  display: block;
  margin: 0
}

.sql-quiz__run-panel--collapsed button:not(.st-button_style_none).secondary.code-runner__button {
  visibility: visible;
  float: right;
  margin: 15px 0 0 5px
}

.table-quiz {
  width: 100%;
  margin: 0 0 24px;
  overflow: auto;
  --custom-scrollbar-background: #fff;
  --custom-scrollbar-thumb-color: #e6e9ed;
  --custom-scrollbar-thumb-hover-color: #b7b7b7;
  --custom-scrollbar-thumb-active-color: #5e5e5e;
  --custom-scrollbar-resize-grip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23ccc'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>")
}

.table-quiz::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--custom-scrollbar-background)
}

.table-quiz::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-background)
}

.table-quiz::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-thumb-color);
  border: 3px solid var(--custom-scrollbar-background)
}

.table-quiz::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover-color)
}

.table-quiz::-webkit-scrollbar-thumb:active {
  background-color: var(--custom-scrollbar-thumb-active-color)
}

.table-quiz::-webkit-scrollbar-corner {
  background-color: var(--custom-scrollbar-background)
}

.table-quiz::-webkit-resizer {
  background-image: var(--custom-scrollbar-resize-grip);
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: 2px 2px
}

.table-quiz__table {
  min-width: 100%;
  margin: 0;
  border: none
}

.table-quiz__table td,
.table-quiz__table th {
  padding: 5px 7px;
  text-align: center
}

.table-quiz__table td .s-checkbox,
.table-quiz__table td .s-radio,
.table-quiz__table th .s-checkbox,
.table-quiz__table th .s-radio {
  display: inline-flex;
  margin: 0;
  padding: 6px 26px;
  vertical-align: top;
  font-size: 16px
}

.table-quiz__table td .s-checkbox__input,
.table-quiz__table td .s-radio__input,
.table-quiz__table th .s-checkbox__input,
.table-quiz__table th .s-radio__input {
  margin: 0
}

.table-quiz__table td:first-child,
.table-quiz__table th:first-child {
  text-align: left
}

.table-quiz-editor__table {
  margin: 0;
  width: 100%;
  border: none
}

.table-quiz-editor__table td,
.table-quiz-editor__table th {
  padding: 5px 7px
}

.table-quiz-editor__table td,
.table-quiz-editor__table th:not(:first-child)>input {
  text-align: center
}

.table-quiz-editor__table input[type=checkbox],
.table-quiz-editor__table input[type=text],
.table-quiz-editor__table label {
  margin: 0;
  vertical-align: middle
}

.html-quiz__code+.html-quiz__result-wrapper,
.trik-quiz {
  margin-top: 1em
}

.table-quiz-editor__table input[type=text] {
  width: 100%;
  min-width: 100px
}

.table-quiz-editor__table input[type=checkbox] {
  width: 18px;
  height: 18px
}

.table-quiz-editor__table label {
  display: inline-flex;
  padding: 6px 26px
}

.lti-consumer-edit__custom-field button,
.lti-consumer-edit__custom-field div {
  margin-right: 5px;
  display: inline-block
}

.lti-consumer-edit__delete-custom-field-btn {
  color: #777
}

.lti-consumer-edit__delete-custom-field-btn:focus,
.lti-consumer-edit__delete-custom-field-btn:hover {
  color: #181818
}

.lti-consumer-edit__delete-custom-field-btn:active {
  color: #777
}

.lti-consumer-edit__delete-custom-field-btn svg {
  width: 20px;
  height: 16px
}

.lti-consumer__lti-provider-iframe {
  border: 0;
  width: 100%;
  min-height: 600px
}

.html-quiz__result {
  border: 1px solid #ccc
}

.html-quiz__result[data-rendering] {
  opacity: .5
}

.html-quiz__code-column {
  border: 1px solid #ccc;
  height: 250px;
  overflow: hidden
}

.html-quiz__code-column+.html-quiz__code-column {
  border-left: none
}

.html-quiz__code-editor {
  height: 220px;
  overflow: auto
}

.html-quiz__code-editor .CodeMirror {
  height: auto;
  border: none
}

.html-quiz__code-header {
  display: flex;
  padding: .2em;
  background-color: rgba(255, 255, 255, .4)
}

.html-quiz__badge {
  font-size: 12px;
  background: #ccc;
  padding: .3em .5em;
  border-radius: .5em;
  line-height: 1
}

.html-quiz-editor__check-items {
  margin-top: 2em
}

.html-quiz-editor__check-item {
  border: 2px solid #ccc;
  border-radius: 5px
}

*+.html-quiz-editor__check-items-actions,
.html-quiz-editor__check-item+.html-quiz-editor__check-item {
  margin-top: 1em
}

.check-item__header,
.check-item__test,
.html-quiz-editor__tests-actions {
  padding: .8em 1em
}

.check-item__body {
  background-color: #e6e9ed
}

.check-item__title {
  font-size: 18px;
  margin-bottom: .5em
}

.check-item__title-small {
  font-size: 16px;
  margin-bottom: .5em
}

.check-item__icon-action {
  cursor: pointer;
  color: #ccc
}

.modal-popup[data-progress],
.ui-toggler[data-loading] {
  cursor: progress
}

.check-item__icon-action:hover {
  color: #222
}

.check-item__icon-action svg {
  width: 16px;
  height: 16px
}

.check-item__remove {
  float: right;
  height: 15px;
  width: 15px;
  right: 5px
}

.check-item__input[type=text] {
  width: 100%;
  border-color: #ccc
}

.check-item__test+.check-item__test {
  border-top: 1px solid #ccc
}

.check-item__test+.html-quiz-editor__tests-actions {
  padding-top: 0
}

button:not(.st-button_style_none).html-quiz__submission-view-toggle {
  position: absolute;
  right: 0
}

.html-quiz__submission-code {
  max-height: 220px;
  overflow: auto
}

.html-quiz__submission-code:not(:last-child) {
  margin-bottom: 14px
}

.modal-popup {
  display: none;
  position: absolute
}

.modal-popup[data-open] {
  display: block
}

.modal-popup[aria-hidden=false] .modal-popup__overlay {
  -webkit-animation: modal-overlay-fadein .3s cubic-bezier(0, 0, .2, 1);
  animation: modal-overlay-fadein .3s cubic-bezier(0, 0, .2, 1)
}

.modal-popup[aria-hidden=false] .modal-popup__container {
  -webkit-animation: modal-container-slidein .3s cubic-bezier(0, 0, .2, 1);
  animation: modal-container-slidein .3s cubic-bezier(0, 0, .2, 1)
}

.modal-popup[aria-hidden=true] .modal-popup__overlay {
  -webkit-animation: modal-overlay-fadeout .3s cubic-bezier(0, 0, .2, 1);
  animation: modal-overlay-fadeout .3s cubic-bezier(0, 0, .2, 1)
}

.modal-popup[aria-hidden=true] .modal-popup__container {
  -webkit-animation: modal-container-slideout .3s cubic-bezier(0, 0, .2, 1);
  animation: modal-container-slideout .3s cubic-bezier(0, 0, .2, 1)
}

.modal-popup[data-theme=confirm-danger] .modal-popup__title img {
  height: 53px
}

.modal-popup[data-theme^=tak-] .modal-popup__title img {
  height: 120px
}

.modal-popup[data-theme=tak-confirm] .modal-popup__title img {
  height: 100px
}

.modal-popup[data-theme=tak-confirm-danger] .modal-popup__title img {
  height: 90px
}

.modal-popup[data-theme=tak-exam] {
  --modal-popup-width: 480px
}

.modal-popup[data-theme=tak-exam] .modal-popup__title img {
  height: 100px
}

.modal-popup[data-theme=tak-process] {
  --modal-popup-width: 690px
}

.modal-popup[data-theme=tak-process] .modal-popup__title img {
  height: 90px
}

.modal-popup[data-theme=upgrade-plan-enterprise],
.modal-popup[data-theme=upgrade-plan-pro] {
  --modal-popup-width: 480px
}

.modal-popup[data-theme=upgrade-plan-enterprise] .modal-popup__header,
.modal-popup[data-theme=upgrade-plan-pro] .modal-popup__header {
  margin: -16px -32px -10px
}

.modal-popup[data-theme=upgrade-plan-enterprise] .modal-popup__title img,
.modal-popup[data-theme=upgrade-plan-pro] .modal-popup__title img {
  height: 140px;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0
}

.modal-popup[data-theme=upgrade-plan-enterprise] .modal-popup__close,
.modal-popup[data-theme=upgrade-plan-pro] .modal-popup__close {
  color: #fff
}

.modal-popup[data-theme=upgrade-plan-enterprise] .modal-popup__close:focus,
.modal-popup[data-theme=upgrade-plan-enterprise] .modal-popup__close:hover,
.modal-popup[data-theme=upgrade-plan-pro] .modal-popup__close:focus,
.modal-popup[data-theme=upgrade-plan-pro] .modal-popup__close:hover {
  color: #eee
}

.modal-popup[data-theme~=modern] .modal-popup__container {
  padding: 20px 32px 32px;
  overflow: hidden
}

.modal-popup[data-theme~=modern] .modal-popup__title h2 {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .15px
}

.modal-popup[data-theme~=modern] .modal-popup__content {
  margin: 16px 0 0
}

.modal-popup[data-theme~=modern] .modal-popup__close:not(.st-button_style_none) {
  top: 18px;
  right: 18px
}

.modal-popup__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  bottom: 0;
  z-index: var(--z-modal-popup);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 120px;
  overflow: auto;
  background-color: rgba(34, 34, 34, .9);
  will-change: opacity
}

.modal-popup__container {
  position: relative;
  padding: 16px 32px 32px;
  min-width: var(--modal-popup-min-width, var(--modal-popup-width, 500px));
  max-width: var(--modal-popup-max-width, var(--modal-popup-width, 600px));
  width: var(--modal-popup-width);
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #fff;
  outline: 0;
  will-change: transform
}

.modal-popup__title h2 {
  margin: 0 40px 0 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2
}

.modal-popup__title img {
  display: block;
  margin: 8px auto 0;
  height: 50px;
  width: auto
}

button:not(.st-button_style_none).modal-popup__close {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 6px;
  background: 0 0;
  border: none;
  color: #999;
  font-size: 14px
}

.modal-popup__footer .button,
.modal-popup__footer button,
.radio-button-group.radio-button-group_theme_accent .radio-button-group__button {
  padding: 9px 24px
}

button:not(.st-button_style_none).modal-popup__close .svg-icon {
  display: flex;
  width: 1em;
  height: 1em
}

button:not(.st-button_style_none).modal-popup__close .svg-icon svg {
  width: 100%;
  height: 100%
}

button:not(.st-button_style_none).modal-popup__close:focus,
button:not(.st-button_style_none).modal-popup__close:hover {
  color: #5e5e5e
}

.modal-popup__content {
  margin: 28px 0 0;
  font-size: 16px;
  line-height: 1.44;
  letter-spacing: .3px
}

.modal-popup__content+.modal-popup__footer {
  margin-top: 24px
}

.modal-popup__content h4 {
  margin: 0 0 16px;
  font-weight: 500;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: .15px
}

.modal-popup__footer {
  white-space: nowrap
}

.modal-popup__footer .button+.button,
.modal-popup__footer .button+a,
.modal-popup__footer .button+button,
.modal-popup__footer button+.button,
.modal-popup__footer button+a,
.modal-popup__footer button+button {
  margin-left: 12px
}

@-webkit-keyframes modal-overlay-fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes modal-overlay-fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes modal-overlay-fadeout {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes modal-overlay-fadeout {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@-webkit-keyframes modal-container-slidein {
  from {
    transform: translateY(5%)
  }

  to {
    transform: translateY(0)
  }
}

@keyframes modal-container-slidein {
  from {
    transform: translateY(5%)
  }

  to {
    transform: translateY(0)
  }
}

@-webkit-keyframes modal-container-slideout {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-10%)
  }
}

@keyframes modal-container-slideout {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-10%)
  }
}

@media (max-width:768px) {
  .modal-popup__overlay {
    padding-top: 0
  }

  .modal-popup__container {
    margin: auto
  }
}

@media (max-width:576px) {
  .modal-popup {
    --modal-popup-max-width: calc(100vw - 24px);
    --modal-popup-min-width: 90vw
  }

  .modal-popup__container {
    margin-top: 50px
  }

  .modal-popup__container,
  .modal-popup__container p {
    font-size: 14px
  }

  .modal-popup__footer {
    display: flex;
    flex-direction: column
  }

  .modal-popup__footer .button+.button,
  .modal-popup__footer .button+a,
  .modal-popup__footer .button+button,
  .modal-popup__footer button+.button,
  .modal-popup__footer button+a,
  .modal-popup__footer button+button {
    margin: 12px 0 0
  }
}

.rich-text-editor {
  position: relative
}

.rich-text-editor[data-loading] .rich-text-editor__header-placeholder {
  display: block
}

.rich-text-editor[data-sticky-top-panel] .cke_top {
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-height);
  z-index: 5
}

.rich-text-editor__header-placeholder {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 1px 4px;
  background-color: #f8f8f8;
  border: 1px solid #d1d1d1;
  opacity: .5
}

.rich-text-editor,
.rich-text-editor .cke_inner,
.rich-text-editor>[role=application] {
  border-radius: var(--rich-text-editor-border-radius)
}

.cke_combopanel.cke_combopanel__styles {
  width: 180px;
  height: 220px
}

.cke_dialog tr:nth-of-type(even) {
  background: 0 0
}

.cke_screen_reader_only.cke_copyformatting_notification {
  top: -10px
}

.rich-text-editor {
  --rich-text-editor-border-color: var(--validation-border-color, #d1d1d1)
}

.rich-text-editor>[role=application] {
  border-color: var(--rich-text-editor-border-color)
}

.rich-text-editor .cke_top {
  border-top-left-radius: var(--rich-text-editor-border-radius);
  border-top-right-radius: var(--rich-text-editor-border-radius)
}

.rich-text-editor .cke_bottom,
.rich-text-editor .cke_contents {
  border-bottom-left-radius: var(--rich-text-editor-border-radius);
  border-bottom-right-radius: var(--rich-text-editor-border-radius)
}

.img-with-lightbox {
  cursor: pointer
}

.picture-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-image-lightbox);
  display: flex;
  overflow: auto;
  background-color: rgba(0, 0, 0, .85)
}

.picture-lightbox>img {
  max-width: 100%;
  max-height: 97vh;
  margin: auto
}

.picture-lightbox[data-zoomable]>img {
  cursor: zoom-in
}

.picture-lightbox[data-zoomed]>img {
  max-width: none;
  max-height: none;
  cursor: zoom-out
}

button:not(.st-button_style_none).picture-lightbox__close-btn {
  position: fixed;
  top: 18px;
  right: 34px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  opacity: .7;
  background-color: rgba(0, 0, 0, .32);
  color: #fff;
  border: none;
  border-radius: 4px
}

button:not(.st-button_style_none).picture-lightbox__close-btn:active,
button:not(.st-button_style_none).picture-lightbox__close-btn:focus,
button:not(.st-button_style_none).picture-lightbox__close-btn:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .7)
}

button:not(.st-button_style_none).picture-lightbox__close-btn:active {
  background-color: #222
}

button:not(.st-button_style_none).picture-lightbox__close-btn>.svg-icon {
  width: 1em;
  height: 1em
}

.rich-text-editor__content,
.rich-text-viewer {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  color: #222;
  line-height: 1.6;
  word-wrap: break-word;
  word-break: break-word
}

.rich-text-editor__content::after,
.rich-text-viewer::after {
  content: "";
  display: table;
  clear: both
}

.rich-text-editor__content p,
.rich-text-viewer p {
  margin: 1em 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit
}

.rich-text-editor__content h1,
.rich-text-viewer h1 {
  margin: .67em 0;
  padding: 0;
  font-size: 2em;
  font-weight: 700;
  line-height: inherit;
  text-align: inherit
}

.rich-text-editor__content h2,
.rich-text-viewer h2 {
  margin: .83em 0;
  padding: 0;
  font-size: 1.5em;
  font-weight: 700;
  line-height: inherit;
  text-align: inherit
}

.rich-text-editor__content h3,
.rich-text-viewer h3 {
  margin: 1em 0;
  padding: 0;
  font-size: 1.17em;
  font-weight: 700;
  line-height: inherit;
  text-align: inherit
}

.rich-text-editor__content h4,
.rich-text-viewer h4 {
  margin: 1.33em 0;
  padding: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: inherit;
  text-align: inherit
}

.rich-text-editor__content h5,
.rich-text-viewer h5 {
  margin: 1.67em 0;
  padding: 0;
  font-size: .83em;
  font-weight: 700;
  line-height: inherit;
  text-align: inherit;
  text-transform: none
}

.rich-text-editor__content h6,
.rich-text-viewer h6 {
  margin: 2.33em 0;
  padding: 0;
  font-size: .67em;
  font-weight: 700;
  line-height: inherit;
  text-align: inherit
}

.rich-text-editor__content ol,
.rich-text-editor__content ul,
.rich-text-viewer ol,
.rich-text-viewer ul {
  display: block;
  margin: 1em 0;
  padding: 0 0 0 40px;
  list-style-position: outside
}

.rich-text-editor__content ul,
.rich-text-viewer ul {
  list-style-type: disc
}

.rich-text-editor__content ol,
.rich-text-viewer ol {
  list-style-type: decimal
}

.rich-text-editor__content blockquote,
.rich-text-viewer blockquote {
  margin: 10px 0;
  padding: 0 0 0 1em;
  border-left: 2px solid #ccc;
  color: #666;
  font-style: italic
}

.rich-text-editor__content table,
.rich-text-viewer table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ddd
}

.rich-text-editor__content table tr:nth-of-type(even),
.rich-text-viewer table tr:nth-of-type(even) {
  background-color: #f9f9f9
}

.rich-text-editor__content table tr td,
.rich-text-viewer table tr td {
  padding: .5625em .625em;
  line-height: inherit;
  color: inherit;
  font-size: inherit
}

.rich-text-editor__content img,
.rich-text-viewer img {
  max-width: 100%;
  height: auto;
  vertical-align: middle
}

.rich-text-editor__content img.cke_widget_mask,
.rich-text-viewer img.cke_widget_mask {
  height: 100%
}

.rich-text-editor__content .cke_widget_image.cke_image_nocaption[style*="float:left"],
.rich-text-editor__content .cke_widget_image.cke_image_nocaption[style*="float: left"],
.rich-text-editor__content img[style*="float:left"],
.rich-text-editor__content img[style*="float: left"],
.rich-text-viewer .cke_widget_image.cke_image_nocaption[style*="float:left"],
.rich-text-viewer .cke_widget_image.cke_image_nocaption[style*="float: left"],
.rich-text-viewer img[style*="float:left"],
.rich-text-viewer img[style*="float: left"] {
  margin-right: 1em
}

.rich-text-editor__content .cke_widget_image.cke_image_nocaption[style*="float:right"],
.rich-text-editor__content .cke_widget_image.cke_image_nocaption[style*="float: right"],
.rich-text-editor__content img[style*="float:right"],
.rich-text-editor__content img[style*="float: right"],
.rich-text-viewer .cke_widget_image.cke_image_nocaption[style*="float:right"],
.rich-text-viewer .cke_widget_image.cke_image_nocaption[style*="float: right"],
.rich-text-viewer img[style*="float:right"],
.rich-text-viewer img[style*="float: right"] {
  margin-left: 1em
}

.rich-text-editor__content picture.progressive-picture,
.rich-text-viewer picture.progressive-picture {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle
}

.rich-text-editor__content picture.progressive-picture[data-lqip-loader],
.rich-text-viewer picture.progressive-picture[data-lqip-loader] {
  position: relative;
  overflow: hidden
}

.rich-text-editor__content picture.progressive-picture[data-lqip-loader]::before,
.rich-text-viewer picture.progressive-picture[data-lqip-loader]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: var(--thumb);
  background-size: cover;
  background-color: #f3f4f6;
  filter: blur(20px);
  transform: scale(1.1)
}

.rich-text-editor__content picture.progressive-picture[data-lqip-loader] img,
.rich-text-viewer picture.progressive-picture[data-lqip-loader] img {
  position: relative;
  z-index: 1;
  opacity: 0
}

.rich-text-editor__content picture.progressive-picture[data-lqip-loader=loaded]::before,
.rich-text-viewer picture.progressive-picture[data-lqip-loader=loaded]::before {
  visibility: hidden;
  transition: visibility 0s .4s
}

.rich-text-editor__content picture.progressive-picture[data-lqip-loader=loaded] img,
.rich-text-viewer picture.progressive-picture[data-lqip-loader=loaded] img {
  opacity: 1;
  transition: opacity .4s cubic-bezier(.47, 0, .75, .72)
}

.rich-text-editor__content figure,
.rich-text-viewer figure {
  display: inline-block;
  padding: 10px;
  margin: 10px 20px;
  outline: #ccc solid 1px;
  text-align: center;
  background: rgba(0, 0, 0, .05)
}

.rich-text-editor__content figure>figcaption,
.rich-text-viewer figure>figcaption {
  display: block;
  text-align: center
}

.rich-text-editor__content code,
.rich-text-editor__content kbd,
.rich-text-editor__content pre,
.rich-text-editor__content samp,
.rich-text-editor__content tt,
.rich-text-viewer code,
.rich-text-viewer kbd,
.rich-text-viewer pre,
.rich-text-viewer samp,
.rich-text-viewer tt {
  font-family: "JetBrains Mono", monospace
}

.rich-text-editor__content pre,
.rich-text-viewer pre {
  margin: 1em 0
}

.rich-text-editor__content code,
.rich-text-viewer code {
  min-height: auto;
  line-height: inherit
}

.rich-text-editor__content .katex-display,
.rich-text-viewer .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0
}

.rich-text-editor__content .code-featured,
.rich-text-viewer .code-featured {
  border: 2px solid rgba(102, 204, 102, .8)
}

.rich-text-editor__content .code-featured>code,
.rich-text-viewer .code-featured>code {
  padding: 1.2em 1em
}

.rich-text-editor__content .math-featured,
.rich-text-viewer .math-featured {
  padding: 20px;
  box-shadow: 0 0 2px #6c6;
  background-color: rgba(102, 204, 102, .05);
  margin: 10px
}

.rich-text-editor__content .embed-240p,
.rich-text-viewer .embed-240p {
  max-width: 426px;
  max-height: 240px;
  margin: 0 auto
}

.rich-text-editor__content .embed-360p,
.rich-text-viewer .embed-360p {
  max-width: 640px;
  max-height: 360px;
  margin: 0 auto
}

.rich-text-editor__content .embed-480p,
.rich-text-viewer .embed-480p {
  max-width: 854px;
  max-height: 480px;
  margin: 0 auto
}

.rich-text-editor__content .embed-720p,
.rich-text-viewer .embed-720p {
  max-width: 1280px;
  max-height: 720px;
  margin: 0 auto
}

.rich-text-editor__content .embed-1080p,
.rich-text-viewer .embed-1080p {
  max-width: 1920px;
  max-height: 1080px;
  margin: 0 auto
}

.rich-text-editor__content kotlin-runnable,
.rich-text-viewer kotlin-runnable {
  position: relative;
  display: block;
  margin: 1em 0;
  max-height: 300px;
  overflow: hidden;
  font-size: 13px;
  outline: #ccc solid 2px
}

.rich-text-editor__content kotlin-runnable .hidden-dependency,
.rich-text-viewer kotlin-runnable .hidden-dependency,
kotlin-runnable .hidden-dependency {
  display: none
}

.rich-text-editor__content kotlin-runnable code,
.rich-text-editor__content kotlin-runnable pre,
.rich-text-viewer kotlin-runnable code,
.rich-text-viewer kotlin-runnable pre {
  overflow: hidden;
  text-overflow: ellipsis
}

.rich-text-editor__content kotlin-runnable pre,
.rich-text-viewer kotlin-runnable pre {
  margin: 0
}

.rich-text-editor__content kotlin-runnable::after,
.rich-text-viewer kotlin-runnable::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  height: 14px;
  width: 14px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPHBhdGggZD0iTTAgNjBsMzAuMS0zMC4xTDYwIDYweiIgZmlsbD0iIzQwODFEQyIvPgogIDxwYXRoIGQ9Ik0wIDBoMzAuMUwwIDMyLjV6IiBmaWxsPSIjNDA4MURDIi8+CiAgPHBhdGggZD0iTTMwLjEgMEwwIDMxLjdWNjBsMzAuMS0zMC4xTDYwIDB6IiBmaWxsPSIjRTQ3NDUzIi8+Cjwvc3ZnPg==);
  background-repeat: no-repeat
}

.rich-text-editor__content details summary,
.rich-text-viewer details summary {
  cursor: pointer
}

.rich-text-editor__content model-viewer {
  display: block;
  margin: 1em 0;
  font-size: 13px;
  outline: #ccc solid 2px
}

.rich-text-editor__content model-viewer::before {
  content: "<model-viewer>, " attr(src);
  display: block;
  color: #666
}

.step-view {
  padding: 1em;
  margin: 0 auto;
  width: 100%;
  position: relative;
  transition: transform .6s;
  background-color: inherit;
  border: 1px solid #ccc
}

.step-view.step-view_material {
  height: 100%
}

.step-view.step-view_material .no-video {
  border: 1px solid #ccc;
  text-align: center;
  padding-top: 5em;
  height: 100%;
  width: 100%
}

.step-view.step-view_material .video__thumbnail {
  width: 100%
}

.step-view .video-player_next-step-overlay {
  position: absolute;
  background: rgba(0, 0, 0, .8);
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.step-view .next-step-overlay__info {
  height: 130px;
  margin-top: auto
}

.step-view .next-step-overlay__toggler {
  margin-top: 15px;
  margin-bottom: auto;
  width: 100%
}

.step-view .next-step-overlay__toggler .ui-toggler__toggle {
  text-align: right;
  width: 50%
}

.step-view .next-step-overlay__toggler .ui-toggler__label {
  display: inline;
  color: #fff;
  text-align: left;
  width: 50%
}

.step-view .next-step-overlay_text-start {
  text-decoration: underline;
  cursor: pointer;
  color: #fff
}

.step-view .next-step-overlay__cancel {
  color: #fff;
  text-decoration: underline;
  margin-top: 10px;
  margin-bottom: 10px
}

.step-view .next-step-overlay__cancel,
.step-view .next-step-overlay__next-text-wrapper {
  font-size: .8em
}

.step-view .next_step_timer-svg {
  z-index: 1;
  cursor: pointer
}

.step-view .next_step_timer-svg svg {
  width: 128px;
  height: 128px
}

.step-view .next-step-overlay__timer {
  overflow: hidden;
  padding-top: 3px;
  transform: scale(.8);
  max-height: 130px
}

.step-view .next-step-overlay__timer .wrapper {
  top: -175px;
  width: 128px;
  height: 128px;
  position: relative;
  margin: 40px auto 10px;
  background: #333;
  border-radius: 50%;
  z-index: 0
}

.step-view .next-step-overlay__timer .wrapper,
.step-view .next-step-overlay__timer .wrapper * {
  box-sizing: border-box
}

.step-view .next-step-overlay__timer .wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  border: 5px solid #6c6
}

.step-view .next-step-overlay__timer .wrapper .spinner {
  border-radius: 100% 0 0 100%/50% 0 0 50%;
  z-index: 200;
  border-right: none;
  -webkit-animation: rota 5s linear 1;
  animation: rota 5s linear 1
}

.step-view .next-step-overlay__timer .wrapper:hover .filler,
.step-view .next-step-overlay__timer .wrapper:hover .mask,
.step-view .next-step-overlay__timer .wrapper:hover .spinner {
  -webkit-animation-play-state: running;
  animation-play-state: running
}

.step-view .next-step-overlay__timer .wrapper .filler {
  border-radius: 0 100% 100% 0/0 50% 50% 0;
  left: 50%;
  opacity: 0;
  z-index: 100;
  animation: opa 5s steps(1, end) infinite reverse;
  border-left: none
}

.step-view .next-step-overlay__timer .wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  -webkit-animation: opa 5s steps(1, end) infinite;
  animation: opa 5s steps(1, end) infinite
}

@media screen and (min-width:768px) {
  .step-view .next-step-overlay__next-text-wrapper {
    font-size: 1em
  }

  .step-view .next-step-overlay__timer {
    transform: scale(1)
  }
}

.ui-toggler {
  display: flex;
  justify-content: center;
  align-items: center
}

.ui-toggler[aria-disabled=true] {
  cursor: not-allowed
}

.ui-toggler[data-theme=main] {
  justify-content: start
}

.ui-toggler[data-theme=main][data-loading] .ui-toggler__toggle {
  opacity: .76
}

.course-info-editor__upload-widget-content[data-state=empty] .course-info-editor__upload-widget-icon,
.course-info-editor__upload-widget-content[data-state=error] .course-info-editor__upload-widget-icon,
.course-info-editor__upload-widget-content[data-state=processing] .course-info-editor__upload-widget-icon,
.lesson-edit-step-pin.deleted,
.promocode-editor__table tr[data-is-invalid] .promocode-editor__date,
.promocode-editor__table tr[data-is-invalid] td>:not(.promocode-editor__promocode-extra),
.promocode-editor__table tr[data-noactive] .promocode-editor__date,
.promocode-editor__table tr[data-noactive] td>:not(.promocode-editor__promocode-extra),
.submissions-table tr:not([data-review-state=loading]) td[data-is-zero-score]>*,
.submissions-table tr[data-review-state=cant-review-another] td>:not(.submissions-table__extra-actions-place),
.submissions-table tr[data-review-state=cant-review-teacher] td>:not(.submissions-table__extra-actions-place),
.submissions-table tr[data-review-state=cant-review-wrong] td>:not(.submissions-table__extra-actions-place),
.ui-toggler[data-theme=main][aria-disabled=true] .ui-toggler__toggle {
  opacity: .38
}

.ui-toggler[data-theme=main] .ui-toggler__toggle input+label {
  width: 40px;
  height: 24px;
  border-radius: 24px;
  background-color: transparent;
  margin-left: 0
}

.ui-toggler[data-theme=main] .ui-toggler__toggle input:focus+label {
  box-shadow: none
}

.ui-toggler[data-theme=main] .ui-toggler__toggle input+label::before {
  background-color: #ccc;
  border-radius: 20px
}

.ui-toggler[data-theme=main] .ui-toggler__toggle input+label::after {
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  box-shadow: none
}

.ui-toggler[data-theme=main] .ui-toggler__toggle input:checked+label::after {
  transform: translateX(16px);
  -webkit-mask: url(/static/frontend/common_icons/switcher.svg) center/contain no-repeat, linear-gradient(#fff 0 0);
  mask: url(/static/frontend/common_icons/switcher.svg) center/contain no-repeat, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude
}

.ui-toggler[data-theme=main] .ui-toggler__toggle input:checked+label::before {
  background-color: #4485ed
}

.ui-toggler[data-theme=main] .ui-toggler__label {
  color: inherit;
  white-space: nowrap
}

.ui-toggler__toggle {
  line-height: 0;
  display: inline-block
}

.ui-toggler__toggle input {
  position: absolute;
  width: 0;
  opacity: 0
}

.ui-toggler__toggle input+label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 2px;
  width: 60px;
  height: 30px;
  background-color: #ddd;
  border-radius: 60px;
  margin: 0;
  transition: .3s box-shadow
}

.ui-toggler__toggle input[disabled]+label {
  cursor: not-allowed
}

.button.course-promo-enrollment__gift-btn[data-loading],
.button.lesson-end__gift-btn[data-loading],
.the-form-field[data-validating],
[data-loading] .ui-toggler__toggle input[disabled]+label,
button:not(.st-button_style_none).course-promo-enrollment__wishlist-btn[data-loading],
button:not(.st-button_style_none).lesson-end__wishlist-btn[data-loading] {
  cursor: progress
}

.ui-toggler__toggle input:focus+label {
  box-shadow: 0 0 5px 1px #ddd
}

.ui-toggler__toggle input+label::after,
.ui-toggler__toggle input+label::before {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: ""
}

.ui-toggler__toggle input+label::before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 30px;
  transition: background .4s
}

.ui-toggler__toggle input+label::after {
  width: 31px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  transition: all .4s
}

.ui-toggler__toggle input:checked+label::before {
  background-color: #a5e5a5
}

.ui-toggler__toggle input:checked+label::after {
  transform: translateX(30px)
}

.ui-toggler__label {
  margin-bottom: 0;
  cursor: pointer
}

.ui-toggler__label+.ui-toggler__toggle,
.ui-toggler__toggle+.ui-toggler__label {
  margin-left: 10px
}

.uploadcare--dialog {
  z-index: var(--z-uploadcare-dialog)
}

.uploadcare--dialog .uploadcare--button {
  flex-shrink: 0;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  width: auto;
  min-width: 100px;
  height: auto;
  min-height: 0;
  border-radius: 6px;
  border: 1px solid #157cfc;
  background: 0 0;
  color: #157cfc;
  cursor: default;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  box-shadow: none;
  text-shadow: none;
  transition: background .3s, color .3s, border .3s
}

@media (min-width:760px) {
  .uploadcare--dialog .uploadcare--button {
    padding: 10px 20px;
    font-size: 17.5px;
    line-height: 25px
  }

  .uploadcare--dialog .uploadcare--menu__toggle {
    display: none
  }
}

.uploadcare--dialog .uploadcare--button svg {
  pointer-events: none
}

.uploadcare--dialog .uploadcare--button:focus,
.uploadcare--dialog .uploadcare--button:hover {
  background: 0 0;
  border-color: #3891ff;
  color: #3891ff;
  font-weight: 400;
  font-style: normal;
  box-shadow: none;
  text-shadow: none
}

.uploadcare--dialog .uploadcare--button:focus {
  outline: rgba(21, 124, 252, .5) solid 2px;
  outline-offset: 1px
}

.uploadcare--dialog .uploadcare--dialog__close:focus,
.uploadcare--dialog .uploadcare--menu__toggle:focus {
  outline-offset: -2px
}

.uploadcare--dialog .uploadcare--button:active {
  border-color: #0969ee;
  color: #0969ee
}

.uploadcare--dialog .uploadcare--button:disabled,
.uploadcare--dialog .uploadcare--button[aria-disabled=true] {
  background: 0 0 !important;
  border-color: #d4d2d2 !important;
  color: #d4d2d2 !important;
  cursor: not-allowed
}

.uploadcare--dialog .uploadcare--button_icon {
  padding: 14px;
  min-width: 0;
  width: 60px;
  height: 60px
}

.uploadcare--dialog .uploadcare--button_muted {
  border-color: transparent !important;
  color: #a4a2a1;
  border-radius: 0
}

.uploadcare--dialog .uploadcare--button_muted:focus,
.uploadcare--dialog .uploadcare--button_muted:hover {
  color: #157cfc
}

.uploadcare--dialog .uploadcare--button_muted:disabled,
.uploadcare--dialog .uploadcare--button_muted[aria-disabled=true] {
  border-color: transparent !important
}

.uploadcare--dialog .uploadcare--button_overlay {
  background: rgba(53, 53, 53, .5);
  border-color: transparent;
  color: #fff
}

.uploadcare--dialog .uploadcare--button_overlay:focus,
.uploadcare--dialog .uploadcare--button_overlay:hover {
  background: rgba(102, 102, 102, .5);
  border-color: transparent;
  color: #fff
}

.uploadcare--dialog .uploadcare--button_overlay:active {
  background: rgba(33, 33, 33, .5)
}

.uploadcare--dialog .uploadcare--button_primary {
  background: #157cfc;
  border-color: #157cfc;
  color: #fff
}

.uploadcare--dialog .uploadcare--button_primary:focus,
.uploadcare--dialog .uploadcare--button_primary:hover {
  background: #3891ff;
  border-color: #3891ff;
  color: #fff
}

.uploadcare--dialog .uploadcare--button_primary:active {
  background: #0969ee;
  border-color: #0969ee
}

.uploadcare--dialog .uploadcare--button_primary:disabled,
.uploadcare--dialog .uploadcare--button_primary[aria-disabled=true] {
  background: #d4d2d2 !important;
  border-color: #d4d2d2 !important;
  color: #fff !important
}

.uploadcare--dialog .uploadcare--button_size_big {
  padding: 10px 25px;
  font-size: 20px;
  line-height: 30px
}

.uploadcare--dialog .uploadcare--button_size_small {
  padding: 5px 10px;
  min-width: 80px;
  font-size: 15px;
  line-height: 20px
}

.uploadcare--dialog .uploadcare--menu__toggle {
  width: 60px;
  height: 60px;
  transition: none
}

.uploadcare--dialog .uploadcare--dialog__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 49
}

@media (max-width:759px) {
  .uploadcare--dialog .uploadcare--menu:not(.uploadcare--menu_opened) .uploadcare--menu__toggle-icon_back {
    display: none
  }

  .uploadcare--dialog .uploadcare--menu_opened {
    position: relative;
    z-index: 1000;
    height: 100%
  }

  .uploadcare--dialog .uploadcare--menu_opened .uploadcare--menu__toggle {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    background: #e3e1e1
  }

  .uploadcare--dialog .uploadcare--menu_opened .uploadcare--menu__toggle-icon_menu {
    display: none
  }

  .uploadcare--dialog .uploadcare--menu_opened .uploadcare--menu__items {
    height: calc(100% - 60px)
  }
}

.uploadcare--dialog .uploadcare--file-source {
  margin: 10px;
  border-color: #e3e1e1;
  background: #e3e1e1;
  color: #353535
}

.uploadcare--dialog .uploadcare--file-source_all {
  order: 1;
  border-color: currentColor;
  background: 0 0;
  color: #157cfc
}

.uploadcare--dialog .uploadcare--file-sources {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%
}

@media (max-width:759px) and (max-height:450px),
(min-width:760px) {
  .uploadcare--dialog .uploadcare--file-sources {
    display: none
  }
}

.uploadcare--dialog .uploadcare--file-sources__caption {
  margin: 15px 0 5px
}

@media (max-width:759px) and (max-height:550px) {

  .uploadcare--dialog .uploadcare--file-sources__item:nth-child(4),
  .uploadcare--dialog .uploadcare--file-sources__item:nth-child(5),
  .uploadcare--dialog .uploadcare--file-sources__item:nth-child(6) {
    display: none
  }
}

.uploadcare--dialog .uploadcare--file-sources__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 300px
}

.uploadcare--dialog .uploadcare--file-sources__items:empty,
.uploadcare--dialog .uploadcare--file-sources__items:not(.uploadcare--file-sources__items_many) .uploadcare--file-source__all {
  display: none
}

.uploadcare--dialog .uploadcare--crop-sizes {
  flex-grow: 1;
  display: flex;
  justify-content: space-around
}

.uploadcare--dialog .uploadcare--crop-sizes__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  height: 65px;
  background: 0 0;
  border-color: transparent;
  color: #353535
}

.uploadcare--dialog .uploadcare--crop-sizes__item:focus,
.uploadcare--dialog .uploadcare--crop-sizes__item:hover {
  background: 0 0;
  border-color: transparent;
  color: #157cfc
}

.uploadcare--dialog .uploadcare--crop-sizes__item:active {
  background: 0 0;
  border-color: transparent;
  color: #0969ee
}

.uploadcare--dialog .uploadcare--crop-sizes__item:disabled,
.uploadcare--dialog .uploadcare--crop-sizes__item[aria-disabled=true] {
  border-color: transparent !important
}

.uploadcare--dialog .uploadcare--crop-sizes__item:after {
  content: attr(data-caption);
  display: block;
  font-size: 14px;
  line-height: 25px;
  text-transform: uppercase
}

@media (max-width:400px),
(max-width:600px) and (orientation:landscape) {
  .uploadcare--dialog .uploadcare--crop-sizes__item:after {
    font-size: 12px
  }
}

.uploadcare--dialog .uploadcare--crop-sizes__item:before {
  content: "";
  display: block;
  order: 1;
  margin: 1px 0;
  width: 6px;
  height: 6px;
  background: 0 0;
  border-radius: 50%
}

.uploadcare--dialog .uploadcare--crop-sizes__item_current:active,
.uploadcare--dialog .uploadcare--crop-sizes__item_current:focus,
.uploadcare--dialog .uploadcare--crop-sizes__item_current:hover {
  color: #353535
}

.uploadcare--dialog .uploadcare--crop-sizes__item_current:before {
  background: #157cfc
}

.uploadcare--dialog .uploadcare--crop-sizes__icon {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border: 2px solid;
  border-radius: 2px;
  color: inherit;
  transform: scale(.666)
}

.uploadcare--dialog .uploadcare--crop-sizes__icon_free {
  border: none;
  border-radius: 0;
  transform: none
}

.uploadcare--dialog .uploadcare-tab-effects--crops {
  display: flex;
  justify-content: space-around;
  max-width: 100%
}

.uploadcare--dialog .uploadcare-tab-effects--effect-button {
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  width: 45px;
  height: 45px;
  border-color: transparent;
  background: 0 0;
  color: #212121;
  fill: #212121
}

.uploadcare--dialog .uploadcare-tab-effects--effect-button:active,
.uploadcare--dialog .uploadcare-tab-effects--effect-button:focus,
.uploadcare--dialog .uploadcare-tab-effects--effect-button:hover {
  fill: #0969ee;
  color: #0969ee
}

.uploadcare--dialog .uploadcare-tab-effects--effect-button:focus,
.uploadcare--dialog .uploadcare-tab-effects--effect-button:hover {
  border-color: transparent;
  background: 0 0
}

.uploadcare--dialog .uploadcare-tab-effects--effect-button[aria-disabled=true] {
  border-color: transparent !important;
  background: 0 0 !important;
  color: #d4d2d2 !important;
  fill: #d4d2d2 !important
}

.uploadcare--dialog .uploadcare-tab-effects--effect-button:before {
  content: "";
  display: block;
  order: 1;
  margin: 1px 0;
  width: 6px;
  height: 6px;
  background: 0 0;
  border-radius: 50%
}

.uploadcare--dialog .uploadcare-tab-effects--effect-button_applied:before {
  background: #157cfc
}

@media (min-width:760px) {

  .uploadcare--dialog .uploadcare-tab-effects--effect-button:focus,
  .uploadcare--dialog .uploadcare-tab-effects--effect-button:hover {
    position: relative;
    overflow: visible
  }

  .uploadcare--dialog .uploadcare-tab-effects--effect-button:focus:after,
  .uploadcare--dialog .uploadcare-tab-effects--effect-button:hover:after {
    content: attr(aria-label);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    height: auto;
    background: #e3e1e1;
    color: #212121;
    transform: translateX(-50%) translateY(-100%);
    padding: 12px;
    border-radius: 6px;
    line-height: 1;
    min-width: 100%
  }
}

.uploadcare--dialog .uploadcare-tab-effects--icon {
  height: 32px
}

.uploadcare--dialog .uploadcare-tab-effects--effects {
  display: flex;
  justify-content: space-around;
  max-width: 100%
}

.uploadcare--dialog .uploadcare-tab-effects--additions,
.uploadcare--dialog .uploadcare-tab-effects--range {
  flex-grow: 1
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 40px;
  line-height: 1
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input:focus {
  outline: rgba(21, 124, 252, .5) solid 2px;
  outline-offset: 1px
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-moz-range-track {
  background: #d4d2d2
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-moz-range-progress {
  background: #157cfc
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-moz-range-thumb {
  border: none;
  background: #212121;
  box-shadow: none
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-moz-range-thumb:focus,
.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-moz-range-thumb:hover {
  background: #000
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-moz-range-thumb:active {
  background: #000
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-ms-track {
  background: #d4d2d2
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-ms-fill-lower {
  background: #157cfc
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-ms-thumb {
  background: #212121
}

.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input::-ms-thumb:active,
.uploadcare--dialog input[type=range].uploadcare-tab-effects--range__input:focus::-ms-thumb {
  background: #000
}

.file-upload__input {
  position: absolute !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important
}

.clipboard-fragment {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: inherit
}

.clipboard-fragment.is-default {
  display: inline !important;
  background-color: rgba(86, 164, 255, .2);
  cursor: pointer;
  transition: background-color, color .2s;
  padding: .1em .3em;
  border-radius: .2em
}

.clipboard-fragment.is-default:hover {
  background-color: rgba(20, 102, 198, .2)
}

.clipboard-fragment[data-theme=area] {
  width: 100%;
  cursor: pointer;
  background-color: #e7f2ff;
  border: 1px dashed #4485ed;
  padding: 11px 16px;
  border-radius: 4px;
  color: #003e86;
  transition: background .4s
}

.clipboard-fragment[data-theme=area]:hover {
  background-color: #ddecff
}

.clipboard-fragment[data-theme=line] {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid rgba(204, 204, 204, .38);
  padding: 5px 6px;
  border-radius: 3px;
  color: #999;
  transition: all .4s;
  font-size: 12px;
  width: 258px
}

.clipboard-fragment[data-theme=line]:hover {
  border-color: #ccc;
  color: #5e5e5e
}

.clipboard-fragment__tooltip {
  font-size: 13px;
  white-space: nowrap
}

.clipboard-fragment__tooltip_theme_default.clipboard-fragment__tooltip_default {
  background: #fff;
  box-shadow: 0 1px 5px 3px #e6e9ed;
  border: 1px solid #ccc;
  color: #5e5e5e;
  text-shadow: none
}

.clipboard-fragment__tooltip_theme_default.clipboard-fragment__tooltip_default.ember-tooltip[x-placement^=top] .ember-tooltip-arrow {
  border-top-color: #fff;
  filter: drop-shadow(0 1px 0 #ccc)
}

.clipboard-fragment__tooltip_theme_area {
  font-size: 12px;
  white-space: normal;
  max-width: 230px
}

.clipboard-fragment__tooltip_theme_line {
  font-size: 12px;
  white-space: normal
}

.clipboard-fragment__tooltip_theme_line.clipboard-fragment__tooltip_default {
  background: #fff;
  box-shadow: 0 1px 5px 3px #e6e9ed;
  border: 1px solid #ccc;
  color: #5e5e5e;
  text-shadow: none
}

.clipboard-fragment__tooltip_theme_line.clipboard-fragment__tooltip_default.ember-tooltip[x-placement^=top] .ember-tooltip-arrow {
  border-top-color: #fff;
  filter: drop-shadow(0 1px 0 #ccc)
}

.radio-button-group {
  display: flex;
  flex-wrap: wrap;
  border-radius: .3em
}

.radio-button-group+.radio-button-group {
  margin-top: .5em
}

.radio-button-group__input.radio-button-group__input_hidden {
  position: absolute;
  opacity: 0;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  pointer-events: none
}

html[data-whatintent=keyboard] .radio-button-group__input:focus+.radio-button-group__button,
html[data-whatintent=touch] .radio-button-group__input:focus+.radio-button-group__button {
  box-shadow: var(--focus-outline-box-shadow-params) var(--focus-outline-color);
  z-index: 1
}

.radio-button-group__button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  padding: .3em .8em;
  margin: 0;
  line-height: 1.5;
  height: 2.25em;
  font-size: 1em;
  cursor: pointer;
  border: 1px solid var(--validation-border-color, #ccc);
  color: #222;
  background-color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 0
}

.radio-button-group__button:first-of-type {
  border-radius: .3em 0 0 .3em
}

.radio-button-group__button:last-of-type {
  border-radius: 0 .3em .3em 0
}

.radio-button-group__button:not(:first-of-type) {
  border-left-color: #ccc;
  margin-left: -1px
}

.radio-button-group__button:first-of-type:last-of-type {
  border-radius: .3em
}

.radio-button-group__input[disabled]+.radio-button-group__button {
  cursor: not-allowed;
  color: rgba(34, 34, 34, .6);
  background-color: #ddd
}

[data-readonly] .radio-button-group__input[disabled]+.radio-button-group__button {
  background-color: transparent;
  color: #222;
  cursor: default !important
}

.radio-button-group__input:checked+.radio-button-group__button,
[data-readonly] .radio-button-group__input:checked+.radio-button-group__button {
  background-color: #222;
  color: #fff;
  border-color: #222;
  z-index: 1
}

.radio-button-group__button:hover {
  background-color: #e6e9ed;
  color: #222;
  border-color: #ccc;
  z-index: 1
}

.radio-button-group.radio-button-group_theme_light .radio-button-group__input:checked+.radio-button-group__button {
  background-color: #eee;
  border-color: #ccc;
  color: #222
}

.radio-button-group.radio-button-group_theme_light .radio-button-group__button:hover {
  background-color: rgba(238, 238, 238, .3)
}

.radio-button-group.radio-button-group_theme_accent .radio-button-group__button:hover {
  background-color: #fff;
  border-color: #6c7bdf;
  color: #3e50cb
}

.radio-button-group.radio-button-group_theme_accent .radio-button-group__input[disabled]+.radio-button-group__button {
  background-color: #fff;
  color: #999
}

.radio-button-group.radio-button-group_theme_accent .radio-button-group__input:checked+.radio-button-group__button {
  background-color: #E9EBFA;
  border-color: #6c7bdf;
  color: #3e50cb
}

.radio-button-chunk {
  display: inline-flex;
  flex-direction: column
}

.radio-button-chunk__btn {
  flex-grow: 1
}

.radio-button-chunk__btn.is-partial {
  flex-grow: 0
}

.progressive-columns li {
  -moz-column-break-inside: avoid;
  break-inside: avoid-column;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  margin: 0;
  line-height: 1.5
}

.progressive-columns[data-columns="1"] {
  -moz-column-count: 1;
  column-count: 1
}

.progressive-columns[data-columns="1"][data-max-columns="1"] {
  width: 100%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="1"] {
    -moz-column-count: inherit;
    column-count: inherit
  }

  .progressive-columns[data-columns="1"][data-max-columns="1"] {
    width: inherit
  }
}

.progressive-columns[data-columns="1"][data-max-columns="2"] {
  width: 50%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="1"][data-max-columns="2"] {
    width: inherit
  }
}

.progressive-columns[data-columns="1"][data-max-columns="3"] {
  width: 33.3333333333%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="1"][data-max-columns="3"] {
    width: inherit
  }
}

.progressive-columns[data-columns="1"][data-max-columns="4"] {
  width: 25%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="1"][data-max-columns="4"] {
    width: inherit
  }
}

.progressive-columns[data-columns="1"][data-max-columns="5"] {
  width: 20%
}

.progressive-columns[data-columns="2"] {
  -moz-column-count: 2;
  column-count: 2
}

@media (max-width:768px) {
  .progressive-columns[data-columns="1"][data-max-columns="5"] {
    width: inherit
  }

  .progressive-columns[data-columns="2"] {
    -moz-column-count: inherit;
    column-count: inherit
  }
}

.progressive-columns[data-columns="2"][data-max-columns="1"] {
  width: 200%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="2"][data-max-columns="1"] {
    width: inherit
  }
}

.progressive-columns[data-columns="2"][data-max-columns="2"] {
  width: 100%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="2"][data-max-columns="2"] {
    width: inherit
  }
}

.progressive-columns[data-columns="2"][data-max-columns="3"] {
  width: 66.6666666667%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="2"][data-max-columns="3"] {
    width: inherit
  }
}

.progressive-columns[data-columns="2"][data-max-columns="4"] {
  width: 50%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="2"][data-max-columns="4"] {
    width: inherit
  }
}

.progressive-columns[data-columns="2"][data-max-columns="5"] {
  width: 40%
}

.progressive-columns[data-columns="3"] {
  -moz-column-count: 3;
  column-count: 3
}

@media (max-width:768px) {
  .progressive-columns[data-columns="2"][data-max-columns="5"] {
    width: inherit
  }

  .progressive-columns[data-columns="3"] {
    -moz-column-count: inherit;
    column-count: inherit
  }
}

.progressive-columns[data-columns="3"][data-max-columns="1"] {
  width: 300%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="3"][data-max-columns="1"] {
    width: inherit
  }
}

.progressive-columns[data-columns="3"][data-max-columns="2"] {
  width: 150%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="3"][data-max-columns="2"] {
    width: inherit
  }
}

.progressive-columns[data-columns="3"][data-max-columns="3"] {
  width: 100%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="3"][data-max-columns="3"] {
    width: inherit
  }
}

.progressive-columns[data-columns="3"][data-max-columns="4"] {
  width: 75%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="3"][data-max-columns="4"] {
    width: inherit
  }
}

.progressive-columns[data-columns="3"][data-max-columns="5"] {
  width: 60%
}

.progressive-columns[data-columns="4"] {
  -moz-column-count: 4;
  column-count: 4
}

@media (max-width:768px) {
  .progressive-columns[data-columns="3"][data-max-columns="5"] {
    width: inherit
  }

  .progressive-columns[data-columns="4"] {
    -moz-column-count: inherit;
    column-count: inherit
  }
}

.progressive-columns[data-columns="4"][data-max-columns="1"] {
  width: 400%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="4"][data-max-columns="1"] {
    width: inherit
  }
}

.progressive-columns[data-columns="4"][data-max-columns="2"] {
  width: 200%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="4"][data-max-columns="2"] {
    width: inherit
  }
}

.progressive-columns[data-columns="4"][data-max-columns="3"] {
  width: 133.3333333333%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="4"][data-max-columns="3"] {
    width: inherit
  }
}

.progressive-columns[data-columns="4"][data-max-columns="4"] {
  width: 100%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="4"][data-max-columns="4"] {
    width: inherit
  }
}

.progressive-columns[data-columns="4"][data-max-columns="5"] {
  width: 80%
}

.progressive-columns[data-columns="5"] {
  -moz-column-count: 5;
  column-count: 5
}

@media (max-width:768px) {
  .progressive-columns[data-columns="4"][data-max-columns="5"] {
    width: inherit
  }

  .progressive-columns[data-columns="5"] {
    -moz-column-count: inherit;
    column-count: inherit
  }
}

.progressive-columns[data-columns="5"][data-max-columns="1"] {
  width: 500%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="5"][data-max-columns="1"] {
    width: inherit
  }
}

.progressive-columns[data-columns="5"][data-max-columns="2"] {
  width: 250%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="5"][data-max-columns="2"] {
    width: inherit
  }
}

.progressive-columns[data-columns="5"][data-max-columns="3"] {
  width: 166.6666666667%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="5"][data-max-columns="3"] {
    width: inherit
  }
}

.progressive-columns[data-columns="5"][data-max-columns="4"] {
  width: 125%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="5"][data-max-columns="4"] {
    width: inherit
  }
}

.progressive-columns[data-columns="5"][data-max-columns="5"] {
  width: 100%
}

@media (max-width:768px) {
  .progressive-columns[data-columns="5"][data-max-columns="5"] {
    width: inherit
  }
}

.modal-dialog-confirm .modal-dialog .modal-dialog__content {
  padding: 24px 32px 32px
}

.modal-dialog-confirm .modal-dialog .modal-dialog-top__close {
  color: #999
}

.modal-dialog-confirm__img {
  display: block;
  margin: 0 auto;
  width: 50px;
  height: 50px
}

.modal-dialog-confirm__text {
  margin: 28px 0 24px;
  font-size: 16px;
  line-height: 1.44;
  letter-spacing: .3px
}

.modal-dialog-confirm__buttons {
  display: flex;
  flex-direction: row
}

.modal-dialog-confirm__buttons button {
  padding: 9px 24px;
  margin-left: 12px;
  white-space: nowrap
}

.modal-dialog-confirm__buttons button:first-child {
  margin-left: 0
}

@media (max-width:768px) {
  .modal-dialog-confirm__buttons {
    white-space: normal;
    flex-direction: column
  }

  .modal-dialog-confirm__buttons button {
    margin-left: 0;
    margin-top: 10px;
    white-space: normal
  }

  .modal-dialog-confirm__buttons button:first-child {
    margin-top: 0
  }
}

.the-form-field {
  position: relative
}

.the-form-field[data-invalid][data-err-shown]:not([data-visible-errors="0"]) {
  --validation-border-color: #d41f1f
}

.the-form-field[data-invalid][data-err-shown]:not([data-visible-errors="0"]) .the-form-field__footnote {
  display: none
}

.the-form-field:focus-within .the-form-field__char-counter {
  display: inline-block
}

.the-form__field {
  margin: 18px 0
}

.the-form-field__caption {
  margin: 0 0 7px;
  padding: 0;
  border: none;
  background: 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3
}

.the-form-field__caption[data-required]::after {
  content: "*";
  margin-left: 1px;
  color: #d41f1f
}

.the-form-field__footnote {
  display: inline-block;
  margin: 3px 0 0;
  min-height: 21px;
  font-size: 12px
}

.the-form-field__char-counter,
.vjs-error .vjs-error-display::before,
.vjs-error+.video-player__start-sign,
.vjs-playing .vjs-big-play-button,
.vjs-stepic-skin .vjs-chapters-button {
  display: none
}

.the-form-field__char-counter {
  font-size: 13px;
  color: #aaa
}

.the-form-field__char-counter[data-pos=footnote] {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 2px;
  margin-left: 16px
}

.the-form-field__char-counter[data-pos=legend] {
  position: absolute;
  top: -8px;
  right: 8px;
  padding: 0 3px;
  line-height: 1;
  background-color: #fff
}

.the-form-field__messages {
  clear: both;
  list-style: none;
  margin: 2px 0 0;
  font-size: 12px;
  letter-spacing: .4px;
  transform: translateY(-10px);
  -webkit-animation: the-form-show-msg .2s ease-out 1 forwards;
  animation: the-form-show-msg .2s ease-out 1 forwards
}

@-webkit-keyframes the-form-show-msg {
  to {
    transform: translateY(0)
  }
}

@keyframes the-form-show-msg {
  to {
    transform: translateY(0)
  }
}

.the-form-field__message {
  margin: 0
}

.the-form-field__message[data-type=error] {
  color: #d41f1f
}

.the-form-field__message[data-type=warning] {
  color: #FFAB48
}

.the-form-field__message+.the-form-field__message {
  margin-top: .5em
}

.video-player {
  --player-navigation-space: 90px;
  background-color: #a5a5a5;
  width: 100%;
  position: relative
}

.video-player .video-js {
  width: 100%;
  height: 100%;
  --focus-outline-box-shadow-params: inset 0 0 0 4px
}

.video-player .video-js:focus {
  box-shadow: none
}

.video-player .video-js.vjs-fluid,
.video-player video.video-js,
.video-player video.vjs-tech {
  max-width: 100%;
  max-height: calc(100vh - var(--header-height) - var(--player-top-panel-height) - var(--player-navigation-space));
  position: relative;
  height: auto;
  padding-top: 0;
  line-height: 0
}

@media (max-width:768px) {

  .video-player .video-js.vjs-fluid,
  .video-player video.video-js,
  .video-player video.vjs-tech {
    max-height: calc(100vh - var(--header-height) - var(--player-top-panel-height) - var(--player-top-mobile-panel-height) - var(--player-navigation-space))
  }
}

.video-player .vjs-control-bar {
  line-height: 1
}

.video-player.video-player__fastboot * {
  cursor: wait !important
}

.video-player .next_step_timer-svg {
  z-index: 1;
  cursor: pointer
}

.video-player .next-step-overlay__timer {
  max-height: 140px;
  transform: scale(.8)
}

.video-player .next-step-overlay__timer .wrapper {
  top: -175px;
  width: 128px;
  height: 128px;
  position: relative;
  margin: 40px auto;
  background: #333;
  border-radius: 50%;
  z-index: 0
}

.video-player .next-step-overlay__timer .wrapper,
.video-player .next-step-overlay__timer .wrapper * {
  box-sizing: border-box
}

.video-player .next-step-overlay__timer .wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  border: 5px solid #6c6
}

.video-player .next-step-overlay__timer .wrapper .spinner {
  border-radius: 100% 0 0 100%/50% 0 0 50%;
  z-index: 200;
  border-right: none;
  -webkit-animation: rota 5s linear infinite;
  animation: rota 5s linear infinite
}

.navbar__profile-toggler:hover .new-year-navbar-avatar::before,
.navbar__profile[data-expanded] .new-year-navbar-avatar::before,
.video-player .next-step-overlay__timer .wrapper:hover .filler,
.video-player .next-step-overlay__timer .wrapper:hover .mask,
.video-player .next-step-overlay__timer .wrapper:hover .spinner,
html[data-whatintent=keyboard] .navbar__profile-toggler:focus .new-year-navbar-avatar::before {
  -webkit-animation-play-state: running;
  animation-play-state: running
}

.video-player .next-step-overlay__timer .wrapper .filler {
  border-radius: 0 100% 100% 0/0 50% 50% 0;
  left: 50%;
  opacity: 0;
  z-index: 100;
  animation: opa 5s steps(1, end) infinite reverse;
  border-left: none
}

.video-player .next-step-overlay__timer .wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  -webkit-animation: opa 5s steps(1, end) infinite;
  animation: opa 5s steps(1, end) infinite
}

@-webkit-keyframes rota {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes rota {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}

@-webkit-keyframes opa {
  0% {
    opacity: 1
  }

  100%,
  50% {
    opacity: 0
  }
}

@keyframes opa {
  0% {
    opacity: 1
  }

  100%,
  50% {
    opacity: 0
  }
}

.zen-mode .video-player,
[data-zen] .video-player {
  height: 100%;
  border: none;
  position: absolute;
  overflow: hidden
}

.zen-mode .step-view_video,
[data-zen] .step-view_video {
  height: calc(100vh - 62px - 46px - 68px)
}

.zen-mode .step-view_video .step-inner,
[data-zen] .step-view_video .step-inner {
  max-width: none
}

.zen-mode .video-js.vjs-fluid,
.zen-mode video.video-js,
.zen-mode video.vjs-tech,
[data-zen] .video-js.vjs-fluid,
[data-zen] video.video-js,
[data-zen] video.vjs-tech {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  padding-top: 0
}

.zen-mode .vjs-control-bar,
[data-zen] .vjs-control-bar {
  bottom: 0;
  position: absolute
}

.zen-mode .video-player__container,
[data-zen] .video-player__container {
  height: 100%
}

.vjs-error-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px;
  margin: 0;
  max-width: 90%;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  font-size: 14px
}

.vjs-error-display .vjs-modal-dialog-content::before {
  content: "•";
  margin-right: 8px;
  color: red
}

.vjs-error .vjs-big-play-button {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(100%)
}

.video-player__container {
  position: relative
}

.video-player__container:not(.video-player__container_jvs_loaded):after {
  content: " ";
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .4)
}

.video-player__container object.vjs-tech {
  min-height: 55.5em
}

.video-player__start-sign {
  display: block;
  position: absolute;
  color: #fff;
  top: 60%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
  pointer-events: none
}

.video-player-dummy[data-disabled] .video-player__start-sign,
.vjs-has-started~.video-player__start-sign {
  display: none
}

@media print {
  .video-player {
    border: 10px dotted #eee;
    padding: 1em
  }

  .video__print-note {
    font-size: 1.5em;
    margin: .5em;
    text-align: center
  }

  .video__print-note a:link:after,
  .video__print-note a:visited:after {
    content: ""
  }
}

@media screen and (max-width:480px) {

  .video-player .vjs-live-controls,
  .video-player .vjs-volume-control {
    display: none
  }

  .video-player .vjs-stepic-skin .vjs-menu-button {
    margin-right: 4px
  }

  .video-player .vjs-stepic-skin .vjs-control:before,
  .video-player .vjs-stepic-skin .vjs-playback-rate .vjs-playback-rate-value,
  .video-player .vjs-stepic-skin .vjs-resolutions-button .vjs-resolutions-value {
    font-size: 1.3em
  }
}

@media (min-width:768px) {
  .vjs-error-display {
    font-size: 16px
  }

  .video-player .next-step-overlay__next-text-wrapper {
    font-size: 1em
  }

  .video-player .next-step-overlay__timer {
    transform: scale(1)
  }
}

.video-js.vjs-paused.vjs-controls-enabled {
  overflow: hidden
}

.video-js.vjs-paused.vjs-controls-enabled .vjs-big-play-button {
  box-shadow: 0 0 0 1000vh rgba(0, 0, 0, .4)
}

.video-js.vjs-paused.vjs-controls-enabled:hover .vjs-big-play-button {
  box-shadow: 0 0 0 1000vh rgba(0, 0, 0, .5)
}

.video-player__error-support {
  margin-top: 1em
}

.vjs-full-window .video-js.vjs-fullscreen {
  z-index: var(--z-video-fullscreen)
}

.video-player-dummy {
  cursor: pointer
}

.video-player-dummy[data-disabled] {
  cursor: default
}

.video-player-dummy .video-player__start-sign {
  z-index: auto
}

.video-player-dummy__container {
  position: relative;
  border-radius: inherit;
  overflow: hidden
}

.video-player-dummy__inner {
  width: 100%;
  max-width: 100%;
  padding-top: 56.25%;
  height: 0
}

.video-player-dummy__poster {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-color: #000;
  cursor: pointer
}

.video-player-dummy__poster::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .4)
}

button.video-player-dummy__btn:not(.st-button_style_none) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 70px;
  width: 70px;
  padding: 10px;
  text-align: center;
  background-color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 50%
}

.video-player-dummy__btn-icon::before {
  content: "";
  font-size: 50px;
  color: #6c6;
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal
}

@font-face {
  font-family: VideoJS;
  src: url(/static/frontend-build/fonts/VideoJS.woff) format("woff");
  font-weight: 400;
  font-style: normal
}

.video-editor-wrapper {
  font-size: 16px;
  position: relative;
  margin: 0
}

.video-editor-wrapper .video-details {
  margin-top: 1em;
  text-align: center;
  position: relative
}

.video-editor-wrapper .video-details p {
  margin-top: 1em
}

.video-editor-wrapper .video-upload {
  margin: 0 0 1em
}

.video-editor-wrapper .video-help {
  margin: 2em 0 20px;
  font-size: .9em;
  color: #5e5e5e
}

.video-editor-wrapper .video-srt {
  margin: 2em 20px 20px;
  font-size: .9em;
  color: #5e5e5e
}

.video-editor-wrapper .video-srt .video-details__subtitles {
  width: 100%;
  max-width: 100%;
  background-color: #eee;
  height: 10em
}

.video-editor-wrapper .video-editor__loader {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 25;
  background-color: #fff
}

.video-editor-wrapper .video-link {
  width: 100%;
  border-color: #ddd;
  margin-top: 1em
}

.video-editor-wrapper .video-link-upload {
  margin-top: -.5em
}

.video-editor-wrapper .video-details-text {
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 10px;
  word-break: break-word
}

.dismiss-button button:not(.st-button_style_none):focus,
.dismiss-button button:not(.st-button_style_none):hover {
  color: #d41f1f
}

.dismiss-button button:not(.st-button_style_none):active {
  color: red
}

.comment-widget {
  font-size: 14px;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start
}

.comment-widget.discussion_replies_hidden .comment-widget__replies {
  overflow-y: hidden;
  margin: 0;
  padding: 0;
  opacity: 0
}

.comment-widget[data-animation-stop] {
  -webkit-animation: none;
  animation: none
}

.comment-widget[data-roboto-font-fix] .comment-input__editor .rich-text-editor__content,
.comment-widget[data-roboto-font-fix] .comment-widget__comment {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
}

.comment-widget_highlighted {
  -webkit-animation: comment-highlight 1.5s alternate 2;
  animation: comment-highlight 1.5s alternate 2;
  border: 6px solid transparent;
  margin: -6px;
  border-radius: 8px;
  background-color: rgba(255, 244, 216, .8);
  border-color: rgba(255, 244, 216, .8)
}

.comment-widget_highlighted.comment-widget_has-linked-reply {
  background-color: inherit;
  border: inherit;
  margin: inherit
}

.comment-widget__content {
  padding-top: 6px;
  padding-bottom: 12px;
  padding-right: 35px
}

button:not(.st-button_style_none).comment-widget__show-more-toggler {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  scroll-margin-bottom: 80px
}

button:not(.st-button_style_none).comment-widget__show-more-toggler[aria-expanded=true] {
  margin-top: 8px
}

.comment-widget__header {
  display: flex;
  align-items: flex-start
}

.comment-widget__header-content {
  min-width: 0;
  margin-right: 20px
}

.comment-widget__user {
  display: flex;
  min-width: 0
}

.comment-widget__titles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: -4px;
  color: #999
}

.comment-widget__titles>* {
  margin: 4px
}

.comment-widget__pin-info {
  color: #777;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px;
  margin-bottom: -6px;
  display: flex;
  align-items: flex-start
}

.comment-widget__pin-info .svg-icon {
  transform: translateY(-4px);
  margin-left: -.5em
}

.comment-widget__pin-info .svg-icon,
.comment-widget__pin-info .svg-icon svg {
  width: 20px;
  height: 20px
}

.comment-widget__header-actions {
  margin-left: auto;
  display: flex;
  align-items: center
}

.comment-widget__comment.rich-text-viewer {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  opacity: var(--comment-widget-opacity, 1)
}

.comment-widget__comment.rich-text-viewer p {
  margin: .4em 0
}

.comment-widget__comment.rich-text-viewer p:first-child {
  margin-top: 0
}

.comment-widget__comment.rich-text-viewer p:last-child {
  margin-bottom: 0
}

.comment-widget__comment.rich-text-viewer code {
  background-color: #fff
}

.comment-widget_abused,
.comment-widget_deleted {
  --comment-widget-opacity: 0.2
}

.comment-widget_deleted .comment-widget__comment {
  font-style: italic;
  text-decoration: line-through
}

.comment-widget__date {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  color: #777
}

.comment-widget__edited {
  margin-top: 12px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px;
  font-style: italic;
  color: #777
}

.comment-widget__replies-comment-input {
  padding-top: 42px;
  margin-top: -26px
}

.comment-widget__replies-comment-input .comment-input__header {
  margin-top: -42px
}

.comment-widget__submission {
  opacity: var(--comment-widget-opacity)
}

.comment-widget__comment+.comment-widget__submission,
.comment-widget__edited+.comment-widget__submission {
  margin-top: 12px
}

.comment-widget__comment-input_edit+.comment-widget__submission {
  margin-top: 15px
}

.comment-widget__reply {
  border: none
}

button:not(.st-button_style_none).comment-widget__show-replies {
  border: none;
  text-align: start
}

button:not(.st-button_style_none).comment-widget__show-replies .svg-icon {
  margin-left: 3px
}

button:not(.st-button_style_none).comment-widget__show-replies .svg-icon,
button:not(.st-button_style_none).comment-widget__show-replies .svg-icon svg {
  width: 10px;
  height: 7px
}

.comment-widget__staff-replied {
  color: #777
}

.comment-widget__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: -6px -24px -6px 0;
  font-size: 14px;
  color: #999
}

.comment-widget__footer>*,
.comment-widget__footer>button:not(.st-button_style_none) {
  margin: 6px 24px 6px 0
}

.comment-widget__footer button {
  min-height: 22px;
  font-size: inherit;
  color: inherit
}

.comment-widget__footer .comment-widget__show-replies,
.comment-widget__footer-button:not(.st-button_style_none) {
  color: #1466c6
}

.comment-widget__replies {
  padding-top: 30px;
  transition-property: transform, opacity;
  transition-duration: .2s;
  transition-timing-function: ease-in;
  position: relative;
  opacity: 1;
  --comment-widget-opacity: 1
}

.comment-widget__note {
  font-style: italic
}

.comment-widget__footer-button:not(.st-button_style_none):focus,
.comment-widget__footer-button:not(.st-button_style_none):hover {
  color: #003e86
}

.comment-widget__target {
  margin-left: auto
}

.comment-widget__target>[data-skeleton] {
  width: 100px;
  height: 1.2em
}

.comment-widget__target-link {
  color: #6c6
}

@-webkit-keyframes comment-highlight {
  100% {
    background-color: #ffeec2;
    border-color: #ffeec2
  }
}

@keyframes comment-highlight {
  100% {
    background-color: #ffeec2;
    border-color: #ffeec2
  }
}

.ban-modal__reason-variants {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.ban-modal__reason-variants>button {
  margin-right: 16px
}

body {
  --player-top-mobile-panel-height: 40px;
  --player-top-panel-height: 60px
}

.player-topbar__panel {
  display: flex;
  height: 100%
}

.player-topbar__buy-course-btn.button {
  min-width: 0;
  align-self: center;
  height: 35px;
  margin: 0 2vw;
  padding: 4px 15px;
  line-height: inherit
}

.player-topbar__buy-course-btn.button span {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.player__embedded-nav-buttons {
  display: flex
}

.player__embedded-nav-buttons>button:not(.st-button_style_none) {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  white-space: nowrap
}

.player__embedded-nav-buttons>button:not(.st-button_style_none)+button {
  margin-left: 6px
}

.player__embedded-nav-buttons>button:not(.st-button_style_none) .svg-icon {
  display: flex
}

.player__embedded-nav-buttons>button:not(.st-button_style_none) svg {
  width: 1em;
  height: 1em
}

.player__embedded-nav-buttons>button:not(.st-button_style_none) span:first-child:not(.svg-icon) {
  margin-right: 6px
}

.player-topbar__user-controls {
  display: flex;
  min-width: 0;
  margin: 0 10px 0 auto
}

.player-topbar__user-controls .navbar__auth {
  display: block
}

.player-topbar__step-pins {
  display: flex;
  align-items: center;
  margin-left: 116px;
  overflow: visible;
  padding: 0 2px
}

.player-topbar__embedded-wrapper {
  display: flex;
  align-items: center;
  width: 100%
}

.player-topbar__embedded-wrapper .player__embedded-nav-buttons {
  margin-left: 20px
}

.player-topbar__embedded-wrapper .player-topbar__embedded-course-header {
  margin: 0 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #eee
}

.player-topbar__embedded-wrapper .player-topbar__embedded-course-header a {
  --link-color: initial;
  --link-hover-color: initial;
  --link-active-color: initial;
  --link-hover-line-color: currentColor;
  --link-active-line-color: currentColor;
  --link-line-color: transparent
}

.player-topbar__embedded-wrapper .player-topbar__embedded-course-progress {
  margin-left: auto;
  margin-bottom: 0
}

.player-topbar__embedded-wrapper .player-topbar__embedded-course-progress .progress-line__numbers {
  color: #eee
}

.player-topbar__mobile-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--player-top-mobile-panel-height);
  padding: 2px;
  border-bottom: 1px solid #e6e9ed
}

.player-topbar__mobile-panel>button {
  padding: 12px;
  color: #2b2b2b
}

.player-topbar__mobile-panel>button:focus,
.player-topbar__mobile-panel>button:hover {
  color: #222
}

.player-topbar__mobile-panel>button[disabled] {
  opacity: .2
}

.player-topbar__mobile-panel>button .svg-icon {
  display: flex
}

.player-topbar__mobile-panel>span {
  margin: 0 6px
}

@media (max-width:1024px) {
  .player-topbar__step-pins {
    margin: 0 30px
  }

  .player-topbar__step-pins .m-step-pin[data-is-active]::after {
    display: none
  }
}

@media (max-width:768px) {
  .player__embedded-nav-buttons>button>span {
    display: none
  }
}

.lesson-sidebar {
  background-color: #fff;
  --focus-outline-color: rgba(51, 204, 51, 0.4)
}

.lesson-sidebar:hover .lesson-sidebar__wrapper,
.lesson-sidebar[data-hovered] .lesson-sidebar__wrapper,
.lesson-sidebar[data-pinned] .lesson-sidebar__wrapper {
  transform: translateX(0);
  transition: transform .2s ease 0s, box-shadow 0s ease .1s
}

.lesson-sidebar:hover:not([data-pinned]) .lesson-sidebar__wrapper,
.lesson-sidebar[data-hovered]:not([data-pinned]) .lesson-sidebar__wrapper,
.lesson-sidebar[data-pinned]:not([data-pinned]) .lesson-sidebar__wrapper {
  box-shadow: 4px 0 5px 0 rgba(0, 0, 0, .3)
}

.lesson-sidebar:hover button:not(.st-button_style_none).lesson-sidebar__expand-sidebar,
.lesson-sidebar[data-hovered] button:not(.st-button_style_none).lesson-sidebar__expand-sidebar,
.lesson-sidebar[data-pinned] button:not(.st-button_style_none).lesson-sidebar__expand-sidebar {
  transform: translateX(-40px);
  opacity: 0;
  transition: transform 0s ease-in .1s, opacity 0s ease-in .1s
}

.lesson-sidebar[data-pinned] {
  width: 240px;
  flex-shrink: 0
}

.lesson-sidebar[data-pinned] button.st-button_style_none.lesson-sidebar__pin-sidebar>.svg-icon {
  transform: rotate(0)
}

button:not(.st-button_style_none).lesson-sidebar__expand-sidebar {
  position: fixed;
  z-index: calc(var(--z-player-sidebar) - 1);
  top: var(--header-height);
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 0;
  width: 40px;
  font-size: 13px;
  color: #999;
  background-color: rgba(230, 233, 237, .3);
  border: none;
  border-radius: 0;
  letter-spacing: .6px;
  transform: translateX(0);
  opacity: 1;
  transition: transform .25s ease-in .5s, opacity .35s ease-in .5s, left .2s
}

button:not(.st-button_style_none).lesson-sidebar__expand-sidebar:focus,
button:not(.st-button_style_none).lesson-sidebar__expand-sidebar:hover {
  background-color: rgba(230, 233, 237, .6)
}

body[data-fullscreen] .lesson-wrapper[data-step-type=video] button:not(.st-button_style_none).lesson-sidebar__expand-sidebar {
  bottom: 30px;
  margin-bottom: 60px;
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, .1), transparent)
}

body[data-fullscreen] .lesson-wrapper[data-step-type=video] button:not(.st-button_style_none).lesson-sidebar__expand-sidebar:focus,
body[data-fullscreen] .lesson-wrapper[data-step-type=video] button:not(.st-button_style_none).lesson-sidebar__expand-sidebar:hover {
  background: rgba(230, 233, 237, .2)
}

body[data-fullscreen-header-overlay=hidden] .lesson-sidebar:not([data-pinned]) button:not(.st-button_style_none).lesson-sidebar__expand-sidebar {
  left: -40px
}

.lesson-sidebar__expand-sidebar-content {
  position: relative;
  top: 30%
}

.lesson-sidebar__expand-sidebar-content>.svg-icon {
  display: flex;
  width: 10px;
  height: 10px;
  margin: 0 0 8px 1px
}

.lesson-sidebar__expand-sidebar-content>.svg-icon svg {
  width: 100%;
  height: 100%
}

.lesson-sidebar__expand-sidebar-content>span:nth-child(2) {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg)
}

button.st-button_style_none.lesson-sidebar__pin-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  margin: 2px;
  padding: 5px;
  color: #d3d3d3;
  font-size: 16px
}

button.st-button_style_none.lesson-sidebar__pin-sidebar:focus,
button.st-button_style_none.lesson-sidebar__pin-sidebar:hover {
  color: #fff
}

button.st-button_style_none.lesson-sidebar__pin-sidebar .svg-icon {
  display: flex;
  width: 1em;
  height: 1em;
  transform: rotate(35deg);
  pointer-events: none
}

.lesson-sidebar__wrapper {
  position: fixed;
  z-index: var(--z-player-sidebar);
  top: 0;
  left: 0;
  bottom: 0;
  min-width: 240px;
  max-width: 240px;
  background-color: #222;
  color: #eee;
  font-size: 14px;
  transition: transform .3s ease-in .3s, box-shadow 0s linear .6s;
  transform: translateX(-240px)
}

.lesson-sidebar__wrapper .lesson-sidebar__body {
  display: flex;
  position: relative;
  height: 100%;
  padding-top: var(--header-height);
  flex-direction: column
}

.lesson-sidebar__wrapper .lesson-sidebar__body .lesson-sidebar__header {
  position: relative;
  padding: 21px 14px;
  border-top: 1px solid #5e5e5e
}

.lesson-sidebar__wrapper .lesson-sidebar__body .lesson-sidebar__course-title {
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
  --link-color: initial;
  --link-hover-color: initial;
  --link-active-color: initial;
  --link-hover-line-color: currentColor;
  --link-active-line-color: currentColor;
  --link-line-color: transparent
}

.lesson-sidebar__wrapper .lesson-sidebar__body .lesson-sidebar__course-progress {
  margin-bottom: 0
}

.lesson-sidebar__wrapper .lesson-sidebar__body .lesson-sidebar__progress-line {
  width: 100%;
  padding-top: 7px
}

.lesson-sidebar__wrapper .lesson-sidebar__body .lesson-sidebar__progress-line line,
.lesson-sidebar__wrapper .lesson-sidebar__body .lesson-sidebar__progress-line svg {
  width: 100%
}

.lesson-sidebar__wrapper .lesson-sidebar__body .lesson-sidebar__progress-line .progress-line__numbers {
  display: none
}

.lesson-sidebar__wrapper .lesson-sidebar__body .lesson-sidebar__footer {
  flex-grow: 0;
  align-self: flex-end;
  width: 240px;
  margin-top: auto;
  bottom: 0;
  left: 0
}

.lesson-sidebar__wrapper .lesson-sidebar__body .lesson-sidebar__content {
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-y: overlay;
  --focus-outline-box-shadow-params: inset 0 0 0 4px
}

.lesson-sidebar__wrapper .lesson-sidebar__toc {
  max-width: 240px
}

.lesson-sidebar__wrapper .lesson-controls {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0;
  list-style-type: none;
  background-color: #222
}

.lesson-sidebar__wrapper .lesson-controls svg {
  width: 18px;
  height: 18px
}

.lesson-sidebar__wrapper .lesson-controls .button:not(.st-button_style_none).button_style_secondary,
.lesson-sidebar__wrapper .lesson-controls button:not(.st-button_style_none).button_style_secondary {
  background-color: #222;
  color: #a5a5a5
}

.lesson-sidebar__wrapper .lesson-controls .button:not(.st-button_style_none).button_style_secondary:active,
.lesson-sidebar__wrapper .lesson-controls .button:not(.st-button_style_none).button_style_secondary:focus,
.lesson-sidebar__wrapper .lesson-controls .button:not(.st-button_style_none).button_style_secondary:hover,
.lesson-sidebar__wrapper .lesson-controls button:not(.st-button_style_none).button_style_secondary:active,
.lesson-sidebar__wrapper .lesson-controls button:not(.st-button_style_none).button_style_secondary:focus,
.lesson-sidebar__wrapper .lesson-controls button:not(.st-button_style_none).button_style_secondary:hover {
  background-color: #707689;
  color: #eaecf0
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson-name {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 190px;
  margin-right: auto
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson-name.lesson-sidebar__lesson-name_disable {
  color: #939393;
  text-decoration: none;
  pointer-events: none
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson-name.lesson-sidebar__lesson-name_skeleton {
  height: 22px;
  width: 100%;
  padding: .15em 0
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson-name-placeholder {
  height: 100%;
  border-radius: 3px;
  display: inline-block;
  vertical-align: top
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson-name-placeholder.placeholder-number {
  width: 25px;
  margin-right: .2em
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson-name-placeholder.placeholder-name {
  min-width: 50px
}

.lesson-sidebar__wrapper .lesson-sidebar__module-header {
  position: relative
}

.lesson-sidebar__wrapper .lesson-sidebar__module-header:focus,
.lesson-sidebar__wrapper .lesson-sidebar__module-header:hover {
  background: rgba(51, 51, 51, .5)
}

.lesson-sidebar__wrapper .sidebar-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  font-weight: 700
}

.lesson-sidebar__wrapper .sidebar-module-header__title {
  margin-right: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 190px
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson {
  --link-color: initial;
  --link-hover-color: initial;
  --link-active-color: initial;
  --link-line-color: currentColor;
  --link-hover-line-color: currentColor;
  --link-active-line-color: currentColor;
  --link-line: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5em 1em .5em 2em
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson:focus,
.lesson-sidebar__wrapper .lesson-sidebar__lesson:hover {
  background: #333;
  outline: 0
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson:focus span,
.lesson-sidebar__wrapper .lesson-sidebar__lesson:hover span {
  text-decoration: none
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson:focus .lesson-sidebar__lock-icon,
.lesson-sidebar__wrapper .lesson-sidebar__lesson:hover .lesson-sidebar__lock-icon {
  color: #999
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson.active {
  background: rgba(102, 204, 102, .5)
}

.lesson-sidebar__wrapper .lesson-sidebar__lesson.active:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border: 10px solid transparent;
  border-right-color: #fff;
  border-left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}

.lesson-sidebar__wrapper .lesson-sidebar__lock-icon {
  height: 18px;
  width: 18px;
  display: block;
  color: #5e5e5e
}

.lesson-sidebar__wrapper .lesson-sidebar__lock-icon svg {
  height: 18px;
  width: 18px
}

.lesson-sidebar__wrapper .line-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  width: 4px;
  background-color: rgba(102, 204, 102, .2)
}

.lesson-sidebar__wrapper .line-progress-bar-green {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4px;
  background-color: #6c6
}

.lesson-sidebar__wrapper .lesson__license-badge {
  text-align: left;
  padding-left: 0;
  height: auto
}

.lesson-sidebar__exam-label {
  background: #fff;
  border-radius: 5px;
  color: #222;
  font-weight: 400;
  padding: 0 5px;
  margin-right: 5px
}

.lesson-tooltip {
  min-width: 204px;
  color: #a8a8a8
}

.lesson-tooltip .lesson-tooltip__header {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .25px;
  color: #fff;
  text-transform: none
}

.lesson-tooltip .lesson-tooltip__details,
.lesson-tooltip .lesson-tooltip__header:last-child {
  margin-bottom: 0
}

.lesson-tooltip .lesson-tooltip__details span {
  color: #fff
}

.lesson-tooltip .lesson-tooltip__locked-lesson {
  margin-bottom: 0;
  display: inline-flex;
  align-items: center
}

.lesson-tooltip .lesson-tooltip__locked-lesson .lesson-sidebar__lock-icon {
  height: 18px
}

.lesson-tooltip .lesson-tooltip__locked-lesson svg {
  width: 16px;
  height: 16px
}

.lesson-tooltip .lesson-tooltip__deadline-title {
  margin-bottom: 0;
  font-weight: 700;
  color: #fff
}

.lesson-sidebar__loader {
  --stepik-loader-size: 56px
}

.player__step-pin {
  margin-right: 3px
}

.m-step-pin {
  position: relative;
  flex-shrink: 0;
  border-radius: 3px;
  background: #5e5e5e;
  --step-pin-icon-size: 100%;
  --step-pin-icon-icon-size: 18px;
  --step-pin-icon-subicon-size: 11.4px;
  --step-pin-icon-color: rgba(0, 0, 0, 0.5);
  --step-pin-icon-subicon-color: #fff
}

.m-step-pin[data-is-random-exam][data-is-active] {
  --step-pin-icon-color: #e6e9ed;
  background: rgba(94, 94, 94, .5)
}

.m-step-pin[data-is-passed],
.m-step-pin[data-is-random-exam][data-is-passed] {
  background: #6c6
}

.m-step-pin[data-is-exam][data-is-attempted] {
  background-color: #9fa8e2
}

.m-step-pin[data-is-active] {
  box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #fff;
  box-sizing: content-box
}

.m-step-pin[data-is-active]::after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent transparent #fff;
  border-style: solid;
  padding: 0;
  margin-left: 3px;
  display: block;
  bottom: -12px;
  border-width: 10px;
  pointer-events: none
}

.m-step-pin[data-is-active] .m-step-pin__pin {
  border-radius: 1px
}

.m-step-pin__link {
  display: flex;
  text-decoration: none !important;
  align-items: center;
  border-radius: inherit;
  --focus-outline-color: #64c8ff;
  --focus-outline-box-shadow-params: 0 0 0 2px
}

.m-step-pin__pin {
  border-radius: 3px;
  width: 26px;
  height: 26px;
  display: block;
  font-weight: 700;
  text-align: center
}

.m-step-pin__random-exam {
  font-size: 13px;
  color: #e6e9ed;
  display: none
}

.m-step-pin__random-exam[data-is-finished] {
  color: #6c6
}

.m-step-pin__random-exam span {
  padding-right: 6px;
  padding-left: 2px;
  display: inline-block;
  white-space: nowrap
}

[data-is-active] .m-step-pin__random-exam {
  display: block
}

[data-is-passed] .m-step-pin__random-exam {
  color: rgba(0, 0, 0, .7)
}

.m-step-pin__icon {
  display: flex;
  justify-content: center;
  align-items: center
}

.m-step-pin__icon[data-step-disabled] {
  --step-pin-icon-color: rgba(255, 255, 255, 0.38)
}

.lesson-plain {
  width: 60em;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  margin: 0 auto
}

.lesson-plain .lesson-plain__content-print {
  opacity: 0
}

.lesson-plain .lesson-plain__close {
  text-align: center;
  margin: 2em
}

.lesson-plain .lesson-plain__step-title {
  border-bottom: #ccc 1px solid;
  margin-top: 1em
}

@media print {
  .lesson-plain {
    border: 0
  }

  .lesson-plain .lesson-plain__content-print {
    opacity: 1
  }
}

.lesson-end-modal a:not(.button) {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.lesson-end-modal__title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .15px
}

.lesson-end-modal__title+.lesson-end-modal__body {
  margin-top: 24px
}

.lesson-end-modal__body p[data-skeleton] {
  height: 1.2em
}

.lesson-end-modal__cert-note {
  background-color: #E9EBFA;
  border-radius: 4px;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .25px;
  margin-bottom: 24px
}

.lesson-end-modal__footer {
  white-space: normal;
  display: flex;
  justify-content: flex-start
}

.lesson-end-modal__footer .button,
.lesson-end-modal__footer button {
  white-space: nowrap
}

@media (max-width:576px) {
  .lesson-end-modal__footer {
    flex-direction: column
  }

  .lesson-end-modal__footer .button+.button,
  .lesson-end-modal__footer .button+a,
  .lesson-end-modal__footer .button+button,
  .lesson-end-modal__footer button+.button,
  .lesson-end-modal__footer button+a,
  .lesson-end-modal__footer button+button {
    margin-top: 10px;
    margin-left: 0
  }
}

.lesson-end__buy-and-wishlist-wrapper {
  display: inline-flex
}

button:not(.st-button_style_none).lesson-end__buy-course-btn {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.button.lesson-end__gift-btn,
button:not(.st-button_style_none).lesson-end__wishlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 14px
}

.button.lesson-end__gift-btn .svg-icon,
button:not(.st-button_style_none).lesson-end__wishlist-btn .svg-icon {
  display: flex
}

.lesson-end-modal__share-buttons {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px
}

.lesson-end-modal__share-buttons .share-buttons__buttons {
  margin-right: 16px;
  margin-top: 10px
}

.lesson-end-modal__share-link {
  margin-top: 10px
}

.lesson-edit-widget {
  display: grid;
  grid-template-areas: "img title about" "img settings about" ". settings about";
  grid-template-columns: -webkit-min-content minmax(auto, 720px) 1fr;
  grid-template-columns: min-content minmax(auto, 720px) 1fr;
  grid-template-rows: -webkit-min-content -webkit-min-content 1fr;
  grid-template-rows: min-content min-content 1fr
}

.lesson-edit-widget__cover {
  grid-area: img;
  position: relative;
  height: 64px;
  width: 64px;
  margin-right: 16px
}

.lesson-edit-widget__cover>a {
  display: block
}

.lesson-edit-widget__cover:hover .lesson-edit-widget__cover-upload-buttons {
  display: flex;
  width: 100%;
  padding-right: 5px;
  float: right;
  background-color: rgba(102, 204, 102, .9);
  bottom: 0;
  right: 0
}

.lesson-edit-widget__title {
  grid-area: title;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px
}

.lesson-edit-widget__about {
  grid-area: about;
  margin: 6px 0 0 16px;
  text-align: right
}

.lesson-edit-widget__settings {
  grid-area: settings
}

.lesson-edit-widget__cover-image {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.lesson-edit-widget__cover-upload-buttons button {
  color: #f3f4f6
}

.lesson-edit-widget__cover-upload-buttons button:hover {
  color: #222
}

.lesson-edit-widget__upload-cover-icon {
  font-size: 18px
}

.lesson-edit-widget__cover-upload-buttons {
  position: absolute;
  display: none
}

.lesson-edit-widget__help {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px;
  white-space: nowrap;
  --link-line-color: transparent
}

.lesson-edit-widget__title-input[type=text] {
  padding-right: 180px !important;
  width: 100%
}

.lesson-edit-widget__symbols-left {
  position: absolute;
  right: 12px;
  top: 9px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px;
  color: var(--theme-color-fg-tertiary);
  -webkit-font-smoothing: antialiased
}

.lesson-edit-widget__settings-toggler {
  --btn-details-arrow-size: 8px;
  --btn-details-arrow-offset: 8px;
  --btn-details-valign: baseline
}

.lesson-edit-widget__settings-toggler.btn-details:not(.st-button_style_none) {
  font-size: 14px;
  font-weight: 400;
  line-height: 8px;
  letter-spacing: .25px
}

.lesson-edit-step-pin::before,
.quiz-editor__desc,
.quiz-editor__more-about {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.lesson-edit-widget__settings-content {
  padding: 8px 0 0;
  margin-top: 6px
}

.lesson-edit-widget__settings-content p {
  margin: 8px 0 0
}

.lesson-edit-widget__settings-content .form-checkbox {
  padding: 0 8px 8px
}

.lesson-edit-widget__settings-content .input-wrapper>label {
  margin-bottom: 0
}

.lesson-edit-step-pin {
  --step-pin-icon-size: 32px;
  --step-pin-icon-icon-size: 22px;
  --step-pin-icon-subicon-size: 11px;
  --step-pin-icon-color: #fff;
  --step-pin-icon-subicon-color: var(--theme-color-base-accent2-2);
  vertical-align: bottom;
  display: inline-flex;
  margin-right: 5px;
  width: 57px;
  height: 57px;
  border-radius: 4px;
  background: #d8d8d8;
  transition: background .1s;
  position: relative
}

.lesson-edit-step-pin::before {
  content: attr(data-step-position);
  position: absolute;
  left: 0;
  top: -22px;
  width: 100%;
  text-align: center;
  color: #999;
  font-weight: 400;
  -webkit-font-smoothing: antialiased
}

.lesson-edit-step-pin:focus,
.lesson-edit-step-pin:hover {
  color: #fff;
  background: #ccc
}

.lesson-edit-step-pin.deleted,
.lesson-edit-step-pin.fail {
  background: var(--theme-color-base-danger-1)
}

.lesson-edit-step-pin.passed {
  background: linear-gradient(to bottom, #d8d8d8 53px, #6c6 0)
}

.lesson-edit-step-pin.passed:focus:not(.is_active),
.lesson-edit-step-pin.passed:hover {
  background: linear-gradient(to bottom, #ccc 53px, #6c6 0)
}

.lesson-edit-step-pin.is_active {
  background: #6c6
}

.lesson-edit-step-pin.is_active:focus,
.lesson-edit-step-pin.is_active:hover {
  background: #4daf4d
}

.lesson-edit-step-pin[data-paid-badge]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 9px solid transparent;
  border-left-color: var(--theme-color-base-accent2-2);
  border-top-color: var(--theme-color-base-accent2-2);
  border-top-left-radius: inherit;
  pointer-events: none
}

.lesson-edit-step-pin[data-is-deprecated],
.lesson-edit-step-pin[data-is-invalid][data-errors-shown] {
  background: var(--theme-color-base-danger-1);
  --icon-line-color: var(--theme-color-base-danger-1)
}

.lesson-edit-step-pin[data-is-deprecated].is_active,
.lesson-edit-step-pin[data-is-invalid][data-errors-shown].is_active {
  background: var(--theme-color-base-danger-2);
  --icon-line-color: var(--theme-color-base-danger-2)
}

.lesson-edit-step-pin[data-is-deprecated]:focus .step-pin-icon__icon,
.lesson-edit-step-pin[data-is-deprecated]:hover .step-pin-icon__icon,
.lesson-edit-step-pin[data-is-invalid][data-errors-shown]:focus .step-pin-icon__icon,
.lesson-edit-step-pin[data-is-invalid][data-errors-shown]:hover .step-pin-icon__icon {
  opacity: 1
}

.lesson-edit-step-pin[data-is-deprecated] .step-pin-icon__subicon,
.lesson-edit-step-pin[data-is-invalid][data-errors-shown] .step-pin-icon__subicon {
  display: none
}

.lesson-edit-step-pin__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: inherit
}

.web-console {
  padding-bottom: .5em
}

.web-console .web-console__pane {
  max-height: 400px;
  padding: 3px;
  background-color: #FFF;
  border: 1px solid #000;
  overflow: auto
}

.web-console .web-console__status {
  text-align: right;
  margin-left: 14px
}

.quiz-editor__more-about {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction: row;
  margin-top: 24px;
  padding: 10px 0;
  border-radius: 4px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased
}

.quiz-editor__more-about .svg-icon {
  display: inline-flex;
  padding: 4px 2px;
  color: var(--theme-color-fg-tertiary)
}

.quiz-editor__desc,
.step-editor__desc {
  color: var(--theme-color-fg-secondary)
}

.quiz-editor__more-about .svg-icon svg {
  height: 18px;
  width: 18px
}

.quiz-editor__more-about .svg-icon+span {
  margin-left: 8px
}

.quiz-editor__tabs {
  margin-bottom: 8px
}

.quiz-editor__tabs-content {
  margin-bottom: 16px
}

.quiz-editor__desc {
  font-weight: 400;
  margin-bottom: 8px
}

.quiz-editor__btn:not(.st-button_style_none) {
  padding: 9px 16px;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .3px;
  -webkit-font-smoothing: antialiased
}

.quiz-editor__select-tooltip {
  font-size: 14px !important
}

.quiz-editor__actions {
  margin-bottom: 24px
}

.step-editor-advanced-settings__content p {
  margin-bottom: 16px
}

.step-editor-advanced-settings__content p+.form-group {
  margin-top: -16px
}

.step-editor-advanced-settings__content .input-wrapper>label {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px;
  margin: 0
}

.step-editor-advanced-settings__textarea {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px;
  padding: 8px 12px
}

.step-history {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 992px
}

.step-history__diff-modal {
  --modal-popup-width: 90vw;
  --modal-popup-max-width: 920px;
  --modal-popup-min-width: 300px
}

.step-history__diff-modal .modal-popup__container {
  padding: 16px 22px 20px
}

.step-history__diff-modal .modal-popup__content {
  display: grid;
  grid-template-columns: 230px 1fr;
  grid-template-rows: 48vh auto;
  grid-gap: 24px 12px;
  margin-top: 18px
}

@media (max-width:768px) {
  .step-history__diff-modal .modal-popup__content {
    display: flex;
    flex-direction: column
  }

  .step-history__diff-snapshot-list {
    max-height: 108px
  }
}

.step-history__diff-snapshot-list {
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: none;
  --menu-border: none;
  --menu-border-radius: 0;
  --menu-item-ctrl-border-radius: 4px
}

.step-history__diff-snapshot-item-caption-row {
  display: flex;
  flex-wrap: wrap
}

.step-history__diff-snapshot-item-caption-row+.step-history__diff-snapshot-item-caption-row {
  margin-top: 2px
}

.step-history__diff-snapshot-date {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px;
  color: #222
}

.step-history__diff-snapshot-size,
.step-history__diff-snapshot-user-name {
  font-size: 12px;
  line-height: 1.17;
  letter-spacing: .2px;
  color: #999
}

.step-history__diff-snapshot-date,
.step-history__diff-snapshot-size,
.step-history__diff-snapshot-user-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.step-history__diff-snapshot-user-name {
  margin-right: 8px
}

.step-history__diff-snapshot-size-delta {
  margin-left: 1px
}

.step-history__diff-snapshot-size-delta[data-value^="-"] {
  color: #d41f1f
}

.step-history__diff-snapshot-size-delta:not([data-value="0"]):not([data-value^="-"]) {
  color: #288b28
}

.step-history__diff-content {
  flex: 1;
  overflow: auto
}

.step-history__diff-footer {
  grid-row: 2;
  grid-column: 2
}

.step-history__diff-footer>button {
  padding: 9px 24px;
  margin-right: 12px
}

.step-history__diff-stat-added {
  color: #54ad54
}

.step-history__diff-stat-removed {
  color: #d41f1f
}

.step-history__diff-block {
  padding: 13px 15px;
  background: #f9f9f9;
  border: 1px solid #efefef;
  border-radius: 4px
}

.step-history__diff-block+.step-history__diff-block {
  margin-top: 24px
}

.step-history__diff-block[data-folded] .step-history__diff-viewer {
  visibility: collapse;
  max-height: 0;
  overflow: hidden
}

.step-history__diff-block[data-folded] .step-history__diff-block-header {
  margin-bottom: 0
}

.step-history__diff-block-header {
  display: flex;
  margin: 0 0 12px
}

.step-history__diff-block-title {
  flex: 1;
  margin: 0
}

.step-history__diff-block-title,
.step-history__diff-block-title>button.st-button_style_none {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: .4px;
  color: #5e5e5e;
  text-transform: uppercase
}

.step-history__diff-block-title>button.st-button_style_none {
  display: flex;
  align-items: center;
  width: 100%;
  margin: -13px -16px;
  padding: 13px 16px;
  cursor: pointer
}

.step-history__diff-block-title>button.st-button_style_none:hover {
  color: #222
}

.step-history__diff-block-title>button.st-button_style_none>.svg-icon {
  display: inline-flex;
  margin-left: 4px;
  font-size: 8px
}

.step-history__diff-block-stat {
  margin: 0 0 -4px 20px
}

.step-history__diff-block-stat.select-box[data-theme=modern] {
  --menu-min-width: 0
}

.step-history__diff-block-stat.select-box[data-theme=modern] .select-box__autowidth-measurer,
.step-history__diff-block-stat.select-box[data-theme=modern] button.select-box__toggle-btn {
  padding: 2px 14px 2px 6px;
  font-weight: 400;
  font-size: 12px;
  color: #999;
  border: none;
  border-radius: 2px;
  background-color: transparent;
  background-position-x: 100%;
  background-size: 14px
}

.step-history__diff-block-stat.select-box[data-theme=modern] .select-box__autowidth-measurer:focus,
.step-history__diff-block-stat.select-box[data-theme=modern] .select-box__autowidth-measurer:hover,
.step-history__diff-block-stat.select-box[data-theme=modern] .select-box__autowidth-measurer[data-active],
.step-history__diff-block-stat.select-box[data-theme=modern] button.select-box__toggle-btn:focus,
.step-history__diff-block-stat.select-box[data-theme=modern] button.select-box__toggle-btn:hover,
.step-history__diff-block-stat.select-box[data-theme=modern] button.select-box__toggle-btn[data-active] {
  background-color: #fff;
  color: #5e5e5e
}

.step-history__diff-stat-method::before {
  content: "•";
  margin: 0 2px;
  opacity: .5
}

.step-history__diff-stat-method-caption {
  color: #999;
  line-height: normal
}

.step-history__show {
  align-self: flex-end
}

.step-settings .step-settings__block {
  padding-left: 5px
}

.step-settings .step-settings__settings {
  padding-left: 15px;
  padding-top: 10px
}

.create-list {
  padding: 1.875em
}

.create-list .plugins__more {
  margin: 0 auto;
  font-size: 24px;
  border-bottom: 1px dashed #000;
  display: block
}

.create-list .plugins-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between
}

.create-list .plugins-list__header {
  text-align: center;
  margin: 0 0 .1em
}

.create-list .plugins-list__item {
  flex-basis: 49%;
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: .75em;
  align-items: center;
  transition: background-color .3s;
  cursor: pointer
}

.create-list .plugins-list__item:hover {
  background-color: #eee
}

.create-list .plugins-list__item:last-child,
.create-list .plugins-list__item:nth-child(odd):nth-last-child(2) {
  border-bottom: none
}

.create-list .plugins-list__item svg {
  width: 42px;
  height: 42px
}

.create-list .plugin-list__item-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2
}

.create-list .plugin-list__item-descr {
  margin-top: 4px;
  font-size: 14px;
  line-height: 15px;
  color: #a5a5a5;
  vertical-align: middle
}

.course-info-editor {
  margin: 0;
  padding: 0;
  border: none
}

.course-info-editor__section {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  --rich-text-editor-border-radius: 4px
}

.course-info-editor__section+.course-info-editor__section {
  margin-top: 32px
}

.course-info-editor__section b,
.course-info-editor__section strong {
  font-weight: 500;
  letter-spacing: .15px
}

.course-info-editor__section input[type=text],
.course-info-editor__section textarea {
  margin: 0;
  padding: 7px 11px;
  height: auto;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  transition: none
}

.course-info-editor__section textarea {
  padding: 11px 15px
}

.course-info-editor__section .select-box .select-box__autowidth-measurer,
.course-info-editor__section .select-box button.select-box__toggle-btn {
  line-height: 20px
}

.course-info-editor__section-heading {
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .15px
}

.course-info-editor__section-heading label {
  all: unset
}

@supports (-ms-ime-align:auto) {
  .course-info-editor__section-heading label {
    display: inline;
    font-weight: 500
  }

  .course-info-editor__section_hor-list {
    margin-bottom: -8px
  }

  .course-info-editor__section_hor-list>* {
    margin-right: 32px;
    margin-bottom: 8px
  }
}

.course-info-editor__section_hor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px
}

.course-info-editor__section-note {
  margin: 8px 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  color: #777
}

.course-info-editor__input-note {
  margin-top: 4px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px;
  color: #777
}

.course-info-editor__input-note>[data-counter] {
  margin-left: 16px;
  float: right
}

.course-info-editor__input-note>[data-counter][data-counter=warn] {
  color: #e88600
}

.course-info-editor__input-note>[data-counter][data-counter=err] {
  color: #d41f1f
}

input[type=text].course-info-editor__certificate-input {
  width: 320px
}

.course-info-editor__user-items {
  list-style: none;
  margin: 0
}

.course-info-editor__user-item {
  display: flex;
  align-items: center
}

.course-info-editor__user-item+.course-info-editor__user-item {
  margin-top: 8px
}

.course-info-editor__user-widget .user-avatar__link {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

button.st-button_style_none.course-info-editor__user-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: 12px;
  font-size: 11px;
  color: #ccc
}

button.st-button_style_none.course-info-editor__user-remove:focus,
button.st-button_style_none.course-info-editor__user-remove:hover {
  color: #d41f1f
}

button.st-button_style_none.course-info-editor__user-remove .svg-icon {
  display: flex
}

.course-info-editor__user-add {
  display: flex;
  align-items: center;
  margin-top: 16px
}

input[type=text].course-info-editor__user-add-input {
  width: 160px;
  margin-right: 8px
}

button:not(.st-button_style_none).course-info-editor__user-add-btn {
  padding: 9px 24px;
  border-radius: 4px
}

.course-info-editor__upload-widget {
  width: 162px;
  height: 162px;
  position: relative
}

.course-info-editor__upload-widget-inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  border-radius: 4px
}

@supports (-ms-ime-align:auto) {
  .course-info-editor__upload-widget-inner .course-info-editor__upload-widget-content {
    z-index: 0
  }

  .course-info-editor__upload-widget-inner .course-info-editor__upload-widget-upload {
    z-index: 1
  }
}

.course-info-editor__upload-widget-content[data-state=uploading] {
  background: #e9f9e9;
  color: #246024;
  border: 1px solid #288b28
}

.course-info-editor__upload-widget-content[data-state=empty] {
  background-color: #fcfcfc;
  color: #535366;
  border: 1px dashed #535366
}

.course-info-editor__upload-widget-content[data-state=error],
.course-info-editor__upload-widget-content[data-state=processing] {
  background-color: #fcfcfc;
  color: #535366;
  border: 1px solid #eaeaea
}

.course-info-editor__upload-widget-upload {
  opacity: 0;
  pointer-events: none
}

.course-info-editor__upload-widget:hover .course-info-editor__upload-widget-upload,
html[data-whatintent=keyboard] .course-info-editor__upload-widget-upload:focus-within {
  opacity: 1;
  pointer-events: auto
}

.course-info-editor__upload-widget-upload[data-state=content] {
  background-color: rgba(34, 34, 34, .8);
  color: #fff;
  transition: opacity .1s
}

.course-info-editor__upload-widget-upload[data-state=content] button.st-button_style_none.course-info-editor__upload-widget-remove {
  --data-tooltip-offset: 8px;
  color: #fff
}

.course-info-editor__upload-widget-upload[data-state=content] button.st-button_style_none.course-info-editor__upload-widget-remove:hover {
  color: #ffebe8
}

.course-info-editor__upload-widget-upload:not([data-state=content]) {
  background: #e9f9e9;
  color: #246024;
  border: 1px solid #288b28
}

.course-info-editor__upload-widget-upload[hidden] {
  display: none !important
}

button.st-button_style_none.course-info-editor__upload-widget-upload-btn {
  width: 100%;
  color: inherit
}

button.st-button_style_none.course-info-editor__upload-widget-remove {
  --data-tooltip-offset: 1px;
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 8px;
  color: #5e5e5e;
  font-size: 12px
}

button.st-button_style_none.course-info-editor__upload-widget-remove:hover {
  color: #d41f1f
}

button.st-button_style_none.course-info-editor__upload-widget-remove .svg-icon {
  display: flex
}

.course-info-editor__upload-widget-icon {
  display: inline-flex;
  margin-bottom: 16px;
  width: 42px;
  height: 42px
}

.course-info-editor__upload-widget-icon.img-placeholder_icon {
  width: 56px
}

.course-info-editor__upload-widget-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .15px
}

.course-info-editor__upload-widget-text {
  margin-top: 8px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px
}

.course-info-editor__upload-widget-filename {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  align-self: stretch;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.course-info-editor__upload-widget-progress {
  margin: 8px 0;
  width: 100%
}

.course-info-editor__upload-widget-progress-text {
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px
}

.course-info-editor__cover-widget-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: inherit
}

.course-info-editor__intro-video-widget {
  width: 288px
}

.course-info-editor__intro-video-widget-video-player-dummy {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit
}

.course-info-editor__intro-video-widget-video-player-dummy .video-player__start-sign {
  top: auto;
  bottom: 16px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .15px
}

.course-info-editor__intro-video-widget-video-player-dummy button.video-player-dummy__btn:not(.st-button_style_none) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 56px
}

.course-info-editor__intro-video-widget-video-player-dummy .video-player-dummy__btn-icon {
  display: flex
}

.course-info-editor__intro-video-widget-video-player-dummy .video-player-dummy__btn-icon::before {
  font-size: 36px
}

.course-info-editor__intro-video-widget-video-player-dummy .video-player-dummy__btn,
.course-info-editor__intro-video-widget-video-player-dummy .video-player__start-sign {
  z-index: 1
}

.course-info-editor__upload-widget-add-modal {
  --modal-popup-max-width: 576px
}

.course-info-editor__upload-widget-add-modal .modal-popup__content {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.course-info-editor__upload-widget-add-modal .modal-popup__content p {
  margin: 16px 0 8px;
  line-height: inherit
}

.course-info-editor__upload-widget-add-modal .modal-popup__content .radio-button-group {
  margin: 16px 0;
  font-size: 16px
}

.course-info-editor__upload-widget-add-modal .modal-popup__content pre {
  margin: 8px 0 24px
}

.course-info-editor__upload-widget-add-modal .modal-popup__content pre>code {
  padding: 16px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: .1px !important;
  color: #222 !important
}

.course-info-editor__upload-widget-play-modal {
  --modal-popup-width: 130vh;
  --modal-popup-min-width: 360px
}

.course-info-editor__upload-widget-play-modal .modal-popup__overlay {
  padding-top: 0;
  align-items: center
}

.course-info-editor__upload-widget-play-modal .modal-popup__container {
  background-color: #282b41
}

.certificate-editor-stub__help a::after,
.lti-editor__help a::after {
  height: var(--external-link-icon-size, .5em);
  vertical-align: var(--external-link-valign, middle);
  background-color: var(--external-link-icon-color, #1466C6)
}

.lti-editor__help a {
  white-space: nowrap
}

.lti-editor__help a::after {
  content: "";
  display: inline-block;
  margin: 0 0 0 var(--external-link-icon-offset, 3px);
  position: relative;
  top: -.125em;
  width: var(--external-link-icon-size, .5em);
  -webkit-mask-image: url(/static/frontend/common_icons/external.svg);
  mask-image: url(/static/frontend/common_icons/external.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100%;
  mask-size: 100%
}

.lti-editor__fieldset {
  margin: 20px 0 26px;
  padding: 0;
  border: none
}

.lti-editor__fieldset .the-form-field {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 18px 0 0
}

.lti-editor__fieldset .the-form-field>.the-form-field__messages {
  grid-column: 1
}

.lti-editor__fieldset .the-form-field>.the-form-field__caption {
  grid-column: 1;
  grid-row: 1/span 100;
  margin: 7px 12px 0 0;
  width: var(--form-caption-width, 80px);
  overflow-wrap: break-word;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.lti-editor__fieldset .the-form-field>.the-form-field__caption~* {
  grid-column: 2;
  justify-self: flex-start
}

.lti-editor__fieldset .the-form-field input.st-input {
  width: var(--form-input-width, 320px);
  height: 32px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px
}

.lti-editor__fieldset .the-form-field input.st-input[disabled] {
  border-color: rgba(204, 204, 204, .38);
  background: #fff;
  color: #999
}

.lti-editor__fieldset .the-form-field>.form-checkbox {
  padding: 5px 0
}

.lti-editor__fieldset .the-form-field>textarea.st-input {
  margin: 0;
  width: 100%;
  max-width: 370px;
  resize: vertical
}

.lti-editor__fieldset .the-form__field+.the-form__field {
  margin-top: 16px
}

.lti-editor__save-btn:not(.st-button_style_none) {
  padding: 9px 24px;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .3px;
  white-space: nowrap
}

.syllabus-editor {
  padding: 0 0 200px
}

.syllabus-editor__section-list {
  margin: 0 0 40px
}

.syllabus-editor__section-list .remark {
  padding: 0
}

.syllabus-editor__empty {
  display: flex;
  flex-direction: column;
  align-items: center
}

.syllabus-editor__create .svg-icon {
  right: 5px
}

.adaptiveness-edit {
  padding-bottom: 4em
}

.adaptiveness-edit .adaptiveness-edit__adaptive {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
  margin-bottom: 1em;
  width: 100%
}

.adaptiveness-edit .adaptiveness-edit__adaptive-option {
  width: 45%
}

.adaptiveness-edit .adaptiveness-edit__adaptive-option-wrapper {
  border-radius: 5px;
  border: 1px solid #3c3;
  padding: .5em 1em .3em
}

.section-editor:not(:first-child) {
  margin-top: 40px
}

.section-editor__deleted {
  display: flex;
  justify-content: space-between;
  padding: 22px 22px 22px 40px;
  border: 1px solid #d8d8d8;
  border-left-width: 5px;
  color: #999
}

.section-editor__head {
  display: flex;
  padding: 22px 22px 22px 47px;
  position: relative;
  border: 1px solid #d8d8d8;
  border-left-width: 5px
}

.section-editor__head-content {
  flex: 1
}

.section-editor__headline {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 14px
}

.section-editor__points {
  white-space: nowrap
}

.section-editor__delete,
.section-editor__points {
  margin-left: 24px !important
}

.section-editor__position {
  margin: 0 16px 0 0;
  line-height: 36px;
  font-size: 20px;
  color: #5e5e5e
}

.section-editor__title {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative
}

.section-editor__title-editor {
  display: flex;
  flex-grow: 1;
  align-items: center
}

.section-editor__title-field {
  flex-grow: 1
}

.section-editor__title-field input {
  margin: 0;
  height: 36px;
  padding: 6px 14px;
  font-size: 20px;
  letter-spacing: .15px;
  line-height: 1.1
}

.section-editor__description {
  margin: 12px 0
}

.section-editor__description textarea {
  margin: 0;
  min-height: 36px;
  max-height: 160px;
  padding: 7px 16px;
  font-size: 14px;
  letter-spacing: .25px;
  line-height: 1.43;
  resize: none
}

.section-editor__reorder-btns {
  right: -30px
}

.section-editor__reorder {
  cursor: pointer;
  color: #ccc;
  padding: 6px
}

.section-editor__reorder:hover,
.section-editor__reorder:target {
  color: #999;
  background: #f3f4f6
}

.section-editor__reorder .svg-icon {
  width: 9px;
  height: 16px;
  display: inline-block
}

.section-editor__reorder .svg-icon svg {
  width: 9px;
  height: 16px
}

.section-editor__reorder.section-editor__reorder_direction_reverse .svg-icon {
  transform: scaleY(-1)
}

.section-editor__head-actions {
  width: 200px;
  display: flex;
  justify-content: flex-end
}

.section-settings__required-score .spinner-small_icon svg,
button:not(.st-button_style_none).attachment-detail__delete>.svg-icon>svg {
  width: 1em;
  height: 1em
}

.section-editor__menu-toggler {
  color: #999;
  transition: all .3s;
  display: inline-flex
}

.section-editor__menu-toggler.st-button_style_none {
  padding: 4px;
  margin-right: -4px
}

.section-editor__menu-toggler:hover {
  color: #5e5e5e
}

.section-editor__menu-toggler .svg-icon {
  position: relative;
  overflow: hidden;
  font-size: 16px
}

.section-editor__menu-toggler .svg-icon svg {
  position: relative;
  left: 6px
}

.section-editor__unit-list {
  margin-left: 28px;
  padding: 15px 0;
  border: 1px solid #d8d8d8;
  border-top: 0
}

.section-editor__actions {
  margin: 17px 0 17px 50px
}

.section-editor__unit-draggable {
  overflow: visible !important
}

.section-editor__unit-draggable.animated .unit-editor_only_hover {
  opacity: 0
}

.section-editor__unit-ghost.unit-editor {
  z-index: 1;
  box-shadow: 0 0 15px grey;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
  transition: transform 0s, box-shadow .3s
}

.section-editor__unit-ghost.unit-editor .unit-editor__reorder-btns {
  display: none
}

button.section-editor__add-existed:not(.st-button_style_none) {
  margin-bottom: 10px
}

button.section-editor__add-existed .svg-icon {
  right: 5px
}

.section-editor__add-existed+.section-editor__add-existed {
  margin-left: .5em !important
}

.section-editor__add-existed .plus_icon {
  right: 5px
}

.deadlines-editor {
  margin-top: 16px
}

.deadlines-editor.deadlines-editor_for_course {
  margin-top: 40px;
  padding: 24px 32px;
  background-color: #f3f4f6;
  border: 1px solid #d3d3d3
}

.deadlines-editor.deadlines-editor_for_course h2 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .15px
}

.deadlines-editor__advanced-settings {
  margin-top: 14px
}

.deadlines-editor__advanced-settings-disabled-note {
  margin-left: 12px;
  flex-basis: 100%;
  color: #999;
  font-size: 14px
}

.deadlines-editor__advanced-settings-disabled-note a {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

button.st-button_style_link.deadlines-editor__advanced-toggle {
  padding: 0 6px;
  margin: 16px 0 0 -6px;
  line-height: 24px;
  font-size: 14px;
  letter-spacing: .25px
}

button.st-button_style_link.deadlines-editor__advanced-toggle>.feature-tariff-badge {
  margin: 0 6px 0 0
}

button.st-button_style_link.deadlines-editor__advanced-toggle>.svg-icon {
  margin-left: 3px;
  font-size: 12px;
  color: #999
}

button.st-button_style_link.deadlines-editor__advanced-toggle>.svg-icon svg {
  width: 1em;
  height: 1em
}

.deadlines-editor__date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: -4px -12px
}

.deadlines-editor__date {
  margin: 4px 12px
}

.deadlines-editor__label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.17;
  letter-spacing: .4px;
  color: #5e5e5e
}

.deadlines-editor__label .svg-icon {
  color: #999;
  font-size: 14px
}

.deadlines-editor__label-hint {
  margin-left: 3px
}

input.deadlines-editor__date-picker-input {
  padding: 7px 16px;
  height: auto;
  width: 200px;
  font-size: 14px;
  line-height: 1.43
}

.certificate-editor h3,
.certificate-info__title {
  line-height: 23px;
  letter-spacing: .15px;
  font-weight: 500
}

.deadlines-editor__course-deadline-policy {
  flex-basis: 100%;
  margin-top: 14px
}

.deadlines-editor__course-deadline-policy-select {
  min-width: 200px
}

.certificate-editor h3 {
  font-size: 18px
}

.certificate-info__title {
  font-size: 20px
}

.certificate-editor .certificate-editor__images {
  width: 30%
}

.certificate-editor .certificate-editor__images label {
  margin-bottom: 16px
}

.certificate-editor .certificate-editor__preview {
  width: 65%
}

.certificate-editor .certificate-editor__preview-certificate {
  height: 435px;
  position: relative
}

.certificate-editor .certificate-editor__scroll-fix {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0
}

.certificate-editor .certificate-editor__preview-sign-image {
  width: 900px;
  height: 150px
}

.certificate-editor .certificate-editor__preview-org-image {
  height: 150px
}

.certificate-editor .certificate-editor__links {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px
}

.certificate-editor .certificate-editor__footer-text-wrapper,
.certificate-editor .certificate-editor__org-text-wrapper {
  border: 2px dotted #ccc;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  left: 146px
}

.certificate-editor .certificate-editor__org-text-wrapper {
  top: 20px;
  width: 200px
}

.certificate-editor-stub__help a::after,
.course-publication-tree .fir-tree>li section a.external::after {
  content: "";
  width: var(--external-link-icon-size, .5em);
  -webkit-mask-image: url(/static/frontend/common_icons/external.svg);
  mask-image: url(/static/frontend/common_icons/external.svg);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center
}

.certificate-editor .certificate-editor__footer-text-wrapper {
  bottom: 45px
}

.certificate-editor__wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 16px
}

.certificate-info__title-en {
  max-width: 640px
}

.certificate-info__title-en input[type=text] {
  margin-bottom: 0
}

.certificate-editor-stub p {
  margin-bottom: 16px
}

.certificate-editor-stub__help a {
  white-space: nowrap
}

.certificate-editor-stub__help a::after {
  display: inline-block;
  margin: 0 0 0 var(--external-link-icon-offset, 3px);
  position: relative;
  top: -.125em
}

.certificate-editor-stub__toast {
  margin-bottom: 24px
}

.certificate-editor-stub__btn.button:not(.st-button_style_none) {
  margin-bottom: 32px;
  padding: 9px 24px
}

.certificate-editor-stub__readiness {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: .3px
}

p+.certificate-editor-stub__readiness {
  margin-top: -8px
}

.certificate-editor-stub__readiness li {
  padding-top: 2px;
  padding-bottom: 2px
}

.certificate-editor-stub__readiness li+li {
  margin-top: 3px
}

.material-editor {
  height: 100%;
  width: 100%
}

.material-editor>.error {
  margin: 16px
}

.unit-editor {
  border-bottom: 1px solid #d8d8d8;
  padding: 17px 0 30px;
  margin: 0 24px;
  display: flex;
  align-items: center;
  color: #999;
  background: #fff;
  will-change: box-shadow, transform;
  transition: transform .2s, box-shadow .3s;
  position: relative
}

.unit-editor .unit-editor_only_hover {
  opacity: 1;
  transition: opacity .3s
}

.invitation-item,
.member-item {
  transition: background-color .2s
}

.unit-editor:not(:hover) .unit-editor_only_hover {
  opacity: 0
}

.section-editor__reorder-btns,
.unit-editor__reorder-btns {
  position: absolute;
  height: 100%;
  top: 0;
  width: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center
}

.unit-editor__reorder-btns {
  right: -54px
}

.unit-editor__reorder {
  cursor: pointer;
  color: #ccc;
  padding: 8px
}

.unit-editor__reorder:hover,
.unit-editor__reorder:target {
  color: #999;
  background: #f3f4f6
}

.new-unit__cover-image,
.unit-editor__cover-image {
  min-height: 60px;
  min-width: 60px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat
}

.unit-editor__reorder .svg-icon {
  width: 9px;
  height: 16px;
  display: inline-block
}

.unit-editor__reorder .svg-icon svg {
  width: 9px;
  height: 16px
}

.unit-editor__reorder.unit-editor__reorder_direction_reverse .svg-icon {
  transform: scaleY(-1)
}

.unit-editor__drag {
  height: 20px;
  color: #d8d8d8;
  cursor: move
}

.unit-editor__drag svg {
  width: 11px;
  height: 20px
}

.unit-editor__delete {
  font-size: 14px;
  color: #999
}

.unit-editor__delete svg {
  width: 16px;
  height: 16px
}

.unit-editor__lesson-title {
  flex-grow: 1;
  margin-left: 5px;
  margin-right: 1em
}

.unit-editor__lesson-title .st-input {
  height: auto;
  padding: 2px 5px
}

.unit-editor__cover-image {
  background-color: #eee;
  margin-left: 15px;
  margin-right: 22px
}

.unit-editor__headline .button,
td.course-revenue__history-details-cell-utm,
td.user-revenue__thd-utm,
th.course-revenue__history-details-cell-utm {
  min-width: 160px
}

.unit-editor__info {
  width: 100%
}

.unit-editor__headline {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 14px
}

.unit-editor__stats {
  display: flex;
  align-items: center;
  margin: 5px 0 0;
  width: 100%
}

.unit-editor__stat {
  font-size: 12px;
  padding: 4px 0;
  white-space: nowrap;
  margin-right: 12px;
  display: flex;
  align-items: center;
  height: 24px;
  color: #999
}

.unit-editor__stat-expand {
  margin-right: auto !important
}

.unit-editor__stat_has_delimiter::before {
  content: "•";
  margin: 0 8px 0 -4px
}

.unit-editor__stat-icon {
  display: flex;
  width: 16px;
  height: 100%;
  margin-right: 5px;
  line-height: 100%
}

.unit-editor__stat-icon svg {
  width: 16px;
  top: -2px;
  position: relative
}

.unit-editor__stat-icon.st-user_icon,
.unit-editor__stat-icon.st-user_icon svg {
  width: 14px;
  height: 14px
}

progress[value].unit-editor__progress-bar {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  color: #6c6;
  width: 50px;
  height: 3px;
  margin-right: 5px
}

progress[value].unit-editor__progress-bar::-webkit-progress-bar {
  border-radius: 3px;
  background-color: #ddd
}

progress[value].unit-editor__progress-bar::-webkit-progress-value {
  border-radius: 3px;
  background-color: #6c6
}

progress[value].unit-editor__progress-bar::-moz-progress-bar {
  border-radius: 3px;
  background-color: #6c6
}

.new-unit {
  padding: 17px 0 30px;
  margin: 0 24px;
  display: flex;
  align-items: flex-start;
  color: #999
}

.new-unit__lesson-title {
  flex-grow: 1;
  margin-right: 1em
}

.new-unit__cover-image {
  background-color: #eee;
  margin-left: 26px;
  margin-right: 22px
}

.new-unit__info {
  width: 100%
}

.new-unit__headline {
  display: flex;
  align-items: flex-start;
  width: 100%;
  font-size: 14px;
  padding-right: 30px
}

.new-unit__stats {
  display: flex;
  align-items: center;
  margin: 2px 0 0;
  width: 100%
}

.new-unit__stat {
  font-size: 12px;
  padding: 4px 0;
  white-space: nowrap;
  margin-right: 12px;
  display: flex;
  align-items: center;
  height: 24px
}

.new-unit__btn {
  white-space: nowrap
}

.new-unit__btn .svg-icon {
  right: 5px
}

.lesson-attachments {
  display: flex;
  flex-direction: column;
  min-height: 500px
}

.lesson-attachments__link {
  color: #000;
  flex-grow: 1;
  text-decoration: underline
}

.lesson-attachments__item {
  display: flex;
  padding: 26px 0;
  border-bottom: 1px solid #d8d8d8;
  align-items: center
}

button.lesson-attachments__delete {
  color: #fff;
  margin-left: 3px;
  background: #b7b7b7;
  padding: .5em !important
}

button.lesson-attachments__delete svg {
  width: 12px;
  height: 12px
}

.attachment-detail {
  display: inline-block
}

.attachment-detail:not([data-disabled]) .attachment-detail__icon,
.attachment-detail:not([data-disabled]) button:not(.st-button_style_none).attachment-list__attach>.svg-icon {
  display: none
}

.attachment-detail__link,
button:not(.st-button_style_none).attachment-list__attach {
  display: flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 4px;
  background-color: #f6f6f6;
  color: #56a4ff;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: .25px
}

.attachment-detail__link[data-empty],
button[data-empty].attachment-list__attach:not(.st-button_style_none) {
  color: #5e5e5e !important;
  cursor: auto
}

.attachment-detail__link:active,
.attachment-detail__link:focus,
.attachment-detail__link:hover,
button.attachment-list__attach:active:not(.st-button_style_none),
button.attachment-list__attach:focus:not(.st-button_style_none),
button.attachment-list__attach:hover:not(.st-button_style_none) {
  background-color: #f3f4f6;
  color: #1466c6;
  border-color: #ccc;
  text-decoration: none
}

.attachment-detail__icon,
button:not(.st-button_style_none).attachment-list__attach>.svg-icon {
  display: inline-flex;
  margin-left: -6px;
  margin-right: 6px;
  font-size: 20px;
  color: #999
}

button:not(.st-button_style_none).attachment-detail__delete {
  margin-right: -8px;
  margin-left: 8px;
  background: 0 0;
  border: none;
  padding: 4px;
  color: #999;
  font-size: 11px
}

.section-settings .form-row[data-is-exam],
.section-settings__footer {
  border-top: 1px solid #ddd
}

button:not(.st-button_style_none).attachment-detail__delete:active,
button:not(.st-button_style_none).attachment-detail__delete:focus,
button:not(.st-button_style_none).attachment-detail__delete:hover {
  color: #d41f1f
}

button:not(.st-button_style_none).attachment-detail__delete>.svg-icon {
  display: flex
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  margin: 8px -4px
}

.attachment-list .attachment-detail__link,
.attachment-list button:not(.st-button_style_none).attachment-list__attach {
  margin: 4px
}

button:not(.st-button_style_none).attachment-list__attach {
  display: inline-flex
}

button:not(.st-button_style_none).attachment-list__attach>.svg-icon {
  color: inherit
}

.section-settings {
  font-size: 14px
}

.section-settings.section-settings_flex-row-comp {
  margin-right: -1rem;
  margin-left: -1rem
}

.section-settings label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.section-settings label[data-is-exam] {
  font-weight: 500;
  color: #222
}

.section-settings .flex-row {
  margin-top: .5em
}

.section-settings__needs-plan {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px;
  color: #999
}

.section-settings__needs-plan .feature-tariff-badge {
  margin: 0 2px 0 0
}

.course>.marco-layout__content .section-settings__needs-plan {
  padding-left: 16px !important
}

.section-settings__exam-settings {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1em
}

.section-settings__random-exam-settings {
  background-color: #f3f4f6;
  padding-top: 1em;
  margin-bottom: 1em
}

.section-settings__random-exam-settings .flex-row .col-xs-6:first-child {
  padding-left: 2em
}

.section-settings__random-exam-settings .st-size-normal {
  font-size: 14px
}

.section-settings__required-score {
  color: #999
}

.section-settings__required-score .spinner-small_icon {
  color: #ccc
}

.section-settings__random-exam-course .spinner-small_icon {
  display: inline-block;
  margin-top: .5em;
  color: #999
}

.section-settings__random-exam-course .spinner-small_icon svg {
  height: 1.5em;
  width: 1.5em
}

.section-settings__random-exam-course-select .empty-option {
  font-style: italic !important
}

.section-settings__random-exam-course-empty {
  display: inline-block;
  font-style: italic;
  padding: 10px 0
}

.section-settings__required-percent[type=number] {
  width: 60px
}

.section-settings__form-checkbox {
  margin-top: .75em
}

.section-settings__footer {
  margin-top: 2em;
  display: flex;
  padding: 1rem 1rem 0
}

.lesson-search__input {
  margin: 1em 0
}

.lesson-search__input input {
  margin: 0
}

.lesson-search__found-lesson {
  display: flex;
  align-items: center;
  list-style: none;
  border-bottom: 1px solid #e6e9ed;
  padding-bottom: 21px;
  padding-top: 14px;
  cursor: pointer
}

.lesson-search__found-lesson:last-child {
  border-bottom: none
}

.lesson-search__found-lesson-title {
  flex-grow: 1;
  margin-right: 1em
}

.lesson-search__lesson-add-btn {
  width: 32px;
  height: 32px;
  background-color: #fff;
  color: #d8d8d8;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center
}

.import-lessons__read-file-progress .svg-icon,
.import-lessons__read-file-progress svg,
.import-lessons__step-ind,
.import-lessons__step-ind .svg-icon,
.import-lessons__step-ind .svg-icon svg {
  height: 1em;
  width: 1em
}

.lesson-search__found-lesson:hover .lesson-search__lesson-add-btn {
  background-color: #54ad54;
  color: #fff
}

.lesson-search__lesson-add-btn.st-button_style_none:hover {
  background-color: #288b28 !important
}

.import-lessons__modal-reset {
  margin: 0 -30px
}

.import-lessons__input {
  padding: 0 30px;
  display: flex
}

.import-lessons__input[data-not-empty] {
  box-shadow: 0 1em 2em rgba(34, 34, 34, .05);
  padding-bottom: 10px
}

.import-lessons__read-file-progress {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #5e5e5e;
  margin-left: .5em;
  font-size: 14px
}

.import-lessons__read-file-progress .svg-icon {
  margin-right: .5em
}

.import-lessons__result {
  overflow: auto;
  max-height: calc(80vh - 160px)
}

.import-lessons__items {
  padding: 10px 20px 0
}

.import-lessons__step {
  padding: .7em 10px;
  border-bottom: 1px solid #ddd;
  border-radius: 6px
}

.import-lessons__step:last-child {
  border-bottom: none
}

.import-lessons__step:hover {
  background: rgba(204, 204, 204, .2)
}

.import-lessons__step:hover .import-lessons__step-ind {
  color: #5e5e5e
}

.import-lessons__step:hover .import-lessons__step-type {
  opacity: 1
}

.import-lessons__step[data-folded] .import-lessons__step-text {
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.import-lessons__step[data-folded] .import-lessons__step-options {
  display: none
}

.import-lessons__step-head {
  display: flex;
  align-items: baseline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.import-lessons__step-toggler {
  cursor: pointer
}

.import-lessons__step-type {
  font-size: 12px;
  margin-left: .5em;
  opacity: .5
}

.import-lessons__step-type span {
  padding: .1em .5em;
  border: 1px solid #222;
  border-radius: .75em;
  display: inline-felx
}

.import-lessons__step-text {
  flex: 1;
  cursor: pointer
}

.import-lessons__step-options {
  margin: 0 0 0 30px;
  font-size: 14px
}

.import-lessons__step-head+.import-lessons__step-options {
  margin-top: .5em
}

.import-lessons__step-ind {
  font-style: none;
  margin-right: .75em;
  text-align: center;
  color: #b7b7b7;
  position: relative;
  top: .25em
}

.import-lessons__example table {
  width: 100%
}

.import-lessons__example table td {
  border: 1px solid #ccc
}

.import-lessons__example-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: .5em
}

.import-lessons__actions {
  background-color: #fff;
  box-shadow: 0 -1em 2em rgba(34, 34, 34, .05);
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 3;
  text-align: center;
  padding-top: 20px
}

.course-publication-card {
  display: grid;
  grid-template-areas: "icon title" "content content" "actions actions";
  grid-template-columns: -webkit-min-content auto;
  grid-template-columns: min-content auto;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
  align-items: center;
  grid-gap: 16px;
  padding: 16px;
  background-color: #FCFCFC;
  border: 1px solid #EAEAEA;
  border-radius: 4px
}

.course-publication-card[data-theme=invalid] {
  background-color: #FCFCFC;
  border: 1px solid #999
}

.course-publication-card[data-theme=invalid] .course-publication-card__icon {
  background-color: #FFEBE8;
  color: #D41F1F
}

.course-publication-card[data-theme=draft] .course-publication-card__icon {
  background: linear-gradient(136.36deg, #E7F2FF -24.63%, #F1F1F4 140.22%);
  color: #5E5E5E;
  font-size: 16px
}

.course-publication-card[data-theme=public] .course-publication-card__icon {
  background: linear-gradient(136.36deg, #E7F2FF -24.63%, #E3FFF0 140.22%);
  color: #56A4FF;
  font-size: 16px
}

.course-publication-card[data-theme=paid] .course-publication-card__icon,
.course-publication-card[data-theme=success] .course-publication-card__icon {
  background: linear-gradient(136.36deg, #E7F2FF -24.63%, #CBFFD2 140.22%);
  color: #54AD54;
  font-size: 16px
}

.course-publication-card[data-theme=private] .course-publication-card__icon {
  background: linear-gradient(136.36deg, #F6FAFF -24.63%, #C8E2FF 140.22%);
  color: #4485ED;
  font-size: 16px
}

.course-publication-card__icon {
  grid-area: icon;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: #E7F2FF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px
}

.course-publication-card__text button,
.course-publication-tree__text button {
  border: none;
  -webkit-text-decoration-line: var(--link-line);
  text-decoration-line: var(--link-line);
  text-underline-offset: var(--link-line-offset)
}

.course-publication-card__icon .svg-icon {
  display: flex
}

.course-publication-card__title {
  grid-area: title;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .15px
}

.course-publication-card__content {
  grid-area: content;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.course-publication-card__text p {
  margin: 0
}

.course-publication-card__text p+p {
  margin-top: 1.25em
}

.course-publication-card__text a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.course-publication-card__text button {
  padding: 0;
  vertical-align: baseline;
  background: 0 0;
  font-size: inherit;
  --focus-outline-color: rgba(100, 200, 255, 0.3);
  color: var(--link-color, inherit);
  -webkit-text-decoration-color: var(--link-line-color);
  text-decoration-color: var(--link-line-color);
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.course-publication-card__text button:focus,
.course-publication-card__text button:hover {
  color: var(--link-hover-color, var(--link-color));
  -webkit-text-decoration-color: var(--link-hover-line-color, var(--link-line-color));
  text-decoration-color: var(--link-hover-line-color, var(--link-line-color))
}

.course-publication-card__text button:active {
  color: var(--link-active-color, var(--link-color));
  -webkit-text-decoration-color: var(--link-active-line-color, var(--link-line-color));
  text-decoration-color: var(--link-active-line-color, var(--link-line-color))
}

.course-publication-card__text button:disabled,
.course-publication-card__text button[aria-disabled=true] {
  color: var(--link-disabled-color, var(--link-color));
  cursor: not-allowed
}

.course-publication-card__text button:disabled,
.course-publication-card__text button:focus,
.course-publication-card__text button:hover {
  background: 0 0
}

.course-publication-card__form {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  margin-top: 8px
}

.course-publication-card__form .the-form-field__caption {
  margin: 0 0 12px
}

.course-publication-card__actions {
  grid-area: actions
}

.course-publication-card__actions .button,
.course-publication-card__actions button:not(.st-button_style_none) {
  padding: 9px 24px
}

.course-publication-tree .fir-tree>li h3 {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .3px;
  top: 1px
}

.course-publication-tree .fir-tree>li h3 a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.course-publication-tree .fir-tree>li[data-status=in-progress] h3 {
  font-weight: 500;
  letter-spacing: .15px
}

.course-publication-tree .fir-tree>li section {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px
}

.course-publication-tree .fir-tree>li section a.external {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222;
  white-space: nowrap
}

.course-publication-tree .fir-tree>li section a.external::after {
  display: inline-block;
  margin: 0 0 0 var(--external-link-icon-offset, 3px);
  position: relative;
  top: -.125em;
  height: var(--external-link-icon-size, .5em);
  vertical-align: var(--external-link-valign, middle);
  background-color: var(--external-link-icon-color, #1466C6)
}

.course-publication-tree__text p {
  margin: 0
}

.course-publication-tree__text p+p {
  margin-top: 1.25em
}

.course-publication-tree__text a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.course-publication-tree__text button {
  padding: 0;
  vertical-align: baseline;
  background: 0 0;
  font-size: inherit;
  --focus-outline-color: rgba(100, 200, 255, 0.3);
  color: var(--link-color, inherit);
  -webkit-text-decoration-color: var(--link-line-color);
  text-decoration-color: var(--link-line-color);
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.course-publication-tree__text button:focus,
.course-publication-tree__text button:hover {
  color: var(--link-hover-color, var(--link-color));
  -webkit-text-decoration-color: var(--link-hover-line-color, var(--link-line-color));
  text-decoration-color: var(--link-hover-line-color, var(--link-line-color))
}

.course-publication-tree__text button:active {
  color: var(--link-active-color, var(--link-color));
  -webkit-text-decoration-color: var(--link-active-line-color, var(--link-line-color));
  text-decoration-color: var(--link-active-line-color, var(--link-line-color))
}

.course-publication-tree__text button:disabled,
.course-publication-tree__text button[aria-disabled=true] {
  color: var(--link-disabled-color, var(--link-color));
  cursor: not-allowed
}

.course-publication-tree__text button:disabled,
.course-publication-tree__text button:focus,
.course-publication-tree__text button:hover {
  background: 0 0
}

.course-publication-tree__actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px 16px
}

.course-publication-tree__actions .button,
.course-publication-tree__actions button:not(.st-button_style_none) {
  padding: 9px 24px;
  height: 36px;
  -webkit-font-smoothing: antialiased
}

.course-publication-tree__actions .button.course-checklist-refresh,
.course-publication-tree__actions button:not(.st-button_style_none).course-checklist-refresh {
  padding: 9px 11px;
  font-size: 14px;
  align-items: center
}

.course-publication-tree__checklist+.course-publication-tree__actions,
.course-publication-tree__form+.course-publication-tree__actions,
.course-publication-tree__text+.course-publication-tree__actions {
  margin-top: 16px
}

.course-publication-tree__form {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  margin-top: 8px
}

.course-publication-tree__form .the-form-field__caption {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .15px
}

.course-publication-tree__checklist {
  -webkit-font-smoothing: antialiased
}

.course-publication-tree__checklist-header {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .15px;
  margin-bottom: 16px
}

*+.group-editor__email-invitations-list {
  margin-top: .5em
}

.group-editor__load-more:hover {
  opacity: 1
}

.group-editor__load-more:not(.st-button_style_none).secondary {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px
}

.invitations-editor .spinner-small_icon {
  color: #ccc
}

.invitations-editor .spinner-small_icon svg {
  height: 1.5em;
  width: 1.5em
}

.invitations-editor__actions {
  display: flex;
  align-items: center;
  margin-bottom: .5em
}

.invitations-editor__invitations {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.invitations-editor__invitations_empty {
  color: #ccc;
  font-size: 14px
}

.invitations-editor__invitation-item {
  font-size: 14px
}

.invitations-editor__add {
  --data-tooltip-max-width: 400px
}

.invitations-editor__add .svg-icon,
.invitations-editor__add svg {
  width: 1.2em;
  height: 1.2em !important
}

.invitations-editor__add .svg-icon {
  margin-right: .4em
}

.invitations-editor__add:not(.st-button_style_none) {
  padding: .6em .9em;
  display: flex;
  align-items: center
}

.invitations-editor__add+.invitations-editor__add {
  margin-left: 1em
}

.invitation-item {
  display: flex;
  max-width: calc(100% + 1em);
  padding: .3em 1em;
  margin: 0 -1em;
  border-radius: 4px
}

.invitation-item__name+.invitation-item__action,
.invitation-item__type+.invitation-item__name {
  margin-left: .5em
}

.invitation-item:hover {
  background-color: #f3f4f6
}

.invitation-item:hover .invitation-item__type {
  color: #999
}

.invitation-item__type {
  color: #ccc;
  transition: color .2s
}

.invitation-item__type,
.invitation-item__type svg {
  width: 20px;
  height: 22px
}

.invitation-item__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #56a4ff;
  cursor: pointer
}

.invitation-item__name:hover {
  color: #1466c6
}

[data-is-used] .invitation-item__name {
  color: #ccc;
  text-decoration: line-through
}

.invitation-item__action {
  cursor: pointer;
  color: #ccc;
  transition: color .2s
}

.invitation-item:hover .invitation-item__action {
  color: #d41f1f
}

.email-invitations-list .spinner-small_icon,
.email-invitations-list__invitations_empty {
  color: #ccc
}

.invitation-item__action svg {
  width: 12px;
  height: 12px
}

.email-invitations-list .spinner-small_icon svg {
  height: 1.5em;
  width: 1.5em
}

.email-invitations-list__invitations {
  list-style: none;
  font-size: 14px;
  line-height: 20px
}

.email-invitations-item {
  padding: 2px 1em 2px 0;
  margin: 0 -1em
}

.email-invitations-item__name {
  overflow: hidden;
  max-width: 500px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #56a4ff;
  cursor: pointer;
  padding: 0
}

.email-invitations-item__name:hover {
  color: #1466c6
}

.email-invitations-item__name+.email-invitations-item__action {
  margin-left: .5em
}

.email-invitations-item__action {
  cursor: pointer;
  color: #ccc;
  transition: color .2s;
  padding: 0
}

.email-invitations-item:hover .email-invitations-item__action {
  color: #d41f1f
}

.email-invitations-item__action svg {
  width: 12px;
  height: 12px
}

.member-field__input-control {
  border: 1px solid #acd1ac;
  border-radius: 4px
}

.member-field__input-control[data-is-success] {
  border-color: #6c6
}

.member-field__input-control[data-has-errors] {
  border-color: #d41f1f
}

.member-field__input-control[data-disabled] {
  border-color: #ccc
}

.member-field__input[type=text] {
  width: 100%;
  height: 36px;
  min-width: 0;
  border: none;
  margin-bottom: 0;
  font-size: 14px
}

[data-has-errors] .member-field__input[type=text] {
  background-color: rgba(212, 31, 31, .1)
}

.member-field__input[type=text][disabled] {
  background: 0 0;
  cursor: not-allowed
}

.member-field__button {
  --data-tooltip-max-width: 400px
}

.member-field__button:not(.st-button_style_none) {
  height: 36px;
  padding: 2px 1em;
  border-radius: 0;
  border: none
}

[data-has-errors] .member-field__button:not(.st-button_style_none) {
  background-color: rgba(212, 31, 31, .5)
}

.member-field__button .svg-icon,
.member-field__button svg {
  display: flex;
  width: 16px;
  height: 19px
}

.member-field__errors {
  display: block;
  max-width: 220px;
  color: #d41f1f;
  font-size: 12px
}

.member-item__action,
.members-list .spinner-small_icon,
.members-list__members_empty {
  color: #ccc
}

.members-list .spinner-small_icon svg {
  height: 1.5em;
  width: 1.5em
}

.members-list__members {
  list-style: none;
  font-size: 14px;
  line-height: 20px
}

.member-item {
  padding: 2px 1em 2px 0;
  margin: 0 -1em;
  will-change: transform
}

.member-item__action {
  cursor: pointer;
  transition: color .2s;
  padding: 0
}

.member-item:hover .member-item__action {
  color: #d41f1f
}

*+.member-item__action {
  margin-left: .5em
}

.member-item__action svg {
  width: 12px;
  height: 12px
}

.search-members__search-field {
  width: 260px;
  height: 36px;
  padding: 0;
  margin: 0
}

.search-members__search-field+.search-members__search-btn {
  margin-left: .5em
}

.search-members__input[type=text] {
  width: 100%;
  font-size: 14px
}

.search-members__search-btn:not(.st-button_style_none) {
  height: 36px;
  padding: 9px 24px
}

.invitations-modal__header {
  font-size: 22px;
  font-weight: 500;
  padding: .4em 0;
  border-bottom: 1px solid #ddd
}

.invitations-modal__header+.invitations-modal__body {
  margin-top: 1.5em
}

.invitations-modal__footer {
  padding: 1em 0 0;
  border-top: 1px solid #ddd;
  text-align: right
}

.invitations-modal__body+.invitations-modal__footer {
  margin-top: 1.5em
}

.invitations-modal__email-list {
  width: 100%;
  list-style: none;
  font-size: .875em;
  line-height: 2em
}

.invitations-modal__email-list li {
  display: flex;
  align-items: center;
  padding: 0 .5em
}

.invitations-modal__email-list li,
.invitations-modal__email-list li[data-status=waiting] {
  color: #ccc
}

.invitations-modal__email-list li[data-status=finished],
.invitations-modal__email-list li[data-status=running] {
  color: #222
}

.invitations-modal__email-list li[data-status=finished] .invitations-modal__email-list-ind {
  color: #6c6
}

.invitations-modal__email-list li[data-has-problems],
.invitations-modal__email-list li[data-has-problems] .invitations-modal__email-list-ind {
  color: #d41f1f
}

.invitations-modal__email-list .invitations-modal__email-list-ind {
  font-style: none;
  margin-right: .5em;
  text-align: center
}

.invitations-modal__email-list .invitations-modal__email-list-ind,
.invitations-modal__email-list .invitations-modal__email-list-ind .svg-icon,
.invitations-modal__email-list .invitations-modal__email-list-ind .svg-icon svg {
  height: 1.3em;
  width: 1.3em
}

.invitations-modal__email-list .spinner-small_icon {
  color: #ccc
}

.invitations-modal__form {
  margin-top: 1.5em
}

.invitations-modal__form[data-folded] {
  border-top: 1px solid #ddd
}

.invitations-modal__form[data-folded] .invitations-modal__textarea-wrapper {
  overflow: hidden;
  height: 0
}

.invitations-modal__form[data-folded] .invitations-modal__expand-btn {
  display: block;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}

.invitations-modal__form+.invitations-modal__email-list {
  margin-top: .3em
}

.invitations-modal__textarea {
  width: 100%;
  max-height: 30vh;
  margin-top: 0;
  margin-bottom: 1em;
  resize: none
}

.invitations-modal__section-title {
  font-size: 18px;
  font-weight: 400
}

button:not(.st-button_style_none).invitations-modal__expand-btn {
  display: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #ddd
}

button:not(.st-button_style_none).invitations-modal__expand-btn,
button:not(.st-button_style_none).invitations-modal__expand-btn:focus,
button:not(.st-button_style_none).invitations-modal__expand-btn:hover {
  color: #777;
  background-color: #fff
}

button:not(.st-button_style_none).invitations-modal__expand-btn:focus,
button:not(.st-button_style_none).invitations-modal__expand-btn:hover {
  border-color: #a8a8a8
}

.reports-table__cell {
  width: 25%;
  text-align: center
}

.course-reports-table {
  position: relative
}

.course-reports-table__expir-note {
  position: absolute;
  top: 6px;
  right: 0;
  font-size: 12px;
  letter-spacing: .4px
}

.course-reports-table__category {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .17px
}

.course-reports-table__list {
  list-style: none;
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px
}

.course-reports-table__item {
  padding: 16px 0;
  border-bottom: 1px solid #E9EBFA
}

.course-reports-table__item-main {
  display: flex;
  align-items: flex-start;
  min-height: 34px
}

.course-reports-table__item-title {
  width: 244px;
  margin-right: 10px
}

.course-reports-table__item-action {
  width: 174px;
  margin-right: 10px
}

.course-reports-table__item-action-loader {
  display: inline-block;
  padding: 6px 16px;
  color: #3e50cb
}

button.course-reports-table__item-action-create,
button.course-reports-table__item-action-update {
  padding: 10px 24px;
  font-size: inherit
}

.course-reports-table__item-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0
}

.course-reports-table__item-datetime {
  margin: 0 16px 0 0
}

.course-reports-table__item-files {
  margin: -4px 8px -4px -4px
}

.course-reports-table__item-descr-help {
  margin: 2px 0 2px auto;
  color: #a5a5a5
}

.course-reports-table__item-descr-help:focus,
.course-reports-table__item-descr-help:hover {
  color: #222
}

.course-reports-table__item-descr-help>.svg-icon {
  color: inherit
}

.course-reports-table__item-descr-help>.svg-icon svg {
  width: 20px;
  height: 20px;
  vertical-align: top
}

.course-reports-table__item-descr-tooltip {
  max-width: 520px;
  font-size: 14px
}

.course-reports-table__item-description {
  color: #999
}

.course-reports-table__item-description>span {
  margin-right: 5px
}

button.course-reports-table__item-sample-btn {
  margin: 0;
  padding: 0 0 2px;
  background: 0 0;
  border: none;
  border-radius: 0;
  color: inherit;
  font-size: 12px;
  vertical-align: baseline;
  letter-spacing: .4px;
  border-bottom: 1px dashed;
  outline: 0
}

button.course-reports-table__item-sample-btn:focus,
button.course-reports-table__item-sample-btn:hover {
  background: 0 0;
  border-bottom: 1px dashed;
  color: #5e5e5e
}

button.course-reports-table__item-sample-btn:active {
  color: #222
}

button.course-reports-table__item-sample-btn>.svg-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  vertical-align: bottom
}

button.course-reports-table__item-sample-btn>.svg-icon svg {
  width: 100%;
  height: 100%
}

.course-reports-table__item-sample {
  margin-top: 16px;
  min-height: 104px;
  overflow: auto
}

.course-reports-table__item-sample-error {
  margin: 0 auto
}

.course-reports-table__item-sample-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse
}

.course-reports-table__item-sample-table td,
.course-reports-table__item-sample-table th {
  padding: 4px;
  text-align: left;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .33px;
  border: 1px solid #eaecf0
}

.course-reports-table__item-sample-table th {
  font-weight: 500;
  border-bottom-color: #ccc
}

@media (max-width:1024px) {
  .course-reports-table__expir-note {
    position: static;
    left: 0;
    top: 0;
    margin: 3px 12px;
    float: right
  }

  .course-reports-table__item-main {
    display: grid;
    grid-template-areas: "title" "action" "content";
    align-items: center;
    gap: 12px
  }

  .course-reports-table__item-title {
    grid-area: title;
    width: auto;
    margin: 0
  }

  .course-reports-table__item-action {
    grid-area: action;
    min-width: 130px;
    width: auto;
    margin: 0
  }

  .course-reports-table__item-content {
    grid-area: content;
    flex-wrap: wrap
  }

  .course-reports-table__item-files {
    margin-right: 2px
  }

  .course-reports-table__item-descr-tooltip {
    font-size: 12px;
    max-width: 90vw
  }

  button.course-reports-table__item-action-create,
  button.course-reports-table__item-action-update {
    padding: 8px 14px
  }

  .course-reports-table__item-action-loader {
    padding: 8px 0
  }

  .course-promo-enrollment__annotation {
    align-self: center
  }
}

.toc-promo__section:not(:first-child) {
  border-top: 1px solid #e6e9ed
}

.toc-promo__section-widget {
  padding: 10px 0;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  align-items: flex-start
}

.toc-promo__section-widget[data-foldable] {
  cursor: pointer
}

.toc-promo__section-widget-title {
  flex-grow: 1
}

.toc-promo__section-widget-icon svg {
  color: #9a9faf
}

.toc-promo__section-widget-icon,
.toc-promo__section-widget-icon svg {
  width: 14px;
  height: 14px
}

.toc-promo__lessons {
  margin: 0;
  counter-reset: section
}

.toc-promo__lessons:not(:empty) {
  padding: 0 0 1em
}

.toc-promo__lesson:before {
  counter-increment: section;
  content: counter(section) ". "
}

.course-grade-book-table__sortable-header-cell::before,
.quiz-layout-head .quiz-layout-head__print-notify a:link:after,
.quiz-layout-head .quiz-layout-head__print-notify a:visited:after,
.review-detail__terms dd:after,
.step-show__deprecated-warning-text a::after,
.submission-status-ico[data-status=wrong]::before,
[data-unknown-user] .review-show__submission-date::before {
  content: ""
}

.toc-promo-lesson {
  display: flex;
  align-items: flex-start
}

.toc-promo-lesson__title {
  flex-grow: 1;
  margin-left: .5em;
  text-decoration: none;
  color: #222
}

.toc-promo-lesson__title:hover {
  color: #222
}

.toc-promo-lesson__title-placeholder {
  display: inline-block;
  border-radius: 4px
}

.toc-promo-lesson__button:not(.st-button_style_none) {
  font-size: 12px;
  padding: 4px 8px;
  line-height: 1.17;
  border-radius: 3px;
  white-space: nowrap
}

.course-promo-enrollment {
  display: flex;
  flex-direction: column
}

.course-promo-enrollment[data-appearance=mobile-bottom-panel] .course-promo-enrollment__dolyame {
  padding: 4px 0 4px 12px
}

.course-promo-enrollment__annotation {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.course-promo-enrollment__price-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between
}

.course-promo-enrollment__price {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: flex-end;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .25px;
  line-height: 1
}

.course-promo-enrollment__price .format-price.format-price_free {
  display: flex;
  font-size: 28px
}

.course-promo-enrollment__price .display-price__price_regular {
  margin-left: 20px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .15px
}

@media (max-width:1024px) {
  .course-promo-enrollment__price {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: .2px
  }

  .course-promo-enrollment__price[data-default-price-free] {
    display: none
  }

  .course-promo-enrollment__price[data-default-price-free]~.course-promo-enrollment__actions {
    margin-top: 0
  }

  .course-promo-enrollment__price .display-price__price_regular {
    margin-left: 12px;
    font-size: 16px;
    letter-spacing: .3px;
    color: #999
  }
}

.course-promo-enrollment__actions {
  display: flex;
  flex-wrap: wrap;
  margin: 14px -12px 17px
}

[data-appearance=aside] .course-promo-enrollment__actions {
  margin-bottom: -10px
}

.course-promo-enrollment[data-appearance=default] .course-promo-enrollment__actions .course-pay-dolyame {
  width: 100%;
  max-width: none;
  flex: none;
  margin-bottom: 16px
}

.course-promo-enrollment__actions>* {
  flex: 1;
  min-width: 210px;
  max-width: 290px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.course-promo-enrollment__actions>*,
.course-promo-enrollment__actions>:not(.st-button_style_none) {
  margin: 7px 12px
}

.course-promo-enrollment__actions a:not(.st-button_style_none),
.course-promo-enrollment__actions button:not(.st-button_style_none) {
  padding: 14px 24px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: .15px;
  -webkit-font-smoothing: antialiased
}

@media (max-width:1024px) {
  .course-promo-enrollment__actions {
    justify-content: center;
    margin-bottom: 0
  }

  .course-promo-enrollment__actions>*,
  .course-promo-enrollment__actions>:not(.st-button_style_none) {
    margin: 4px 8px;
    flex: 1 0 50%;
    max-width: none;
    min-width: auto
  }

  .course-promo-enrollment__actions a:not(.st-button_style_none),
  .course-promo-enrollment__actions button:not(.st-button_style_none) {
    padding: 9px;
    font-size: 16px
  }

  .course-promo-enrollment__actions a>span,
  .course-promo-enrollment__actions button>span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
  }
}

.course-promo-enrollment__join a,
.course-promo-enrollment__join button {
  display: block;
  width: 100%
}

[data-appearance=mobile-bottom-panel] [data-has-preview-lesson] .course-promo-enrollment__join {
  order: 5
}

.course-promo-enrollment__join-btn {
  font-weight: 500 !important
}

.button.course-promo-enrollment__gift-btn[data-appearance=default],
.button.course-promo-enrollment__gift-btn[data-appearance=mobile-bottom-panel],
button:not(.st-button_style_none).course-promo-enrollment__wishlist-btn[data-appearance=default],
button:not(.st-button_style_none).course-promo-enrollment__wishlist-btn[data-appearance=mobile-bottom-panel] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  padding: 14px
}

.button.course-promo-enrollment__gift-btn[data-appearance=default] .svg-icon,
.button.course-promo-enrollment__gift-btn[data-appearance=mobile-bottom-panel] .svg-icon,
button:not(.st-button_style_none).course-promo-enrollment__wishlist-btn[data-appearance=default] .svg-icon,
button:not(.st-button_style_none).course-promo-enrollment__wishlist-btn[data-appearance=mobile-bottom-panel] .svg-icon {
  display: flex
}

.course-promo-enrollment__cant-be-bought-warn {
  font-size: 14px;
  color: #d41f1f;
  margin-top: 14px
}

.course-promo-enrollment__cant-be-bought-warn a {
  --link-line: underline;
  --link-line-offset: .2em;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222;
  --link-color: #d41f1f;
  --link-line-color: rgba(212, 31, 31, 0.5);
  --link-hover-color: #d41f1f;
  --link-hover-line-color: #d41f1f;
  --link-active-color: rgba(212, 31, 31, 0.7);
  --link-active-line-color: rgba(212, 31, 31, 0.7)
}

.course-promo-enrollment__refund {
  font-size: 16px;
  line-height: 23px;
  letter-spacing: .3px
}

.course-promo-enrollment__course-ended-warn {
  margin: 24px 0 2px;
  font-weight: 500;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: .15px;
  color: #d41f1f
}

@media (max-width:1024px) {

  .button.course-promo-enrollment__gift-btn[data-appearance=default],
  .button.course-promo-enrollment__gift-btn[data-appearance=mobile-bottom-panel],
  button:not(.st-button_style_none).course-promo-enrollment__wishlist-btn[data-appearance=default],
  button:not(.st-button_style_none).course-promo-enrollment__wishlist-btn[data-appearance=mobile-bottom-panel] {
    padding: 9px
  }

  .course-promo-enrollment__cant-be-bought-warn {
    text-align: center
  }

  .course-promo-enrollment__course-ended-warn {
    margin-top: 0;
    font-size: 14px;
    line-height: 16px
  }

  .course-promo-enrollment__annotation+.course-promo-enrollment__course-ended-warn,
  .course-promo-enrollment__price-container+.course-promo-enrollment__course-ended-warn {
    margin-top: 16px
  }
}

.course-promo-reviews__item {
  padding: 12px 0 24px;
  font-size: 14px;
  --course-review-card-text-font-size: 16px;
  --course-review-card-text-font-weight: 400;
  --course-review-card-text-line-height: 23px;
  --course-review-card-text-letter-spacing: 0.3px;
  --course-review-card-reply-font-size: 16px;
  --course-review-card-reply-font-weight: 400;
  --course-review-card-reply-line-height: 23px;
  --course-review-card-reply-letter-spacing: 0.3px
}

.course-promo-summary__stats {
  display: flex;
  justify-content: space-between
}

.course-promo-summary__stats+.course-promo-summary__students {
  margin-top: 2px
}

.course-promo-summary__rating {
  display: flex;
  flex-grow: 1;
  font-size: 20px;
  line-height: 1
}

.course-promo-summary__average {
  margin-left: 5px;
  font-weight: 500
}

.course-promo-summary__reviews-count,
.course-promo-summary__students {
  font-size: 14px
}

.course-promo-summary__reviews-count {
  color: #56a4ff
}

.attempt-main {
  display: flex;
  margin-top: auto;
  width: 100%;
  align-self: flex-end
}

.attempt-wrapper__result-icon {
  display: inline-block;
  vertical-align: top;
  height: 24px;
  margin-right: .5em
}

.attempt-wrapper__result-icon svg {
  width: 24px;
  height: 24px
}

.attempt-wrapper__result-icon .spinner-small_icon {
  color: #5e5e5e
}

.attempt-wrapper__result-icon .spinner-small_icon svg {
  height: 1.5em;
  width: 1.5em
}

.attempt-wrapper__review-stages-ui.attempt-wrapper {
  margin: 50px 0 30px;
  background: 0 0;
  border-top: none
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt__inner {
  margin: 0;
  padding: 0;
  background: 0 0
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt__inner:not(:last-child) {
  margin-bottom: 16px
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt {
  margin: 0;
  padding: 0
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt__message {
  margin: 0 0 10px;
  padding: 0 !important;
  background: 0 0
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt__message>span {
  display: inline-block;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px;
  border-radius: 4px;
  background-color: #f3f4f6
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt__message .attempt-message_error,
.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt__message .attempt-message_wrong {
  background-color: #feebe8;
  color: #d41f1f
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt__message .attempt-message_correct {
  background-color: #e9f9e9
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt__message .attempt-message_correct_not_graded {
  display: none
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt__additional-message {
  margin: 8px 0 0;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt-wrapper__result-icon {
  margin-right: 8px;
  height: 1em;
  font-size: 18px
}

.attempt-wrapper__review-stages-ui.attempt-wrapper .attempt-wrapper__result-icon svg {
  width: 1em;
  height: 1em
}

.attempt-wrapper__review-stages-container {
  display: flex;
  margin: 0 0 32px
}

.attempt-wrapper__review-stages {
  flex: 1;
  margin-left: -12px
}

.attempt-wrapper__review-stages>li>b,
.attempt-wrapper__review-stages>li>strong {
  font-weight: 500
}

.attempt-wrapper__review-stages>li[data-stage=peer-given-reviews] section {
  display: flex;
  align-items: center
}

.attempt-wrapper__review-stages>li[data-stage=peer-given-reviews] small {
  margin-left: 16px;
  font-size: 12px;
  line-height: 1.17
}

.attempt-wrapper__review-stages>li[data-stage=instructor-review] small,
.attempt-wrapper__review-stages>li[data-stage=peer-taken-reviews] small {
  display: block;
  margin: 6px 0;
  line-height: 1.43;
  font-size: 12px;
  letter-spacing: .45px
}

.attempt-wrapper__review-stages-aside {
  flex-shrink: 0;
  width: 232px;
  margin-left: 30px
}

.attempt-wrapper__review-stages-aside>section {
  padding: 10px 16px;
  border-radius: 4px;
  background-color: #f3f4f6;
  font-size: 14px;
  letter-spacing: .25px;
  line-height: 1.43
}

.attempt-wrapper__review-stages-aside>section+section {
  margin-top: 10px
}

.attempt-wrapper__review-stages-aside>section[data-type=passed-by] {
  background-color: #e9f9e9
}

.attempt__code-run-notify {
  margin-bottom: 20px
}

.attempt__code-run-notify .attempt__message-callto {
  margin: 0
}

@media (max-width:1135px) {
  .attempt-wrapper__review-stages-container {
    flex-direction: column
  }

  .attempt-wrapper__review-stages-aside {
    margin: 32px 0 0
  }
}

.quiz-layout-head .quiz-layout-head__print-notify {
  border: 10px dotted #eee;
  padding: 1em;
  font-size: 1.5em;
  text-align: center
}

.course-info-editor__upload-widget-add-modal .modal-popup__content code,
.rich-text-editor__content code,
.rich-text-viewer code,
.step-text-wrapper code {
  font-size: .9em;
  font-weight: inherit;
  background-color: #f3f4f6;
  -webkit-font-smoothing: antialiased
}

.course-info-editor__upload-widget-add-modal .modal-popup__content pre>code,
.rich-text-editor__content pre>code,
.rich-text-viewer pre>code,
.step-text-wrapper pre>code {
  line-height: 1.3em;
  display: block;
  padding: .5em 1em
}

.step-text-wrapper li>p,
.step-text-wrapper.inline>p {
  display: inline
}

.course-info-editor__upload-widget-add-modal .modal-popup__content :not(pre)>code,
.rich-text-editor__content :not(pre)>code,
.rich-text-viewer :not(pre)>code,
.step-text-wrapper :not(pre)>code {
  padding: 2px 5px;
  background-color: #f3f4f6;
  color: #000;
  border: 1px solid #ecedf1;
  border-radius: 3px
}

.step-text-wrapper {
  line-height: 1.6em;
  color: #000;
  font-family: Roboto, sans-serif;
  overflow: hidden;
  outline: 0;
  border-style: none;
  shadow: none;
  text-align: left;
  height: 100%
}

.CodeMirror,
.CodeMirror-tooltip,
.code-editor__textarea,
.code-runner__input,
.step-text-wrapper .monospace,
.step-text-wrapper .special_text .mono,
.step-text-wrapper .special_text.mono {
  font-family: "JetBrains Mono", monospace
}

.step-text-wrapper :focus {
  outline: 0
}

.step-text-wrapper i {
  font-size: 1em
}

.step-text-wrapper ol,
.step-text-wrapper ul {
  padding: 0 1.5em;
  margin-left: 1.25em;
  text-align: left
}

.step-text-wrapper h1,
.step-text-wrapper h2,
.step-text-wrapper h3,
.step-text-wrapper h4,
.step-text-wrapper h5,
.step-text-wrapper h6 {
  text-align: center;
  line-height: 1.2125em
}

.step-text-wrapper h1 {
  font-size: 36px
}

.step-text-wrapper h2 {
  font-size: 24px
}

.step-text-wrapper img,
.step-text-wrapper table {
  margin: 0 auto
}

.step-text-wrapper img {
  display: block
}

.step-text-wrapper .special_text {
  margin-bottom: 1.25em
}

.step-text-wrapper .special_text .center,
.step-text-wrapper .special_text.center {
  line-height: inherit;
  text-align: center
}

.step-text-wrapper .special_text .center p,
.step-text-wrapper .special_text.center p {
  text-align: inherit
}

.step-text-wrapper .special_text .pre,
.step-text-wrapper .special_text.pre {
  text-align: left;
  white-space: pre;
  white-space: pre-wrap;
  display: inline
}

.step-text-wrapper .special_text .pre p:last-child,
.step-text-wrapper .special_text.pre p:last-child {
  margin-bottom: 0
}

.step-text-wrapper .special_text .mono,
.step-text-wrapper .special_text.mono {
  line-height: 1.2em !important
}

.step-text-wrapper .special_text .mono>p,
.step-text-wrapper .special_text.mono>p {
  line-height: 1.2em !important;
  margin: 0;
  padding: 0
}

.step-text-wrapper .flex-video-wrap {
  margin: 0 auto
}

.step-text-wrapper .img_special.shrink {
  display: block;
  text-align: center
}

.step-text-wrapper .img_special.shrink.left,
.step-text-wrapper .img_special.shrink.right {
  display: inline
}

.step-text-wrapper .img_special.right {
  margin-left: .5em
}

.step-text-wrapper .img_special.left {
  margin-right: .5em
}

.step-text-wrapper a {
  color: #00a8ff;
  overflow-wrap: break-word
}

.step-text-wrapper a:focus,
.step-text-wrapper a:hover {
  color: #00f;
  text-decoration: underline
}

.step-text-wrapper code {
  text-align: left;
  color: inherit;
  min-height: 2em
}

.step-text-wrapper.block pre code {
  margin-top: -10px;
  margin-bottom: 7px
}

.step-text-wrapper>:last-child {
  margin-bottom: 0
}

.step-text-wrapper .step-text__limit-title {
  border-top: 1px solid;
  border-color: #CCC;
  padding-top: .5em;
  margin-top: .5em;
  margin-bottom: 0
}

.step-text-wrapper .step-text__limit-value {
  margin-left: 1em;
  overflow-x: auto;
  --custom-scrollbar-background: #fff;
  --custom-scrollbar-thumb-color: rgba(0, 0, 0, 0.4);
  --custom-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.5);
  --custom-scrollbar-thumb-active-color: rgba(0, 0, 0, 0.5);
  --custom-scrollbar-resize-grip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23999'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>")
}

.step-text-wrapper .step-text__limit-value::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--custom-scrollbar-background)
}

.step-text-wrapper .step-text__limit-value::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-background)
}

.step-text-wrapper .step-text__limit-value::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-thumb-color);
  border: 3px solid var(--custom-scrollbar-background)
}

.step-text-wrapper .step-text__limit-value::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover-color)
}

.step-text-wrapper .step-text__limit-value::-webkit-scrollbar-thumb:active {
  background-color: var(--custom-scrollbar-thumb-active-color)
}

.step-text-wrapper .step-text__limit-value::-webkit-scrollbar-corner {
  background-color: var(--custom-scrollbar-background)
}

.step-text-wrapper .step-text__limit-value::-webkit-resizer {
  background-image: var(--custom-scrollbar-resize-grip);
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: 2px 2px
}

.step-text-wrapper .step-actions {
  clear: both
}

.step-show .step-show_is_preview {
  pointer-events: none
}

.step-show__step-disabled {
  display: grid;
  grid-gap: 24px;
  grid-auto-rows: -webkit-max-content;
  grid-auto-rows: max-content;
  min-height: 300px
}

.step-show__step-disabled>img {
  width: 175px;
  height: 130px;
  grid-area: 1/2/3
}

.step-show__step-disabled>h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: .25px
}

.step-show__step-disabled>p {
  font-size: 16px;
  line-height: 23px
}

.step-show__step-disabled a {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.step-show__step-deprecated {
  min-height: 200px
}

.step-show__step-deprecated-stub {
  display: grid;
  grid-gap: 24px;
  grid-auto-rows: -webkit-max-content;
  grid-auto-rows: max-content;
  padding: 16px 16px 24px;
  background-color: #f6f6f6;
  margin: 16px 0
}

.step-show__step-deprecated-stub>img {
  width: 175px;
  height: 130px;
  grid-area: 1/1/3/1
}

.course-edit-info__aside-panel a::after,
.step-show__deprecated-warning-text a::after {
  top: -.125em;
  height: var(--external-link-icon-size, .5em);
  vertical-align: var(--external-link-valign, middle);
  -webkit-mask-image: url(/static/frontend/common_icons/external.svg);
  mask-image: url(/static/frontend/common_icons/external.svg);
  -webkit-mask-size: 100%;
  mask-size: 100%
}

.step-show__step-deprecated-stub>h1 {
  margin: 0;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .15px;
  grid-area: 1/2
}

.step-show__step-deprecated-stub>p {
  font-size: 16px;
  line-height: 23px;
  grid-area: 2/2
}

.step-show__step-deprecated-stub a {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.step-show__step-deprecated-stub .button:not(.st-button_style_none) {
  padding: 9px 24px;
  margin-top: 24px
}

button:not(.st-button_style_none).step-show__panel-details-btn {
  margin-left: 5px
}

.step-show__disabled-warning-text a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.step-show__deprecated-warning-text a {
  white-space: nowrap
}

.step-show__deprecated-warning-text a::after {
  display: inline-block;
  margin: 0 0 0 var(--external-link-icon-offset, 3px);
  position: relative;
  width: var(--external-link-icon-size, .5em);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--external-link-icon-color, #1466C6)
}

.step-show__disabled-warning-details a {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

@media (max-width:768px) {
  .step-show__step-disabled {
    grid-gap: 16px
  }

  .step-show__step-disabled>img {
    margin: 16px 0;
    width: 150px;
    height: 112px;
    grid-area: 1/1;
    justify-self: center
  }

  .step-show__step-disabled>h1 {
    font-size: 20px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: .15px
  }
}

.submission-show {
  position: relative
}

.submission-show[data-theme=default] {
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ccc
}

.submission-show[data-theme=default] *+.submission-show__content {
  border-top: 1px solid #eaeaea
}

.submission-show[data-theme=default][data-status=wrong] *+.submission-show__content {
  border-top-color: #d41f1f
}

.submission-show[data-theme=default][data-status=settled] *+.submission-show__content {
  border-top-color: #6e7ed9
}

.submission-show[data-theme=review] .submission-show__title {
  padding: 10px 0
}

.submission-show[data-theme=review] .submission-show__content {
  border-radius: 6px;
  border: 1px solid #ccc
}

.submission-show__title {
  display: flex;
  padding: 10px 16px
}

.submission-show__submission-hint {
  margin: 0;
  padding: 16px;
  background: #fcfcfc;
  color: #222;
  font-size: 12px
}

.submission-show__status,
.submission-show__title-text:not(:last-child),
.submissions-table__filter-status-ico,
.submissions-table__submission-status-ico {
  margin-right: 6px
}

.submission-show__submission-hint .smart-hints__hint {
  height: 54px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: .1px
}

.submission-show__content {
  margin-top: 0;
  padding: 16px;
  font-size: 14px
}

.submission-show__content code {
  padding: 0
}

.submission-show__content textarea {
  width: 100%
}

.submission-show__title-text {
  color: #222;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .15px
}

.submission-show__title-code-lang {
  margin-left: auto;
  color: #777;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .15px;
  white-space: nowrap
}

.submission-show__status {
  display: inline-flex
}

.submission-show__status .svg-icon {
  display: flex
}

.submission-show__status .svg-icon,
.submission-show__status .svg-icon svg {
  width: 15px;
  height: 15px
}

.submission-show__status[data-status=settled] .svg-icon {
  color: #6e7ed9
}

.submission-show__submission [data-submission-view][data-type=number-quiz] .number-quiz__input {
  width: 100%;
  margin: 0
}

.submission-show__submission [data-submission-view][data-type=string-quiz] textarea {
  border: none;
  background: inherit;
  padding: 0;
  margin: 0;
  color: #2b2b2b
}

.submission-show__submission [data-submission-view][data-type=free-answer-quiz] .rich-text-viewer {
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.29;
  font-size: 14px
}

.submission-show__submission [data-submission-view][data-type=free-answer-quiz] .rich-text-viewer p {
  margin: .4em 0
}

.review-detail__rubric-text p:last-child,
.submission-show__submission [data-submission-view][data-type=free-answer-quiz] .rich-text-viewer p:last-child {
  margin-bottom: 0
}

.submission-show__submission [data-submission-view][data-type=free-answer-quiz] .rich-text-viewer p:first-child {
  margin-top: 0
}

.submission-show__submission [data-submission-view][data-type=free-answer-quiz] .rich-text-viewer code {
  background-color: #fff
}

.submission-show-deprecated {
  display: flex;
  gap: 32px;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .15px
}

.submission-show-deprecated>img {
  padding: 14px 0
}

.submission-selector__select {
  margin: 0;
  border: none;
  background-color: rgba(255, 255, 255, .4);
  color: #5e5e5e;
  font-size: 14px;
  border-radius: 10px
}

.submission-selector__select[data-status=correct] {
  color: #167116
}

.submission-selector__select[data-status=wrong] {
  color: #d41f1f
}

.submission-selector__select:focus,
.submission-selector__select:hover {
  background-color: rgba(255, 255, 255, .7)
}

.submission-selector__plain-text {
  font-weight: 400;
  padding: .24em .6em;
  white-space: nowrap;
  line-height: 2em
}

.submission-selector__label {
  margin: 0 .5em 0 0;
  color: #222
}

.sortable-group,
.sortable-list {
  list-style: none
}

.sortable-item {
  position: relative;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent
}

.sortable-item.is-dragging .sortable-item__inner-box {
  z-index: 1;
  box-shadow: 0 0 15px grey;
  background: #fff
}

.sortable-item.sortable-item__insert-after {
  border-bottom: 3px solid #000
}

.sortable-item.sortable-item__insert-before {
  border-top: 3px solid #000
}

.sortable-item__extracted .sortable-item__inner-box {
  background-color: #fff;
  opacity: .7;
  border-color: #000
}

.sortable-item__arrow-down,
.sortable-item__arrow-up {
  cursor: pointer;
  width: 2em;
  color: #a5a5a5;
  float: right
}

.sortable-item__arrow-down:focus,
.sortable-item__arrow-down:hover,
.sortable-item__arrow-up:focus,
.sortable-item__arrow-up:hover {
  color: #000;
  outline: 0
}

.sortable-item__arrow-down svg,
.sortable-item__arrow-up svg {
  width: 16px;
  height: 16px
}

.sortable-item:first-child .sortable-item__arrow-up,
.sortable-item:last-child .sortable-item__arrow-down {
  color: #a5a5a5;
  pointer-events: none;
  cursor: move;
  opacity: .2
}

.sortable-item [draggable=true],
.sortable-item[draggable=true] {
  cursor: move
}

.sortable-item svg {
  vertical-align: middle
}

.sortable-item__control {
  margin-top: 1.3em
}

.sortable-item__dots {
  float: left
}

.sortable-item__dots svg {
  width: 10px;
  height: 14px
}

.sortable-item__remove {
  float: right;
  cursor: pointer
}

.sortable-item__remove svg {
  width: 16px;
  height: 16px
}

.sortable-item__text {
  margin-left: 1em;
  word-wrap: break-word
}

.sortable-item__input-container input.text {
  border: none
}

.sortable-item__inner-box {
  border-radius: 3px;
  border: 1px solid #a5a5a5;
  color: #000;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: .8em;
  transition: box-shadow .3s
}

.sortable-item__inner-box.sortable-item__inner-box_error {
  background: #e7c4f5;
  border-color: #90d
}

.code-editor[data-disabled] .CodeMirror,
.code-editor__textarea {
  background-color: #f5f5f5
}

.sortable-item__inner-box .svg-icon.dragndrop_icon svg {
  margin-top: -3px;
  color: #a5a5a5
}

.sortable-item__inner-box.sortable-item__small-box {
  padding: 0 .8em
}

.sortable-item__inner-box--fl {
  display: flex
}

.code-editor[data-loading] {
  cursor: progress
}

.code-editor__textarea {
  height: auto;
  width: 100%;
  padding: 4px 8px;
  margin: 0;
  resize: none;
  cursor: progress
}

.code-editor__patch.marker_replace {
  background-color: #f1c40f
}

.code-editor__patch.focus_replace {
  box-shadow: 0 0 0 0 rgba(241, 196, 15, .7);
  -webkit-animation: replace-pulse 1.25s infinite cubic-bezier(.66, 0, 0, 1);
  animation: replace-pulse 1.25s infinite cubic-bezier(.66, 0, 0, 1)
}

.code-editor__patch.marker_insert {
  background-color: #2ecc71
}

.code-editor__patch.focus_insert {
  box-shadow: 0 0 0 0 rgba(46, 204, 113, .7);
  -webkit-animation: insert-pulse 1.25s infinite cubic-bezier(.66, 0, 0, 1);
  animation: insert-pulse 1.25s infinite cubic-bezier(.66, 0, 0, 1)
}

.code-editor__patch.marker_delete {
  background-color: #ff9989
}

.code-editor__patch.focus_delete {
  box-shadow: 0 0 0 0 rgba(255, 153, 137, .7);
  -webkit-animation: insert-pulse 1.25s infinite cubic-bezier(.66, 0, 0, 1);
  animation: insert-pulse 1.25s infinite cubic-bezier(.66, 0, 0, 1)
}

.code-style {
  width: 15px
}

.code-style-marker {
  cursor: pointer;
  display: inline-block;
  width: 13px;
  height: 19px;
  background: url(/static/frontend/lamp.svg) center center no-repeat;
  background-size: contain
}

.CodeMirror,
.code-editor__textarea {
  font-size: 14px;
  line-height: 1.5;
  border: 2px solid #ccc
}

.CodeMirror-tooltip {
  background-color: #ffeec2;
  border: 1px solid rgba(243, 171, 52, .5);
  border-radius: 4px;
  color: #000;
  font-size: 12px;
  overflow: hidden;
  padding: 6px;
  position: fixed;
  z-index: 100;
  max-width: 600px;
  opacity: 0;
  transition: opacity .4s;
  top: 0;
  box-shadow: 0 4px 10px rgba(204, 204, 204, .7)
}

.CodeMirror-tooltip .smart-hints {
  margin-top: 6px
}

.CodeMirror-tooltip .smart-hints:first-child {
  margin-top: 0
}

.CodeMirror-tooltip .smart-hints__hint {
  height: auto
}

.CodeMirror-tooltip .smart-hints__hint .smart-hints__line-number {
  color: #d3d3d3;
  margin-right: .5em
}

.CodeMirror-tooltip .smart-hints__hint .smart-hints__code {
  color: #fc0;
  margin-right: .5em
}

.CodeMirror-tooltip .smart-hints__hint .smart-hints__line {
  color: #f08080
}

@-webkit-keyframes replace-pulse {
  to {
    box-shadow: 0 0 0 7px rgba(241, 196, 15, 0)
  }
}

@keyframes replace-pulse {
  to {
    box-shadow: 0 0 0 7px rgba(241, 196, 15, 0)
  }
}

@-webkit-keyframes insert-pulse {
  to {
    box-shadow: 0 0 0 7px rgba(46, 204, 113, 0)
  }
}

@keyframes insert-pulse {
  to {
    box-shadow: 0 0 0 7px rgba(46, 204, 113, 0)
  }
}

.highlight-code {
  font-size: 14px
}

.code-runner_panel {
  background: #eee;
  padding: .5em;
  border: 2px solid #ccc
}

.code-runner_running .code-runner__hints {
  opacity: .5
}

.code-runner__block {
  display: flex;
  flex-direction: row;
  align-items: flex-start
}

.code-runner__footer {
  margin-top: .3em
}

.code-runner__hints .smart-hints {
  margin: 0
}

.code-runner__input {
  margin: 0;
  line-height: 1.1em;
  min-height: 58px;
  resize: none
}

.button:not(.st-button_style_none).secondary.code-runner__button {
  margin-left: .5em
}

.cost-info__section {
  display: inline-block
}

.cost-info__section[data-section-name=desc] {
  display: block;
  margin-top: .2em
}

.cost-info__section[data-section-name=desc][data-is-folded] {
  display: none
}

.cost-info__section time,
.cost-info__text-segment {
  display: inline-block
}

.cost-info__section span[data-is-accented] {
  font-weight: 500
}

.cost-info__section span[data-is-warn] {
  color: #3e50cb
}

.cost-info__section span[data-is-danger] {
  color: #d41f1f
}

.cost-info__section time:hover {
  color: #000;
  cursor: default
}

.cost-info__section .tooltip {
  font-size: inherit;
  line-height: 1.4;
  text-align: center
}

[data-section-name=desc]>.cost-info__text-segment {
  display: block
}

.cost-info__desc-toggler.st-button_style_none {
  display: inline-block;
  border-bottom: 1px dashed #5e5e5e;
  cursor: pointer;
  padding: 0
}

.cost-info__desc-toggler.st-button_style_none:focus,
.cost-info__desc-toggler.st-button_style_none:hover {
  border-color: transparent;
  color: #1466C6
}

.platform-news .platform-news__theme {
  margin-top: 20px
}

.platform-news .platform-news__date {
  font-weight: 700;
  margin: 20px 0
}

.platform-news .platform-news__theme-text {
  color: #5e5e5e
}

.review-detail__main {
  align-items: flex-start
}

.review-detail__description {
  padding: 0 1rem 2em
}

.review-detail__body {
  padding: 0 1rem 2em;
  background: #f3f4f6
}

.review-detail__title {
  font-size: 24px;
  margin-top: .5em
}

.review-detail__rubric-text p:first-child,
.review-show__rubric-text p:first-child {
  margin-top: 0
}

.review-detail__title+.review-detail__section {
  padding-top: 0
}

.review-detail__section {
  border-bottom: 2px solid #ddd;
  padding: 1em 0;
  --rich-text-editor-border-radius: 4px
}

.review-detail__score-text {
  resize: none
}

.review-detail__section_actions {
  padding-bottom: 0;
  border-bottom: inherit
}

.review-detail__section_actions .button+.button,
.review-detail__section_actions .button+button,
.review-detail__section_actions button+.button,
.review-detail__section_actions button+button {
  margin-left: 8px
}

.review-detail__section-title {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  padding: .2em 0 .5em
}

.review-detail__section-title.review-detail__section-title_with-actions {
  display: flex;
  justify-content: space-between;
  flex-direction: row
}

.review-detail__section-title.review-detail__section-title_folded {
  padding-bottom: 0
}

.review-detail__section-title.review-detail__section-title_sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #fff
}

.review-detail__section-title-action {
  color: #999;
  cursor: pointer;
  outline: 0 !important;
  border-radius: 5px
}

.review-detail__section-title-action:focus {
  color: #222;
  background-color: #eee
}

.review-detail__section-title-action .svg-icon,
.review-detail__section-title-action .svg-icon svg {
  height: .8em;
  width: .8em
}

.review-detail__section-title-bolder {
  font-weight: 700
}

.review-detail__terms {
  margin: 0
}

.review-detail__terms dt {
  display: inline-block;
  font-weight: 400
}

.review-detail__learner,
.review-detail__step-name,
.review-detail__strategy,
.review-detail__total-score-value {
  font-weight: 700
}

.review-detail__terms dd {
  display: inline
}

.review-detail__terms dd:after {
  display: block
}

.review-detail__strategy {
  font-size: 20px
}

.review-detail__rubric-text {
  font-size: 14px
}

.review-detail__dummy {
  height: 20px
}

.review-detail__dummy+.review-detail__section {
  padding-top: 0
}

.review-detail__score {
  margin-bottom: 1em
}

.review-detail__submission-info {
  display: inline-flex
}

.review-detail__link {
  text-decoration: underline
}

.review-detail__link:active,
.review-detail__link:focus,
.review-detail__link:hover {
  text-decoration: none
}

.review-detail__form {
  margin: 0
}

.review-detail__criteria {
  font-size: 14px;
  margin: 0 0 1em
}

body[data-route="reviews.detail"] .page-footer {
  display: none
}

@media (min-width:768px) {
  .review-detail__sticky-block {
    position: -webkit-sticky;
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow: auto
  }

  .review-detail__dummy {
    height: 50px
  }
}

@media (min-width:1171px) {
  .review-detail__description {
    padding-left: 0
  }
}

.review-show__content {
  padding: 20px 24px
}

.review-show__column:first-child .review-show__content {
  padding-left: 16px
}

.review-show__description {
  padding-bottom: 2em
}

.review-show__body {
  background: #f3f4f6
}

.review-show__section {
  padding: .8em 0
}

.review-show__section:first-child {
  padding-top: 0
}

.review-show__section[data-type=learner] {
  padding-bottom: 0
}

.review-show__top-info {
  display: flex;
  align-items: center
}

.review-show__section-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .15px;
  margin: 0;
  padding: .2em 0 .5em
}

.review-show__section-title[data-required]::after {
  content: "*";
  margin-left: 1px;
  color: #d41f1f
}

.review-show__rubric-text {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px
}

.review-show__rubric-text p:last-child {
  margin-bottom: 0
}

.review-show__rubric-score {
  display: flex;
  font-size: 12px;
  margin: .6em 0
}

.review-show__rubric-comment,
.review-show__rubric-comment-textarea {
  background-color: rgba(255, 255, 255, .75);
  border-radius: 4px;
  font-size: 14px;
  min-height: 2.6em
}

.review-show__rubric-comment-textarea.st-input,
.review-show__rubric-comment.st-input {
  margin: 0
}

.review-show__rubric-comment-textarea {
  resize: none
}

.review-show__rubric-comment {
  padding: .75em .85em;
  word-wrap: break-word;
  word-break: break-word
}

.review-show__total-score {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: .15px
}

.review-show__learner {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .15px
}

.review-show__learner-avatar {
  margin-right: 12px
}

.review-show__learner-info {
  flex: 1
}

.review-show__learner-submission {
  display: flex;
  flex-direction: row
}

.review-show__learner-submission[data-unknown-user] {
  flex-direction: column
}

.review-show__learner-name+.review-show__learner-submission {
  margin-top: .4em
}

.review-show__submission .submission-show__hints {
  display: none
}

.review-show__submission .submission-show__hints+.submission-show__content {
  margin-top: 0
}

.review-show__submission .free-answer__rich-text-viewer,
.review-show__submission .free-answer__textarea-disabled,
.review-show__submission input.number-quiz__input,
.review-show__submission textarea.string-quiz__textarea {
  margin: 0;
  padding: 0;
  height: auto;
  width: 100%;
  border: none;
  background: 0 0;
  font-size: 14px;
  color: inherit;
  cursor: text
}

.review-show__submission-date {
  font-weight: 400
}

.review-show__edit-action,
.review-show__verified-status {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: .15px
}

[data-unknown-user] .review-show__submission-date {
  margin-top: .4em
}

.review-show__edit-action-btn.st-button_style_none {
  display: inline-flex;
  align-items: center;
  color: #4485ed
}

.review-show__edit-action-btn.st-button_style_none:hover {
  color: #1466C6
}

.review-show__edit-action-btn.st-button_style_none:active,
.review-show__edit-action-btn.st-button_style_none:visited {
  color: #4485ed
}

.review-show__edit-action-btn.st-button_style_none .svg-icon {
  margin-right: .5em
}

.review-show__edit-action-btn.st-button_style_none .svg-icon,
.review-show__edit-action-btn.st-button_style_none .svg-icon svg {
  width: 1.2em;
  height: 1.2em
}

.review-show__actions {
  display: flex;
  align-items: center
}

.review-show__action {
  padding: 9px 24px !important
}

.review-show__action+.review-show__action {
  margin-left: 1em
}

.review-show__action+.review-show__actions-info {
  margin-left: 2em
}

.review-show__action .svg-icon {
  display: inline-block;
  margin-right: 2px
}

.review-show__action .svg-icon,
.review-show__action .svg-icon svg {
  width: 14px;
  height: 14px
}

.review-show__verified-status {
  display: inline-flex;
  align-items: center
}

.review-show__verified-status .svg-icon {
  margin-right: .5em
}

.review-show__verified-status .svg-icon,
.review-show__verified-status .svg-icon svg {
  width: 1.4em;
  height: 1.4em
}

.review-show-editor__action-btn+.review-show-editor__action-btn {
  margin-left: 10px
}

.review-show-editor__action-btn:not(.st-button_style_none) {
  padding: 9px 24px
}

.review-show-editor__action-btn:not(.st-button_style_none) .svg-icon {
  display: inline-block;
  margin-right: 2px;
  margin-left: -.5em
}

.reviews-pagination__add-label .svg-icon,
a.reviews-pagination__add-btn .svg-icon {
  margin-left: -6px;
  margin-right: 10px
}

.reviews-pagination__list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: .5em 0
}

.reviews-pagination__item {
  width: 20%;
  border-left: 1px solid #ccc;
  padding: 0 6px;
  margin-bottom: .3em
}

.reviews-pagination__add-btn,
.reviews-pagination__add-label,
.reviews-pagination__link {
  display: flex;
  align-items: center;
  line-height: 1.14;
  height: 32px;
  letter-spacing: .15px;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  -webkit-font-smoothing: antialiased
}

.reviews-pagination__add-label .svg-icon,
.reviews-pagination__add-label .svg-icon svg,
a.reviews-pagination__add-btn .svg-icon,
a.reviews-pagination__add-btn .svg-icon svg {
  height: 16px;
  width: 16px
}

.reviews-pagination__link,
.reviews-pagination__link.active,
.reviews-pagination__link:hover,
.reviews-pagination__link:visited {
  color: #222;
  text-decoration: none
}

.reviews-pagination__link.active {
  background-color: #f3f4f6
}

.reviews-pagination__link:hover {
  background-color: #E9EBFA;
  border-color: #9ca6e6
}

.reviews-pagination__add-label {
  background-color: #f3f4f6;
  padding-right: 16px;
  padding-left: 16px
}

a.reviews-pagination__add-btn {
  padding-right: 16px;
  padding-left: 16px;
  border: 1px solid #54ad54;
  color: #288b28;
  text-decoration: none
}

a.reviews-pagination__add-btn:hover {
  border-color: #288b28;
  background-color: rgba(172, 209, 172, .5)
}

.reviews-pagination__score {
  display: inline-flex;
  margin-left: .5em
}

.reviews-pagination__score-value[data-empty] {
  color: #d41f1f
}

.reviews-pagination__status {
  display: inline-flex;
  margin-left: 12px
}

.reviews-pagination__status .svg-icon,
.reviews-pagination__status .svg-icon svg {
  width: 1.4em;
  height: 1.4em
}

.reviews-pagination__pagination {
  display: flex;
  padding: 1em 0;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: .15px
}

.reviews-pagination__pagination-current {
  flex: 1;
  text-align: center;
  font-weight: 500;
  letter-spacing: .15px
}

.reviews-pagination__pagination-next {
  color: #4485ed;
  font-weight: 500;
  letter-spacing: .15px
}

.reviews-pagination__pagination-next:hover {
  color: #1466C6
}

.reviews-pagination__pagination-next:active,
.reviews-pagination__pagination-next:visited {
  color: #4485ed
}

.reviews-pagination__pagination-next[aria-disabled=true] {
  color: rgba(68, 133, 237, .5)
}

@media (min-width:768px) {
  .reviews-pagination__item:nth-child(5n+1) {
    padding-left: 0;
    border-left: none
  }

  .reviews-pagination__item:nth-child(5n+1) .reviews-pagination__link {
    padding-left: 16px
  }

  .reviews-pagination__item:nth-child(5n) {
    padding-right: 0
  }

  .reviews-pagination__item:nth-child(5n) .reviews-pagination__link {
    padding-right: 24px
  }
}

@media (max-width:768px) {
  .reviews-pagination__list {
    flex-direction: column
  }

  .reviews-pagination__item {
    width: 100%;
    border-left: none
  }

  .reviews-pagination__add-btn,
  .reviews-pagination__add-label {
    margin: 0 6px
  }
}

.klass-klass-edit .klass-edit__wrapper {
  padding-top: 70px
}

.klass-klass-edit .klass-edit__wrapper textarea {
  resize: none
}

.klass-klass-edit .klass-edit__wrapper .the-form-field {
  margin: 0
}

.klass-klass-edit .klass-edit__header {
  font-size: 24px;
  color: #000
}

.klass-klass-edit .klass-edit__title-hint-wrapper {
  float: left
}

.klass-klass-edit .klass-edit__hint {
  font-size: 13px;
  color: #b7b7b7
}

.klass-klass-join-subpage .klass__wrapper {
  padding-top: 70px;
  padding-bottom: 20px
}

.klass-klass-join-subpage .klass__course-link {
  font-size: 18px
}

.klass-klass-join-subpage .klass__course-link:hover {
  text-decoration: underline
}

.klass-klass-join-subpage .klass__descr {
  margin: 16px 0
}

.klass-klass-join-subpage .klass__block {
  margin-bottom: 30px
}

.klass-klass-join-subpage .klass__alert {
  margin-bottom: 0;
  padding: 10px;
  border-radius: 3px;
  background-color: #ffeec2;
  display: flex
}

.klass-assistants-list {
  margin-top: 24px
}

.submissions-page__title {
  margin: 28px 0 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .15px
}

.submissions-page__subtitle-row,
.submissions-table__user-avatar .user-avatar__name {
  line-height: 1.43;
  letter-spacing: .25px
}

.submissions-page__title a {
  color: inherit;
  text-decoration: underline
}

.submissions-page__title a:focus,
.submissions-page__title a:hover {
  color: inherit
}

.submissions-page__subtitle-row {
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: -5px
}

.submissions-page__navigation-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px
}

.submissions-page__search {
  width: 430px
}

.submissions-page__table {
  width: 100%
}

.submissions-table__user-avatar .user-avatar__link {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.submissions-table__user-avatar .user-avatar__img {
  border-radius: 8px
}

.submissions-table__user-avatar:hover .user-avatar__name {
  text-decoration: none
}

.submissions-table__extra-actions-place {
  position: relative;
  float: left;
  opacity: 0;
  transition: opacity .3s
}

tr:focus-within .submissions-table__extra-actions-place,
tr:hover .submissions-table__extra-actions-place {
  opacity: 1;
  transition: none
}

.submissions-table__extra-actions {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 56px;
  top: -9px;
  right: 12px;
  padding: 9px 0
}

.submissions-table__extra-action {
  width: 26px;
  height: 30px;
  padding: 6px 4px;
  color: #999;
  transition: color .5s
}

.submissions-table__extra-action:focus,
.submissions-table__extra-action:hover {
  color: #222
}

.submissions-table__extra-action+.submissions-table__extra-action {
  margin-left: 4px
}

.submissions-table__extra-action .svg-icon {
  display: inline-flex
}

.submissions-table__extra-action .svg-icon,
.submissions-table__extra-action .svg-icon svg {
  width: 18px;
  height: 18px
}

.submissions-page__step-paging {
  display: flex;
  height: 32px;
  z-index: 2
}

button.submissions-page__step-paging-next,
button.submissions-page__step-paging-prev {
  border: 1px solid #ccc;
  padding: 7px 8px;
  font-size: 14px;
  line-height: 1.14;
  outline: 0;
  height: 100%;
  position: relative;
  z-index: 0
}

button.submissions-page__step-paging-next:focus,
button.submissions-page__step-paging-next:hover,
button.submissions-page__step-paging-prev:focus,
button.submissions-page__step-paging-prev:hover {
  z-index: 2
}

button.submissions-page__step-paging-next:focus:not([disabled]),
button.submissions-page__step-paging-next:hover:not([disabled]),
button.submissions-page__step-paging-prev:focus:not([disabled]),
button.submissions-page__step-paging-prev:hover:not([disabled]) {
  border-color: #999;
  background-color: #f3f4f6
}

button.submissions-page__step-paging-next .svg-icon,
button.submissions-page__step-paging-next svg,
button.submissions-page__step-paging-prev .svg-icon,
button.submissions-page__step-paging-prev svg {
  width: 16px;
  height: 16px
}

button.submissions-page__step-paging-prev {
  right: -1px;
  border-radius: 4px 0 0 4px
}

button.submissions-page__step-paging-next {
  left: -1px;
  border-radius: 0 4px 4px 0
}

.submissions-page__step-select-box {
  height: 100%;
  position: relative;
  z-index: 1
}

.submissions-page__step-select-box .drop-down,
.submissions-page__step-select-box .drop-down-toggler,
.submissions-page__step-select-box .select-box__toggle-btn {
  height: 100%
}

.submissions-page__step-select-box-item {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 1;
  padding: 7px 11px;
  border: 1px solid #ccc;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .15px
}

.submissions-page__empty-list {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px
}

.submissions-table {
  border: none
}

.submissions-table thead {
  background: 0 0
}

.submissions-table tbody tr {
  transition: all .3s
}

.submissions-table tbody tr:hover {
  box-shadow: 0 14px 14px -8px #E9EBFA, 0 4px 2px -2px #E9EBFA
}

.submissions-table th {
  background-color: #f3f4f6;
  color: #5e5e5e;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .15px;
  padding: 5px 12px;
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-height);
  z-index: 1
}

.submissions-table th[data-type=username] {
  width: 240px
}

.submissions-table th[data-type=status] {
  width: 104px
}

.submissions-table th[data-type=date],
[data-name=name] .promocode-editor__input {
  width: 136px
}

.submissions-table th[data-type=score] {
  width: 92px
}

.submissions-table th[data-type=review-badge] {
  width: 48px;
  padding-right: 4px
}

.submissions-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #E9EBFA;
  -webkit-font-smoothing: antialiased;
  height: 52px
}

.submissions-table td[data-is-empty] {
  border-bottom: none
}

.submissions-table td[data-type=review-badge] {
  padding-right: 4px
}

.submissions-table tr:nth-of-type(even) {
  background-color: transparent
}

.submissions-table .dots-loader {
  margin-left: 0;
  color: #5e5e5e
}

.submissions-table__filter {
  margin-left: -11px
}

.submissions-table__filter:not([data-value=""]) {
  color: #222
}

.submissions-table__filter-caption,
.submissions-table__sort-caption {
  display: flex;
  justify-content: space-between
}

.submissions-table__filter-caption .svg-icon,
.submissions-table__sort-caption .svg-icon {
  margin-left: 8px
}

.submissions-table__filter-caption .svg-icon,
.submissions-table__filter-caption .svg-icon svg,
.submissions-table__sort-caption .svg-icon,
.submissions-table__sort-caption .svg-icon svg {
  width: 16px;
  height: 16px
}

.submissions-table__filter-caption span,
.submissions-table__sort-caption span {
  white-space: nowrap
}

button.submissions-table__sort {
  display: block;
  padding: 7px 11px;
  border-radius: 4px;
  margin-left: -11px;
  border: none;
  background-image: none;
  background-color: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .15px;
  text-align: left;
  outline: 0;
  transition: all .2s
}

button.submissions-table__sort:focus,
button.submissions-table__sort:hover,
button.submissions-table__sort[data-active] {
  background-color: #fff;
  color: #222
}

button.submissions-table__sort[data-is-active] {
  color: #222
}

.submissions-table__submission-status {
  display: flex;
  align-items: baseline
}

a.submissions-table__submission-status {
  line-height: 1.29;
  letter-spacing: .25px
}

.submission-status-ico {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%
}

.submission-status-ico[data-status=correct] {
  border: none;
  background-color: #6c6
}

.submission-status-ico[data-status=correct][data-cant-review] {
  border: 1px solid #6c6;
  background-color: #fff
}

.submission-status-ico[data-status=wrong] {
  border: none;
  background-color: #ff7965;
  position: relative
}

.submission-status-ico[data-status=wrong]::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 1px;
  background-color: #fff;
  transform: translateX(-50%) translateY(-50%)
}

.submission-status-ico[data-status=evaluation] {
  border: 1px solid #ccc;
  background-color: #fff
}

.submission-status-ico[data-status=all] {
  visibility: hidden
}

.submissions-table__review-badge {
  display: inline-block;
  background: #9ca6e6;
  padding: .3em .6em;
  border-radius: 1em;
  color: #fff;
  line-height: 0;
  vertical-align: middle
}

.submissions-table__review-badge .svg-icon,
.submissions-table__review-badge .svg-icon svg {
  width: 1em;
  height: 1em
}

.submissions-table__review-badge .svg-icon.pause_icon svg {
  width: .75em
}

a.submissions-table__review-badge:hover {
  color: #fff;
  background-color: rgba(156, 166, 230, .7)
}

a.submissions-table__review-badge:active,
a.submissions-table__review-badge:visited {
  color: #fff
}

.submissions-table__review-status-help .svg-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: bottom;
  color: #a5a5a5
}

.submissions-table__review-status-help .svg-icon svg {
  width: 100%;
  height: 100%
}

.submissions-table__review-status-help:hover {
  opacity: 1 !important
}

.submissions-table__review-status-help:hover .svg-icon {
  color: #222
}

.submissions-table__review-status-tooltip {
  opacity: 1 !important;
  max-width: 400px;
  font-size: 12px
}

.submissions-table__action-tooltip {
  max-width: 400px;
  font-size: 12px;
  white-space: nowrap
}

@media (max-width:1170px) {
  .submissions-table__extra-actions-place {
    display: none
  }
}

.submission-modal .modal-dialog-top__close {
  top: 18px !important
}

.submission-modal__actions {
  padding: 17px 0 0
}

.submission-modal__top {
  font-size: 24px
}

.submission-modal__arrows {
  display: flex;
  align-items: center;
  padding: 10px 0
}

.submission-modal__arrows .button {
  border-radius: 5px;
  font-size: .75em;
  padding: .75em 1em;
  color: #288b28 !important;
  border-color: #54ad54 !important
}

.submission-modal__arrows .button .svg-icon,
.submission-modal__arrows .button .svg-icon svg {
  height: .8em;
  width: .8em
}

.submission-modal__arrows .button.disabled {
  opacity: .4
}

.submission-modal__info {
  flex: 1;
  margin: 0 auto;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  font-size: 14px
}

.submission-modal__info-userpic {
  background: url(/static/frontend/menu_unknown.svg) center no-repeat;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  float: left
}

.submission-modal__info-userpic .user-avatar__img {
  border-radius: 8px
}

.submission-modal__info-block {
  display: flex;
  flex-direction: column
}

.submission-modal__info-username {
  white-space: nowrap;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .15px
}

.submission-modal__info-date {
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px
}

.submission-modal__review-another {
  background-color: #e9ebfa;
  border-radius: 4px;
  padding: 1em
}

.submission-tip {
  margin: 10px 0
}

.submission-tip .submission-tip__hint-button {
  margin-right: 10px
}

.certificate-info__points {
  margin: 0 0 4px;
  display: flex;
  justify-content: space-between
}

.certificate-info__points .certificate-info__points-item {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.certificate-info__points .certificate-info__points-item h1 {
  margin-bottom: .1em
}

.certificate-info__title {
  margin-top: 20px
}

.certificate-info__issue {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
  margin-bottom: 2em
}

.certificate-info__issue .certificate-info__issue-option {
  width: 45%
}

.certificate-info__auto-issue-wrapper {
  padding: 2px 16px;
  border-radius: 4px;
  border: 1px solid #3c3
}

.certificate-info__issue-text {
  margin-top: 2em
}

.cert-widget {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%
}

.cert-widget .cert-widget__clickable {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  text-decoration: none
}

.cert-widget .cert-widget__info {
  margin-left: 28px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.cert-widget .cert-widget__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: .17px;
  color: var(--theme-color-fg-primary);
  text-overflow: ellipsis;
  overflow: hidden
}

@media (max-width:1024px) {
  .cert-widget .cert-widget__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: .15px
  }
}

.cert-widget .cert-widget__details {
  margin-top: 8px;
  font-size: 14px;
  color: #777;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 20px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased
}

.cert-widget .cert-widget__icon svg {
  height: 27px;
  width: 34px;
  color: #75CE61
}

.cert-widget.cert-widget_type_distinction .cert-widget__icon svg {
  color: #EA9F30
}

.cert-widget .cert-widget__badge {
  display: inline-block;
  border-radius: 20px;
  background-color: #b7b7b7;
  font-size: 14px;
  color: #fff;
  height: 20px;
  padding: 0 5px
}

.cert-widget .cert-widget__menu-toggler {
  color: #b7b7b7;
  cursor: pointer;
  position: relative;
  top: -3px
}

.cert-widget .cert-widget__menu-toggler:focus,
.cert-widget .cert-widget__menu-toggler:hover {
  color: #999
}

.cert-widget .cert-widget__menu-toggler svg {
  width: 14px;
  height: 9px
}

.cert-widget+.cert-widget {
  margin-top: 30px
}

@media only screen and (max-width:768px) {
  .cert-widget .cert-widget__info {
    max-width: 60vw
  }
}

.leaders-list {
  min-width: 100%;
  border: none
}

.comment-widget-avatar .user-avatar__img,
.comment-widget-avatar .user-avatar__link,
.course-blacklist__tile-userpic .user-avatar__img_shape_square {
  border-radius: 8px
}

.leaders-list .user-avatar__img+.user-avatar__name {
  margin-left: 15px
}

.leaders-list-item {
  list-style: none
}

.leaders-list-item .leaders-stat {
  vertical-align: bottom;
  margin: 0
}

.leaders-list-item .svg-icon svg {
  width: 18px;
  height: 18px;
  margin-right: 2px
}

.leaders-list-item__rank-num {
  width: 3%
}

.leaders-list-item__user-avatar a {
  display: flex;
  align-items: center
}

.leaders-stat_icon svg {
  width: 15px;
  height: 15px;
  vertical-align: middle
}

.leaders-stat_icon.knowledge_icon {
  color: #6C6
}

.leaders-stat_icon.reputation_icon {
  color: #F93
}

.download-step[aria-disabled=true] {
  cursor: not-allowed;
  opacity: .6
}

.download-step[aria-disabled=true]>* {
  pointer-events: none
}

.file-reader {
  position: relative;
  cursor: pointer
}

.file-reader[aria-disabled=true] {
  cursor: not-allowed;
  opacity: .6
}

.file-reader__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: -1
}

.comment-widget-avatar {
  display: flex
}

.comment-widget-avatar__avatar-block {
  width: 35px;
  margin-right: 10px
}

.comment-widget-avatar__avatar {
  width: 35px
}

.comment-widget-avatar__main {
  flex: 1 100%;
  min-width: 0
}

.drag-and-replace .animated {
  transform: none !important;
  visibility: inherit !important
}

.course-grade-book-table__table {
  min-width: 62.5em;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  border: 1px solid #ddd
}

.course-grade-book-table__table thead tr {
  background-color: #f3f4f6;
  font-weight: 700
}

.course-grade-book-table__table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: inherit
}

.course-grade-book-table__table thead tr:first-child th:first-child {
  left: 1px;
  z-index: 3
}

.course-grade-book-table__table tbody tr:nth-child(even) {
  background-color: #fff
}

.course-grade-book-table__table tbody tr:nth-child(odd) {
  background-color: #f3f4f6
}

.course-grade-book-table__table tbody tr:nth-child(odd) .gradesheet-cell[data-is-passed] {
  background-color: #93de92
}

.course-grade-book-table__table tbody tr:nth-child(odd) .gradesheet-cell[data-is-passed]:hover {
  background-color: #5bbe5b
}

.course-grade-book-table__table tbody tr:hover .course-grade-book-table__score,
.course-grade-book-table__table tbody tr:hover .course-grade-book-table__user,
.course-grade-book-table__table tbody tr:hover .gradesheet-cell {
  border-top-color: #5bbe5b;
  border-bottom-color: #5bbe5b
}

.course-grade-book-table__table tbody tr:not(:hover):not(:focus-within) .course-grade-book-table__refresh-row {
  opacity: 0
}

.course-grade-book-table__table tbody tr td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 1px;
  z-index: 2;
  background-color: inherit;
  max-width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.course-grade-book-table__table tbody tr .course-grade-book-table__score,
.course-grade-book-table__table tbody tr .course-grade-book-table__user,
.course-grade-book-table__table tbody tr .gradesheet-cell {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent
}

.course-grade-book-table__table tbody td:nth-child(1),
.course-grade-book-table__table thead tr:first-child th:nth-child(1) {
  border-right: 1px solid #e4e4e4
}

.course-grade-book-table__table tbody td[data-index="0"],
.course-grade-book-table__table thead tr:first-child th:nth-child(n+3),
.course-grade-book-table__table thead tr:last-child th[data-index="0"] {
  border-left: 1px solid #e4e4e4
}

.course-grade-book-table__table thead tr:first-child th:nth-child(1),
.course-grade-book-table__table thead tr:first-child th:nth-child(2),
.course-grade-book-table__table thead tr:last-child th {
  border-bottom: 1px solid #e4e4e4
}

.course-grade-book-table__table a {
  --link-line-color: transparent
}

.course-grade-book-table__sortable-header-cell {
  position: relative;
  display: inline-block;
  white-space: nowrap
}

.course-grade-book-table__sortable-header-cell::before {
  display: inline-block;
  margin-right: 4px;
  width: 1em;
  height: 1em;
  background: url(/static/frontend/common_icons/sort-down.svg) no-repeat;
  vertical-align: top
}

.course-grade-book-table__sortable-header-cell::after {
  content: "▼";
  display: inline-block;
  margin-left: 4px;
  color: #999;
  transform: scaleY(.6);
  pointer-events: none
}

.course-grade-book-table__sortable-header-cell>select {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -6px;
  margin: 0;
  border: none;
  opacity: 0;
  cursor: pointer
}

.course-grade-book-table__score,
.course-grade-book-table__step-position-row th {
  text-align: center
}

.course-grade-book-table__max-cost-row {
  background-color: #f3f4f6 !important;
  font-weight: 700
}

.course-grade-book-table__max-cost-row td {
  text-align: center
}

.course-advanced-settings__toggler .ui-toggler__toggle,
.course-grade-book-table__max-cost-row td:first-child,
.course-grade-book-table__user-id {
  text-align: right
}

.course-grade-book-table__info-cell {
  white-space: nowrap
}

.course-grade-book-table__user {
  padding-right: 24px
}

.course-grade-book-table__user-id {
  display: inline-block;
  margin-right: 2em;
  color: #a5a5a5
}

.gradesheet-cell,
.loading-slider.expanding {
  text-align: center
}

button:not(.st-button_style_none).course-grade-book-table__refresh-row {
  position: absolute;
  right: 5px;
  margin: 0 0 0 5px;
  padding: 3px;
  height: 15px;
  width: 15px;
  vertical-align: bottom;
  background: url(/static/frontend/common_icons/refresh.svg) 50% no-repeat;
  background-size: contain;
  background-origin: content-box;
  border: none;
  opacity: .3;
  transform: scale(1.5);
  transition: .5s transform
}

.gradesheet-cell a,
.gradesheet-cell__badge,
.gradesheet-cell__link {
  display: inline-block;
  vertical-align: middle
}

button:not(.st-button_style_none).course-grade-book-table__refresh-row:focus,
button:not(.st-button_style_none).course-grade-book-table__refresh-row:hover {
  opacity: .8
}

button:not(.st-button_style_none).course-grade-book-table__refresh-row[disabled] {
  opacity: .5;
  transform: scale(1.5) rotate(45deg);
  outline: 0
}

.gradesheet-cell {
  padding: 0
}

.gradesheet-cell a {
  width: 100%
}

.gradesheet-cell[data-is-unsubmitted],
.gradesheet-cell[data-is-wrong] {
  color: #ccc
}

.gradesheet-cell:hover {
  color: #999;
  background-color: #ccc
}

.gradesheet-cell[data-is-await-instructor],
.gradesheet-cell[data-is-await-peer],
.gradesheet-cell[data-is-await-review],
.gradesheet-cell[data-is-await-user],
.gradesheet-cell[data-is-not-sent-review],
.gradesheet-cell[data-is-success] {
  background-color: #a5e5a5
}

.gradesheet-cell[data-is-await-instructor]:hover,
.gradesheet-cell[data-is-await-peer]:hover,
.gradesheet-cell[data-is-await-review]:hover,
.gradesheet-cell[data-is-await-user]:hover,
.gradesheet-cell[data-is-not-sent-review]:hover,
.gradesheet-cell[data-is-success]:hover {
  background-color: #5bbe5b
}

.gradesheet-cell .svg-icon,
.gradesheet-cell .svg-icon svg {
  width: 1em;
  height: 1em
}

.gradesheet-cell .svg-icon.pause_icon svg {
  width: .75em
}

.gradesheet-cell__badge {
  background: #222;
  padding: .3em .6em;
  border-radius: 1em;
  color: #fff;
  line-height: 0
}

.gradesheet-cell__link {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.gradesheet-cell__text {
  color: #222
}

button:not(.st-button_style_none).shortened-text__show-more {
  margin: 0 0 0 .1em;
  padding: 0;
  border: none;
  background: 0 0;
  color: #4485ed;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline
}

button:not(.st-button_style_none).shortened-text__show-more:hover {
  color: #1466C6
}

.promocode-editor__input.st-input {
  padding: 8px 12px;
  border-radius: 4px
}

.promocode-editor__input[type=number],
.promocode-editor__input[type=text] {
  margin-bottom: 0
}

.promocode-editor__input[type=number] {
  -moz-appearance: textfield
}

.promocode-editor__input[type=number]::-webkit-inner-spin-button,
.promocode-editor__input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

[data-name=discount] .promocode-editor__input {
  width: 124px
}

.promocode-editor__input.st-input-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  border-radius: 4px;
  margin: 0;
  font-size: 14px;
  padding: 0
}

.promocode-editor__input.st-input-wrapper>.st-input {
  padding: 8px 12px;
  width: 70px;
  height: 35px;
  margin: 0;
  border: none
}

.promocode-editor__input.st-input-wrapper .select-box {
  width: 52px
}

.promocode-editor__input.st-input-wrapper button.select-box__toggle-btn {
  height: 35px;
  border: none;
  background-color: #F6F6F6;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transition: background-color .2s
}

.promocode-editor__input.st-input-wrapper button.select-box__toggle-btn:focus,
.promocode-editor__input.st-input-wrapper button.select-box__toggle-btn:hover {
  background-color: #EAEAEA
}

.promocode-editor__input.st-input-wrapper button.select-box__toggle-btn[data-active] {
  background-color: #ccc
}

.promocode-editor__date-picker-input[type=text] {
  border-radius: 4px;
  width: 180px;
  padding: 8px 12px
}

.promocode-editor__table-form .the-form-field__caption {
  font-size: 12px;
  line-height: 1.17;
  letter-spacing: .4px;
  font-weight: 400;
  margin-bottom: 4px
}

[data-name=actions] .promocode-editor__submit {
  margin-top: 36px;
  padding: 6px 24px;
  height: 37px;
  width: 122px
}

.promocode-editor__promocode {
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: .25px
}

.promocode-editor__discount {
  padding-left: 12px
}

.promocode-editor__discount .format-percent>span[data-type=percent],
.promocode-editor__discount .format-price>span[data-type=currency] {
  color: #999;
  font-size: 14px
}

.promocode-editor__discount .format-percent {
  display: inline-flex
}

.promocode-editor__discount .format-percent>span[data-type=literal] {
  width: 2px
}

[data-noactive] .promocode-editor__date {
  color: #d41f1f
}

.promocode-editor__loading {
  width: 640px
}

.promocode-editor__table {
  border: none;
  width: 640px;
  margin: 0
}

.promocode-editor__table td,
.teach-students__list .users-list__item,
.user-revenue__thd-empty-row,
.user-revenue__thd-row,
.user-revenue__tm-empty-row,
.user-revenue__tm-row_month-end {
  border-bottom: 1px solid #E9EBFA
}

.promocode-editor__table thead {
  background: 0 0
}

.promocode-editor__table .promocode-editor__table-data tr {
  transition: all .3s
}

.promocode-editor__table .promocode-editor__table-data tr:hover {
  box-shadow: 0 14px 14px -8px #E9EBFA, 0 4px 2px -2px #E9EBFA
}

.promocode-editor__table td {
  padding: 12px 4px;
  -webkit-font-smoothing: antialiased
}

.promocode-editor__table td[data-name=actions] {
  padding-left: 12px
}

.promocode-editor__table td[data-name=discount] {
  width: 135px
}

.promocode-editor__table tr:nth-of-type(even) {
  background-color: transparent
}

.promocode-editor__table tr td:first-child {
  padding-left: 0
}

.promocode-editor__table tr td:last-child {
  padding-right: 0
}

.review-session__status-help-tip:focus .svg-icon,
.review-session__status-help-tip:hover .svg-icon,
.step-pin-icon[data-has-warn] .step-pin-icon__icon {
  opacity: .7
}

.promocode-editor__table tr[data-is-deleted] td {
  color: #d41f1f;
  background-color: rgba(212, 31, 31, .1);
  transition: all .3s
}

.promocode-editor__table .promocode-editor__table-form {
  margin-bottom: 1em
}

.promocode-editor__table .promocode-editor__table-form td {
  vertical-align: top;
  border-bottom: none
}

.promocode-editor__discount-toast {
  width: 640px;
  margin-top: .5em
}

.promocode-editor__promocode-extra {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center
}

.promocode-editor__action {
  margin-left: auto;
  display: flex
}

.promocode-editor__copy-btn {
  font-size: 20px
}

.promocode-editor__copy-btn button.st-button_style_none {
  color: #777
}

.promocode-editor__copy-btn button.st-button_style_none:hover {
  color: #222
}

.promocode-editor__menu-toggler {
  color: #999;
  transition: all .3s;
  display: inline-flex
}

.promocode-editor__menu-toggler.st-button_style_none {
  padding: 4px
}

.promocode-editor__menu-toggler:hover {
  color: #5e5e5e
}

.promocode-editor__menu-toggler .svg-icon,
.promocode-editor__menu-toggler .svg-icon svg {
  width: 16px;
  height: 16px
}

.promocode-editor__modal-subtitle {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .14px;
  margin-bottom: 1em
}

.promocode-editor__modal-date-actions button.btn-link {
  font-size: 14px;
  color: #4485ed;
  margin-right: 5px
}

.promocode-editor__modal-date-actions button.btn-link:hover {
  color: #1466C6
}

.promocode-editor__modal-date-picker-input[type=text] {
  width: 205px
}

.step-pin-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--step-pin-icon-size);
  height: var(--step-pin-icon-size)
}

.step-pin-icon__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-pin-icon-icon-size);
  height: var(--step-pin-icon-icon-size);
  color: var(--step-pin-icon-color)
}

.step-pin-icon__icon svg {
  width: 100%;
  height: 100%
}

.step-pin-icon__subicon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: var(--step-pin-icon-subicon-size);
  height: var(--step-pin-icon-subicon-size);
  color: var(--step-pin-icon-subicon-color)
}

.step-pin-icon__subicon svg {
  width: 100%;
  height: 100%
}

.course-settings-price-editor__form {
  margin: 0
}

.course-settings-price-editor__form>label {
  display: block;
  margin: 0 0 28px;
  color: inherit
}

.course-settings-price-editor__form>label>span:first-child {
  line-height: 32px
}

.course-settings-price-editor__form>label>.the-form__field {
  display: inline-block;
  margin: 0 0 0 12px;
  vertical-align: top
}

.course-settings-price-editor__form .the-form-field__footnote {
  color: #5e5e5e
}

.course-settings-price-editor__form .the-form-field__footnote,
.course-settings-price-editor__form .the-form-field__messages {
  position: absolute;
  left: 0;
  right: 0
}

.course-settings-price-editor__form>button:not(.st-button_style_none) {
  padding: 9px 24px
}

.course-settings-price-editor__form>button:not(.st-button_style_none)+button {
  margin-left: 10px
}

input.course-settings-price-editor__amount {
  height: 32px;
  min-width: 150px;
  font-size: inherit
}

.course-settings-price-editor__currency .menu {
  min-width: 0
}

.course-settings-price-editor__currency-value {
  font-size: 14px;
  padding: 0 3px
}

.course-settings-price-editor__submit-btn .format-price {
  font-weight: 500
}

.loading-slider {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: var(--z-loading-slider)
}

.loading-slider span {
  position: inherit;
  height: 2px;
  background-color: #6c6
}

.navbar__profile-toggler:hover .new-year-navbar-avatar,
.navbar__profile[data-expanded] .new-year-navbar-avatar,
html[data-whatintent=keyboard] .navbar__profile-toggler:focus .new-year-navbar-avatar {
  -webkit-clip-path: circle(175% at 100% 0);
  clip-path: circle(175% at 100% 0);
  visibility: visible
}

.new-year-navbar-avatar {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-clip-path: circle(0 at 100% 0);
  clip-path: circle(0 at 100% 0);
  visibility: hidden;
  transition-property: visibility, -webkit-clip-path;
  transition-property: clip-path, visibility;
  transition-property: clip-path, visibility, -webkit-clip-path;
  transition-duration: 550ms;
  transition-timing-function: ease-in-out;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background-color: #222;
  background-image: url(/static/frontend/new-year/2022/avatar_1.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%
}

.new-year-navbar-avatar[data-drawn]::after {
  content: "";
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  top: 22px;
  left: 29px;
  background-color: #df3827;
  border-radius: 50%
}

.news-editor__form .the-form-field .date-picker__input,
.news-editor__form .the-form-field .st-input,
.news-editor__form .the-form-field .st-input-wrapper {
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  height: 32px;
  margin: 0
}

.new-year-navbar-avatar[data-drawn="1"] {
  background-image: url(/static/frontend/new-year/2022/lucky_avatar_2.svg)
}

.new-year-navbar-avatar[data-drawn="2"],
.new-year-navbar-avatar[data-drawn="3"],
.new-year-navbar-avatar[data-drawn="4"] {
  background-color: var(--theme-color-bg-surface);
  background-size: 30px 30px;
  background-position: center;
  border-radius: 4px
}

.new-year-navbar-avatar[data-drawn="2"] {
  background-image: url(/static/frontend/new-year/2021/tree.svg)
}

.new-year-navbar-avatar[data-drawn="3"] {
  background-image: url(/static/frontend/new-year/2021/cookie.svg)
}

.new-year-navbar-avatar[data-drawn="4"] {
  background-image: url(/static/frontend/new-year/2021/snowflake.svg)
}

.new-year-navbar-avatar::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -5px;
  width: 100%;
  height: 200%;
  border-radius: 50%;
  transform: rotate(-15deg) translateY(0);
  background-image: radial-gradient(circle at 30% 30%, #fff 1.5%, #fff 2.5%, transparent 2.6%), radial-gradient(circle at 80% 70%, #fff 1.5%, #fff 2.5%, transparent 2.6%), radial-gradient(circle at 30% 50%, #fff 1%, #fff 2%, transparent 2.1%), radial-gradient(circle at 70% 85%, #fff 1%, #fff 2%, transparent 2.1%);
  background-size: 50% 50%, 50% 50%, 25% 50%, 25% 25%;
  -webkit-animation: new-year-navbar-avatar-snow 6s linear infinite forwards paused;
  animation: new-year-navbar-avatar-snow 6s linear infinite forwards paused
}

@-webkit-keyframes new-year-navbar-avatar-snow {
  100% {
    transform: rotate(-15deg) translateY(50%)
  }
}

@keyframes new-year-navbar-avatar-snow {
  100% {
    transform: rotate(-15deg) translateY(50%)
  }
}

.new-year-navbar-profile-menu-item-divider {
  display: flex;
  padding: 0 5px;
  justify-content: space-around;
  position: relative;
  z-index: 1
}

.new-year-navbar-profile-menu-item-divider div {
  width: 3px;
  height: 3px;
  transform: translateY(-1px);
  border-radius: 50%;
  background: radial-gradient(#c5ddfd, #7f8dee);
  box-shadow: 0 0 5px 1px #afcfff;
  -webkit-animation: new-year-navbar-profile-menu-item-divider-lamp 1s ease-in-out infinite alternate forwards;
  animation: new-year-navbar-profile-menu-item-divider-lamp 1s ease-in-out infinite alternate forwards
}

.new-year-navbar-profile-menu-item-divider div:nth-child(odd) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}

.new-year-navbar-profile-menu-item-divider div:nth-child(2) {
  background: radial-gradient(#fff, #4e5269)
}

.new-year-navbar-profile-menu-item-divider div:nth-child(4) {
  background: radial-gradient(#e265ae, #54393b)
}

.new-year-navbar-profile-menu-item-divider div:nth-child(11),
.new-year-navbar-profile-menu-item-divider div:nth-child(6),
.new-year-navbar-profile-menu-item-divider div:nth-child(9) {
  background: radial-gradient(#fff, #57a5ff)
}

.new-year-navbar-profile-menu-item-divider div:nth-child(12) {
  background: radial-gradient(#e265ae, #54393b)
}

.new-year-navbar-profile-menu-item-divider div:nth-child(10),
.new-year-navbar-profile-menu-item-divider div:nth-child(2),
.new-year-navbar-profile-menu-item-divider div:nth-child(6) {
  width: 4px;
  height: 4px;
  transform: translateY(-5px)
}

.new-year-navbar-profile-menu-item-divider div:nth-child(12),
.new-year-navbar-profile-menu-item-divider div:nth-child(4),
.new-year-navbar-profile-menu-item-divider div:nth-child(8) {
  width: 4px;
  height: 4px;
  transform: translateY(2px)
}

@-webkit-keyframes new-year-navbar-profile-menu-item-divider-lamp {
  0% {
    box-shadow: 0 0 5px 1px #afcfff
  }

  100% {
    box-shadow: 0 0 0 0 #afcfff
  }
}

@keyframes new-year-navbar-profile-menu-item-divider-lamp {
  0% {
    box-shadow: 0 0 5px 1px #afcfff
  }

  100% {
    box-shadow: 0 0 0 0 #afcfff
  }
}

.learn-nav__new-year-tree {
  position: absolute;
  transform: translate(123px, 31px);
  z-index: 1
}

.learn-nav__new-year-tree img {
  height: 36px;
  opacity: .4;
  transition: opacity .2s
}

.learn-nav__new-year-tree:hover img {
  opacity: 1
}

.course-learn-header__tabs {
  margin: 11px 0 16px
}

@media (max-width:768px) {
  .course-learn-header[data-has-tabs]~.marco-layout__header h1 {
    display: none
  }
}

.news-item {
  display: grid;
  grid-gap: 0 24px;
  grid-template-areas: "badges manage" "title manage" "subtitle manage" "text manage";
  grid-template-columns: auto -webkit-min-content;
  grid-template-columns: auto min-content;
  grid-template-rows: auto auto auto 1fr;
  border-radius: 3px
}

.news-item:focus {
  box-shadow: none
}

.news-item__title {
  grid-area: title;
  font-size: 20px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: .15px;
  word-break: break-word
}

.news-item__subtitle {
  grid-area: subtitle;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .15px;
  color: #999
}

.news-item__title+.news-item__subtitle:not([data-empty]) {
  margin-top: 6px
}

[data-status=sending] .news-item__subtitle,
[data-status=sent] .news-item__subtitle {
  color: #222
}

.news-item__text {
  grid-area: text;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

*+.news-item__text {
  margin-top: 16px
}

.news-item__text span:first-child>p:first-child {
  margin-top: 0
}

.news-item__stat+.news-item__actions,
.news-item__stat-desc+.news-item__stat-data {
  margin-top: 16px
}

.news-item__manage-panel {
  grid-area: manage;
  align-self: start;
  min-width: 270px;
  border: 1px solid #f3f4f6;
  border-radius: 4px;
  padding: 16px
}

.news-item__mobile-menu-toggler {
  color: #999;
  transition: all .3s;
  display: inline-flex
}

.news-item__mobile-menu-toggler.st-button_style_none {
  padding: 4px
}

.news-item__mobile-menu-toggler:hover {
  color: #5e5e5e
}

.news-item__mobile-menu-toggler .svg-icon,
.news-item__mobile-menu-toggler .svg-icon svg {
  width: 16px;
  height: 16px
}

.news-item__actions {
  list-style: none;
  margin-bottom: 0
}

.news-item__actions a.has-icon {
  display: inline-flex;
  justify-content: center;
  --p1: var(--btn-has-icon-p1, .6em);
  --p2: var(--btn-has-icon-p2, -.3em);
  line-height: 1
}

.news-item__actions a.has-icon .svg-icon {
  align-items: center;
  display: inline-flex;
  justify-content: center
}

.news-item__actions a.has-icon .svg-icon,
.news-item__actions a.has-icon .svg-icon svg {
  width: 1em;
  height: 1em
}

.news-item__actions a.has-icon .svg-icon:first-child:not(:last-child) {
  margin-left: var(--p2);
  margin-right: var(--p1)
}

.news-item__actions a.has-icon .svg-icon:last-child:not(:first-child) {
  margin-left: var(--p1);
  margin-right: var(--p2)
}

.news-item__actions .btn-link:not(.st-button_style_none) {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5);
  font-size: 14px;
  text-decoration: none !important;
  margin-left: .3em
}

.news-item__stat {
  font-size: 14px;
  letter-spacing: .15px;
  line-height: 16px
}

.news-item__stat-desc {
  line-height: 20px
}

.news-item__stat-data {
  list-style: none;
  margin-bottom: 0;
  line-height: 20px
}

.news-item__badges {
  grid-area: badges;
  margin-bottom: 6px
}

.news-item__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  height: 24px;
  vertical-align: top;
  font-size: 9px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--course-badge-default-fg);
  background-image: var(--course-badge-default-bgi);
  border-radius: 0 4px 4px
}

.news-item__badge .svg-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  margin-right: 6px;
  font-size: 12px
}

.news-item__badge .svg-icon svg {
  width: 100%;
  height: 100%
}

.news-item__badge[data-status=sending] {
  color: var(--course-badge-paid-fg);
  background-image: var(--course-badge-paid-bgi)
}

.news-item__badge[data-status=scheduled] {
  color: var(--course-badge-basic-fg);
  background-image: var(--course-badge-basic-bgi)
}

.news-item__badge[data-status=sent] {
  color: var(--course-badge-private-fg);
  background-image: var(--course-badge-private-bgi)
}

.news-item__badge[data-status=aborted] {
  --course-badge-default-bg: transparent;
  --course-badge-default-bgi: linear-gradient(106deg, #e7f2ff -26%, #f1f1f4 135%);
  --course-badge-default-fg: #535366;
  --course-badge-private-bg: var(--course-badge-default-bg);
  --course-badge-private-bgi: linear-gradient(105deg, #f6faff -26%, #c8e2ff 135%);
  --course-badge-private-fg: #4485ed;
  --course-badge-draft-bg: #999;
  --course-badge-draft-bgi: none;
  --course-badge-draft-fg: #fff;
  --course-badge-basic-bg: var(--course-badge-default-bg);
  --course-badge-basic-bgi: linear-gradient(107deg, #e7f2ff -26%, #e3fff0 136%);
  --course-badge-basic-fg: #56a4ff;
  --course-badge-basic-invalid-bg: #FFEBE8;
  --course-badge-basic-invalid-bgi: none;
  --course-badge-basic-invalid-fg: #d41f1f;
  --course-badge-paid-bg: var(--course-badge-default-bg);
  --course-badge-paid-bgi: linear-gradient(107deg, #e7f2ff -26%, #cbffd2 136%);
  --course-badge-paid-fg: #54ad54;
  --course-badge-paid-invalid-bg: #FFEBE8;
  --course-badge-paid-invalid-bgi: none;
  --course-badge-paid-invalid-fg: #d41f1f;
  --course-badge-enterprise-bg: var(--course-badge-default-bg);
  --course-badge-enterprise-bgi: linear-gradient(93.02deg, #2A264D -20.29%, #5F5ACE 86.05%);
  --course-badge-enterprise-fg: #fff;
  --course-badge-spec-bg: #6C7BDF;
  --course-badge-spec-bgi: none;
  --course-badge-spec-fg: #fff;
  --course-badge-padding: 1px 6px;
  --course-badge-height: 16px;
  --course-badge-font-size: 10px;
  --course-badge-font-weight: 500;
  --course-badge-line-height: normal;
  --course-badge-letter-spacing: 0.11px;
  --course-badge-text-transform: none;
  --course-badge-icon-size: 10px;
  color: var(--course-badge-basic-invalid-fg);
  background-image: var(--course-badge-basic-invalid-bgi);
  background-color: var(--course-badge-basic-invalid-bg)
}

.news-item__badge[data-type=one-time] {
  color: var(--course-badge-basic-fg);
  background-image: var(--course-badge-basic-bgi)
}

.news-item__badge[data-type=on-event] {
  color: var(--course-badge-paid-fg);
  background-image: var(--course-badge-paid-bgi)
}

.news-editor__form {
  --rich-text-editor-border-radius: 4px
}

.news-editor__form .the-form-field {
  margin: 16px 0 0
}

.news-editor__form .the-form-field:first-child {
  margin-top: 0
}

.news-editor__form .the-form-field .date-picker__input[disabled],
.news-editor__form .the-form-field .st-input[disabled] {
  border-color: rgba(204, 204, 204, .38);
  background: #fff;
  color: #999
}

.news-editor__form .the-form-field .st-input-wrapper {
  display: inline-flex !important;
  align-items: center
}

.news-editor__form .the-form-field .st-input-wrapper>.st-input {
  height: 16px;
  padding: 0;
  margin: 0;
  border: none
}

.news-editor__form .the-form-field .st-input-wrapper>span {
  display: inline-flex;
  height: 16px;
  line-height: 1.2;
  color: #999
}

.news-editor__form .the-form-field>.the-form-field__caption {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 14px;
  overflow-wrap: break-word;
  color: #5e5e5e;
  letter-spacing: .4px
}

.news-editor__test-sending-form {
  margin: 0
}

.news-editor__fieldset {
  padding: 0;
  margin: 16px 0 0;
  border: none
}

.news-editor__fieldset[data-fieldset=score-range]+.news-editor__fieldset {
  margin-top: 6px
}

.news-editor__field[data-filed=title] {
  margin-bottom: 16px
}

.news-editor__field .the-form-field__char-counter {
  font-size: 12px;
  top: 48px
}

.news-editor__field-note {
  display: block;
  margin: 2px 2px 0 0;
  font-size: 12px;
  letter-spacing: .4px;
  color: #5e5e5e
}

.news-editor__select-box-group {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #999;
  font-weight: 400
}

.news-editor__type-desc {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  margin: 8px 0 32px
}

.news-editor__score-range {
  font-size: 14px;
  line-height: 20px;
  padding-left: 30px;
  padding-bottom: 10px
}

.news-editor__score-range .the-form-field,
.news-editor__type-desc .the-form-field {
  margin: 0;
  display: inline-flex;
  align-items: center
}

.news-editor__score-range input[type=number],
.news-editor__type-desc input[type=number] {
  width: 26px;
  -moz-appearance: textfield
}

.news-editor__score-range input[type=number]::-webkit-inner-spin-button,
.news-editor__score-range input[type=number]::-webkit-outer-spin-button,
.news-editor__type-desc input[type=number]::-webkit-inner-spin-button,
.news-editor__type-desc input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.news-editor__start-date {
  font-size: 14px;
  line-height: 20px;
  padding-left: 30px
}

.news-editor__start-date.the-form-field {
  margin-top: 4px
}

.news-editor__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 14px 0 0 -16px
}

.news-editor__actions button {
  padding: 9px 24px;
  margin: 16px 0 0 16px;
  white-space: nowrap
}

.news-editor__main-actions {
  display: flex
}

.infinite-scroll-modern__trigger {
  display: inline;
  height: 0;
  width: 0;
  pointer-events: none
}

.user-revenue time[data-tooltip],
.user-revenue time[title] {
  cursor: help
}

.user-revenue__h1 {
  margin: 32px 0 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: .17px
}

.user-revenue__h1:first-child {
  margin-top: 0
}

.user-revenue__beneficiary-revenue {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 14px;
  padding: 0 0 0 12px
}

.user-revenue__beneficiary-revenue+.user-revenue__beneficiary-revenue {
  margin-top: -8px
}

.user-revenue__beneficiary-revenue-item {
  display: flex;
  flex-direction: column-reverse;
  margin: 0 32px 12px 0;
  line-height: normal
}

.user-revenue__beneficiary-revenue-item[data-type=payable] .format-price {
  color: #288b28
}

.user-revenue__beneficiary-revenue-item>span:first-child {
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px;
  color: #535366
}

.user-revenue__beneficiary-revenue-item .format-price {
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: .15px
}

.user-revenue__beneficiary-revenue-item .format-price>[data-type=decimal],
.user-revenue__beneficiary-revenue-item .format-price>[data-type=fraction] {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  opacity: 1
}

.user-revenue__beneficiary-revenue-item .format-price>[data-type=currency],
.user-revenue__beneficiary-revenue-item .format-price>[data-type=literal] {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px
}

.user-revenue__table {
  width: 100%;
  margin: 0;
  border: none;
  white-space: nowrap
}

.user-revenue__table thead {
  background-color: #f6f6f6
}

.user-revenue__table th {
  padding: 12px;
  color: #535366;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .15px
}

.user-revenue__report[data-type-badge],
.user-revenue__table td,
.user-revenue__upload-btn-note {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.user-revenue__table tr {
  vertical-align: top
}

.user-revenue__table tr:nth-of-type(even),
.user-revenue__table tr:nth-of-type(odd) {
  background-color: transparent
}

.user-revenue__table td {
  padding: 12px;
  color: inherit
}

.user-revenue__tm-row td {
  padding-top: 3px;
  padding-bottom: 3px
}

.user-revenue__tm-row[data-beneficiary-transfer-empty] .user-revenue__tm-payment-date,
.user-revenue__tm-row[data-beneficiary-transfer-empty] .user-revenue__tm-report {
  color: #999
}

.user-revenue__tm-row_month td,
.user-revenue__tm-row_month+.user-revenue__tm-row td {
  padding-top: 12px
}

.user-revenue__tm-row_month-end {
  height: 9px
}

.user-revenue__report .attachment_icon,
.user-revenue__report .attachment_icon svg,
.user-revenue__tm-report .attachment_icon,
.user-revenue__tm-report .attachment_icon svg {
  height: 17px;
  width: 17px
}

.user-revenue__tm-date {
  text-align: start
}

.user-revenue__tm-income,
.user-revenue__tm-payment {
  text-align: end
}

.user-revenue__tm-report {
  text-align: start;
  white-space: normal;
  width: 100%
}

.user-revenue__tm-report[data-not-ready] {
  color: #999
}

.user-revenue__tm-report .attachment_icon {
  display: inline-block;
  vertical-align: center;
  color: #999
}

.user-revenue__report-item {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between
}

.user-revenue__report {
  display: flex;
  flex: 1
}

.user-revenue__report .attachment_icon {
  color: #999;
  margin-right: 1px;
  margin-left: -3px
}

.user-revenue__report .check_icon {
  margin-left: 4px;
  align-self: baseline;
  position: relative;
  bottom: -2px
}

.user-revenue__report[data-type-badge] {
  display: inline-flex;
  padding: 6px 12px 6px 15px;
  background: #F6F6F6;
  border-radius: 4px
}

.user-revenue__report[data-type-badge] .attachment_icon {
  margin-right: 6px
}

.user-revenue__report[data-type-badge] a {
  --link-color: #4485ed;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5);
  --link-line: none
}

.user-revenue__utm {
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
  white-space: nowrap
}

button:not(.st-button_style_none).user-revenue__report-menu-btn {
  padding: 3px;
  background: 0 0;
  border: none;
  color: #999;
  font-size: 14px;
  outline: 0
}

button:not(.st-button_style_none).user-revenue__report-menu-btn:focus,
button:not(.st-button_style_none).user-revenue__report-menu-btn:hover {
  color: #5e5e5e
}

button:not(.st-button_style_none).user-revenue__report-menu-btn:active,
button:not(.st-button_style_none).user-revenue__report-menu-btn[data-active] {
  color: #222
}

button:not(.st-button_style_none).user-revenue__report-menu-btn .svg-icon {
  display: flex
}

button:not(.st-button_style_none).user-revenue__sign-report {
  padding: 7px 16px;
  font-size: 14px
}

button:not(.st-button_style_none).user-revenue__upload-btn {
  padding: 9px 16px
}

.user-revenue__upload-btn-note {
  margin-top: 2px;
  color: #777
}

td.user-revenue__tm-date {
  padding-right: 28px
}

td.user-revenue__thd-amount,
td.user-revenue__tm-payment {
  font-weight: 900
}

td.user-revenue__thd-amount[data-amount="0"],
td.user-revenue__tm-income[data-amount="0"],
td.user-revenue__tm-payment[data-amount="0"] {
  color: #999
}

td.user-revenue__thd-amount .format-price>[data-type=decimal],
td.user-revenue__thd-amount .format-price>[data-type=fraction],
td.user-revenue__tm-income .format-price>[data-type=decimal],
td.user-revenue__tm-income .format-price>[data-type=fraction],
td.user-revenue__tm-payment .format-price>[data-type=decimal],
td.user-revenue__tm-payment .format-price>[data-type=fraction] {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .3px;
  opacity: 1
}

td.user-revenue__thd-amount .format-price>[data-type=currency],
td.user-revenue__thd-amount .format-price>[data-type=literal],
td.user-revenue__tm-income .format-price>[data-type=currency],
td.user-revenue__tm-income .format-price>[data-type=literal],
td.user-revenue__tm-payment .format-price>[data-type=currency],
td.user-revenue__tm-payment .format-price>[data-type=literal] {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .3px
}

td.user-revenue__tm-report {
  padding-right: 0
}

.user-revenue__empty-placeholder,
.user-revenue__usd-placeholder {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 40px 0
}

.user-revenue__empty-placeholder img,
.user-revenue__usd-placeholder img {
  margin: 0 0 24px;
  height: 140px;
  opacity: .38
}

.user-revenue__empty-placeholder span,
.user-revenue__usd-placeholder span {
  font-size: 16px;
  line-height: 23px;
  letter-spacing: .3px
}

.user-revenue__thd-date {
  text-align: start
}

.user-revenue__thd-transaction {
  text-align: center
}

td.user-revenue__thd-transaction {
  padding-left: 8px;
  padding-right: 8px;
  font-size: 20px
}

td.user-revenue__thd-transaction>.svg-icon {
  display: flex
}

th.user-revenue__thd-course {
  text-align: center
}

td.user-revenue__thd-course {
  width: 100%;
  white-space: normal;
  text-align: start
}

.user-revenue__thd-amount {
  text-align: end
}

td.user-revenue__thd-amount {
  min-width: 100px
}

td.user-revenue__thd-amount[data-status=refunded] {
  color: #9F0F38
}

.user-revenue__thd-course-title[data-skeleton]::after {
  content: attr(aria-label)
}

.user-revenue__thd-row-group td {
  padding: 24px 12px 8px;
  line-height: 16px;
  color: #535366;
  font-weight: 500;
  letter-spacing: .15px
}

.user-revenue__th-shrink-overflow span {
  display: flex;
  justify-content: center
}

.user-revenue__th-shrink-overflow>span>span {
  width: 0
}

button:not(.st-button_style_none).user-revenue__thd-load-more-btn {
  padding: 7px 16px;
  margin-top: 40px;
  font-size: 14px
}

.user-revenue__modal-help {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.user-revenue__modal-help a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.user-revenue__show-more-btn:not(.st-button_style_none) {
  margin-top: 24px
}

@media (max-width:768px) {
  .news-item {
    grid-gap: 0
  }

  .user-revenue {
    margin-bottom: 70px
  }

  .user-revenue__beneficiary-revenue {
    flex-direction: column;
    padding: 16px;
    border: 1px solid #eaeaea;
    border-radius: 5px
  }

  .user-revenue__beneficiary-revenue+.user-revenue__beneficiary-revenue {
    margin-top: -4px
  }

  .user-revenue__beneficiary-revenue-item {
    flex-direction: column;
    margin: 0
  }

  .user-revenue__beneficiary-revenue-item+.user-revenue__beneficiary-revenue-item {
    margin-top: 16px
  }

  .user-revenue__beneficiary-revenue-item[data-type=payable] .format-price {
    font-size: 30px;
    line-height: 35px
  }

  .user-revenue__beneficiary-revenue-item>span:first-child::first-letter {
    text-transform: uppercase
  }

  .user-revenue__beneficiary-revenue-item .format-price {
    font-weight: 900;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: .15px
  }

  .user-revenue__table-revenue-months,
  .user-revenue__table-revenue-months tbody {
    display: block
  }

  .user-revenue__table-revenue-months thead {
    display: none
  }

  .user-revenue__tm-empty-row,
  .user-revenue__tm-row {
    display: block
  }

  .user-revenue__tm-row_month {
    display: grid;
    grid-template-areas: "date income";
    grid-template-columns: 1fr auto;
    align-items: baseline
  }

  .user-revenue__tm-row_month td {
    padding: 12px 0
  }

  .user-revenue__tm-row_month+.user-revenue__tm-row td {
    padding-top: 3px
  }

  .user-revenue__tm-row[data-beneficiary-transfer-empty],
  .user-revenue__tm-row[data-beneficiary-transfer] {
    display: grid;
    grid-template-areas: "report amount";
    grid-template-columns: 1fr auto;
    align-items: baseline
  }

  .user-revenue__table-history-details thead,
  .user-revenue__tm-row_report td:empty,
  tr:not(.user-revenue__tm-row_report) td.user-revenue__tm-report {
    display: none
  }

  .user-revenue__tm-row_month-end {
    height: 14px
  }

  td.user-revenue__tm-date {
    padding-right: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .15px
  }

  td.user-revenue__tm-income {
    grid-area: income;
    padding-right: 0;
    font-size: 18px;
    font-weight: 900
  }

  td.user-revenue__tm-income .format-price>[data-type=currency],
  td.user-revenue__tm-income .format-price>[data-type=decimal],
  td.user-revenue__tm-income .format-price>[data-type=fraction],
  td.user-revenue__tm-income .format-price>[data-type=literal] {
    font-weight: 400
  }

  td.user-revenue__tm-payment {
    grid-area: amount;
    padding-right: 0;
    font-size: 14px;
    color: #535366;
    font-weight: 400
  }

  td.user-revenue__tm-payment-date {
    grid-area: report;
    padding-left: 0;
    padding-right: 0;
    width: auto
  }

  .user-revenue__thd-row-group td,
  tr.user-revenue__tm-row_report td.user-revenue__tm-report {
    padding-left: 0
  }

  .user-revenue__thd-row-group:first-child td {
    padding-top: 0
  }

  .user-revenue__thd-row {
    display: grid;
    grid-template-areas: "date date" "course amount";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 8px 0 13px
  }

  .user-revenue__thd-row td {
    padding: 3px 0;
    width: auto;
    max-width: none
  }

  td.user-revenue__thd-date {
    grid-area: date;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: .4px;
    color: #535366
  }

  td.user-revenue__thd-course {
    grid-area: course
  }

  td.user-revenue__thd-amount {
    grid-area: amount;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 18px
  }

  td.user-revenue__thd-transaction,
  td.user-revenue__thd-utm {
    display: none
  }

  button:not(.st-button_style_none).user-revenue__thd-load-more-btn {
    margin-top: 20px
  }
}

.utm-card {
  padding: 12px
}

.utm-card__section+.utm-card__section {
  margin-top: 24px
}

.utm-card__title {
  white-space: nowrap;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .15px;
  margin-bottom: 8px
}

.new-course-form__caption,
.utm-card__content,
.utm-card__date {
  font-size: 14px;
  letter-spacing: .25px
}

.utm-card__content {
  display: grid;
  grid-template-columns: 70px 230px;
  grid-auto-flow: row;
  grid-gap: 8px;
  font-weight: 400;
  line-height: 20px
}

.utm-card__value {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
  white-space: normal
}

.catalog-w__search-order-caption span,
.tags-tag__chain-item,
.utm-card__date {
  white-space: nowrap
}

.utm-card__date {
  margin-left: 8px;
  font-weight: 400;
  line-height: 20px;
  color: #777
}

.new-course-form__form {
  margin: 0
}

.new-course-form__label {
  margin: 0;
  color: #222
}

.new-course-form__label .the-form-field__char-counter[data-pos=footnote] {
  top: 60px
}

.new-course-form__form-field {
  margin: 0
}

.new-course-form__caption {
  margin: 0 0 8px;
  line-height: 1.43
}

input[type=text].new-course-form__input {
  display: block;
  height: 34px;
  width: 100%;
  margin: 0 0 2px;
  padding: 8px 14px;
  border-radius: 4px
}

.new-course-form__note {
  display: inline-block;
  margin: 2px 4px 0 0;
  font-size: 12px;
  letter-spacing: .4px
}

button:not(.st-button_style_none).new-course-form__btn {
  padding: 9px 20px;
  margin: 30px 0 0;
  min-width: 180px
}

.new-course-form__desc {
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: .25px
}

.new-course-form__desc p {
  line-height: 20px;
  margin-bottom: 8px
}

.new-course-form__desc a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.new-lesson-form__form {
  margin: 0
}

.new-lesson-form__label {
  margin: 0;
  color: #222
}

.new-lesson-form__label .the-form-field__char-counter[data-pos=footnote] {
  top: 60px
}

.new-lesson-form__form-field {
  margin: 0
}

.new-lesson-form__caption {
  margin: 0 0 8px;
  line-height: 1.43;
  font-size: 14px;
  letter-spacing: .25px
}

input[type=text].new-lesson-form__input {
  display: block;
  height: 34px;
  width: 100%;
  margin: 0 0 2px;
  padding: 8px 14px;
  border-radius: 4px
}

.new-lesson-form__note {
  display: inline-block;
  margin: 2px 4px 0 0;
  font-size: 12px;
  letter-spacing: .4px
}

button:not(.st-button_style_none).new-lesson-form__btn {
  padding: 9px 20px;
  margin: 30px 0 0;
  min-width: 180px
}

.new-class-form__fieldset {
  margin: 0;
  padding: 0;
  border: none
}

.new-class-form__fieldset+.new-class-form__fieldset {
  margin-top: 48px
}

.new-class-form__fieldset p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .25px
}

.new-class-form__fieldset b {
  font-weight: 500
}

.new-class-form__fieldset .button {
  padding: 9px 27px;
  min-width: 180px
}

.new-class-form__select-box .spinner-small_icon svg {
  width: 16px;
  height: 16px;
  vertical-align: top;
  margin-left: 5px;
  color: #999
}

.tags-selector {
  margin: 0;
  --tags-selector-item-offset: 0px
}

.tags-selector__item {
  -webkit-font-smoothing: antialiased
}

.tags-selector__item+.tags-selector__item {
  margin-top: var(--tags-selector-item-offset)
}

.tags-selector-item__child-item {
  margin-top: var(--tags-selector-child-item-offset, var(--tags-selector-item-offset))
}

.tags-selector-item {
  --tags-selector-arrow-size: 10px;
  --tags-selector-checkbox-size: 18px;
  --tags-selector-child-offset: 6px;
  --tags-selector-arrow-normal-color: #ccc;
  --tags-selector-arrow-hover-color: #222;
  --tags-selector-arrow-transform: rotate(-90deg);
  --tags-selector-arrow-expanded-color: #999;
  --tags-selector-arrow-expanded-hover-color: #288b28;
  --tags-selector-title-normal-color: currentColor;
  --tags-selector-title-hover-color: currentColor;
  --tags-selector-title-expanded-color: currentColor;
  --tags-selector-title-expanded-hover-color: currentColor;
  --tags-selector-title-selected-color: #288b28;
  --tags-selector-desc-title-expanded-color: #222;
  --tags-selector-desc-title-expanded-hover-color: #222;
  --tags-selector-desc-arrow-normal-color: transparent;
  --tags-selector-desc-arrow-hover-color: transparent;
  --tags-selector-desc-arrow-expanded-color: transparent;
  --tags-selectors-toggler: url(/static/frontend/common_icons/chevron-down.svg);
  --tags-selectors-desc-toggler: url(/static/frontend/common_icons/plus.svg);
  --tags-selector-arrow-expanded-transform: none;
  list-style: none;
  display: grid;
  grid-template-areas: "toggler title tools" ". body body";
  grid-template-columns: var(--tags-selector-arrow-size) 1fr var(--tags-selector-checkbox-size);
  grid-template-rows: -webkit-min-content auto;
  grid-template-rows: min-content auto;
  grid-column-gap: 8px;
  align-items: first baseline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.tags-selector-item[data-left-orientation] {
  grid-template-areas: "tools title toggler" ". body body";
  grid-template-columns: var(--tags-selector-checkbox-size) 1fr var(--tags-selector-arrow-size);
  grid-template-rows: -webkit-min-content auto;
  grid-template-rows: min-content auto;
  --tags-selector-child-offset: var(--tags-selector-child-offset-left-orientation, 0)
}

[data-show-only-target] .tags-selector-item:not([data-is-target]) {
  display: none;
  opacity: 0;
  transition: opacity .2s
}

.search-form-filter__toggler,
.tags-selector-item__toggler,
.tags-tag__chain-item::after {
  transition: background-color .2s, transform 125ms cubic-bezier(.39, .58, .57, 1);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center
}

.tags-selector-item+.tags-selector-item {
  margin-bottom: 2px
}

.tags-selector-item[data-can-select] {
  --tags-selector-cursor: pointer
}

.tags-selector-item[data-has-child] {
  --tags-selector-title-color: var(--tags-selector-title-normal-color);
  --tags-selector-arrow-color: var(--tags-selector-arrow-normal-color);
  --tags-selector-cursor: pointer
}

.tags-selector-item[data-has-child]:hover {
  --tags-selector-title-color: var(--tags-selector-title-hover-color);
  --tags-selector-arrow-color: var(--tags-selector-arrow-hover-color)
}

.tags-selector-item[data-has-child][data-expanded] {
  --tags-selector-title-color: var(--tags-selector-title-expanded-color);
  --tags-selector-arrow-color: var(--tags-selector-arrow-expanded-color);
  --tags-selector-arrow-transform: var(--tags-selector-arrow-expanded-transform)
}

.tags-selector-item[data-has-child][data-expanded]:hover {
  --tags-selector-title-color: var(--tags-selector-title-expanded-hover-color,
      var(--tags-selector-title-hover-color));
  --tags-selector-arrow-color: var(--tags-selector-arrow-expanded-hover-color,
      var(--tags-selector-arrow-hover-color))
}

.tags-selector-item[data-has-child][data-selected],
.tags-selector-item[data-has-child][data-selected]:hover {
  --tags-selector-title-color: var(--tags-selector-title-selected-color)
}

.tags-selector-item[data-is-desc] {
  --tags-selector-title-color: var(--tags-selector-desc-title-normal-color,
      var(--tags-selector-title-normal-color));
  --tags-selector-arrow-color: var(--tags-selector-desc-arrow-normal-color,
      var(--tags-selector-arrow-normal-color));
  --tags-selectors-toggler: var(--tags-selectors-desc-toggler, var(--tags-selectors-toggler));
  --tags-selector-cursor: pointer
}

.tags-selector-item[data-is-desc]:hover {
  --tags-selector-title-color: var(--tags-selector-desc-title-hover-color,
      var(--tags-selector-title-hover-color));
  --tags-selector-arrow-color: var(--tags-selector-desc-arrow-hover-color,
      var(--tags-selector-arrow-hover-color))
}

.tags-selector-item[data-is-desc][data-desc-expanded] {
  --tags-selector-title-color: var(--tags-selector-desc-title-expanded-color,
      var(--tags-selector-title-expanded-color));
  --tags-selector-arrow-color: var(--tags-selector-desc-arrow-expanded-color,
      var(--tags-selector-arrow-expanded-color));
  --tags-selector-arrow-transform: var(--tags-selector-arrow-expanded-transform)
}

.tags-selector-item[data-is-desc][data-desc-expanded]:hover {
  --tags-selector-title-color: var(--tags-selector-desc-title-expanded-hover-color,
      var(--tags-selector-desc-title-hover-color,
        var(--tags-selector-title-hover-color)));
  --tags-selector-arrow-color: var(--tags-selector-desc-arrow-expanded-hover-color,
      var(--tags-selector-desc-arrow-hover-color,
        var(--tags-selector-arrow-hover-color)))
}

.tags-selector-item[data-is-desc][data-selected],
.tags-selector-item[data-is-desc][data-selected]:hover {
  --tags-selector-title-color: var(--tags-selector-desc-title-selected-color,
      var(--tags-selector-title-selected-color))
}

.tags-selector-item[data-selected] {
  --tags-selector-title-color: var(--tags-selector-title-selected-color)
}

.tags-selector-item>.tags-selector-item__toggler {
  background-color: var(--tags-selector-arrow-color);
  transform: var(--tags-selector-arrow-transform);
  cursor: var(--tags-selector-cursor)
}

.tags-selector-item>.tags-selector-item__title {
  color: var(--tags-selector-title-color);
  cursor: var(--tags-selector-cursor)
}

.tags-selector-item>.tags-selector-item__child-tags {
  --tags-selector-title-color: var(--tags-selector-title-normal-color);
  --tags-selector-arrow-color: transparent;
  --tags-selector-arrow-transform: none;
  --tags-selector-cursor: default
}

.tags-selector-item__toggler {
  grid-area: toggler;
  content: "";
  width: var(--tags-selector-arrow-size, .5em);
  height: var(--tags-selector-arrow-size, .5em);
  vertical-align: middle;
  -webkit-mask-image: var(--tags-selectors-toggler);
  mask-image: var(--tags-selectors-toggler);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  transform: none
}

.tags-selector-item__title {
  grid-area: title
}

.tags-selector-item__checkbox {
  grid-area: tools;
  padding: 0
}

.tags-selector-item__child-tags {
  grid-area: body;
  margin-left: var(--tags-selector-child-offset)
}

.tags-selector-item__comment {
  grid-area: body;
  margin-right: 30px
}

.tags-selector-item__comment-input[type=text] {
  font-size: 14px;
  border-radius: 4px;
  padding: 4px 8px;
  max-width: 220px;
  height: 34px
}

@-webkit-keyframes hide-selector-item {
  0% {
    opacity: 1;
    display: grid
  }

  99% {
    opacity: 0
  }

  100% {
    display: none
  }
}

@keyframes hide-selector-item {
  0% {
    opacity: 1;
    display: grid
  }

  99% {
    opacity: 0
  }

  100% {
    display: none
  }
}

.tags-list__tags {
  margin-bottom: 0;
  margin-left: var(--tags-list-margin-left, 16px);
  list-style: var(--tags-list-style, decimal)
}

.tags-list__tags+.tags-list__tags {
  margin-top: 16px
}

.tags-list__tags+.tags-list__tags[data-is-deleted] {
  border-top: 1px solid #ccc;
  padding-top: 16px
}

.tags-list__tags[data-is-deleted] {
  opacity: .5;
  transition: opacity .3s
}

.tags-list__tags[data-is-deleted]:hover {
  opacity: 1
}

.tags-list__tag {
  padding-left: 6px
}

.tags-list__tag+.tags-list__tag {
  margin-top: 8px
}

.tags-tag {
  font-size: 14px
}

.tags-tag__chain {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  list-style: none;
  padding: 0;
  margin: 0
}

.tags-tag__chain:not([data-approved]) li {
  text-decoration: line-through;
  color: #999
}

.tags-tag__chain-item {
  position: relative;
  padding: 2px 6px;
  background-color: var(--tags-tag-bg, #eaecf0);
  border-radius: 4px;
  margin-left: 8px;
  --btn-details-arrow-size: 10px
}

[data-approved] .tags-tag__chain-item {
  --tags-tag-bg: var(--tags-tag-approved-bg, rgba(40, 139, 40, 0.2))
}

.tags-tag__chain-item[data-is-other] {
  --tags-tag-bg: var(--tags-tag-other-bg, #eaecf0)
}

.tags-tag__chain-item::after {
  content: "";
  display: block;
  position: absolute;
  right: -13px;
  top: .6em;
  width: var(--btn-details-arrow-size, .5em);
  height: var(--btn-details-arrow-size, .5em);
  vertical-align: var(--btn-details-valign, middle);
  -webkit-mask-image: var(--btn-details-toggler, url(/static/frontend/common_icons/chevron-down.svg));
  mask-image: var(--btn-details-toggler, url(/static/frontend/common_icons/chevron-down.svg));
  -webkit-mask-size: 100%;
  mask-size: 100%;
  background-color: var(--arrow-color, #999);
  transform: rotate(-90deg)
}

.tags-tag__chain-item:first-child {
  margin-left: -2px
}

.tags-tag__chain-item:nth-last-child(-n+2) {
  --arrow-color: transparent
}

.tags-tag__chain-item>span {
  display: block;
  max-width: var(--tags-tag-max-width, 150px);
  overflow: hidden;
  text-overflow: ellipsis
}

.search-form-filter,
.tags-course-tags {
  display: grid;
  grid-template-rows: -webkit-min-content 1fr;
  grid-template-rows: min-content 1fr
}

.tags-tag__action:not(.st-button_style_none) {
  background-color: transparent;
  padding: 6px;
  font-size: 12px;
  color: #b7b7b7
}

.tags-tag__action:not(.st-button_style_none):focus,
.tags-tag__action:not(.st-button_style_none):hover {
  background-color: #f6f6f6;
  color: #222
}

.tags-tag__action:not(.st-button_style_none).disabled,
.tags-tag__action:not(.st-button_style_none)[aria-disabled=true],
.tags-tag__action:not(.st-button_style_none)[disabled] {
  background-color: #f6f6f6;
  color: #5E5E5E
}

.tags-tag__action:not(.st-button_style_none)[data-is-running] {
  padding: 6px 16px 6px 10px
}

.tags-modal-selector-modal main {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px
}

.tags-modal-selector-modal__subtitle {
  color: #777;
  margin-bottom: 16px
}

.tags-modal-selector-modal__selector {
  width: 380px;
  --tags-selector-item-offset: 12px;
  --tags-selector-child-offset-left-orientation: -8px
}

.tags-modal-selector-modal__selector .tags-selector-item {
  --tags-selector-arrow-normal-color: #999;
  --tags-selector-arrow-expanded-color: #999;
  --tags-selector-arrow-size: 12px
}

.tags-modal-selector-modal__wrapper {
  --custom-scrollbar-background: #fff;
  --custom-scrollbar-thumb-color: #e6e9ed;
  --custom-scrollbar-thumb-hover-color: #b7b7b7;
  --custom-scrollbar-thumb-active-color: #5e5e5e;
  --custom-scrollbar-resize-grip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23ccc'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>");
  overflow-y: auto;
  min-height: 100px;
  max-height: calc(100vh - 420px)
}

.tags-modal-selector-modal__wrapper::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--custom-scrollbar-background)
}

.tags-modal-selector-modal__wrapper::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-background)
}

.tags-modal-selector-modal__wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-thumb-color);
  border: 3px solid var(--custom-scrollbar-background)
}

.tags-modal-selector-modal__wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover-color)
}

.tags-modal-selector-modal__wrapper::-webkit-scrollbar-thumb:active {
  background-color: var(--custom-scrollbar-thumb-active-color)
}

.tags-modal-selector-modal__wrapper::-webkit-scrollbar-corner {
  background-color: var(--custom-scrollbar-background)
}

.tags-modal-selector-modal__wrapper::-webkit-resizer {
  background-image: var(--custom-scrollbar-resize-grip);
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: 2px 2px
}

.tags-course-tags {
  grid-template-areas: "btn note" "list list";
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 0 16px
}

.tags-course-tags__btn {
  grid-area: btn
}

.tags-course-tags__btn:not(.st-button_style_none) {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .25px
}

.tags-course-tags__note {
  grid-area: note;
  color: #777;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px
}

.tags-course-tags__note[data-is-overfilled] {
  color: #d41f1f
}

.tags-course-tags__list {
  grid-area: list;
  margin-top: 16px;
  --tags-list-margin-left: 0;
  --tags-list-style: none;
  --tags-tag-approved-bg: transparent;
  --tags-tag-max-width: none
}

.tags-course-tags__toast a {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.search-form-filter {
  grid-template-areas: "title toggler" "main main";
  grid-template-columns: 1fr -webkit-min-content;
  grid-template-columns: 1fr min-content;
  align-items: center;
  gap: 0 6px;
  --search-form-filter-toggler: url(/static/frontend/common_icons/chevron-down.svg);
  --search-form-filter-arrow-transform: rotate(-90deg);
  --search-form-filter-arrow-expanded-transform: none;
  --search-form-filter-arrow-size: 10px;
  --search-form-filter-cursor: pointer;
  --search-form-filter-arrow-normal-color: var(--theme-color-fg-tertiary);
  --search-form-filter-arrow-expanded-color: var(--theme-color-fg-tertiary);
  --search-form-filter-arrow-hover-color: var(--theme-color-fg-primary);
  --search-form-filter-arrow-expanded-hover-color: var(--theme-color-fg-primary)
}

.search-form-filter>.search-form-filter__toggler {
  background-color: var(--search-form-filter-arrow-color);
  transform: var(--search-form-filter-arrow-transform);
  cursor: var(--search-form-filter-cursor)
}

.search-form-filter__title {
  grid-area: title;
  padding: 6px 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .15px;
  color: #535366
}

.search-form-filter__title[data-can-expand] {
  cursor: var(--search-form-filter-cursor);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.search-form-filter__title[data-can-expand]:focus+.search-form-filter__toggler,
.search-form-filter__title[data-can-expand]:hover+.search-form-filter__toggler {
  --search-form-filter-arrow-color: var(--search-form-filter-arrow-hover-color)
}

.search-form-filter__toggler {
  grid-area: toggler;
  --search-form-filter-arrow-color: var(--search-form-filter-arrow-normal-color);
  content: "";
  width: var(--search-form-filter-arrow-size, .5em);
  height: var(--search-form-filter-arrow-size, .5em);
  vertical-align: middle;
  -webkit-mask-image: var(--search-form-filter-toggler);
  mask-image: var(--search-form-filter-toggler);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  transform: none
}

.search-form-filter__toggler:focus,
.search-form-filter__toggler:hover {
  --search-form-filter-arrow-color: var(--search-form-filter-arrow-hover-color)
}

.search-form-filter__toggler[data-expanded] {
  --search-form-filter-arrow-color: var(--search-form-filter-arrow-expanded-color);
  --search-form-filter-arrow-transform: var(--search-form-filter-arrow-expanded-transform)
}

.search-form-filter__toggler[data-expanded]:focus,
.search-form-filter__toggler[data-expanded]:hover {
  --search-form-filter-arrow-color: var(--search-form-filter-arrow-expanded-hover-color)
}

.search-form-filter__main {
  grid-area: main;
  font-size: 14px;
  padding: 0 16px;
  color: var(--theme-color-fg-tertiary)
}

.search-form-filter__main[data-toggler-area] {
  grid-area: toggler;
  padding: 0
}

.search-form-filter__vatiants {
  list-style: none;
  margin: 0
}

.search-form-filter__range {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start
}

.search-form-filter__range-item {
  font-size: 14px
}

.search-form-filter__range-item .st-input-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  border-radius: 4px;
  margin: 0;
  padding: 0
}

.search-form-filter__range-item .st-input-wrapper>.st-input {
  padding: 8px 12px;
  width: 78px;
  height: 35px;
  margin: 0;
  border: none
}

.search-form-filter__range-item .st-input-wrapper>span {
  padding: 8px 12px
}

.search-form-filter__range-item .st-input-wrapper .st-input+span {
  margin-left: -16px
}

.search-form-filter__range-item .the-form-field__caption {
  margin: 0 0 2px;
  color: #5E5E5E
}

.search-form-filter__range-sep {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px;
  margin-top: 20px;
  color: #000
}

.search-form-filter__range-presets {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px
}

.search-form-filter__range+.search-form-filter__range-presets {
  margin-top: 16px
}

.search-form-filter__range-presets-btn:not(.st-button_style_none) {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 16px;
  background-color: var(--theme-color-base-action-00);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px;
  color: var(--theme-color-base-action-3);
  -webkit-font-smoothing: antialiased
}

.search-form-filter__range-presets-btn:not(.st-button_style_none):focus,
.search-form-filter__range-presets-btn:not(.st-button_style_none):hover {
  background-color: var(--theme-color-base-action-00);
  border-color: var(--theme-color-base-action-1);
  color: var(--theme-color-base-action-3)
}

.search-form-filter__range-presets-btn:not(.st-button_style_none):active,
.search-form-filter__range-presets-btn:not(.st-button_style_none)[data-active] {
  background-color: var(--theme-color-base-action-1);
  border-color: var(--theme-color-base-action-3);
  color: var(--theme-color-fg-oncolorbg)
}

.instruction-editor__content h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .15px
}

.instruction-editor__content section+section {
  margin-top: 32px
}

.instruction-editor__content p {
  margin-bottom: 16px
}

.instruction-editor__content p+.form-group {
  margin-top: -16px
}

.instruction-editor__content .rich-text-editor__content {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .017857em
}

.instruction-editor__content .rich-text-editor__content:focus {
  box-shadow: none
}

.instruction-editor__content .error-msg {
  color: var(--theme-color-base-danger-2);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px
}

.instruction-editor__actions {
  position: relative
}

.instruction-editor__actions button:not(.st-button_style_none) {
  padding: 9px 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: .3px;
  -webkit-font-smoothing: antialiased
}

article+.instruction-editor__actions,
section+.instruction-editor__actions {
  margin-top: 32px;
  padding-bottom: 24px
}

.instruction-editor__actions+.toast-panel {
  margin-top: 16px
}

.instruction-editor-rubric__editor-wrapper {
  --rich-text-editor-border-color: var(--validation-border-color, #d1d1d1);
  border: 1px solid var(--rich-text-editor-border-color);
  border-radius: var(--rich-text-editor-border-radius)
}

.instruction-editor-rubric__editor-wrapper .cke_inner {
  border-radius: var(--rich-text-editor-border-radius)
}

.instruction-editor-rubric__editor-wrapper .cke_top {
  border-top-left-radius: var(--rich-text-editor-border-radius);
  border-top-right-radius: var(--rich-text-editor-border-radius)
}

.instruction-editor-rubric__editor-wrapper .cke_shared.cke_chrome {
  border: none
}

.instruction-editor-rubric__editor-wrapper .rich-text-editor__container {
  padding: 0 8px;
  min-height: 54px;
  outline: 0
}

.instruction-editor__error-msg {
  color: var(--theme-color-base-danger-2);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .4px;
  display: none;
  margin-top: 8px
}

.instruction-editor-rubric {
  display: grid;
  grid-template-areas: "title actions" "editor editor" "settings settings";
  align-items: start;
  grid-template-columns: 1fr -webkit-min-content;
  grid-template-columns: 1fr min-content;
  grid-template-rows: -webkit-min-content auto;
  grid-template-rows: min-content auto
}

.instruction-editor-rubric h3 {
  grid-area: title
}

.instruction-editor-rubric__editor {
  grid-area: editor
}

.instruction-editor-rubric__editor[data-is-invalid] {
  --validation-border-color: var(--theme-color-base-danger-2)
}

.instruction-editor-rubric__editor[data-is-invalid] .instruction-editor__error-msg {
  display: block
}

.instruction-editor-rubric__settings {
  grid-area: settings;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px
}

.instruction-editor-rubric__actions {
  grid-area: actions;
  font-size: 14px;
  display: flex;
  gap: 4px
}

.instruction-editor-rubric__action:not(.st-button_style_none) {
  width: 24px;
  height: 24px
}

.instruction-editor-rubric__cost.step-editor__input[type=number] {
  display: inline-block;
  margin: 0 8px 0 4px
}

.catalog-w>header>h1 {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 24px 0
}

@media (max-width:1024px) {
  .tags-modal-selector-modal__wrapper {
    max-height: calc(100vh - 320px)
  }

  .catalog-w>header>h1 {
    margin-bottom: 16px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: .17px
  }
}

.catalog-w__filters {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 16px 16px 12px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  --custom-scrollbar-background: #fff;
  --custom-scrollbar-thumb-color: #e6e9ed;
  --custom-scrollbar-thumb-hover-color: #b7b7b7;
  --custom-scrollbar-thumb-active-color: #5e5e5e;
  --custom-scrollbar-resize-grip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.946 19.946' fill='%23ccc'><g transform='translate(-5.19 -5.19)'><circle r='2' cy='23.136' cx='23.1357'/><circle cx='23.1357' cy='7.19' r='2'/><circle r='2' cy='15.263' cx='23.136'/><circle cx='15.263' cy='23.136' r='2'/><circle r='2' cy='23.071' cx='7.19'/><circle cx='15.234' cy='15.263' r='2'/></g></svg>")
}

@supports not selector(&::-webkit-scrollbar) {
  .custom-scrollbar {
    scrollbar-color: var(--custom-scrollbar-thumb-color) var(--custom-scrollbar-background);
    scrollbar-width: auto
  }

  .nav-menu,
  .paid-features__modal-popup .paid-features__content {
    scrollbar-color: var(--custom-scrollbar-thumb-color) var(--custom-scrollbar-background);
    scrollbar-width: thin
  }

  .step-text-wrapper .step-text__limit-value,
  .table-quiz {
    scrollbar-color: var(--custom-scrollbar-thumb-color) var(--custom-scrollbar-background);
    scrollbar-width: auto
  }

  .catalog-w__filters,
  .tags-modal-selector-modal__wrapper {
    scrollbar-color: var(--custom-scrollbar-thumb-color) var(--custom-scrollbar-background);
    scrollbar-width: thin
  }
}

.catalog-w__filters::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--custom-scrollbar-background)
}

.catalog-w__filters::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-background)
}

.catalog-w__filters::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--custom-scrollbar-thumb-color);
  border: 3px solid var(--custom-scrollbar-background)
}

.catalog-w__filters::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover-color)
}

.catalog-w__filters::-webkit-scrollbar-thumb:active {
  background-color: var(--custom-scrollbar-thumb-active-color)
}

.catalog-w__filters::-webkit-scrollbar-corner {
  background-color: var(--custom-scrollbar-background)
}

.catalog-w__filters::-webkit-resizer {
  background-image: var(--custom-scrollbar-resize-grip);
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: 2px 2px
}

.catalog-w__filters .search-form-filter {
  width: 263px
}

.catalog-w__filters-mobile {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px
}

.catalog-w__description {
  margin-bottom: 24px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: .3px
}

@media (max-width:1024px) {
  .catalog-w__description {
    margin-bottom: 16px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .25px
  }
}

.catalog-w__chips {
  margin-bottom: 24px
}

@media (max-width:1024px) {
  .catalog-w__chips {
    margin-bottom: 16px
  }
}

.catalog-w__content-header {
  margin: 0 0 20px
}

.catalog-w__content-header-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: -4px -12px;
  max-width: 688px
}

.catalog-w__content-header-toolbar>* {
  margin: 4px 12px
}

.catalog-w__content-header-toolbar .search-form__input {
  min-width: 240px
}

.catalog-w__search-order .select-box__toggle-btn {
  height: 36px;
  background-image: none !important;
  padding: 7px 11px !important
}

.catalog-w__search-order:not([data-is-default]) .select-box__toggle-btn {
  background-color: var(--theme-color-bg-accent-0d12)
}

.catalog-w__search-order-caption {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .15px;
  color: var(--theme-color-base-accent-3)
}

.catalog-w__search-order-caption[data-is-default] {
  color: var(--theme-color-fg-additional)
}

.catalog-w__search-order-caption[data-is-default] .svg-icon {
  color: var(--theme-color-fg-tertiary)
}

.catalog-w__search-order-caption .svg-icon {
  margin-left: 8px
}

.catalog-w__search-order-caption .svg-icon,
.catalog-w__search-order-caption .svg-icon svg {
  width: 16px;
  height: 16px
}

.catalog-w__search-form {
  position: relative;
  flex: 1;
  display: block;
  border-radius: 6px
}

.catalog-w__search-form input.search-form__input {
  height: 36px
}

.catalog-w__search-form .search-form__input-wrapper {
  margin-right: 24px
}

.catalog-w__search-form .form-checkbox,
.catalog-w__search-form .select-box {
  margin-right: 14px
}

.catalog-w__search-form .select-box .select-box__autowidth-measurer,
.catalog-w__search-form .select-box button.select-box__toggle-btn {
  height: 36px;
  padding: 8px 28px 8px 11px;
  border: none;
  background-color: transparent;
  background-position: calc(100% - 11px) center
}

.catalog-w__search-form .form-checkbox {
  letter-spacing: normal
}

.catalog-w__search-form .search-form__submit:not(.st-button_style_none) {
  padding: 9px 24px;
  height: 36px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: .3px;
  -webkit-font-smoothing: antialiased
}

.catalog-w__search-form-filters-mobile:not(.st-button_style_none) {
  display: none;
  margin-right: -2px;
  align-items: center;
  padding: 8px;
  font-size: 16px;
  color: #f3f4f6;
  background: 0 0;
  border: none;
  --focus-outline-color: rgba(100, 200, 255, 0.3)
}

.course__main-header,
.navbar__links[rubricator-onboarding][rubricator-onboarding=catalog] [data-navbar-item=catalog] .st-link.navbar__link:not(:hover),
.navbar__links[rubricator-onboarding][rubricator-onboarding=learn] [data-navbar-item=catalog] .st-link.navbar__link:not(:hover),
.navbar__links[rubricator-onboarding][rubricator-onboarding=teach] [data-navbar-item=catalog] .st-link.navbar__link:not(:hover),
.navbar__mobile-menu[rubricator-onboarding] button.st-button_style_none.navbar__mobile-menu-toggler {
  color: #fff
}

.catalog-w__search-form-filters-mobile:not(.st-button_style_none) .svg-icon {
  display: flex
}

.catalog-w__search-form-filters-mobile:not(.st-button_style_none)[data-active] .svg-icon::after {
  content: "";
  position: absolute;
  right: -1.5px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #6c6;
  border: 1px solid transparent
}

@media (max-width:768px) {
  .catalog-w__search-form-filters-mobile:not(.st-button_style_none) {
    display: inline-flex
  }

  .catalog-w__search-form .search-form__submit:not(.st-button_style_none) {
    display: none
  }
}

.course>.page-fragment {
  max-width: none;
  margin: 0
}

.course>header>h1 {
  margin: 24px 0 20px;
  font-size: 24px;
  font-weight: 400
}

.course>.marco-layout__content .col-xs-12:first-child {
  padding-left: 0
}

.course>.marco-layout__content .col-xs-12:last-child {
  padding-right: 0
}

.course__main-header {
  --menu-border-radius: 3px;
  --drop-down-spacing: 4px;
  --course-badge-default-bg: transparent;
  --course-badge-default-bgi: linear-gradient(106deg, rgba(179, 214, 255, 0.5) -26%, rgba(255, 255, 255, 0.5) 135%);
  --course-badge-default-fg: #f3f4f6;
  --course-badge-private-bg: var(--course-badge-default-bg);
  --course-badge-private-bgi: linear-gradient(105deg, rgb(144, 195, 255, 0.5) -26%, rgb(84, 138, 255, 0.5) 135%);
  --course-badge-private-fg: #fff;
  --course-badge-draft-bg: transparent;
  --course-badge-draft-bgi: linear-gradient(106deg, rgba(179, 214, 255, 0.5) -26%, rgba(255, 255, 255, 0.5) 135%);
  --course-badge-draft-fg: #f3f4f6;
  --course-badge-basic-bg: var(--course-badge-default-bg);
  --course-badge-basic-bgi: linear-gradient(107deg, rgb(158, 251, 255, 0.5) -26%, rgb(131, 173, 255, 0.5) 136%);
  --course-badge-basic-fg: #fff;
  --course-badge-basic-invalid-bg: var(--course-badge-default-bg);
  --course-badge-basic-invalid-bgi: linear-gradient(107deg, rgb(158, 251, 255, 0.5) -26%, rgb(131, 173, 255, 0.5) 136%);
  --course-badge-basic-invalid-fg: #fff;
  --course-badge-paid-bg: var(--course-badge-default-bg);
  --course-badge-paid-bgi: linear-gradient(107deg, rgb(126, 255, 244, 0.5) -26%, rgb(102, 204, 102, 0.5) 136%);
  --course-badge-paid-fg: #fff;
  --course-badge-paid-invalid-bg: var(--course-badge-default-bg);
  --course-badge-paid-invalid-bgi: linear-gradient(107deg, rgb(126, 255, 244, 0.5) -26%, rgb(102, 204, 102, 0.5) 136%);
  --course-badge-paid-invalid-fg: #fff;
  --course-badge-enterprise-bg: var(--course-badge-default-bg);
  --course-badge-enterprise-bgi: linear-gradient(92.32deg, rgba(207, 209, 254, 0.5) 47.03%, rgba(158, 139, 212, 0.5) 100.95%);
  --course-badge-enterprise-fg: #fff;
  --course-badge-spec-bg: #6C7BDF;
  --course-badge-spec-bgi: none;
  --course-badge-spec-fg: #fff;
  display: flex;
  align-items: flex-start;
  min-height: 50px;
  padding: 13px 12px;
  background-color: #282b41
}

.course__toggle-nav-menu.st-button_style_none {
  display: inline-flex;
  padding: 6px 3px;
  margin: 0 16px 0 0;
  font-size: 12px;
  color: inherit
}

.course__header-title {
  padding-top: 1px;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .14px;
  white-space: normal;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.course__header-right-side {
  margin-left: auto;
  display: flex;
  align-items: center
}

.course__header-right-side>.button:not(.st-button_style_none),
.course__header-right-side>button:not(.st-button_style_none) {
  margin: 0 0 0 16px;
  padding: 7px 15px;
  font-size: 12px;
  line-height: 1.17;
  letter-spacing: .4px;
  border-radius: 4px
}

.course__header-right-side>.button:not(.st-button_style_none).success.is-outlined,
.course__header-right-side>button:not(.st-button_style_none).success.is-outlined {
  filter: brightness(1.2)
}

.course__header-right-side>.drop-down {
  margin: 0 0 0 16px
}

.course-edit-info__aside-panel,
.course__reviews {
  margin-top: 24px;
  font-size: 14px
}

.course__header-right-side>.drop-down .drop-down__toggler {
  display: flex
}

.course__header-right-side .drop-down__toggler>button.st-button_style_none,
.course__header-right-side>.button.st-button_style_none,
.course__header-right-side>button.st-button_style_none {
  padding: 3px;
  font-size: 18px;
  color: inherit
}

.course__header-right-side .drop-down__toggler>button.st-button_style_none .svg-icon,
.course__header-right-side>.button.st-button_style_none .svg-icon,
.course__header-right-side>button.st-button_style_none .svg-icon {
  display: flex
}

.course__header-right-side .menu-item .svg-icon {
  color: #999
}

.course-reviews__editor {
  margin-bottom: 40px
}

.course__review-summary {
  width: 324px
}

.new-course__links {
  margin-top: 24px
}

body[data-route="course.edit"] .page-footer,
body[data-route="course.edit-info"] .page-footer,
body[data-route="course.edit-adaptiveness"] .page-footer,
body[data-route="course.edit-certificate"] .page-footer,
body[data-route="course.instructor_dashboard"] .page-footer,
body[data-route^=lesson-edit] .page-footer,
body[data-route^=step-edit] .page-footer {
  display: none
}

body[data-route="course.edit"] .woof-container,
body[data-route="course.edit-info"] .woof-container,
body[data-route="course.edit-adaptiveness"] .woof-container,
body[data-route="course.edit-certificate"] .woof-container,
body[data-route="course.instructor_dashboard"] .woof-container,
body[data-route^=lesson-edit] .woof-container,
body[data-route^=step-edit] .woof-container {
  bottom: 70px
}

@media (max-width:768px) {
  .course__review-summary {
    width: 100%
  }

  body[data-route^=lesson-edit] .woof-container,
  body[data-route^=step-edit] .woof-container {
    bottom: 105px
  }
}

.course-edit-info__aside-panel {
  padding: 16px;
  border: 1px solid #f6f6f6;
  border-radius: 4px;
  line-height: 20px;
  letter-spacing: .25px
}

.course-edit-info__aside-panel a {
  white-space: nowrap
}

.course-edit-info__aside-panel a::after {
  content: "";
  display: inline-block;
  margin: 0 0 0 var(--external-link-icon-offset, 3px);
  position: relative;
  width: var(--external-link-icon-size, .5em);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--external-link-icon-color, #1466C6)
}

.course-comments__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline
}

.course-comments__header-link {
  --link-line: none;
  font-size: 14px
}

.course-comments__header-link .svg-icon,
.course-comments__header-link svg {
  width: 17px;
  height: 17px;
  line-height: 1
}

.course-comments__header-link svg {
  position: relative;
  bottom: -.25em
}

.course-checklist__content-header {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .17px;
  line-height: 22px
}

.course-blacklist__header {
  display: grid;
  grid-template-areas: "user period reason actions";
  align-items: start;
  grid-template-columns: 244px 1fr 1fr 20px;
  gap: 0 12px;
  padding: 12px 0 12px 12px;
  background-color: #f3f4f6;
  color: #5e5e5e;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .15px
}

.course-blacklist__links {
  margin-top: 24px
}

.course-blacklist__header-cell[data-type=user] {
  grid-area: user
}

.course-blacklist__header-cell[data-type=period] {
  grid-area: period
}

.course-blacklist__header-cell[data-type=reason] {
  grid-area: reason
}

.course-blacklist__header-cell[data-type=actions] {
  grid-area: actions
}

.course-blacklist__tile {
  display: grid;
  grid-template-areas: "userpic username period reason actions" "userpic moderator moderator reason actions";
  align-items: start;
  grid-template-columns: 32px 200px 1fr 1fr 20px;
  grid-template-rows: -webkit-min-content 1fr;
  grid-template-rows: min-content 1fr;
  gap: 4px 12px;
  padding: 12px 0 12px 12px;
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: .25px
}

.course-blacklist__tile+.course-blacklist__tile {
  border-top: 1px solid #E9EBFA
}

.course-blacklist__tile:hover {
  box-shadow: 0 15px 18px -14px #E9EBFA, 0 3px 2px -2px #E9EBFA
}

.course-blacklist__tile-userpic {
  grid-area: userpic;
  width: 32px;
  height: 32px
}

.course-blacklist__tile-username {
  grid-area: username;
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222
}

.course-blacklist__tile-moderator {
  grid-area: moderator;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px;
  color: #777
}

.course-blacklist__tile-period {
  grid-area: period;
  white-space: nowrap
}

.course-blacklist__tile-reason {
  grid-area: reason
}

.course-blacklist__tile-actions {
  grid-area: actions
}

.course-blacklist__menu,
.course-blacklist__menu>.drop-down-toggler {
  display: inline-flex
}

button:not(.st-button_style_none).course-blacklist__action-btn {
  padding: 3px;
  background: 0 0;
  border: none;
  color: #999;
  font-size: 18px;
  outline: 0
}

button:not(.st-button_style_none).course-blacklist__action-btn:focus,
button:not(.st-button_style_none).course-blacklist__action-btn:hover {
  color: #5e5e5e
}

button:not(.st-button_style_none).course-blacklist__action-btn:active,
button:not(.st-button_style_none).course-blacklist__action-btn[data-active] {
  color: #222
}

button:not(.st-button_style_none).course-blacklist__action-btn .svg-icon {
  display: flex
}

.course-blacklist__loader {
  margin: 48px 0
}

.course-blacklist__no-results {
  margin: 24px 0;
  font-size: 14px;
  letter-spacing: .25px
}

.course-blacklist__no-results .btn-link {
  margin-left: 20px
}

.course-blacklist__empty-note {
  margin: 0 0 24px;
  max-width: 640px;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: .3px
}

.course-blacklist__empty-note a {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.course-blacklist__empty-note-img {
  height: 150px;
  opacity: .38
}

.course-blacklist__empty-note-desc {
  margin-top: 24px
}

button:not(.st-button_style_none).course-blacklist__load-more-btn {
  margin-top: 20px;
  padding: 7px 16px;
  font-size: 14px
}

.course-advanced-settings__section {
  border-radius: 4px
}

.course-advanced-settings__section+.course-advanced-settings__section {
  margin-top: 44px
}

.course-advanced-settings__section:empty {
  display: none
}

.course-advanced-settings__aside>*+* {
  margin-top: 24px
}

.course-advanced-settings__form,
.course-advanced-settings__form .the-form__field {
  margin: 0
}

.course-advanced-settings__form .the-form-field__caption {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .15px
}

.course-advanced-settings__used-paid-features {
  margin: 10px 0 0;
  font-size: 14px
}

.course-advanced-settings__used-paid-features li+li {
  margin-top: 4px
}

.course-search__content-header,
.teachlearn__content-header {
  margin: 0 0 20px
}

.course-advanced-settings__lti-editor {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.course-advanced-settings__toggler {
  display: inline-flex
}

.course-advanced-settings__toggler .ui-toggler__label {
  display: inline;
  text-align: left
}

.course-search__content-header-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: -4px -12px
}

.course-search__content-header-toolbar>* {
  margin: 4px 12px
}

.course-search__content-header-toolbar .search-form__input {
  min-width: 320px
}

.course-search__loader {
  margin: 48px 0
}

.course-search__no-results {
  margin: 24px 0;
  font-size: 14px;
  letter-spacing: .25px
}

.course-search__no-results .btn-link {
  margin-left: 20px
}

.course-search__empty-placeholder-img {
  display: block;
  margin: 24px 0 0;
  height: 160px;
  width: 200px;
  opacity: .38
}

button:not(.st-button_style_none).course-search__load-more-btn {
  margin-top: 20px;
  padding: 7px 16px;
  font-size: 14px
}

@media (max-width:768px) {
  .course-blacklist__tile-period {
    white-space: normal
  }

  .course-search__search-form {
    flex-grow: 1
  }

  .course-search__search-form .search-form__input-wrapper {
    margin-right: 0
  }

  .course-search__search-form-submit {
    display: none !important
  }
}

body[data-route="course.pay"] .auth-modal,
body[data-route="step.lesson-end"] .auth-modal {
  z-index: var(--z-modal-popup)
}

.teachlearn>header>h1 {
  margin: 24px 0 20px;
  font-size: 24px;
  font-weight: 400
}

@media (max-width:768px) {
  .teachlearn>header>h1 {
    margin: 4px 0 16px;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: .17px
  }
}

.teachlearn__mobile-nav {
  padding: 16px 0
}

.teachlearn__course-nav {
  display: flex;
  flex-direction: column
}

.teachlearn__header-breadcrumbs {
  display: flex;
  align-items: center;
  margin: 0 0 16px
}

.teachlearn__header-breadcrumb,
.teachlearn__header-breadcrumb-dropdown .drop-down-toggler>button {
  margin: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: .17px
}

.teachlearn__header-breadcrumb-separator {
  display: inline-flex;
  margin: 0 16px;
  width: 14px;
  height: 14px;
  color: #999
}

.teachlearn__header-breadcrumb-separator svg {
  width: 100%;
  height: 100%
}

.teachlearn__header-breadcrumb-dropdown {
  margin-left: -16px
}

.teachlearn__header-breadcrumb-dropdown .drop-down-toggler>button {
  padding: 8px 40px 8px 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 10 10'><path fill='%23999' fill-rule='evenodd' d='M4 7l5 5 5-5H4'/></svg>") no-repeat;
  border: none;
  color: #5e5e5e;
  background-size: 10px;
  background-position: calc(100% - 16px) 50%
}

.teachlearn__header-breadcrumb-dropdown .drop-down-toggler>button:active,
.teachlearn__header-breadcrumb-dropdown .drop-down-toggler>button:focus,
.teachlearn__header-breadcrumb-dropdown .drop-down-toggler>button:hover {
  border: none;
  color: #222;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 10 10'><path fill='%23666' fill-rule='evenodd' d='M4 7l5 5 5-5H4'/></svg>")
}

.teachlearn__content-header-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: -4px -12px
}

.teachlearn__content-header-toolbar>* {
  margin: 4px 12px
}

.teachlearn__content-header-toolbar .search-form__input {
  min-width: 240px
}

.teachlearn__empty-note {
  margin: 0 0 24px;
  max-width: 640px;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: .3px
}

.teachlearn__empty-note a {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.teachlearn__empty-placeholder-img {
  display: block;
  margin: 0 0 24px;
  height: 160px;
  width: 200px;
  opacity: .38
}

.teachlearn__loader {
  margin: 48px 0
}

.teachlearn__no-results {
  margin: 24px 0;
  font-size: 14px;
  letter-spacing: .25px
}

.teachlearn__no-results .btn-link {
  margin-left: 20px
}

button:not(.st-button_style_none).teachlearn__load-more-btn {
  margin-top: 20px;
  padding: 7px 16px;
  font-size: 14px
}

.teachlearn__filter-toggler {
  display: inline-flex;
  position: relative;
  padding: 4px
}

.teachlearn__filter-toggler[data-filter-applied]::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 6px;
  height: 6px;
  background-color: #54ad54;
  border-radius: 6px
}

.teachlearn__filter-toggler .svg-icon,
.teachlearn__filter-toggler .svg-icon svg {
  width: 16px;
  height: 16px
}

@media (min-width:1025px) {
  .teachlearn__new-course-form {
    max-width: 600px
  }
}

.teachlearn__banner {
  margin-bottom: 24px;
  border-radius: 8px
}

@media (max-width:768px) {
  .teachlearn__search-form {
    flex-grow: 1
  }

  .teachlearn__search-form .search-form__input-wrapper {
    margin-right: 0
  }

  .teachlearn__filter {
    order: 1;
    margin: 4px 8px 4px -10px
  }

  .teachlearn__search-form-submit {
    display: none !important
  }
}

.teach-lessons__lesson-orphaned {
  color: #999
}

.teach-lessons__lesson-blank {
  color: #ff7965
}

.teach-students__header,
.teach-students__list {
  max-width: 640px
}

.teach-students__header {
  display: flex;
  background-color: #f3f4f6;
  color: #5e5e5e;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .15px
}

.teach-students__header-user {
  width: 282px;
  padding: 12px
}

.teach-students__header-class {
  padding: 12px
}

.teach-students__list .users-list__item {
  width: 100%;
  justify-content: space-between;
  padding: 6px 0;
  transition: all .3s
}

.teach-students__list .users-list__item:hover {
  box-shadow: 0 14px 14px -8px #E9EBFA, 0 4px 2px -2px #E9EBFA
}

.teach-students__list .users-list__avatar {
  padding-left: 12px
}

.teach-students__list .users-list__username {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222;
  width: 218px
}

.teach-students__list .users-list__slot {
  flex: 1;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.teach-students__list .dismiss-button button:not(.st-button_style_none) {
  color: #ccc
}

.teach-students__list .dismiss-button button:not(.st-button_style_none):active,
.teach-students__list .dismiss-button button:not(.st-button_style_none):focus,
.teach-students__list .dismiss-button button:not(.st-button_style_none):hover {
  color: #d41f1f
}

@media (max-width:768px) {
  .teach-students__list .users-list__item {
    display: grid;
    grid-template-areas: "userpic username buttons" "userpic desc desc";
    align-items: start;
    grid-template-columns: 32px 1fr 20px;
    gap: 9px 12px;
    padding: 12px 0
  }

  .teach-students__list .users-list__avatar {
    padding: 0;
    margin: 0;
    grid-area: userpic;
    width: 32px
  }

  .teach-students__list .users-list__username {
    grid-area: username
  }

  .teach-students__list .users-list__slot {
    grid-area: desc;
    margin: 0
  }

  .teach-students__list .users-list__buttons {
    grid-area: buttons;
    margin: 0
  }

  .teach-students__list .dismiss-button button:not(.st-button_style_none) {
    padding: 3px
  }

  .teach-students__header {
    display: none
  }
}

.learn-index__section>h1 {
  margin: 40px 0 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: .15px
}

.learn-index__section_catalog-block {
  --horizontal-scroller-extra-hor-padding: 20px
}

.learn-index__section_catalog-block .catalog-course-cards__hor-scroller {
  margin-top: 20px;
  margin-bottom: 20px
}

.learn-index__section_catalog-block .catalog-course-cards__hor-scroller .horizontal-scroller__content {
  padding: 20px var(--horizontal-scroller-extra-hor-padding);
  margin: calc(20px * -1) calc(var(--horizontal-scroller-extra-hor-padding) * -1)
}

.learn-index__section_catalog-block .catalog-course-cards__hor-scroller .horizontal-scroller__content .course-cards__item {
  scroll-margin: var(--horizontal-scroller-extra-hor-padding)
}

.learn-index__section_catalog-block .catalog-course-cards__hor-scroller .horizontal-scroller__content .course-cards__item:last-child {
  position: relative
}

.learn-index__section_catalog-block .catalog-course-cards__hor-scroller .horizontal-scroller__content .course-cards__item:last-child::after {
  content: "";
  display: block;
  position: absolute;
  right: calc(var(--horizontal-scroller-extra-hor-padding) * -1);
  width: var(--horizontal-scroller-extra-hor-padding);
  height: 1px
}

.learn-index__dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px
}

html.no-flexbox-gap .learn-index__dashboard>* {
  margin: 0 24px 16px 0
}

.learn-index__section-divider {
  margin: 40px 0;
  height: 1px;
  border: none;
  background-color: #E9EBFA
}

.licfr__link-action {
  --link-color: #6c7bdf;
  --link-hover-color: initial;
  --link-active-color: initial;
  --link-line-color: transparent;
  --link-hover-line-color: #6c7bdf;
  --link-active-line-color: #6c7bdf
}

.learn-index__last-activity {
  width: auto;
  max-width: 496px;
  min-width: 328px;
  flex: 1
}

@media (max-width:768px) {
  .learn-index__dashboard {
    flex-direction: column
  }

  .learn-index__section_catalog-block {
    --horizontal-scroller-extra-hor-padding: 12px
  }
}

@media (max-width:1310px) {
  .learn-index__section_catalog-block .catalog__block {
    --horizontal-scroller-btns-offset: -10px
  }
}

.review-session {
  padding-bottom: 36px
}

.review-session__title {
  margin: 28px 0 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3
}

.review-session__reviews+.review-session__reviews {
  margin-top: 2em
}

.review-session__reviews-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .75px;
  margin: .5em 0
}

.review-session__review-show {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden
}

.instruction__actions,
.rubric {
  border-top: 1px solid #eee
}

.review-session__status {
  margin: 24px 0
}

.review-session__status-help-tip {
  margin-left: 4px;
  vertical-align: middle
}

.review-session__status-help-tip .svg-icon {
  font-size: 18px;
  opacity: .3
}

.review-session__status-help-tooltip {
  max-width: 80vw;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .4px
}

#review-session-given-anchor,
#review-session-taken-anchor {
  position: relative;
  top: -70px
}

@media (max-width:1024px) {
  .review-session {
    padding-left: 10px;
    padding-right: 10px
  }
}

.instruction-wrapper {
  max-width: 996px;
  margin: 1em auto;
  border: 1px solid #eee;
  position: relative
}

.instruction-wrapper h3 {
  margin-bottom: .8em
}

.instruction__inner {
  position: relative;
  padding: 1.625em
}

.instruction__info {
  padding: .625em 1.625em;
  border-left: .3125em solid #6c6;
  margin: 36px 0
}

.instruction__info.instruction__info_error {
  border-left-color: #90d
}

.instruction__block {
  flex-flow: row-reverse wrap;
  display: flex;
  align-items: flex-start;
  padding: .375em 0 1em
}

.instruction__block.instruction__block_with-help .instruction__block-inner {
  padding-right: 4.0625em
}

.instruction__block-inner {
  flex-grow: 1
}

.instruction__help {
  font-size: .875em;
  max-width: 19.2857142857em;
  padding: 16px;
  background: #a5e5a5;
  transform: translateY(.75em);
  line-height: 1.3
}

.instruction__help.instruction__help_hidden {
  visibility: hidden
}

.instruction__title-help {
  color: #a5a5a5;
  font-weight: 400
}

.instruction__rubrics {
  margin-top: 1.625em
}

.instruction__actions {
  position: relative;
  padding: 2.25em 0 0;
  overflow: hidden
}

.instruction__actions .button,
.instruction__actions button {
  margin-right: 1.125em
}

.instruction__input-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap
}

.instruction__input-wrapper input {
  margin-bottom: 0;
  margin-right: .75em;
  width: 7.5em;
  min-width: 7.5em
}

.instruction__text {
  font-size: .875em;
  background-color: #eee;
  padding: 1em 1.1428571429em
}

.instruction__text p {
  line-height: 1.4;
  min-height: 1.4em;
  margin-bottom: 0
}

@media screen and (max-width:767px) {
  .instruction-wrapper h3 {
    font-size: 1em;
    padding-left: 1em;
    padding-right: 1em
  }

  .instruction__inner {
    padding: 1em 0 .375em
  }

  .instruction__help {
    display: none
  }

  .instruction__info-wrapper,
  .instruction__submission {
    padding-left: 1em;
    padding-right: 1em
  }

  .instruction__block {
    padding-left: 0;
    padding-right: 0
  }

  .instruction__block-inner {
    padding-right: 0 !important
  }

  .instruction__actions {
    padding: 1em 0 0;
    flex-wrap: wrap
  }

  .instruction__actions .button,
  .instruction__actions button {
    float: none !important;
    margin: .5em auto;
    display: block;
    width: 90%;
    max-width: 18.75em
  }
}

.rubric__title {
  flex: 1 100%
}

.rubric__top {
  display: flex;
  align-items: center;
  position: relative
}

.rubric__actions {
  height: 2em;
  width: 5.875em;
  min-width: 5.875em;
  overflow: hidden
}

.rubric__action {
  width: 2em;
  height: 2em;
  float: right;
  color: #ccc;
  border: 1px solid #eee;
  cursor: pointer;
  transition: color .3s;
  margin-left: -.0625em;
  padding: .3125em 0 0;
  text-align: center;
  position: relative
}

.rubric__action:hover {
  z-index: 7;
  color: #000;
  border-color: inherit
}

.rubric__action svg {
  width: 16px;
  height: 16px
}

.rubric__max-point {
  color: #000;
  margin: 1.8571428571em 0 0
}

.rubric__max-point .rubric__cost {
  width: 7.5em;
  margin-top: .875em
}

.rubric__editor-wrapper {
  border: 1px solid #d1d1d1
}

.rubric__editor-wrapper .cke_shared.cke_chrome {
  border: none
}

.rubric__editor-wrapper .rich-text-editor__container {
  padding: 0 8px;
  min-height: 54px;
  outline: 0
}

@media screen and (max-width:767px) {
  .rubric {
    position: relative
  }

  .rubric__top {
    position: static
  }

  .rubric__actions {
    position: absolute;
    top: -1px;
    right: -1px
  }
}

.review-new__modal-header {
  margin: 6px 0 24px;
  font-size: 24px;
  font-weight: 400
}

.review-new__submission-head {
  display: flex;
  align-items: center;
  margin-bottom: 16px
}

.review-new__submission-next.button:not(.st-button_style_none),
.review-new__submission-prev.button:not(.st-button_style_none) {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  font-size: 12px;
  line-height: 1.17;
  letter-spacing: .4
}

.review-new__submission-next>.svg-icon,
.review-new__submission-prev>.svg-icon {
  display: inline-flex;
  font-size: 14px
}

.review-new__submission-prev>.svg-icon {
  margin-left: -3px;
  margin-right: 9px
}

.review-new__submission-next>.svg-icon {
  margin-right: -3px;
  margin-left: 9px
}

.review-new__submission-header {
  flex: 1;
  margin: 0 24px;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.review-new__submission-show {
  margin-bottom: 16px
}

.review-new__actions {
  display: flex;
  flex-wrap: wrap;
  margin: 16px 0 12px
}

.review-new__actions>button {
  padding: 9px 24px
}

.review-new__actions>button+button {
  margin-left: 16px
}

@-webkit-keyframes rollUp {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0;
    pointer-events: none
  }
}

@keyframes rollUp {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0;
    pointer-events: none
  }
}

body[data-route^="step."] .page-footer {
  display: none
}

.lesson {
  position: relative;
  background: #fff
}

.lesson .lesson-widget {
  max-width: 990px;
  margin: 0 auto
}

.lesson-wrapper {
  position: static;
  width: 100%
}

.lesson-wrapper .lesson__license-badge,
.lesson-wrapper .lesson__update-date {
  text-align: right
}

.lesson-wrapper .lesson__license-badge {
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  border-radius: 11px;
  padding: 0 10px;
  margin-left: auto;
  margin-right: 5px
}

.lesson-wrapper .lesson__license-icon svg {
  height: 15px;
  width: 15px;
  position: relative;
  top: 2px
}

.lesson-wrapper .lesson__footer {
  display: flex;
  padding: 20px 0;
  font-size: 14px;
  color: #777;
  align-items: baseline
}

.lesson-wrapper .lesson-player {
  height: 56em;
  width: 60em;
  position: relative;
  margin: .5em auto 0;
  overflow: hidden
}

.lesson-wrapper.fullscreen .lesson__discussions-wrapper,
.lesson-wrapper.zen-mode .lesson__discussions-wrapper {
  display: none
}

.lesson-wrapper.embeded:not(.fullscreen) {
  border-radius: 0;
  border: 10px solid #222;
  border-top: 0;
  overflow: auto
}

.lesson-wrapper.zen-mode {
  padding: 0;
  background: 0 0;
  height: calc(100vh - var(--header-height))
}

.lesson-wrapper.zen-mode .lesson {
  height: 100%;
  background: #fff;
  border-bottom: 0;
  display: flex;
  flex-direction: column
}

.lesson-wrapper.zen-mode .lesson .lesson__step-pins {
  flex: 0 0 62px
}

.lesson-wrapper.zen-mode .lesson .lesson__player {
  max-width: 100%;
  margin-left: 0;
  height: 100%;
  width: 100%;
  border: 0;
  flex: 1
}

.lesson-wrapper.zen-mode .lesson .lesson__player .step-text-wrapper {
  height: auto;
  border: none
}

.lesson-wrapper.zen-mode .lesson .lesson__player .quiz-layout-head.step-text-wrapper {
  padding-bottom: 15em
}

.lesson-wrapper.zen-mode .lesson .lesson__player .step-wrapper {
  position: relative;
  overflow: auto;
  flex-grow: 1;
  display: flex;
  min-width: 100%
}

.lesson-wrapper.zen-mode .lesson .lesson__footer,
.lesson-wrapper.zen-mode .step-view .attempt-wrapper.hidden .attempt-review,
.lesson-wrapper.zen-mode .step-view .attempt-wrapper.hidden .attempt__inner {
  display: none
}

.lesson-wrapper.zen-mode .lesson .lesson__player .step-inner {
  position: relative;
  min-height: 100%;
  flex-grow: 1
}

.lesson-wrapper.zen-mode .lesson .lesson__header {
  overflow: hidden;
  padding: 0 .4545454545em;
  font-size: .6875em;
  background: #eee
}

.lesson-wrapper.zen-mode .step-view .attempt-wrapper {
  position: relative;
  width: 100%;
  bottom: 0;
  margin-top: auto;
  z-index: 10
}

.lesson-wrapper.zen-mode .step-dynamic-container>.step-view {
  display: flex;
  flex-direction: column
}

.lesson-wrapper.zen-mode .quiz-layout-head {
  position: relative;
  top: 0;
  width: 100%;
  padding-bottom: 20px
}

.lesson-wrapper.zen-mode .lesson-side {
  top: 0
}

.lesson-wrapper.zen-mode .lesson__go-top-wrapper {
  display: none !important
}

.lesson-wrapper.fullscreen {
  background: 0 0;
  overflow-x: hidden;
  overflow-y: auto
}

.lesson-wrapper.fullscreen .lesson__mode_mode_adaptive {
  margin-top: 60px;
  width: 100%
}

.lesson-wrapper.small .attempt-review,
.lesson-wrapper.small .attempt__footer,
.lesson-wrapper.small .attempt__inner,
.lesson-wrapper.small .attempt__message,
.lesson-wrapper.small .lesson__footer,
.lesson-wrapper.small .lesson__step-pins,
.lesson-wrapper.small .step-wrapper {
  padding-left: 6px;
  padding-right: 6px
}

.lesson-wrapper.small .lesson__player {
  border-left: none;
  border-right: none
}

.lesson-wrapper.small.zen-mode .lesson__player .player-content-wrapper {
  border-top: 1px solid #eee
}

.lesson-wrapper.small.zen-mode.toc-showed .lesson .lesson__player .player-content-wrapper {
  margin-top: 0
}

.lesson-wrapper .step-actions {
  margin-top: 20px
}

.lesson__go-top-wrapper {
  position: fixed;
  bottom: 16px;
  right: 16px
}

.lesson__go-top.st-button_style_none {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 100%;
  opacity: .76;
  background-color: #fff;
  color: #222;
  cursor: pointer;
  box-shadow: 1px 2px 12px rgba(94, 94, 94, .12);
  transition: all .3s
}

.lesson__go-top.st-button_style_none:hover {
  opacity: 1;
  box-shadow: 0 1px 5px 3px rgba(0, 0, 0, .05)
}

.lesson__go-top.st-button_style_none .svg-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%
}

.lesson__go-top.st-button_style_none svg {
  width: 16px;
  height: 16px
}

.lesson__mode {
  font-size: 14px;
  padding: 20px 26px;
  display: flex;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-overflow: ellipsis;
  transition: background .3s;
  flex-wrap: wrap
}

@media (max-width:600px) {
  .lesson__mode {
    padding-left: 20px
  }
}

.lesson__mode.lesson__mode_mode_adaptive {
  background: #EFF6F9
}

.lesson__mode.lesson__mode_mode_reminder {
  background: #F9F8F4
}

.lesson__mode.lesson__mode_mode_exam {
  background: #f6f6f6;
  border-color: #EAEAEA
}

.lesson__mode.lesson__mode_mode_exam-alert {
  background: rgba(255, 121, 101, .12);
  border-color: #EAEAEA
}

.zen-mode .lesson__mode.lesson__mode_mode_review {
  display: none
}

.lesson__mode .lesson__mode-refresh-icon {
  color: #939393;
  top: 2px
}

.lesson__mode .lesson__mode-refresh-icon svg {
  width: 14px;
  height: 14px
}

.lesson__mode .lesson__mode-title {
  white-space: nowrap;
  width: 100%;
  flex: 1 1 200px;
  text-overflow: ellipsis
}

.lesson__mode .lesson__mode-title+.lesson__mode-buttons {
  margin-left: 14px
}

.lesson__mode[data-proctor-exam] {
  align-items: center;
  padding: 8px 16px;
  margin-bottom: 16px
}

.lesson__mode[data-proctor-exam] .lesson__mode-title {
  width: auto;
  flex: none;
  margin-right: 24px
}

.lesson__mode[data-proctor-exam] .lesson__mode-buttons button:not(.st-button_style_none) {
  padding: 6px 16px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.lesson__mode[data-proctor-exam] .lesson__mode-buttons button:not(.st-button_style_none).btn-link {
  margin: 0 -16px
}

.lesson__mode .lesson__mode-timer {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 24px 0 0
}

.lesson__mode .lesson__mode-timer .time-left {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .15px
}

.lesson__mode .lesson__mode-timer .time-left span[data-part] {
  padding: 8px 4px;
  background: #EAEAEA;
  border-radius: 4px
}

.lesson__mode .lesson__mode-timer .time-left span[data-sep] {
  margin: 0 4px
}

.lesson__mode .lesson__mode-buttons {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lesson__mode .lesson__mode-button {
  text-decoration: underline;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lesson__mode .lesson__mode-button:not(.lesson__mode-button_role_main) {
  color: #000
}

.lesson__mode .lesson__mode-button.lesson__mode-button_role_main[disabled] {
  color: #939393
}

.lesson__mode .lesson__mode-button:not(:last-child) {
  margin-right: 20px
}

@media (max-width:600px) {
  .lesson__mode .lesson__mode-button {
    margin-right: 20px;
    flex: 1 1 100%;
    text-align: left
  }
}

.lesson__mode_adaptive_loading_div {
  height: 5px;
  width: 100%;
  position: relative;
  margin-top: -20px
}

.lesson__mode-course-review-header {
  font-size: 20px;
  margin: 12px -6px 0;
  position: absolute
}

.lesson__mode-course-review-footer {
  font-size: 13px;
  margin: 0 -6px
}

.lesson__mode_adaptive_loading_bar {
  position: relative;
  height: 5px;
  width: 100%;
  background-color: #3c3;
  -webkit-animation-name: adaptive-loader-animation;
  animation-name: adaptive-loader-animation;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

.lesson__header {
  position: relative;
  padding: 1.75em 0 3.25em
}

.lesson__player {
  position: relative;
  margin: 0 auto;
  padding-top: 26px;
  background: #fff;
  padding-bottom: 15px;
  border: 1px solid #ddd;
  border-top: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px
}

.embedded .lesson__player {
  width: 50em
}

.zen-mode .lesson__player {
  flex-direction: column;
  display: flex
}

.lesson__player .lesson__step-pins {
  padding: 0 13px
}

.lesson__player[data-type=quiz],
.lesson__player[data-type=video] {
  padding-bottom: 0
}

.lesson__player .lesson__step-pins .step-link:focus {
  outline: 0
}

.lesson__player .step-show {
  min-height: 100%;
  display: flex;
  flex-grow: 1
}

.lesson__player[data-type=video] .player-content-wrapper {
  margin-top: 0;
  overflow: hidden
}

.lesson__player[data-type=video] .step-view_video {
  overflow: hidden !important
}

.lesson__player[data-type=video] .step-view_video .step-wrapper {
  padding: 0
}

.lesson__player .attempt-wrapper {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px
}

.lesson__player .submit-submission.submit-submission_step_restrictions:focus {
  -webkit-animation: tada 1s;
  animation: tada 1s
}

.lesson__player .lesson__step-pins {
  z-index: 13;
  margin-bottom: -1px;
  height: 62px;
  position: relative;
  display: flex;
  flex: 0 0;
  flex-wrap: nowrap
}

.lesson__player .step-wrapper {
  padding: 0 26px
}

.lesson__player .step-text-wrapper {
  font-size: 16px;
  min-height: 4.625em
}

.lesson__player .player-content-wrapper {
  flex: 1 1;
  flex-direction: column
}

.lesson__player .modal-dialog .modal-dialog-block {
  padding: 1.25em
}

@media screen and (max-width:1024px) {
  .lesson__player {
    margin-left: 0;
    width: 100%;
    max-width: 100vw
  }

  .lesson__header {
    padding-right: 300px
  }
}

@media screen and (max-width:640px) {
  .lesson__header {
    padding-right: 65px
  }
}

@media screen and (max-width:450px) {
  .lesson__player {
    padding-top: 30px
  }
}

@media print {

  .lesson,
  .lesson__player {
    border: none !important
  }

  .attempt-wrapper,
  .discussions-list,
  .lesson-side,
  .lesson__step-pins,
  .page_footer,
  .video-player__container,
  .video-player__side-subtitles {
    display: none !important
  }

  .lesson__player {
    padding-top: 2em
  }

  .lesson__header,
  .lesson__player .step-wrapper {
    padding: 0
  }

  .step-view {
    min-height: 0
  }
}

.lesson__step-title {
  margin-right: auto;
  font-size: 20px;
  color: #5e5e5e
}

.lesson__likes-widget+.lesson__step-title {
  margin-left: 50px
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
  .lesson-wrapper {
    overflow-x: visible !important;
    overflow-y: visible !important
  }
}

input.lesson__title-input {
  width: 100%
}

button:not(.st-button_style_none).st-button-link.lesson__exam-finish-prematurely-btn {
  margin-left: 6px;
  color: #00a8ff;
  text-decoration: underline;
  outline: 0;
  vertical-align: baseline
}

button:not(.st-button_style_none).st-button-link.lesson__exam-finish-prematurely-btn:focus,
button:not(.st-button_style_none).st-button-link.lesson__exam-finish-prematurely-btn:hover {
  color: #63c8ff
}

.lesson__exam-finish-prematurely-confirm {
  display: flex;
  flex-direction: column;
  min-width: 400px
}

.lesson__exam-finish-prematurely-confirm>div {
  margin: -4px
}

.lesson__exam-finish-prematurely-confirm button {
  margin: 4px;
  padding: 9px 24px;
  font-size: 14px
}

button:not(.st-button_style_none).lesson__review-button {
  --link-color: #222;
  --link-line: underline;
  --link-line-color: rgba(34, 34, 34, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #222;
  --link-hover-line-color: #222;
  --link-active-color: #222;
  --link-active-line-color: #222;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222;
  margin-left: 20px
}

button:not(.st-button_style_none).lesson__review-button:first-of-type {
  margin-left: 0
}

@media screen and (max-width:1024px) {
  .lesson__discussions-wrapper {
    width: 100%;
    padding: 0 10px
  }
}

.lesson-modern__main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f3f4f6
}

.lesson-modern__main.small .lesson__footer {
  padding-left: 30px;
  padding-right: 30px
}

.lesson-modern__main.zen-mode .lesson-modern[data-embed-view] .player-content-wrapper {
  border-top: 0
}

.lesson-modern__main.zen-mode .lesson-modern[data-embed-view] .lesson__player {
  padding-top: 20px !important
}

.lesson-modern__main.zen-mode .lesson-modern .lesson__player {
  padding: 40px 4px 4px !important
}

.lesson-modern__main.zen-mode .lesson-modern .lesson__player[data-type=video] {
  padding: 0 !important
}

.lesson-modern__body {
  flex: 1;
  display: flex
}

.lesson-modern__wrapper {
  display: block;
  flex-grow: 1;
  position: relative;
  overflow: auto
}

.lesson-modern__wrapper .lesson__license-badge,
.lesson-modern__wrapper .lesson__step-pins,
.lesson-modern__wrapper .lesson__update-date {
  display: none
}

.lesson-modern__wrapper .lesson__player {
  border-radius: 0
}

.lesson-modern__wrapper .lesson__likes-widget {
  font-size: 16px
}

.lesson-modern__wrapper .lesson__likes-widget>.vote-widget__segment {
  padding: 4px
}

.lesson-modern__wrapper .player-content-wrapper {
  margin-top: 0 !important
}

.lesson-modern__wrapper .attempt__message {
  overflow: auto
}

.lesson-modern__wrapper .attempt__footer,
.lesson-modern__wrapper .attempt__inner,
.lesson-modern__wrapper .attempt__message {
  padding: 15px 0
}

.lesson-modern__wrapper .attempt__actions {
  flex-wrap: wrap;
  min-height: 10px
}

.lesson-modern__wrapper .attempt__actions .attempt__actions-selector {
  margin-left: 0;
  margin-top: 1em
}

.lesson-modern__wrapper .lesson__mode_certificate_bar,
.lesson-modern__wrapper .lesson__mode_mode_review {
  background: #EFF6F9
}

.lesson-modern__wrapper .lesson__mode_certificate_bar {
  justify-content: space-between
}

.lesson-modern {
  display: block
}

.lesson-modern:not(.lesson_edit) {
  background: #fff
}

.lesson-modern .lesson__footer {
  display: block;
  background: #f3f4f6;
  padding: 20px 30px
}

.lesson-modern .lesson__footer-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.lesson-modern .lesson__footer-nav-buttons button {
  min-height: 40px
}

.lesson-modern .lesson__player {
  padding: 24px 4px 4px
}

.lesson-modern .lesson__player:not(.lesson__player_edit) {
  border: 0
}

.lesson-modern .lesson__player[data-type=video] {
  padding: 5px
}

.lesson-modern .modern-lesson-divider {
  margin: 0
}

.lesson-modern[data-embed-view] .step-view_material {
  padding-bottom: 0 !important
}

.lesson-modern .step-view_material {
  padding-bottom: 20px
}

.lesson-modern .step-view_material.step-view_video {
  padding: 0
}

.lesson-modern .lesson__discussions-wrapper {
  background: #f3f4f6;
  padding: 0 30px 20px
}

.lesson-modern .video-player_next-step-overlay {
  min-width: 0;
  max-width: 1022px;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}

.fullscreen .lesson-modern .video-player_next-step-overlay,
.zen-mode .lesson-modern .video-player_next-step-overlay {
  max-width: 100%
}

.lesson__next-btn {
  display: inline-flex !important;
  align-items: center;
  transition: none !important
}

.course-revenue__history-months-row .cell-desc,
.lesson__next-btn span[data-mobile-caption] {
  display: none
}

.lesson__next-btn:disabled {
  background: #eaecf0 !important;
  color: #999
}

.lesson__next-btn .svg-icon,
.lesson__next-btn .svg-icon svg {
  width: 16px;
  height: 16px
}

.lesson-modern__top-panel {
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 0 16px;
  height: var(--player-top-panel-height)
}

@media screen and (max-width:768px) {
  .lesson-modern .lesson__discussions-wrapper {
    background: #f3f4f6;
    padding: 0 10px 65px
  }

  .lesson-modern .lesson__player {
    padding: 10px
  }

  .lesson-modern__main.lesson-wrapper.small .lesson__footer {
    padding: 20px 10px
  }
}

@media (min-width:768px) {
  .lesson-modern__main.small .lesson-modern__wrapper .step-wrapper {
    padding: 0 20px
  }

  .lesson-modern__main.small .lesson-modern__wrapper .lesson__discussions-wrapper {
    padding: 0 20px 65px
  }

  .lesson-modern__main.small .lesson-modern__wrapper .lesson__footer {
    padding-left: 20px;
    padding-right: 20px
  }

  .lesson-modern__main .lesson__player[data-type=video] .step-view_video .step-wrapper {
    padding: 0
  }

  .lesson-modern__main .attempt-wrapper .attempt-review,
  .lesson-modern__main .attempt-wrapper .attempt__footer,
  .lesson-modern__main .attempt-wrapper .attempt__inner,
  .lesson-modern__main .attempt-wrapper .attempt__message {
    padding: 15px 20px
  }

  .lesson-modern__main .attempt__actions {
    flex-wrap: nowrap
  }

  .lesson-modern__main .attempt__actions .attempt__actions-selector {
    margin-left: auto;
    margin-top: 0
  }
}

@media (min-width:1024px) {
  .lesson-modern__wrapper .step-wrapper {
    padding: 0 26px
  }

  .lesson-modern__wrapper .lesson__discussions-wrapper {
    padding: 0 26px 65px
  }

  .lesson-modern__wrapper .lesson__footer {
    padding-left: 26px;
    padding-right: 26px
  }
}

@media (min-width:1290px) {

  .lesson-modern__main .attempt-wrapper .attempt-review,
  .lesson-modern__main .attempt-wrapper .attempt__footer,
  .lesson-modern__main .attempt-wrapper .attempt__inner,
  .lesson-modern__main .attempt-wrapper .attempt__message {
    padding: 15px 0
  }
}

@media (max-width:768px) {
  .lesson__next-btn span[data-mobile-caption] {
    display: inline-block !important
  }

  .lesson__next-btn span:not(.svg-icon),
  .lesson__next-btn span:not([data-mobile-caption]),
  .lesson__step-title {
    display: none
  }
}

.lesson-editor {
  position: relative;
  padding: 10px 16px
}

.lesson-editor__player {
  position: relative;
  margin: 0 auto;
  padding: 0 0 100px;
  width: 100%;
  max-width: 992px;
  background: #fff
}

.lesson-editor__player-title {
  font-size: 24px;
  font-weight: 400;
  line-height: 28.13px;
  margin-bottom: 16px
}

.lesson-editor__info {
  margin-bottom: 54px
}

.lesson-editor__menu-inner {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 992px;
  width: 100%
}

.lesson-editor__menu-inner>* {
  margin: 4px 0
}

@media (max-width:768px) {
  .lesson-editor__menu-inner {
    flex-direction: column
  }
}

@media (max-width:1024px) {

  .lesson-editor__menu-inner,
  .lesson-editor__player {
    max-width: 752px
  }
}

.lesson-editor__actions-lists {
  display: flex;
  margin-right: .75em
}

.lesson-editor__complete-actions {
  display: flex
}

.lesson-editor__complete-actions>:not(:last-child) {
  margin-right: .75em
}

.lesson-editor__body {
  display: flex
}

.lesson-editor__content {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px;
  --rich-text-editor-border-radius: 4px
}

.lesson-editor__content h2 {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: .17px;
  margin: 0
}

.lesson-editor__content h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: .15px;
  margin: 0 0 8px
}

.lesson-editor__content h4 {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .15px;
  margin: 0 0 8px
}

.lesson-editor__content h2[data-required]::after,
.lesson-editor__content h3[data-required]::after,
.lesson-editor__content h4[data-required]::after {
  content: "*";
  margin-left: 1px;
  color: var(--theme-color-base-danger-2)
}

.lesson-editor__content section {
  margin-top: 16px
}

.lesson-editor__content section+section {
  margin-top: 32px
}

.lesson-editor__content .form-radio {
  padding: 6px 8px 4px 0
}

.lesson-editor__content .form-group {
  margin-bottom: 16px
}

.lesson-editor__header {
  line-height: 2em;
  position: relative;
  margin: 0 auto;
  background: #eee;
  padding: .5em 1em;
  max-width: 62.25em;
  overflow: hidden
}

.lesson-editor__add-step-pin {
  background: #d4f1ff;
  color: #1F60D3
}

.lesson-editor__add-step-pin:hover {
  background: #1F60D3;
  color: #d4f1ff
}

.lesson-editor__add-step-pin[data-has-caption] {
  width: auto
}

.lesson-editor__add-step-pin-btn.st-button_style_none {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: inherit;
  background: 0 0;
  text-align: center;
  white-space: nowrap
}

.lesson-editor__add-step-pin-btn.st-button_style_none>.svg-icon {
  display: inline-flex
}

.lesson-editor__add-step-pin-btn.st-button_style_none svg {
  width: 14px;
  height: 14px
}

.lesson-editor__add-step-pin-caption {
  margin-left: 9px;
  font-size: 14px;
  white-space: nowrap
}

.lesson-editor__step-badge {
  --course-badge-default-bg: transparent;
  --course-badge-default-bgi: linear-gradient(106deg, #e7f2ff -26%, #f1f1f4 135%);
  --course-badge-default-fg: #535366;
  --course-badge-private-bg: var(--course-badge-default-bg);
  --course-badge-private-bgi: linear-gradient(105deg, #f6faff -26%, #c8e2ff 135%);
  --course-badge-private-fg: #4485ed;
  --course-badge-draft-bg: #999;
  --course-badge-draft-bgi: none;
  --course-badge-draft-fg: #fff;
  --course-badge-basic-bg: var(--course-badge-default-bg);
  --course-badge-basic-bgi: linear-gradient(107deg, #e7f2ff -26%, #e3fff0 136%);
  --course-badge-basic-fg: #56a4ff;
  --course-badge-basic-invalid-bg: #FFEBE8;
  --course-badge-basic-invalid-bgi: none;
  --course-badge-basic-invalid-fg: #d41f1f;
  --course-badge-paid-bg: var(--course-badge-default-bg);
  --course-badge-paid-bgi: linear-gradient(107deg, #e7f2ff -26%, #cbffd2 136%);
  --course-badge-paid-fg: #54ad54;
  --course-badge-paid-invalid-bg: #FFEBE8;
  --course-badge-paid-invalid-bgi: none;
  --course-badge-paid-invalid-fg: #d41f1f;
  --course-badge-enterprise-bg: var(--course-badge-default-bg);
  --course-badge-enterprise-bgi: linear-gradient(93.02deg, #2A264D -20.29%, #5F5ACE 86.05%);
  --course-badge-enterprise-fg: #fff;
  --course-badge-spec-bg: #6C7BDF;
  --course-badge-spec-bgi: none;
  --course-badge-spec-fg: #fff;
  --course-badge-padding: 1px 6px;
  --course-badge-height: 16px;
  --course-badge-font-size: 10px;
  --course-badge-font-weight: 500;
  --course-badge-line-height: normal;
  --course-badge-letter-spacing: 0.11px;
  --course-badge-text-transform: none;
  --course-badge-icon-size: 10px;
  border: 1px solid #d41f1f
}

.lesson-editor__player .player-content-wrapper {
  margin-top: 0;
  margin-bottom: 1.25em;
  border: 1px solid #eee
}

.lesson-editor__player .lesson__header {
  z-index: 15;
  padding: 0;
  margin-top: 0;
  margin-bottom: .75em
}

.lesson-editor__player .step-text-wrapper {
  border: none
}

.lesson-editor__step-pins-editor {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  margin: 20px 0;
  z-index: 7;
  height: 60px;
  max-width: 992px;
  white-space: nowrap
}

.lesson-editor__step-pins-editor .smooth-dnd-container.horizontal {
  display: flex;
  flex-direction: row;
  justify-content: flex-start
}

.lesson-editor__step-pins {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row
}

.lesson-editor__title-wrapper {
  position: relative
}

.lesson-editor__title-wrapper .lesson-widget {
  max-width: 100%
}

.lesson-editor__is-public-label {
  font-size: 1em;
  margin-left: 1em
}

.lesson-editor__help-center {
  display: inline;
  margin-top: .55em;
  float: right
}

.lesson-editor__actions-btn {
  position: relative;
  display: inline-block;
  min-width: 0
}

.lesson-editor__actions-btn:not(:last-child) {
  margin-right: 12px
}

.lesson-editor__actions-btn>.drop-down-toggler {
  display: flex
}

.lesson-editor__actions-btn button.lesson-editor__action-btn {
  padding-right: 42px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.lesson-editor__actions-btn button.lesson-editor__action-btn svg {
  width: 30px;
  height: 30px
}

.lesson-editor__actions-btn .svg-icon {
  position: absolute;
  top: 53%;
  right: .5em;
  transform: translateY(-50%)
}

.lesson-editor__actions-btn .svg-icon svg {
  transform: scale(.8);
  display: block
}

.step-editor__header,
.step-editor__menu-toggler.st-button_style_none .svg-icon {
  display: flex;
  align-items: center
}

@media (min-width:1024px) {
  .lesson-editor__menu {
    padding-left: 220px
  }
}

.step-editor[data-is-deleted]>section {
  opacity: .38
}

.step-editor__header {
  margin-bottom: 16px
}

.step-editor__header h2 {
  float: 1;
  margin-right: 8px
}

.step-editor__header .step-editor__delete-btn {
  margin-right: 8px
}

.step-editor__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .25px
}

.step-editor__content-editor {
  margin: 0;
  padding: 0;
  border: none
}

.step-editor__content-editor[disabled] [contenteditable],
.step-editor__content-editor[disabled] [data-ember-action],
.step-editor__content-editor[disabled] button,
.step-editor__content-editor[disabled] input {
  pointer-events: none;
  opacity: .5
}

.step-editor__extra-settings-block,
.step-editor__settings {
  font-size: 16px
}

.step-editor__delete-btn {
  float: 0
}

.step-editor__delete-btn:not(.st-button_style_none).btn-link {
  padding: 3px
}

.step-editor__delete-btn .svg-icon {
  font-size: 12px
}

.step-editor__menu-toggler.st-button_style_none {
  padding: 3px;
  color: #4485ed
}

.step-editor__menu-toggler.st-button_style_none:focus,
.step-editor__menu-toggler.st-button_style_none:hover {
  color: #1466C6
}

.step-editor__menu-toggler.st-button_style_none svg {
  transform: rotate(90deg);
  width: 12px;
  height: 12px;
  vertical-align: top
}

.step-editor__input[type=number],
.step-editor__input[type=text] {
  margin: 0;
  padding: 8px 12px;
  border-radius: 4px
}

.step-editor__input[type=number][data-size=min],
.step-editor__input[type=text][data-size=min] {
  width: 56px
}

.step-editor__input[type=number][data-size=mid],
.step-editor__input[type=text][data-size=mid] {
  width: 64px
}

.step-editor__input[type=number][data-size=normal],
.step-editor__input[type=text][data-size=normal] {
  width: 130px
}

.step-editor__input[type=number] {
  padding-right: 6px
}

.form-radio .step-editor__input {
  margin: -8px 0 -6px
}

p .step-editor__input[type=number],
p .step-editor__input[type=text] {
  margin: -8px 4px 0
}

.step-editor__toggler-btn {
  --btn-has-icon-p1: 9px;
  --btn-has-icon-p2: 0;
  --btn-details-underline-color: transparent;
  --btn-details-arrow-size: 12px;
  --btn-details-arrow-offset: 12px;
  --btn-details-valign: baseline
}

.step-editor__toggler-btn.btn-details:not(.st-button_style_none) {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .25px;
  line-height: 20px
}

.step-editor__toggler-btn.btn-details:not(.st-button_style_none)::after {
  position: relative;
  bottom: -.25em
}

.step-editor__instruction-editor {
  margin-top: 16px
}

.step-editor__settings .edit-desc {
  font-size: .875em;
  line-height: 1.5
}

.step-editor__settings .edit-title {
  color: #5e5e5e;
  font-size: .875em;
  line-height: 1.5
}

.step-editor__settings .edit-title.has-tooltip {
  cursor: help
}

.step-editor__settings label.edit-title {
  margin-bottom: .5em
}

.step-editor__settings .light-tabs_classic a.light-tabs__switch {
  font-size: 16px !important;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: .3px
}

.step-editor__settings .edit-notooltip,
.step-editor__settings .edit-tooltip {
  vertical-align: middle;
  font-size: .875em;
  line-height: 1.5
}

.step-editor__settings .light-tabs_classic a.light-tabs__switch.active {
  font-weight: 500;
  letter-spacing: .15px
}

.step-editor__settings .edit-tooltip {
  cursor: help
}

.step-editor__settings .options .option {
  font-size: 1em;
  margin-right: 1em;
  margin-bottom: .5em
}

.step-editor__settings .options .options_type_linux-quiz select,
.step-editor__settings .warnings ul {
  margin-bottom: 0
}

.step-editor__settings .options .option input {
  margin: 0
}

.step-editor__settings .options .option.option_right {
  float: right
}

.step-editor__settings .options .option.option_right input {
  display: inline-block;
  width: 5em;
  border-color: #ccc;
  box-shadow: none
}

.step-editor__settings .options .option__wrapper {
  display: flex;
  max-width: 240px;
  align-items: center
}

.step-editor__settings .options .option__wrapper input[type=checkbox] {
  width: 30px
}

.step-editor__settings .options .options_type_string-quiz {
  display: flex
}

.step-editor__settings .options .options_type_string-quiz .options-block {
  flex-basis: 50%
}

.step-editor__settings .options .options_type_string-quiz .options-block legend[title] {
  cursor: help
}

.step-editor__settings .options .options_type_string-quiz .options-block+.options-block {
  margin-left: 1em
}

.step-editor__settings .options .options_type_linux-quiz {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1em
}

.step-editor__settings .edit-text .ember-text-field {
  margin-top: .9375em;
  width: 100%
}

.step-editor__settings .edit-text .CodeMirror {
  margin-top: .9375em;
  box-shadow: none
}

.step-editor__settings .warnings {
  background: #BA6F06
}

.step-editor__settings .choice-options {
  padding: .3em 0 0
}

.step-editor__settings .matching-pairs,
.step-editor__settings .sort-options {
  padding: 20px 0 0
}

.step-editor__settings .add-option,
.step-editor__settings .add-pair {
  cursor: pointer;
  background: url(/static/frontend/add_step.svg) center center no-repeat #54ad54;
  width: 42px;
  height: 42px;
  margin-bottom: 10px
}

.course-revenue__history-tabs,
.step-editor__quiz-settings-toggler {
  margin-bottom: 16px
}

.step-editor__quiz-settings {
  margin-top: 16px
}

.step-editor__advanced-settings-toggler {
  --btn-details-arrow-size: 12px;
  --btn-details-arrow-offset: 12px;
  --btn-details-valign: baseline
}

.step-editor__advanced-settings-toggler.btn-details:not(.st-button_style_none) {
  font-size: 16px;
  font-weight: 500;
  line-height: 10px;
  letter-spacing: .15px
}

.lesson-reports__header {
  text-align: center;
  margin-top: 2em
}

.lesson-reports__subheader {
  text-align: center
}

.course-revenue time[data-tooltip],
.course-revenue time[title] {
  cursor: help
}

.course-revenue__beta-version-panel a {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.course-revenue__summary {
  display: grid;
  grid-template-areas: "beneficiary beneficiary beneficiary separator total-since-date total-since-date" "month-income month-turnover . separator total-income total-turnover";
  grid-template-columns: auto auto 1fr 1px auto auto;
  grid-template-rows: auto auto;
  grid-gap: 26px 24px;
  margin: 0 0 24px;
  padding: 16px 16px 24px;
  background-color: #fcfcfc;
  border: 1px solid #eaeaea;
  border-radius: 4px
}

.course-revenue__beneficiary {
  grid-area: beneficiary;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.course-revenue__month-income {
  grid-area: month-income;
  margin-right: 24px
}

.course-revenue__month-income .course-revenue__price {
  font-size: 34px;
  color: #288b28
}

.course-revenue__month-income .course-revenue__price .format-price>[data-type=decimal],
.course-revenue__month-income .course-revenue__price .format-price>[data-type=fraction] {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .15px
}

.course-revenue__month-income .course-revenue__price .format-price>[data-type=currency],
.course-revenue__month-income .course-revenue__price .format-price>[data-type=literal] {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .15px
}

.course-revenue__month-turnover {
  grid-area: month-turnover
}

.course-revenue__total-since-date {
  grid-area: total-since-date;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px
}

.course-revenue__total-income {
  grid-area: total-income
}

.course-revenue__total-turnover {
  grid-area: total-turnover
}

.course-revenue__summary-separator {
  grid-area: separator;
  background-color: #eaeaea
}

.course-revenue__price-block {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  white-space: nowrap
}

.course-revenue__price {
  display: flex;
  align-items: flex-end;
  min-height: 34px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .15px
}

.course-revenue__price .format-price>[data-type=decimal],
.course-revenue__price .format-price>[data-type=fraction] {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .3px;
  opacity: 1
}

.course-revenue__price .format-price>[data-type=currency],
.course-revenue__price .format-price>[data-type=literal] {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .3px
}

.course-revenue__price-title {
  margin-top: 7px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .4px;
  color: #535366
}

.course-revenue__payouts-note,
.course-revenue__timezone-note {
  margin: 16px 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  color: #999
}

.course-revenue__payouts-note a,
.course-revenue__timezone-note a {
  --link-color: #4485ed;
  --link-line: underline;
  --link-line-color: rgba(86, 164, 255, 0.3);
  --link-line-offset: .2em;
  --link-hover-color: #1466C6;
  --link-hover-line-color: #1466C6;
  --link-active-color: #4485ed;
  --link-active-line-color: #4485ed;
  --link-disabled-color: rgba(68, 133, 237, 0.5)
}

.course-revenue__history-details-table,
.course-revenue__history-months-table {
  width: 100%;
  margin: 0;
  background-color: transparent;
  border: none;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .25px
}

.course-revenue__history-details-table thead,
.course-revenue__history-months-table thead {
  background-color: transparent;
  font-weight: 500;
  letter-spacing: .15px
}

.course-revenue__history-details-table tbody,
.course-revenue__history-months-table tbody {
  line-height: 20px
}

.course-revenue__history-details-table th,
.course-revenue__history-months-table th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: start
}

.course-revenue__history-details-table td,
.course-revenue__history-months-table td {
  padding-top: 14px;
  padding-bottom: 14px
}

.course-revenue__history-details-table td,
.course-revenue__history-details-table th,
.course-revenue__history-months-table td,
.course-revenue__history-months-table th {
  padding-left: 10px;
  padding-right: 10px;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit
}

.course-revenue__history-details-table td:first-child,
.course-revenue__history-details-table th:first-child,
.course-revenue__history-months-table td:first-child,
.course-revenue__history-months-table th:first-child {
  padding-left: 0
}

.course-revenue__history-details-table tr:nth-of-type(even),
.course-revenue__history-details-table tr:nth-of-type(odd),
.course-revenue__history-months-table tr:nth-of-type(even),
.course-revenue__history-months-table tr:nth-of-type(odd) {
  background-color: transparent
}

.course-revenue__history-details-table tr:not(.course-revenue__history-details-row-group),
.course-revenue__history-months-table tr:not(.course-revenue__history-details-row-group) {
  border-bottom: 1px solid #E9EBFA
}

.course-revenue__history-details-row-group {
  font-weight: 500;
  letter-spacing: .15px;
  line-height: 16px;
  color: #535366
}

td.course-revenue__history-details-cell-income,
td.course-revenue__history-months-total-user-income {
  font-weight: 900
}

.course-revenue__history-details-row-group td {
  padding: 24px 0 2px
}

.course-revenue__history-details-row[data-course-benefit-status=refunded] .course-revenue__history-details-cell-amount {
  color: #999
}

.course-revenue__history-details-row[data-course-benefit-status=refunded] .course-revenue__history-details-cell-income {
  color: #9F0F38
}

.course-revenue__history-details-row-empty-state td,
.course-revenue__history-months-row-empty-state td {
  padding: 24px 0
}

.course-revenue__history-details-row-empty-state-content,
.course-revenue__history-months-row-empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 570px
}

.course-revenue__history-details-row-empty-state-content img,
.course-revenue__history-months-row-empty-state-content img {
  margin: 0 0 16px;
  height: 160px;
  opacity: .38
}

.course-revenue__history-details-row-empty-state-content span,
.course-revenue__history-months-row-empty-state-content span {
  color: #b7b7b7
}

td.course-revenue__history-details-cell-date {
  white-space: nowrap
}

td.course-revenue__history-details-cell-buyer,
th.course-revenue__history-details-head-buyer {
  width: 32%
}

td.course-revenue__history-details-cell-buyer {
  --link-line-color: rgba(34, 34, 34, 0.15)
}

td.course-revenue__history-details-cell-amount,
td.course-revenue__history-details-cell-income,
th.course-revenue__history-details-head-amount,
th.course-revenue__history-details-head-income {
  width: 12%;
  text-align: end
}

td.course-revenue__history-details-cell-channel {
  font-size: 16px
}

td.course-revenue__history-details-cell-channel .svg-icon[data-type=refunded] {
  display: none
}

td.course-revenue__history-details-cell-channel .svg-icon[data-transaction-type=manually] {
  display: block
}

td.course-revenue__history-details-cell-channel .svg-icon[data-transaction-type=manually] svg {
  opacity: .6
}

td.course-revenue__history-details-cell-channel,
th.course-revenue__history-details-head-channel {
  text-align: center
}

td.course-revenue__history-details-cell-promocode,
th.course-revenue__history-details-head-promocode {
  width: 50%;
  max-width: 223px
}

td.course-revenue__history-details-cell-promocode {
  overflow-wrap: anywhere
}

button:not(.st-button_style_none).course-revenue__history-details-load-more-btn,
button:not(.st-button_style_none).course-revenue__history-months-load-more-btn {
  padding: 7px 16px;
  margin-top: 40px;
  font-size: 14px
}

.course-revenue__promocode-help {
  display: inline-flex;
  margin-left: 4px;
  font-size: 14px;
  color: #999;
  cursor: help;
  transition: color .3s
}

.course-revenue__promocode-help:hover {
  color: #222
}

.course-revenue__history-months-table {
  white-space: nowrap;
  table-layout: fixed;
  width: auto;
  max-width: none
}

td.course-revenue__history-months-month,
th.course-revenue__history-months-month {
  min-width: 130px
}

td.course-revenue__history-months-payments-total,
th.course-revenue__history-months-payments-total {
  min-width: 84px;
  text-align: end
}

td.course-revenue__history-months-payments-by-channel,
th.course-revenue__history-months-payments-by-channel {
  text-align: end
}

td.course-revenue__history-months-payments-by-channel[data-type=non-z-payments] {
  padding-left: 34px
}

.course-revenue__history-months-channel {
  display: inline-flex;
  align-items: center
}

.course-revenue__history-months-channel var {
  margin-right: 4px;
  font-style: normal
}

.course-revenue__history-months-channel .svg-icon {
  display: flex;
  font-size: 16px
}

td.course-revenue__history-months-refunds,
td.course-revenue__history-months-total-turnover,
td.course-revenue__history-months-total-user-income,
th.course-revenue__history-months-refunds,
th.course-revenue__history-months-total-turnover,
th.course-revenue__history-months-total-user-income {
  min-width: 100px;
  text-align: end
}

td.course-revenue__history-months-total-user-income[data-loss] {
  color: #9F0F38
}

td.course-revenue__history-details-cell-amount .format-price>[data-type=decimal],
td.course-revenue__history-details-cell-amount .format-price>[data-type=fraction],
td.course-revenue__history-details-cell-income .format-price>[data-type=decimal],
td.course-revenue__history-details-cell-income .format-price>[data-type=fraction],
td.course-revenue__history-months-refunds .format-price>[data-type=decimal],
td.course-revenue__history-months-refunds .format-price>[data-type=fraction],
td.course-revenue__history-months-total-turnover .format-price>[data-type=decimal],
td.course-revenue__history-months-total-turnover .format-price>[data-type=fraction],
td.course-revenue__history-months-total-user-income .format-price>[data-type=decimal],
td.course-revenue__history-months-total-user-income .format-price>[data-type=fraction] {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .3px;
  opacity: 1
}

td.course-revenue__history-details-cell-amount .format-price>[data-type=currency],
td.course-revenue__history-details-cell-amount .format-price>[data-type=literal],
td.course-revenue__history-details-cell-income .format-price>[data-type=currency],
td.course-revenue__history-details-cell-income .format-price>[data-type=literal],
td.course-revenue__history-months-refunds .format-price>[data-type=currency],
td.course-revenue__history-months-refunds .format-price>[data-type=literal],
td.course-revenue__history-months-total-turnover .format-price>[data-type=currency],
td.course-revenue__history-months-total-turnover .format-price>[data-type=literal],
td.course-revenue__history-months-total-user-income .format-price>[data-type=currency],
td.course-revenue__history-months-total-user-income .format-price>[data-type=literal] {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .3px
}

.course-revenue__gift-badge {
  display: inline-flex;
  margin-left: 3px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid #54ad54;
  font-size: 12px;
  color: #288b28;
  background-color: #e9f9e9;
  cursor: default
}

.course-revenue__gift-badge span:not(.svg-icon) {
  display: none
}

@media (max-width:768px) {
  .course-revenue__gift-badge {
    width: auto;
    border: none;
    border-radius: 4px;
    padding: 2px 4px;
    margin-left: 8px;
    font-weight: 500;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .11px
  }

  .course-revenue__gift-badge .svg-icon {
    display: none
  }

  .course-revenue__gift-badge span:not(.svg-icon) {
    display: inline-flex
  }

  .course-revenue__summary {
    grid-template-areas: "beneficiary" "month-income" "month-turnover" "separator" "total-since-date" "total-income" "total-turnover";
    grid-template-columns: auto;
    grid-template-rows: auto auto auto 1px auto auto auto;
    grid-gap: 16px
  }

  .course-revenue__summary .course-revenue__price-block {
    flex-direction: column-reverse
  }

  .course-revenue__summary .course-revenue__price-title {
    margin-top: 0
  }

  .course-revenue__summary .course-revenue__price {
    margin-top: 7px;
    min-height: auto
  }

  .course-revenue__reports {
    font-size: 14px
  }

  .course-revenue__history-details-table thead {
    display: none
  }

  .course-revenue__history-details-row {
    display: grid;
    grid-template-areas: "channel date amount" "channel buyer income" "channel promocode promocode";
    grid-template-columns: -webkit-min-content 1fr auto;
    grid-template-columns: min-content 1fr auto;
    grid-template-rows: auto auto auto;
    padding: 12px 0
  }

  .course-revenue__history-details-row td {
    padding: 3px 0;
    width: auto;
    max-width: none
  }

  td.course-revenue__history-details-cell-date {
    grid-area: date;
    display: flex;
    align-items: flex-end;
    padding-right: 12px;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: .4px;
    color: #535366
  }

  td.course-revenue__history-details-cell-buyer {
    grid-area: buyer;
    padding-right: 12px
  }

  td.course-revenue__history-details-cell-amount {
    grid-area: amount;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: .4px
  }

  td.course-revenue__history-details-cell-amount .format-price {
    font-size: 14px;
    letter-spacing: .25px
  }

  td.course-revenue__history-details-cell-income {
    grid-area: income;
    font-size: 18px
  }

  td.course-revenue__history-details-cell-channel {
    grid-area: channel;
    display: flex;
    align-items: center;
    font-size: 24px;
    width: 40px;
    --data-tooltip-arrow-side-offset: 5px
  }

  td.course-revenue__history-details-cell-channel .svg-icon[data-type=refunded] {
    display: block
  }

  .course-revenue__history-months-table thead,
  td.course-revenue__history-details-cell-utm {
    display: none
  }

  td.course-revenue__history-details-cell-promocode {
    grid-area: promocode;
    padding-right: 12px;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: .4px;
    color: #999
  }

  .course-revenue__history-months-table {
    width: 100%
  }

  .course-revenue__history-months-table tr:not(.course-revenue__history-details-row-group) {
    border: none
  }

  .course-revenue__history-months-row {
    display: grid;
    grid-template-areas: "income" "total-turnover" "refunds" "payments-total" "non-z-payments" "z-payments" "invoice-payments";
    grid-template-columns: auto;
    grid-template-rows: repeat(6, auto);
    padding: 12px 0
  }

  .course-revenue__history-months-row td {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 6px 12px 6px 16px;
    width: auto;
    max-width: none
  }

  .course-revenue__history-months-row .cell-desc {
    display: block
  }

  td.course-revenue__history-months-month {
    display: none
  }

  td.course-revenue__history-months-total-user-income {
    grid-area: income;
    margin-bottom: 8px;
    padding-top: 16px;
    padding-bottom: 14px;
    align-items: baseline;
    background-color: #FCFCFC;
    border: 1px solid #EAEAEA;
    border-radius: 4px
  }

  td.course-revenue__history-months-total-user-income .format-price {
    font-size: 18px
  }

  td.course-revenue__history-months-total-user-income .cell-desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .15px
  }

  td.course-revenue__history-months-total-turnover {
    grid-area: total-turnover
  }

  td.course-revenue__history-months-refunds {
    grid-area: refunds
  }

  td.course-revenue__history-months-payments-total {
    grid-area: payments-total
  }

  td.course-revenue__history-months-payments-by-channel[data-type] {
    padding-left: 34px
  }

  td.course-revenue__history-months-payments-by-channel[data-type=non-z-payments] {
    grid-area: non-z-payments
  }

  td.course-revenue__history-months-payments-by-channel[data-type=z-payments] {
    grid-area: z-payments
  }

  td.course-revenue__history-months-payments-by-channel[data-type=invoice-payments] {
    grid-area: invoice-payments
  }

  .course-revenue__history-months-channel {
    display: grid;
    grid-template-areas: "icon title value";
    grid-template-columns: -webkit-min-content 1fr auto;
    grid-template-columns: min-content 1fr auto;
    width: 100%
  }

  .course-revenue__history-months-channel var {
    grid-area: value;
    margin: 0
  }

  .course-revenue__history-months-channel .cell-desc {
    grid-area: title;
    text-align: left
  }

  .course-revenue__history-months-channel .svg-icon {
    grid-area: icon;
    margin-right: 8px
  }
}

.navbar__links[rubricator-onboarding]::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, .6);
  z-index: 1
}

.navbar__links[rubricator-onboarding][rubricator-onboarding=catalog] [data-navbar-item=catalog],
.navbar__links[rubricator-onboarding][rubricator-onboarding=learn] [data-navbar-item=catalog],
.navbar__links[rubricator-onboarding][rubricator-onboarding=teach] [data-navbar-item=catalog] {
  position: relative;
  --pulsar-size: 40px;
  --pulsar-pos-left: 4px;
  z-index: 2
}

.navbar__links[rubricator-onboarding][rubricator-onboarding=catalog] [data-navbar-item=catalog]::after,
.navbar__links[rubricator-onboarding][rubricator-onboarding=catalog] [data-navbar-item=catalog]::before,
.navbar__links[rubricator-onboarding][rubricator-onboarding=learn] [data-navbar-item=catalog]::after,
.navbar__links[rubricator-onboarding][rubricator-onboarding=learn] [data-navbar-item=catalog]::before,
.navbar__links[rubricator-onboarding][rubricator-onboarding=teach] [data-navbar-item=catalog]::after,
.navbar__links[rubricator-onboarding][rubricator-onboarding=teach] [data-navbar-item=catalog]::before {
  content: "";
  position: absolute;
  width: var(--pulsar-size);
  height: var(--pulsar-size);
  left: calc(var(--pulsar-pos-left) - var(--pulsar-size)/ 2);
  top: calc(var(--pulsar-pos-top) - var(--pulsar-size)/ 2);
  border-radius: 50%;
  background-color: var(--pulsar-color);
  pointer-events: none;
  -webkit-animation: pulsar-hotspot-1 .4s infinite;
  animation: pulsar-hotspot-1 .4s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-direction: alternate;
  animation-direction: alternate
}

.navbar__links[rubricator-onboarding][rubricator-onboarding=catalog] [data-navbar-item=catalog]::after,
.navbar__links[rubricator-onboarding][rubricator-onboarding=learn] [data-navbar-item=catalog]::after,
.navbar__links[rubricator-onboarding][rubricator-onboarding=teach] [data-navbar-item=catalog]::after {
  -webkit-animation-name: pulsar-hotspot-2;
  animation-name: pulsar-hotspot-2
}

.navbar__links[rubricator-onboarding][rubricator-onboarding=catalog] [data-navbar-item=catalog] .st-link.navbar__link,
.navbar__links[rubricator-onboarding][rubricator-onboarding=learn] [data-navbar-item=catalog] .st-link.navbar__link,
.navbar__links[rubricator-onboarding][rubricator-onboarding=teach] [data-navbar-item=catalog] .st-link.navbar__link {
  position: relative
}

.navbar__links[rubricator-onboarding][rubricator-onboarding=catalog] [data-navbar-item=catalog] .st-link.navbar__link::after,
.navbar__links[rubricator-onboarding][rubricator-onboarding=learn] [data-navbar-item=catalog] .st-link.navbar__link::after,
.navbar__links[rubricator-onboarding][rubricator-onboarding=teach] [data-navbar-item=catalog] .st-link.navbar__link::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 3px;
  height: 2px;
  background-color: currentColor;
  border-radius: 4px
}

.navbar__logo-link[rubricator-onboarding] {
  z-index: 2
}

.navbar__mobile-menu[rubricator-onboarding]::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(34, 34, 34, .6);
  z-index: 1
}

.navbar__mobile-menu[rubricator-onboarding]>.drop-down-toggler {
  position: relative;
  --pulsar-size: 40px;
  --pulsar-pos-left: 100%;
  z-index: 2
}

.navbar__mobile-menu[rubricator-onboarding]>.drop-down-toggler::after,
.navbar__mobile-menu[rubricator-onboarding]>.drop-down-toggler::before {
  content: "";
  position: absolute;
  width: var(--pulsar-size);
  height: var(--pulsar-size);
  left: calc(var(--pulsar-pos-left) - var(--pulsar-size)/ 2);
  top: calc(var(--pulsar-pos-top) - var(--pulsar-size)/ 2);
  border-radius: 50%;
  background-color: var(--pulsar-color);
  pointer-events: none;
  -webkit-animation: pulsar-hotspot-1 .4s infinite;
  animation: pulsar-hotspot-1 .4s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-direction: alternate;
  animation-direction: alternate
}

.navbar__mobile-menu[rubricator-onboarding]>.drop-down-toggler::after {
  -webkit-animation-name: pulsar-hotspot-2;
  animation-name: pulsar-hotspot-2
}

.navbar__mobile-menu[rubricator-onboarding][rubricator-onboarding=catalog] [data-navbar-item=rubricator],
.navbar__mobile-menu[rubricator-onboarding][rubricator-onboarding=learn] [data-navbar-item=rubricator],
.navbar__mobile-menu[rubricator-onboarding][rubricator-onboarding=teach] [data-navbar-item=rubricator] {
  --menu-item-color: var(--theme-color-fg-onsurface-accent)
}

.rubricator-onboarding__popup {
  width: calc(100% - 32px);
  max-width: 400px
}

@media (min-width:769px) {
  .rubricator-onboarding__popup {
    left: 64px !important
  }

  .rubricator-onboarding__popup .tooltip-arrow {
    left: 10px !important
  }
}

@media (min-width:1025px) {
  .rubricator-onboarding__popup {
    left: 162px !important
  }

  .rubricator-onboarding__popup .tooltip-arrow {
    left: 10px !important
  }
}

.rubricator-onboarding__popup a {
  --link-line: underline;
  --link-line-offset: .2em;
  --link-disabled-color: rgba(34, 34, 34, 0.5);
  --external-link-icon-color: #222;
  --link-color: currentColor;
  --link-line-color: currentColor;
  --link-hover-color: currentColor;
  --link-hover-line-color: currentColor;
  --link-active-color: currentColor;
  --link-active-line-color: currentColor
}

.rubricator-onboarding__popup[x-out-of-boundaries] {
  opacity: 0;
  pointer-events: none
}

.rubricator-onboarding__popup-content:focus {
  box-shadow: none
}

.rubricator-onboarding__popup-content .rubricator-onboarding__popup-btn:not(.st-button_style_none) {
  padding: 9px 24px;
  font-family: Roboto;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .3px
}

.notifications__widget[data-template=unknown] {
  display: none
}