@charset "UTF-8"; audio:not([controls]), hr { height: 0 } .hide, [hidden], audio:not([controls]), template { display: none } dfn, p aside { font-style: italic } .clearfix:after, .row .row.collapse:after, .row .row:after, .row:after, hr { clear: both } .course-card[data-loading=lazy-pending] [data-skeleton], .with-lazy-loading .animated-background { -webkit-animation-play-state: paused; animation-play-state: paused } .button[autofocus]:focus, :focus, :target:focus, [data-target-anchor]:focus, button[autofocus]:focus { outline: 0 !important } .button[autofocus]:focus, :target:focus, [data-target-anchor]:focus, button[autofocus]:focus, html[data-whatintent=keyboard] .s-checkbox .s-checkbox__input:focus+.s-checkbox__border, html[data-whatintent=keyboard] .s-radio .s-radio__input:focus+.s-radio__border, html[data-whatintent=keyboard] :focus, html[data-whatintent=touch] .s-checkbox .s-checkbox__input:focus+.s-checkbox__border, html[data-whatintent=touch] .s-radio .s-radio__input:focus+.s-radio__border, html[data-whatintent=touch] :focus { box-shadow: var(--focus-outline-box-shadow-params) var(--focus-outline-color) } abbr, acronym, h5 { text-transform: uppercase } :not(:root):-webkit-full-screen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; object-fit: contain; transform: none !important } :not(:root):-ms-fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; object-fit: contain; transform: none !important } :not(:root):fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; -o-object-fit: contain; object-fit: contain; transform: none !important } /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block } audio, canvas, video { display: inline-block } script { display: none !important } .clearfix:after, .row .row.collapse:after, .row .row.collapse:before, .row .row:after, .row .row:before, .row:after, .row:before { content: " "; display: table } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } a { background: 0 0 } a:focus { outline: dotted thin } a:active, a:hover { outline: 0 } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: 700 } hr { box-sizing: content-box } mark { background: #ff0; color: #000 } code, kbd, pre, samp { font-size: 1em } pre { white-space: pre-wrap } q { quotes: "“" "”" "‘" "’" } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -.5em } sub { bottom: -.25em } img { border: 0 } svg:not(:root) { overflow: hidden } figure { margin: 0 } legend { border: 0; padding: 0 } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0 } button, input { line-height: normal } button, select { text-transform: none } button, html input[type=button], input[type=reset], input[type=submit] { /* -webkit-appearance: button; */ cursor: pointer } button[disabled], html input[disabled] { cursor: default } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0 } input[type=search] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } textarea { overflow: auto; vertical-align: top; min-height: 50px } .st-common-font { font-family: Roboto, sans-serif } @media print { .no-print { display: none !important } .print-only { display: block } a, a:visited { text-decoration: none } a[href]:after { content: "" } } .input-error { padding-right: 2em; background-repeat: no-repeat !important; background-position: right .4em center !important; background-size: 1.15em 1.15em !important; border-color: #d41f1f !important } .error-msg { color: #90d } .payment-form label { font-size: 1em; color: #000; cursor: pointer; display: inline; font-weight: 400; margin-bottom: 0 } .button.course-promo-video-modal__gift[data-loading], body[data-route-loading], button.course-card__bookmark:not(.st-button_style_none)[data-loading], button:not(.st-button_style_none).course-promo-video-modal__wishlist[data-loading] { cursor: progress } .with-lazy-loading .animated-background, [data-skeleton] { -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; border: none !important; cursor: default !important; position: relative; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .plans_promo { color: rgba(0, 0, 0, .7) } .t-margin-50 { margin-top: 50px } .b-margin-50 { margin-bottom: 50px } [role=button] svg, a svg, button svg, button[disabled]>* { pointer-events: none } body[data-rubricator-expanded] { overflow: hidden } :root { --theme-color-fg-primary: #222222; --theme-color-fg-secondary: #777777; --theme-color-fg-tertiary: #999999; --theme-color-fg-additional: #535366; --theme-color-fg-oncolorbg: #FFFFFF; --theme-color-fg-onsurface-primary: #FFFFFF; --theme-color-fg-onsurface-secondary-0d6: rgba(255, 255, 255, 0.6); --theme-color-fg-onsurface-additional-0d75: rgba(255, 255, 255, 0.75); --theme-color-fg-onsurface-accent: #66CC66; --theme-color-fg-onsurface-action: #56A4FF; --theme-color-bg-canvas: #FFFFFF; --theme-color-bg-level-00: #FCFCFC; --theme-color-bg-level-01: #F6F6F6; --theme-color-bg-level-02: #EAEAEA; --theme-color-bg-level-03: #CCCCCC; --theme-color-bg-level-04: #999999; --theme-color-bg-note-error: rgba(255, 121, 101, 0.12); --theme-color-bg-note-warning: rgba(255, 206, 110, 0.12); --theme-color-bg-note-success: rgba(102, 204, 102, 0.12); --theme-color-bg-note-info: rgba(156, 166, 230, 0.12); --theme-color-bg-note-info2: rgba(68, 133, 237, 0.12); --theme-color-bg-accent-0d12: rgba(84, 173, 84, 0.12); --theme-color-bg-accent-0d38: rgba(84, 173, 84, 0.38); --theme-color-bg-alert: #73134A; --theme-color-bg-surface: #282B41; --theme-color-bg-surface-level-01: #535366; --theme-color-bg-surface2: #222222; --theme-color-bg-surface2-level-01: #333333; --theme-color-bg-surface2-level-02: #5E5E5E; --theme-color-bg-surface2-level-03: #999999; --theme-color-base-accent-1: #54AD54; --theme-color-base-accent-2: #288B28; --theme-color-base-accent2-1: #9CA6E6; --theme-color-base-accent2-2: #6C7BDF; --theme-color-base-accent2-3: #3E50CB; --theme-color-base-accent-3: #246024; --theme-color-base-accent2-00: #E9EBFA; --theme-color-base-action-1: #4485ED; --theme-color-base-action-2: #1466C6; --theme-color-base-action-3: #003E86; --theme-color-base-action-00: #E7F2FF; --theme-color-base-danger-1: #FF7965; --theme-color-base-danger-2: #D41F1F; --theme-color-base-warning-1: #FFCE6E; --theme-color-base-warning-2: #FEA832; --focus-outline-color: rgba(100, 200, 255, 0.3); --focus-outline-box-shadow-params: 0 0 0 4px; --focus-outline-transition: box-shadow 0.15s ease-in-out 0s; --progress-background: #fff; --progress-bar: #54ad54; --progress-indeterminate-color-1: rgba(36, 96, 36, 0.5); --progress-indeterminate-color-2: rgba(233, 249, 233, 0.5); --data-tooltip-offset: 5px; --data-tooltip-side-offset: 0px; --data-tooltip-max-width: 300px; --data-tooltip-arrow-side-offset: 10px; --pulsar-size: 96px; --pulsar-color: #66cc66; --pulsar-pos-left: 50%; --pulsar-pos-top: 50%; --rating-stars-active-color: #f3ab34; --rating-stars-neutral-color: #ccc; --menu-offset-y: 0; --menu-min-width: 175px; --menu-background: #fff; --menu-box-shadow: 0 1px 5px 3px rgba(0, 0, 0, 0.05); --menu-border: 1px solid #ccc; --menu-border-radius: 3px; --menu-item-ctrl-border-radius: 0; --menu-item-padding-v: 9px; --menu-item-padding-h: 14px; --menu-item-spacing: 0; --menu-item-color: #5e5e5e; --menu-item-hover-color: #222; --menu-item-active-color: #222; --menu-item-background: none; --menu-item-hover-background: #e9f9e9; --menu-item-active-background: #d5f4d5; --menu-item-divider-color: #dbdbdb; --menu-item-disabled-color: #bdbdbd; --menu-item-disabled-opacity: 1; --menu-item-icon-offset: 6px; --menu-item-icon-transform: scale(1.3); --drop-down-spacing: 4px; --specialization-card-default-width: 324px; --horizontal-scroller-zindex: 4; --horizontal-scroller-btns-offset: 0px; --horizontal-scroller-btn-icon-size: 20px; --horizontal-scroller-btn-padding: 10px; --horizontal-scroller-fog-left: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 47px, rgba(0, 0, 0, 0.9) 50px, rgba(0, 0, 0, 1) 53px; --horizontal-scroller-fog-right: rgba(0, 0, 0, 1) calc(100% - 53px), rgba(0, 0, 0, 0.9) calc(100% - 50px), rgba(0, 0, 0, 0.75) calc(100% - 47px), rgba(0, 0, 0, 0) 100%; --select-box-menu-max-height: 50vh; --tab-border-width: 1px; --tab-item-border-width: 3px; --tab-item-padding: 0.55rem 1.1rem; --tab-item-gap: 8px; --feature-tariff-badge-bg: #E9EBFA; --feature-tariff-badge-fg: #3e50cb; --feature-tariff-badge-hem: #9ca6e6; --feature-tariff-badge-active-bg: #6c7bdf; --feature-tariff-badge-active-fg: #fff; --feature-tariff-badge-active-hem: #3e50cb; --stepik-loader-size: 75px; --stepik-loader-icon-bg-color: #222; --stepik-loader-icon-color: #fff; --stepik-loader-text-color: #222 } body[data-theme=night] { --theme-color-fg-primary: #EEEEF0; --theme-color-fg-secondary: #AFAEC4; --theme-color-fg-tertiary: #8E8EA3; --theme-color-fg-additional: #FBFBFB; --theme-color-fg-oncolorbg: #141525; --theme-color-fg-onsurface-primary: #141525; --theme-color-fg-onsurface-secondary-0d6: rgba(20, 21, 37, 0.6); --theme-color-fg-onsurface-additional-0d75: rgba(20, 21, 37, 0.75); --theme-color-fg-onsurface-accent: #66CC66; --theme-color-fg-onsurface-action: #56A4FF; --theme-color-bg-canvas: #141525; --theme-color-bg-level-00: #1F1F2F; --theme-color-bg-level-01: #353547; --theme-color-bg-level-02: #535366; --theme-color-bg-level-03: #66667A; --theme-color-bg-level-04: #8E8EA3; --theme-color-bg-note-error: rgba(255, 122, 101, 0.12); --theme-color-bg-note-warning: rgba(255, 212, 129, 0.12); --theme-color-bg-note-success: rgba(131, 214, 131, 0.12); --theme-color-bg-note-info: rgba(152, 160, 232, 0.12); --theme-color-bg-note-info2: rgba(86, 164, 255, 0.12); --theme-color-bg-accent-0d12: rgba(131, 214, 131, 0.12); --theme-color-bg-accent-0d38: rgba(131, 214, 131, 0.38); --theme-color-bg-alert: #73134A; --theme-color-bg-surface: #282B41; --theme-color-bg-surface-level-01: #FBFBFB; --theme-color-bg-surface2: #EEEEF0; --theme-color-bg-surface2-level-01: #333333; --theme-color-bg-surface2-level-02: #D3D2E9; --theme-color-bg-surface2-level-03: #8E8EA3; --theme-color-base-accent-1: #83D683; --theme-color-base-accent-2: #66CC66; --theme-color-base-accent2-1: #98A0E8; --theme-color-base-accent2-2: #7888EE; --theme-color-base-accent2-3: #5B6EE2; --theme-color-base-accent-3: #288B28; --theme-color-base-accent2-00: #24263C; --theme-color-base-action-1: #56A4FF; --theme-color-base-action-2: #4485ED; --theme-color-base-action-3: #1466C6; --theme-color-base-action-00: #1C263F; --theme-color-base-danger-1: #FF7A65; --theme-color-base-danger-2: #ED4E4E; --theme-color-base-warning-1: #FFD481; --theme-color-base-warning-2: #F1A53C } .with-lazy-loading .animated-background_black { --skeleton-color-1: #353535; --skeleton-color-2: #444 } .with-lazy-loading[data-placeholder-loading] .animated-background { -webkit-animation-play-state: running; animation-play-state: running } [data-skeleton] { 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 } [data-skeleton~=dark] { --skeleton-color-1: #353535; --skeleton-color-2: #444 } [data-skeleton~="w10%"] { width: 10%; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content } [data-skeleton~="w20%"] { width: 20%; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content } [data-skeleton~="w30%"] { width: 30%; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content } [data-skeleton~="w40%"] { width: 40%; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content } [data-skeleton~="w50%"] { width: 50%; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content } [data-skeleton~="w60%"] { width: 60%; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content } [data-skeleton~="w70%"] { width: 70%; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content } [data-skeleton~="w80%"] { width: 80%; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content } [data-skeleton~="w90%"] { width: 90%; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0 } 100% { background-position: 468px 0 } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0 } 100% { background-position: 468px 0 } } .container { margin: 0 auto } .container-fluid, .input-note__char-counter { margin-left: auto } .container-fluid { margin-right: auto; padding-right: 2rem; padding-left: 2rem } .flex-row { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; margin-right: 30px; margin-left: 30px } .flex-row-comp { margin-right: -1rem; margin-left: -1rem } @media only screen and (max-width:768px) { .flex-row { margin-right: 0; margin-left: 0 } } .flex-row.reverse { flex-direction: row-reverse } .col.reverse { flex-direction: column-reverse } .col-xs, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem } .no-pad-xs { padding: 0 } .col-xs { flex-grow: 1; flex-basis: 0; max-width: 100% } .col-xs-1 { flex-basis: 8.333%; max-width: 8.333% } .col-xs-2 { flex-basis: 16.667%; max-width: 16.667% } .col-xs-3 { flex-basis: 25%; max-width: 25% } .col-xs-4 { flex-basis: 33.333%; max-width: 33.333% } .col-xs-5 { flex-basis: 41.667%; max-width: 41.667% } .col-xs-6 { flex-basis: 50%; max-width: 50% } .col-xs-7 { flex-basis: 58.333%; max-width: 58.333% } .col-xs-8 { flex-basis: 66.667%; max-width: 66.667% } .col-xs-9 { flex-basis: 75%; max-width: 75% } .col-xs-10 { flex-basis: 83.333%; max-width: 83.333% } .col-xs-11 { flex-basis: 91.667%; max-width: 91.667% } .col-xs-12 { flex-basis: 100%; max-width: 100% } .col-xs-offset-1 { margin-left: 8.333% } .col-xs-offset-2 { margin-left: 16.667% } .col-xs-offset-3 { margin-left: 25% } .col-xs-offset-4 { margin-left: 33.333% } .col-xs-offset-5 { margin-left: 41.667% } .col-xs-offset-6 { margin-left: 50% } .col-xs-offset-7 { margin-left: 58.333% } .col-xs-offset-8 { margin-left: 66.667% } .col-xs-offset-9 { margin-left: 75% } .col-xs-offset-10 { margin-left: 83.333% } .col-xs-offset-11 { margin-left: 91.667% } .start-xs { justify-content: flex-start; text-align: start } .center-xs { justify-content: center; text-align: center } .end-xs { justify-content: flex-end; text-align: end } .s-checkbox, .top-xs { align-items: flex-start } .middle-xs { align-items: center } .bottom-xs { align-items: flex-end } .around-xs { justify-content: space-around } .between-xs { justify-content: space-between } .first-xs { order: -1 } .last-xs { order: 1 } .flex-row.form-row+.flex-row.form-row { margin-top: .5em } @media only screen and (min-width:768px) { .container { width: 100% } .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem } .col-sm { flex-grow: 1; flex-basis: 0; max-width: 100% } .col-sm-1 { flex-basis: 8.333%; max-width: 8.333% } .col-sm-2 { flex-basis: 16.667%; max-width: 16.667% } .col-sm-3 { flex-basis: 25%; max-width: 25% } .col-sm-4 { flex-basis: 33.333%; max-width: 33.333% } .col-sm-5 { flex-basis: 41.667%; max-width: 41.667% } .col-sm-6 { flex-basis: 50%; max-width: 50% } .col-sm-7 { flex-basis: 58.333%; max-width: 58.333% } .col-sm-8 { flex-basis: 66.667%; max-width: 66.667% } .col-sm-9 { flex-basis: 75%; max-width: 75% } .col-sm-10 { flex-basis: 83.333%; max-width: 83.333% } .col-sm-11 { flex-basis: 91.667%; max-width: 91.667% } .col-sm-12 { flex-basis: 100%; max-width: 100% } .col-sm-offset-1 { margin-left: 8.333% } .col-sm-offset-2 { margin-left: 16.667% } .col-sm-offset-3 { margin-left: 25% } .col-sm-offset-4 { margin-left: 33.333% } .col-sm-offset-5 { margin-left: 41.667% } .col-sm-offset-6 { margin-left: 50% } .col-sm-offset-7 { margin-left: 58.333% } .col-sm-offset-8 { margin-left: 66.667% } .col-sm-offset-9 { margin-left: 75% } .col-sm-offset-10 { margin-left: 83.333% } .col-sm-offset-11 { margin-left: 91.667% } .start-sm { justify-content: flex-start; text-align: start } .center-sm { justify-content: center; text-align: center } .end-sm { justify-content: flex-end; text-align: end } .top-sm { align-items: flex-start } .middle-sm { align-items: center } .bottom-sm { align-items: flex-end } .around-sm { justify-content: space-around } .between-sm { justify-content: space-between } .first-sm { order: -1 } .last-sm { order: 1 } .no-pad-sm { padding: 0 } } @media only screen and (min-width:1024px) { .container { width: 100% } .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem } .col-md { flex-grow: 1; flex-basis: 0; max-width: 100% } .col-md-1 { flex-basis: 8.333%; max-width: 8.333% } .col-md-2 { flex-basis: 16.667%; max-width: 16.667% } .col-md-3 { flex-basis: 25%; max-width: 25% } .col-md-4 { flex-basis: 33.333%; max-width: 33.333% } .col-md-5 { flex-basis: 41.667%; max-width: 41.667% } .col-md-6 { flex-basis: 50%; max-width: 50% } .col-md-7 { flex-basis: 58.333%; max-width: 58.333% } .col-md-8 { flex-basis: 66.667%; max-width: 66.667% } .col-md-9 { flex-basis: 75%; max-width: 75% } .col-md-10 { flex-basis: 83.333%; max-width: 83.333% } .col-md-11 { flex-basis: 91.667%; max-width: 91.667% } .col-md-12 { flex-basis: 100%; max-width: 100% } .col-md-offset-1 { margin-left: 8.333% } .col-md-offset-2 { margin-left: 16.667% } .col-md-offset-3 { margin-left: 25% } .col-md-offset-4 { margin-left: 33.333% } .col-md-offset-5 { margin-left: 41.667% } .col-md-offset-6 { margin-left: 50% } .col-md-offset-7 { margin-left: 58.333% } .col-md-offset-8 { margin-left: 66.667% } .col-md-offset-9 { margin-left: 75% } .col-md-offset-10 { margin-left: 83.333% } .col-md-offset-11 { margin-left: 91.667% } .start-md { justify-content: flex-start; text-align: start } .center-md { justify-content: center; text-align: center } .end-md { justify-content: flex-end; text-align: end } .top-md { align-items: flex-start } .middle-md { align-items: center } .bottom-md { align-items: flex-end } .around-md { justify-content: space-around } .between-md { justify-content: space-between } .first-md { order: -1 } .last-md { order: 1 } .no-pad-md { padding: 0 } } @media only screen and (min-width:1170px) { .container { width: 1084px } .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem } .col-lg { flex-grow: 1; flex-basis: 0; max-width: 100% } .col-lg-1 { flex-basis: 8.333%; max-width: 8.333% } .col-lg-2 { flex-basis: 16.667%; max-width: 16.667% } .col-lg-3 { flex-basis: 25%; max-width: 25% } .col-lg-4 { flex-basis: 33.333%; max-width: 33.333% } .col-lg-5 { flex-basis: 41.667%; max-width: 41.667% } .col-lg-6 { flex-basis: 50%; max-width: 50% } .col-lg-7 { flex-basis: 58.333%; max-width: 58.333% } .col-lg-8 { flex-basis: 66.667%; max-width: 66.667% } .col-lg-9 { flex-basis: 75%; max-width: 75% } .col-lg-10 { flex-basis: 83.333%; max-width: 83.333% } .col-lg-11 { flex-basis: 91.667%; max-width: 91.667% } .col-lg-12 { flex-basis: 100%; max-width: 100% } .col-lg-offset-1 { margin-left: 8.333% } .col-lg-offset-2 { margin-left: 16.667% } .col-lg-offset-3 { margin-left: 25% } .col-lg-offset-4 { margin-left: 33.333% } .col-lg-offset-5 { margin-left: 41.667% } .col-lg-offset-6 { margin-left: 50% } .col-lg-offset-7 { margin-left: 58.333% } .col-lg-offset-8 { margin-left: 66.667% } .col-lg-offset-9 { margin-left: 75% } .col-lg-offset-10 { margin-left: 83.333% } .col-lg-offset-11 { margin-left: 91.667% } .start-lg { justify-content: flex-start; text-align: start } .center-lg { justify-content: center; text-align: center } .end-lg { justify-content: flex-end; text-align: end } .top-lg { align-items: flex-start } .middle-lg { align-items: center } .bottom-lg { align-items: flex-end } .around-lg { justify-content: space-around } .between-lg { justify-content: space-between } .first-lg { order: -1 } .last-lg { order: 1 } .no-pad-lg { padding: 0 } } .embedded .lesson-player, .embedded .lesson-wrapper { padding: 0 !important; margin: 0 !important } * { transition: var(--focus-outline-transition) } .st-button_style_none, [data-tooltip], a { border-radius: 1px } meta.foundation-mq-small { font-family: "only screen and (min-width: 768px)"; width: 768px } meta.foundation-mq-medium { font-family: "only screen and (min-width:1280px)"; width: 1280px } meta.foundation-mq-large { font-family: "only screen and (min-width:1440px)"; width: 1440px } .row, select { width: 100% } *, :after, :before { box-sizing: border-box } body, html { font-size: 16px } body { background: #fff; color: #222; padding: 0; margin: 0; font-family: Roboto, sans-serif; font-weight: 400; font-style: normal; position: relative; cursor: auto } a:hover { cursor: pointer } embed, img, object { max-width: 100%; height: auto } embed, object { height: 100% } #map_canvas embed, #map_canvas img, #map_canvas object, .map_canvas embed, .map_canvas img, .map_canvas object { max-width: none !important } .left { float: left !important } .right { float: right !important } .text-left { text-align: left !important } .text-right { text-align: right !important } .text-center { text-align: center !important } .text-justify { text-align: justify !important } .antialiased { -webkit-font-smoothing: antialiased } img { -ms-interpolation-mode: bicubic; display: inline-block; vertical-align: middle } .row { max-width: 62.5em; margin: 0 auto } .row.collapse>.column, .row.collapse>.columns { position: relative; padding-left: 0; padding-right: 0; float: left } .row.collapse .row { margin-left: 0; margin-right: 0 } .row .row { width: auto; max-width: none; margin: 0 -.9375em } .row .row.collapse { width: auto; margin: 0; max-width: none } .column, .columns { position: relative; padding-left: .9375em; padding-right: .9375em; width: 100%; float: left } @media only screen { .column, .column.small-centered, .columns, .columns.small-centered, .small-1, .small-10, .small-11, .small-12, .small-2, .small-3, .small-4, .small-5, .small-6, .small-7, .small-8, .small-9, .small-offset-0, .small-offset-1, .small-offset-10, .small-offset-2, .small-offset-3, .small-offset-4, .small-offset-5, .small-offset-6, .small-offset-7, .small-offset-8, .small-offset-9 { position: relative } .column, .columns { padding-left: .9375em; padding-right: .9375em; float: left } .small-1 { width: 8.3333333333% } .small-2 { width: 16.6666666667% } .small-3 { width: 25% } .small-4 { width: 33.3333333333% } .small-5 { width: 41.6666666667% } .small-6 { width: 50% } .small-7 { width: 58.3333333333% } .small-8 { width: 66.6666666667% } .small-9 { width: 75% } .small-10 { width: 83.3333333333% } .small-11 { width: 91.6666666667% } .small-12 { width: 100% } .small-offset-0 { margin-left: 0 } .small-offset-1 { margin-left: 8.3333333333% } .small-offset-2 { margin-left: 16.6666666667% } .small-offset-3 { margin-left: 25% } .small-offset-4 { margin-left: 33.3333333333% } .small-offset-5 { margin-left: 41.6666666667% } .small-offset-6 { margin-left: 50% } .small-offset-7 { margin-left: 58.3333333333% } .small-offset-8 { margin-left: 66.6666666667% } .small-offset-9 { margin-left: 75% } .small-offset-10 { margin-left: 83.3333333333% } [class*=column]+[class*=column]:last-child { float: right } [class*=column]+[class*=column].end { float: left } .column.small-centered, .columns.small-centered { margin-left: auto; margin-right: auto; float: none !important } } @media only screen and (min-width:768px) { .large-1, .large-10, .large-11, .large-12, .large-2, .large-3, .large-4, .large-5, .large-6, .large-7, .large-8, .large-9, .pull-1, .pull-2, .push-1, .push-2, .row .large-offset-0, .row .large-offset-1, .row .large-offset-10, .row .large-offset-11, .row .large-offset-2, .row .large-offset-3, .row .large-offset-4, .row .large-offset-5, .row .large-offset-6, .row .large-offset-7, .row .large-offset-8, .row .large-offset-9 { position: relative } .large-1 { width: 8.3333333333% } .large-2 { width: 16.6666666667% } .large-3 { width: 25% } .large-4 { width: 33.3333333333% } .large-5 { width: 41.6666666667% } .large-6 { width: 50% } .large-7 { width: 58.3333333333% } .large-8 { width: 66.6666666667% } .large-9 { width: 75% } .large-10 { width: 83.3333333333% } .large-11 { width: 91.6666666667% } .large-12 { width: 100% } .row .large-offset-0 { margin-left: 0 } .row .large-offset-1 { margin-left: 8.3333333333% } .row .large-offset-2 { margin-left: 16.6666666667% } .row .large-offset-3 { margin-left: 25% } .row .large-offset-4 { margin-left: 33.3333333333% } .row .large-offset-5 { margin-left: 41.6666666667% } .row .large-offset-6 { margin-left: 50% } .row .large-offset-7 { margin-left: 58.3333333333% } .row .large-offset-8 { margin-left: 66.6666666667% } .row .large-offset-9 { margin-left: 75% } .row .large-offset-10 { margin-left: 83.3333333333% } .row .large-offset-11 { margin-left: 91.6666666667% } .push-1 { left: 8.3333333333%; right: auto } .pull-1 { right: 8.3333333333%; left: auto } .push-2 { left: 16.6666666667%; right: auto } .pull-2 { right: 16.6666666667%; left: auto } .push-3, .push-4 { right: auto; position: relative } .push-3 { left: 25% } .pull-3 { position: relative; right: 25%; left: auto } .push-4 { left: 33.3333333333% } .pull-4 { position: relative; right: 33.3333333333%; left: auto } .push-5 { position: relative; left: 41.6666666667%; right: auto } .pull-5, .pull-6 { left: auto; position: relative } .pull-5 { right: 41.6666666667% } .push-6 { position: relative; left: 50%; right: auto } .pull-6 { right: 50% } .push-7 { position: relative; left: 58.3333333333%; right: auto } .pull-7 { position: relative; right: 58.3333333333%; left: auto } .push-8, .push-9 { position: relative; right: auto } .push-8 { left: 66.6666666667% } .pull-8 { position: relative; right: 66.6666666667%; left: auto } .push-9 { left: 75% } .pull-10, .pull-9 { left: auto; position: relative } .pull-9 { right: 75% } .push-10 { position: relative; left: 83.3333333333%; right: auto } .pull-10 { right: 83.3333333333% } .push-11 { position: relative; left: 91.6666666667%; right: auto } .pull-11 { position: relative; right: 91.6666666667%; left: auto } .column.large-centered, .columns.large-centered { position: relative; margin-left: auto; margin-right: auto; float: none !important } .column.large-uncentered, .columns.large-uncentered { margin-left: 0; margin-right: 0; float: left !important } .column.large-uncentered.opposite, .columns.large-uncentered.opposite { float: right !important } } p.lead { font-size: 1.21875em; line-height: 1.6 } .subheader { line-height: 1.4; color: #6f6f6f; font-weight: 300; margin-top: .2em; margin-bottom: .5em } b, em, i, small, strong { line-height: inherit } blockquote, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p, pre, td, th, ul { margin: 0; padding: 0; direction: ltr } dl, ol, p, ul { margin-bottom: 1.25em; line-height: 1.6 } p { font-family: inherit; font-weight: 400; font-size: 1em; text-rendering: optimizeLegibility } .google-button__text, h1, h2, h3, h4, h5, h6 { font-family: Roboto, sans-serif } p aside { font-size: .875em; line-height: 1.35 } h1, h2, h3, h4, h5, h6 { font-weight: 700; font-style: normal; color: #222; text-rendering: optimizeLegibility; margin-top: .2em; margin-bottom: .5em; line-height: 1.2125em } .remark, em, i { font-style: italic } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0 } h1 { font-size: 2.125em } h2 { font-size: 1.6875em } h3 { font-size: 1.375em } h4, h5 { font-size: 1.125em } h6 { font-size: 1em } hr { border: solid #ddd; border-width: 1px 0 0; margin: 1.25em 0 1.1875em } small { font-size: 60% } code { font-weight: 400; color: #000 } .vcard .fn, .vevent .summary, .vevent abbr, dl dt, fieldset legend { font-weight: 700 } dl, ol, ul { font-size: 1em; list-style-position: outside; font-family: inherit } ol, ol.no-bullet, ul, ul.no-bullet { margin-left: 0 } ol li ol, ol li ul, ul li ol, ul li ul { margin-left: 1.25em; margin-bottom: 0 } ul li ol, ul li ul { font-size: 1em } ul.circle li ul, ul.disc li ul, ul.square li ul { list-style: inherit } ul.square { list-style-type: square } ul.circle { list-style-type: circle } ul.disc { list-style-type: disc } ul.no-bullet { list-style: none } dl dt { margin-bottom: .3em } dl dd { margin-bottom: .75em } .vcard, blockquote { margin: 0 0 1.25em } abbr, acronym { font-size: 90%; color: #222; border-bottom: 1px dotted #ddd; cursor: help } .tab, [data-tooltip]::after, abbr { text-transform: none } blockquote { padding: .5625em 1.25em 0 1.1875em; border-left: 1px solid #ddd } blockquote cite { display: block; font-size: .8125em; color: #555 } blockquote cite:before { content: "— " } blockquote cite a, blockquote cite a:visited { color: #555 } blockquote, blockquote p { line-height: 1.6; color: #6f6f6f } .vcard { display: inline-block; border: 1px solid #ddd; padding: .625em .75em } .vcard li { margin: 0; display: block } .vcard .fn { font-size: .9375em } .vevent abbr { cursor: auto; text-decoration: none; border: none; padding: 0 .0625em } @media only screen and (min-width:768px) { h1, h2, h3, h4, h5, h6 { line-height: 1.4 } h1 { font-size: 2.75em } h2 { font-size: 2.3125em } h3 { font-size: 1.6875em } h4 { font-size: 1.4375em } } .print-only { display: none !important } @media print { blockquote, img, pre, tr { page-break-inside: avoid } * { background: 0 0 !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important } a, a:visited { text-decoration: underline } a[href]:after { content: " (" attr(href) ")" } abbr[title]:after { content: " (" attr(title) ")" } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: "" } blockquote, pre { border: 1px solid #999 } thead { display: table-header-group } img { max-width: 100% !important } @page { margin: .5cm } h2, h3, p { orphans: 3; widows: 3 } h2, h3 { page-break-after: avoid } .hide-on-print { display: none !important } .print-only { display: block !important } .hide-for-print { display: none !important } .show-for-print { display: inherit !important } } .button:not(.st-button_style_none).std, button:not(.st-button_style_none).std { background-color: #54ad54; color: #fff; border-color: transparent; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; --focus-outline-color: rgba(51, 204, 51, 0.3); white-space: nowrap } .button:not(.st-button_style_none).std.is-focused, .button:not(.st-button_style_none).std.is-hovered, .button:not(.st-button_style_none).std:focus, .button:not(.st-button_style_none).std:hover, button:not(.st-button_style_none).std.is-focused, button:not(.st-button_style_none).std.is-hovered, button:not(.st-button_style_none).std:focus, button:not(.st-button_style_none).std:hover { background-color: #288b28; color: #fff; border-color: transparent } .button:not(.st-button_style_none).std.is-active, .button:not(.st-button_style_none).std:active, button:not(.st-button_style_none).std.is-active, button:not(.st-button_style_none).std:active { background-color: #246024; color: #fff; border-color: transparent } .button:not(.st-button_style_none).std.disabled, .button:not(.st-button_style_none).std[aria-disabled=true], .button:not(.st-button_style_none).std[disabled], button:not(.st-button_style_none).std.disabled, button:not(.st-button_style_none).std[aria-disabled=true], button:not(.st-button_style_none).std[disabled] { cursor: not-allowed; background-color: #aad6aa; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).std.is-outlined, button:not(.st-button_style_none).std.is-outlined { background-color: transparent; border-color: #54ad54; color: #54ad54 } .button:not(.st-button_style_none).std.is-outlined.is-focused, .button:not(.st-button_style_none).std.is-outlined.is-hovered, .button:not(.st-button_style_none).std.is-outlined:focus, .button:not(.st-button_style_none).std.is-outlined:hover, button:not(.st-button_style_none).std.is-outlined.is-focused, button:not(.st-button_style_none).std.is-outlined.is-hovered, button:not(.st-button_style_none).std.is-outlined:focus, button:not(.st-button_style_none).std.is-outlined:hover { border-color: #288b28; color: #288b28 } .button:not(.st-button_style_none).std.is-outlined.is-active, .button:not(.st-button_style_none).std.is-outlined:active, button:not(.st-button_style_none).std.is-outlined.is-active, button:not(.st-button_style_none).std.is-outlined:active { background-color: rgba(84, 173, 84, .1); border-color: #246024; color: #246024 } .button:not(.st-button_style_none).std.is-outlined.disabled, .button:not(.st-button_style_none).std.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).std.is-outlined[disabled], button:not(.st-button_style_none).std.is-outlined.disabled, button:not(.st-button_style_none).std.is-outlined[aria-disabled=true], button:not(.st-button_style_none).std.is-outlined[disabled] { background-color: transparent; border-color: #aad6aa; color: #aad6aa } .button:not(.st-button_style_none).std.has-icon, button:not(.st-button_style_none).std.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).std.has-icon .svg-icon, button:not(.st-button_style_none).std.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).std.has-icon .svg-icon, .button:not(.st-button_style_none).std.has-icon .svg-icon svg, button:not(.st-button_style_none).std.has-icon .svg-icon, button:not(.st-button_style_none).std.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).std.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).std.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).std.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).std.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).danger, button:not(.st-button_style_none).danger { background-color: #ff7965; color: #fff; border-color: transparent; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; --focus-outline-color: rgba(255, 121, 101, 0.3) } .button:not(.st-button_style_none).danger.is-focused, .button:not(.st-button_style_none).danger.is-hovered, .button:not(.st-button_style_none).danger:focus, .button:not(.st-button_style_none).danger:hover, button:not(.st-button_style_none).danger.is-focused, button:not(.st-button_style_none).danger.is-hovered, button:not(.st-button_style_none).danger:focus, button:not(.st-button_style_none).danger:hover { background-color: #ff9484; color: #fff; border-color: transparent } .button:not(.st-button_style_none).danger.is-active, .button:not(.st-button_style_none).danger:active, button:not(.st-button_style_none).danger.is-active, button:not(.st-button_style_none).danger:active { background-color: #ff7965; color: #fff; border-color: transparent } .button:not(.st-button_style_none).danger.disabled, .button:not(.st-button_style_none).danger[aria-disabled=true], .button:not(.st-button_style_none).danger[disabled], button:not(.st-button_style_none).danger.disabled, button:not(.st-button_style_none).danger[aria-disabled=true], button:not(.st-button_style_none).danger[disabled] { cursor: not-allowed; background-color: #ffbcb2; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).danger.is-outlined, button:not(.st-button_style_none).danger.is-outlined { background-color: transparent; border-color: #ff7965; color: #d41f1f } .button:not(.st-button_style_none).danger.is-outlined.is-focused, .button:not(.st-button_style_none).danger.is-outlined.is-hovered, .button:not(.st-button_style_none).danger.is-outlined:focus, .button:not(.st-button_style_none).danger.is-outlined:hover, button:not(.st-button_style_none).danger.is-outlined.is-focused, button:not(.st-button_style_none).danger.is-outlined.is-hovered, button:not(.st-button_style_none).danger.is-outlined:focus, button:not(.st-button_style_none).danger.is-outlined:hover { border-color: #ff9484; color: #d41f1f } .button:not(.st-button_style_none).danger.is-outlined.is-active, .button:not(.st-button_style_none).danger.is-outlined:active, button:not(.st-button_style_none).danger.is-outlined.is-active, button:not(.st-button_style_none).danger.is-outlined:active { background-color: rgba(255, 121, 101, .1); border-color: #ff7965; color: #d41f1f } .button:not(.st-button_style_none).danger.is-outlined.disabled, .button:not(.st-button_style_none).danger.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).danger.is-outlined[disabled], button:not(.st-button_style_none).danger.is-outlined.disabled, button:not(.st-button_style_none).danger.is-outlined[aria-disabled=true], button:not(.st-button_style_none).danger.is-outlined[disabled] { background-color: transparent; border-color: #ffbcb2; color: #ffbcb2 } .button:not(.st-button_style_none).danger.has-icon, button:not(.st-button_style_none).danger.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).danger.has-icon .svg-icon, button:not(.st-button_style_none).danger.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).danger.has-icon .svg-icon, .button:not(.st-button_style_none).danger.has-icon .svg-icon svg, button:not(.st-button_style_none).danger.has-icon .svg-icon, button:not(.st-button_style_none).danger.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).danger.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).danger.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).danger.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).danger.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).white, button:not(.st-button_style_none).white { background-color: #fff; color: #5e5e5e; border-color: #ccc; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; --focus-outline-color: rgba(100, 200, 255, 0.3) } .button:not(.st-button_style_none).white.is-focused, .button:not(.st-button_style_none).white.is-hovered, .button:not(.st-button_style_none).white:focus, .button:not(.st-button_style_none).white:hover, button:not(.st-button_style_none).white.is-focused, button:not(.st-button_style_none).white.is-hovered, button:not(.st-button_style_none).white:focus, button:not(.st-button_style_none).white:hover { background-color: #f5f5f5; color: #222; border-color: #999 } .button:not(.st-button_style_none).white.is-active, .button:not(.st-button_style_none).white:active, button:not(.st-button_style_none).white.is-active, button:not(.st-button_style_none).white:active { background-color: #fff; color: #5e5e5e; border-color: #ccc } .button:not(.st-button_style_none).white.disabled, .button:not(.st-button_style_none).white[aria-disabled=true], .button:not(.st-button_style_none).white[disabled], button:not(.st-button_style_none).white.disabled, button:not(.st-button_style_none).white[aria-disabled=true], button:not(.st-button_style_none).white[disabled] { cursor: not-allowed; background-color: #fff; color: rgba(94, 94, 94, .75); border-color: #ccc; opacity: inherit } .button:not(.st-button_style_none).white.is-outlined, button:not(.st-button_style_none).white.is-outlined { background-color: transparent; border-color: #fff; color: #fff } .button:not(.st-button_style_none).white.is-outlined.is-focused, .button:not(.st-button_style_none).white.is-outlined.is-hovered, .button:not(.st-button_style_none).white.is-outlined:focus, .button:not(.st-button_style_none).white.is-outlined:hover, button:not(.st-button_style_none).white.is-outlined.is-focused, button:not(.st-button_style_none).white.is-outlined.is-hovered, button:not(.st-button_style_none).white.is-outlined:focus, button:not(.st-button_style_none).white.is-outlined:hover { border-color: #f5f5f5; color: #f5f5f5 } .button:not(.st-button_style_none).white.is-outlined.is-active, .button:not(.st-button_style_none).white.is-outlined:active, button:not(.st-button_style_none).white.is-outlined.is-active, button:not(.st-button_style_none).white.is-outlined:active { background-color: rgba(255, 255, 255, .1); border-color: #fff; color: #fff } .button:not(.st-button_style_none).white.is-outlined.disabled, .button:not(.st-button_style_none).white.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).white.is-outlined[disabled], button:not(.st-button_style_none).white.is-outlined.disabled, button:not(.st-button_style_none).white.is-outlined[aria-disabled=true], button:not(.st-button_style_none).white.is-outlined[disabled] { background-color: transparent; border-color: #fff; color: #fff } .button:not(.st-button_style_none).white.has-icon, button:not(.st-button_style_none).white.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).white.has-icon .svg-icon, button:not(.st-button_style_none).white.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).white.has-icon .svg-icon, .button:not(.st-button_style_none).white.has-icon .svg-icon svg, button:not(.st-button_style_none).white.has-icon .svg-icon, button:not(.st-button_style_none).white.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).white.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).white.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).white.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).white.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).button__bg_white, button:not(.st-button_style_none).button__bg_white { background-color: #fff !important } button:not(.st-button_style_none).btn-link { padding: 0; vertical-align: baseline; background: 0 0; border: none; font-size: inherit; --focus-outline-color: rgba(100, 200, 255, 0.3); color: var(--link-color, inherit); -webkit-text-decoration-line: var(--link-line); text-decoration-line: var(--link-line); -webkit-text-decoration-color: var(--link-line-color); text-decoration-color: var(--link-line-color); text-underline-offset: var(--link-line-offset); --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:not(.st-button_style_none).btn-link:focus, button:not(.st-button_style_none).btn-link: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)) } a:active, button:not(.st-button_style_none).btn-link:active { -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)) } button:not(.st-button_style_none).btn-link:active { color: var(--link-active-color, var(--link-color)) } button:not(.st-button_style_none).btn-link:disabled, button:not(.st-button_style_none).btn-link[aria-disabled=true] { color: var(--link-disabled-color, var(--link-color)); cursor: not-allowed } button:not(.st-button_style_none).btn-link:disabled, button:not(.st-button_style_none).btn-link:focus, button:not(.st-button_style_none).btn-link:hover { background: 0 0 } button:not(.st-button_style_none).btn-details { --color: var(--btn-details-color, #222); --underline-color: var(--btn-details-underline-color, rgba(34, 34, 34, 0.28)); --arrow-color: var(--btn-details-arrow-color, #999); padding: 0; vertical-align: baseline; background: 0 0; border: none; color: var(--color); font-size: inherit; text-align: start; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-decoration-thickness: 1px; -webkit-text-decoration-style: dashed; text-decoration-style: dashed; -webkit-text-decoration-color: var(--underline-color); text-decoration-color: var(--underline-color); text-underline-offset: .25em; --focus-outline-color: rgba(100, 200, 255, 0.3) } button:not(.st-button_style_none).btn-details:hover { --underline-color: var(--color); --arrow-color: var(--color) } button:not(.st-button_style_none).btn-details:focus, button:not(.st-button_style_none).btn-details:hover { color: var(--color); background: 0 0 } button:not(.st-button_style_none).btn-details[disabled] { color: var(--color); background: 0 0; opacity: .5 } button:not(.st-button_style_none).btn-details[aria-expanded]::after { content: ""; display: inline-block; margin: 0 0 0 var(--btn-details-arrow-offset, 6px); width: var(--btn-details-arrow-size, .5em); height: var(--btn-details-arrow-size, .5em); vertical-align: var(--btn-details-valign, middle); -webkit-mask-image: url(/static/frontend/common_icons/chevron-down.svg); mask-image: url(/static/frontend/common_icons/chevron-down.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: var(--arrow-color); transform: none } button:not(.st-button_style_none).btn-details[aria-expanded=true]::after { transform: scaleY(-1) } button:not(.st-button_style_none).btn-details[without-arrow]::after { -webkit-mask-image: none !important; mask-image: none !important; background: 0 0 !important } .btn-details_theme_primary { --btn-details-color: #4485ed; --btn-details-arrow-color: #4485ed; --btn-details-underline-color: rgba(68, 133, 237, 0.28) } .btn-details_theme_tertiary { --btn-details-color: #777; --btn-details-underline-color: rgba(34, 34, 34, 0.28) } .button.st-button_style_none, button.st-button_style_none { border: none; background: 0 0; text-align: inherit; font-size: inherit } .button.st-button_style_ico .st-button__caption, .button.st-button_style_ico .svg-icon, button.st-button_style_ico .st-button__caption, button.st-button_style_ico .svg-icon { display: inline-block; vertical-align: middle } .button.st-button_style_ico .svg-icon, .button.st-button_style_ico .svg-icon>svg, button.st-button_style_ico .svg-icon, button.st-button_style_ico .svg-icon>svg { height: 1em } .button:not(.st-button_style_none), button:not(.st-button_style_none) { margin: 0; vertical-align: middle; cursor: pointer; font-family: inherit; line-height: 1; position: relative; text-decoration: none; text-align: center; border: 1px solid transparent; display: inline-block; padding: .75em 1.5em; font-size: 16px; background-color: #54ad54; color: #fff; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; --focus-outline-color: rgba(51, 204, 51, 0.3) } .button:not(.st-button_style_none).st-size-small, button:not(.st-button_style_none).st-size-small { padding: .563em 1em; font-size: 14px } .button:not(.st-button_style_none).st-size-large, button:not(.st-button_style_none).st-size-large { padding: .72em 2em; font-size: 18px } .button:not(.st-button_style_none).is-focused, .button:not(.st-button_style_none).is-hovered, .button:not(.st-button_style_none):focus, .button:not(.st-button_style_none):hover, button:not(.st-button_style_none).is-focused, button:not(.st-button_style_none).is-hovered, button:not(.st-button_style_none):focus, button:not(.st-button_style_none):hover { background-color: #288b28; color: #fff; border-color: transparent } .button:not(.st-button_style_none).is-active, .button:not(.st-button_style_none):active, button:not(.st-button_style_none).is-active, button:not(.st-button_style_none):active { background-color: #246024; color: #fff; border-color: transparent } .button:not(.st-button_style_none).disabled, .button:not(.st-button_style_none)[aria-disabled=true], .button:not(.st-button_style_none)[disabled], button:not(.st-button_style_none).disabled, button:not(.st-button_style_none)[aria-disabled=true], button:not(.st-button_style_none)[disabled] { cursor: not-allowed; background-color: #aad6aa; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).is-outlined, button:not(.st-button_style_none).is-outlined { background-color: transparent; border-color: #54ad54; color: #54ad54 } .button:not(.st-button_style_none).is-outlined.is-focused, .button:not(.st-button_style_none).is-outlined.is-hovered, .button:not(.st-button_style_none).is-outlined:focus, .button:not(.st-button_style_none).is-outlined:hover, button:not(.st-button_style_none).is-outlined.is-focused, button:not(.st-button_style_none).is-outlined.is-hovered, button:not(.st-button_style_none).is-outlined:focus, button:not(.st-button_style_none).is-outlined:hover { border-color: #288b28; color: #288b28 } .button:not(.st-button_style_none).is-outlined.is-active, .button:not(.st-button_style_none).is-outlined:active, button:not(.st-button_style_none).is-outlined.is-active, button:not(.st-button_style_none).is-outlined:active { background-color: rgba(84, 173, 84, .1); border-color: #246024; color: #246024 } .button:not(.st-button_style_none).is-outlined.disabled, .button:not(.st-button_style_none).is-outlined[aria-disabled=true], .button:not(.st-button_style_none).is-outlined[disabled], button:not(.st-button_style_none).is-outlined.disabled, button:not(.st-button_style_none).is-outlined[aria-disabled=true], button:not(.st-button_style_none).is-outlined[disabled] { background-color: transparent; border-color: #aad6aa; color: #aad6aa } .button:not(.st-button_style_none).has-icon, button:not(.st-button_style_none).has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).has-icon .svg-icon, button:not(.st-button_style_none).has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).has-icon .svg-icon, .button:not(.st-button_style_none).has-icon .svg-icon svg, button:not(.st-button_style_none).has-icon .svg-icon, button:not(.st-button_style_none).has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).secondary, button:not(.st-button_style_none).secondary { --focus-outline-color: rgba(0, 0, 0, 0.3); background-color: #000; color: #fff; border-color: transparent; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .button:not(.st-button_style_none).secondary.is-focused, .button:not(.st-button_style_none).secondary.is-hovered, .button:not(.st-button_style_none).secondary:focus, .button:not(.st-button_style_none).secondary:hover, button:not(.st-button_style_none).secondary.is-focused, button:not(.st-button_style_none).secondary.is-hovered, button:not(.st-button_style_none).secondary:focus, button:not(.st-button_style_none).secondary:hover { background-color: #333; color: #fff; border-color: transparent } .button:not(.st-button_style_none).secondary.is-active, .button:not(.st-button_style_none).secondary:active, button:not(.st-button_style_none).secondary.is-active, button:not(.st-button_style_none).secondary:active { background-color: #000; color: #fff; border-color: transparent } .button:not(.st-button_style_none).secondary.disabled, .button:not(.st-button_style_none).secondary[aria-disabled=true], .button:not(.st-button_style_none).secondary[disabled], button:not(.st-button_style_none).secondary.disabled, button:not(.st-button_style_none).secondary[aria-disabled=true], button:not(.st-button_style_none).secondary[disabled] { cursor: not-allowed; background-color: gray; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).secondary.is-outlined, button:not(.st-button_style_none).secondary.is-outlined { background-color: transparent; border-color: #000; color: #000 } .button:not(.st-button_style_none).secondary.is-outlined.is-focused, .button:not(.st-button_style_none).secondary.is-outlined.is-hovered, .button:not(.st-button_style_none).secondary.is-outlined:focus, .button:not(.st-button_style_none).secondary.is-outlined:hover, button:not(.st-button_style_none).secondary.is-outlined.is-focused, button:not(.st-button_style_none).secondary.is-outlined.is-hovered, button:not(.st-button_style_none).secondary.is-outlined:focus, button:not(.st-button_style_none).secondary.is-outlined:hover { border-color: #333; color: #333 } .button:not(.st-button_style_none).secondary.is-outlined.is-active, .button:not(.st-button_style_none).secondary.is-outlined:active, button:not(.st-button_style_none).secondary.is-outlined.is-active, button:not(.st-button_style_none).secondary.is-outlined:active { background-color: rgba(0, 0, 0, .1); border-color: #000; color: #000 } .button:not(.st-button_style_none).secondary.is-outlined.disabled, .button:not(.st-button_style_none).secondary.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).secondary.is-outlined[disabled], button:not(.st-button_style_none).secondary.is-outlined.disabled, button:not(.st-button_style_none).secondary.is-outlined[aria-disabled=true], button:not(.st-button_style_none).secondary.is-outlined[disabled] { background-color: transparent; border-color: gray; color: gray } .button:not(.st-button_style_none).secondary.has-icon, button:not(.st-button_style_none).secondary.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).secondary.has-icon .svg-icon, button:not(.st-button_style_none).secondary.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).secondary.has-icon .svg-icon, .button:not(.st-button_style_none).secondary.has-icon .svg-icon svg, button:not(.st-button_style_none).secondary.has-icon .svg-icon, button:not(.st-button_style_none).secondary.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).secondary.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).secondary.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).secondary.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).secondary.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).success, button:not(.st-button_style_none).success { background-color: #54ad54; color: #fff; border-color: transparent; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; --focus-outline-color: rgba(51, 204, 51, 0.3) } .button:not(.st-button_style_none).success.is-focused, .button:not(.st-button_style_none).success.is-hovered, .button:not(.st-button_style_none).success:focus, .button:not(.st-button_style_none).success:hover, button:not(.st-button_style_none).success.is-focused, button:not(.st-button_style_none).success.is-hovered, button:not(.st-button_style_none).success:focus, button:not(.st-button_style_none).success:hover { background-color: #288b28; color: #fff; border-color: transparent } .button:not(.st-button_style_none).success.is-active, .button:not(.st-button_style_none).success:active, button:not(.st-button_style_none).success.is-active, button:not(.st-button_style_none).success:active { background-color: #246024; color: #fff; border-color: transparent } .button:not(.st-button_style_none).success.disabled, .button:not(.st-button_style_none).success[aria-disabled=true], .button:not(.st-button_style_none).success[disabled], button:not(.st-button_style_none).success.disabled, button:not(.st-button_style_none).success[aria-disabled=true], button:not(.st-button_style_none).success[disabled] { cursor: not-allowed; background-color: #aad6aa; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).success.is-outlined, button:not(.st-button_style_none).success.is-outlined { background-color: transparent; border-color: #54ad54; color: #54ad54 } .button:not(.st-button_style_none).success.is-outlined.is-focused, .button:not(.st-button_style_none).success.is-outlined.is-hovered, .button:not(.st-button_style_none).success.is-outlined:focus, .button:not(.st-button_style_none).success.is-outlined:hover, button:not(.st-button_style_none).success.is-outlined.is-focused, button:not(.st-button_style_none).success.is-outlined.is-hovered, button:not(.st-button_style_none).success.is-outlined:focus, button:not(.st-button_style_none).success.is-outlined:hover { border-color: #288b28; color: #288b28 } .button:not(.st-button_style_none).success.is-outlined.is-active, .button:not(.st-button_style_none).success.is-outlined:active, button:not(.st-button_style_none).success.is-outlined.is-active, button:not(.st-button_style_none).success.is-outlined:active { background-color: rgba(84, 173, 84, .1); border-color: #246024; color: #246024 } .button:not(.st-button_style_none).success.is-outlined.disabled, .button:not(.st-button_style_none).success.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).success.is-outlined[disabled], button:not(.st-button_style_none).success.is-outlined.disabled, button:not(.st-button_style_none).success.is-outlined[aria-disabled=true], button:not(.st-button_style_none).success.is-outlined[disabled] { background-color: transparent; border-color: #aad6aa; color: #aad6aa } .button:not(.st-button_style_none).success.has-icon, button:not(.st-button_style_none).success.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).success.has-icon .svg-icon, button:not(.st-button_style_none).success.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).success.has-icon .svg-icon, .button:not(.st-button_style_none).success.has-icon .svg-icon svg, button:not(.st-button_style_none).success.has-icon .svg-icon, button:not(.st-button_style_none).success.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).success.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).success.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).success.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).success.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).alert, button:not(.st-button_style_none).alert { --focus-outline-color: rgba(153, 0, 221, 0.3); background-color: #90d; color: #fff; border-color: transparent; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .button:not(.st-button_style_none).alert.is-focused, .button:not(.st-button_style_none).alert.is-hovered, .button:not(.st-button_style_none).alert:focus, .button:not(.st-button_style_none).alert:hover, button:not(.st-button_style_none).alert.is-focused, button:not(.st-button_style_none).alert.is-hovered, button:not(.st-button_style_none).alert:focus, button:not(.st-button_style_none).alert:hover { background-color: #ad33e4; color: #fff; border-color: transparent } .button:not(.st-button_style_none).alert.is-active, .button:not(.st-button_style_none).alert:active, button:not(.st-button_style_none).alert.is-active, button:not(.st-button_style_none).alert:active { background-color: #90d; color: #fff; border-color: transparent } .button:not(.st-button_style_none).alert.disabled, .button:not(.st-button_style_none).alert[aria-disabled=true], .button:not(.st-button_style_none).alert[disabled], button:not(.st-button_style_none).alert.disabled, button:not(.st-button_style_none).alert[aria-disabled=true], button:not(.st-button_style_none).alert[disabled] { cursor: not-allowed; background-color: #cc80ee; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).alert.is-outlined, button:not(.st-button_style_none).alert.is-outlined { background-color: transparent; border-color: #90d; color: #90d } .button:not(.st-button_style_none).alert.is-outlined.is-focused, .button:not(.st-button_style_none).alert.is-outlined.is-hovered, .button:not(.st-button_style_none).alert.is-outlined:focus, .button:not(.st-button_style_none).alert.is-outlined:hover, button:not(.st-button_style_none).alert.is-outlined.is-focused, button:not(.st-button_style_none).alert.is-outlined.is-hovered, button:not(.st-button_style_none).alert.is-outlined:focus, button:not(.st-button_style_none).alert.is-outlined:hover { border-color: #ad33e4; color: #ad33e4 } .button:not(.st-button_style_none).alert.is-outlined.is-active, .button:not(.st-button_style_none).alert.is-outlined:active, button:not(.st-button_style_none).alert.is-outlined.is-active, button:not(.st-button_style_none).alert.is-outlined:active { background-color: rgba(153, 0, 221, .1); border-color: #90d; color: #90d } .button:not(.st-button_style_none).alert.is-outlined.disabled, .button:not(.st-button_style_none).alert.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).alert.is-outlined[disabled], button:not(.st-button_style_none).alert.is-outlined.disabled, button:not(.st-button_style_none).alert.is-outlined[aria-disabled=true], button:not(.st-button_style_none).alert.is-outlined[disabled] { background-color: transparent; border-color: #cc80ee; color: #cc80ee } .button:not(.st-button_style_none).alert.has-icon, button:not(.st-button_style_none).alert.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).alert.has-icon .svg-icon, button:not(.st-button_style_none).alert.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).alert.has-icon .svg-icon, .button:not(.st-button_style_none).alert.has-icon .svg-icon svg, button:not(.st-button_style_none).alert.has-icon .svg-icon, button:not(.st-button_style_none).alert.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).alert.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).alert.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).alert.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).alert.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).grey, button:not(.st-button_style_none).grey { --focus-outline-color: rgba(100, 200, 255, 0.3); background-color: #eee; color: #5e5e5e; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent } .button:not(.st-button_style_none).grey.is-focused, .button:not(.st-button_style_none).grey.is-hovered, .button:not(.st-button_style_none).grey:focus, .button:not(.st-button_style_none).grey:hover, button:not(.st-button_style_none).grey.is-focused, button:not(.st-button_style_none).grey.is-hovered, button:not(.st-button_style_none).grey:focus, button:not(.st-button_style_none).grey:hover { background-color: #ccc; color: #222; border-color: transparent } .button:not(.st-button_style_none).grey.is-active, .button:not(.st-button_style_none).grey:active, button:not(.st-button_style_none).grey.is-active, button:not(.st-button_style_none).grey:active { background-color: #eee; color: #5e5e5e; border-color: transparent } .button:not(.st-button_style_none).grey.disabled, .button:not(.st-button_style_none).grey[aria-disabled=true], .button:not(.st-button_style_none).grey[disabled], button:not(.st-button_style_none).grey.disabled, button:not(.st-button_style_none).grey[aria-disabled=true], button:not(.st-button_style_none).grey[disabled] { cursor: not-allowed; background-color: #f7f7f7; color: rgba(94, 94, 94, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).grey.is-outlined, button:not(.st-button_style_none).grey.is-outlined { background-color: transparent; border-color: #eee; color: #eee } .button:not(.st-button_style_none).grey.is-outlined.is-focused, .button:not(.st-button_style_none).grey.is-outlined.is-hovered, .button:not(.st-button_style_none).grey.is-outlined:focus, .button:not(.st-button_style_none).grey.is-outlined:hover, button:not(.st-button_style_none).grey.is-outlined.is-focused, button:not(.st-button_style_none).grey.is-outlined.is-hovered, button:not(.st-button_style_none).grey.is-outlined:focus, button:not(.st-button_style_none).grey.is-outlined:hover { border-color: #ccc; color: #ccc } .button:not(.st-button_style_none).grey.is-outlined.is-active, .button:not(.st-button_style_none).grey.is-outlined:active, button:not(.st-button_style_none).grey.is-outlined.is-active, button:not(.st-button_style_none).grey.is-outlined:active { background-color: rgba(238, 238, 238, .1); border-color: #eee; color: #eee } .button:not(.st-button_style_none).grey.is-outlined.disabled, .button:not(.st-button_style_none).grey.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).grey.is-outlined[disabled], button:not(.st-button_style_none).grey.is-outlined.disabled, button:not(.st-button_style_none).grey.is-outlined[aria-disabled=true], button:not(.st-button_style_none).grey.is-outlined[disabled] { background-color: transparent; border-color: #f7f7f7; color: #f7f7f7 } .button:not(.st-button_style_none).grey.has-icon, button:not(.st-button_style_none).grey.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).grey.has-icon .svg-icon, button:not(.st-button_style_none).grey.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).grey.has-icon .svg-icon, .button:not(.st-button_style_none).grey.has-icon .svg-icon svg, button:not(.st-button_style_none).grey.has-icon .svg-icon, button:not(.st-button_style_none).grey.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).grey.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).grey.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).grey.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).grey.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).darkgrey, button:not(.st-button_style_none).darkgrey { --focus-outline-color: rgba(100, 200, 255, 0.3); background-color: #b7b7b7; color: #fff; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent } .button:not(.st-button_style_none).darkgrey.is-focused, .button:not(.st-button_style_none).darkgrey.is-hovered, .button:not(.st-button_style_none).darkgrey:focus, .button:not(.st-button_style_none).darkgrey:hover, button:not(.st-button_style_none).darkgrey.is-focused, button:not(.st-button_style_none).darkgrey.is-hovered, button:not(.st-button_style_none).darkgrey:focus, button:not(.st-button_style_none).darkgrey:hover { background-color: #c5c5c5; color: #fff; border-color: transparent } .button:not(.st-button_style_none).darkgrey.is-active, .button:not(.st-button_style_none).darkgrey:active, button:not(.st-button_style_none).darkgrey.is-active, button:not(.st-button_style_none).darkgrey:active { background-color: #b7b7b7; color: #fff; border-color: transparent } .button:not(.st-button_style_none).darkgrey.disabled, .button:not(.st-button_style_none).darkgrey[aria-disabled=true], .button:not(.st-button_style_none).darkgrey[disabled], button:not(.st-button_style_none).darkgrey.disabled, button:not(.st-button_style_none).darkgrey[aria-disabled=true], button:not(.st-button_style_none).darkgrey[disabled] { cursor: not-allowed; background-color: #dbdbdb; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).darkgrey.is-outlined, button:not(.st-button_style_none).darkgrey.is-outlined { background-color: transparent; border-color: #b7b7b7; color: #b7b7b7 } .button:not(.st-button_style_none).darkgrey.is-outlined.is-focused, .button:not(.st-button_style_none).darkgrey.is-outlined.is-hovered, .button:not(.st-button_style_none).darkgrey.is-outlined:focus, .button:not(.st-button_style_none).darkgrey.is-outlined:hover, button:not(.st-button_style_none).darkgrey.is-outlined.is-focused, button:not(.st-button_style_none).darkgrey.is-outlined.is-hovered, button:not(.st-button_style_none).darkgrey.is-outlined:focus, button:not(.st-button_style_none).darkgrey.is-outlined:hover { border-color: #c5c5c5; color: #c5c5c5 } .button:not(.st-button_style_none).darkgrey.is-outlined.is-active, .button:not(.st-button_style_none).darkgrey.is-outlined:active, button:not(.st-button_style_none).darkgrey.is-outlined.is-active, button:not(.st-button_style_none).darkgrey.is-outlined:active { background-color: rgba(183, 183, 183, .1); border-color: #b7b7b7; color: #b7b7b7 } .button:not(.st-button_style_none).darkgrey.is-outlined.disabled, .button:not(.st-button_style_none).darkgrey.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).darkgrey.is-outlined[disabled], button:not(.st-button_style_none).darkgrey.is-outlined.disabled, button:not(.st-button_style_none).darkgrey.is-outlined[aria-disabled=true], button:not(.st-button_style_none).darkgrey.is-outlined[disabled] { background-color: transparent; border-color: #dbdbdb; color: #dbdbdb } .button:not(.st-button_style_none).darkgrey.has-icon, button:not(.st-button_style_none).darkgrey.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).darkgrey.has-icon .svg-icon, button:not(.st-button_style_none).darkgrey.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).darkgrey.has-icon .svg-icon, .button:not(.st-button_style_none).darkgrey.has-icon .svg-icon svg, button:not(.st-button_style_none).darkgrey.has-icon .svg-icon, button:not(.st-button_style_none).darkgrey.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).darkgrey.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).darkgrey.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).darkgrey.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).darkgrey.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).button_danger, button:not(.st-button_style_none).button_danger { background-color: red; color: #fff; border-color: transparent; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .button:not(.st-button_style_none).button_danger.is-focused, .button:not(.st-button_style_none).button_danger.is-hovered, .button:not(.st-button_style_none).button_danger:focus, .button:not(.st-button_style_none).button_danger:hover, button:not(.st-button_style_none).button_danger.is-focused, button:not(.st-button_style_none).button_danger.is-hovered, button:not(.st-button_style_none).button_danger:focus, button:not(.st-button_style_none).button_danger:hover { background-color: #f52929; color: #fff; border-color: transparent } .button:not(.st-button_style_none).button_danger.is-active, .button:not(.st-button_style_none).button_danger:active, button:not(.st-button_style_none).button_danger.is-active, button:not(.st-button_style_none).button_danger:active { background-color: red; color: #fff; border-color: transparent } .button:not(.st-button_style_none).button_danger.disabled, .button:not(.st-button_style_none).button_danger[aria-disabled=true], .button:not(.st-button_style_none).button_danger[disabled], button:not(.st-button_style_none).button_danger.disabled, button:not(.st-button_style_none).button_danger[aria-disabled=true], button:not(.st-button_style_none).button_danger[disabled] { cursor: not-allowed; background-color: #ff8080; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).button_danger.is-outlined, button:not(.st-button_style_none).button_danger.is-outlined { background-color: transparent; border-color: red; color: red } .button:not(.st-button_style_none).button_danger.is-outlined.is-focused, .button:not(.st-button_style_none).button_danger.is-outlined.is-hovered, .button:not(.st-button_style_none).button_danger.is-outlined:focus, .button:not(.st-button_style_none).button_danger.is-outlined:hover, button:not(.st-button_style_none).button_danger.is-outlined.is-focused, button:not(.st-button_style_none).button_danger.is-outlined.is-hovered, button:not(.st-button_style_none).button_danger.is-outlined:focus, button:not(.st-button_style_none).button_danger.is-outlined:hover { border-color: #f52929; color: #f52929 } .button:not(.st-button_style_none).button_danger.is-outlined.is-active, .button:not(.st-button_style_none).button_danger.is-outlined:active, button:not(.st-button_style_none).button_danger.is-outlined.is-active, button:not(.st-button_style_none).button_danger.is-outlined:active { background-color: rgba(255, 0, 0, .1); border-color: red; color: red } .button:not(.st-button_style_none).button_danger.is-outlined.disabled, .button:not(.st-button_style_none).button_danger.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).button_danger.is-outlined[disabled], button:not(.st-button_style_none).button_danger.is-outlined.disabled, button:not(.st-button_style_none).button_danger.is-outlined[aria-disabled=true], button:not(.st-button_style_none).button_danger.is-outlined[disabled] { background-color: transparent; border-color: #ff8080; color: #ff8080 } .button:not(.st-button_style_none).button_danger.has-icon, button:not(.st-button_style_none).button_danger.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).button_danger.has-icon .svg-icon, button:not(.st-button_style_none).button_danger.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).button_danger.has-icon .svg-icon, .button:not(.st-button_style_none).button_danger.has-icon .svg-icon svg, button:not(.st-button_style_none).button_danger.has-icon .svg-icon, button:not(.st-button_style_none).button_danger.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).button_danger.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).button_danger.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).button_danger.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).button_danger.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).button_danger-lite, button:not(.st-button_style_none).button_danger-lite { color: red; background-color: #fff; border: 1px solid red } .button:not(.st-button_style_none).button_danger-lite:hover, .button:not(.st-button_style_none).button_danger-lite[disabled], button:not(.st-button_style_none).button_danger-lite:hover, button:not(.st-button_style_none).button_danger-lite[disabled] { color: red; background-color: #eee; border: 1px solid red } .button:not(.st-button_style_none).button__border_green, button:not(.st-button_style_none).button__border_green { border-color: #54ad54 } .button:not(.st-button_style_none).button__text_green, button:not(.st-button_style_none).button__text_green { color: #54ad54 !important } .button:not(.st-button_style_none).expand, button:not(.st-button_style_none).expand { padding: .75em 0; font-size: 16px; width: 100% } .button:not(.st-button_style_none).expand.st-size-small, button:not(.st-button_style_none).expand.st-size-small { padding: .563em 1em; font-size: 14px } .button:not(.st-button_style_none).expand.st-size-large, button:not(.st-button_style_none).expand.st-size-large { padding: .72em 2em; font-size: 18px } .button:not(.st-button_style_none).left-align, button:not(.st-button_style_none).left-align { text-align: left; text-indent: .75em } .button:not(.st-button_style_none).right-align, button:not(.st-button_style_none).right-align { text-align: right; padding-right: .75em } .button:not(.st-button_style_none).st-size-normal, button:not(.st-button_style_none).st-size-normal { margin: 0; padding: 10px 1.5em; line-height: 19px } .button:not(.st-button_style_none).button_border_none, button:not(.st-button_style_none).button_border_none { border: none } .button:not(.st-button_style_none).button_style_secondary, button:not(.st-button_style_none).button_style_secondary { background-color: #eee; border-color: transparent; transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #a8a8a8; font-size: 14px; font-weight: 400 } .button:not(.st-button_style_none).button_style_secondary.is-focused, .button:not(.st-button_style_none).button_style_secondary.is-hovered, .button:not(.st-button_style_none).button_style_secondary:focus, .button:not(.st-button_style_none).button_style_secondary:hover, button:not(.st-button_style_none).button_style_secondary.is-focused, button:not(.st-button_style_none).button_style_secondary.is-hovered, button:not(.st-button_style_none).button_style_secondary:focus, button:not(.st-button_style_none).button_style_secondary:hover { background-color: #f1f1f1; color: #fff; border-color: transparent } .button:not(.st-button_style_none).button_style_secondary.is-active, .button:not(.st-button_style_none).button_style_secondary:active, button:not(.st-button_style_none).button_style_secondary.is-active, button:not(.st-button_style_none).button_style_secondary:active { background-color: #eee; color: #fff; border-color: transparent } .button:not(.st-button_style_none).button_style_secondary.disabled, .button:not(.st-button_style_none).button_style_secondary[aria-disabled=true], .button:not(.st-button_style_none).button_style_secondary[disabled], button:not(.st-button_style_none).button_style_secondary.disabled, button:not(.st-button_style_none).button_style_secondary[aria-disabled=true], button:not(.st-button_style_none).button_style_secondary[disabled] { cursor: not-allowed; background-color: #f7f7f7; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).button_style_secondary.is-outlined, button:not(.st-button_style_none).button_style_secondary.is-outlined { background-color: transparent; border-color: #eee; color: #eee } .button:not(.st-button_style_none).button_style_secondary.is-outlined.is-focused, .button:not(.st-button_style_none).button_style_secondary.is-outlined.is-hovered, .button:not(.st-button_style_none).button_style_secondary.is-outlined:focus, .button:not(.st-button_style_none).button_style_secondary.is-outlined:hover, button:not(.st-button_style_none).button_style_secondary.is-outlined.is-focused, button:not(.st-button_style_none).button_style_secondary.is-outlined.is-hovered, button:not(.st-button_style_none).button_style_secondary.is-outlined:focus, button:not(.st-button_style_none).button_style_secondary.is-outlined:hover { border-color: #f1f1f1; color: #f1f1f1 } .button:not(.st-button_style_none).button_style_secondary.is-outlined.is-active, .button:not(.st-button_style_none).button_style_secondary.is-outlined:active, button:not(.st-button_style_none).button_style_secondary.is-outlined.is-active, button:not(.st-button_style_none).button_style_secondary.is-outlined:active { background-color: rgba(238, 238, 238, .1); border-color: #eee; color: #eee } .button:not(.st-button_style_none).button_style_secondary.is-outlined.disabled, .button:not(.st-button_style_none).button_style_secondary.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).button_style_secondary.is-outlined[disabled], button:not(.st-button_style_none).button_style_secondary.is-outlined.disabled, button:not(.st-button_style_none).button_style_secondary.is-outlined[aria-disabled=true], button:not(.st-button_style_none).button_style_secondary.is-outlined[disabled] { background-color: transparent; border-color: #f7f7f7; color: #f7f7f7 } .button:not(.st-button_style_none).button_style_secondary.has-icon, button:not(.st-button_style_none).button_style_secondary.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon, button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon, .button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon svg, button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon, button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).button_style_secondary.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).button_style_secondary:focus, .button:not(.st-button_style_none).button_style_secondary:hover, button:not(.st-button_style_none).button_style_secondary:focus, button:not(.st-button_style_none).button_style_secondary:hover { color: #000 } .button:not(.st-button_style_none).button_style_ico, button:not(.st-button_style_none).button_style_ico { transition: background-color .2s, var(--focus-outline-transition); border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .2em .4em; font-size: 16px; background: 0 0; color: #777; border: none; margin-left: -.2em } .button:not(.st-button_style_none).button_style_ico.is-focused, .button:not(.st-button_style_none).button_style_ico.is-hovered, .button:not(.st-button_style_none).button_style_ico:focus, .button:not(.st-button_style_none).button_style_ico:hover, button:not(.st-button_style_none).button_style_ico.is-focused, button:not(.st-button_style_none).button_style_ico.is-hovered, button:not(.st-button_style_none).button_style_ico:focus, button:not(.st-button_style_none).button_style_ico:hover { background-color: #f1f1f1; color: #fff; border-color: transparent } .button:not(.st-button_style_none).button_style_ico.is-active, .button:not(.st-button_style_none).button_style_ico:active, button:not(.st-button_style_none).button_style_ico.is-active, button:not(.st-button_style_none).button_style_ico:active { background-color: #eee; color: #fff; border-color: transparent } .button:not(.st-button_style_none).button_style_ico.disabled, .button:not(.st-button_style_none).button_style_ico[aria-disabled=true], .button:not(.st-button_style_none).button_style_ico[disabled], button:not(.st-button_style_none).button_style_ico.disabled, button:not(.st-button_style_none).button_style_ico[aria-disabled=true], button:not(.st-button_style_none).button_style_ico[disabled] { cursor: not-allowed; background-color: #f7f7f7; color: rgba(255, 255, 255, .75); border-color: transparent; opacity: inherit } .button:not(.st-button_style_none).button_style_ico.is-outlined, button:not(.st-button_style_none).button_style_ico.is-outlined { background-color: transparent; border-color: #eee; color: #eee } .button:not(.st-button_style_none).button_style_ico.is-outlined.is-focused, .button:not(.st-button_style_none).button_style_ico.is-outlined.is-hovered, .button:not(.st-button_style_none).button_style_ico.is-outlined:focus, .button:not(.st-button_style_none).button_style_ico.is-outlined:hover, button:not(.st-button_style_none).button_style_ico.is-outlined.is-focused, button:not(.st-button_style_none).button_style_ico.is-outlined.is-hovered, button:not(.st-button_style_none).button_style_ico.is-outlined:focus, button:not(.st-button_style_none).button_style_ico.is-outlined:hover { border-color: #f1f1f1; color: #f1f1f1 } .button:not(.st-button_style_none).button_style_ico.is-outlined.is-active, .button:not(.st-button_style_none).button_style_ico.is-outlined:active, button:not(.st-button_style_none).button_style_ico.is-outlined.is-active, button:not(.st-button_style_none).button_style_ico.is-outlined:active { background-color: rgba(238, 238, 238, .1); border-color: #eee; color: #eee } .button:not(.st-button_style_none).button_style_ico.is-outlined.disabled, .button:not(.st-button_style_none).button_style_ico.is-outlined[aria-disabled=true], .button:not(.st-button_style_none).button_style_ico.is-outlined[disabled], button:not(.st-button_style_none).button_style_ico.is-outlined.disabled, button:not(.st-button_style_none).button_style_ico.is-outlined[aria-disabled=true], button:not(.st-button_style_none).button_style_ico.is-outlined[disabled] { background-color: transparent; border-color: #f7f7f7; color: #f7f7f7 } .button:not(.st-button_style_none).button_style_ico.has-icon, button:not(.st-button_style_none).button_style_ico.has-icon { display: inline-flex; justify-content: center; --p1: var(--btn-has-icon-p1, .6em); --p2: var(--btn-has-icon-p2, -.3em) } .button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon, button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon { align-items: center; display: inline-flex; justify-content: center } .button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon, .button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon svg, button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon, button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon svg { width: 1em; height: 1em } .button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon:first-child:not(:last-child), button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon:first-child:not(:last-child) { margin-left: var(--p2); margin-right: var(--p1) } .button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon:last-child:not(:first-child), button:not(.st-button_style_none).button_style_ico.has-icon .svg-icon:last-child:not(:first-child) { margin-left: var(--p1); margin-right: var(--p2) } .button:not(.st-button_style_none).button_style_ico svg, button:not(.st-button_style_none).button_style_ico svg { height: 16px } .button:not(.st-button_style_none).button_style_ico:focus, .button:not(.st-button_style_none).button_style_ico:hover, button:not(.st-button_style_none).button_style_ico:focus, button:not(.st-button_style_none).button_style_ico:hover { color: #54ad54; background: 0 0 } .button:not(.st-button_style_none).button_style_ico[disabled], button:not(.st-button_style_none).button_style_ico[disabled] { color: #ccc; background-color: transparent } .button:not(.st-button_style_none).button_hover_danger:not([disabled]):focus, .button:not(.st-button_style_none).button_hover_danger:not([disabled]):hover, button:not(.st-button_style_none).button_hover_danger:not([disabled]):focus, button:not(.st-button_style_none).button_hover_danger:not([disabled]):hover { color: red } .button:not(.st-button_style_none).button_with-loader, button:not(.st-button_style_none).button_with-loader { display: inline-flex; flex-direction: row; justify-content: center; align-items: center } .button:not(.st-button_style_none).button_with-loader .svg-icon, .button:not(.st-button_style_none).button_with-loader svg, button:not(.st-button_style_none).button_with-loader .svg-icon, button:not(.st-button_style_none).button_with-loader svg { height: 1em; width: 1em } .button:not(.st-button_style_none).button-full-width, .edit-user-financial-details-form input[type=number], .edit-user-financial-details-form input[type=text], .edit-user-financial-details-form input[type=url], .edit-user-financial-details-form textarea, .permissions_add-member input[type=number], .permissions_add-member input[type=text], button:not(.st-button_style_none).button-full-width, input[type=file] { width: 100% } .button:not(.st-button_style_none).button_with-loader .svg-icon, button:not(.st-button_style_none).button_with-loader .svg-icon { margin-right: .5em } .button:not(.st-button_style_none).st-button-link, .button:not(.st-button_style_none).st-button_style_link, button:not(.st-button_style_none).st-button-link, button:not(.st-button_style_none).st-button_style_link { background: 0 0; border: none; color: #1466c6; padding: 0; font-size: inherit; --focus-outline-color: rgba(100, 200, 255, 0.3) } .button:not(.st-button_style_none).st-button-link .st-button__text, .button:not(.st-button_style_none).st-button_style_link .st-button__text, button:not(.st-button_style_none).st-button-link .st-button__text, button:not(.st-button_style_none).st-button_style_link .st-button__text { border-bottom: dotted 1px #1466c6 } .button:not(.st-button_style_none).st-button-link.st-button-link__black, .button:not(.st-button_style_none).st-button_style_link.st-button-link__black, button:not(.st-button_style_none).st-button-link.st-button-link__black, button:not(.st-button_style_none).st-button_style_link.st-button-link__black { color: #000 } .button:not(.st-button_style_none).st-button-link.st-button-link__underline, .button:not(.st-button_style_none).st-button_style_link.st-button-link__underline, button:not(.st-button_style_none).st-button-link.st-button-link__underline, button:not(.st-button_style_none).st-button_style_link.st-button-link__underline { text-decoration: underline } form { margin: 0 0 1em } form .row .row { margin: 0 -.5em } form .row .row .column, form .row .row .columns { padding: 0 .5em } form .row .row.collapse { margin: 0 } form .row .row.collapse .column, form .row .row.collapse .columns { padding: 0 } form .row .row.collapse input { -moz-border-radius-bottomright: 0; -moz-border-radius-topright: 0; -webkit-border-bottom-right-radius: 0; -webkit-border-top-right-radius: 0 } form .row input.column, form .row input.columns, form .row textarea.column, form .row textarea.columns { padding-left: .5em } label { font-size: .875em; display: block; margin-bottom: .1875em } label.right { float: none; text-align: right } label.inline { margin: 0 0 1em; padding: .625em 0 } input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea { -webkit-appearance: none; -webkit-border-radius: 0; background-color: #fff; font-family: inherit; color: rgba(0, 0, 0, .75); display: block; margin: 0 0 1em; box-sizing: border-box } input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, textarea:focus { background: #fafafa; border-color: var(--validation-border-color, #999); outline: 0 } :-moz-ui-invalid { box-shadow: none } input[type=checkbox], input[type=file], input[type=radio], select { margin: 0 0 1em } fieldset { border: 1px solid #ddd; padding: 1.25em; margin: 1.125em 0 } fieldset legend { background: #fff; padding: 0 .1875em; margin: 0 0 0 -.1875em } .error small.error, .error>small, [data-abide] .error small.error, [data-abide] small.error, [data-abide] span.error, small.error, span.error { padding: .375em .25em; font-size: .75em; font-weight: 700; background: #90d } [data-abide] .error small.error, [data-abide] small.error, [data-abide] span.error { display: block; margin-top: 0; margin-bottom: 1em; color: #fff } [data-abide] small.error, [data-abide] span.error { display: none } small.error, span.error { display: block; margin-top: 0; margin-bottom: 1em; color: #fff } .error input, .error select, .error textarea { border-color: #90d; background-color: rgba(153, 0, 221, .1); margin-bottom: 0 } .error input:focus, .error select:focus, .error textarea:focus { background: #fafafa; border-color: #999 } .error label, .error label.error { color: #90d } .error small.error, .error>small { display: block; margin-top: 0; margin-bottom: 1em; color: #fff } .error span.error-message { display: block } input.error, textarea.error { border-color: #90d; background-color: rgba(153, 0, 221, .1); margin-bottom: 0 } input.error:focus, textarea.error:focus { background: #fafafa; border-color: #999 } .error select { border-color: #90d; background-color: rgba(153, 0, 221, .1) } .error select:focus { background: #fafafa; border-color: #999 } label.error { color: #90d } input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea { font-size: 1em; border-width: 1px; border-style: solid; border-radius: .125em; padding: .5em; height: 2.625em; width: auto } input[type=date].alert, input[type=datetime-local].alert, input[type=datetime].alert, input[type=email].alert, input[type=month].alert, input[type=number].alert, input[type=password].alert, input[type=search].alert, input[type=tel].alert, input[type=text].alert, input[type=time].alert, input[type=url].alert, input[type=week].alert, textarea.alert { color: #90d; border-color: #90d } input[type=date].success, input[type=datetime-local].success, input[type=datetime].success, input[type=email].success, input[type=month].success, input[type=number].success, input[type=password].success, input[type=search].success, input[type=tel].success, input[type=text].success, input[type=time].success, input[type=url].success, input[type=week].success, textarea.success { color: #3c3; border-color: #6c6 } input[type=date].disabled, input[type=date][disabled], input[type=datetime-local].disabled, input[type=datetime-local][disabled], input[type=datetime].disabled, input[type=datetime][disabled], input[type=email].disabled, input[type=email][disabled], input[type=month].disabled, input[type=month][disabled], input[type=number].disabled, input[type=number][disabled], input[type=password].disabled, input[type=password][disabled], input[type=search].disabled, input[type=search][disabled], input[type=tel].disabled, input[type=tel][disabled], input[type=text].disabled, input[type=text][disabled], input[type=time].disabled, input[type=time][disabled], input[type=url].disabled, input[type=url][disabled], input[type=week].disabled, input[type=week][disabled], textarea.disabled, textarea[disabled] { background-color: #eee; color: #a5a5a5; border-color: #a5a5a5 } input[type=date]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder, input[type=datetime]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=month]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=time]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=week]::-moz-placeholder, textarea::-moz-placeholder { color: #a5a5a5 } input[type=date]:-ms-input-placeholder, input[type=datetime-local]:-ms-input-placeholder, input[type=datetime]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=month]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=search]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=text]:-ms-input-placeholder, input[type=time]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, input[type=week]:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #a5a5a5 } input[type=date]::placeholder, input[type=datetime-local]::placeholder, input[type=datetime]::placeholder, input[type=email]::placeholder, input[type=month]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=search]::placeholder, input[type=tel]::placeholder, input[type=text]::placeholder, input[type=time]::placeholder, input[type=url]::placeholder, input[type=week]::placeholder, textarea::placeholder { color: #a5a5a5 } label { font-weight: 400 } .input-errors_state_fail { position: relative } .input-errors_state_fail input, .input-errors_state_fail select, .input-errors_state_fail textarea { border: 1px solid #d41f1f !important; background: #fbe5e5 !important; color: #4b2e2e; transition: all 1s; transition-delay: 1s } .input-note { display: flex; gap: 2px 16px; margin-top: 4px } .input-char-counter, .input-note { font-size: 12px; line-height: 14px; letter-spacing: .4px; color: var(--validation-fg-color, #5e5e5e) } .input-note_validation-error { color: var(--validation-fg-color, #d41f1f) } .input-char-counter[data-warn], .input-note__char-counter[data-warn] { color: var(--validation-fg-color, #e88600) } .input-char-counter[data-err], .input-note__char-counter[data-err] { color: var(--validation-fg-color, #d41f1f) } .input-wrapper>input { margin: 0 } .input-wrapper__max-width-fit-content { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content } .input-wrapper__max-width-min-content { max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content } .middle { vertical-align: middle } .alert-box a, .alert-box a:hover { color: #fff; text-decoration: underline } .alert-box a.close { color: #333; text-decoration: none } .alert-box.alert-box_action { cursor: pointer } .note { font-size: .9em; margin-bottom: 0 } .animated { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; animation-duration: 1s } @-webkit-keyframes wobble { from { transform: none } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); box-shadow: 0 0 30px grey } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } to { transform: none; box-shadow: none } } @keyframes wobble { from { transform: none } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); box-shadow: 0 0 30px grey } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } to { transform: none; box-shadow: none } } @-webkit-keyframes wobble-clone { from { transform: none } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); box-shadow: 0 0 30px grey } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } to { transform: none; box-shadow: none } } @keyframes wobble-clone { from { transform: none } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); box-shadow: 0 0 30px grey } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } to { transform: none; box-shadow: none } } @-webkit-keyframes adaptive-loader-animation { 0%, 100% { left: -100% } 49%, 50% { left: 100% } } @keyframes adaptive-loader-animation { 0%, 100% { left: -100% } 49%, 50% { left: 100% } } @-webkit-keyframes swing { 20% { transform: rotate(15deg) } 40% { transform: rotate(-10deg) } 60% { transform: rotate(5deg) } 80% { transform: rotate(-5deg) } 100% { transform: rotate(0) } } @keyframes swing { 20% { transform: rotate(15deg) } 40% { transform: rotate(-10deg) } 60% { transform: rotate(5deg) } 80% { transform: rotate(-5deg) } 100% { transform: rotate(0) } } .swing { transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { from, to { transform: scale3d(1, 1, 1) } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg) } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } } @keyframes tada { from, to { transform: scale3d(1, 1, 1) } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg) } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } } @-webkit-keyframes spin { 0% { transform: rotate(0) } 100% { transform: rotate(359deg) } } @keyframes spin { 0% { transform: rotate(0) } 100% { transform: rotate(359deg) } } p.profile-header { color: #000; font-size: 24px; font-weight: 700; margin-bottom: 1em } img.gravatar { width: 80px; height: 80px } .user-learn__filters { margin-bottom: 12px } .profile__details, .search-list { margin-bottom: 0 } .profile_list-element { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid #d8d8d8 !important; border-radius: 0 !important } .profile_list-element:last-child { border-bottom: 0 !important } form.search input { display: inline-block } form.search input[type=text] { font-family: inherit; line-height: 1; position: relative; text-decoration: none; display: inline-block; font-size: 16px; padding: .8em .5em .5em; text-align: left; cursor: auto; width: auto; height: auto; min-width: 350px; color: #5e5e5e; border: 2px solid #5e5e5e; margin: 0; vertical-align: middle } .attempt-wrapper .timer, .smart-hints__hint, code, kbd, pre, samp, tt { font-family: "JetBrains Mono", monospace } form.search input[type=text].st-size-small { padding: .563em 1em; font-size: 14px } form.search input[type=text].st-size-large { padding: .72em 2em; font-size: 18px } form.search .welcoming { color: #a5e5a5; font-weight: 700; vertical-align: middle; margin-right: .4em } form.search .button, form.search button { vertical-align: middle } .search-list { list-style: none; padding: 0; margin-top: 0 } .search-item { margin-bottom: 5px } .search-item i { font-size: .8em } @media screen and (max-width:715px) { form.search .welcoming { display: block } form.search #id_q { min-width: 90%; display: block; margin: 10px auto } } fieldset>legend { background: 0 0 } .personal.disabled input, .personal.disabled label, .personal.disabled legend, .personal.disabled select, .personal.disabled select>option { color: #CCC } .header { font-size: 1.875em; font-weight: 200; color: #a5a5a5 } .panel { border-width: 0 !important; background-color: #fff !important } .pane { position: relative } .pane .icons { position: absolute; right: 10px; top: 10px; text-align: right } .pane .icons i { opacity: .5 } .pane .icons i:hover { opacity: 1 } .icon-remove { color: red; display: inline-block } .icon-remove::after { content: "✘"; font-weight: 700; font-style: normal } .permissions_add-member input[type=submit] { margin-top: 24px } .edit-user-financial-details-form { padding-bottom: 75px } .edit-user-financial-details-form textarea { height: 75px } ul.list-style__check-marks li.unchecked-red::before, ul.list-style__check-marks li.unchecked::before, ul.list-style__check-marks li:not(.unchecked):not(.unchecked-red)::before { left: var(--list-item-checkbox-marker-left-offset, 0); width: var(--list-item-checkbox-marker-size, 1.25em); height: var(--list-item-checkbox-marker-size, 1.25em) } .edit-user-financial-details-form .note { font-size: .8em; color: #999 } label { cursor: default; color: #5e5e5e } summary { display: list-item } label[data-required]::after { content: "*"; margin-left: 1px; color: #d41f1f } ul.list-style__check-marks { list-style: none } ul.list-style__check-marks li:not(.unchecked):not(.unchecked-red) { position: relative; padding-left: var(--list-item-checkbox-marker-space, 1.7em); will-change: transform } ul.list-style__check-marks li:not(.unchecked):not(.unchecked-red)::before { content: url(/static/frontend/common_icons/list-check-mark.svg); position: absolute; top: var(--list-item-checkbox-marker-top-offset, .125em); display: inline-block } ul.list-style__check-marks li.unchecked { color: #999; position: relative; padding-left: var(--list-item-checkbox-marker-space, 1.7em); will-change: transform } ul.list-style__check-marks li.unchecked::before { content: url(/static/frontend/common_icons/list-grey-cross-mark.svg); position: absolute; top: var(--list-item-checkbox-marker-top-offset, .125em); display: inline-block } ul.list-style__check-marks li.unchecked-red { color: #222; position: relative; padding-left: var(--list-item-checkbox-marker-space, 1.7em); will-change: transform } .header-banner[data-theme=confirm] .header-banner__message button, a { color: var(--link-color, inherit); -webkit-text-decoration-color: var(--link-line-color); text-decoration-color: var(--link-line-color); -webkit-text-decoration-line: var(--link-line); text-decoration-line: var(--link-line); text-underline-offset: var(--link-line-offset) } ul.list-style__check-marks li.unchecked-red::before { content: url(/static/frontend/common_icons/list-red-cross-mark.svg); position: absolute; top: var(--list-item-checkbox-marker-top-offset, .125em); display: inline-block } ul.list-style__em-dash { list-style: none } ul.list-style__em-dash li { position: relative; padding-left: 1.4em } ul.list-style__em-dash li::before { content: "—"; position: absolute; margin-left: -1.4em } meter { overflow: hidden; border-radius: 2px; background: var(--meter-background, #fff) } meter::-webkit-meter-inner-element { display: block } meter::-webkit-meter-bar { background: var(--meter-background, #fff); border: none; border-radius: 0 } meter::-webkit-meter-optimum-value { background: var(--meter-color, #6c6) } meter::-webkit-meter-suboptimum-value { background: var(--meter-color, #f9db60) } meter::-webkit-meter-even-less-good-value { background: var(--meter-color, #ff7965) } meter[value="0"]::-webkit-meter-bar { background: var(--meter-background-empty, var(--meter-background, #fff)) } meter:-moz-meter-optimum::-moz-meter-bar { background: var(--meter-color, #6c6) } meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--meter-color, #f9db60) } meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--meter-color, #ff7965) } meter[value="0"] { background: var(--meter-background-empty, var(--meter-background, #fff)) } meter[data-state=optimum] { --meter-color: #66cc66 } meter[data-state=sub-optimum] { --meter-color: #f9db60 } meter[data-state=sub-sub-optimum] { --meter-color: #ff7965 } progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 8px; border: none; border-radius: 3px; background-color: var(--progress-background) } progress::-webkit-progress-bar { background-color: var(--progress-background); border-radius: 3px } progress::-webkit-progress-value { background-color: var(--progress-bar); border-radius: 3px } progress::-moz-progress-bar { background-color: var(--progress-bar); border-radius: 3px } @supports not (background:paint(a)) { progress:indeterminate { -webkit-animation: progress-indeterminate-fallback 4s linear infinite; animation: progress-indeterminate-fallback 4s linear infinite; background: linear-gradient(to right, var(--progress-indeterminate-color-1) 20%, var(--progress-indeterminate-color-2) 20%) var(--progress-bar); background-size: 200% 100% } } @supports (background:paint(a)) { progress:indeterminate { --progress-indeterminate-pos: 0%; background: linear-gradient(to right, var(--progress-indeterminate-color-2) var(--progress-indeterminate-pos), var(--progress-indeterminate-color-1) calc(var(--progress-indeterminate-pos) + 20%), var(--progress-indeterminate-color-2) calc(var(--progress-indeterminate-pos) + 40%)) var(--progress-bar); -webkit-animation-name: progress-indeterminate; animation-name: progress-indeterminate; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards } } progress:indeterminate::-webkit-progress-bar { background-color: transparent } progress:indeterminate::-moz-progress-bar { background-color: transparent } progress[data-theme=danger] { --progress-bar: #ff7965; --progress-indeterminate-color-1: rgba(212, 31, 31, 0.5); --progress-indeterminate-color-2: rgba(254, 235, 232, 0.5) } @-webkit-keyframes progress-indeterminate-fallback { 0% { background-position: 40% 0 } 100% { background-position: -100% 0 } } @keyframes progress-indeterminate-fallback { 0% { background-position: 40% 0 } 100% { background-position: -100% 0 } } @-webkit-keyframes progress-indeterminate { 0% { --progress-indeterminate-pos: -40% } 100% { --progress-indeterminate-pos: 100% } } @keyframes progress-indeterminate { 0% { --progress-indeterminate-pos: -40% } 100% { --progress-indeterminate-pos: 100% } } a:focus, a: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)) } a:active { color: var(--link-active-color, var(--link-color)) } a:disabled, a[aria-disabled=true] { color: var(--link-disabled-color, var(--link-color)); cursor: not-allowed } .link-primary, 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) } .link-secondary { --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 } .link_inherit-color, button:not(.st-button_style_none).btn-link.link_inherit-color { --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-current-color, button:not(.st-button_style_none).btn-link.link_line-current-color { --link-line-color: currentColor; --link-hover-line-color: currentColor; --link-active-line-color: currentColor } .link_no-static-line, button:not(.st-button_style_none).btn-link.link_no-static-line { --link-line-color: transparent } .link_no-line, button:not(.st-button_style_none).btn-link.link_no-line { --link-line: none } .link_no-line-offset, button:not(.st-button_style_none).btn-link.link_no-line-offset { --link-line-offset: auto } .anchor, :target, [id], a[name] { scroll-snap-margin-top: calc(var(--header-height) + 2ex); scroll-margin-top: calc(var(--header-height) + 2ex) } .st-course-widget { display: flex; align-items: stretch; border-radius: 5px; padding: 12px; position: relative; flex-direction: row; border: 1px solid #ddd; cursor: pointer } @media (max-width:768px) { .st-course-widget { width: 120px; height: 120px; display: flex; margin-top: 5px; overflow: visible } .st-course-widget .st-course-widget__cover { overflow: hidden; margin-right: 0; max-width: 100%; min-width: 100%; transition: transform .3s; transform: translateZ(0) } .st-course-widget .st-course-widget__info { bottom: 0; padding: 12px; margin: 0; width: 100%; left: 0 } } .st-course-widget__image, .st-table { width: 100% } .st-course-widget__cover { max-width: 120px; min-width: 120px; margin-right: 15px } .st-course-widget__info { margin-right: 20px; display: flex; flex-direction: column; text-align: left } .st-course-widget__title { display: flex; align-items: center; font-size: 18px; line-height: 1.33 } .st-course-widget__title-step { width: 30px; height: 30px; display: inline; text-align: center; line-height: 30px; background: #6c6; color: #fff; border-radius: 5px; margin: 0 10px } .st-course-widget__title-license-icon { width: 15px; margin: -2px 5px 0 0; display: inline-block; position: relative; top: 2px; color: #939393; cursor: help } .st-course-widget__title-license-icon svg { width: 16px; height: 16px; color: #5e5e5e } .st-course-widget__stats { display: flex; align-items: center; padding: 5px 0 } .st-course-widget__badge, .st-course-widget__stats-aspect { font-size: 12px; color: #666; padding: 4px 0; white-space: nowrap; margin-right: 12px; display: flex; align-items: center } .st-course-widget__badge { background: #bbb; color: #fff; padding: 4px 6px; border-radius: 20px } .st-course-widget__badge .st-link { color: #fff } .st-course-widget__stats-icon { margin: 0 5px 0 0; color: #5e5e5e } .st-course-widget__stats-icon, .st-course-widget__stats-icon svg { width: 16px; height: 16px } .st-course-widget__join-button:not(:empty) .button, .st-course-widget__join-button:not(:empty) button { margin-right: 10px; font-size: 14px; padding: 12px 15px; border-radius: 3px } .st-course-widget__button { background: #6c6; color: #fff; padding: 8px 12px; border-radius: 5px; font-size: 14px; border: 1px solid #6c6 } .st-course-widget__menu { background: #fff; border: 1px solid #ddd; padding: 6px 0; border-radius: 0; font-size: 14px; position: absolute; top: 100%; right: 0; margin-right: -1px; text-align: right } .st-course-widget__menu-link { padding: 6px 12px; color: #999 } .st-course-widget__menu-link:hover { color: #000 } table { border-collapse: collapse; border-spacing: 0; background: #fff; margin-bottom: 1.25em; border: 1px solid #ddd } table tfoot, table thead { background: #f5f5f5; font-weight: 700 } table tfoot tr td, table tfoot tr th, table thead tr td, table thead tr th { padding: .5em .625em .625em; font-size: .875em; color: #222; text-align: left } table tr td, table tr th { padding: .5625em .625em; font-size: .875em; color: #222 } table tr.alt, table tr.even, table tr:nth-of-type(even) { background: #f9f9f9 } table tbody tr td, table tfoot tr td, table tfoot tr th, table thead tr th, table tr td { display: table-cell; line-height: 1.125em } .st-table { border: none } .st-table .st-table__header { background: 0 0 } .st-table .st-table__header .st-table__cell { color: #a5a5a5; font-size: 1em; vertical-align: middle; font-weight: 400; padding: 1.125em .5em } .st-table .st-table__row { background: 0 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-collapse: collapse } .st-input, .st-input-wrapper, .st-select { outline: 0; border: 1px solid; transition: border-color .3s } .st-table .st-table__cell { vertical-align: middle; padding: 1em .5em } .st-table .st-table__cell:first-child { padding-left: 0 } .st-table .st-table__cell:last-child { padding-right: 0 } .st-table .st-table__cell.st-table__cell_text_center { text-align: center } .st-input, .st-input-wrapper { padding: .24em .5em; margin: .3em 0; line-height: 2em; height: auto; display: inline-block !important; border-color: var(--validation-border-color, #ccc); border-radius: .25em; width: auto; background-color: #fff; box-sizing: border-box } .st-input.st-h2, .st-input.st-h3 { border-color: transparent; margin: 0 } .st-input-wrapper.st-input_width_max, .st-input-wrapper>span, .st-input.st-input-expand, .st-input.st-input_width_max { width: 100% } .st-input-wrapper::-ms-clear, .st-input::-ms-clear { display: none } .st-input-wrapper.st-input-wrapper_type-search, .st-input.st-input_type_search { padding-left: 2em; padding-right: .5em; background-image: url(/static/frontend/topbar_search.svg) !important; background-repeat: no-repeat !important; background-position: .4em center !important; background-size: 1.15em 1.15em !important } .st-input.st-h2:hover, .st-input.st-h3:hover { background: #fafafa } .st-input { font-size: .875em } .st-input.st-h2 { font-size: 22px; padding: 0 5px } .st-input.st-h3 { font-size: 18px; padding: 0 3px } .st-input.st-size-normal { font-size: 16px; margin: 0; padding-top: 10px; padding-bottom: 11px; line-height: 18px } .st-input .st-input:hover, .st-input:focus { border-color: var(--validation-border-color, #999) } .st-input.st-input_border_none { border: none } .st-input.st-input_bg_grey { background-color: #eee } .st-input.st-input_style_alert { border-color: #90d !important; background: #e7c4f5 !important } .st-input.st-size-small { font-size: 12px } .st-input.st-size-large { font-size: 18px } .st-input.st-input_margin_none { margin: 0 } .st-input-wrapper { position: relative } .st-input-wrapper>span { height: inherit } .st-input-wrapper.st-input-wrapper_border-none { border: none } .st-input-wrapper.st-input-wrapper_type-search { position: relative } .st-input-wrapper.st-input-wrapper_exist-clear { padding-right: 2em } .st-input-wrapper .st-input-wrapper__reset.st-button_style_none { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 6px; color: #b7b7b7; font-size: 12px } .st-input-wrapper .st-input-wrapper__reset.st-button_style_none:focus, .st-input-wrapper .st-input-wrapper__reset.st-button_style_none:hover { color: #999 } .st-input-wrapper .st-input-wrapper__reset.st-button_style_none .svg-icon { display: flex } .st-input-wrapper .st-input-wrapper__reset.st-button_style_none svg { width: 1em; height: 1em } .st-input-wrapper .st-input-wrapper__clear-btn { background-image: url(/static/frontend/search-clear.svg); background-repeat: no-repeat; background-position: center center; display: inline-block; position: absolute; cursor: pointer; width: 26px; height: 26px; right: 4px; top: 4px; margin: auto; padding: 2px; outline: 0 } .st-filter.st-filter_type_inline .st-filter__item, .st-select { width: auto } .st-input-wrapper .st-input { background: 0 0 !important; border: none; font-size: 1em; padding: 0; margin: 0; height: inherit } .st-input-wrapper.disabled, .st-input-wrapper[disabled] { background-color: #eee; color: #a5a5a5 } .st-input-wrapper:focus-within { border-color: var(--validation-border-color, #999) } label.required-input .required-input__pin { color: #d41f1f; margin-left: 2px } .st-select { font-size: 1em; padding: .24em 1.75em .24em .5em; font-weight: 700; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-color: var(--validation-border-color, #ccc); border-radius: .25em; margin: .3em 0; line-height: 2em; height: 2.48em; cursor: pointer; background: url(/static/frontend/common_icons/down-arrow.svg) 97% no-repeat #fff; background-size: 1em } .st-select:disabled { cursor: not-allowed } .st-select:not(:disabled):focus, .st-select:not(:disabled):hover { border-color: #000 } .st-select::-ms-expand { display: none } .st-select.st-size-small { font-size: 12px } .st-select.st-size-large { font-size: 18px } .st-select_font_normal { font-weight: 400 } .st-select_font_normal .s-select__select { font-weight: 400 !important } .st-select_border_none { border: none } .st-select_margin_none { margin: 0 } .s-checkbox .s-checkbox__border+.s-checkbox__label, .s-radio .s-radio__border+.s-radio__label { margin-left: .5em } .st-select_width_expand { width: 100% } .s-checkbox { font-size: 1em; display: flex } .s-checkbox.s-checkbox_inline { display: inline-flex } .s-checkbox.s-checkbox_vertical-align { align-items: center } .s-checkbox.s-checkbox_vertical-align .s-checkbox__border { top: inherit } .s-checkbox.s-checkbox_label_small .s-checkbox__label { font-size: .875em } .s-checkbox.s-checkbox_label_small .s-checkbox__border { top: .15em } .s-checkbox .s-checkbox__border { position: relative; width: 1.0625em; height: 1.0625em; border: 1px solid #ccc; border-radius: .1875em; vertical-align: middle; text-align: center; background: #fff; transition: border-color .3s; top: .2em } .s-checkbox .s-checkbox__circle { left: 40%; top: 0; position: absolute; width: 0; width: 3.1875em; height: 5.3125em; border-top: 1px solid #6c6; border-left: 1px solid #6c6; border-right: 1px solid transparent; border-bottom: 1px solid transparent; transform: scale(.14) translateY(100%) rotateZ(-135deg); transition: all .15s; transform-origin: 0 0; opacity: 0 } .s-checkbox:focus, .s-checkbox:hover { cursor: pointer } .s-checkbox:focus .s-checkbox__border, .s-checkbox:hover .s-checkbox__border { border-color: #000 } .s-checkbox .s-checkbox__input:checked+.s-checkbox__border .s-checkbox__circle { border-top: 1.0625em solid #6c6; border-left: 1.0625em solid #6c6; opacity: 1 } .s-checkbox .s-checkbox__input { position: absolute; opacity: 0 !important } .s-checkbox .s-checkbox__input:disabled+.s-checkbox__border { background: #eee !important; border-color: #ccc !important } .s-checkbox .s-checkbox__input:focus+.s-checkbox__border { border-color: #000 } .s-checkbox .s-checkbox__label { flex: 1 0 0 } .s-radio { font-size: 1em; display: flex; align-items: flex-start } .s-radio.s-radio_inline { display: inline-flex } .s-radio.s-radio_vertical-align { align-items: center } .s-radio.s-radio_vertical-align .s-radio__border { top: inherit } .s-radio.s-radio_label_small .s-radio__label { font-size: .875em } .s-radio.s-radio_label_small .s-radio__border { top: .15em } .s-radio .s-radio__border { position: relative; display: inline-block; width: 1em; height: 1em; border: 1px solid #ccc; border-radius: .5em; vertical-align: middle; text-align: center; background: #fff; transition: border-color .3s; top: .25em } .s-radio .s-radio__circle { width: 100%; height: 100%; border-radius: 50%; background: #6c6; position: absolute; transform: scale(.1); left: 0; top: 0; opacity: 0; transition: all .15s ease-in } .s-radio:focus, .s-radio:hover { cursor: pointer } .s-radio:focus .s-radio__border, .s-radio:hover .s-radio__border { border-color: #000 } .s-radio:focus[aria-disabled=true], .s-radio:hover[aria-disabled=true] { cursor: default } .s-radio .s-radio__input:checked+.s-radio__border .s-radio__circle { opacity: 1; transform: scale(.5) } .s-radio .s-radio__input { position: absolute; opacity: 0 !important } .s-radio .s-radio__input:disabled+.s-radio__border { background: #eee !important; border-color: #ccc !important } .s-radio .s-radio__input:focus+.s-radio__border { border-color: #000 } .s-radio .s-radio__label { flex: 1 0 0 } .s-radio .s-radio__label-description { display: block; font-size: 13px; color: #9e9e9e } .checkbox-list { margin-bottom: 30px; list-style: none } .checkbox-list__title { margin-bottom: 15px } .checkbox-list__item { margin-bottom: 10px; font-size: 14px } .checkbox-list__checkbox { margin-right: 10px } @media only screen and (max-width:1024px) { .checkbox-list_boxed-mobile { padding: 20px; border: 1px solid #ddd; margin-bottom: 20px } } .green-dot { color: #6c6 !important } .st-link { text-decoration: none; transition-property: color, border-color; transition-duration: .3s } .st-link .active { outline: 0 !important } .st-link:hover { text-decoration: underline } .st-link.st-link_no_underline { text-decoration: none } .st-link.st-link_style_button { border: 1px solid #eee; border-radius: 5px; padding: 4px 15px; color: #000 } .st-h6, .st-link_style_dimmed { color: #777 } .st-link.st-link_style_button:focus, .st-link.st-link_style_button:hover { text-decoration: none; border-color: #000 } .lesson-widget__author:hover, .lesson-widget__comment-text:hover, .st-link_style_dimmed { text-decoration: underline } .st-breadcrumbs { color: #999; font-size: 12px; display: flex; white-space: nowrap } .st-link.st-breadcrumbs__item { color: #999; overflow: hidden; text-overflow: ellipsis } .st-breadcrumbs__item:hover, .st-link.st-breadcrumbs__item:hover { color: #5e5e5e; text-decoration: none } .st-breadcrumbs__item:not(:first-child):before { padding: 0 5px; color: #ccc; content: "·"; text-decoration: none !important; display: inline-block } .form-checkbox>span::after, .form-checkbox>span::before, .form-radio>span::after, .form-radio>span::before, .marco-layout__mobile-bottom-panel::before, .s-select .s-select__arrow, [data-tooltip]::before { content: "" } .st-tabs { display: flex; position: relative; background: #FFF; border-bottom: solid 1px #ddd; list-style: none } @media only screen and (max-width:768px) { .st-tabs { flex-direction: column; border-bottom: none } } .st-tabs.st-tabs_orientation_vert { flex-direction: column; border-bottom: none } .st-tabs__link, .st-tabs__link.active { border-top: solid 3px transparent; text-decoration: none; outline: 0 !important; padding: 15px 20px; background: #FFF; display: flex; color: #666 } .st-tabs__link.active:hover, .st-tabs__link:hover { color: #000; text-decoration: none } .st-tabs__link.active { border-top: solid 3px #6C6; border-right: solid 1px #ddd; border-bottom: solid 1px #FFF; border-left: solid 1px #ddd; margin-bottom: -1px; margin-right: 10px; font-weight: 700; color: #000 } @media only screen and (max-width:768px) { .st-tabs__link, .st-tabs__link.active { margin-bottom: -1px } .st-tabs__link { border: 1px solid #ddd } .st-tabs__link.active { border-top: solid 3px #6C6; margin-right: 0; z-index: 5 } } .st-tabs.st-tabs_orientation_vert .st-tabs__link, .st-tabs.st-tabs_orientation_vert .st-tabs__link.active { margin-bottom: -1px } .st-tabs.st-tabs_orientation_vert .st-tabs__link { border: 1px solid #ddd } .st-tabs.st-tabs_orientation_vert .st-tabs__link.active { border-top: solid 3px #6C6; margin-right: 0; z-index: 5 } .st-tabs__counter { vertical-align: super; font-size: .8em; color: #a5a5a5; margin-left: .3em } .st-tabs.st-tabs_style_transparent, .st-tabs.st-tabs_style_transparent .st-tabs__link:not(.active) { border: none; background: 0 0 } .st-tabs.st-tabs_style_transparent .st-tabs__link.active { border-left: none; border-right: none } .st-filter { display: flex; flex-direction: column } .st-filter+.st-filter { margin-top: 30px } .st-filter.st-filter_type_inline { flex-direction: row } .st-filter__item { display: flex; flex-direction: row; align-items: stretch; width: 100% } .st-filter__link { padding: 7px; margin-bottom: 4px; line-height: 14px; font-size: 13px; width: 100%; cursor: pointer; --link-line: none; --link-color: #1466c6; --link-hover-color: #1466c6 } .st-filter__link:hover { text-decoration: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px } .st-filter__link.active, .st-filter__link.active:hover, .st-filter__link:hover, .st-filter_state_active .st-filter__link, .st-filter_state_active .st-filter__link:hover { background: rgba(31, 96, 211, .1); border-bottom-left-radius: 5px; border-top-left-radius: 5px; color: #1466c6; flex-shrink: 1; align-self: stretch } .st-filter__close { padding: 7px; margin-bottom: 4px; width: 28px; height: 28px; background: rgba(31, 96, 211, .1); line-height: 13px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; color: #00a8ff; cursor: pointer } .st-filter__close svg { width: 14px; height: 16px } .st-filter__item:hover .st-filter__close:hover { background-color: rgba(31, 96, 211, .1); text-decoration: none; color: #1466c6 } .s-tag, .s-tag .s-tag__name { position: relative; color: #a5a5a5 } .s-select { position: relative; display: inline-block } .s-select .s-select__arrow { background: url(/static/frontend/common_icons/down-arrow.svg); background-size: 1em; width: 1em; height: .625em; top: 50%; transform: translateY(-50%); right: .5em; position: absolute; opacity: .2; transition: opacity .3s; pointer-events: none } .s-select .s-select__select { font-size: 1em; padding: .24em 1.75em .24em .5em; font-weight: 700; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid #ccc; border-radius: .1875em; width: auto; cursor: pointer; transition: border-color .3s; margin: .3em 0; line-height: 2em; height: 2.48em; background: #fff; vertical-align: middle } .form-checkbox, .st-h1, .st-h2, .st-h3, .st-h6 { font-weight: 400 } .s-select .s-select__select:not(:disabled):focus, .s-select .s-select__select:not(:disabled):hover { border-color: #000 } .s-select .s-select__select:not(:disabled):focus+.s-select__arrow, .s-select .s-select__select:not(:disabled):hover+.s-select__arrow { opacity: 1 } .s-select .s-select__select::-ms-expand { display: none } .s-tag { display: inline-block; overflow: hidden; border-radius: .25em; font-size: .875em } .s-tag .s-tag__name { float: left; cursor: pointer; padding: .3125em 1.25em; background: #eee } .s-tag .s-tag__name .s-tag__close { position: absolute; top: 50%; transform: translateY(-50%); right: .75em; width: .75em } .s-tag .s-tag__name .s-tag__close svg { display: block; width: 100% } .s-tag.s-tag_color_white { color: #333; border: 1px solid #ccc } .s-tag.s-tag_color_white .s-tag__name { color: #333; background: #fff } .s-tag .s-tag__count { background: #eee; float: left; border-left: 1px solid #fff; padding: .375em .625em .25em; cursor: pointer; color: #a5a5a5 } .s-tag:hover .s-tag__count, .s-tag:hover .s-tag__name { box-shadow: inset 0 0 0 1px #a5a5a5 } .s-tag.s-tag_with-desk { width: 20em } .s-tag.s-tag_with-desk .s-tag__name { float: none } .s-tag.s-tag_with-desk .s-tag__desk { padding: .625em 1.25em; border: 1px solid #eee; border-top: none } .s-tag.s-tag_with-close .s-tag__name { padding-right: 2.25em } html { height: 100% } body, html { display: flex; flex-direction: column } body { flex: 1; font-size: 16px; line-height: 1.6; background-color: #fff; --no-initial-animate-duration: 0s; --header-height: var(--computed-header-height, 50px) } .main-content { flex: 1 0 auto; display: flex; flex-direction: column } .main-content>.marco-layout { flex: 1; min-height: calc(100vh + var(--marco-layout-bottom-padding) - var(--computed-header-height)) } .main-content>.anypage, .main-content>.marco-layout, .main-content>.page-fragment { width: 100% } .stepic-application { flex: 1; display: flex; flex-direction: column; padding-top: 40px } body[data-force-embedded] .main-content .attempt__footer, body[data-force-embedded] .main-content .attempt__wrapper_next-link, body[data-force-embedded] .main-content .lesson__step-pins, body[data-force-embedded] .main-content .step-view_material, body[data-force-embedded] .main-header .attempt__footer, body[data-force-embedded] .main-header .attempt__wrapper_next-link, body[data-force-embedded] .main-header .lesson__step-pins, body[data-force-embedded] .main-header .step-view_material, body[data-quiz-only] .main-content .attempt__footer, body[data-quiz-only] .main-content .attempt__wrapper_next-link, body[data-quiz-only] .main-content .lesson__step-pins, body[data-quiz-only] .main-content .step-view_material, body[data-quiz-only] .main-header .attempt__footer, body[data-quiz-only] .main-header .attempt__wrapper_next-link, body[data-quiz-only] .main-header .lesson__step-pins, body[data-quiz-only] .main-header .step-view_material, body[data-quiz-only] .quiz-layout-head { display: none !important } .stepic-breadcrumbs { max-width: 1022px; margin: 12px auto 0 } body[data-force-embedded] .main-content .lesson-wrapper, body[data-force-embedded] .main-content .player-content-wrapper, body[data-force-embedded] .main-header .lesson-wrapper, body[data-force-embedded] .main-header .player-content-wrapper, body[data-quiz-only] .main-content .lesson-wrapper, body[data-quiz-only] .main-content .player-content-wrapper, body[data-quiz-only] .main-header .lesson-wrapper, body[data-quiz-only] .main-header .player-content-wrapper { border: 0 !important } body[data-force-embedded] .main-content .attempt-main, body[data-force-embedded] .main-header .attempt-main, body[data-quiz-only] .main-content .attempt-main, body[data-quiz-only] .main-header .attempt-main { margin-top: 10px !important } body[data-force-embedded] .main-content .attempt__inner, body[data-force-embedded] .main-header .attempt__inner, body[data-quiz-only] .main-content .attempt__inner, body[data-quiz-only] .main-header .attempt__inner { padding: 6px !important } body[data-force-embedded] .main-content .lesson-modern__main.zen-mode .lesson-modern .lesson__player, body[data-force-embedded] .main-content .lesson-wrapper.zen-mode.scrolled .lesson__player, body[data-force-embedded] .main-content .lesson__player, body[data-force-embedded] .main-header .lesson-modern__main.zen-mode .lesson-modern .lesson__player, body[data-force-embedded] .main-header .lesson-wrapper.zen-mode.scrolled .lesson__player, body[data-force-embedded] .main-header .lesson__player, body[data-quiz-only] .main-content .lesson-modern__main.zen-mode .lesson-modern .lesson__player, body[data-quiz-only] .main-content .lesson-wrapper.zen-mode.scrolled .lesson__player, body[data-quiz-only] .main-content .lesson__player, body[data-quiz-only] .main-header .lesson-modern__main.zen-mode .lesson-modern .lesson__player, body[data-quiz-only] .main-header .lesson-wrapper.zen-mode.scrolled .lesson__player, body[data-quiz-only] .main-header .lesson__player { padding-top: 0 !important } .remark, .splash { padding: 1em; text-align: center } body[data-force-embedded] .main-content .player-content-wrapper, body[data-force-embedded] .main-header .player-content-wrapper, body[data-quiz-only] .main-content .player-content-wrapper, body[data-quiz-only] .main-header .player-content-wrapper { margin-top: 0 } .remark { color: #a5a5a5; display: block } .splash { position: relative; min-height: 4.375em; width: 100%; max-width: 60em; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+CjxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0iIzgwODA4MCI+PC9yZWN0Pgo8ZyBmaWxsPSIjYmZiZmJmIj4KICA8cGF0aCBkPSJNMCAwSDI0IEw0OCAyNCBMNDggNDggWiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0wIDI0IFY0OCBIMjQgWiI+PC9wYXRoPgo8L2c+Cjwvc3ZnPg==); margin: 0 auto } .sk-link { display: inline-block; padding: 10px; margin: -10px } .sk-link img { max-width: initial } @-webkit-keyframes hinge { 0% { transform: rotate(0); transform-origin: top left } 20% { transform: rotate(110deg); transform-origin: top left } 60% { transform: translate3d(400px, 1800px, 0) rotate(-10deg); transform-origin: 50% 50% 0; opacity: 1; transition-timing-function: linear } 90% { transform: translate3d(400px, 1800px, 0) rotate(10deg); transform-origin: 50% 50% 0; transition-timing-function: linear; opacity: 0 } 91% { transform: rotate(0); opacity: 0 } 100% { transform: rotate(0); opacity: 1 } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left } 20% { transform: rotate(110deg); transform-origin: top left } 60% { transform: translate3d(400px, 1800px, 0) rotate(-10deg); transform-origin: 50% 50% 0; opacity: 1; transition-timing-function: linear } 90% { transform: translate3d(400px, 1800px, 0) rotate(10deg); transform-origin: 50% 50% 0; transition-timing-function: linear; opacity: 0 } 91% { transform: rotate(0); opacity: 0 } 100% { transform: rotate(0); opacity: 1 } } .sortable-item:not(.is-dragging) { transition: transform .15s } .sortable-item.is-dragging { z-index: 2 } @-webkit-keyframes notif_bubble { 50% { background-size: 35px } 100% { background-size: 24px } } @keyframes notif_bubble { 50% { background-size: 35px } 100% { background-size: 24px } } @-webkit-keyframes appear { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes appear { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes block-ui-appear { 0% { opacity: 0 } 100% { background: rgba(0, 0, 0, .8); opacity: 1 } } @keyframes block-ui-appear { 0% { opacity: 0 } 100% { background: rgba(0, 0, 0, .8); opacity: 1 } } .page-wrapper { padding: 0 20px } .page-fragment { margin: 0 auto; max-width: 1022px } .page-fragment.page-content { padding-top: 2rem } .page-fragment .flex-row { margin: 0 } .breadcrumbs-row { margin: 0 auto; max-width: 1022px; width: 100% } .flex-row.flex-row_paddings_none>.col-xs-1, .flex-row.flex-row_paddings_none>.col-xs-10, .flex-row.flex-row_paddings_none>.col-xs-11, .flex-row.flex-row_paddings_none>.col-xs-12, .flex-row.flex-row_paddings_none>.col-xs-2, .flex-row.flex-row_paddings_none>.col-xs-3, .flex-row.flex-row_paddings_none>.col-xs-4, .flex-row.flex-row_paddings_none>.col-xs-5, .flex-row.flex-row_paddings_none>.col-xs-6, .flex-row.flex-row_paddings_none>.col-xs-7, .flex-row.flex-row_paddings_none>.col-xs-8, .flex-row.flex-row_paddings_none>.col-xs-9 { padding-left: 0; padding-right: 0 } .flex-row.flex-row_paddings_none>.col-xs-10_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-11_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-12_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-1_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-2_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-3_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-4_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-5_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-6_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-7_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-8_left-paddings-none, .flex-row.flex-row_paddings_none>.col-xs-9_left-paddings-none { padding-left: 0 } @media print { .page-fragment { max-width: 100% } } @media only screen and (min-width:1170px) { .flex-row>.col-md-10_left-padding-none, .flex-row>.col-md-11_left-padding-none, .flex-row>.col-md-12_left-padding-none, .flex-row>.col-md-1_left-padding-none, .flex-row>.col-md-2_left-padding-none, .flex-row>.col-md-3_left-padding-none, .flex-row>.col-md-4_left-padding-none, .flex-row>.col-md-5_left-padding-none, .flex-row>.col-md-6_left-padding-none, .flex-row>.col-md-7_left-padding-none, .flex-row>.col-md-8_left-padding-none, .flex-row>.col-md-9_left-padding-none { padding-left: 0 } .flex-row>.col-md-10_right-padding-none, .flex-row>.col-md-11_right-padding-none, .flex-row>.col-md-12_right-padding-none, .flex-row>.col-md-1_right-padding-none, .flex-row>.col-md-2_right-padding-none, .flex-row>.col-md-3_right-padding-none, .flex-row>.col-md-4_right-padding-none, .flex-row>.col-md-5_right-padding-none, .flex-row>.col-md-6_right-padding-none, .flex-row>.col-md-7_right-padding-none, .flex-row>.col-md-8_right-padding-none, .flex-row>.col-md-9_right-padding-none { padding-right: 0 } } @media (max-width:1024px) { .breadcrumbs-row>nav { padding: 0 10px } } .marco-layout { --marco-layout-nav-space: 0px; --marco-layout-nav-width: 304px; --marco-layout-nav-gap: minmax(16px, 90px); --marco-layout-content-width: 640px; --marco-layout-aside-gap: 16px; --marco-layout-aside-width: 280px; --marco-layout-aside-space: minmax(24px, 70px); --marco-layout-max-width: 1400px; --marco-layout-bottom-padding: 80px; --marco-layout-outer-color: #fcfcfc; display: grid; grid-template-rows: auto auto 1fr; grid-template-areas: "nav-space nav nav-gap header1 header1 header1 aside-space" "nav-space nav nav-gap header2 header2 header2 aside-space" "nav-space nav nav-gap content aside-gap aside aside-space"; grid-template-columns: var(--marco-layout-nav-space) var(--marco-layout-nav-width) var(--marco-layout-nav-gap) var(--marco-layout-content-width) var(--marco-layout-aside-gap) var(--marco-layout-aside-width) var(--marco-layout-aside-space); margin: 0 auto; max-width: var(--marco-layout-max-width); box-shadow: -999px 0 0 var(--marco-layout-outer-color), 999px 0 0 var(--marco-layout-outer-color); --marco-layout-nav-bg: var(--theme-color-bg-level-00); --marco-layout-nav-border: 1px solid var(--theme-color-bg-level-02); --marco-layout-nav-border-width: 0 1px 0 0 } .marco-layout[data-marco-no-aside]>.marco-layout__content~.marco-layout__aside, .marco-layout__content[data-marco-no-aside]~.marco-layout__aside { display: none !important } .marco-layout[data-marco-no-aside]>.marco-layout__content { grid-column-end: aside-end } @media (min-width:769px) { .marco-layout[data-marco-full-height-sidebar] .marco-layout__header, .marco-layout[data-marco-full-height-sidebar].marco-layout__header { grid-column-end: content } .marco-layout[data-marco-full-height-sidebar] .marco-layout__header~.marco-layout__aside, .marco-layout[data-marco-full-height-sidebar].marco-layout__header~.marco-layout__aside { grid-row-start: header1 } } @media (max-width:1279px) { .marco-layout { --marco-layout-content-width: 1fr; --marco-layout-nav-gap: 16px; --marco-layout-aside-space: 24px } } @media (max-width:1256px) { .marco-layout { --marco-layout-nav-gap: 56px } .marco-layout>.marco-layout__content { grid-column-end: aside-end } .marco-layout>.marco-layout__content~.marco-layout__aside { display: none !important } } @media (max-width:1023px) { .marco-layout { --marco-layout-nav-gap: 16px } } .marco-layout__nav { grid-area: nav; display: flex; flex-direction: column; background-color: var(--marco-layout-nav-bg); border: var(--marco-layout-nav-border); border-width: var(--marco-layout-nav-border-width) } .marco-layout__nav[data-marco-sticky-nav-content]>:first-child { flex: 1 } @media (max-width:768px) { .marco-layout { --marco-layout-nav-gap: 0px; --marco-layout-nav-width: 0px; --marco-layout-nav-space: 12px; --marco-layout-aside-space: 12px; box-shadow: none } .marco-layout__nav { --marco-layout-bottom-padding: 0; position: fixed; top: var(--header-height); left: 0; bottom: 0; width: 304px; margin: 0; z-index: var(--z-marco-layout-nav); transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s } .marco-layout__nav[data-mobile-expanded] { transform: translateX(0); visibility: visible } } .marco-layout__header { grid-area: header1; min-width: 0 } .marco-layout__header~.marco-layout__header { grid-area: header2 } @media (min-width:769px) { .marco-layout__nav[data-marco-sticky-nav-content]>:first-child { position: -webkit-sticky; position: sticky; top: var(--computed-header-height); max-height: calc(100vh - var(--computed-header-height)) } .marco-layout__header[data-marco-full-height-sidebar] .marco-layout__header, .marco-layout__header[data-marco-full-height-sidebar].marco-layout__header { grid-column-end: content } .marco-layout__header[data-marco-full-height-sidebar] .marco-layout__header~.marco-layout__aside, .marco-layout__header[data-marco-full-height-sidebar].marco-layout__header~.marco-layout__aside { grid-row-start: header1 } } .marco-layout__content { grid-area: content; min-width: 0 } .marco-layout__content[data-marco-no-aside] { grid-column-end: aside-end } .marco-layout__aside { grid-area: aside } .marco-layout__aside, .marco-layout__content, .marco-layout__nav { padding-bottom: var(--marco-layout-bottom-padding) } .marco-layout__mobile-bottom-panel { position: -webkit-sticky; position: sticky; bottom: 0; grid-column-start: nav-space; grid-column-end: aside-space; grid-row: none; z-index: var(--z-marco-layout-float-panel); display: flex; flex-wrap: wrap; padding: 9px } .marco-layout__mobile-bottom-panel .button:not(.st-button_style_none), .marco-layout__mobile-bottom-panel button:not(.st-button_style_none) { padding: 9px 15px; white-space: nowrap } .marco-layout__mobile-bottom-panel .course-join-button .button, .marco-layout__mobile-bottom-panel .course-join-button button { display: block; width: 100% } .marco-layout__mobile-bottom-panel>* { flex: 1; margin: 5px 7px !important } .marco-layout__mobile-bottom-panel::before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #fff; box-shadow: 0 1px 6px 1px #eaecf0; -webkit-clip-path: inset(-10px 0 0 0); clip-path: inset(-10px 0 0 0) } html[data-whatintent=keyboard] .form-checkbox>input[type=checkbox]:focus+span::before, html[data-whatintent=keyboard] .form-radio>input[type=checkbox]:focus+span::before, html[data-whatintent=keyboard] .form-radio>input[type=radio]:focus+span::before, html[data-whatintent=keyboard] .navbar__search-wrapper:focus-within, html[data-whatintent=touch] .form-checkbox>input[type=checkbox]:focus+span::before, html[data-whatintent=touch] .form-radio>input[type=checkbox]:focus+span::before, html[data-whatintent=touch] .form-radio>input[type=radio]:focus+span::before, html[data-whatintent=touch] .navbar__search-wrapper:focus-within { box-shadow: var(--focus-outline-box-shadow-params) var(--focus-outline-color) } @media (min-width:769px) { .marco-layout__mobile-bottom-panel { display: none } } label.st-size-large, label.st-size-normal, span.st-size-normal { margin: 0; padding-top: 11px; padding-bottom: 11px; line-height: 18px; display: inline-block } label.st-size-normal, span.st-size-normal { font-size: 16px } label.st-size-large { font-size: 18px } .st-h1 { margin-top: 20px; margin-bottom: 3px; font-size: 32px } .st-h1.st-h1_color_white, .st-h2.st-h2_color_white, .st-h3.st-h3_color_white, .st-h4.st-h4_color_white, .st-h5.st-h5_color_white, .st-h6.st-h6_color_white { color: #fff } .st-h2 { margin-top: 10px; font-size: 22px } .st-h3 { font-size: 18px } .st-h6 { font-size: 14px; margin-top: 0 } @media only screen and (max-width:768px) { .st-h1:not(.st-h1_adaptive_none) { margin-top: 3px; margin-bottom: 3px; font-size: 20px } } .sr-only:not(:focus):not(:active) { clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(100%); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px } .icon { height: var(--icon-height-p) } .icon:not([width]):not([height]) { --icon-height-p: 1em } .icon[data-baseline] { position: relative; top: .125em } .icon[data-intext-height] { height: .75em } .svg-icon { position: relative } .svg-icon svg { transform: scale(1) } .svg-icon_inline svg { width: 1em; height: 1em } .svg-icon_inline-baseline svg { position: relative; bottom: -.125em } .arrow3-down_icon>svg, .arrow3-up_icon>svg { width: .588em } .form-checkbox { display: inline-block; margin: 0; padding: 8px 8px 6px 0; font-size: 14px; letter-spacing: .25px; line-height: 22px; color: #222; cursor: pointer } .form-checkbox>input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none } .form-checkbox>input[type=checkbox]:hover+span { --form-checkbox-border-color: #222 } .form-checkbox>input[type=checkbox]:checked:hover+span { --form-checkbox-border-color: #3e50cb } .form-checkbox>input[type=checkbox]:disabled+span { --form-checkbox-border-color: #d8d8d8 !important; --form-checkbox-background-color: #d8d8d8; color: #999; cursor: not-allowed } .form-checkbox>span ins, .form-checkbox__caption sub { line-height: 14px; letter-spacing: .4px; color: var(--theme-color-fg-secondary); font-weight: 400; font-size: 12px } .form-checkbox>span { position: relative; display: inline-block; padding: 0 0 0 30px; vertical-align: top } .form-checkbox>span:empty { padding-left: 18px } .form-checkbox>span::before { position: absolute; top: 1px; left: 0; height: 18px; width: 18px; border-radius: 2px; transition: background-color .1s ease-out, border .1s ease-out } .form-checkbox>span::after { position: absolute; top: 2px; left: 0; width: 7px; height: 13px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform-origin: 100% 100%; transition: transform .1s ease-out } .form-checkbox>span ins { display: inline-block; text-decoration: none; margin-bottom: -6px } .form-checkbox>input[type=checkbox]:not(:checked)+span::before { border: 2px solid var(--form-checkbox-border-color, #999) } .form-checkbox>input[type=checkbox]:not(:checked)+span::after { transform: rotateZ(45deg) scale(0) } .form-checkbox>input[type=checkbox]:checked+span::before { border: 2px solid var(--form-checkbox-border-color, #1466c6); background-color: var(--form-checkbox-background-color, #1466c6) } .form-checkbox>input[type=checkbox]:checked+span::after { transform: rotateZ(45deg) } .form-checkbox__caption { display: inline-flex !important; flex-direction: column; flex-wrap: nowrap } .form-checkbox__caption b { font-weight: 400 } .form-checkbox__caption sub { bottom: auto } .form-radio { display: inline-block; margin: 0; padding: 8px 8px 6px 0; font-size: 14px; font-weight: 400; letter-spacing: .25px; line-height: 22px; color: #222; cursor: pointer } .form-radio>input[type=checkbox], .form-radio>input[type=radio] { position: absolute; opacity: 0; pointer-events: none } .form-radio>input[type=checkbox]:hover+span, .form-radio>input[type=radio]:hover+span { --form-radio-border-color: #222 } .form-radio>input[type=checkbox]:checked:hover+span, .form-radio>input[type=radio]:checked:hover+span { --form-radio-border-color: #3e50cb } .form-radio>input[type=checkbox]:disabled+span, .form-radio>input[type=radio]:disabled+span { --form-radio-border-color: #d8d8d8 !important; --form-radio-background-color: #d8d8d8; color: #999; cursor: not-allowed } .form-radio>span { position: relative; display: inline-block; padding: 0 0 0 30px; vertical-align: top } .form-radio>span:empty { padding-left: 20px } .form-radio>span::after, .form-radio>span::before { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; transition-property: transform, border, background-color; transition-duration: .1s; transition-timing-function: ease-out } .form-radio>span[data-middle]::after, .form-radio>span[data-middle]::before { top: calc(50% - 10px) } .form-radio>input[type=checkbox]:not(:checked)+span::before, .form-radio>input[type=radio]:not(:checked)+span::before { border: 2px solid var(--form-radio-border-color, #999) } .form-radio>input[type=checkbox]:not(:checked)+span::after, .form-radio>input[type=radio]:not(:checked)+span::after { transform: scale(0) } .form-radio>input[type=checkbox]:checked+span::before, .form-radio>input[type=radio]:checked+span::before { border: 2px solid var(--form-radio-border-color, #1466c6) } .form-radio>input[type=checkbox]:checked+span::after, .form-radio>input[type=radio]:checked+span::after { transform: scale(.5); background-color: var(--form-radio-background-color, #1466c6) } .form-group { display: flex; flex-direction: column; align-items: flex-start } .form-group_inline { display: inline-flex } .form-group_hor { flex-direction: row; flex-wrap: wrap; margin: 0 -8px } .form-group_hor>* { margin: 0 8px } .pulsar, [data-tooltip] { position: relative } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: var(--z-data-tooltip); display: none; pointer-events: none; opacity: 0; padding: 6px 10px; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: var(--data-tooltip-max-width); box-sizing: content-box; word-wrap: break-word; background-color: #3a3c47; border-radius: 3px; color: #fff; font-size: 13px; line-height: 1.5; font-family: inherit; font-style: normal; font-variant: normal; font-weight: 400; text-align: var(--data-tooltip-text-align, unset); text-decoration: none; text-shadow: none; letter-spacing: normal; -webkit-font-smoothing: subpixel-antialiased } [data-tooltip]::before { position: absolute; z-index: calc(var(--z-data-tooltip) + 1); display: none; width: 0; height: 0; pointer-events: none; opacity: 0; color: #3a3c47; border: 6px solid transparent } [data-tooltip=""]::after, [data-tooltip=""]::before { display: none !important } [data-tooltip-visible]::after, [data-tooltip-visible]::before, [data-tooltip]:active::after, [data-tooltip]:active::before, [data-tooltip]:hover::after, [data-tooltip]:hover::before, html[data-whatintent=keyboard] [data-tooltip]:focus::after, html[data-whatintent=keyboard] [data-tooltip]:focus::before, html[data-whatintent=touch] [data-tooltip]:focus::after, html[data-whatintent=touch] [data-tooltip]:focus::before { display: inline-block; -webkit-animation-name: data-tooltip-appear; animation-name: data-tooltip-appear; -webkit-animation-duration: .1s; animation-duration: .1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-delay: .1s; animation-delay: .1s } [data-tooltip-visible]::after, [data-tooltip-visible]::before { -webkit-animation-delay: 0s; animation-delay: 0s } [data-tooltip-multiline]::after { white-space: pre-line } [data-tooltip-nowrap]::after { width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: none; white-space: nowrap } [data-tooltip-pos|=bottom]::after { top: 100%; right: 50%; margin-top: calc(6px + var(--data-tooltip-offset)) } [data-tooltip-pos|=bottom]::before { top: auto; right: 50%; bottom: calc(-7px - var(--data-tooltip-offset)); margin-right: -6px; border-bottom-color: #3a3c47 } [data-tooltip-pos=bottom-right]::after, [data-tooltip-pos=bottom-start]::after, [data-tooltip-pos=top-right]::after, [data-tooltip-pos=top-start]::after { right: auto; left: 50%; margin-left: calc(-16px + var(--data-tooltip-side-offset)) } [data-tooltip-pos=bottom-end]::after, [data-tooltip-pos=bottom-left]::after, [data-tooltip-pos=top-end]::after, [data-tooltip-pos=top-left]::after { margin-right: calc(-16px + var(--data-tooltip-side-offset)) } [data-tooltip-pos|=top]::after, [data-tooltip]:not([data-tooltip-pos])::after { right: 50%; bottom: 100%; margin-bottom: calc(6px + var(--data-tooltip-offset)) } [data-tooltip-pos|=top]::before, [data-tooltip]:not([data-tooltip-pos])::before { top: calc(-7px - var(--data-tooltip-offset)); right: 50%; bottom: auto; margin-right: -6px; border-top-color: #3a3c47 } [data-tooltip-pos=bottom]::after, [data-tooltip-pos=top]::after, [data-tooltip]:not([data-tooltip-pos])::after { transform: translateX(50%) } [data-tooltip-pos=left]::after { right: 100%; bottom: 50%; margin-right: calc(6px + var(--data-tooltip-offset)); transform: translateY(50%) } [data-tooltip-pos=left]::before { top: 50%; bottom: 50%; left: calc(-7px - var(--data-tooltip-offset)); margin-top: -6px; border-left-color: #3a3c47 } [data-tooltip-pos=right]::after { bottom: 50%; left: 100%; margin-left: calc(6px + var(--data-tooltip-offset)); transform: translateY(50%) } [data-tooltip-pos=right]::before { top: 50%; right: calc(-7px - var(--data-tooltip-offset)); bottom: 50%; margin-top: -6px; border-right-color: #3a3c47 } [data-tooltip-pos=bottom-start]::before, [data-tooltip-pos=top-start]::before { left: var(--data-tooltip-arrow-side-offset) } [data-tooltip-pos=bottom-start]::after, [data-tooltip-pos=top-start]::after { left: 0; margin-left: var(--data-tooltip-side-offset) } .pulsar-hotspot::after, .pulsar-hotspot::before, .pulsar::after, .pulsar::before { 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; content: "" } [data-tooltip-pos=bottom-end]::before, [data-tooltip-pos=top-end]::before { right: calc(var(--data-tooltip-arrow-side-offset) + 6px) } [data-tooltip-pos=bottom-end]::after, [data-tooltip-pos=top-end]::after { right: 0; margin-right: var(--data-tooltip-side-offset) } @-webkit-keyframes data-tooltip-appear { from { opacity: 0 } to { opacity: 1 } } @keyframes data-tooltip-appear { from { opacity: 0 } to { opacity: 1 } } .pulsar::after, .pulsar::before { position: absolute; -webkit-animation: pulsar 3.35s infinite; animation: pulsar 3.35s infinite; -webkit-animation-timing-function: cubic-bezier(.4, 0, .4, 1); animation-timing-function: cubic-bezier(.4, 0, .4, 1); transform: scale(0) } .pulsar::after { -webkit-animation-delay: 350ms; animation-delay: 350ms } .pulsar-hotspot { position: relative } .pulsar-hotspot::after, .pulsar-hotspot::before { position: absolute; -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 } .ui-chips, .ui-star, .ui-vote { position: relative } .pulsar-hotspot::after { -webkit-animation-name: pulsar-hotspot-2; animation-name: pulsar-hotspot-2 } @-webkit-keyframes pulsar { 0% { transform: scale(0); opacity: 0 } 10.45% { opacity: .24 } 100%, 29.85% { transform: scale(1); opacity: 0 } } @keyframes pulsar { 0% { transform: scale(0); opacity: 0 } 10.45% { opacity: .24 } 100%, 29.85% { transform: scale(1); opacity: 0 } } @-webkit-keyframes pulsar-hotspot-1 { 0% { opacity: .1 } 100% { opacity: 0 } } @keyframes pulsar-hotspot-1 { 0% { opacity: .1 } 100% { opacity: 0 } } @-webkit-keyframes pulsar-hotspot-2 { 0% { transform: scale(.2) } 100% { transform: scale(.4) } } @keyframes pulsar-hotspot-2 { 0% { transform: scale(.2) } 100% { transform: scale(.4) } } .ui-like { cursor: pointer } .ui-like:hover { --ui-like-icon-color: #222; --ui-like-count-color: #222 } .ui-like.st-button_style_none { padding: 0 } .ui-like[data-type=dislike] .ui-like__icon { transform: rotate(180deg); top: .35em } .ui-like[data-is-active] { --ui-like-icon-color: #222; --ui-like-count-color: #222 } .ui-like[data-is-inactive] { cursor: default } .ui-like[data-is-inactive]:hover { --ui-like-icon-color: inherit; --ui-like-count-color: inherit } .ui-like[data-is-inactive] .ui-like__icon { opacity: .38 } .ui-like__icon { display: inline-block; margin-right: 2px; color: var(--ui-like-icon-color, #999); width: 1.25em; height: 1.25em; vertical-align: baseline; top: .2em; transition: color .3s } .ui-like__icon svg { height: 100%; width: 100% } .ui-like__count { color: var(--ui-like-count-color, #777); transition: color .3s } .ui-vote { white-space: nowrap } .ui-vote__like+.ui-vote__like { margin-left: 16px } .ui-chips { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 16px } .ui-chips__item:not(.st-button_style_none) { display: inline-flex; padding: 4px 12px; border-radius: 16px; background-color: var(--theme-color-base-accent2-00); font-size: 16px; font-style: normal; font-weight: 400; line-height: 23px; letter-spacing: .3px; color: var(--theme-color-base-accent2-3); -webkit-font-smoothing: antialiased } .ui-chips__item:not(.st-button_style_none):focus, .ui-chips__item:not(.st-button_style_none):hover { background-color: var(--theme-color-base-accent2-00); border-color: var(--theme-color-base-accent2-3); color: var(--theme-color-base-accent2-3) } .ui-chips__item:not(.st-button_style_none):active { background-color: var(--theme-color-base-accent2-2); border-color: var(--theme-color-base-accent2-3); color: var(--theme-color-fg-oncolorbg) } @media (max-width:1024px) { .ui-chips__item:not(.st-button_style_none) { padding: 4px 8px; background-color: var(--theme-color-base-action-00); font-size: 12px; font-style: normal; font-weight: 400; line-height: 14px; letter-spacing: .4px; color: var(--theme-color-base-action-3) } .ui-chips__item:not(.st-button_style_none):focus, .ui-chips__item: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) } .ui-chips__item:not(.st-button_style_none):active { background-color: var(--theme-color-base-action-1); border-color: var(--theme-color-base-action-3); color: var(--theme-color-fg-oncolorbg) } } .ui-star { display: inline-flex; color: var(--rating-stars-color); --rating-stars-color: var(--rating-stars-active-color) } .ui-star[data-bg], .ui-star[data-is-neutral] { --rating-stars-color: var(--rating-stars-neutral-color) } .ui-star[data-fg] { position: absolute; overflow: hidden; left: 0; --rating-stars-color: var(--rating-stars-active-color) } .ui-star[data-is-clickable] { cursor: pointer } .ui-star .partial-star-bg { position: relative; display: inline-block } .ui-star .svg-icon { display: flex } .ui-stars { display: inline-flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-start; unicode-bidi: bidi-override; margin-left: -1px; --rating-stars-active-color: var(--theme-color-base-warning-1) } .ui-stars[data-is-editable] { font-size: 26px } .ui-stars[data-selection=one] { --rating-stars-selection-all-color: var(--rating-stars-neutral-color); --rating-stars-selection-current-color: var(--rating-stars-active-color) } .ui-stars[data-selection=progress] { --rating-stars-selection-all-color: var(--rating-stars-active-color); --rating-stars-selection-after-color: var(--rating-stars-neutral-color) } .ui-stars[data-selection] .ui-stars__star { transition: color .4s } .ui-stars[data-selection]:hover .ui-star[data-fg] { display: none } .ui-stars[data-selection]:hover .ui-stars__star, .ui-stars[data-selection]:hover .ui-stars__star .ui-star[data-bg] { --rating-stars-color: var(--rating-stars-selection-all-color) } .ui-stars[data-selection]:hover .ui-stars__star:hover, .ui-stars[data-selection]:hover .ui-stars__star:hover .ui-star[data-bg] { --rating-stars-color: var(--rating-stars-selection-current-color, var(--rating-stars-selection-all-color)) } .ui-stars[data-selection]:hover .ui-stars__star:hover~.ui-stars__star, .ui-stars[data-selection]:hover .ui-stars__star:hover~.ui-stars__star .ui-star[data-bg] { --rating-stars-color: var(--rating-stars-selection-after-color, var(--rating-stars-selection-all-color)) } .ui-stars__star { padding: 0 .025em } .ui-help { display: inline-flex; margin-left: 4px; font-size: 14px; color: var(--theme-color-fg-tertiary); cursor: help } .display-price__price_regular::after, .display-price__price_regular::before { clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(100%); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px } .display-price__price_regular::before { content: " [start of stricken text] " } .display-price__price_regular::after { content: " [end of stricken text] " } @supports (height:max(1em, 1px)) { .display-price__price_regular[data-html=true] { text-decoration: none } .display-price__price_regular[data-html=true]>.format-price { position: relative } .display-price__price_regular[data-html=true]>.format-price::before { content: ""; position: absolute; left: -.02em; right: -.02em; top: .62em; height: max(.08em, 1px); background-color: currentColor; pointer-events: none } .display-price__price_regular[data-html=true]>.format-price:hover::before { opacity: .5 } } .tariff-card-container { display: grid; grid-auto-columns: -webkit-min-content; grid-auto-columns: min-content; grid-gap: 16px 32px } .tariff-card { display: flex; flex-direction: column; padding: 24px 16px; width: 222px; min-height: 303px; border-radius: 4px; box-shadow: 0 2px 4px 0 #E9EBFA; border: 1px solid #eaecf0 } .tariff-card[data-active] { border-color: #6c6; box-shadow: 0 2px 5px 2px rgba(102, 204, 102, .25) } .tariff-card[data-type=basic][data-active] { border-color: #e9f9e9 } .tariff-card__header { min-height: 72px; margin-bottom: 16px } .tariff-card__body { flex: 1 } .tariff-card__footer { margin-top: 16px } .tariff-card-details { grid-row: 2; font-size: 12px; letter-spacing: .4px; line-height: 1.17 } .tariff-card-details>span { display: block; margin-bottom: 8px } .tariff-card-details>ul { margin: 0; line-height: inherit } .tariff-card-details>ul.list-style__check-marks>li::before { margin-top: 0 } .tariff-card-details>ul li+li { margin-top: 8px } .tariff-card__price { margin-bottom: 5px; font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: .75px } .tariff-card__price-regular { font-weight: 400; font-size: 16px; letter-spacing: .3px; -webkit-text-decoration-line: line-through; text-decoration-line: line-through; text-decoration-thickness: 1px; color: #999 } .tariff-card__name-note, .tariff-card__price-discount-note, .tariff-card__price-note { font-size: 12px; line-height: 1.17; letter-spacing: .4px } .tariff-card__name { margin: 0 0 4px; font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: .15px } .tariff-card__price-discount-note { margin-top: 4px; color: #3e50cb } .tariff-card__trial-note { display: block; margin-bottom: 8px; color: #288b28; font-size: 12px; letter-spacing: .25px } .tariff-card__buttons>.button, .tariff-card__buttons>button { display: block; padding: 9px 24px; width: 100% } .tariff-card__buttons>.button:not(:first-child), .tariff-card__buttons>button:not(:first-child) { margin-top: 8px } .tariff-card__buttons>.button.secondary.is-outlined, .tariff-card__buttons>button.secondary.is-outlined { color: #5e5e5e; border-color: #999 } .tariff-card__buttons>.select-box { display: block; --select-box-menu-max-height: 200px } .tariff-card__buttons>.select-box .select-box__autowidth-measurer, .tariff-card__buttons>.select-box button.select-box__toggle-btn { padding-top: 9px; padding-bottom: 9px; padding-left: 16px; font-size: 16px; line-height: 1 } .tariff-card__select-box-default-item { --menu-item-color: #999; filter: grayscale(1) } @media (max-width:768px) { .tariff-card-container { grid-auto-columns: -webkit-min-content 1fr; grid-auto-columns: min-content 1fr; grid-gap: 32px 16px } .tariff-card { align-self: flex-start; width: 192px } .tariff-card-details { grid-row: auto; grid-column: 2 } } .nav { display: inline-block; margin-right: 44px; font-size: 16px } .nav>:first-child { margin-top: 0 } .nav>:last-child { margin-bottom: 0 } .nav-links { list-style: none; display: flex; flex-direction: column; align-items: flex-start; margin: 32px 0; line-height: 1.38; letter-spacing: .3px } .nav-links li { margin: 0 } .nav-links li+li { margin-top: 11px } .nav-links a { display: flex; color: #222; text-decoration: none } .nav-links a:focus, .nav-links a:hover { color: #54ad54 } .nav-links a.active { color: #54ad54; font-weight: 500 } .nav-links a>var { display: inline-block; margin-left: 4px; color: #999; font-weight: 400; font-style: normal } .nav-links a>var::before { content: "(" } .nav-links a>var::after { content: ")" } .nav-btns { display: flex; flex-direction: column; margin: 40px 0 } .nav-btns>.button, .nav-btns>button { display: flex; align-items: center; padding: 9px 19px } .nav-btns>.button:not(:last-child), .nav-btns>button:not(:last-child) { margin-bottom: 14px } .nav-btns>.button .svg-icon, .nav-btns>button .svg-icon { margin-left: -5px; margin-right: 11px; font-size: 12px } .drop-down.language-selector { display: flex } .drop-down.language-selector .drop-down__toggler { display: flex; height: 100% } select.language-selector { display: block; width: 100%; margin: 0 } .language-selector__menu-icon { position: absolute; top: 2px; left: 3px; height: 100%; width: 20px; padding: 4px; display: flex; align-items: center; justify-content: center } .drop-down, .horizontal-scroller, .menu-item_relative { position: relative } .menu { box-shadow: var(--menu-box-shadow); margin: 0; padding: 0; min-width: var(--menu-min-width); transform: translateY(var(--menu-offset-y)); list-style: none; z-index: 300; overflow: hidden; background-color: var(--menu-background); border: var(--menu-border); border-radius: var(--menu-border-radius); font-size: 13px; text-align: left } .menu_right { text-align: right } .menu_theme_popup, .menu_theme_popup-dark { --menu-item-padding-v: 9px; --menu-item-padding-h: 24px; padding: 10px 0 8px; font-size: 14px } .menu_theme_popup .menu-item>a, .menu_theme_popup .menu-item>button, .menu_theme_popup .menu-item>select, .menu_theme_popup-dark .menu-item>a, .menu_theme_popup-dark .menu-item>button, .menu_theme_popup-dark .menu-item>select { letter-spacing: .25px } .menu_theme_popup { --menu-item-color: #222; --menu-item-hover-color: #000; --menu-item-active-color: #000; --menu-item-hover-background: #e9f9e9; --menu-item-active-background: #d5f4d5 } .menu_theme_popup-dark { --menu-background: #222; --menu-border: 1px solid #222; --menu-item-color: #bbbbbb; --menu-item-hover-color: #66cc66; --menu-item-active-color: #66cc66; --menu-item-hover-background: #333333; --menu-item-active-background: #2b2b2b; --menu-item-divider-color: #444; --menu-item-disabled-color: #5e5e5e } .menu-item { margin: 0; padding: var(--menu-item-padding-v) var(--menu-item-padding-h); text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .menu-item>a, .menu-item>button:not(.st-button_style_none), .menu-item>select { display: block; margin: calc(var(--menu-item-padding-v) * -1) calc(var(--menu-item-padding-h) * -1); padding: var(--menu-item-padding-v) var(--menu-item-padding-h); white-space: var(--menu-item-white-space, nowrap); border-radius: var(--menu-item-ctrl-border-radius); text-decoration: none; transition: none; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; --focus-outline-color: rgba(51, 204, 51, 0.3); --focus-outline-box-shadow-params: inset 0 0 0 4px } .menu-item>a, .menu-item>a:focus, .menu-item>button:not(.st-button_style_none), .menu-item>button:not(.st-button_style_none):focus, .menu-item>select, .menu-item>select:focus { color: var(--menu-item-color); background: var(--menu-item-background); border: none } .menu-item>a:hover, .menu-item>button:not(.st-button_style_none):hover, .menu-item>select:hover { color: var(--menu-item-hover-color); background-color: var(--menu-item-hover-background) } .menu-item>a:active, .menu-item>button:not(.st-button_style_none):active, .menu-item>select:active { color: var(--menu-item-active-color); background-color: var(--menu-item-active-background) } .menu-item>a.active, .menu-item>a[data-active], .menu-item>button:not(.st-button_style_none).active, .menu-item>button:not(.st-button_style_none)[data-active], .menu-item>select.active, .menu-item>select[data-active] { color: var(--menu-item-selected-color, var(--menu-item-active-color)); background-color: var(--menu-item-selected-background, var(--menu-item-active-background)) } .menu-item>a.active:hover, .menu-item>a[data-active]:hover, .menu-item>button:not(.st-button_style_none).active:hover, .menu-item>button:not(.st-button_style_none)[data-active]:hover, .menu-item>select.active:hover, .menu-item>select[data-active]:hover { color: var(--menu-item-selected-hover-color, var(--menu-item-selected-color, var(--menu-item-active-color))); background-color: var(--menu-item-selected-hover-background, var(--menu-item-selected-background, var(--menu-item-active-background))) } .menu-item>a.active:active, .menu-item>a[data-active]:active, .menu-item>button:not(.st-button_style_none).active:active, .menu-item>button:not(.st-button_style_none)[data-active]:active, .menu-item>select.active:active, .menu-item>select[data-active]:active { color: var(--menu-item-selected-active-color, var(--menu-item-selected-color, var(--menu-item-active-color))); background-color: var(--menu-item-selected-active-background, var(--menu-item-selected-background, var(--menu-item-active-background))) } .menu-item>a .disabled, .menu-item>a[aria-disabled=true], .menu-item>a[disabled], .menu-item>button:not(.st-button_style_none) .disabled, .menu-item>button:not(.st-button_style_none)[aria-disabled=true], .menu-item>button:not(.st-button_style_none)[disabled], .menu-item>select .disabled, .menu-item>select[aria-disabled=true], .menu-item>select[disabled] { color: var(--menu-item-disabled-color); background-color: transparent; cursor: not-allowed; opacity: var(--menu-item-disabled-opacity, 1) } .menu-item>a>.svg-icon, .menu-item>button:not(.st-button_style_none)>.svg-icon, .menu-item>select>.svg-icon { display: inline-flex; vertical-align: top; margin-right: var(--menu-item-icon-offset); transform: var(--menu-item-icon-transform); color: var(--menu-item-icon-color, inherit) } .menu-item-divider:first-child, .menu-item-divider:last-child, .menu-item-spacer:first-child, .menu-item-spacer:last-child { display: none } .menu-item>.menu-icon__icon, .menu-item>select option { color: var(--menu-item-color) } .menu-item>a>.svg-icon svg, .menu-item>button:not(.st-button_style_none)>.svg-icon svg, .menu-item>select>.svg-icon svg { width: 1em; height: 1em } .menu-item>a>span+.svg-icon, .menu-item>button:not(.st-button_style_none)>span+.svg-icon, .menu-item>select>span+.svg-icon { margin-right: 0; margin-left: var(--menu-item-icon-offset) } .menu-item>button, .menu-item>select { width: calc(100% + var(--menu-item-padding-h) * 2); text-align: inherit; cursor: pointer; outline: 0 } .menu-item>select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 17px; background-position: calc(100% - 10px) 50%; background-repeat: no-repeat } .menu-item+.menu-item { margin-top: var(--menu-item-spacing) } .menu-item:hover>.menu-icon__icon { color: var(--menu-item-hover-color); background-color: transparent } .menu-item:active>.menu-icon__icon { color: var(--menu-item-active-color); background-color: transparent } .menu-item.active>.menu-icon__icon, .menu-item.active>a, .menu-item.active>button:not(.st-button_style_none), .menu-item.active>select, .menu-item[data-active]>.menu-icon__icon, .menu-item[data-active]>a, .menu-item[data-active]>button:not(.st-button_style_none), .menu-item[data-active]>select, .menu-item[data-selected]>.menu-icon__icon, .menu-item[data-selected]>a, .menu-item[data-selected]>button:not(.st-button_style_none), .menu-item[data-selected]>select { color: var(--menu-item-selected-color, var(--menu-item-active-color)); background-color: var(--menu-item-selected-background, var(--menu-item-active-background)) } .menu-item.active>.menu-icon__icon:hover, .menu-item.active>a:hover, .menu-item.active>button:not(.st-button_style_none):hover, .menu-item.active>select:hover, .menu-item[data-active]>.menu-icon__icon:hover, .menu-item[data-active]>a:hover, .menu-item[data-active]>button:not(.st-button_style_none):hover, .menu-item[data-active]>select:hover, .menu-item[data-selected]>.menu-icon__icon:hover, .menu-item[data-selected]>a:hover, .menu-item[data-selected]>button:not(.st-button_style_none):hover, .menu-item[data-selected]>select:hover { color: var(--menu-item-selected-hover-color, var(--menu-item-selected-color, var(--menu-item-active-color))); background-color: var(--menu-item-selected-hover-background, var(--menu-item-selected-background, var(--menu-item-active-background))) } .menu-item.active>.menu-icon__icon:active, .menu-item.active>a:active, .menu-item.active>button:not(.st-button_style_none):active, .menu-item.active>select:active, .menu-item[data-active]>.menu-icon__icon:active, .menu-item[data-active]>a:active, .menu-item[data-active]>button:not(.st-button_style_none):active, .menu-item[data-active]>select:active, .menu-item[data-selected]>.menu-icon__icon:active, .menu-item[data-selected]>a:active, .menu-item[data-selected]>button:not(.st-button_style_none):active, .menu-item[data-selected]>select:active { color: var(--menu-item-selected-active-color, var(--menu-item-selected-color, var(--menu-item-active-color))); background-color: var(--menu-item-selected-active-background, var(--menu-item-selected-background, var(--menu-item-active-background))) } .menu-item.disabled, .menu-item[aria-disabled=true] { cursor: not-allowed } .menu-item.disabled>.menu-icon__icon, .menu-item.disabled>a, .menu-item.disabled>button:not(.st-button_style_none), .menu-item.disabled>select, .menu-item[aria-disabled=true]>.menu-icon__icon, .menu-item[aria-disabled=true]>a, .menu-item[aria-disabled=true]>button:not(.st-button_style_none), .menu-item[aria-disabled=true]>select { color: var(--menu-item-disabled-color); background-color: transparent; cursor: not-allowed; opacity: var(--menu-item-disabled-opacity, 1); pointer-events: none } .menu-item-divider { height: 1px; margin: 5px 0; background-color: var(--menu-item-divider-color) } .menu-item-spacer { flex: 1; margin: var(--menu-item-spacing) 0 0 } .drop-down { display: inline-block } .drop-down .drop-down__body[data-theme=default] { color: #222; border-color: #ccc } .drop-down .drop-down__animation-layer[data-animation=default][data-side^=bottom] { -webkit-animation-name: drop-down-default-animation-bottom; animation-name: drop-down-default-animation-bottom } .drop-down .drop-down__animation-layer[data-animation=default][data-side^=left] { -webkit-animation-name: drop-down-default-animation-left; animation-name: drop-down-default-animation-left } .drop-down .drop-down__animation-layer[data-animation=default][data-side^=right] { -webkit-animation-name: drop-down-default-animation-right; animation-name: drop-down-default-animation-right } .drop-down .drop-down__animation-layer[data-animation=default][data-side^=top] { -webkit-animation-name: drop-down-default-animation-top; animation-name: drop-down-default-animation-top } @-webkit-keyframes drop-down-default-animation-bottom { 0% { opacity: 0; transform: translateY(-10px) } 100% { opacity: 1; transform: translateY(0) } } @keyframes drop-down-default-animation-bottom { 0% { opacity: 0; transform: translateY(-10px) } 100% { opacity: 1; transform: translateY(0) } } @-webkit-keyframes drop-down-default-animation-left { 0% { opacity: 0; transform: translateX(10px) } 100% { opacity: 1; transform: translateX(0) } } @keyframes drop-down-default-animation-left { 0% { opacity: 0; transform: translateX(10px) } 100% { opacity: 1; transform: translateX(0) } } @-webkit-keyframes drop-down-default-animation-top { 0% { opacity: 0; transform: translateY(10px) } 100% { opacity: 1; transform: translateY(0) } } @keyframes drop-down-default-animation-top { 0% { opacity: 0; transform: translateY(10px) } 100% { opacity: 1; transform: translateY(0) } } @-webkit-keyframes drop-down-default-animation-right { 0% { opacity: 0; transform: translateX(-10px) } 100% { opacity: 1; transform: translateX(0) } } @keyframes drop-down-default-animation-right { 0% { opacity: 0; transform: translateX(-10px) } 100% { opacity: 1; transform: translateX(0) } } .drop-down-empty .drop-down__body { --menu-offset-y: 0; padding: 0; background: 0 0; border: none; border-radius: 0; filter: none } .drop-down-empty .drop-down__body[data-side^=bottom], .drop-down-empty .drop-down__body[data-side^=top] { min-width: 100% } .drop-down-menu .drop-down__body { --menu-offset-y: 0; padding: 0; background: 0 0; border: none; border-radius: 0; filter: none } .drop-down-menu .drop-down__body[data-side^=bottom], .drop-down-menu .drop-down__body[data-side^=top] { min-width: 100% } .drop-down-menu[data-multiple-menu-layout=columns] .drop-down__body { display: flex; flex-direction: row; padding: 0 10px; background: var(--menu-background); border: var(--menu-border); border-radius: var(--menu-border-radius); filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .1)) } .drop-down-menu[data-multiple-menu-layout=columns] .drop-down__body .menu { --menu-item-padding-v: 9px; --menu-item-padding-h: 14px; --menu-item-ctrl-border-radius: 4px; --menu-background: inherit; --menu-border: none; --menu-border-radius: 0; box-shadow: none } .drop-down-menu[data-multiple-menu-layout=columns] .drop-down__body .menu+.menu { margin-left: 4px } .drop-down__body-wrapper { all: initial; font-family: inherit; color: inherit } .drop-down__body-wrapper[hidden] { display: none } .drop-down__animation-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 111; pointer-events: none; -webkit-animation-duration: .1s; animation-duration: .1s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards } .drop-down__body { position: absolute; z-index: 0; pointer-events: auto; padding: 10px; border-width: 1px; border-style: solid; border-color: #ccc; border-radius: 3px; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .1)); background: #fff } .drop-down__body[data-side^=left] { right: calc(100% + var(--drop-down-spacing)) } .drop-down__body[data-side^=right] { left: calc(100% + var(--drop-down-spacing)) } .drop-down__body[data-side=left], .drop-down__body[data-side=right] { top: 50%; transform: translateY(-50%) } .drop-down__body[data-side=left-start], .drop-down__body[data-side=right-start] { top: 0 } .drop-down__body[data-side=left-end], .drop-down__body[data-side=right-end] { bottom: 0 } .drop-down__body[data-side^=top] { bottom: calc(100% + var(--drop-down-spacing)) } .drop-down__body[data-side^=bottom] { top: calc(100% + var(--drop-down-spacing)) } .drop-down__body[data-side=bottom], .drop-down__body[data-side=top] { left: 50%; transform: translateX(-50%) } .drop-down__body[data-side=bottom-start], .drop-down__body[data-side=top-start] { left: 0 } .drop-down__body[data-side=bottom-end], .drop-down__body[data-side=top-end] { right: 0 } .drop-down__content { min-width: 240px; line-height: 1.3; font-size: 14px } .format-price { white-space: nowrap } .format-price>[data-type=currency], .format-price>[data-type=literal] { font-weight: lighter; font-size: .85em } .format-price>[data-type=decimal], .format-price>[data-type=fraction] { font-weight: lighter; opacity: .8 } .format-price>[data-type=currency]+[data-type=integer] { margin-left: 1px } .format-price>[data-type=integer]+[data-type=literal][data-value=], .format-price>[data-type=integer]+[data-type=literal][data-value=" "] { margin-left: -1.4px } .course-list-cards { --course-list-card-height: 120px; --course-list-card-small-height: 60px; --course-list-card-tag-height: 35px; --course-list-card-padding: 24px 16px 24px 24px; --course-list-card-small-padding: 18px 46px 18px 24px; --course-list-card-tag-padding: 9px 16px 10px 16px; display: flex; align-items: center } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(n+5) .course-list-card__courses, .course-list-cards[data-list-type=tags]>.course-list-card .course-list-card__courses { display: none } .course-list-cards>.course-list-card+.course-list-card { margin-left: 24px } .course-list-cards[data-list-type=tags]>.course-list-card { height: var(--course-list-card-tag-height); width: auto; background-color: rgba(233, 235, 250, .25) } .course-list-cards[data-list-type=tags]>.course-list-card .course-list-card__link-wrapper { padding: var(--course-list-card-tag-padding); flex-direction: row; align-items: center } .course-list-cards[data-list-type=tags]>.course-list-card .course-list-card__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; letter-spacing: .15px } .course-list-cards[data-list-type=tags]>.course-list-card:hover { filter: none; background-color: rgba(233, 235, 250, .5) } .course-list-cards[data-list-type=action], .course-list-cards[data-list-type=grid] { flex-wrap: wrap; margin: -12px } .course-list-cards[data-list-type=action]>.course-list-card, .course-list-cards[data-list-type=grid]>.course-list-card { margin: 12px } .course-list-cards[data-list-type=grid]>.course-list-card:first-child { background-color: #6c7bdf; color: #fff; background-image: url(/static/frontend/course-list-card-featured-background.svg); background-repeat: repeat-y; background-size: 129px 109px; background-position: calc(100% - 17px) -8px } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(n+5) { height: var(--course-list-card-small-height); width: auto; flex-grow: 0; min-width: 0 } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(n+5) .course-list-card__link-wrapper { padding: var(--course-list-card-small-padding); flex-direction: row; align-items: center } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(n+5) .course-list-card__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(-n+4) { flex-grow: 0; min-width: 0; flex-basis: calc(25% - 24px) } .course-list-cards:not([data-list-type])>.course-list-card:nth-child(4n+1) { background-color: #E9EBFA; color: #3e50cb } .course-list-cards:not([data-list-type])>.course-list-card:nth-child(4n+2) { background-color: #e7f2ff; color: #1466c6 } .course-list-cards:not([data-list-type])>.course-list-card:nth-child(4n+3) { background-color: #e9f9e9; color: #288b28 } .course-list-cards:not([data-list-type])>.course-list-card:nth-child(4n+4) { background-color: #ffeede; color: #ff810a } .course-list-card { flex-shrink: 0; height: var(--course-list-card-height); width: 237.5px; border-radius: 16px; background-color: #E9EBFA; color: #3e50cb } .course-list-card:hover { filter: saturate(1.3) contrast(1.03) } .course-list-card[data-view=small] { height: var(--course-list-card-small-height); width: auto } .course-list-card[data-view=small] .course-list-card__courses { display: none } .course-list-card[data-view=small] .course-list-card__link-wrapper { padding: var(--course-list-card-small-padding); flex-direction: row; align-items: center } .course-list-card[data-view=small] .course-list-card__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .course-list-card[data-view=tag] { height: var(--course-list-card-tag-height); width: auto; background-color: rgba(233, 235, 250, .25) } .course-list-card[data-view=tag] .course-list-card__courses { display: none } .course-list-card[data-view=tag] .course-list-card__link-wrapper { padding: var(--course-list-card-tag-padding); flex-direction: row; align-items: center } .course-list-card[data-view=tag] .course-list-card__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; letter-spacing: .15px } .course-list-card[data-view=tag]:hover { filter: none; background-color: rgba(233, 235, 250, .5) } .course-list-card__link-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; padding: var(--course-list-card-padding); color: inherit !important; text-decoration: none !important; border-radius: inherit } .course-list-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; font-size: 18px; font-weight: 500; line-height: 22px; letter-spacing: .17px; -webkit-font-smoothing: antialiased } .course-list-card__courses { margin-top: auto; padding-top: 4px; font-size: 14px; line-height: 1.43; letter-spacing: .25px } @media (max-width:768px) { .course-list-cards { --course-list-card-height: 120px; --course-list-card-small-height: 51px; --course-list-card-tag-height: 35px; --course-list-card-padding: 20px 16px 16px; --course-list-card-small-padding: 16px 40px 16px 16px; --course-list-card-tag-padding: 9px 16px 10px 16px } .course-list-cards[data-list-type=grid] { flex-wrap: wrap; margin: -6px } .course-list-cards[data-list-type=grid]>.course-list-card { margin: 6px } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(n+4) { height: var(--course-list-card-small-height); width: auto; flex-grow: 0; flex-basis: auto; min-width: 0 } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(n+4) .course-list-card__courses { display: none } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(n+4) .course-list-card__link-wrapper { padding: var(--course-list-card-small-padding); flex-direction: row; align-items: center } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(n+4) .course-list-card__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .course-list-cards[data-list-type=grid]>.course-list-card:nth-child(-n+3) { flex-grow: 1; flex-basis: calc(50% - 12px) } .course-list-cards[data-list-type=grid]>.course-list-card:first-child { flex-basis: calc(100% - 12px) } .course-list-card__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; letter-spacing: .15px } } .course-card__title, .specialization-card__title { overflow-wrap: anywhere; font-weight: 500; -webkit-box-orient: vertical; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto } .specialization-card { display: flex; flex-direction: column; height: 167px; width: var(--specialization-card-default-width); padding: 24px 33px 18px 24px; border-radius: 16px } .specialization-card__title { font-size: 20px; line-height: normal; letter-spacing: .15px; display: -webkit-box; -webkit-line-clamp: 3; overflow: hidden } .specialization-card__footer { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between } .specialization-card__duration { font-size: 14px; line-height: 1.43; letter-spacing: .25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .specialization-card__price { display: flex; align-items: baseline; font-size: 16px; font-weight: 500; letter-spacing: .2px; line-height: 1.13; color: #6c7bdf } .specialization-card__price .display-price__price_regular { margin: 0 8px 0 0; font-size: 12px; font-weight: 400; letter-spacing: .13px; color: #3e50cb } .specialization-card__price .display-price__price_regular .format-price>[data-type=currency], .specialization-card__price .display-price__price_regular .format-price>[data-type=literal] { display: none } .specialization-card__price .display-price__price_discount { color: #ff7965 } @media (max-width:768px) { :root { --specialization-card-default-width: 156px } .specialization-card { height: 128px; padding: 16px 8px 16px 16px } .specialization-card__title { font-size: 16px; line-height: 1.13 } .specialization-card__footer { flex-direction: column; align-items: stretch } .specialization-card__duration { margin: 0 0 4px; font-size: 12px; line-height: 1.17; letter-spacing: .4px } .specialization-card__price .display-price__price_regular { order: 1; margin: 0 0 0 8px } } .horizontal-scroller { display: flex; align-items: center } .horizontal-scroller[data-has-left-scroll] .horizontal-scroller__scroll-btn_left, .horizontal-scroller[data-has-right-scroll] .horizontal-scroller__scroll-btn_right { pointer-events: auto; opacity: 1; cursor: pointer } .horizontal-scroller:not([data-has-left-scroll]) { --horizontal-scroller-fog-left: rgba(0, 0, 0, 1) 0% } .horizontal-scroller:not([data-has-right-scroll]) { --horizontal-scroller-fog-right: rgba(0, 0, 0, 1) 100% } .st-button_style_none.horizontal-scroller__scroll-btn { position: absolute; z-index: calc(var(--horizontal-scroller-zindex) + 1); pointer-events: none; opacity: 0; cursor: default; padding: var(--horizontal-scroller-btn-padding); background-color: rgba(255, 255, 255, .5); color: rgba(34, 34, 34, .9); border-radius: 50%; font-size: var(--horizontal-scroller-btn-icon-size); box-shadow: 0 0 1px 0 rgba(0, 0, 0, .15), 0 1px 1px 0 rgba(0, 0, 0, .15); transition: opacity var(--no-initial-animate-duration, .15s) ease-in-out, var(--focus-outline-transition) } .st-button_style_none.horizontal-scroller__scroll-btn:hover { pointer-events: auto; box-shadow: 0 0 1px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .1) } .st-button_style_none.horizontal-scroller__scroll-btn:active { background-color: rgba(243, 244, 246, .5) } .st-button_style_none.horizontal-scroller__scroll-btn .svg-icon { display: flex } .horizontal-scroller__scroll-btn_left { left: var(--horizontal-scroller-btns-offset) } .horizontal-scroller__scroll-btn_right { right: var(--horizontal-scroller-btns-offset) } .horizontal-scroller__content { overflow: auto; flex: 1; z-index: var(--horizontal-scroller-zindex); -webkit-mask-image: linear-gradient(to right, var(--horizontal-scroller-fog-left), var(--horizontal-scroller-fog-right)); mask-image: linear-gradient(to right, var(--horizontal-scroller-fog-left), var(--horizontal-scroller-fog-right)); scrollbar-width: none; -ms-overflow-style: none } .horizontal-scroller__content::-webkit-scrollbar { display: none; width: 0; height: 0 } @media (max-width:768px) { .horizontal-scroller__scroll-btn_left, .horizontal-scroller__scroll-btn_right { display: none } .horizontal-scroller__content { -webkit-mask-image: none; mask-image: none } } .catalog-rich-card { position: relative } .catalog-rich-card .catalog-rich-card__link-wrapper, .catalog-rich-card::before { position: absolute; right: 0; top: 0; border-radius: inherit; left: 0; bottom: 0 } .catalog-rich-card::before { background-color: #fff; box-shadow: 1px 2px 12px 0 rgba(94, 94, 94, .12); transition: transform 125ms cubic-bezier(.39, .58, .57, 1); content: ""; z-index: 0 } .catalog-rich-card:hover .catalog-rich-card__link-wrapper, .catalog-rich-card:hover::before { transform: scale(1.01, 1.02) } .catalog-rich-card:hover::before { box-shadow: 1px 2px 12px 0 rgba(156, 166, 230, .6) } .catalog-rich-card:hover { z-index: 2 } .catalog-rich-card>* { position: relative; z-index: 1; pointer-events: none } .catalog-rich-card>.drop-down[data-expanded] { z-index: 3 } .catalog-rich-card .ember-tooltip-target, .catalog-rich-card [tabindex="0"], .catalog-rich-card a, .catalog-rich-card button { pointer-events: auto } .course-card { position: relative; display: grid; grid-template-areas: "title title cover cover" "authors authors cover cover" "space space cover cover" "widgets widgets widgets widgets" "price badges badges badges"; grid-template-columns: auto 1fr auto auto; grid-template-rows: -webkit-max-content auto 1fr auto minmax(18px, auto); grid-template-rows: max-content auto 1fr auto minmax(18px, auto); height: 210px; width: 324px; padding: 16px; border-radius: 16px } .course-card[data-view=search-item]::before, .course-card[data-view=small] .course-card__authors, .course-card[data-view=small] .course-card__badges, .course-card[data-view=small] .course-card__widgets, .course-card__price .display-price__price_regular .format-price>[data-type=currency], .course-card__price .display-price__price_regular .format-price>[data-type=literal] { display: none } .course-card[data-view=small] { grid-template-areas: "cover cover" "title title" "space space" "price price"; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr minmax(18px, auto); height: 240px; width: 160px; padding: 16px 16px 24px } .course-card[data-view=small][data-has-bookmark] .course-card__cover, .course-card[data-view=small][data-loading] .course-card__cover { margin-left: 0 } .course-card[data-view=small] .course-card__cover { margin: 0 auto; width: 72px; height: 72px } .course-card[data-view=small] .course-card__title { margin: 16px 0 8px; font-size: 14px; line-height: 1.14; letter-spacing: .15px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden } .course-card[data-view=small] .course-card__title[data-skeleton] { width: 95% } .course-card[data-view=small] button.course-card__bookmark:not(.st-button_style_none) { top: 8px; right: 8px; background: 0 0; border: none } .course-card[data-view=small] button.course-card__bookmark:not(.st-button_style_none):hover { background: 0 0; border: none } .course-card[data-view=small] button.course-card__bookmark:not(.st-button_style_none):active { background: #edfaed; border: none } .course-card[data-view=small] button.course-card__bookmark:not(.st-button_style_none)>.svg-icon { padding: 4px; width: 24px; height: 24px } .course-card[data-view=search-item] { grid-template-areas: "cover title badges price bookmark" "cover authors authors authors authors" "cover summary summary summary summary" "cover widgets widgets widgets widgets"; grid-template-columns: auto auto 1fr auto auto; grid-template-rows: auto auto auto auto; height: auto; width: auto; padding: 24px 0; position: relative } .course-card[data-view=search-item][data-loading], .item-tile { grid-template-columns: auto 1fr auto auto auto } .course-card[data-view=search-item]::after { content: ""; position: absolute; bottom: 0; left: 116px; right: 0; height: 1px; background-color: #E9EBFA } .course-card[data-view=search-item] .course-card__cover { margin: 0 16px 0 0; width: 100px; height: 100px } @media (max-width:768px) { .course-card[data-view=search-item] { grid-template-areas: "cover title bookmark" "cover authors authors" "cover price price" "cover widgets widgets" "cover badges badges"; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto auto auto; padding: 16px 0 } .course-card[data-view=search-item]::after { left: 52px } .course-card[data-view=search-item] .course-card__cover { margin-right: 12px; width: 40px; height: 40px } } .course-card[data-view=search-item] .course-card__title { margin: 0 0 6px; font-size: 16px; line-height: 18px; letter-spacing: .15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden } .course-card[data-view=search-item] .course-card__title[data-skeleton] { max-width: 40ch } .course-card[data-view=search-item] .course-card__authors { font-size: 14px; color: #999 } .course-card[data-view=search-item] .course-card__authors[data-skeleton] { width: 11ch } .course-card[data-view=search-item] .course-card__summary { margin: 10px 0 16px; max-width: 768px } .course-card[data-view=search-item] .course-card__widgets { margin: -5px } @media (max-width:768px) { .course-card[data-view=search-item] .course-card__authors { font-size: 12px; color: #222 } .course-card[data-view=search-item] .course-card__summary { display: none } .course-card[data-view=search-item] .course-card__widgets { margin-top: 3px } } .course-card[data-view=search-item] .course-card__widget { margin: 5px } .course-card[data-view=search-item] .course-card__badges { align-items: flex-start; justify-content: flex-start; margin: 0 0 2px 9px } @media (max-width:768px) { .course-card[data-view=search-item] .course-card__badges { margin: 9px -3px -2px } } .course-card[data-view=search-item] .course-card__price { align-self: baseline; margin: 0 0 0 16px } @media (max-width:768px) { .course-card[data-view=search-item] .course-card__price { margin: 24px 0 0 } } .course-card[data-view=search-item] button.course-card__bookmark:not(.st-button_style_none) { grid-area: bookmark; position: static; top: auto; right: auto; margin: -2px 0 0 16px; width: 24px; height: 24px; background: 0 0; border: none } .course-card[data-view=search-item] button.course-card__bookmark:not(.st-button_style_none):hover { background: 0 0; border: none } .course-card[data-view=search-item] button.course-card__bookmark:not(.st-button_style_none):active { background: #edfaed; border: none } .course-card[data-view=search-item] button.course-card__bookmark:not(.st-button_style_none)>.svg-icon { padding: 0; width: 16px; height: 16px } .course-card__title { grid-area: title; justify-self: flex-start; margin: 2px 0 8px; --link-color: #222; --link-line: underline; --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; --link-line-color: transparent; --link-line-offset: .1em; font-size: 16px; line-height: 1.25; letter-spacing: normal; display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden } .course-card__title[data-skeleton] { width: 85% } .course-card__authors { grid-area: authors; justify-self: flex-start; font-size: 12px; line-height: 1.17; letter-spacing: .1px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden } .course-card__authors[data-skeleton] { width: 70%; margin: 0; padding: 0 } .course-card__author { display: inline; --focus-outline-box-shadow-params: inset 0 0 0 4px; --link-color: #222; --link-line: underline; --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; --link-line-color: transparent; --link-line-offset: .1em } .course-card__author:not(:last-child)::after { content: "," } .course-card__cover { grid-area: cover; margin: 0 0 0 12px; width: 72px; height: 72px; border-radius: 4px } .course-card__summary { grid-area: summary; margin: 10px 0; font-size: 14px; line-height: 20px; letter-spacing: .25px } .course-card__summary[data-skeleton] { height: 3em } button.course-card__bookmark:not(.st-button_style_none) { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: #f6f6f6; color: var(--static-color, #999); transition: none } button.course-card__bookmark:not(.st-button_style_none):hover { border: 1px solid #54ad54; background: #e9f9e9; color: #246024 } button.course-card__bookmark:not(.st-button_style_none):active { background: #d5f4d5 } button.course-card__bookmark:not(.st-button_style_none)[data-toggled] { --static-color: #66cc66 } button.course-card__bookmark:not(.st-button_style_none)>.svg-icon { display: flex; width: 20px; height: 20px; padding: 4px 3px 3px } button.course-card__bookmark:not(.st-button_style_none)>.svg-icon svg { width: 100%; height: 100% } .course-card__widgets { grid-area: widgets; display: flex; flex-wrap: wrap; margin: -3px -5px 11px; white-space: nowrap; font-size: 12px; line-height: 1; letter-spacing: .4px; color: #999 } .course-card__widget { display: flex; align-items: center; margin: 3px 5px } .course-card__widget .svg-icon, .course-card__widget i { display: flex; width: 12px; height: 12px } .course-card__widget .svg-icon svg, .course-card__widget i svg { width: 100%; height: 100% } .course-card__widget .svg-icon+span, .course-card__widget i+span { margin-left: 4px } .course-card__widget[data-type=enrolled-progress]>i { color: #54ad54 } .course-card__widget[data-skeleton] { width: 30% } .course-card__widget-rating-stars { display: flex; margin-right: 4px } .course-card__widget-rating-stars>* { transform: scale(1.3); margin-right: 1px } .course-card__price { grid-area: price; align-self: flex-end; margin: 0 16px 0 0; font-size: 16px; font-weight: 500; line-height: 1.13; letter-spacing: .15px; color: #6c7bdf } .course-card__price .format-price.format-price_free { font-size: 14px; color: #6c6 } .course-card__price .display-price__price_regular { margin-right: 2px; font-size: 12px; font-weight: 400; letter-spacing: .13px; color: #3e50cb } .course-card__price .display-price__price_discount { color: #ff7965 } .course-card__price[data-enrolled] { font-size: 14px; color: #999 } .course-card__price[data-skeleton] { width: 52px } .course-card__badges { grid-area: badges; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; white-space: nowrap; --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-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-badge-padding: 0 6px; margin: -2px -3px } .course-card__badge { margin: 2px 3px } .course-card__menu { position: absolute; top: 8px; right: 8px } .course-card__menu~.course-card__bookmark { display: none } button.course-card__menu-toggle-btn:not(.st-button_style_none) { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #f6f6f6; color: #999; font-size: 10px; transition: none; --focus-outline-color: rgba(100, 200, 255, 0.3) } button.course-card__menu-toggle-btn:not(.st-button_style_none):focus, button.course-card__menu-toggle-btn:not(.st-button_style_none):hover, button.course-card__menu-toggle-btn:not(.st-button_style_none)[data-active] { background-color: #eaeaea; color: #222 } button.course-card__menu-toggle-btn:not(.st-button_style_none) .svg-icon { width: 1em; height: 1em } button.course-card__menu-toggle-btn:not(.st-button_style_none) .svg-icon svg { width: 100%; height: 100% } .course-cards { list-style: none; display: flex; flex-wrap: wrap; margin: -12px } .course-cards__item { margin: 12px } .course-cards__dummy-card a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; display: flex; align-items: center; justify-content: center; text-decoration: none; background-image: url(/static/frontend/course-card-dummy-background.svg); background-repeat: no-repeat; background-size: 136px 71px; background-position: 166px 24px } .course-cards__dummy-card .svg-icon { display: flex; margin-left: 6px; font-size: 11px } .course-cards__dummy-card-text { display: flex; align-items: center; padding: 9px 16px; font-size: 16px; line-height: 1.13; border-radius: 24px; color: #fff; background-color: #3e50cb } .user-card { display: grid; grid-template-areas: "cover title rating" "space title rating" "widgets widgets widgets"; grid-template-columns: 76px auto -webkit-min-content; grid-template-columns: 76px auto min-content; grid-template-rows: 60px auto 44px; height: 178px; width: 324px; padding: 12px 14px 16px 16px; border-radius: 16px } .user-card[data-view=small] { grid-template-areas: "cover title rating" "cover widgets widgets"; grid-template-rows: auto minmax(14px, auto); height: 92px; width: 324px; padding: 16px 16px 24px } .user-card[data-view=small] .user-card__widget { color: #999 } .user-card[data-view=small] .user-card__widget[data-type=issued_certificates] { display: none } .user-card[data-view=small] .user-card__title { margin: 4px 0; height: 32px; font-size: 14px; line-height: 1.14; letter-spacing: .15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .user-card[data-view=small] .user-card__rating { margin: 4px 0 } .user-card__title { grid-area: title; justify-self: flex-start; margin: 6px 0 8px; height: 62px; color: #000; font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden } .user-card__title:focus, .user-card__title:hover { color: inherit } .user-card__cover { grid-area: cover; width: 60px; height: 60px; margin-right: 16px; border-radius: 4px } .user-card__widgets { grid-area: widgets; display: flex; flex-wrap: wrap; margin: -3px -5px 11px; white-space: nowrap; font-size: 12px; line-height: 1; letter-spacing: .4px } .user-card__widget { display: flex; align-items: center; margin: 3px 5px } .user-card__widget .svg-icon, .user-card__widget i { display: flex; margin-right: 4px; width: 12px; height: 12px; color: #999 } .user-card__widget .svg-icon svg, .user-card__widget i svg { width: 100%; height: 100% } .user-card__rating { grid-area: rating; justify-self: flex-end; align-self: baseline; margin: 8px 0 } .catalog-course-cards[data-list-type=default] .catalog-course-cards__cards { grid-template-columns: repeat(auto-fill, 324px) } .catalog-course-cards[data-list-type=fragment] .catalog-course-cards__cards { grid-template-columns: repeat(auto-fill, 324px); grid-template-rows: repeat(var(--catalog-course-cards-rows, 2), auto); grid-auto-flow: column } .catalog-course-cards[data-list-type=fragment] .course-card { width: 324px } .catalog-course-cards[data-list-type=search-results] .catalog-course-cards__cards { grid-template-columns: 1fr; grid-gap: 0 } .catalog-course-cards[data-list-type=search-results] .catalog-course-cards__cards>.course-cards__item:first-child>.course-card { padding-top: 0 } .catalog-course-cards[data-list-type=recently-viewed] .catalog-course-cards__cards { grid-auto-columns: 160px; grid-auto-flow: column } .catalog-course-cards__cards { display: grid; grid-gap: 24px; margin: 0 } .catalog-course-cards__cards .course-cards__item { margin: 0 } .catalog-course-cards__cards .course-card { width: auto } .catalog-course-cards__hor-scroller { margin-top: var(--catalog-hor-padding); margin-bottom: var(--catalog-hor-padding) } .catalog-course-cards__hor-scroller .horizontal-scroller__content { padding: var(--catalog-hor-padding); margin: calc(var(--catalog-hor-padding) * -1) } .catalog-course-cards__hor-scroller .horizontal-scroller__content .course-cards__item { scroll-margin: var(--catalog-hor-padding) } .catalog-course-cards__hor-scroller .horizontal-scroller__content .course-cards__item:last-child { position: relative } .catalog-course-cards__hor-scroller .horizontal-scroller__content .course-cards__item:last-child::after { content: ""; display: block; position: absolute; right: calc(var(--catalog-hor-padding) * -1); width: var(--catalog-hor-padding); height: 1px } .learn-course-tile__course-author-link:not(:last-child)::after, .select-box-option__slot-item+.select-box-option__slot-item::before { content: "," } .catalog-course-cards__hor-scrollable { -ms-scroll-snap-type: both proximity; scroll-snap-type: both proximity } .catalog-course-cards__hor-scrollable .course-cards__item { scroll-snap-align: start; scroll-snap-stop: normal } @media (max-width:768px) { .catalog-course-cards[data-list-type=default] .catalog-course-cards__cards { grid-template-columns: repeat(auto-fit, minmax(324px, 1fr)) } .catalog-course-cards__cards { grid-gap: 16px } } @media (max-width:365px) { .catalog-course-cards__cards { grid-gap: 16px 12px } .catalog-course-cards[data-list-type=recently-viewed] .catalog-course-cards__cards { grid-gap: 8px } } .select-box { display: inline-block; vertical-align: top } .select-box[data-auto-width] .drop-down__body-wrapper[hidden] { display: block !important; visibility: collapse !important } .select-box[data-auto-width] .drop-down__body-wrapper[hidden]>.drop-down__animation-layer { -webkit-animation: none !important; animation: none !important } .select-box[data-auto-width] .drop-down__body { width: 100% } .select-box[data-auto-width] .select-box-item { overflow-wrap: break-word } .select-box[data-auto-width] .select-box-item>button { white-space: normal } .select-box button.select-box__toggle-btn, .select-box__autowidth-measurer { display: block; width: 100%; padding: 7px 37px 7px 11px; background-image: url("data:image/svg+xml;utf8,"); background-color: #fff; background-size: 10px; background-position: calc(100% - 12px) 50%; background-repeat: no-repeat; color: #222; border: 1px solid #ccc; border-radius: 4px; line-height: 16px; font-size: 14px; text-align: left; outline: 0; transition: none; --focus-outline-color: rgba(100, 200, 255, 0.3) } .select-box button.select-box__toggle-btn:focus, .select-box button.select-box__toggle-btn:hover, .select-box button.select-box__toggle-btn[data-active], .select-box__autowidth-measurer:focus, .select-box__autowidth-measurer:hover, .select-box__autowidth-measurer[data-active] { border-color: #999; background-image: url("data:image/svg+xml;utf8,") } .select-box button.select-box__toggle-btn[disabled], .select-box__autowidth-measurer[disabled] { background-color: #eee; color: #a5a5a5 } .select-box[data-theme=modern] .select-box__autowidth-measurer, .select-box[data-theme=modern] button.select-box__toggle-btn { border-radius: 0; font-weight: 500; line-height: 1.14; letter-spacing: .15px; background-image: url("data:image/svg+xml;utf8,"); background-size: 20px; background-position: calc(100% - 6px) 50% } .select-box[data-theme=primary-outlined] .select-box__autowidth-measurer, .select-box[data-theme=primary-outlined] button.select-box__toggle-btn { color: #288b28; border-color: #54ad54; background-image: url("data:image/svg+xml;utf8,") } .select-box[data-theme=primary-outlined] .select-box__autowidth-measurer:focus, .select-box[data-theme=primary-outlined] .select-box__autowidth-measurer:hover, .select-box[data-theme=primary-outlined] .select-box__autowidth-measurer[data-active], .select-box[data-theme=primary-outlined] button.select-box__toggle-btn:focus, .select-box[data-theme=primary-outlined] button.select-box__toggle-btn:hover, .select-box[data-theme=primary-outlined] button.select-box__toggle-btn[data-active] { border-color: #288b28 } .select-box[data-theme=minimal] .select-box__autowidth-measurer, .select-box[data-theme=minimal] button.select-box__toggle-btn { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; background-image: url("data:image/svg+xml;utf8,"); background-color: transparent; border: none; padding: 8px 32px 8px 12px; transition: all .2s } .select-box[data-theme=minimal] .select-box__autowidth-measurer:focus, .select-box[data-theme=minimal] .select-box__autowidth-measurer:hover, .select-box[data-theme=minimal] .select-box__autowidth-measurer[data-active], .select-box[data-theme=minimal] button.select-box__toggle-btn:focus, .select-box[data-theme=minimal] button.select-box__toggle-btn:hover, .select-box[data-theme=minimal] button.select-box__toggle-btn[data-active] { background-color: #fff; color: #222 } .select-box[data-theme=flat] .select-box__autowidth-measurer, .select-box[data-theme=flat] button.select-box__toggle-btn { font-weight: 500; line-height: 1.14; letter-spacing: .15px; background-image: none; background-color: transparent; border: none; color: inherit; padding: 7px 11px; transition: all .2s } .select-box[data-theme=flat] .select-box__autowidth-measurer:focus, .select-box[data-theme=flat] .select-box__autowidth-measurer:hover, .select-box[data-theme=flat] .select-box__autowidth-measurer[data-active], .select-box[data-theme=flat] button.select-box__toggle-btn:focus, .select-box[data-theme=flat] button.select-box__toggle-btn:hover, .select-box[data-theme=flat] button.select-box__toggle-btn[data-active] { background-color: #fff; color: #222 } .select-box__dropdown { display: block } .select-box__dropdown .drop-down__body[data-theme=select-box] { --menu-offset-y: 0; padding: 0; color: #222; background: 0 0; border: none; border-radius: 0; filter: none } .select-box-option__slot-item { pointer-events: none } .select-box-option__content[data-appearance=placeholder] { opacity: .38 } .select-box__autowidth-measurer { visibility: collapse !important; overflow: hidden !important; height: 0 !important; pointer-events: none !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top: none !important; border-bottom: none !important } .select-box__content { max-height: var(--select-box-menu-max-height); max-width: var(--select-box-menu-max-width); overflow-y: auto } .date-picker { display: inline-block; position: relative } .date-picker:hover .date-picker__clear, .date-picker>.date-picker__input:focus+.date-picker__clear, .date-picker[data-has-icon] .date-picker__clear, .date-picker[data-open] .date-picker__clear { visibility: visible } .date-picker[data-has-icon] .date-picker__clear .date-picker__clear-icon { display: none } .date-picker[data-has-icon] .date-picker__clear .date-picker__calendar-icon, .date-picker[data-has-icon]:hover .date-picker__clear .date-picker__clear-icon, .date-picker[data-has-icon]>.date-picker__input:focus+.date-picker__clear .date-picker__clear-icon, .date-picker[data-has-icon][data-open] .date-picker__clear .date-picker__clear-icon { display: flex } .date-picker[data-has-icon]:hover .date-picker__clear .date-picker__calendar-icon, .date-picker[data-has-icon]>.date-picker__input:focus+.date-picker__clear .date-picker__calendar-icon, .date-picker[data-has-icon][data-open] .date-picker__clear .date-picker__calendar-icon, button:not(.st-button_style_none).date-picker__clear[hidden] { display: none } .date-picker__input { margin: 0 !important; padding-right: 32px !important; border-color: var(--validation-border-color, #ccc); transition: border-color .3s } button:not(.st-button_style_none).date-picker__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); visibility: hidden; padding: 4px; font-size: 13px; background: 0 0; border: none; color: #777 } button:not(.st-button_style_none).date-picker__clear:focus, button:not(.st-button_style_none).date-picker__clear:hover { color: #666 } .toast-panel, button:not(.st-button_style_none).date-picker__clear .svg-icon { display: flex } button:not(.st-button_style_none).date-picker__clear .date-picker__calendar-icon { font-size: 15px } .flatpickr-calendar.open, .flatpickr-calendar.static.open { z-index: var(--z-datepicker-calendar) } .flatpickr-calendar.static.arrowBottom { bottom: calc(100% + 2px); top: auto } .flatpickr-calendar.arrowTop { margin-top: 6px } .flatpickr-calendar.arrowBottom { margin-bottom: 6px } .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 25px; padding-right: 13px } .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background-image: url("data:image/svg+xml;utf8,"); background-size: 8px 12px; background-position: calc(100% - 2px) 9px; background-repeat: no-repeat } .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background-color: rgba(0, 0, 0, .05) } .flatpickr-calendar .flatpickr-current-month input.cur-year { height: 25px } .flatpickr-calendar .flatpickr-months { padding-bottom: 3px } .flatpickr-calendar .flatpickr-time input { margin: 0; padding: 0; width: 100%; height: inherit; line-height: inherit; border: none; border-radius: 0; text-align: center } .toast-panel { align-items: center; padding: 12px 16px; min-height: 48px; background-color: #f3f4f6; border-radius: 4px } .toast-panel[data-theme=info], .toast-panel[data-theme=success] { background-color: #e9f9e9 } .toast-panel[hidden] { display: none } .toast-panel[data-theme=success] .toast-panel__text { color: #246024; font-weight: 500 } .toast-panel[data-theme=info-accent] { background-color: rgba(156, 166, 230, .12) } .toast-panel[data-theme=info-normal], .toast-panel[data-theme=info-secondary] { background-color: rgba(255, 206, 110, .12) } .toast-panel[data-theme=info-accent] .toast-panel__icon { color: #3e50cb } .toast-panel[data-theme=info-normal] .toast-panel__icon { color: #222 } .toast-panel[data-theme=info-secondary] .toast-panel__icon { color: #222 } .toast-panel[data-theme=danger-transparent] .toast-panel__icon, .toast-panel[data-theme=danger] .toast-panel__icon { color: #d41f1f } .toast-panel[data-theme=danger] { background-color: #feebe8 } .toast-panel[data-theme=danger-transparent] { background-color: transparent } .toast-panel[data-theme=empty] { padding: 10px 16px; min-height: auto } .toast-panel[data-theme=empty-accent] { padding: 10px 16px; min-height: auto; background-color: #E9EBFA } .toast-panel[data-appearance=accent] .toast-panel__text { font-size: 16px; font-weight: 500; line-height: 18px; letter-spacing: .15px } .toast-panel[data-appearance=justified] { position: relative; flex-direction: column } .toast-panel[data-appearance=justified] .toast-panel__icon { margin: 0 0 10px } .smart-hints, .toast-panel[data-appearance=justified] .button:not(.st-button_style_none).toast-panel__button, .toast-panel[data-appearance=justified] button:not(.st-button_style_none).toast-panel__button { margin: 10px 0 0 } .toast-panel[data-appearance=justified] button:not(.st-button_style_none).toast-panel__close { position: absolute; top: 8px; right: 8px; margin: 0 } @media (max-width:768px) { .toast-panel[data-mobile-appearance=justified] { position: relative; flex-direction: column } .toast-panel[data-mobile-appearance=justified] .toast-panel__icon { margin: 0 0 10px } .toast-panel[data-mobile-appearance=justified] .button:not(.st-button_style_none).toast-panel__button, .toast-panel[data-mobile-appearance=justified] button:not(.st-button_style_none).toast-panel__button { margin: 10px 0 0 } .toast-panel[data-mobile-appearance=justified] button:not(.st-button_style_none).toast-panel__close { position: absolute; top: 8px; right: 8px; margin: 0 } } .toast-panel__icon { flex-shrink: 0; margin-right: 14px; width: 1em; height: 1em; font-size: 20px } .toast-panel__icon svg { width: 1em; height: 1em; vertical-align: top } .toast-panel__text { flex: 1; font-size: 14px; line-height: 1.43; letter-spacing: .25px } .button:not(.st-button_style_none).toast-panel__button, button:not(.st-button_style_none).toast-panel__button { flex-shrink: 0; padding: 9px 24px; margin-left: 20px } .button:not(.st-button_style_none).toast-panel__button.st-size-small, button:not(.st-button_style_none).toast-panel__button.st-size-small { padding: 6px 15px; font-size: 12px; line-height: 14px; letter-spacing: .4px } button:not(.st-button_style_none).toast-panel__close { align-self: baseline; width: 20px; height: 20px; padding: 0; margin: 0 -4px 0 20px; background: url(/static/frontend/common_icons/close.svg) center no-repeat; background-size: 16px; border: none; opacity: .3 } button:not(.st-button_style_none).toast-panel__close:focus, button:not(.st-button_style_none).toast-panel__close:hover { opacity: 1 } .with-autocomplete { display: inline-block } .with-autocomplete__drop-down { display: block } .with-autocomplete__drop-down .drop-down__body[data-theme=autocomplete] { min-width: 100%; max-width: 100% } .with-autocomplete__drop-down .drop-down__body[data-theme=autocomplete] .menu { padding: 4px 0; max-height: 50vh; overflow-y: auto; --menu-item-padding-v: 6px; --menu-item-padding-h: 14px; --menu-item-color: #5e5e5e } .with-autocomplete__drop-down .drop-down__body[data-theme=autocomplete] .menu-item>button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .with-autocomplete__drop-down .drop-down__body[data-theme=autocomplete] mark { padding: 1px 0; background: #E9EBFA; color: #222; font-weight: 500; border-radius: 2px } .with-autocomplete__content>input:first-child:last-child { display: block; width: 100%; max-width: 100%; margin: 0 } .search-form { display: inline-block } .applied-filters, .applied-filters-badge, .applied-filters-badge__btn .svg-icon, .applied-filters-badge__btn svg, .search-form__form, .tab, button.st-button_style_none.search-form__reset .svg-icon { display: flex } .search-form__form { margin: 0 } .search-form__input-wrapper { flex: 1; display: inline-block; position: relative; white-space: nowrap; margin-right: 8px } .search-form__autocomplete { display: block } .search-form__autocomplete .menu-item>button { padding-left: 32px } input.search-form__input[type=search], input.search-form__input[type=text] { margin: 0 !important; padding: 6px 28px 6px 32px !important; width: 100% !important; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; height: 32px; background-image: url(/static/frontend/common_icons/search-grey.svg); background-repeat: no-repeat; background-position: 10px center; background-size: 14px 14px } .tab, .tab__item { margin: 0 } button.st-button_style_none.search-form__reset { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 6px; color: #b7b7b7; font-size: 12px } button.st-button_style_none.search-form__reset:focus, button.st-button_style_none.search-form__reset:hover { color: #999 } button.st-button_style_none.search-form__reset svg { width: 1em; height: 1em } button:not(.st-button_style_none).search-form__submit { padding: 8px 16px; border-radius: 4px; font-size: 14px } .applied-filters { flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 12px } .applied-filters__btn-clear:not(.st-button_style_none).btn-link { padding: 6px 16px; font-size: 14px } @media (max-width:1024px) { .applied-filters { gap: 8px } .applied-filters__btn-clear:not(.st-button_style_none).btn-link { padding: 4px 10px; font-size: 12px } } .applied-filters-badge { padding: 6px 12px 6px 16px; align-items: center; gap: 6px; border-radius: 4px; border: 1px solid var(--theme-color-bg-level-02); background-color: var(--theme-color-bg-level-01); color: var(--theme-color-fg-additional); font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: .25px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all .2s ease-out } .applied-filters-badge:hover { background-color: var(--theme-color-bg-level-02); color: var(--theme-color-fg-primary); cursor: default } @media (max-width:1024px) { .applied-filters-badge { padding: 4px 8px 4px 10px; font-size: 12px; line-height: 1.17; letter-spacing: .1px } } .applied-filters-badge__btn.st-button_style_none { color: var(--theme-color-fg-primary); font-size: 10px; padding: 3px; transition: all .1s ease-out } .applied-filters-badge__btn:hover { color: var(--theme-color-base-danger-2) } .tab { position: relative; align-items: center; flex-wrap: wrap; list-style: none; color: #222; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: normal } .tab.disabled .tab__item:not(.active):not([data-active]), .tab[data-disabled] .tab__item:not(.active):not([data-active]), .tab__item.disabled, .tab__item[data-disabled] { color: #bbb; cursor: not-allowed } .tab--small, .tab--small .tab__item-counter::before { font-size: 12px } .tab.disabled .tab__item:not(.active):not([data-active]) a, .tab.disabled .tab__item:not(.active):not([data-active]) button, .tab[data-disabled] .tab__item:not(.active):not([data-active]) a, .tab[data-disabled] .tab__item:not(.active):not([data-active]) button { pointer-events: none } .tab--border { background-image: linear-gradient(0deg, #e6e9ed, #e6e9ed); background-size: 100% var(--tab-border-width); background-repeat: no-repeat; background-position: bottom } .tab--nowrap-scroll { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; --focus-outline-box-shadow-params: inset 0 0 0 4px } .tab--small { --tab-border-width: 2px; --tab-item-border-width: 3px; --tab-item-padding: 6px 2px; --tab-item-gap: 20px; text-transform: uppercase; font-weight: 500; line-height: 18px; letter-spacing: 1px } @media (max-width:768px) { .tab--with-mobile-view { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; --focus-outline-box-shadow-params: inset 0 0 0 4px; --tab-border-width: 2px; --tab-item-border-width: 3px; --tab-item-padding: 6px 2px; --tab-item-gap: 20px; text-transform: uppercase; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 1px } .tab--with-mobile-view .tab__item-counter::before { font-size: 12px } } .tab__item.disabled a, .tab__item.disabled button, .tab__item[data-disabled] a, .tab__item[data-disabled] button { pointer-events: none } .tab__item a, .tab__item button { display: block; position: relative; margin: 0 var(--tab-item-gap) 0 0; padding: var(--tab-item-padding); border: 0; border-radius: 2px; background-color: transparent; text-decoration: none; cursor: pointer; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit } .tab__item a:focus, .tab__item a:hover, .tab__item button:focus, .tab__item button:hover { color: #54ad54 } .tab__item a:focus, .tab__item button:focus { outline: 0 } .tab__item a.disabled, .tab__item a[aria-disabled=true], .tab__item a[disabled], .tab__item button.disabled, .tab__item button[aria-disabled=true], .tab__item button[disabled] { color: #bbb; cursor: not-allowed } .tab__item a.active:not(.ember-transitioning-out), .tab__item a.ember-transitioning-in, .tab__item a[data-active], .tab__item button.active, .tab__item button[data-active], .tab__item.active a, .tab__item.active button, .tab__item[data-active] a, .tab__item[data-active] button { color: #288b28; font-weight: 500; cursor: default } .tab__item a.active:not(.ember-transitioning-out)::before, .tab__item a.ember-transitioning-in::before, .tab__item a[data-active]::before, .tab__item button.active::before, .tab__item button[data-active]::before, .tab__item.active a::before, .tab__item.active button::before, .tab__item[data-active] a::before, .tab__item[data-active] button::before { content: ""; height: var(--tab-item-border-width); background: #54ad54; border-radius: 2px; position: absolute; z-index: 12; right: 1.3rem; left: 1.3rem; bottom: 0; -webkit-animation: tab-animation var(--no-initial-animate-duration, .2s) ease-out 1 forwards; animation: tab-animation var(--no-initial-animate-duration, .2s) ease-out 1 forwards } @-webkit-keyframes tab-animation { to { right: 0; left: 0 } } @keyframes tab-animation { to { right: 0; left: 0 } } .tab__item a.active:not(.ember-transitioning-out) .tab__item-counter::before, .tab__item a.ember-transitioning-in .tab__item-counter::before, .tab__item a[data-active] .tab__item-counter::before, .tab__item button.active .tab__item-counter::before, .tab__item button[data-active] .tab__item-counter::before, .tab__item.active a .tab__item-counter::before, .tab__item.active button .tab__item-counter::before, .tab__item[data-active] a .tab__item-counter::before, .tab__item[data-active] button .tab__item-counter::before { color: #288b28 } .tab__item:first-child a, .tab__item:first-child button { padding-left: 0 } .tab__item-counter::before { font-size: 14px; font-weight: 400; color: #999 } .tab__item-counter[data-value] { margin-right: 6px } .tab__item-counter[data-value]::before { content: attr(data-value) } .tab__item-counter[data-value="0"]:not([data-value-display-zero]), .tab__item-counter[data-value=""] { display: none } .tab__item--action { flex: 1 0 auto; text-align: right } .tab__item button:not(.st-button_style_none) { background-color: transparent } @media screen and (max-width:768px) { .tab__item--action { flex-basis: 100%; text-align: inherit; margin-top: 1em } } .catalog-block { --catalog-block-offset: 80px; margin: 0 } .catalog-block-full-course-lists__tabpanel-title, .catalog-block__title { display: flex; align-items: baseline; margin: var(--catalog-block-offset) 0 0; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; font-size: 36px; font-weight: 600; line-height: normal; letter-spacing: .7px } .catalog-block__title-arrow-icon { display: inline-flex; margin-left: 10px; font-size: 20px } .catalog-block__title-arrow-icon svg { transform: rotate(90deg) } .catalog-block__description { margin: 16px 0 0; font-size: 16px; font-style: normal; font-weight: 400; line-height: 23px; letter-spacing: .3px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden } .catalog-block__description 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) } .catalog-block__content { margin: 24px 0 0 } @media (max-width:768px) { .catalog-block { --catalog-block-offset: 48px } .catalog-block-full-course-lists__tabpanel-title, .catalog-block__title { font-size: 24px; font-weight: 500; letter-spacing: .45px } } .catalog-block[data-kind=full_course_lists]>.catalog-block__content { margin-top: 16px } .catalog-block-full-course-lists__tablist { --tab-item-border-width: 4px; margin: 0 0 26px; font-size: 18px; letter-spacing: .17px } .catalog-block-full-course-lists__tabpanel[data-hidden] { display: none } .catalog-block-full-course-lists__tabpanel-title { display: none; margin-bottom: 24px } @media (max-width:768px) { .catalog-block-full-course-lists__tablist, .catalog-block[data-kind=full_course_lists]>.catalog-block-full-course-lists__tabpanel-title, .catalog-block[data-kind=full_course_lists]>.catalog-block__title { display: none } .catalog-block[data-kind=full_course_lists]>.catalog-block__content { margin-top: 0 } .catalog-block-full-course-lists__tabpanel-title, .catalog-block-full-course-lists__tabpanel[data-hidden] { display: block } .catalog-block-full-course-lists__tabpanel+.catalog-block-full-course-lists__tabpanel { margin-top: 48px } } .catalog-block[data-kind=simple_course_lists][data-appearance=simple_course_lists_tags]+.catalog-block { --catalog-block-offset: 35px } .catalog-block[data-kind=simple_course_lists][data-appearance=simple_course_lists_tags] .catalog-block-full-course-lists__tabpanel-title, .catalog-block[data-kind=simple_course_lists][data-appearance=simple_course_lists_tags] .catalog-block__title { display: none } .catalog-block[data-kind=simple_course_lists][data-appearance=simple_course_lists_tags] .course-list-card { --focus-outline-box-shadow-params: inset 0 0 0 4px } .catalog-block[data-kind=simple_course_lists][data-appearance=simple_course_lists_tags] .horizontal-scroller__scroll-btn { color: #6c7bdf } .catalog-block-simple-course-lists__hor-scrollable { -ms-scroll-snap-type: both proximity; scroll-snap-type: both proximity } .catalog-block-simple-course-lists__hor-scrollable .catalog-block-simple-course-lists__tags-title, .catalog-block-simple-course-lists__hor-scrollable .course-list-card { scroll-snap-align: start; scroll-snap-stop: normal } .catalog-block-simple-course-lists__tags-title { margin: 0 28px 0 0; font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: .17px; color: #3e50cb } @media (max-width:768px) { .catalog-block[data-kind=simple_course_lists][data-appearance=simple_course_lists_tags] { visibility: collapse; height: 0; margin-top: -35px } .catalog-block-simple-course-lists .course-list-cards:not([data-list-type]) { display: grid; grid-template-columns: repeat(2, minmax(158px, 1fr)); grid-auto-flow: row; grid-gap: 12px } .catalog-block-simple-course-lists .course-list-cards:not([data-list-type])>.course-list-card { margin: 0; width: auto } .catalog-block-simple-course-lists .course-list-cards:not([data-list-type])>.course-list-card:nth-child(3n) { grid-column-start: 1; grid-column-end: 3 } .catalog-block-simple-course-lists .catalog-block-simple-course-lists__tags-title { display: none } .catalog-block-simple-course-lists .course-list-cards[data-list-type=tags] { flex-wrap: wrap; margin: -6px } .catalog-block-simple-course-lists .course-list-cards[data-list-type=tags]>.course-list-card { flex: 1; margin: 6px } .catalog-block-simple-course-lists__hor-scrollable { overflow: visible } } .catalog-block-authors__list, .catalog-block-authors__simple-list { display: grid; grid-template-columns: repeat(auto-fill, 324px); grid-gap: 24px } .catalog-block-authors__list { grid-template-rows: repeat(var(--catalog-authors-cards-rows, 2), auto); grid-auto-flow: column } .catalog-block-authors__hor-scroller { margin-top: var(--catalog-hor-padding); margin-bottom: var(--catalog-hor-padding) } .catalog-block-authors__hor-scroller .horizontal-scroller__content { padding: var(--catalog-hor-padding); margin: calc(var(--catalog-hor-padding) * -1) } .catalog-block-authors__hor-scroller .horizontal-scroller__content .user-card { scroll-margin: var(--catalog-hor-padding) } .catalog-block-authors__hor-scroller .horizontal-scroller__content .user-card:last-child { position: relative } .catalog-block-authors__hor-scroller .horizontal-scroller__content .user-card:last-child::after { content: ""; display: block; position: absolute; right: calc(var(--catalog-hor-padding) * -1); width: var(--catalog-hor-padding); height: 1px } .catalog-block-authors__hor-scrollable { -ms-scroll-snap-type: both proximity; scroll-snap-type: both proximity } .catalog-block-authors__hor-scrollable .user-card { scroll-snap-align: start; scroll-snap-stop: normal } .catalog-block-authors__dummy-card { display: block } .catalog-block-authors__dummy-card::before { background: linear-gradient(to right, #6c7bdf, #56a4ff); box-shadow: none } .catalog-block-authors__dummy-card a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 10px 81px 10px 85px; color: #fff; font-size: 18px; font-weight: 600; line-height: normal; letter-spacing: .19px; text-decoration: none; border-radius: inherit; background-image: url(/static/frontend/catalog-new-course-background.svg); background-repeat: no-repeat; background-size: 42px; background-position: 22px 22px } .catalog-block-authors__dummy-card .svg-icon { display: flex; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 16px } .catalog-block-specializations__hor-scroller .horizontal-scroller__content .specialization-card:last-child, .catalog-block[data-appearance=specializations_stepik_academy] .catalog-block-specializations, .catalog-block[data-appearance=specializations_stepik_academy] .catalog-block-specializations>* { position: relative } @media (max-width:768px) { .catalog-block-authors__simple-list { grid-gap: 16px; grid-template-columns: repeat(auto-fill, minmax(324px, 1fr)) } .catalog-block-authors__simple-list .user-card { width: auto } .catalog-block-authors__list { grid-gap: 16px } } @media (max-width:365px) { .catalog-block-authors__list { grid-gap: 16px 12px } } .catalog-block-organizations__list { display: grid; grid-template-columns: repeat(6, fit-content(112px)); grid-gap: 16px 36px; justify-content: space-between } .catalog-block-organizations__list a:focus, .catalog-block-organizations__list a:hover { --filter: grayscale(0); --opacity: 1 } .catalog-block-organizations__list img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; filter: var(--filter, grayscale(100%)); opacity: var(--opacity, var(--custom-grey-opacity, 1)) } @media (max-width:768px) { .catalog-block[data-kind=organizations] .catalog-block-full-course-lists__tabpanel-title, .catalog-block[data-kind=organizations] .catalog-block__title { display: block } .catalog-block-organizations__list { grid-template-columns: repeat(3, minmax(60px, 112px)); grid-gap: 16px } .catalog-block-organizations__list img { --filter: none; --opacity: 1 } } .catalog-block[data-kind=specializations]>.catalog-block-full-course-lists__tabpanel-title, .catalog-block[data-kind=specializations]>.catalog-block__title { visibility: collapse; height: 0 } .catalog-block[data-kind=specializations]>.catalog-block__content { margin-top: 0 } .catalog-block[data-appearance=specializations_stepik_academy] .catalog-block-specializations::before { content: url(/static/frontend/catalog-academy-bg.svg); position: absolute; top: 23px; left: -630px; max-width: 0; overflow: visible; pointer-events: none } .catalog-block-specializations__academy-logo { margin: 0 0 58px; width: 200px; height: 58px } .catalog-block-specializations__content { display: flex; align-items: stretch } .catalog-block-specializations__about-card { flex-shrink: 0; display: flex; flex-direction: column; width: 324px; margin: 0 24px 0 0; border-radius: 16px; background-color: #fff; box-shadow: 1px 2px 12px 0 rgba(94, 94, 94, .12) } .catalog-block-specializations__about-card-title { display: flex; align-items: center; height: 98px; padding: 24px; border-top-left-radius: inherit; border-top-right-radius: inherit; font-size: 20px; font-weight: 600; line-height: 1.1; letter-spacing: .15px; color: #fff; background-color: #000; background-image: url(/static/frontend/catalog-academy-card-img.svg); background-repeat: no-repeat; background-position: calc(100% - 2px) 50%; background-size: 106px 100px } .catalog-block-specializations__about-card-body { padding: 18px 24px; font-size: 18px; line-height: 1.3; letter-spacing: .32px } .catalog-block-specializations__about-card-footer { margin-top: auto; padding: 0 24px 24px; line-height: 1.13 } .catalog-block-specializations__about-card-footer>a { display: flex; align-items: center; font-weight: 500; letter-spacing: .15px; --link-line: none } .catalog-block-specializations__about-card-footer>a .svg-icon { display: inline-flex; margin-left: 8px; font-size: 15px } .catalog-block-specializations__hor-scroller { flex: 1; min-width: 0; margin: 0 } .catalog-block-specializations__hor-scroller .horizontal-scroller__content { padding: var(--catalog-hor-padding); margin: calc(var(--catalog-hor-padding) * -1) } .catalog-block-specializations__hor-scroller .horizontal-scroller__content .specialization-card { scroll-margin: var(--catalog-hor-padding) } .catalog-block-specializations__hor-scroller .horizontal-scroller__content .specialization-card:last-child::after { content: ""; display: block; position: absolute; right: calc(var(--catalog-hor-padding) * -1); width: var(--catalog-hor-padding); height: 1px } .catalog-block-specializations__hor-scrollable { align-self: stretch; -ms-scroll-snap-type: both proximity; scroll-snap-type: both proximity } .catalog-block-specializations__hor-scrollable .specialization-card { scroll-snap-align: start; scroll-snap-stop: normal } .catalog-block-specializations__list { display: grid; grid-gap: 24px; grid-template-columns: repeat(auto-fill, var(--specialization-card-default-width)); grid-template-rows: repeat(2, auto); grid-auto-flow: column } @media (max-width:768px) { .catalog-block[data-appearance=specializations_stepik_academy] .catalog-block-specializations::before { top: 18px; left: -936px } .catalog-block-specializations__academy-logo { margin-bottom: 16px; height: 46px; width: auto } .catalog-block-specializations__content { flex-direction: column } .catalog-block-specializations__about-card { width: auto; margin: 0 0 16px } .catalog-block-specializations__about-card-title { height: 80px; padding: 10px 24px; font-size: 18px; font-weight: 500; line-height: 1.11; letter-spacing: .17px } .catalog-block-specializations__about-card-body { padding: 16px 24px; font-size: 14px; line-height: 1.43; letter-spacing: .25px } .catalog-block-specializations__list { grid-gap: 12px; grid-template-rows: auto } } .catalog-block-promo-courses__content { display: flex; align-items: stretch } .catalog-block-promo-courses__about-card { flex-shrink: 0; width: 324px; margin: 0 24px 0 0; border-radius: 16px; background-color: #fff; box-shadow: 1px 2px 12px 0 rgba(94, 94, 94, .12); position: relative } .catalog-block-promo-courses__about-card>.catalog-block-promo-courses__about-card-inner { position: absolute; left: 0; right: 0; top: 0; bottom: 0 } .catalog-block-promo-courses__about-card-inner { display: flex; flex-direction: column; border-radius: inherit } .catalog-block-promo-courses__about-card-cover { border-top-left-radius: inherit; border-top-right-radius: inherit; height: 160px; -o-object-fit: cover; object-fit: cover } .catalog-block-promo-courses__about-card-body { flex: 1; padding: 24px; font-size: 18px; line-height: 23px; letter-spacing: .34px; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; overflow: auto } .catalog-block-promo-courses__about-card-body p { margin: 1em 0; font-size: inherit; line-height: inherit } .catalog-block-promo-courses__about-card-body p:first-of-type { margin-top: 0 } .catalog-block-promo-courses__about-card-body p:last-of-type { margin-bottom: 0 } .catalog-block-promo-courses__about-card-footer { margin-top: 16px; padding: 0 24px 24px; line-height: 18px } .catalog-block-promo-courses__about-card-footer>a { display: flex; align-items: center; font-weight: 500; letter-spacing: .15px; --link-line: none } .catalog-block-promo-courses__about-card-footer>a .svg-icon { display: inline-flex; margin-left: 8px; font-size: 15px } .promo-block-placement .catalog-block-promo-courses__about-card-cover { height: 120px } @media (min-width:769px) { .promo-block-placement .catalog-block-promo-courses__about-card { width: 536px } .promo-block-placement .catalog-block-promo-courses__about-card-inner { display: grid; grid-template-areas: "cover body" "cover footer"; align-items: start; grid-template-columns: -webkit-max-content auto; grid-template-columns: max-content auto; grid-template-rows: 1fr -webkit-min-content; grid-template-rows: 1fr min-content; gap: 0 } .promo-block-placement .catalog-block-promo-courses__about-card-cover { grid-area: cover; height: 100%; border-top-right-radius: 0; border-bottom-left-radius: inherit } .promo-block-placement .catalog-block-promo-courses__about-card-body { grid-area: body } .promo-block-placement .catalog-block-promo-courses__about-card-footer { grid-area: footer } } .catalog-block-promo-courses__cards { flex: 1; min-width: 0 } .catalog-block-promo-courses__cards>.catalog-course-cards__hor-scroller { margin: 0 } @media (max-width:768px) { .promo-block-placement .catalog-block-promo-courses__about-card { height: 232px } .catalog-block-promo-courses__content { flex-direction: column } .catalog-block-promo-courses__about-card-cover { height: 120px } .catalog-block-promo-courses__about-card { width: auto; max-width: 450px; margin: 0 0 16px } .catalog-block-promo-courses__about-card>.catalog-block-promo-courses__about-card-inner { position: static } .catalog-block-promo-courses__about-card-body { padding: 16px; font-size: 14px; line-height: 20px; letter-spacing: .25px } .catalog-block-promo-courses__about-card-footer { margin-top: 8px; padding: 0 16px 24px } } .catalog-block-visited-courses__empty-img { margin-top: -20px; width: 100%; height: 160px; opacity: .38 } .promo-block-placement { margin-bottom: 24px; --catalog-hor-padding: 20px } .promo-block-placement__promo-block { --horizontal-scroller-btns-offset: -24px; --horizontal-scroller-btn-icon-size: 24px; --horizontal-scroller-btn-padding: 18px } .promo-block-placement__promo-block[data-kind=promo_courses], .promo-block-placement__promo-block[data-kind=recommended_courses] { --catalog-course-cards-rows: 1 } .promo-block-placement__promo-block[data-kind=authors] { --catalog-authors-cards-rows: 1 } .promo-block-placement__promo-block[data-kind=banner] img { border-radius: 8px; overflow: hidden } .promo-block-placement__promo-block[data-kind=simple_course_lists][data-appearance=simple_course_lists_tags] { --horizontal-scroller-btns-offset: -20px; --horizontal-scroller-btn-icon-size: 20px; --horizontal-scroller-btn-padding: 10px } .promo-block-placement__promo-block+.promo-block-placement__promo-block { margin-top: 36px } .promo-block { margin: 0 } .promo-block__title { display: flex; align-items: baseline; margin: 0; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; font-size: 20px; font-weight: 500; line-height: 23.44px; letter-spacing: .15px } .header-banner__message, .promo-block__description { line-height: 20px; display: -webkit-box; font-weight: 400; overflow: hidden; -webkit-box-orient: vertical } .promo-block__description { margin: 16px 0 0; font-size: 14px; letter-spacing: .25px; -webkit-line-clamp: 6 } .promo-block__description 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) } .promo-block__content { margin: 24px 0 0 } .header-banner[data-theme=confirm] .header-banner__message button[data-fn], .header-banner[data-theme=success] .header-banner__message button[data-fn] { margin-left: 10px } @media (max-width:1024px) { .promo-block__title { font-size: 18px; font-weight: 500; line-height: 22px; letter-spacing: .17px } } .header-banner { grid-row: 1; grid-column: 1; display: flex; align-items: center; padding: 6px 10px; min-height: 40px; width: 100%; background-color: #73134a; color: #fff } .header-banner[data-theme=warning] { background-color: #FFCE6E; color: #222 } .header-banner[data-theme=warning] .header-banner__message 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) } .header-banner[data-theme=warning] button:not(.st-button_style_none).header-banner__close { color: #999 } .header-banner[data-theme=notification] { background-color: #ffebe8; color: #222 } .header-banner[data-theme=notification] .header-banner__message 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) } .header-banner[data-theme=notification] button:not(.st-button_style_none).header-banner__close { color: #999 } .header-banner[data-theme=confirm] { background-color: #FFF9EE; color: #222 } .header-banner[data-theme=confirm] .header-banner__message 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) } .header-banner[data-theme=confirm] .header-banner__message button { padding: 0; vertical-align: baseline; background: 0 0; border: none; font-size: inherit; --focus-outline-color: rgba(100, 200, 255, 0.3); --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) } .header-banner[data-theme=confirm] .header-banner__message button:focus, .header-banner[data-theme=confirm] .header-banner__message 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)) } .header-banner[data-theme=confirm] .header-banner__message 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)) } .header-banner[data-theme=confirm] .header-banner__message button:disabled, .header-banner[data-theme=confirm] .header-banner__message button[aria-disabled=true] { color: var(--link-disabled-color, var(--link-color)); cursor: not-allowed } .header-banner[data-theme=confirm] .header-banner__message button:disabled, .header-banner[data-theme=confirm] .header-banner__message button:focus, .header-banner[data-theme=confirm] .header-banner__message button:hover { background: 0 0 } .header-banner[data-theme=confirm] button:not(.st-button_style_none).header-banner__close { color: #999 } .header-banner[data-theme=success] { background: linear-gradient(136.36deg, #E7F2FF -24.63%, #CBFFD2 140.22%); color: #222 } .header-banner[data-theme=success] .header-banner__message 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) } .header-banner[data-theme=success] .header-banner__message button { padding: 0; vertical-align: baseline; background: 0 0; border: none; font-size: inherit; --focus-outline-color: rgba(100, 200, 255, 0.3); color: var(--link-color, inherit); -webkit-text-decoration-line: var(--link-line); text-decoration-line: var(--link-line); -webkit-text-decoration-color: var(--link-line-color); text-decoration-color: var(--link-line-color); text-underline-offset: var(--link-line-offset); --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) } .header-banner[data-theme=success] .header-banner__message button:focus, .header-banner[data-theme=success] .header-banner__message 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)) } .header-banner[data-theme=success] .header-banner__message 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)) } .header-banner[data-theme=success] .header-banner__message button:disabled, .header-banner[data-theme=success] .header-banner__message button[aria-disabled=true] { color: var(--link-disabled-color, var(--link-color)); cursor: not-allowed } .header-banner[data-theme=success] .header-banner__message button:disabled, .header-banner[data-theme=success] .header-banner__message button:focus, .header-banner[data-theme=success] .header-banner__message button:hover { background: 0 0 } .header-banner[data-theme=success] button:not(.st-button_style_none).header-banner__close { color: #999 } .header-banner__message { flex: 1; text-align: center; font-size: 14px; letter-spacing: .25px; -webkit-line-clamp: 4 } .header-banner__message a { --link-color: #66cc66; --link-line: underline; --link-line-color: #66cc66; --link-hover-color: #54ad54; --link-hover-line-color: #54ad54; --link-active-color: #54ad54; --link-active-line-color: #54ad54 } button:not(.st-button_style_none).header-banner__close { margin: -4px 0 -4px 10px; padding: 10px; background: 0 0; border: none; color: #fff; --focus-outline-color: rgba(100, 200, 255, 0.3) } .learn-class-tile__footer-cert .user-certificate-widget__grade, .learn-course-tile__footer-cert .user-certificate-widget__grade, .user-certificate-widget__grade { margin-left: 4px } button:not(.st-button_style_none).header-banner__close:focus>.svg-icon, button:not(.st-button_style_none).header-banner__close:hover>.svg-icon { opacity: 1 } button:not(.st-button_style_none).header-banner__close>.svg-icon { display: flex; width: 12px; height: 12px; opacity: .68 } button:not(.st-button_style_none).header-banner__close>.svg-icon svg { width: 100%; height: 100% } .user-certificate-widget { display: inline-flex; align-items: center; vertical-align: top; font-weight: 400; font-size: 12px; line-height: 14px; letter-spacing: .4px; cursor: help; --user-certificate-widget-icon-color: #999 } .user-certificate-widget:hover { --user-certificate-widget-icon-color: #222 } .user-certificate-widget[data-cert-type=regular] { --user-certificate-widget-icon-color: #54ad54 } .user-certificate-widget[data-cert-type=distinction] { --user-certificate-widget-icon-color: #FEA832 } .user-certificate-widget__icon { display: inline-flex; font-size: 13px; color: var(--user-certificate-widget-icon-color) } .user-certificate-widget__icon.diploma_icon svg { transform: translateY(.1em) } .user-certificate-widget__tooltip { min-width: 240px; max-width: 340px } .user-certificate-widget__tooltip-content { font-size: 12px; line-height: 14px; letter-spacing: .4px } .user-certificate-widget__tooltip-content p { margin: 1em 0; line-height: inherit } .user-certificate-widget__tooltip-content p:first-child { margin-top: 0 } .user-certificate-widget__tooltip-content p:last-child { margin-bottom: 0 } .user-certificate-widget__tooltip-content mark { background: 0 0; font-weight: 600; color: #6c6 } .course-pay-dolyame { display: flex; gap: 16px; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; -webkit-font-smoothing: antialiased } .course-pay-dolyame[disabled] { cursor: not-allowed } .course-pay-dolyame[disabled] .course-pay-dolyame__icon { opacity: .38 } .course-pay-dolyame[data-appearance=button] .course-pay-dolyame__icon, .course-pay-dolyame[data-appearance=small] .course-pay-dolyame__icon { order: 2 } .course-pay-dolyame[data-appearance=button], .course-pay-dolyame[data-appearance=min] { gap: 8px } .course-pay-dolyame[data-appearance=button] .course-pay-dolyame__icon, .course-pay-dolyame[data-appearance=min] .course-pay-dolyame__icon { height: 20px } .course-pay-dolyame__icon { height: 24px } .error-page__body { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1022px; margin: 5em auto 2em; padding: 0 20px } .error-page__body a { color: #6c6 } .error-page__content { max-width: 650px } .error-page__status { font-size: 100px; line-height: 1.6; letter-spacing: -1px; color: #6c6 } .error-page__title { margin: 4px 0 12px; font-size: 40px; font-weight: 600 } .error-page__message { font-size: 24px; line-height: 1.4 } .error-page__tip { margin-top: 1.6em; font-size: 18px } .error-page__img { flex-shrink: 0; width: 200px; height: 200px } @media (max-width:768px) { .error-page__body { margin-top: 2em } .error-page__status { font-size: 60px } .error-page__title { font-size: 30px } .error-page__message, .error-page__tip { font-size: 18px } .error-page__img { display: none } .catalog__block[data-kind=banner]+.catalog__block { --catalog-block-offset: 24px } } .catalog { margin: 0 auto; width: 100%; max-width: 1022px; padding: 32px 0 64px } #ex-body[data-route^="catalog.index"], body[data-route^="catalog.index"] { --catalog-hor-padding: 20px } #ex-body[data-route^="catalog.index"] .main-content, body[data-route^="catalog.index"] .main-content { padding: 0 var(--catalog-hor-padding) } .catalog__banner { border-radius: 8px !important } .catalog__block { --horizontal-scroller-btns-offset: -24px; --horizontal-scroller-btn-icon-size: 24px; --horizontal-scroller-btn-padding: 18px } .catalog__block[data-kind=simple_course_lists][data-appearance=simple_course_lists_tags] { --horizontal-scroller-btns-offset: -20px; --horizontal-scroller-btn-icon-size: 20px; --horizontal-scroller-btn-padding: 10px } .catalog__block[data-kind=organizations] .catalog-block-full-course-lists__tabpanel-title, .catalog__block[data-kind=organizations] .catalog-block__title, .catalog__recently-viewed .catalog-block-full-course-lists__tabpanel-title, .catalog__recently-viewed .catalog-block__title { font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: .2px; color: #3e50cb } .catalog__block[data-kind=organizations] .catalog-block__content, .catalog__recently-viewed .catalog-block__content { margin-top: 32px } .catalog__block[data-kind=banner] picture>img { max-height: 64px } .catalog__block[data-kind=banner][data-appearance=banner_high_height] picture>img { max-height: 128px } .catalog__block[data-kind=banner]+.catalog__block { --catalog-block-offset: 32px } .catalog__block+.catalog__block[data-kind=banner] { margin: 80px 0 } @media (max-width:768px) { .catalog__block+.catalog__block[data-kind=banner] { margin: 48px 0 } } .catalog__search-bar { margin: 0 0 32px } .catalog__search-bar+.catalog__applied-filters-bar { margin-top: -16px; margin-bottom: 32px } .catalog__search-bar+.catalog__block { --catalog-block-offset: 0 } .catalog__search-form { position: relative; display: block; padding: 14px 16px; margin: 0; border-radius: 6px; background-color: #f3f4f6 } .catalog__search-form input.search-form__input { height: 36px; font-size: 16px; letter-spacing: .3px; border-color: #eaecf0; background-color: #fff; background-size: 16px; background-position: 8px center } .catalog__search-form input.search-form__input:focus { background-color: #fff; border-color: #ccc } .catalog__search-form .search-form__input-wrapper { margin-right: 10px } .catalog__search-form .form-checkbox, .catalog__search-form .select-box { margin-right: 14px } .catalog__search-form .select-box .select-box__autowidth-measurer, .catalog__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__search-form .form-checkbox { letter-spacing: normal } .catalog__search-form button:not(.st-button_style_none).search-form__submit { padding: 9px 25px; font-size: 16px } button:not(.st-button_style_none).catalog__reset-search-mobile { display: none; position: absolute; left: 11px; top: 9px; padding: 4px; background: #fff; color: #5e5e5e; border-radius: 1px } button:not(.st-button_style_none).catalog__reset-search-mobile .svg-icon { display: flex } button:not(.st-button_style_none).catalog__reset-search-mobile:active, button:not(.st-button_style_none).catalog__reset-search-mobile:focus, button:not(.st-button_style_none).catalog__reset-search-mobile:hover { color: #222 } button:not(.st-button_style_none).catalog__reset-search-mobile[hidden] { display: none !important } button:not(.st-button_style_none).catalog__search-all-filters-mobile { 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) } button:not(.st-button_style_none).catalog__search-all-filters-mobile .svg-icon { display: flex } button:not(.st-button_style_none).catalog__search-all-filters-mobile[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 #222 } .catalog__search-all-filters-modal .modal-popup__container { min-width: 300px } .catalog__search-all-filters-modal .modal-popup__content h6 { margin: 0 0 6px; font-size: 16px; font-weight: 500 } .catalog__search-all-filters-modal .modal-popup__content section+section { margin-top: 20px } .catalog__filters-modal .modal-popup__container { padding: 16px; margin: auto auto 0; border-radius: 8px 8px 0 0 } .catalog__filters-modal .modal-popup__title { margin-left: 26px } .catalog__filters-modal .modal-popup__title h2 { font-size: 18px; font-style: normal; font-weight: 500; line-height: 22px; letter-spacing: .17px } .catalog__filters-modal .modal-popup__close:not(.st-button_style_none) { right: unset; left: 10px; top: 14px } .catalog__filters-modal .modal-popup__content { margin-top: 24px } .catalog__search-results+.catalog__search-popular-queries { --catalog-block-offset: 32px } .catalog__search-results+.catalog__search-popular-queries .catalog-block-full-course-lists__tabpanel-title, .catalog__search-results+.catalog__search-popular-queries .catalog-block__title { font-size: 24px; font-weight: 500; letter-spacing: .45px } .catalog__search-results-message { margin: 24px 0 32px; font-size: 14px; line-height: 20px; letter-spacing: .25px } .catalog__search-results-message var { font-style: normal; font-weight: 600 } .catalog__search-results-message 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) } .catalog__search-popular-queries-list { list-style: none; margin: 0; font-size: 14px; line-height: 1.29; letter-spacing: .25px } .catalog__search-popular-queries-list>li+li { margin-top: 8px } .catalog__search-popular-queries-list a { --link-line-offset: .1em } .catalog__paging { display: grid; grid-auto-flow: column; grid-auto-columns: -webkit-max-content; grid-auto-columns: max-content; grid-gap: 2px; margin: 34px 0 } .catalog__paging>a, .catalog__paging>button:not(.st-button_style_none) { height: 48px; min-width: 48px; padding: 15px 19px; background: 0 0; color: #222; border-radius: 8px; border: none; font-size: 16px; font-weight: 500; line-height: 1.13; letter-spacing: .15px; white-space: nowrap; text-decoration: none; --focus-outline-color: rgba(100, 200, 255, 0.3) } .catalog__paging>a[data-active], .catalog__paging>button:not(.st-button_style_none)[data-active] { background-color: #e7f2ff; color: #1466c6 } .catalog__paging>a:hover, .catalog__paging>button:not(.st-button_style_none):hover { color: #1466c6 } .catalog__paging>a:active, .catalog__paging>button:not(.st-button_style_none):active { color: #3e50cb } .catalog__paging>a[disabled], .catalog__paging>button:not(.st-button_style_none)[disabled] { background-color: transparent; color: #b7b7b7 } .catalog__paging>a[hidden], .catalog__paging>button:not(.st-button_style_none)[hidden] { display: none !important } .catalog__category .catalog-block__content { margin-top: 32px } @media (max-width:1100px) { .catalog__block, .catalog__block[data-kind=simple_course_lists][data-appearance=simple_course_lists_tags] { --horizontal-scroller-btns-offset: -10px } } @media (max-width:768px) { #ex-body[data-route^=catalog], body[data-route^=catalog] { --catalog-hor-padding: 16px } .catalog__search-form { margin: -32px calc(var(--catalog-hor-padding) * -1) 24px; padding: 4px 8px 6px; border-radius: 0; background-color: #222 } .catalog__search-form .search-form__input-wrapper { margin-right: 4px } .catalog__search-form input.search-form__input { font-size: 14px; border-color: transparent } .catalog__search-form .form-checkbox, .catalog__search-form .select-box, .catalog__search-form button:not(.st-button_style_none).search-form__submit { display: none } .catalog__search-form button:not(.st-button_style_none).catalog__reset-search-mobile, .catalog__search-form button:not(.st-button_style_none).catalog__search-all-filters-mobile { display: inline-flex } .catalog__block[data-kind=organizations] .catalog-block__content, .catalog__recently-viewed .catalog-block__content { margin-top: 24px } .catalog__search-results+.catalog__search-popular-queries { --catalog-block-offset: 24px } .catalog__search-popular-queries-list>li:nth-child(n+6) { display: none } } .course-promo__head { padding: 70px 20px 48px; background-color: #282b41; color: #fff } .course-promo__head[data-is-specialization] { background: linear-gradient(92.32deg, #F4F5FD 47.03%, #E9F2FF 100.95%); color: #222 } .course-promo__head, .course-promo__main { letter-spacing: .3px } .course-promo__head>.page-fragment, .course-promo__main>.page-fragment { display: flex } .course-promo__head aside, .course-promo__main aside { flex-shrink: 0; width: 308px; margin-left: 63px } .course-promo__badges { margin-bottom: 8px } .course-promo__bottom { width: 100%; padding: 20px; background-color: #fff; box-shadow: 0 -1em 2em rgba(34, 34, 34, .1); position: -webkit-sticky; position: sticky; bottom: 0; z-index: 3 } .course-promo__head-content, .course-promo__main-content { flex: 1 } .course-promo__head-aside, .course-promo__head-content { display: flex; flex-direction: column } .course-promo__main-content h2 { margin: 0 0 .5em; font-size: 28px; font-weight: 400; line-height: normal; letter-spacing: .2px } .course-promo__main-content ul { line-height: 1.38 } .course-promo__main-content .rich-text-viewer ul { list-style: none } .course-promo__main-content .rich-text-viewer ul li { position: relative; padding-left: 1.4em } .course-promo__main-content .rich-text-viewer ul li::before { content: "—"; position: absolute; margin-left: -1.4em } .course-promo__main-content li+li { margin-top: .68em } .course-promo__content-block+.course-promo__content-block { margin-top: 60px } .course-promo__header { margin: 0 0 16px; font-size: 34px; font-weight: 500; line-height: normal; color: inherit } .course-promo__summary { margin: 0 0 16px; font-size: 14px; line-height: 1.43; letter-spacing: .3px } .course-promo__review-summary { margin-top: auto; margin-bottom: -20px; padding-top: 20px } .course-promo__head-widgets { margin: auto -18px -5px; padding-top: 10px; display: flex; flex-wrap: wrap } .course-promo__head-widget { display: flex; align-items: center; max-width: 20%; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; margin: 5px 18px; font-size: 12px; line-height: 1.17; letter-spacing: .4px } .course-promo__head-widget>.svg-icon { flex-shrink: 0; display: inline-flex; margin-right: 8px; font-size: 20px } .course-promo__head-widget[data-type=difficulty] { width: -webkit-min-content; width: -moz-min-content; width: min-content } .course-promo__head-widget[data-type=difficulty] .course-difficulty-easy_icon, .course-promo__head-widget[data-type=difficulty] .course-difficulty-hard_icon, .course-promo__head-widget[data-type=difficulty] .course-difficulty-normal_icon, .course-promo__head-widget[data-type=difficulty] .specialization-difficulty-easy_icon, .course-promo__head-widget[data-type=difficulty] .specialization-difficulty-hard_icon, .course-promo__head-widget[data-type=difficulty] .specialization-difficulty-normal_icon { font-size: 16px; margin-right: 10px } .course-promo__head-widget[data-type=workload] { min-width: 135px } .course-promo__head-widget[data-type=certificate] { width: -webkit-min-content; width: -moz-min-content; width: min-content } .course-promo__head-widget[data-type=adaptive] { white-space: nowrap; max-width: none } .course-promo__head-widget[data-type=specialization] { --external-link-icon-color: #222; --external-link-icon-size: 8px } .course-promo__head-widget[data-type=specialization]::after { content: ""; display: inline-block; margin: 0 0 0 var(--external-link-icon-offset, 3px); position: relative; width: var(--external-link-icon-size, .57em); height: var(--external-link-icon-size, .64em); vertical-align: var(--external-link-valign, middle); -webkit-mask-image: url(/static/frontend/common_icons/directly.svg); mask-image: url(/static/frontend/common_icons/directly.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: var(--external-link-icon-color, #1466C6) } a.course-promo__head-widget { --link-line: none; --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 } .course-promo__main { padding: 50px 20px 100px } .course-promo__description 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-promo__author-list { display: flex; flex-wrap: wrap; margin: -5px -15px 30px } .course-promo__author { max-width: 150px; margin: 5px 15px; font-size: 12px; line-height: 1.17; letter-spacing: .4px } .course-promo__author .user-avatar__link { --link-line-offset: .1em } .course-promo__instructor { margin-top: 32px } .course-promo__course-includes-list { -moz-column-count: 2; column-count: 2 } .course-promo__certificate-section { display: grid; grid-template-columns: auto 1fr; grid-gap: 8px 32px; padding: 16px 32px 16px 16px; font-size: 16px; line-height: 23px; letter-spacing: .3px; border-radius: 4px; background-color: #f3f4f6 } .course-promo__share-btns, .course-promo__share-url { display: inline-block; vertical-align: bottom } @media (max-width:768px) { .course-promo__certificate-section { grid-template-columns: 1fr; padding: 16px; font-size: 14px; line-height: 20px; letter-spacing: .25px } } .course-promo__content-block+.course-promo__certificate-section { margin-top: 40px } .course-promo__certificate-section h3 { align-self: flex-end; margin: 0; font-size: 18px; font-weight: 500; line-height: 22px; letter-spacing: .17px } .course-promo__certificate-section img { grid-row: 1/3; height: 100%; min-height: 144px; max-height: 150px } @media (max-width:768px) { .course-promo__certificate-section h3 { font-size: 16px; line-height: 18px; letter-spacing: .15px } .course-promo__certificate-section img { grid-row: auto; height: auto; min-height: auto; width: 80px; margin-bottom: 8px } } .course-promo__course-package { margin-bottom: 30px } h2+.course-promo__parent-courses-package, p+.course-promo__course-package { margin-top: 32px } .course-promo__parent-courses-package[data-list-type=default] .catalog-course-cards__cards { grid-template-columns: repeat(auto-fill, 312px) } .course-promo__target-audience { white-space: pre-wrap } .course-promo__rating { margin-bottom: 30px; margin-left: 14px } @media (max-width:768px) { .course-promo__rating { margin-left: 0 } } .course-promo__what-you-gain { -moz-column-count: 2; column-count: 2 } .course-promo__what-you-gain li { -moz-column-break-inside: avoid; break-inside: avoid } .course-promo__share-btns { margin-right: 25px } .course-promo__share-btns .ya-share2 .ya-share2__icon { height: 48px !important; width: 48px !important } .course-promo__share-btns .ya-share2 .ya-share2__container_size_m .ya-share2__icon { background-size: 48px } .course-promo__share-btns .ya-share2 .ya-share2__item { margin: 0 } .course-promo__share-btns .ya-share2 .ya-share2__item+.ya-share2__item { margin-left: 16px } .course-promo__enrollment { margin-bottom: 24px } h2+.course-promo__enrollment { margin-top: 24px } .course-promo__enrollment_mobile { max-width: 500px; margin: 0 auto } .course-promo__deadlines { font-size: 20px; font-weight: 500; letter-spacing: .2px } .course-promo__aside-section { margin-top: 12px } .course-promo__aside-section+.course-promo__aside-section { margin-top: 4px } .course-promo__gifts-btn[data-appearance=aside] { width: 100%; border: none; padding: 15px 8px; justify-content: flex-start !important; font-weight: 500; font-size: 20px; line-height: 20px; letter-spacing: .15px; -webkit-font-smoothing: antialiased } .course-promo__gifts-btn[data-appearance=aside] .svg-icon { font-size: 22px } .course-promo__aside-sticky-wrapper { position: -webkit-sticky; position: sticky; top: calc(var(--header-height) + 50px) } .course-promo__enrollment_aside .course-promo-enrollment__price-container { order: -1 } .course-promo__enrollment_aside .course-promo-enrollment__actions>* { max-width: none } .course-promo__course-includes-aside { margin-top: 64px } .course-promo-includes { padding: 20px 16px 32px; border-radius: 4px; background-color: #f3f4f6 } .course-promo-includes h4 { margin: 0 0 24px; font-size: 16px; font-weight: 500; letter-spacing: .2px } .course-promo-includes ul { list-style: none; margin: 0 0 32px; line-height: 1.38 } .course-promo-includes li+li { margin-top: 6px } .course-promo-includes b { font-weight: 500 } .course-promo-includes .time-left [data-part] { white-space: nowrap } .course-promo-includes .time-left [data-part]>[data-value] { font-weight: 500 } .course-promo-includes .time-left [data-part]>[data-label]::before { content: " " } .course-promo-includes__update-date { margin-top: 4px; font-size: 12px; font-style: italic } .course-promo__course-cover { margin-top: 13px; margin-left: auto; height: 120px; width: 120px; border-radius: 5px; overflow: hidden; -o-object-fit: cover; object-fit: cover } .course-promo__video-player-dummy { margin-top: 13px; min-height: 130px; border-radius: 5px; overflow: hidden } .course-promo__video-player-dummy .video-player__start-sign { top: auto; bottom: 13px; font-size: 14px; font-weight: 500; letter-spacing: .2px } .course-promo__video-player-dummy .video-js .vjs-big-play-button:not(.st-button_style_none) { background-color: #fff !important } .course-promo__intro-video-modal h2 { margin: 0 0 16px; color: inherit; font-size: 24px; font-weight: 400 } .course-promo__intro-video-modal .modal-dialog-inner { background-color: #282b41 !important; color: #a9aab3 !important } .course-promo__intro-video-modal .modal-dialog-top__close { color: inherit !important } .course-promo__intro-video-modal .modal-dialog__content { padding: 16px 40px 40px !important } .course-promo-video-modal__video-wrapper { position: relative } .course-promo-video-modal__video-overlay { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .65) } .course-promo-video-modal__video-overlay-content { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 220px } button:not(.st-button_style_none).course-promo-video-modal__join-btn { width: 100% } .button.course-promo-video-modal__gift, button:not(.st-button_style_none).course-promo-video-modal__wishlist { padding: 9px 16px } button:not(.st-button_style_none).course-promo-video-modal__repeat-video { background: 0 0; border: none; color: #fff; -webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-style: solid; text-decoration-style: solid; -webkit-text-decoration-color: rgba(255, 255, 255, .5); text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 5px; text-decoration-thickness: 1px } button:not(.st-button_style_none).course-promo-video-modal__repeat-video:active, button:not(.st-button_style_none).course-promo-video-modal__repeat-video:hover { -webkit-text-decoration-color: #fff; text-decoration-color: #fff } .course-promo-toc { counter-reset: course; list-style-type: none } .course-promo-toc__course:not(:first-child) { margin-top: 28px } .course-promo-toc__course-widget { display: flex; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; align-items: baseline } .course-promo-toc__course-widget[data-foldable] { cursor: pointer } button.st-button_style_none.notification__icon-action[data-busy], button.st-button_style_none.notification__unread-marker[data-busy] { cursor: progress } .course-promo-toc__course-content { padding: 10px 0 0 32px } .course-promo-toc__course-widget-title { flex-grow: 1; font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: .15px } .course-promo-toc__course-widget-title:before { counter-increment: course; content: counter(course) ". "; margin-right: 5px } .course-promo-toc__course-toggler { display: flex; align-items: center; align-self: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #777; color: #777; transition: border-color, color .3s; flex-shrink: 0 } .course-promo-toc__course-toggler:hover { color: #222; border-color: #222 } .course-promo-toc__course-toggler svg { width: 14px; height: 14px } @media screen and (max-width:1024px) { .course-promo__head>.page-fragment, .course-promo__main>.page-fragment { flex-direction: column } .course-promo__head aside, .course-promo__main aside { margin: 26px auto 0 } .course-promo__main-aside { display: none } } .notifications>header>h1 { margin: 24px 0 20px; font-size: 24px; font-weight: 400 } .notifications__header-breadcrumbs.teachlearn__header-breadcrumbs { margin: 16px 0 } .notifications__filters { margin: 0 0 8px } .notifications__filters[data-is-desktop] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 40px; margin: 0 0 16px; padding: 4px 6px; border-radius: 4px 4px 0 0; background-color: #f6f6f6; color: #5e5e5e } button:not(.st-button_style_none).notifications__filters-open-popup { display: flex; align-items: center; padding: 6px 16px } button:not(.st-button_style_none).notifications__filters-open-popup .svg-icon { margin-right: 6px !important; font-size: 18px } button:not(.st-button_style_none).notifications__filters-open-popup[data-has-filters] .svg-icon::after { content: ""; position: absolute; right: -2px; bottom: -1px; width: 7px; height: 7px; border-radius: 50%; background-color: #6c6; border: 1px solid #fff } .notifications__filter-option-course-title[data-skeleton]::after, .profile__link-item[data-skeleton]::after { content: " " } .notifications__filters-applied-text { margin: 8px 0; font-size: 14px; line-height: 20px; letter-spacing: .25px; color: #535366; text-transform: lowercase } .comment-menu__title, .notifications__filters-applied-text::first-letter { text-transform: uppercase } .notifications__filter-caption { display: flex; align-items: center } .notifications__filter-caption>.svg-icon { flex-shrink: 0; margin-left: 6px; width: 20px; height: 20px; padding: 3px; color: #999 } .notifications__filter-caption>.svg-icon svg { width: 100%; height: 100% } .notifications__filter-caption>.spinner-small_icon { padding: 0 } .notifications__filter-option small { display: block; margin: 4px 0 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: -webkit-fill-available; max-width: -moz-available; max-width: stretch; white-space: normal; font-size: 12px; line-height: 14px; letter-spacing: .4px; color: #999 } .notifications__filter-option small:empty { display: none } .notifications__filter_type { --select-box-menu-max-width: 462px } .notifications__filter_course { margin-left: auto; width: 278px } @media screen and (max-width:1180px) { .notifications__filter_course { width: auto; margin-left: 0 } } .notifications__filter-caption-course-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .notifications__filter-option-course-title { max-width: 360px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .notifications__filters-popup-content { display: flex; flex-direction: column; gap: 16px } .notifications__filters-popup-content .notifications__filter_course { margin-left: 0; width: auto } .notifications__filters-popup-content .notifications__filter-caption .filter_icon, .notifications__filters-popup-content .notifications__filter-caption .sort-down_icon, .notifications__filters-popup-content .notifications__filter-caption .sort-up_icon { display: none } button:not(.st-button_style_none).notifications__mark-all-read { font-size: 14px; line-height: 20px; letter-spacing: .25px } button:not(.st-button_style_none).notifications__load-more-btn { margin-top: 20px; padding: 7px 16px; font-size: 14px } .notifications__loader { margin: 48px 0; min-height: 50vh } .notifications__list { margin-top: 12px } .notifications__empty-note, .notifications__no-results { margin: 16px 0; max-width: 640px; font-size: 14px; line-height: 20px; letter-spacing: .25px } .notifications__empty-note img, .notifications__no-results img { display: block; margin: 24px 0 0; width: 200px; height: 160px; opacity: .38 } .notifications__empty-note img { margin: 0 0 24px } .notifications__widget { padding: 12px 0 } .notifications__widget:not(:last-child) { border-bottom: 1px solid #E9EBFA } .notification { display: grid; grid-template-areas: "icon title aside" "icon body aside" "icon footer aside"; grid-template-columns: auto 1fr 298px } .notification[data-unread=false] .notification__unread-marker { visibility: hidden } .notification[data-unread=false] .notification__icon { opacity: .38 } .notification__icon-wrapper { grid-area: icon; align-self: start; margin-right: 10px; position: relative; display: inline-flex; align-items: center; justify-content: center } .notification__icon { width: 28px; height: 28px } button.st-button_style_none.notification__unread-marker { margin: 0 2px 0 -8px; width: 24px; height: 24px; padding: 8px; background-color: #4485ed; background-clip: content-box; border-radius: 50% } button.st-button_style_none.notification__unread-marker:hover { background-color: rgba(68, 133, 237, .6) } button.st-button_style_none.notification__unread-marker:active { background-color: rgba(68, 133, 237, .9) } .notification__title { grid-area: title; margin: 0; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: .15px } .notification__title-subject { margin-right: 4px } .notification__title-subject a { --link-color: #222; --link-line: underline; --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; --link-line-color: transparent } .notification__title-context a { --link-line: underline; --link-line-offset: .2em; --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-line-color: currentColor; --link-hover-line-color: currentColor; --link-active-line-color: currentColor } .notification__title-time { white-space: nowrap } .notification__title-action, .notification__title-context, .notification__title-time { font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: .25px; color: #999 } .notification__body { grid-area: body; margin-top: 6px; font-size: 14px; line-height: 20px; letter-spacing: .25px; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: anywhere } .notification__body blockquote { all: revert; position: relative; margin: 6px 0; padding: 8px 0 8px 14px; color: #535366 } .notification__body blockquote::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 4px; background-color: #E9EBFA } .notification__body p { all: revert; margin: 6px 0 } .notification__body blockquote:first-child, .notification__body p:first-child { margin-top: 0 } .notification__body blockquote:last-child, .notification__body p:last-child { margin-bottom: 0 } .notification__body a:not(.link-primary) { --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 } .notification__aside { grid-area: aside; margin-left: 24px } .notification__context { display: flex } .notification__context-logos { flex-shrink: 0; display: flex } .notification__context-logos+.notification__context-content { margin-left: 16px } .notification__context-logo-wrapper { border-radius: 4px } .notification__context-logo-wrapper:not(:first-child:last-child) .notification__context-logo { border: 1px solid #999 } .notification__context-logo-wrapper+.notification__context-logo-wrapper { margin-left: -24px } .notification__context-logo-wrapper:hover { z-index: 1 } .notification__context-logo { width: 36px; height: 36px; border-radius: inherit; background-color: #fff } .notification__context-content { flex: 1; display: flex; flex-direction: column; font-size: 12px; line-height: 14px; letter-spacing: .4px; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: anywhere } .nav-links-block, .notification__footer { line-height: 20px; letter-spacing: .25px; font-size: 14px } .notification__context-content a { align-self: flex-start; --link-color: #222; --link-line: underline; --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; --link-line-color: transparent } .notification__context-content a+a { margin-top: 8px } .notification__footer { grid-area: footer; display: flex; flex-wrap: wrap; align-items: center; margin-top: 14px } .notification__main-action a { --link-line-color: transparent } .notification__main-action+.notification__icon-action { margin-left: 24px } button.st-button_style_none.notification__icon-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; color: #999; --data-tooltip-side-offset: -15px; --data-tooltip-arrow-side-offset: 4px } button.st-button_style_none.notification__icon-action:hover { color: #222 } button.st-button_style_none.notification__icon-action .svg-icon { display: flex; width: 100%; height: 100% } button.st-button_style_none.notification__icon-action svg { width: 100%; height: 100% } button.st-button_style_none.notification__icon-action+.notification__icon-action { margin-left: 8px } @media (max-width:768px) { .notification { grid-template-areas: "icon title" "icon body" "icon footer"; grid-template-columns: auto 1fr } .notification__aside { display: none } button.st-button_style_none.notification__unread-marker { position: absolute; right: -9px; top: -9px } } @media (min-width:769px) { .notification__title-context { display: none } } @media screen and (min-width:1024px) { .notifications-page.flex-row, .notifications-page~.flex-row { margin: 0 } } @media screen and (min-width:1170px) { .notifications-page .col-xs-12, .notifications__event-list.col-xs-12 { padding: 0 } .notifications-page+.flex-row, .notifications-page.flex-row { margin-right: 30px; margin-left: 30px } } .certificate-page { padding: 2em 0; min-height: 560px } .certificate-page .certificate-page__course-widget { width: 100%; max-width: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .certificate-page .certificate-page__course-widget:not(:empty) { margin: 5px 0 0 } .certificate-page .certificate-page__aside-join .button:not(.st-button_style_none), .certificate-page .certificate-page__aside-join button:not(.st-button_style_none) { border-top-left-radius: 0; border-top-right-radius: 0 } .certificate-page .certificate-page__share-buttons { padding: 0 1em 0 .5em } .certificate-page .certificate-page__share-buttons .share-buttons__buttons .ya-share2__list_direction_horizontal { display: flex } .certificate-page .certificate-page__share-url { padding: 5px 15px 5px 5px; background-color: #f3f4f6; border: 1px solid #ddd; border-radius: 5px; color: #777; margin: .7em 0 } .certificate-page .certificate-page__avatar { display: flex; align-items: center; padding-bottom: 1em } .certificate-page .certificate-page__user-name { padding-left: 1em; color: #777 } .certificate-page .certificate-page__user-name .certificate-page__user-name__header { display: block } .certificate-page .certificate-page__user-name button svg { width: 1em; height: 1em } .certificate-page .certificate-page__share-block { display: flex; align-items: center; justify-content: flex-start; padding: 1em 0; margin: 1em 0; flex-wrap: wrap; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd } .certificate-page .certificate-page__result-sign { font-size: .9em; color: #777 } .certificate-page__image-wrapper { position: relative; min-height: 250px; border-radius: 6px } .certificate-page__image-wrapper[data-image-updating] { background-color: #eee } .certificate-page__image-wrapper[data-image-updating] .certificate-page__image { opacity: .3 } .certificate-page__image-wrapper[data-image-updating] .certificate-page__image-loader { display: block } .certificate-page__image { display: block; margin: 0 auto; box-shadow: 1px 1px 5px #ccc } .certificate-page__image-loader { display: none; position: absolute; top: 50%; left: 50%; width: 50px; transform: translateX(-50%) translateY(-50%) } .certificate-page__image-loader .dots-loader { height: 20px } .certificate-page__download:not(.st-button_style_none) { padding: 6px 16px; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; letter-spacing: .4px } .certificate-page__download:not(.st-button_style_none).white.has-icon .svg-icon, .certificate-page__download:not(.st-button_style_none).white.has-icon .svg-icon svg { width: 16px; height: 16px } .certificate-page__tabs { max-width: 670px; margin-bottom: 8px } @media (min-width:768px) { .certificate-page .certificate-page__share-block { margin: 0; flex-wrap: nowrap; border: 0; max-width: 670px } .certificate-page .certificate-page__image-wrapper { min-height: 463px; max-width: 670px } .certificate-page .certificate-page__image { display: block; margin: 0; max-width: 670px; width: 100% } .certificate-page .certificate-page__share-url { margin: 0 } .certificate-page .certificate-page__download { margin-left: auto } } .nav-links-block a:not([data-directly])::after, .nav-links-block a[data-directly]::after { display: inline-block; margin: 0 0 0 var(--external-link-icon-offset, 3px); background-color: var(--external-link-icon-color, #1466C6); position: relative; content: ""; vertical-align: var(--external-link-valign, middle); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100%; mask-size: 100% } .nav-links-block { min-width: 270px; border: 1px solid #f3f4f6; border-radius: 4px; padding: 16px } .nav-links-block 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) } .nav-links-block a:not([data-directly]) { white-space: nowrap } .nav-links-block a:not([data-directly])::after { top: -.125em; width: var(--external-link-icon-size, .5em); height: 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) } .nav-links-block a[data-directly]::after { width: var(--external-link-icon-size, .57em); height: var(--external-link-icon-size, .64em); -webkit-mask-image: url(/static/frontend/common_icons/directly.svg); mask-image: url(/static/frontend/common_icons/directly.svg) } .nav-links-block__title { font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: .15px; margin-bottom: 16px } .nav-links-block__list { list-style: none; margin: 0; line-height: 20px } .nav-links-block__list+.nav-links-block__list { margin-top: 24px } .nav-links-block__list li+li, div+.nav-links-block__list { margin-top: 8px } .rubricator-dropdown .drop-down__body { left: -160px } @media (max-width:1024px) { .rubricator-dropdown .drop-down__body { left: -64px } } .rubricator-dropdown__toggler { display: flex; align-items: center; transition-property: color, background-color; transition-duration: .3s } .rubricator-dropdown__toggler.st-button_style_none { background-color: var(--rubricator-toggler-bg-color, transparent); color: var(--rubricator-toggler-color, #bbb); height: 36px; padding: 8px 16px; border-radius: 4px } .rubricator-dropdown__toggler:hover { --rubricator-toggler-color: #fff } [data-expanded] .rubricator-dropdown__toggler { --rubricator-toggler-bg-color: rgba(102, 204, 102, 0.12); --rubricator-toggler-color: #fff } .rubricator-dropdown__icon { transition: transform 125ms cubic-bezier(.39, .58, .57, 1) } [data-expanded] .rubricator-dropdown__icon { transform: translateY(1px) rotate(180deg) } .rubricator-dropdown__icon svg { transition: color .3s, background-color .3s; color: var(--rubricator-toggler-color, #bbb) } .drop-down__animation-layer[data-animation=rubricator-animation] { -webkit-animation-name: drop-down-animation-rubricator-animation; animation-name: drop-down-animation-rubricator-animation; -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } @-webkit-keyframes drop-down-animation-rubricator-animation { 0% { opacity: 0; transform: translateX(-30px) } 100% { opacity: 1; transform: none } } @keyframes drop-down-animation-rubricator-animation { 0% { opacity: 0; transform: translateX(-30px) } 100% { opacity: 1; transform: none } } .rubricator-plane { position: relative; min-width: 80vw; max-width: 95vw; width: calc(80vw + (1324px - 100%) * .5); height: calc(100vh - 5px - var(--header-height)); max-height: 1080px; padding: 24px; background-color: var(--theme-color-bg-canvas); border-bottom-right-radius: 8px; overflow: hidden; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 40px } .rubricator-plane[data-is-mobile] .rubricator-plane__nav>.dots-loader { color: var(--theme-color-fg-onsurface-primary) } .rubricator-plane[data-is-mobile] .rubricator-plane__content, .rubricator-plane[data-is-mobile][data-has-active-subject] .rubricator-plane__nav { display: none } .rubricator-plane[data-is-mobile][data-has-active-subject] .rubricator-plane__content { display: block } .rubricator-plane[data-is-mobile] .rubricator-plane__subjects { --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,") } .rubricator-plane[data-is-mobile] .rubricator-plane__subjects::-webkit-scrollbar { width: 12px; height: 12px; background-color: var(--custom-scrollbar-background) } .rubricator-plane[data-is-mobile] .rubricator-plane__subjects::-webkit-scrollbar-track { border-radius: 10px; background-color: var(--custom-scrollbar-background) } .rubricator-plane[data-is-mobile] .rubricator-plane__subjects::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--custom-scrollbar-thumb-color); border: 3px solid var(--custom-scrollbar-background) } .rubricator-plane[data-is-mobile] .rubricator-plane__subjects::-webkit-scrollbar-thumb:hover { background-color: var(--custom-scrollbar-thumb-hover-color) } .rubricator-plane[data-is-mobile] .rubricator-plane__subjects::-webkit-scrollbar-thumb:active { background-color: var(--custom-scrollbar-thumb-active-color) } .rubricator-plane[data-is-mobile] .rubricator-plane__subjects::-webkit-scrollbar-corner { background-color: var(--custom-scrollbar-background) } .rubricator-plane[data-is-mobile] .rubricator-plane__subjects::-webkit-resizer { background-image: var(--custom-scrollbar-resize-grip); background-size: 8px; background-repeat: no-repeat; background-position: 2px 2px } .rubricator-plane__nav { width: 256px; flex: 0 0 256px } .rubricator-plane__subjects { margin: 0 -4px 0 -8px; height: 100%; overflow: auto; display: flex; flex-direction: column; --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,") } .rubricator-plane__subjects::-webkit-scrollbar { width: 12px; height: 12px; background-color: var(--custom-scrollbar-background) } .rubricator-plane__subjects::-webkit-scrollbar-track { border-radius: 10px; background-color: var(--custom-scrollbar-background) } .rubricator-plane__subjects::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--custom-scrollbar-thumb-color); border: 3px solid var(--custom-scrollbar-background) } .rubricator-plane__subjects::-webkit-scrollbar-thumb:hover { background-color: var(--custom-scrollbar-thumb-hover-color) } .rubricator-plane__subjects::-webkit-scrollbar-thumb:active { background-color: var(--custom-scrollbar-thumb-active-color) } .rubricator-plane__subjects::-webkit-scrollbar-corner { background-color: var(--custom-scrollbar-background) } .rubricator-plane__subjects::-webkit-resizer { background-image: var(--custom-scrollbar-resize-grip); background-size: 8px; background-repeat: no-repeat; background-position: 2px 2px } .rubricator-plane__content { position: relative; flex: 1 } @media (max-width:768px) { .rubricator-dropdown .drop-down__body { left: -92px } .rubricator-plane { width: 100vw; max-width: 100vw; padding: 0 16px 16px; border-bottom-left-radius: 8px; background-color: var(--theme-color-bg-surface2) } .rubricator-plane__nav { width: 100%; flex: 1 } } .rubricator-subjects { padding-left: 8px } .rubricator-subjects__menu, .rubricator__menu { flex: 1 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; font-size: 16px; font-weight: 500; line-height: 18px; letter-spacing: .15px; -webkit-font-smoothing: antialiased; --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: 2px; --menu-item-padding-v: 8px; --menu-item-padding-h: 9px; --menu-item-white-space: normal; --menu-item-color: var(--theme-color-fg-primary); --menu-item-hover-color: var(--theme-color-fg-primary); --menu-item-active-color: var(--theme-color-base-accent-2); --menu-item-selected-color: var(--theme-color-base-accent-2); --menu-item-hover-background: var(--theme-color-bg-accent-0d12); --menu-item-active-background: transparent; --menu-item-selected-background: transparent; --menu-item-divider-color: #eaecf0; margin-left: calc(var(--menu-item-padding-h) * -1) } .rubricator-subjects__menu[data-is-mobile], .rubricator__menu[data-is-mobile] { --menu-item-padding-v: 16px; --menu-item-padding-h: 8px; --menu-item-spacing: 0; --menu-item-color: var(--theme-color-fg-onsurface-primary); --menu-item-hover-color: var(--theme-color-fg-onsurface-primary); --menu-item-active-color: var(--theme-color-fg-onsurface-accent); --menu-item-selected-color: var(--theme-color-fg-onsurface-accent) } .rubricator-subjects__menu[data-is-mobile] .menu-item, .rubricator__menu[data-is-mobile] .menu-item { border-top: 1px solid var(--theme-color-bg-surface2-level-01) } .rubricator-subjects__menu[data-is-mobile] .menu-item>a, .rubricator-subjects__menu[data-is-mobile] .menu-item>button, .rubricator__menu[data-is-mobile] .menu-item>a, .rubricator__menu[data-is-mobile] .menu-item>button { --menu-item-icon-color: var(--theme-color-fg-onsurface-secondary-0d6) } .rubricator-subjects__menu[data-is-mobile] .menu-item>a.active, .rubricator-subjects__menu[data-is-mobile] .menu-item>a:hover, .rubricator-subjects__menu[data-is-mobile] .menu-item>a[data-active], .rubricator-subjects__menu[data-is-mobile] .menu-item>button.active, .rubricator-subjects__menu[data-is-mobile] .menu-item>button:hover, .rubricator-subjects__menu[data-is-mobile] .menu-item>button[data-active], .rubricator__menu[data-is-mobile] .menu-item>a.active, .rubricator__menu[data-is-mobile] .menu-item>a:hover, .rubricator__menu[data-is-mobile] .menu-item>a[data-active], .rubricator__menu[data-is-mobile] .menu-item>button.active, .rubricator__menu[data-is-mobile] .menu-item>button:hover, .rubricator__menu[data-is-mobile] .menu-item>button[data-active] { --menu-item-icon-color: var(--theme-color-fg-onsurface-primary) } .rubricator-subjects__menu[data-is-mobile] .menu-item[data-is-feedback], .rubricator-subjects__menu[data-is-mobile] .menu-item[data-is-help], .rubricator__menu[data-is-mobile] .menu-item[data-is-feedback], .rubricator__menu[data-is-mobile] .menu-item[data-is-help] { margin-bottom: 36px } .rubricator-subjects__menu[data-is-mobile] .menu-item[data-is-help]+.menu-item[data-is-feedback], .rubricator__menu[data-is-mobile] .menu-item[data-is-help]+.menu-item[data-is-feedback] { margin-top: -36px } .rubricator-subjects__menu .menu-item>a, .rubricator-subjects__menu .menu-item>button, .rubricator__menu .menu-item>a, .rubricator__menu .menu-item>button { display: flex; align-items: baseline; justify-content: space-between; --menu-item-icon-color: var(--theme-color-fg-tertiary) } .rubricator-subjects__menu .menu-item>a>span, .rubricator-subjects__menu .menu-item>button>span, .rubricator__menu .menu-item>a>span, .rubricator__menu .menu-item>button>span { flex: 1 } .rubricator-subjects__menu .menu-item>a>.svg-icon, .rubricator-subjects__menu .menu-item>button>.svg-icon, .rubricator__menu .menu-item>a>.svg-icon, .rubricator__menu .menu-item>button>.svg-icon { flex: 0; transform: none; font-size: 10px; margin-top: 1px } .rubricator-subjects__menu .menu-item>a.active, .rubricator-subjects__menu .menu-item>a:hover, .rubricator-subjects__menu .menu-item>a[data-active], .rubricator-subjects__menu .menu-item>button.active, .rubricator-subjects__menu .menu-item>button:hover, .rubricator-subjects__menu .menu-item>button[data-active], .rubricator__menu .menu-item>a.active, .rubricator__menu .menu-item>a:hover, .rubricator__menu .menu-item>a[data-active], .rubricator__menu .menu-item>button.active, .rubricator__menu .menu-item>button:hover, .rubricator__menu .menu-item>button[data-active] { --menu-item-icon-color: var(--theme-color-fg-primary) } .rubricator-subjects__menu .menu-item[data-is-help]>a, .rubricator__menu .menu-item[data-is-help]>a { justify-content: flex-start; gap: 4px; --menu-item-color: var(--theme-color-base-action-1); --menu-item-hover-color: var(--theme-color-base-action-2); --menu-item-active-color: var(--theme-color-base-action-1); --menu-item-selected-color: var(--theme-color-base-action-1); --menu-item-hover-background: transparent; --menu-item-active-background: transparent; --menu-item-selected-background: transparent; color: var(--link-color, inherit); -webkit-text-decoration-line: var(--link-line); text-decoration-line: var(--link-line); -webkit-text-decoration-color: var(--link-line-color); text-decoration-color: var(--link-line-color); text-underline-offset: var(--link-line-offset); --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); white-space: nowrap } .rubricator-subjects__menu .menu-item[data-is-help]>a:focus, .rubricator-subjects__menu .menu-item[data-is-help]>a:hover, .rubricator__menu .menu-item[data-is-help]>a:focus, .rubricator__menu .menu-item[data-is-help]>a: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)) } .rubricator-subjects__menu .menu-item[data-is-help]>a:active, .rubricator__menu .menu-item[data-is-help]>a: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)) } .rubricator-subjects__menu .menu-item[data-is-help]>a:disabled, .rubricator-subjects__menu .menu-item[data-is-help]>a[aria-disabled=true], .rubricator__menu .menu-item[data-is-help]>a:disabled, .rubricator__menu .menu-item[data-is-help]>a[aria-disabled=true] { color: var(--link-disabled-color, var(--link-color)); cursor: not-allowed } .rubricator-subjects__menu .menu-item[data-is-help]>a::after, .rubricator__menu .menu-item[data-is-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); 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-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100%; mask-size: 100%; background-color: var(--external-link-icon-color, #1466C6) } .rubricator-subjects__menu .menu-item-divider, .rubricator__menu .menu-item-divider { margin: 16px var(--menu-item-padding-h) 11px } .rubricator-meta-categories { display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; width: 100% } .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__header { margin: 0; color: var(--theme-color-fg-onsurface-primary); font-size: 20px; font-weight: 500; line-height: 23.44px; letter-spacing: .15px } .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__content { --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,") } .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__content::-webkit-scrollbar { width: 12px; height: 12px; background-color: var(--custom-scrollbar-background) } .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__content::-webkit-scrollbar-track { border-radius: 10px; background-color: var(--custom-scrollbar-background) } .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__content::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--custom-scrollbar-thumb-color); border: 3px solid var(--custom-scrollbar-background) } .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__content::-webkit-scrollbar-thumb:hover { background-color: var(--custom-scrollbar-thumb-hover-color) } .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__content::-webkit-scrollbar-thumb:active { background-color: var(--custom-scrollbar-thumb-active-color) } .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__content::-webkit-scrollbar-corner { background-color: var(--custom-scrollbar-background) } .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__content::-webkit-resizer { background-image: var(--custom-scrollbar-resize-grip); background-size: 8px; background-repeat: no-repeat; background-position: 2px 2px } .rubricator-meta-categories__header-btn.st-button_style_none { display: inline-flex; align-items: baseline; padding: 16px 0; width: 100%; color: var(--theme-color-fg-onsurface-primary); font-size: 20px; font-weight: 500; line-height: 23.44px; letter-spacing: .15px } .rubricator-meta-categories__header-btn.st-button_style_none .svg-icon { color: var(--theme-color-fg-onsurface-secondary-0d6); margin-right: 12px; font-size: 16px; display: inline-flex; align-items: center } .rubricator-meta-categories__header { margin: 0 0 16px; font-size: 24px; font-weight: 500; line-height: normal; letter-spacing: .15px; color: var(--theme-color-fg-primary) } .rubricator-meta-categories__header .dots-loader { font-size: 16px } .rubricator-meta-categories__content { flex: 1; height: 100%; width: 100%; position: relative; overflow-x: hidden; overflow-y: auto; margin-left: -3px; padding-left: 3px; --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,") } .rubricator-meta-categories__content::-webkit-scrollbar { width: 12px; height: 12px; background-color: var(--custom-scrollbar-background) } .rubricator-meta-categories__content::-webkit-scrollbar-track { border-radius: 10px; background-color: var(--custom-scrollbar-background) } .rubricator-meta-categories__content::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--custom-scrollbar-thumb-color); border: 3px solid var(--custom-scrollbar-background) } .rubricator-meta-categories__content::-webkit-scrollbar-thumb:hover { background-color: var(--custom-scrollbar-thumb-hover-color) } .rubricator-meta-categories__content::-webkit-scrollbar-thumb:active { background-color: var(--custom-scrollbar-thumb-active-color) } .rubricator-meta-categories__content::-webkit-scrollbar-corner { background-color: var(--custom-scrollbar-background) } .rubricator-meta-categories__content::-webkit-resizer { background-image: var(--custom-scrollbar-resize-grip); background-size: 8px; background-repeat: no-repeat; background-position: 2px 2px } .rubricator-meta-categories__columns { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; gap: 0 32px } .rubricator-meta-categories__column { width: calc((100% - 96px)/ 3); min-width: 150px } [data-columns="2"] .rubricator-meta-categories__column { width: calc((100% - 63px)/ 2) } .rubricator-meta-categories__cards { display: flex; flex-direction: column; flex-wrap: wrap; gap: 16px 0 } .rubricator-meta-categories__cards ins { display: block; width: 0; min-width: 0; height: calc((100% - 32px) * 2 / 5); visibility: hidden; background: 0 0; margin-left: 0 } .rubricator-meta-category { display: flex; flex-direction: column; flex-wrap: nowrap } .rubricator-meta-category[data-is-mobile] { height: 100% } .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__header { margin: 0; color: var(--theme-color-fg-onsurface-primary) } .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__content { margin-left: 0; --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,") } .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__content::-webkit-scrollbar { width: 12px; height: 12px; background-color: var(--custom-scrollbar-background) } .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__content::-webkit-scrollbar-track { border-radius: 10px; background-color: var(--custom-scrollbar-background) } .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__content::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--custom-scrollbar-thumb-color); border: 3px solid var(--custom-scrollbar-background) } .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__content::-webkit-scrollbar-thumb:hover { background-color: var(--custom-scrollbar-thumb-hover-color) } .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__content::-webkit-scrollbar-thumb:active { background-color: var(--custom-scrollbar-thumb-active-color) } .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__content::-webkit-scrollbar-corner { background-color: var(--custom-scrollbar-background) } .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__content::-webkit-resizer { background-image: var(--custom-scrollbar-resize-grip); background-size: 8px; background-repeat: no-repeat; background-position: 2px 2px } .rubricator-meta-category__link { --link-line: underline; --link-line-offset: .2em; --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; text-decoration-thickness: 1px } .rubricator-meta-category__header { margin: 0 0 6px; font-size: 16px; font-style: normal; font-weight: 500; line-height: 18px; letter-spacing: .15px; color: var(--theme-color-fg-primary) } .rubricator-meta-category__content { position: relative; flex: 1; margin-bottom: 16px; margin-left: -3px; overflow-y: 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,"); --show-more-fog: rgba(0, 0, 0, 1) calc(100% - 30px), rgba(0, 0, 0, 0.5) calc(100% - 15px), rgba(0, 0, 0, 0.1) calc(100% - 5px), rgba(0, 0, 0, 0) 100% } .rubricator-meta-category__content::-webkit-scrollbar { width: 12px; height: 12px; background-color: var(--custom-scrollbar-background) } .rubricator-meta-category__content::-webkit-scrollbar-track { border-radius: 10px; background-color: var(--custom-scrollbar-background) } .rubricator-meta-category__content::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--custom-scrollbar-thumb-color); border: 3px solid var(--custom-scrollbar-background) } .rubricator-meta-category__content::-webkit-scrollbar-thumb:hover { background-color: var(--custom-scrollbar-thumb-hover-color) } .rubricator-meta-category__content::-webkit-scrollbar-thumb:active { background-color: var(--custom-scrollbar-thumb-active-color) } .rubricator-meta-category__content::-webkit-scrollbar-corner { background-color: var(--custom-scrollbar-background) } .rubricator-meta-category__content::-webkit-resizer { background-image: var(--custom-scrollbar-resize-grip); background-size: 8px; background-repeat: no-repeat; background-position: 2px 2px } .rubricator-meta-category__course-lists { --menu-item-spacing: 6px; --menu-background: transparent; --menu-box-shadow: none; --menu-border: none; --menu-item-padding-h: 3px; --menu-item-padding-v: 3px; --menu-item-white-space: normal; --menu-item-color: var(--theme-color-fg-primary); --menu-item-hover-color: var(--theme-color-base-accent-2); --menu-item-active-color: var(--theme-color-base-accent-2); --menu-item-background: none; --menu-item-hover-background: none; --menu-item-active-background: none; --menu-item-ctrl-border-radius: 3px; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: .25px; -webkit-font-smoothing: antialiased } .rubricator-meta-category__course-lists[data-is-mobile] { font-size: 16px; font-weight: 500; line-height: 18px; letter-spacing: .15px; margin-left: calc(var(--menu-item-padding-h) * -1); --menu-item-padding-v: 16px; --menu-item-padding-h: 8px; --menu-item-spacing: 0; --menu-item-color: var(--theme-color-fg-onsurface-primary); --menu-item-hover-color: var(--theme-color-fg-onsurface-primary); --menu-item-active-color: var(--theme-color-fg-onsurface-accent); --menu-item-selected-color: var(--theme-color-fg-onsurface-accent); --menu-item-hover-background: var(--theme-color-bg-accent-0d12) } .rubricator-meta-category__course-lists[data-is-mobile] .menu-item { border-top: 1px solid var(--theme-color-bg-surface2-level-01) } .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-help] { margin-bottom: 36px } .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-help]>a { justify-content: flex-start; gap: 4px; --menu-item-color: var(--theme-color-base-action-1); --menu-item-hover-color: var(--theme-color-base-action-2); --menu-item-active-color: var(--theme-color-base-action-1); --menu-item-selected-color: var(--theme-color-base-action-1); --menu-item-hover-background: transparent; --menu-item-active-background: transparent; --menu-item-selected-background: transparent; color: var(--link-color, inherit); -webkit-text-decoration-line: var(--link-line); text-decoration-line: var(--link-line); -webkit-text-decoration-color: var(--link-line-color); text-decoration-color: var(--link-line-color); text-underline-offset: var(--link-line-offset); --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); white-space: nowrap } .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-help]>a:focus, .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-help]>a: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)) } .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-help]>a: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)) } .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-help]>a:disabled, .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-help]>a[aria-disabled=true] { color: var(--link-disabled-color, var(--link-color)); cursor: not-allowed } .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-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); 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-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100%; mask-size: 100%; background-color: var(--external-link-icon-color, #1466C6) } .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-feedback] { margin-bottom: 36px } .rubricator-meta-category__course-lists[data-is-mobile] .menu-item[data-is-help]+.menu-item[data-is-feedback] { margin-top: -36px } .rubricator-meta-category__course-lists:not([data-is-mobile]) .menu-item>a:hover, .rubricator-meta-category__course-lists:not([data-is-mobile]) .menu-item>button:not(.st-button_style_none):hover, .rubricator-meta-category__course-lists:not([data-is-mobile]) .menu-item>select:hover { font-weight: 700 } .rubricator-meta-category__show-more-toggler:not(.st-button_style_none) { margin-top: 10px; margin-left: 3px; -webkit-font-smoothing: antialiased } .rubricator-meta-category__category { display: inline-block } .rubricator-meta-category__category[data-skeleton] { width: 85%; height: 1.1em } .feature-tariff-badge { display: inline-flex; padding: 3px 6px 3px 5px; margin-left: 3px; vertical-align: baseline; height: 16px; line-height: 1.15; position: relative; top: -2px; background-color: var(--feature-tariff-badge-bg); color: var(--feature-tariff-badge-color, --feature-tariff-badge-fg); border-left: 1px solid var(--feature-tariff-badge-hem); border-radius: 2px; font-size: 9px; font-weight: 400; letter-spacing: 1px; text-decoration: none; --feature-tariff-badge-color: var(--feature-tariff-badge-fg); --feature-tariff-badge-paid-color: var(--feature-tariff-badge-active-bg) } .feature-tariff-badge:empty { display: none } .feature-tariff-badge[data-tariff=basic_paid] { padding: 3px; width: 16px; overflow: hidden; border-left: 0; color: transparent !important } .feature-tariff-badge[data-tariff=basic_paid]::before { content: ""; position: absolute; height: 12px; width: 12px; margin-top: -1px; margin-left: -1px; -webkit-mask-image: url(/static/frontend/common_icons/star.svg); mask-image: url(/static/frontend/common_icons/star.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: var(--feature-tariff-badge-paid-color, --feature-tariff-badge-color); transform: none } .feature-tariff-badge_active, [role=button]:not([data-disabled]):not([aria-disabled=true]).active .feature-tariff-badge, [role=button]:not([data-disabled]):not([aria-disabled=true]):active .feature-tariff-badge, [role=button]:not([data-disabled]):not([aria-disabled=true]):focus .feature-tariff-badge, [role=button]:not([data-disabled]):not([aria-disabled=true]):hover .feature-tariff-badge, [role=button]:not([data-disabled]):not([aria-disabled=true])[data-active] .feature-tariff-badge, a:not([data-disabled]):not([aria-disabled=true]).active .feature-tariff-badge, a:not([data-disabled]):not([aria-disabled=true]):active .feature-tariff-badge, a:not([data-disabled]):not([aria-disabled=true]):focus .feature-tariff-badge, a:not([data-disabled]):not([aria-disabled=true]):hover .feature-tariff-badge, a:not([data-disabled]):not([aria-disabled=true])[data-active] .feature-tariff-badge, button:not([data-disabled]):not([aria-disabled=true]).active .feature-tariff-badge, button:not([data-disabled]):not([aria-disabled=true]):active .feature-tariff-badge, button:not([data-disabled]):not([aria-disabled=true]):focus .feature-tariff-badge, button:not([data-disabled]):not([aria-disabled=true]):hover .feature-tariff-badge, button:not([data-disabled]):not([aria-disabled=true])[data-active] .feature-tariff-badge, label:not([data-disabled]):not([aria-disabled=true]).active .feature-tariff-badge, label:not([data-disabled]):not([aria-disabled=true]):active .feature-tariff-badge, label:not([data-disabled]):not([aria-disabled=true]):focus .feature-tariff-badge, label:not([data-disabled]):not([aria-disabled=true]):hover .feature-tariff-badge, label:not([data-disabled]):not([aria-disabled=true])[data-active] .feature-tariff-badge { background-color: var(--feature-tariff-badge-active-bg); border-left-color: var(--feature-tariff-badge-active-hem); --feature-tariff-badge-color: var(--feature-tariff-badge-active-fg); --feature-tariff-badge-paid-color: var(--feature-tariff-badge-bg) } .page-footer { padding: 40px 20px 25px; font-size: 14px; line-height: 20px; letter-spacing: .25px; color: var(--theme-color-fg-secondary); border-top: 1px #ddd solid; z-index: 1 } .page-footer__container { max-width: 1022px; margin: 0 auto; width: 100% } .page-footer__col.page-footer__apps { display: flex; gap: 8px } .page-footer__social-links { flex-shrink: 0; display: flex; justify-content: flex-end } .page-footer__email { margin: 8px 0 0 } .page-footer__email a { --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; --link-color: currentColor; -webkit-font-smoothing: antialiased } .page-footer__col.page-footer__counters.page-footer__list { white-space: nowrap; color: #222 } .page-footer__col.page-footer__counters.page-footer__list b, .page-footer__col.page-footer__counters.page-footer__list strong { font-weight: 500; letter-spacing: .15px } .page-footer__col.page-footer__lists { flex: 1; display: flex; justify-content: space-around; justify-content: space-evenly; gap: 4px 16px } @supports (-ms-ime-align:auto) { .page-footer__col.page-footer__lists { justify-content: space-around } } .page-footer__list { list-style: none; margin: 0; white-space: nowrap; line-height: inherit } .page-footer__list li+li { margin-top: 8px } .page-footer__list a { --link-line-color: transparent } .page-footer__years { margin-bottom: 8px; color: #222 } .page-footer__lang { margin-top: 18px } .page-footer__lang .btn-link:not(.st-button_style_none) { --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 } .page-footer__row { display: flex; justify-content: space-between; gap: 16px } .page-footer__row+.page-footer__row { margin-top: 30px } .page-footer__row_order_second { align-items: center } .page-footer__mobapp-link { display: inline-block; max-width: 135px; height: 40px; border-radius: 4px } .page-footer__mobapp-link:hover img, .page-footer__mobapp-link:hover svg { filter: none; opacity: 1 } .page-footer__mobapp-link img, .page-footer__mobapp-link svg { height: 100%; filter: grayscale(1); opacity: .38 } .page-footer__social-link { color: #ccc; max-height: 32px; background: #fff; border-radius: 50% } .page-footer__social-link+.page-footer__social-link { margin-left: 6px } .page-footer__social-link img { width: 32px; height: 32px; filter: grayscale(1) opacity(.4) } .page-footer__social-link:focus img, .page-footer__social-link:hover img { filter: none } .page-footer__terms-caption br { display: none } .page-footer__CC-note a, .page-footer__terms a { display: inline-block; margin-bottom: 8px; --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; --link-color: currentColor; -webkit-font-smoothing: antialiased } @media (max-width:768px) { .page-footer__counters { display: none } .page-footer__col.page-footer__lists { gap: 4px 48px } .page-footer__row { flex-direction: column; align-items: flex-start } .page-footer__row+.page-footer__row { padding-top: 30px; border-top: 1px solid #EAEAEA } } .page-footer-modern { border-top: 0; background: #f6f6f6 } .page-footer .page-footer__ab-group { color: transparent; position: absolute; bottom: 0 } .page-footer__build-info { position: absolute; bottom: 0; right: 0; padding: 8px; max-width: 40px; overflow: hidden; opacity: 0; color: #999 } .page-footer__build-info:hover { max-width: none; opacity: 1 } body[data-embedded] .page-footer { display: none !important } .stepik-loader { display: flex; align-items: center; flex-direction: column } .stepik-loader[data-theme=dark] { --stepik-loader-icon-bg-color: #fff; --stepik-loader-icon-color: #222; --stepik-loader-text-color: #fff } .stepik-loader__icon { width: var(--stepik-loader-size); height: var(--stepik-loader-size); position: relative } .stepik-loader__icon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: var(--stepik-loader-icon-bg-color); -webkit-animation: stepik-loader 1.7s infinite cubic-bezier(.5, 0, .5, 1); animation: stepik-loader 1.7s infinite cubic-bezier(.5, 0, .5, 1) } .stepik-loader__icon>svg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; fill: var(--stepik-loader-icon-color) } .stepik-loader__message { margin-top: 10px; color: var(--stepik-loader-text-color); font-size: calc(.21333333333333335 * var(--stepik-loader-size)); font-size: clamp(10px, calc(.21333333333333335 * var(--stepik-loader-size)), 30px); font-weight: 700; line-height: 1.37 } @-webkit-keyframes stepik-loader { 0% { border-radius: 4px; transform: scale(.8) rotate(0) } 50% { border-radius: 50%; transform: scale(.5) rotate(270deg) } 100% { border-radius: 4px; transform: scale(.8) rotate(540deg) } } @keyframes stepik-loader { 0% { border-radius: 4px; transform: scale(.8) rotate(0) } 50% { border-radius: 50%; transform: scale(.5) rotate(270deg) } 100% { border-radius: 4px; transform: scale(.8) rotate(540deg) } } .stepik-loader-prerender-wrapper { display: flex; flex-direction: column; align-content: center; align-items: stretch; height: calc(100vh - var(--header-height)); padding-top: 50px } .lesson-wrapper.fullscreen .discussions-list, body[data-embedded] .stepic-breadcrumbs, body[data-zen] .discussions-list { display: none } .stepik-loader-prerender-wrapper>.stepik-loader-prerender { height: 130px; margin: auto } .horizontal-scroll-menu-widget { order: -1; font-size: 1em; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; overflow-x: scroll; -webkit-overflow-scrolling: touch; white-space: nowrap; background-color: #FFF; overflow: -moz-scrollbars-none } .horizontal-scroll-menu-widget::-webkit-scrollbar { display: none } .horizontal-scroll-menu-widget__list { display: flex; margin-bottom: 0 } .horizontal-scroll-menu-widget__list li { list-style: none; min-width: 100px; text-align: center } .horizontal-scroll-menu-widget__link { display: block; padding: 1em; text-decoration: none; color: #000 } .horizontal-scroll-menu-widget__link.active { font-weight: 700; text-decoration: none; color: #000 } @media (min-width:1024px) { .horizontal-scroll-menu-widget { display: none } } .mobile-banner { position: fixed; top: 0; left: 0; height: 100%; width: 100vw; background: #fff; z-index: var(--z-mobile-banner) } .mobile-banner__phone-center { position: absolute; bottom: 80px; left: 0; right: 0; display: block; margin: 0 auto } .mobile-banner__phone-leftbottom { position: absolute; bottom: 150px; left: 0 } .mobile-banner__phone-righttop { position: absolute; top: 0; right: 0 } .mobile-banner__title { margin: 15px 0 12px; font-size: 25px; font-weight: 700; font-style: normal; line-height: 30px } .mobile-banner__header { margin: 55px auto; text-align: center; width: 80% } .mobile-banner__phone-center, .mobile-banner__phone-leftbottom, .mobile-banner__phone-righttop { z-index: -1; pointer-events: none } .mobile-banner__logo { width: 42px; height: 42px } .mobile-banner__buttons { position: absolute; bottom: 0; background-color: #fff; padding-top: 30px; padding-bottom: 30px; text-align: center; width: 100%; box-shadow: 0 0 46px 9px #fff; border-top: 1px solid #d3d3d3 } .mobile-banner__main-link { display: inline-block; background-color: #6c6; border-radius: 50px; color: #fff; padding: 10px 20px } .mobile-banner__close-button { color: #5e5e5e; margin-top: 20px } @media (max-width:374px) { .mobile-banner__phone-leftbottom { display: none } .mobile-banner__phone-righttop { top: -20px } } @media (min-width:375px) { .mobile-banner__header { margin-top: 120px } } button:not(.st-button_style_none).discussion__load-more { width: 100%; color: #a5a5a5; border: none; background: inherit; font-size: .9em; -webkit-animation: discussion-fold-up .3s; animation: discussion-fold-up .3s } button:not(.st-button_style_none).discussion__load-more[data-type=top] { border-bottom: solid 1px #d9d9d9; margin-bottom: 16px; margin-top: -16px } button:not(.st-button_style_none).discussion__load-more[data-type=bottom] { border-top: solid 1px #d9d9d9 } button:not(.st-button_style_none).discussion__load-more:hover { color: #5e5e5e; background-color: #e6e9ed } button:not(.st-button_style_none).discussion__load-more:active { color: #a5a5a5; text-shadow: none } .discussions__header { margin-bottom: 20px } .discussions__header+.discussions__comment-input { margin-top: -10px } .discussions__tab-icon { display: inline-flex; transform: translateY(.92px); color: #999 } .discussions__tab-icon, .discussions__tab-icon svg { width: 13px; height: 13px } .discussions__community-rules { font-size: 14px; line-height: 20px; letter-spacing: .25px } .discussions__community-rules 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 } .discussions__list[data-locked]>img { width: 175px; height: 130px } .discussions__empty-placeholder { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: #999 } .discussions__comment-widget:not(:last-child) { margin-bottom: 2.142em } .discussions__comment-input { padding-top: 42px; margin-bottom: 40px } .discussions__comment-input .comment-input__header { margin-top: -42px } .discussions__load-btn { width: 300px; margin: 1.5em auto; display: block } .discussions__load-btn:last-child() { margin-bottom: 50vh } .discussions__sorting { margin: 0; border: none; background-color: transparent; color: #5e5e5e } .discussions__sorting-icon { color: #999 } .discussions__sorting-icon svg { width: 1em; height: 1em; vertical-align: baseline; bottom: -.125em; position: relative } @-webkit-keyframes discussion-fold-up { 0% { height: 0; transform: scaleY(0) translateZ(0) } 100% { height: auto; transform: scaleY(1) translateZ(0) } } @keyframes discussion-fold-up { 0% { height: 0; transform: scaleY(0) translateZ(0) } 100% { height: auto; transform: scaleY(1) translateZ(0) } } .search__tags { margin-bottom: 1em } .search__tags .search__tags-content, .search__tags .search__tags-title { display: inline-block; vertical-align: middle; line-height: 1 } .search__tags .search__tags-title { font-weight: 700; margin-right: .5em } .search__tags .search__tags-content { padding-top: 1px } .search__tags .search__tags-content .s-tag { line-height: 1.6 } .search__form { margin-bottom: 1.5em !important } .search__form .explore__search__input { flex: 1 } .explore__search__input { border-right-color: transparent !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: top; min-width: 50px; color: #5e5e5e } .explore__search__input:active, .explore__search__input:focus, .explore__search__input:hover { border-color: #ccc !important } .explore__search__input:hover { background-color: #f5f5f5 !important } .explore__search__input:active { color: #a5a5a5 } .explore__search__button, .explore__search__input { height: 2.48em !important } .explore__search__form { display: flex; position: relative; margin-top: 45px; margin-right: 5px; margin-left: 5px } .explore__search__form.explore__search__form-nomargin, .sign-form form, .sign-form__body hr.split { margin: 0 } .explore__search__button { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; width: 15% !important } .explore__clear-field { background-image: url(/static/frontend/search-clear.svg) !important; background-repeat: no-repeat !important; background-position: center center !important; display: inline-block; position: absolute; cursor: pointer; width: 26px; height: 26px; right: 16%; top: 8px; margin: auto; padding: 2px; outline: 0 } @media (max-width:1024px) { .explore__search__form { margin-right: 0 } } @media screen and (max-width:680px) { .explore__search__button { display: none !important } .explore__search__input { border-right-color: #ccc !important; border-radius: 2px !important; width: 100% !important } .explore__clear-field { right: 8px } } .box-container { box-sizing: border-box; padding: 1.5rem 1rem } .sign-form { max-width: 500px; min-width: 300px; background-color: #FFF; border: 1px solid #d8d8d8; border-radius: 5px; padding: 0 } .sign-form.clean { border: none; max-width: auto } .sign-form .light-tabs__header { padding-top: 1.5rem; display: block; text-align: left } .sign-form .light-tabs__header::before { border-left: none; border-right: none } .sign-form .light-tabs__switch { white-space: nowrap } .sign-form__body { text-align: center } .sign-form__body .sign-form__messages { color: red; font-size: 14px; line-height: 1.4; list-style: none; padding: none } .sign-form__body .sign-form__message_success { color: #6c6; font-size: 14px } .sign-form__body .sign-form__desc { font-size: 14px; line-height: 1.4; color: #777 } .sign-form__body .sign-form__input { position: relative; padding: .7em; border: 1px solid var(--theme-color-bg-level-03); background: #fff; box-shadow: none; border-radius: 3px; font-size: 16px; margin-bottom: 0; width: 100%; height: 3.2em } .sign-form__body .sign-form__input:focus { background: inherit; border-color: #92C8F7; box-shadow: none } .sign-form__body .sign-form__input-group { margin-top: 1rem } .sign-form__body .sign-form__input-group .sign-form__input { border-radius: 0; margin-top: -1px; z-index: 0 } .sign-form__body .sign-form__input-group .sign-form__input:first-of-type { border-top-right-radius: 4px; border-top-left-radius: 4px; margin-top: 0 } .sign-form__body .sign-form__input-group .sign-form__input:last-of-type { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px } .sign-form__body .sign-form__input-group .sign-form__input:focus { z-index: 1 } .sign-form__body .sign-form__input-group label.sign-form__hidden-label { margin: 0; height: 0 } .sign-form__body .sign-form__btn { width: 100%; margin-top: 16px } .sign-form__body .sign-form__sub { display: inline-block; font-size: 14px; margin-top: 20px; padding: .4rem } .sign-form__body label.sign-form__hidden-label { visibility: hidden; width: 1px; height: 1px } .sign-form__body div.small { font-size: 60%; padding-top: 5px } .sign-form__wrapper { min-height: 600px; box-sizing: border-box; width: 100%; display: flex; justify-content: center; align-items: flex-start } .sign-form__shaking.sign-form__shaking-shake { -webkit-animation: wobble-clone .6s; animation: wobble-clone .6s } .sign-form__shaking.sign-form__shaking-shake-shake { -webkit-animation: wobble .6s; animation: wobble .6s } .social-title { font-size: 16px; margin-bottom: 1rem } .social-wrap { margin: 0 } .social-wrap>.col-xs-2 { padding: 0 .3rem; min-width: 36px } .social-wrap+.social-wrap { margin-top: .6rem } .st-button_style_none.btn-block, a.btn-block { display: block; width: 100% } .st-button_style_none.btn-block+.btn-block, a.btn-block+.btn-block { margin-top: 5px } .st-button_style_none.btn, a.btn { display: inline-block; padding: 6px 8px; margin-bottom: 0; font-size: 12px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border-radius: 4px } .st-button_style_none.btn.active.focus, .st-button_style_none.btn.active:focus, .st-button_style_none.btn.focus, .st-button_style_none.btn:active.focus, .st-button_style_none.btn:active:focus, .st-button_style_none.btn:focus, a.btn.active.focus, a.btn.active:focus, a.btn.focus, a.btn:active.focus, a.btn:active:focus, a.btn:focus { outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px } .st-button_style_none.btn.focus, .st-button_style_none.btn:focus, .st-button_style_none.btn:hover, a.btn.focus, a.btn:focus, a.btn:hover { color: #333; text-decoration: none } .st-button_style_none.btn.active, .st-button_style_none.btn:active, a.btn.active, a.btn:active { background-image: none; outline: 0; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) } .st-button_style_none.btn-social, a.btn-social { position: relative; padding: 12%; line-height: 1; overflow: hidden; text-overflow: ellipsis } .st-button_style_none.btn-social>:first-child, a.btn-social>:first-child { line-height: 40px; max-height: 40px; font-size: 1.6em; text-align: center; padding: 3px; width: 40px } .st-button_style_none.btn-facebook, a.btn-facebook { color: #FFF; background-color: #3B5998; border-color: rgba(0, 0, 0, .2); box-sizing: border-box } .open>.st-button_style_none.btn-facebook.dropdown-toggle, .open>a.btn-facebook.dropdown-toggle, .st-button_style_none.btn-facebook.active, .st-button_style_none.btn-facebook.focus, .st-button_style_none.btn-facebook:active, .st-button_style_none.btn-facebook:focus, .st-button_style_none.btn-facebook:hover, a.btn-facebook.active, a.btn-facebook.focus, a.btn-facebook:active, a.btn-facebook:focus, a.btn-facebook:hover { color: #FFF; background-color: #2D4373; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-facebook.dropdown-toggle.focus, .open>.st-button_style_none.btn-facebook.dropdown-toggle:focus, .open>.st-button_style_none.btn-facebook.dropdown-toggle:hover, .open>a.btn-facebook.dropdown-toggle.focus, .open>a.btn-facebook.dropdown-toggle:focus, .open>a.btn-facebook.dropdown-toggle:hover, .st-button_style_none.btn-facebook.active.focus, .st-button_style_none.btn-facebook.active:focus, .st-button_style_none.btn-facebook.active:hover, .st-button_style_none.btn-facebook:active.focus, .st-button_style_none.btn-facebook:active:focus, .st-button_style_none.btn-facebook:active:hover, a.btn-facebook.active.focus, a.btn-facebook.active:focus, a.btn-facebook.active:hover, a.btn-facebook:active.focus, a.btn-facebook:active:focus, a.btn-facebook:active:hover { color: #FFF; background-color: #23345A; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-facebook.dropdown-toggle, .open>a.btn-facebook.dropdown-toggle, .st-button_style_none.btn-facebook.active, .st-button_style_none.btn-facebook:active, a.btn-facebook.active, a.btn-facebook:active { background-image: none } .st-button_style_none.btn-facebook.disabled.focus, .st-button_style_none.btn-facebook.disabled:focus, .st-button_style_none.btn-facebook.disabled:hover, .st-button_style_none.btn-facebook[disabled].focus, .st-button_style_none.btn-facebook[disabled]:focus, .st-button_style_none.btn-facebook[disabled]:hover, a.btn-facebook.disabled.focus, a.btn-facebook.disabled:focus, a.btn-facebook.disabled:hover, a.btn-facebook[disabled].focus, a.btn-facebook[disabled]:focus, a.btn-facebook[disabled]:hover, fieldset[disabled] .st-button_style_none.btn-facebook.focus, fieldset[disabled] .st-button_style_none.btn-facebook:focus, fieldset[disabled] .st-button_style_none.btn-facebook:hover, fieldset[disabled] a.btn-facebook.focus, fieldset[disabled] a.btn-facebook:focus, fieldset[disabled] a.btn-facebook:hover { background-color: #3B5998; border-color: rgba(0, 0, 0, .2) } .st-button_style_none.btn-facebook .badge, a.btn-facebook .badge { color: #3B5998; background-color: #FFF } .st-button_style_none.btn-github, a.btn-github { color: #FFF; background-color: #444; border-color: rgba(0, 0, 0, .2); box-sizing: border-box } .open>.st-button_style_none.btn-github.dropdown-toggle, .open>a.btn-github.dropdown-toggle, .st-button_style_none.btn-github.active, .st-button_style_none.btn-github.focus, .st-button_style_none.btn-github:active, .st-button_style_none.btn-github:focus, .st-button_style_none.btn-github:hover, a.btn-github.active, a.btn-github.focus, a.btn-github:active, a.btn-github:focus, a.btn-github:hover { color: #FFF; background-color: #2B2B2B; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-github.dropdown-toggle.focus, .open>.st-button_style_none.btn-github.dropdown-toggle:focus, .open>.st-button_style_none.btn-github.dropdown-toggle:hover, .open>a.btn-github.dropdown-toggle.focus, .open>a.btn-github.dropdown-toggle:focus, .open>a.btn-github.dropdown-toggle:hover, .st-button_style_none.btn-github.active.focus, .st-button_style_none.btn-github.active:focus, .st-button_style_none.btn-github.active:hover, .st-button_style_none.btn-github:active.focus, .st-button_style_none.btn-github:active:focus, .st-button_style_none.btn-github:active:hover, a.btn-github.active.focus, a.btn-github.active:focus, a.btn-github.active:hover, a.btn-github:active.focus, a.btn-github:active:focus, a.btn-github:active:hover { color: #FFF; background-color: #191919; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-github.dropdown-toggle, .open>a.btn-github.dropdown-toggle, .st-button_style_none.btn-github.active, .st-button_style_none.btn-github:active, a.btn-github.active, a.btn-github:active { background-image: none } .st-button_style_none.btn-github.disabled.focus, .st-button_style_none.btn-github.disabled:focus, .st-button_style_none.btn-github.disabled:hover, .st-button_style_none.btn-github[disabled].focus, .st-button_style_none.btn-github[disabled]:focus, .st-button_style_none.btn-github[disabled]:hover, a.btn-github.disabled.focus, a.btn-github.disabled:focus, a.btn-github.disabled:hover, a.btn-github[disabled].focus, a.btn-github[disabled]:focus, a.btn-github[disabled]:hover, fieldset[disabled] .st-button_style_none.btn-github.focus, fieldset[disabled] .st-button_style_none.btn-github:focus, fieldset[disabled] .st-button_style_none.btn-github:hover, fieldset[disabled] a.btn-github.focus, fieldset[disabled] a.btn-github:focus, fieldset[disabled] a.btn-github:hover { background-color: #444; border-color: rgba(0, 0, 0, .2) } .st-button_style_none.btn-github .badge, a.btn-github .badge { color: #444; background-color: #FFF } .st-button_style_none.btn-google, a.btn-google { color: #FFF; background-color: #DD4B39; border-color: rgba(0, 0, 0, .2); box-sizing: border-box } .open>.st-button_style_none.btn-google.dropdown-toggle, .open>a.btn-google.dropdown-toggle, .st-button_style_none.btn-google.active, .st-button_style_none.btn-google.focus, .st-button_style_none.btn-google:active, .st-button_style_none.btn-google:focus, .st-button_style_none.btn-google:hover, a.btn-google.active, a.btn-google.focus, a.btn-google:active, a.btn-google:focus, a.btn-google:hover { color: #FFF; background-color: #C23321; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-google.dropdown-toggle.focus, .open>.st-button_style_none.btn-google.dropdown-toggle:focus, .open>.st-button_style_none.btn-google.dropdown-toggle:hover, .open>a.btn-google.dropdown-toggle.focus, .open>a.btn-google.dropdown-toggle:focus, .open>a.btn-google.dropdown-toggle:hover, .st-button_style_none.btn-google.active.focus, .st-button_style_none.btn-google.active:focus, .st-button_style_none.btn-google.active:hover, .st-button_style_none.btn-google:active.focus, .st-button_style_none.btn-google:active:focus, .st-button_style_none.btn-google:active:hover, a.btn-google.active.focus, a.btn-google.active:focus, a.btn-google.active:hover, a.btn-google:active.focus, a.btn-google:active:focus, a.btn-google:active:hover { color: #FFF; background-color: #A32B1C; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-google.dropdown-toggle, .open>a.btn-google.dropdown-toggle, .st-button_style_none.btn-google.active, .st-button_style_none.btn-google:active, a.btn-google.active, a.btn-google:active { background-image: none } .st-button_style_none.btn-google.disabled.focus, .st-button_style_none.btn-google.disabled:focus, .st-button_style_none.btn-google.disabled:hover, .st-button_style_none.btn-google[disabled].focus, .st-button_style_none.btn-google[disabled]:focus, .st-button_style_none.btn-google[disabled]:hover, a.btn-google.disabled.focus, a.btn-google.disabled:focus, a.btn-google.disabled:hover, a.btn-google[disabled].focus, a.btn-google[disabled]:focus, a.btn-google[disabled]:hover, fieldset[disabled] .st-button_style_none.btn-google.focus, fieldset[disabled] .st-button_style_none.btn-google:focus, fieldset[disabled] .st-button_style_none.btn-google:hover, fieldset[disabled] a.btn-google.focus, fieldset[disabled] a.btn-google:focus, fieldset[disabled] a.btn-google:hover { background-color: #DD4B39; border-color: rgba(0, 0, 0, .2) } .st-button_style_none.btn-google .badge, a.btn-google .badge { color: #DD4B39; background-color: #FFF } .st-button_style_none.btn-twitter, a.btn-twitter { color: #FFF; background-color: #1DA1F2; border-color: rgba(0, 0, 0, .2); box-sizing: border-box } .open>.st-button_style_none.btn-twitter.dropdown-toggle, .open>a.btn-twitter.dropdown-toggle, .st-button_style_none.btn-twitter.active, .st-button_style_none.btn-twitter.focus, .st-button_style_none.btn-twitter:active, .st-button_style_none.btn-twitter:focus, .st-button_style_none.btn-twitter:hover, a.btn-twitter.active, a.btn-twitter.focus, a.btn-twitter:active, a.btn-twitter:focus, a.btn-twitter:hover { color: #FFF; background-color: #2795E9; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-twitter.dropdown-toggle.focus, .open>.st-button_style_none.btn-twitter.dropdown-toggle:focus, .open>.st-button_style_none.btn-twitter.dropdown-toggle:hover, .open>a.btn-twitter.dropdown-toggle.focus, .open>a.btn-twitter.dropdown-toggle:focus, .open>a.btn-twitter.dropdown-toggle:hover, .st-button_style_none.btn-twitter.active.focus, .st-button_style_none.btn-twitter.active:focus, .st-button_style_none.btn-twitter.active:hover, .st-button_style_none.btn-twitter:active.focus, .st-button_style_none.btn-twitter:active:focus, .st-button_style_none.btn-twitter:active:hover, a.btn-twitter.active.focus, a.btn-twitter.active:focus, a.btn-twitter.active:hover, a.btn-twitter:active.focus, a.btn-twitter:active:focus, a.btn-twitter:active:hover { color: #FFF; background-color: #1583D7; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-twitter.dropdown-toggle, .open>a.btn-twitter.dropdown-toggle, .st-button_style_none.btn-twitter.active, .st-button_style_none.btn-twitter:active, a.btn-twitter.active, a.btn-twitter:active { background-image: none } .st-button_style_none.btn-twitter.disabled.focus, .st-button_style_none.btn-twitter.disabled:focus, .st-button_style_none.btn-twitter.disabled:hover, .st-button_style_none.btn-twitter[disabled].focus, .st-button_style_none.btn-twitter[disabled]:focus, .st-button_style_none.btn-twitter[disabled]:hover, a.btn-twitter.disabled.focus, a.btn-twitter.disabled:focus, a.btn-twitter.disabled:hover, a.btn-twitter[disabled].focus, a.btn-twitter[disabled]:focus, a.btn-twitter[disabled]:hover, fieldset[disabled] .st-button_style_none.btn-twitter.focus, fieldset[disabled] .st-button_style_none.btn-twitter:focus, fieldset[disabled] .st-button_style_none.btn-twitter:hover, fieldset[disabled] a.btn-twitter.focus, fieldset[disabled] a.btn-twitter:focus, fieldset[disabled] a.btn-twitter:hover { background-color: #1DA1F2; border-color: rgba(0, 0, 0, .2) } .st-button_style_none.btn-twitter .badge, a.btn-twitter .badge { color: #1DA1F2; background-color: #FFF } .st-button_style_none.btn-vk, a.btn-vk { color: #FFF; background-color: #07F; border-color: rgba(0, 0, 0, .2); box-sizing: border-box } .open>.st-button_style_none.btn-vk.dropdown-toggle, .open>a.btn-vk.dropdown-toggle, .st-button_style_none.btn-vk.active, .st-button_style_none.btn-vk.focus, .st-button_style_none.btn-vk:active, .st-button_style_none.btn-vk:focus, .st-button_style_none.btn-vk:hover, a.btn-vk.active, a.btn-vk.focus, a.btn-vk:active, a.btn-vk:focus, a.btn-vk:hover { color: #FFF; background-color: #0067dd; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-vk.dropdown-toggle.focus, .open>.st-button_style_none.btn-vk.dropdown-toggle:focus, .open>.st-button_style_none.btn-vk.dropdown-toggle:hover, .open>a.btn-vk.dropdown-toggle.focus, .open>a.btn-vk.dropdown-toggle:focus, .open>a.btn-vk.dropdown-toggle:hover, .st-button_style_none.btn-vk.active.focus, .st-button_style_none.btn-vk.active:focus, .st-button_style_none.btn-vk.active:hover, .st-button_style_none.btn-vk:active.focus, .st-button_style_none.btn-vk:active:focus, .st-button_style_none.btn-vk:active:hover, a.btn-vk.active.focus, a.btn-vk.active:focus, a.btn-vk.active:hover, a.btn-vk:active.focus, a.btn-vk:active:focus, a.btn-vk:active:hover { color: #FFF; background-color: #07F; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-vk.dropdown-toggle, .open>a.btn-vk.dropdown-toggle, .st-button_style_none.btn-vk.active, .st-button_style_none.btn-vk:active, a.btn-vk.active, a.btn-vk:active { background-image: none } .st-button_style_none.btn-vk.disabled.focus, .st-button_style_none.btn-vk.disabled:focus, .st-button_style_none.btn-vk.disabled:hover, .st-button_style_none.btn-vk[disabled].focus, .st-button_style_none.btn-vk[disabled]:focus, .st-button_style_none.btn-vk[disabled]:hover, a.btn-vk.disabled.focus, a.btn-vk.disabled:focus, a.btn-vk.disabled:hover, a.btn-vk[disabled].focus, a.btn-vk[disabled]:focus, a.btn-vk[disabled]:hover, fieldset[disabled] .st-button_style_none.btn-vk.focus, fieldset[disabled] .st-button_style_none.btn-vk:focus, fieldset[disabled] .st-button_style_none.btn-vk:hover, fieldset[disabled] a.btn-vk.focus, fieldset[disabled] a.btn-vk:focus, fieldset[disabled] a.btn-vk:hover { background-color: #07F; border-color: rgba(0, 0, 0, .2) } .st-button_style_none.btn-vk .badge, a.btn-vk .badge { color: #07F; background-color: #FFF } .st-button_style_none.btn-edx, a.btn-edx { color: #FFF; background-color: #FFF; box-sizing: border-box; border: 1px solid #d8d8d8 } .open>.st-button_style_none.btn-edx.dropdown-toggle, .open>a.btn-edx.dropdown-toggle, .st-button_style_none.btn-edx.active, .st-button_style_none.btn-edx.focus, .st-button_style_none.btn-edx:active, .st-button_style_none.btn-edx:focus, .st-button_style_none.btn-edx:hover, a.btn-edx.active, a.btn-edx.focus, a.btn-edx:active, a.btn-edx:focus, a.btn-edx:hover { color: #FFF; background-color: #EEE; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-edx.dropdown-toggle.focus, .open>.st-button_style_none.btn-edx.dropdown-toggle:focus, .open>.st-button_style_none.btn-edx.dropdown-toggle:hover, .open>a.btn-edx.dropdown-toggle.focus, .open>a.btn-edx.dropdown-toggle:focus, .open>a.btn-edx.dropdown-toggle:hover, .st-button_style_none.btn-edx.active.focus, .st-button_style_none.btn-edx.active:focus, .st-button_style_none.btn-edx.active:hover, .st-button_style_none.btn-edx:active.focus, .st-button_style_none.btn-edx:active:focus, .st-button_style_none.btn-edx:active:hover, a.btn-edx.active.focus, a.btn-edx.active:focus, a.btn-edx.active:hover, a.btn-edx:active.focus, a.btn-edx:active:focus, a.btn-edx:active:hover { color: #FFF; background-color: #DDD; border-color: rgba(0, 0, 0, .2) } .open>.st-button_style_none.btn-edx.dropdown-toggle, .open>a.btn-edx.dropdown-toggle, .st-button_style_none.btn-edx.active, .st-button_style_none.btn-edx:active, a.btn-edx.active, a.btn-edx:active { background-image: none } .st-button_style_none.btn-edx.disabled.focus, .st-button_style_none.btn-edx.disabled:focus, .st-button_style_none.btn-edx.disabled:hover, .st-button_style_none.btn-edx[disabled].focus, .st-button_style_none.btn-edx[disabled]:focus, .st-button_style_none.btn-edx[disabled]:hover, a.btn-edx.disabled.focus, a.btn-edx.disabled:focus, a.btn-edx.disabled:hover, a.btn-edx[disabled].focus, a.btn-edx[disabled]:focus, a.btn-edx[disabled]:hover, fieldset[disabled] .st-button_style_none.btn-edx.focus, fieldset[disabled] .st-button_style_none.btn-edx:focus, fieldset[disabled] .st-button_style_none.btn-edx:hover, fieldset[disabled] a.btn-edx.focus, fieldset[disabled] a.btn-edx:focus, fieldset[disabled] a.btn-edx:hover { background-color: #EEE; border-color: rgba(0, 0, 0, .2) } .st-button_style_none.btn-edx .badge, a.btn-edx .badge { color: #FFF; background-color: #FFF } .sign-form__disclaimer { margin: 16px 0 } .sign-form__disclaimer+.sign-form__btn { margin-top: 0 } .auth-disclaimer { font-size: 16px; font-style: normal; font-weight: 400; line-height: 23px; letter-spacing: .3px; text-align: left } .auth-disclaimer[data-is-warn] { --form-checkbox-border-color: var(--theme-color-base-danger-2) } .auth-disclaimer__form { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: flex-start } .auth-disclaimer__caption { flex: 1; -webkit-font-smoothing: antialiased } .auth-disclaimer__warn { margin-top: 16px; color: var(--theme-color-base-danger-2) } .license__activation-code { overflow-wrap: break-word; word-break: break-all } .attempt-wrapper { background-color: #fff; color: #000; position: relative; left: 0; right: 0; text-align: left; margin-top: 50px; width: 100% } .attempt-wrapper:not(.attempt-wrapper_folded).correct .attempt-wrapper__body { background-color: #e9f9e9 } .attempt-wrapper:not(.attempt-wrapper_folded).settled .attempt-wrapper__body { background-color: #eaecf9 } .attempt-wrapper:not(.attempt-wrapper_folded).wrong .attempt-wrapper__body { background-color: #F5EBF2 } .attempt-wrapper:not(.attempt-wrapper_folded).partially-correct .attempt-wrapper__body { background-color: #FFF6E5 } .attempt-wrapper:not(.attempt-wrapper_folded).evaluation .attempt-wrapper__body, .attempt-wrapper:not(.attempt-wrapper_folded).pending .attempt-wrapper__body { background-color: #eee } .attempt-wrapper .quiz__typename { align-self: flex-end; margin: 0; font-size: 20px; font-weight: 500; letter-spacing: .15px } .attempt-wrapper .attempt__actions-selector .s-select__select, .fir-tree>li { font-weight: 400 } .attempt-wrapper .quiz__attempt-expand-divider { position: relative; margin-bottom: 28px } .attempt-wrapper .quiz__attempt-expand-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #d8d8d8 } .attempt-wrapper .quiz__attempt-expand-btn { padding: 6px 12px; border-radius: 6px; font-size: 14px; color: #777; background-color: #fff; border: 1px solid #d8d8d8 } .attempt-wrapper .quiz__attempt-expand-btn:focus, .attempt-wrapper .quiz__attempt-expand-btn:hover { color: #777; background-color: #fff; border: 1px solid #a8a8a8 } .attempt-wrapper .attempt-review, .attempt-wrapper .attempt__footer, .attempt-wrapper .attempt__inner, .attempt-wrapper .attempt__message { padding: 15px 26px } .attempt-wrapper:not(.attempt-wrapper_with_review) .attempt__inner { padding-bottom: 0 } .attempt-wrapper .attempt__footer { display: flex; font-size: 14px; align-items: baseline } .attempt-wrapper .attempt__message-callto { padding: 10px; border-radius: 10px; background: #ffeec2; margin-top: .5em; font-size: 14px } .attempt-wrapper .attempt-review, .attempt-wrapper .attempt__inner { position: relative } .attempt-wrapper .attempt-review { display: flex; flex-wrap: wrap; align-items: baseline; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8 } .attempt-wrapper .attempt-review>:not(:last-child) { margin-right: .3em } .attempt-wrapper .attempt-review[data-instruction-type=instructor][data-assistant], .attempt-wrapper .attempt-review[data-instruction-type=peer][data-assistant] { margin: 10px 0; padding: 20px; align-items: center; border: none; background-color: #eee; border-radius: 4px } .attempt-wrapper .attempt-review[data-instruction-type=instructor][data-assistant]>.attempt__review-title, .attempt-wrapper .attempt-review[data-instruction-type=peer][data-assistant]>.attempt__review-title { flex: 1; margin: 0 1em 0 0 } .attempt-wrapper .attempt-review[data-instruction-type=instructor][data-assistant]>button, .attempt-wrapper .attempt-review[data-instruction-type=peer][data-assistant]>button { flex-shrink: 0; margin: 0 0 0 auto } .attempt-wrapper .attempt__review-remark { color: #5e5e5e; margin-left: auto } .attempt-wrapper .attempt__review-notice { color: #5e5e5e } .attempt-wrapper .attempt__review-title { flex-basis: 100%; margin-bottom: .5em } .attempt-wrapper .attempt__start { margin-top: 15px; font-size: 20px } .attempt-wrapper .attempt__start-title svg { vertical-align: middle } .attempt-wrapper .attempt__outdated-icon { position: relative; top: .2em; margin-right: .4em } .attempt-wrapper .attempt__outdated-icon svg { width: 23px; height: 20px } .attempt-wrapper .timer.alert { color: #90d } .attempt-wrapper .timer>i { font-size: 1.3em !important } .attempt-wrapper .autoresize-textarea, .attempt-wrapper .textarea { resize: none; z-index: 1; box-shadow: none; border: 1px solid #ccc; background: #fff; width: 100% } .attempt-wrapper .textarea { height: 5em; min-height: 5em; overflow-y: auto; background: #fff } .attempt-wrapper .again-btn, .attempt-wrapper .next-btn { display: inline-block; margin-right: .2em } .attempt-wrapper .code_quiz__limits, .attempt-wrapper .code_quiz__limits dd, .attempt-wrapper .code_quiz__limits dt { display: inline } .attempt-wrapper .attempt__message { position: relative; font-size: 16px; text-align: left } .attempt-wrapper .attempt__message:empty { display: none } .attempt-wrapper .attempt { font-size: 16px; text-align: left } .attempt-wrapper .attempt .CodeMirror { box-shadow: none; margin-bottom: 0; height: auto } .attempt-wrapper .attempt__actions { margin-top: 15px; display: flex; align-items: flex-start } .attempt-wrapper .attempt__actions>:not(:last-child) { margin-right: .3em; height: 1% } .attempt-wrapper .attempt__actions-selector { margin-left: auto } .attempt-wrapper .attempt__login { text-align: center; font-size: 14px; font-style: italic; background: #E3F8FF; padding: 18px 0; border-bottom: 2px solid #fff } .attempt-wrapper .quiz__status-service { float: right } .attempt-wrapper .quiz__status-service-led { margin-left: 3px; display: inline-block; width: 12px; height: 12px; border-radius: 50%; cursor: pointer } .attempt-wrapper .quiz__status-service-led_red { background-color: red; box-shadow: inset #600 0 -1px 6px, red 0 0 10px } .attempt-wrapper .quiz__status-service-led_yellow { background-color: #FF0; box-shadow: inset #660 0 -1px 6px, #990 0 0 10px } .attempt-wrapper.wrong.attempt-wrapper_permanent-attempt input, .attempt-wrapper.wrong.attempt-wrapper_permanent-attempt select, .attempt-wrapper.wrong.attempt-wrapper_permanent-attempt textarea, .fir-tree>li::before { background-color: #fff } .attempt-wrapper.dataset .autoresize-textarea { height: 17.75em !important; overflow: auto !important } .attempt-wrapper.number .number-input { width: 100% } .attempt-wrapper.correct:not(.partially-correct) .attempt__score-cost .attempt__score-cost-score { color: #3c3 } .attempt-wrapper.evaluation .attempt__inner { color: #000; background-color: #eee } .attempt-wrapper.not_started .attempt__inner { cursor: pointer } .quiz__heading { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; grid-column-gap: 16px; margin-bottom: 16px } .quiz__statistics { grid-column: 2; grid-row: 1/3; align-self: flex-start; max-width: 250px; padding: 12px 16px; border-radius: 4px; background-color: #e9f9e9; font-size: 14px; line-height: 1.43; letter-spacing: .25px } .quiz__statistics>div+div { margin-top: 4px } .quiz__manual-score-upload-btn { --data-tooltip-text-align: left; --data-tooltip-max-width: 400px } .show-plugin .button.get_dataset, .show-plugin .button.get_submission { display: inline-flex; align-items: center; margin-bottom: .5em; padding: .5em 1.5em; vertical-align: top } .show-plugin .button.get_dataset .download_icon, .show-plugin .button.get_submission .download_icon { margin-left: 10px } .show-plugin .button.get_dataset svg, .show-plugin .button.get_submission svg { width: 16px; height: 16px } .attempt__additional-message { background-color: rgba(255, 255, 255, .5); font-size: 14px; padding: .5em; margin-top: 1em } .lesson-wrapper.zen-mode .step-view .attempt-wrapper.hidden .attempt__login { display: none } .lesson-wrapper.zen-mode:not(.fullscreen) .attempt-wrapper .page-fragment { max-width: none } .attempt__cost-info { font-size: 12px; margin-top: 15px; line-height: 1.17; letter-spacing: .4px } .attempt__cost-info+.attempt__actions { margin-top: 7px } .attempt__score-info { display: inline-block } .attempt__header-info-item+.attempt__score-info { margin-left: 1em } @-webkit-keyframes fadeInLeft { 0%, 30% { opacity: 0; transform: translateX(-30px) translateZ(0) } 100% { opacity: .6; transform: translateX(0) translateZ(0) } } @keyframes fadeInLeft { 0%, 30% { opacity: 0; transform: translateX(-30px) translateZ(0) } 100% { opacity: .6; transform: translateX(0) translateZ(0) } } @-webkit-keyframes bounce { 0% { opacity: .2; transform: translateY(-30px) translateZ(0) } 100% { transform: translateY(0) translateZ(0); opacity: .6 } } @keyframes bounce { 0% { opacity: .2; transform: translateY(-30px) translateZ(0) } 100% { transform: translateY(0) translateZ(0); opacity: .6 } } @media (max-width:1290px) and (min-width:768px) { .attempt-wrapper .attempt-review[data-instruction-type=instructor][data-assistant], .attempt-wrapper .attempt-review[data-instruction-type=peer][data-assistant], .attempt-wrapper .quiz__typename { margin-left: 20px; margin-right: 20px } .attempt-wrapper .quiz__attempt-expand-btn { margin-left: 20px } } @media (max-width:496px) { .quiz__statistics { display: none } } .fir-tree { list-style: none; counter-reset: fir-tree; margin: 0; padding: 0 } .fir-tree>li { position: relative; min-height: 32px; padding: 0 0 0 44px; font-size: 16px; letter-spacing: .3px } .fir-tree>li::before { counter-increment: fir-tree; content: counter(fir-tree); position: absolute; top: -4px; left: 0; display: inline-block; width: 32px; height: 32px; white-space: nowrap; overflow: hidden; font-size: 16px; font-weight: 500; line-height: 27px; text-align: center; color: #999; border: 3px solid #ccc; border-radius: 50%; text-shadow: 1px 0 1px #fff, -1px 0 1px #fff, 0 1px 1px #fff, 0 -1px 1px #fff; z-index: 1 } .fir-tree>li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 14px; display: inline-block; width: 4px; height: 100%; background-color: #eaecf0 } .fir-tree>li+li { margin-top: 16px } .fir-tree>li h3 { position: relative; top: -2px; margin: 0 0 16px; font-size: 20px; font-weight: 500; letter-spacing: .15px } .fir-tree>li section { margin: 16px 0 24px } .fir-tree[data-loading]>li::before { -webkit-animation-name: fir-tree-loading; animation-name: fir-tree-loading; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: cubic-bezier(.45, .05, .55, .95); animation-timing-function: cubic-bezier(.45, .05, .55, .95) } .fir-tree:not([data-loading])>li[data-status=active]::before, .fir-tree:not([data-loading])>li[data-status=in-progress]::before { border-color: #6c6; color: #222; background-image: conic-gradient(var(--background-color, #6c6) calc(var(--progress, 0)/ 100 * 360deg), transparent 0deg) } .fir-tree:not([data-loading])>li[data-status=in-progress]::after { background-color: #6c6 } .fir-tree:not([data-loading])>li[data-status=completed]::before { border: none; color: transparent; background-color: #6c6; background-image: url(/static/frontend/common_icons/check-white.svg); background-repeat: no-repeat; background-size: 20px; background-origin: border-box; background-position: center; text-indent: 100%; transform: scale(.9375) } .fir-tree:not([data-loading])>li[data-status=completed]::after { background-color: #6c6 } .fir-tree:not([data-loading])>li[data-status=errored]::before { border-color: #ff7965; color: #222 } @-webkit-keyframes fir-tree-loading { 100% { border-color: #eaecf0 } } @keyframes fir-tree-loading { 100% { border-color: #eaecf0 } } .splash.error { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+DQo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9IiNkZDZmNzEiPjwvcmVjdD4NCjxnIGZpbGw9IiM4MDgwODAiPg0KICA8cGF0aCBkPSJNMCAwSDI0IEw0OCAyNCBMNDggNDggWiI+PC9wYXRoPg0KICA8cGF0aCBkPSJNMCAyNCBWNDggSDI0IFoiPjwvcGF0aD4NCjwvZz4NCjwvc3ZnPg==) } .splash.warn { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+DQo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9IiNEM0FCNkQiPjwvcmVjdD4NCjxnIGZpbGw9IiM4MDgwODAiPg0KICA8cGF0aCBkPSJNMCAwSDI0IEw0OCAyNCBMNDggNDggWiI+PC9wYXRoPg0KICA8cGF0aCBkPSJNMCAyNCBWNDggSDI0IFoiPjwvcGF0aD4NCjwvZz4NCjwvc3ZnPg==) } .splash h1, .splash h2, .splash h3, .splash h4, .splash h5, .splash h6, .splash p { background-color: grey; color: #000; display: inline-block } .items-list__content_empty { color: #777 } .items-list__search { width: 100% } .items-list__search+.items-list__item { border-top: none } .items-list__empty-text { font-size: 14px } .items-list__search+.items-list__empty-text { margin-top: 1em } .items-list__search-field { margin: 0 } .items-list__loader { width: 100% } .light-tabs__header { display: flex; height: 100%; align-items: flex-start; position: relative; z-index: 1 } .light-tabs__header:not(.light-tabs_classic)::before { content: " "; background-color: #d9d9d9; position: absolute; bottom: -1px; height: 1px; display: block; width: 100%; border-right: 3px solid #fff; border-left: 3px solid #fff } .light-tabs__extra-link { margin-left: auto; line-height: 20px } .light-tabs__switch { display: inline-block; padding: 0; cursor: pointer; line-height: 20px; --link-line: none } .light-tabs__switch.light-tabs__switch_hidden { display: none } .light-tabs__content { border: 1px solid #d8d8d8; border-radius: 6px; padding: 30px; list-style: none; margin: 0 0 35px } .light-tabs__content:not(.light-tabs__content_with_border) { border-top: 0 } .light-tabs__content .light-tabs__content-inner { display: block } .light-tabs__content .light-tabs__content-inner.hide { display: none } .light-tabs__content .light-tabs__content_empty { background-color: #eee; display: flex; align-items: center; align-content: center } .light-tabs__block.hide { display: none } .light-tabs__header:not(.light-tabs_classic) .light-tabs__switch { margin-right: 17px; font-size: 18px !important; line-height: 20px; color: #4485ed } .light-tabs__header:not(.light-tabs_classic) .light-tabs__switch::after { content: " "; width: 100%; height: 15px; display: block } .light-tabs__header:not(.light-tabs_classic) .light-tabs__switch.active, .light-tabs__header:not(.light-tabs_classic) .light-tabs__switch.light-tabs__switch_active { color: #000; outline: 0; cursor: default } .light-tabs__header:not(.light-tabs_classic) .light-tabs__switch.active::after, .light-tabs__header:not(.light-tabs_classic) .light-tabs__switch.light-tabs__switch_active::after { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMTYgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTSAwIDExIEwgOCAwIEwgMTYgMTEiIHN0cm9rZT0iI0Q4RDhEOCIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+); background-repeat: no-repeat; background-position-x: 50%; background-position-y: 100%; position: relative; top: 1px } .light-tabs_classic .light-tabs__switch { position: relative; border-top: solid 3px transparent; text-decoration: none; outline: 0 !important; padding: 15px 20px; background: #FFF; color: #666 } .light-tabs_classic .light-tabs__switch.active:hover, .light-tabs_classic .light-tabs__switch.light-tabs__switch_active:hover, .light-tabs_classic .light-tabs__switch:hover { color: #000; text-decoration: none } .light-tabs_classic .light-tabs__switch.active, .light-tabs_classic .light-tabs__switch.light-tabs__switch_active { border-top: solid 3px #6C6; border-right: solid 1px #d8d8d8; border-bottom: solid 1px #FFF; border-left: solid 1px #d8d8d8; margin-bottom: -1px; margin-right: 10px; font-weight: 700; color: #000 } .light-tabs_classic.light-tabs_has-corner-overlay .light-tabs__switch:first-child.active::after, .light-tabs_classic.light-tabs_has-corner-overlay .light-tabs__switch:first-child.light-tabs__switch_active::after { content: " "; width: 10px; height: 10px; background: #fff; display: block; position: absolute; bottom: -10px; left: -1px; border-left: solid 1px #d8d8d8 } .progress-line { display: flex; align-items: center; justify-content: center } .progress-line .progress-line__full-line { stroke: #939393 } .progress-line .progress-line__progress { stroke: #6c6 } .progress-line .progress-line__marker { fill: #939393; stroke: #222; stroke-location: center } .progress-line .progress-line__marker.complete { fill: #6c6 } .progress-line .progress-line__numbers { font-size: 14px; color: #939393; margin-left: 5px; white-space: nowrap } .progress-line .progress-line__numbers_hidden { display: none } body.show-modal { overflow: hidden } .modal-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; z-index: var(--z-old-modals) } .modal-dialog.modal-dialog_minH_400 { height: 400px } .modal-dialog .modal-dialog-wrap { display: block; position: relative; min-height: 100%; overflow: hidden } .modal-dialog .modal-dialog-bg { background: rgba(0, 0, 0, .9); display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; z-index: 24; color: #000; transform: translateZ(0) } .modal-dialog .modal-dialog-block { max-width: 100%; position: relative; margin: 10vh auto; transform: translate(0); z-index: 25; width: 360px; overflow: visible; display: flex; flex-direction: column } .modal-dialog .modal-dialog-block[data-type=import-lessons] .modal-dialog-top__title { font-size: 21px; margin-top: 2px } .modal-dialog .modal-dialog-block .modal-dialog-inner { border-radius: 5px; background: #fff; display: flex; flex-direction: column } .modal-dialog .modal-dialog-block .modal-dialog-top__header { min-height: 60px; border-bottom: 1px solid #d8d8d8; display: flex; flex-direction: row; padding: 20px 20px 20px 30px; justify-content: space-between; align-items: baseline } .modal-dialog .modal-dialog-block .modal-dialog-top__title { font-size: 24px; padding-right: 38px } .modal-dialog .modal-dialog-block .modal-dialog-top__title small { font-size: 18px } .modal-dialog .modal-dialog-block .modal-dialog-top__title--mt { margin-bottom: 0; margin-top: 10px } .modal-dialog .modal-dialog-block .modal-dialog-top__close { margin-left: auto; display: block; color: #000; cursor: pointer; position: absolute; top: 30px; right: 30px; z-index: 10; opacity: .7 } .modal-dialog .modal-dialog-block .modal-dialog-top__close:hover { opacity: 1 } .modal-dialog .modal-dialog-block .modal-dialog-top__close svg { width: 20px; height: 20px } .modal-dialog .modal-dialog-block .modal-dialog__content { padding: 10px 30px 20px; position: relative } .modal-dialog .modal-dialog-block .modal-dialog__caption { padding: 15px 0 10px; position: relative } .modal-dialog.modal-dialog_paddings_none .modal-dialog__content { padding: 0 } .modal-dialog.modal-dialog_full-conent .modal-dialog-top__header { padding: 0; height: 0; min-height: 0; border-bottom: none } .modal-dialog.modal-dialog_full-conent .modal-dialog__content { padding: 0 } .modal-dialog .flex-row.modal-dialog__header { padding: 25px 0; border-bottom: 1px solid #d8d8d8 } .modal-dialog .modal-dialog__headline { display: flex; align-items: center } .modal-dialog .modal-dialog__headline-text { flex-grow: 1; margin: 0 } .modal-dialog .flex-row.modal-dialog__footer { padding: 25px 0 5px; border-top: 1px solid #d8d8d8; color: #999 } .modal-dialog .modal-dialog__footerline { display: flex; align-items: center } .modal-dialog .modal-dialog__footer-text { flex-grow: 1 } .modal-dialog .modal-dialog__back { margin-left: auto } .modal-dialog .modal-dialog__body { padding: 25px 0; flex-grow: 1 } @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { .modal-dialog .modal-dialog-block { height: 80%; max-height: none } } @media screen and (max-width:768px) { .modal-dialog .modal-dialog-block { margin-top: 0; margin-bottom: 0 } } .tooltip-hint { cursor: help; position: relative; font-size: 14px } .tooltip-hint .tooltip-hint_inside { display: block; cursor: default; position: absolute; background: #fff; padding: .875em; z-index: 16; border-radius: .125em; border: 1px solid #ccc; box-shadow: 0 0 3px #999; font-size: 16px; min-width: 300px; max-width: 600px; color: #000; white-space: normal; pointer-events: none; opacity: 0; visibility: hidden; transition: .2s opacity } .tooltip-hint .tooltip-hint_inside.tooltip-hint__up { bottom: 0 } .tooltip-hint .tooltip-hint_inside.tooltip-hint__down { top: 0 } .tooltip-hint .tooltip-hint_inside.tooltip-hint__left { right: 0 } .tooltip-hint .tooltip-hint_inside.tooltip-hint__right { left: 0 } .tooltip-hint:hover>.tooltip-hint_inside { opacity: 1; visibility: visible; transition-delay: .5s } .tooltip-hint .s-tag__count, .tooltip-hint .s-tag__name { box-shadow: inset 0 0 0 1px #a5a5a5 } .progress-circle { color: #939393; white-space: nowrap; line-height: 1 } .progress-circle svg { color: #6c6; border-radius: 50%; height: 1.3em; width: 1.3em; box-shadow: 0 0 0 1px #6c6 inset } .progress-circle__wrapper { margin-right: 5px; display: inline-block; vertical-align: middle } .progress-circle_grey svg { color: #9a9fb0; border: 1px solid #9a9fb0 } .progress-pie { flex-shrink: 0; display: inline-block; width: 1em; height: 1em; color: #6c6; border: 1px solid; border-radius: 50%; background-image: conic-gradient(currentColor calc(var(--progress, 0)/ 100 * 360deg), transparent 0deg) } .smart-hints { display: block; padding: 10px; background: #333; color: #fff; border-radius: 5px; font-size: 13px } .smart-hints[data-showed] .smart-hints__hint { height: auto } .smart-hints__hint { white-space: pre-wrap; overflow: hidden; overflow-x: 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,"); height: 50px; line-height: 1; margin: 0 } .smart-hints__hint::-webkit-scrollbar { width: 12px; height: 12px; background-color: var(--custom-scrollbar-background) } .smart-hints__hint::-webkit-scrollbar-track { border-radius: 10px; background-color: var(--custom-scrollbar-background) } .smart-hints__hint::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--custom-scrollbar-thumb-color); border: 3px solid var(--custom-scrollbar-background) } .smart-hints__hint::-webkit-scrollbar-thumb:hover { background-color: var(--custom-scrollbar-thumb-hover-color) } .smart-hints__hint::-webkit-scrollbar-thumb:active { background-color: var(--custom-scrollbar-thumb-active-color) } .smart-hints__hint::-webkit-scrollbar-corner { background-color: var(--custom-scrollbar-background) } .smart-hints__hint::-webkit-resizer { background-image: var(--custom-scrollbar-resize-grip); background-size: 8px; background-repeat: no-repeat; background-position: 2px 2px } .smart-hints_feedback-options { font-size: 14px; padding: 0 0 0 3em; color: #000; background: 0 0; margin-bottom: 1em } .smart-hints_feedback-options p { font-weight: 700 } .code-runner__hints .smart-hints__hint, .lesson__hint .smart-hints__hint { overflow-x: auto; padding-bottom: 8px; --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,"); --custom-scrollbar-background: #333333 } @supports not selector(&::-webkit-scrollbar) { .code-runner__hints .smart-hints__hint, .lesson__hint .smart-hints__hint, .rubricator-meta-categories[data-is-mobile] .rubricator-meta-categories__content, .rubricator-meta-categories__content, .rubricator-meta-category[data-is-mobile] .rubricator-meta-category__content, .rubricator-meta-category__content, .rubricator-plane[data-is-mobile] .rubricator-plane__subjects, .rubricator-plane__subjects, .smart-hints__hint { scrollbar-color: var(--custom-scrollbar-thumb-color) var(--custom-scrollbar-background); scrollbar-width: auto } } .code-runner__hints .smart-hints__hint::-webkit-scrollbar, .lesson__hint .smart-hints__hint::-webkit-scrollbar { width: 12px; height: 12px; background-color: var(--custom-scrollbar-background) } .code-runner__hints .smart-hints__hint::-webkit-scrollbar-track, .lesson__hint .smart-hints__hint::-webkit-scrollbar-track { border-radius: 10px; background-color: var(--custom-scrollbar-background) } .code-runner__hints .smart-hints__hint::-webkit-scrollbar-thumb, .lesson__hint .smart-hints__hint::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--custom-scrollbar-thumb-color); border: 3px solid var(--custom-scrollbar-background) } .code-runner__hints .smart-hints__hint::-webkit-scrollbar-thumb:hover, .lesson__hint .smart-hints__hint::-webkit-scrollbar-thumb:hover { background-color: var(--custom-scrollbar-thumb-hover-color) } .code-runner__hints .smart-hints__hint::-webkit-scrollbar-thumb:active, .lesson__hint .smart-hints__hint::-webkit-scrollbar-thumb:active { background-color: var(--custom-scrollbar-thumb-active-color) } .code-runner__hints .smart-hints__hint::-webkit-scrollbar-corner, .lesson__hint .smart-hints__hint::-webkit-scrollbar-corner { background-color: var(--custom-scrollbar-background) } .code-runner__hints .smart-hints__hint::-webkit-resizer, .lesson__hint .smart-hints__hint::-webkit-resizer { background-image: var(--custom-scrollbar-resize-grip); background-size: 8px; background-repeat: no-repeat; background-position: 2px 2px } .rating-stars { direction: ltr; unicode-bidi: bidi-override; text-align: center; white-space: nowrap } .rating-stars .colored-star { display: inline-block; position: relative; color: var(--rating-stars-color, #f3ab34) } .rating-stars .uncolored-star { display: inline-block; position: relative; color: var(--rating-stars-neutral-color, #ccc) } .rating-stars .partial-star-fill { color: var(--rating-stars-color, #f3ab34); position: absolute; overflow: hidden; left: 0 } .rating-stars .partial-star-bg { position: relative; display: inline-block } .rating-stars .star-clickable { cursor: pointer } .rating-stars_large-stars { font-size: 26px } .rating-stars_promo { display: flex; --rating-stars-color: #f9db60 } .rating-stars_promo>* { margin-right: 1px } .auth-widget__embed-msg { margin: 0; padding: 40px; text-align: center } .auth-widget__box-container-no-top { padding-top: 0 } .auth-widget .auth-widget__grey-footer { margin: 0; background: #eee } .auth-widget .split_mb-none { margin-bottom: 0 } .auth-widget__body { margin: 32px; padding: 0 8px } .google-button { display: block; height: 40px; border-width: 0; background: #fff; color: #737373; border-radius: 5px; white-space: nowrap; box-shadow: 1px 1px 0 1px rgba(0, 0, 0, .05); transition-property: background-color, box-shadow; transition-duration: 150ms; transition-timing-function: ease-in-out; padding: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto } .google-button__icon, .google-button__text { display: inline-block; vertical-align: middle } .google-button:focus, .google-button:hover { box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, .1); text-decoration: none !important } .google-button:active { background-color: #e5e5e5; box-shadow: none; transition-duration: 10ms } .google-button__icon { margin: 8px 0 8px 8px; width: 18px; height: 18px; box-sizing: border-box } .google-button__icon--plus { width: 27px } .google-button__text { padding: 0 24px; font-size: 14px; font-weight: 700 } .user-avatar, .user-avatar__link { display: inline-flex; align-items: center } .user-avatar__img { flex-shrink: 0; border-radius: 50% } .user-avatar__img+.user-avatar__name { margin-left: .8em } .user-avatar__img_shape_square { border-radius: 4px } .user-avatar__name { display: inline-block; text-overflow: ellipsis; overflow: hidden } .author-widget { display: flex; font-size: 14px; color: #222 } .author-widget__avatar { flex-shrink: 0; margin-right: 16px; border-radius: 50% } .author-widget__avatar[data-square] { border-radius: 6px } .author-widget__content { flex: 1 } .author-widget__name { font-size: 1.285em; font-weight: 500; line-height: 1.3; letter-spacing: .2px } .author-widget__short-bio { margin-top: 8px; font-weight: 500; line-height: 1.25; letter-spacing: .2px } .author-widget__details { margin-top: 8px; line-height: 1.43; letter-spacing: .3px } .author-widget__info { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: .4px; -webkit-font-smoothing: antialiased } .author-widget__rating { --rating-badge-color: var(--theme-color-fg-secondary); margin-right: 12px } .author-widget__widgets { display: flex; flex-wrap: wrap; white-space: nowrap; gap: 6px 0; color: var(--theme-color-fg-secondary) } .author-widget__widget { display: flex; align-items: center; margin-right: 12px } .author-widget__widget .svg-icon, .author-widget__widget i { display: flex; margin-right: 4px; width: 12px; height: 12px; color: var(--theme-color-fg-tertiary) } .author-widget__widget .svg-icon svg, .author-widget__widget i svg { width: 100%; height: 100% } .lesson-widget { display: flex; position: relative; flex-direction: column; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 4px; cursor: pointer } .lesson-widget.lesson-widget_disabled:hover { cursor: default } .lesson-widget__content { padding: 12px 25px; display: flex; flex-direction: row; align-items: stretch } .lesson-widget__content:focus-within .lesson-widget__hoverable-stats, .lesson-widget__content:hover .lesson-widget__hoverable-stats { visibility: visible; width: auto } .lesson-widget__cover { position: relative; margin-right: 20px } .lesson-widget__cover>a { display: block } .lesson-widget__cover-image { height: 45px; width: 45px; font-size: 24px; border-radius: 3px; display: flex; align-items: center; justify-content: center; background-color: #eee; font-weight: 300; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover } .lesson-widget__cover-image.lesson-widget__cover-edit { height: 75px; width: 75px; border-radius: 0 } .lesson-widget__cover:hover .lesson-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-widget__cover-upload-buttons button { color: #f3f4f6 } .lesson-widget__cover-upload-buttons button:hover { color: #222 } .lesson-widget__upload-cover-icon { float: right; margin: 7px 0 0 5px } .lesson-widget__upload-cover-icon svg { width: 20px; height: 20px } .lesson-widget__cover-upload-buttons { position: absolute; display: none } .lesson-widget__info { display: flex; justify-content: space-between; align-items: center; min-width: 0; margin-right: auto; flex-basis: 95% } @media (max-width:768px) { .lesson-widget__info { flex-wrap: wrap } } .lesson-widget__info_edit { flex-direction: column; justify-content: flex-start; align-items: stretch } .lesson-widget.lesson-widget_mode_edit .lesson-widget__info { flex-basis: 100% } .lesson-widget__title { display: flex; align-items: center; min-width: 0; font-size: 18px; line-height: 1.33; position: relative } .lesson-widget__title .lesson-widget__title-edit { font-size: 14px; padding: 8px; width: 100%; margin-bottom: 4px } .lesson-widget__title-text { color: #000; white-space: nowrap; text-overflow: ellipsis; max-width: 700px; overflow: hidden } a.lesson-widget__title-text { --link-color: currentColor; --link-line-color: transparent } .lesson-widget__title-text_placeholder { width: 300px; border-radius: 4px } .lesson-widget_disabled { background-color: #eee } .lesson-widget_disabled .lesson-widget__title-text, .lesson-widget_style_grayout .lesson-widget__title-text { color: #999 } .lesson-widget__symbols-left { position: absolute; right: 1em; top: .78462em; font-size: .65em; color: #a5a5a5 } .lesson-widget__title-license-icon { width: 15px; height: 15px; margin: -2px 5px 0; display: inline-block; position: relative; top: 2px; color: #939393; cursor: help } .lesson-widget__title-license-icon svg { height: 100%; width: 100% } .lesson-widget__stats { display: flex; align-items: center; margin: 2px 0 0; justify-content: flex-end } @media (max-width:768px) { .lesson-widget__stats { margin-left: auto; flex-wrap: wrap } } .lesson-widget__stats .lesson-widget__hoverable-stats { display: inline-flex; margin-left: 10px } @media (min-width:769px) { .lesson-widget__stats .lesson-widget__hoverable-stats { visibility: collapse; width: 0 } } .lesson-widget__stats .svg-icon svg { height: 14px; width: 100% } .lesson-widget__stats-details { flex-wrap: wrap; margin-left: -64px } .lesson-widget__stat { font-size: 12px; color: #5e5e5e; padding: 4px 0; white-space: nowrap; margin-right: 12px; display: flex; align-items: center; height: 24px } .lesson-widget__author { color: #1466c6 } .lesson-widget__comment-text, .lesson-widget__comment-text:hover { color: #222 } .lesson-widget__stat-icon { width: 16px; margin-right: 5px; line-height: 100%; color: #939393 } .lesson-widget__stat-icon.st-user_icon { width: 14px } .lesson-widget__comment { font-size: 12px; padding: 10px 0 } .lesson-widget_extra { background: #fff; padding: 15px 20px 15px 65px; margin: 5px 15px 15px; border-radius: 3px; border: 1px solid #e6e9ed; box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .1) } .lesson-widget__edit-button.button:not(.st-button_style_none) { width: 40px; padding: 10px 0; margin-left: 10px } @media (max-width:768px) { .lesson-widget__edit-button.button:not(.st-button_style_none) { width: 29px; padding: 5px 0 } } .lesson-widget__edit-icon svg { width: 40px } .lesson-widget_dashboard .lesson-widget__info { display: block } .lesson-widget_dashboard .lesson-widget__edit-button, .toc__progress-bar, .toc__progress-bar-green { display: none } .lesson-widget_dashboard .lesson-widget__stat { margin-right: 0; margin-left: 12px } .lesson-widget_dashboard .lesson-widget__stat.lesson-widget__owner-name { margin-right: auto; margin-left: 0; flex-basis: 100% } .lesson-widget_dashboard .progress-line { margin-left: 12px } progress[value].lesson-widget__progress-bar { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; color: #6c6; width: 50px; height: 3px; margin-right: 5px } progress[value].lesson-widget__progress-bar::-webkit-progress-bar { border-radius: 3px; background-color: #d8d8d8 } progress[value].lesson-widget__progress-bar::-webkit-progress-value { border-radius: 3px; background-color: #6c6 } progress[value].lesson-widget__progress-bar::-moz-progress-bar { border-radius: 3px; background-color: #6c6 } .toc__editor-link { display: block; padding-bottom: 24px } .toc-component { position: relative; width: 100% } .toc-component .toggle__component { position: relative; margin-top: -2px } .toc-component .toggle__title { position: relative; line-height: 1.3; background: #fff; margin-top: 1px; border: 1px solid #ccc; padding: 1.25em 1.25em .875em } .toc-component .toggle__title .toggle__title__first-line { margin-left: 20px; display: flex; align-items: center } .toc-component .toc__section-progress .progress-circle span, .toc-component .toggle__title .toggle__title__first-line .progress-circle { margin-left: auto } .toc-component .toggle__title .toggle__secondary-title { color: #a5a5a5; font-size: .8125em; display: flex; margin-top: 6px; flex-wrap: wrap; justify-content: space-between } .toc-component .toggle__title .toggle__secondary-title .toggle__secondary-info-block { min-width: 140px; padding: 3px } .toc-component .toggle__title .toggle__title__arrow { display: none } .toc-component .toggle__title .toggle__title__btn { display: inline-block; font-size: 1.3125em !important } .toc-component .toggle__title .toggle__title__position { color: #a5a5a5; margin-right: 5px; font-size: 1em !important } .toc-component .toggle__title .toggle__title-requirements { margin-left: 20px; display: flex; flex-wrap: wrap; font-size: .75em !important; line-height: 1.5; color: #a5a5a5 } .toc-component .toggle__title .toggle__title-requirements .svg-icon svg { height: 1em; width: 1em } .toc-component .toggle__title .toggle__title-requirements .toggle__title-requirement { padding-right: 20px } .toc-component .toggle__title .toggle__exam-label { display: block; margin-top: 10px; padding: 3px 8px; max-width: 80px; text-align: center; font-size: 13px; background: #6c6; border-radius: 2px; min-width: 80px } .toc-component .toggle__title .toggle__open-date-label { display: block; font-size: 13px; margin-top: 10px; color: #999 } .toc-component .toggle__title hr { margin-left: 20px } .toc-component .compact-toc-section { background: #333; color: #fff; border: none; padding: 1em 1.5em; display: flex; justify-content: space-between } .toc-component .compact-toc-section:hover .toggle__title__btn-underlinable { border-bottom: 1px dashed #fff } .toc-component .toggle__section-deadlines { display: none; position: absolute; width: 230px; max-height: 130px; left: -250px; transform: translate(0, -60%); border-radius: 10px; background: #999; padding: 20px; font-size: 14px } .toc-component .compact-toc-section:hover .toggle__section-deadlines { display: block } .toc-component .toggle__section-deadlines:after { left: 100%; top: 50%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border: solid transparent; border-left-color: #999; border-width: 15px; margin-top: -15px } .toc-component .toc__section-progress { cursor: pointer; text-align: right; padding-left: .75em } .toc-component .toc__section-progress .toc__section-progress-value { position: relative; width: 100%; height: 100% } .toc-component .toc__section-progress .toc__section-progress-value .toc__section-score { color: #3c3 } .toc-component .toc__section-progress .progress-circle svg { height: 1em; width: 1em } .toc-component .toc__inner { transform: translateZ(0); margin: 0 0 30px 30px; top: -1px; position: relative; border: 1px solid #ccc; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px } .lesson-side__inner .toc-component .toc__inner { margin: 0; border: none } .toc-component .toc__inner .lesson-widget:not(:last-child):before { content: ""; position: absolute; left: 2%; bottom: 0; height: 1px; width: 96%; border-bottom: 1px solid #ccc } .toc-component .lesson-widget__content { padding-right: 1.25em } .toc-component .lesson-widget { margin-top: -.0625em; border-radius: 0; margin-bottom: 0; border: none } .toc-component .lesson-widget:first-child { border-top: 0 } .toc-component .lesson-widget .lesson-widget__title { font-size: 1em } .toc-component .lesson-widget+.lesson-widget { margin-top: -.0625em } .toc-component .toc__progress-bar { display: block; min-height: 100%; width: 6px; background: #eee; position: absolute; top: 0; left: 0 } .toc-component .toc__progress-bar-green { display: block; height: 0; width: 6px; background: #6c6; position: absolute; bottom: 0; left: 0 } @media screen and (min-width:768px) { .toc-component .toggle__title .toggle__title-requirements { flex-wrap: nowrap } .toc-component .toggle__title .toggle__title-requirements .toggle__title-requirement { padding-right: 40px } } @media screen and (min-width:1024px) { .toc-component .lesson-widget__content .progress-line svg { display: none } } .lesson-widget-compact { display: flex; color: #fff; cursor: pointer; position: relative } .lesson-widget-compact .progress-line__numbers { color: #939393; font-size: .85em } .lesson-widget-compact .lesson-widget__compact_content { display: flex; justify-content: space-between; align-items: center } .lesson-widget-compact:hover { background: #2a2a2a } .lesson-widget-compact[data-active] { background: rgba(102, 204, 102, .5) } .lesson-widget-compact__progress-bar { display: block; min-height: 100%; width: 4px; background: #5e5e5e; position: absolute; top: 0; left: 0 } .lesson-widget-compact__progress-bar::after { content: ""; display: block; height: 0; width: 4px; background: #6c6; position: absolute; bottom: 0; left: 0; min-height: calc(var(--progress, 0) * 1%) } .lesson-widget-compact a:link, .lesson-widget-compact a:visited { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff !important; --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 } .lesson-widget__compact_name { font-size: .95em } .lesson-widget-compact__lock-icon { display: block; position: absolute; left: 20px; top: 1em } .lesson-widget-compact__lock-icon, .lesson-widget-compact__lock-icon svg { width: 15px; height: 15px } .lesson-widget-compact__wrapper { padding: .75em 1.5em .75em 2em; width: 100% } .lesson-widget-compact__wrapper_unavailable { cursor: default; color: #999; padding-left: 3em } .future-course-widget { position: relative; display: flex; flex-direction: column; border-radius: 3px; text-align: center; width: 100%; min-width: 220px; padding: 2em 1em; border: 1px solid #D8D8D8; margin: 5px; min-height: 290px } .future-course-widget .course-widget__cover-link { flex-shrink: 0 } .future-course-widget .st-course-widget__join-button:not(:empty) .button, .future-course-widget .st-course-widget__join-button:not(:empty) button { padding: 7px; min-width: 110px } .future-course-widget .course-widget__info { flex: 1; display: flex; flex-direction: column; padding-top: 1em } .future-course-widget .course-widget__authors, .future-course-widget .course-widget__menu, .future-course-widget .user__widget.course-join-button { display: none } .future-course-widget .course-widget__badges { display: flex; align-items: center; margin-top: auto; color: #777 } .future-course-widget .course-widget__learners .svg-icon, .future-course-widget .course-widget__rating-spacing_mobile { color: #b7b7b7 } .future-course-widget .course-widget__badges>[data-right] { margin-left: auto } .future-course-widget .course-widget__badges>[data-right]~[data-right] { margin-left: 0 } .future-course-widget .course-widget__learners, .future-course-widget .course-widget__rating { visibility: visible; position: absolute; bottom: 1em; line-height: 1em } .future-course-widget .course-widget__learners { left: 1em } .future-course-widget .course-widget__rating { right: 1em; line-height: 1 } .future-course-widget .course-widget__rating-spacing_tablet { display: none } .future-course-widget .course-widget__cover-link { display: block; position: relative; width: 140px; height: 140px; margin: 0 auto } .future-course-widget .course-widget__cover-image { display: block; width: 100%; max-height: 100% } .future-course-widget .course-widget__cover-image_placeholder { display: inline-block; height: 110px !important; border-radius: 5px } .future-course-widget .course-widget__cover-image-badge { position: absolute; top: -11px; right: -9px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 5px; border-radius: 50%; background-color: #5e5e5e; color: #fff; border: 2px solid #fff } .future-course-widget .course-widget__cover-image-badge svg { width: 100%; height: 100% } .future-course-widget .course-widget__cover-image-badge.lock3_icon { background-color: #3e50cb } .future-course-widget .course-widget__title-text_placeholder { display: inline-block; width: 300px; border-radius: 4px; height: 1em } .future-course-widget .course-widget__author-text_placeholder { display: inline-block; width: 150px; border-radius: 3px; height: 1em; opacity: .5 } .future-course-widget .course-widget__price { flex: 1; display: flex; align-items: baseline; justify-content: center; margin: 16px 0 8px; font-size: 20px; font-weight: 500; letter-spacing: .15px; line-height: 1em; color: #222 } .future-course-widget .course-widget__price .format-price.format-price_free { color: #54ad54; font-size: 12px; letter-spacing: .4px } .future-course-widget .course-widget__price .display-price__price_regular { order: 1; margin-left: 8px; font-size: 16px; font-weight: 400; color: #999; letter-spacing: .25px } .future-course-widget .course-widget__price_enrolled { font-size: 14px; color: #777 } .future-course-widget .course-widget__access { display: none; margin-left: 1em } .future-course-widget .course-widget__access .svg-icon { color: #939393 } .button:not(.st-button_style_none).course-widget__publish-btn { margin: 0 10px; padding: 7px 20px } button.st-button_style_none.course-widget__menu-toggler { padding: 8px; color: #777 } button.st-button_style_none.course-widget__menu-toggler:focus, button.st-button_style_none.course-widget__menu-toggler:hover { color: #222 } button.st-button_style_none.course-widget__menu-toggler .svg-icon { display: flex; align-items: center } button.st-button_style_none.course-widget__menu-toggler svg { width: 14px; height: 14px } @media screen and (min-width:480px) { .future-course-widget { width: 47% } } @media screen and (min-width:720px) { .future-course-widget { width: 31% } } @media screen and (min-width:768px) { .future-course-widget { display: flex; flex-direction: row; padding: 20px 0; align-content: stretch; border: none; border-top: 1px solid #d8d8d8; margin: 0; text-align: left; max-width: none; width: 100%; min-height: 0 } .future-course-widget:first-child { padding-top: 0; border-top: none } .future-course-widget:last-child { padding-bottom: 0 } .future-course-widget .course-widget__authors, .future-course-widget .course-widget__menu, .future-course-widget .user__widget.course-join-button { display: block } .future-course-widget .course-widget__cover-link { width: 110px; height: 110px; align-self: center } .future-course-widget .course-widget__cover-image { width: 100%; height: auto; display: block } .future-course-widget .course-widget__info { padding-left: 30px; padding-top: 0; display: flex; flex-direction: column; flex-grow: 1 } .future-course-widget .course-widget__main-info { flex-grow: 1; padding: 10px 0; display: flex } .future-course-widget .course-widget__authors { overflow: hidden; text-overflow: ellipsis; max-width: 497px } .future-course-widget .course-widget__author-link { color: #777; font-size: 14px; text-decoration: none } .future-course-widget .course-widget__author-link:hover { text-decoration: underline } .future-course-widget .course-widget__author-link:after { content: ", " } .future-course-widget .course-widget__author-link:last-child:after { content: "" } .future-course-widget .course-widget__badges { padding-right: 9px; white-space: nowrap } .future-course-widget .course-widget__price { justify-content: flex-start; margin: 0 } .future-course-widget .course-widget__access { display: inline-block } .future-course-widget .course-widget__learners { padding-left: 1em; position: static } .future-course-widget .course-widget__rating { padding-left: 1em; position: static; line-height: inherit } .future-course-widget .course-widget__rating-spacing_mobile { display: none } .future-course-widget .course-widget__rating-spacing_tablet { display: inline } .future-course-widget .progress-circle { padding-right: 2em } .future-course-widget .user__widget.course-join-button { display: flex; margin-left: auto } .future-course-widget .user__widget.course-join-button a { font-size: 14px; margin-left: auto; min-width: 100px } .future-course-widget .user__widget.course-join-button .button { font-size: 14px; padding: 7px } } .course-widget__instructor-reviews-info { margin: .1em 0 .3em } .course-widget__instructor-reviews-count { background-color: #E9EBFA; color: #222; font-size: 12px; display: inline-block; padding: .05em .75em; border-radius: 1em; --link-line: none } .course-widget__instructor-reviews-count:hover { color: #222; background-color: #dfe2f8 } .course-widget__instructor-reviews-count_placeholder { display: inline-block; width: 180px } .course-widget__title-link { text-decoration: none; font-size: 18px; color: #000; vertical-align: bottom; display: -webkit-inline-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden } .course-widget__title-link:hover { text-decoration: underline; color: #000 } .course-widget__extra { align-self: flex-start; display: flex; flex-flow: row-reverse; align-items: center; justify-content: flex-start; margin-left: 10px; font-size: 14px } .course-widget__main-content { flex: 1 } button.st-button_style_none.course-widget__wishlist-btn { padding: 7px; margin: 0 4px; font-size: 16px; color: var(--static-color, #999) } button.st-button_style_none.course-widget__wishlist-btn:hover { color: #246024 } button.st-button_style_none.course-widget__wishlist-btn:active { color: #1d4d1d } button.st-button_style_none.course-widget__wishlist-btn[data-toggled] { --static-color: #66cc66 } button.st-button_style_none.course-widget__wishlist-btn[data-loading] { cursor: progress } button.st-button_style_none.course-widget__wishlist-btn .svg-icon { display: flex } @media (max-width:768px) { button.st-button_style_none.course-widget__wishlist-btn { position: absolute; top: 11px; right: 9px; font-size: 18px } } .future-lesson-widget { display: flex; align-content: stretch; justify-content: space-between; padding: 30px 0; border-top: 1px solid #d8d8d8; width: 100% } .future-lesson-widget:first-child { padding-top: 0; border-top: none } .future-lesson-widget:last-child { padding-bottom: 0 } .future-lesson-widget__cover-link { min-width: 60px } .future-lesson-widget__cover { width: 60px; height: 60px; margin-right: 0 } .future-lesson-widget__info { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-left: 30px } .future-lesson-widget__extra { display: flex; flex-wrap: nowrap; justify-content: space-between; font-size: 14px; margin-bottom: 8px } .future-lesson-widget__progress-line { justify-content: flex-start } .future-lesson-widget__progress-line .progress-line__numbers { white-space: nowrap } .future-lesson-widget__main-info { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between } .future-lesson-widget__title-link { display: flex; justify-content: flex-start; flex-shrink: 1; min-width: 0; text-decoration: none; font-size: 18px; color: #000 } .future-lesson-widget__title-link:hover { text-decoration: underline } .future-lesson-widget__title-link-text { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .future-lesson-widget__lock-icon { display: inline-block; flex: 0 0 auto; align-self: flex-end; margin-left: 5px; max-width: 30px } .future-lesson-widget__lock-icon svg { height: 13px; width: 13px } .future-lesson-widget__author { flex-grow: 1; overflow: hidden; text-overflow: ellipsis } .future-lesson-widget__author-link { color: #5e5e5e; font-size: 14px; text-decoration: none } .course-pricing__preview-lesson-editor[data-edit]>button, .course-reivew__trans-btn.st-button_style_none:hover, .course-review__main.can-open:hover .course-review__link-indicator, .future-lesson-widget__author-link:hover { text-decoration: underline } .future-lesson-widget__menu { flex: 0 0 auto; align-self: flex-start; margin-left: 10px } button.st-button_style_none.future-lesson-widget__menu-toggler { padding: 6px; vertical-align: top; color: #777 } button.st-button_style_none.future-lesson-widget__menu-toggler:focus, button.st-button_style_none.future-lesson-widget__menu-toggler:hover { color: #222 } button.st-button_style_none.future-lesson-widget__menu-toggler .svg-icon { display: flex; align-items: center } button.st-button_style_none.future-lesson-widget__menu-toggler svg { width: 14px; height: 14px } @media screen and (max-width:768px) { .future-lesson-widget__extra { flex-wrap: wrap; flex-direction: column } .future-lesson-widget__progress-line { margin-top: .5em } } .users-list__list { display: flex; flex-direction: column; align-items: flex-start; margin: 0; list-style: none } .course-review-editor__actions .button+.button, .course-review-editor__actions .button+a, .course-review-editor__actions .button+button, .course-review-editor__actions button+.button, .course-review-editor__actions button+a, .course-review-editor__actions button+button, .users-list__slot:not(:empty) { margin-left: 16px } .users-list__item { display: flex; align-items: center; padding: 4px 0 } .users-list__item:focus-within .users-list__button, .users-list__item:hover .users-list__button { color: #ccc } .users-list__avatar { flex-shrink: 0; margin-right: 16px } .users-list__avatar[data-skeleton] { width: 32px; height: 32px } .users-list__username[data-me]::after { content: attr(data-me); color: #a5a5a5 } .users-list__slot, .users-list__username { font-size: 14px; line-height: 1.29; letter-spacing: .25px } .users-list__slot[data-skeleton], .users-list__username[data-skeleton] { width: 10em; height: 1em } .users-list__buttons { margin-left: 8px } .users-list__button { display: flex; color: #eaecf0 } .users-list__button button:not(.st-button_style_none), button:not(.st-button_style_none).users-list__button { padding: 4px; background: 0 0; border: none; font-size: 12px; color: inherit } .users-list__button button:not(.st-button_style_none):focus, .users-list__button button:not(.st-button_style_none):hover, button:not(.st-button_style_none).users-list__button:focus, button:not(.st-button_style_none).users-list__button:hover { color: #5e5e5e } .users-list__button button:not(.st-button_style_none):active, button:not(.st-button_style_none).users-list__button:active { color: #222 } .users-list__button button:not(.st-button_style_none) .svg-icon, button:not(.st-button_style_none).users-list__button .svg-icon { display: flex; width: 1em; height: 1em } .users-list__button button:not(.st-button_style_none) .svg-icon>svg, button:not(.st-button_style_none).users-list__button .svg-icon>svg { width: 100%; height: 100% } .users-list__load-more-wrap { margin-top: 20px } button:not(.st-button_style_none).users-list__load-more { padding: 7px 24px } .users-list__empty { font-size: 14px; letter-spacing: .25px; color: #999 } .top-tools { display: flex; min-width: 0; align-items: center; padding: 1em 0 } .top-tools .top-tools__lesson-name { padding-right: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .top-tools .top-tools__progress { padding-right: 1em; color: #999; white-space: nowrap } .top-tools .top-tools__edit { margin-left: auto; margin-right: 1em; flex-shrink: 0 } .top-tools .top-tools__edit-link { display: flex; align-items: center; white-space: nowrap } .top-tools .top-tools__edit-link .svg-icon { height: 24px; width: 24px; margin-right: 1em } .top-tools .top-tools__edit-link .svg-icon svg { height: 100%; width: 100% } .top-tools .top-tools__edit-sign { display: none } @media screen and (max-width:768px) { .top-tools .top-tools__edit-sign, .top-tools .top-tools__progress { display: none } } @media (min-width:768px) { .top-tools { flex-wrap: wrap } } @media (min-width:1024px) { .top-tools .top-tools__edit-sign { display: inline } } @media (min-width:1170px) { .top-tools { flex-wrap: nowrap } .top-tools .top-tools__lesson-name { width: auto } } .course-promo-widget { position: relative; display: flex; border-radius: 3px; flex-direction: column; align-items: center; text-align: center; width: 100%; cursor: pointer } .course-promo-widget:hover { box-shadow: 0 2px 6px 0 #d6dbe2 } .course-promo-widget:not(:empty) { padding: 10px; border: 1px solid #d8d8d8; margin: 5px 0; min-height: 310px } .course-promo-widget .course-readiness-widget .svg-icon { color: #b7b7b7 } .course-promo-widget:hover .course-readiness-widget_readiness_high .svg-icon { color: #a5e5a5 } .course-promo-widget:hover .course-readiness-widget_readiness_low .svg-icon { color: #e7c4f5 } .course-promo-widget__title { --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; --link-line: none; --link-color: currentColor; flex-shrink: 10; width: 100%; line-height: 1.33; margin: 12px 0; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; font-size: 16px; color: #222; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden } .course-promo-widget__owners { list-style: none; margin: 18px 0 0; padding: 0; font-size: 14px; line-height: 1.1; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100% } .course-promo-widget__owners-item { display: inline } .course-promo-widget__owner { --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; --link-line: none; --link-color: #777 } .course-promo-widget__owners-item:after { content: ", " } .course-promo-widget__owners-item:last-child:after { content: "" } .course-promo-widget__cover { width: 120px; height: 120px; display: block } .course-promo-widget_skeleton .course-promo-widget__cover { border-radius: 5px } .course-promo-widget_skeleton .course-promo-widget__owners-item_placeholder { display: inline-block; height: 1em; border-radius: 4px; opacity: .5 } .course-promo-widget_skeleton .course-promo-widget__title_placeholder { display: inline-block; height: 1em; border-radius: 4px } .course-promo-widget__lock-icon { position: absolute; top: -8px; left: -10px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 5px; border-radius: 50%; background-color: #5e5e5e; color: #fff; border: 2px solid #fff } .course-promo-widget__lock-icon svg { width: 100%; height: 100% } .course-promo-widget__lock-icon.lock3_icon { background-color: #3e50cb } button.st-button_style_none.course-promo-widget__wishlist-btn { position: absolute; top: 8px; right: 10px; padding: 5px; font-size: 18px; color: var(--static-color, #999) } button.st-button_style_none.course-promo-widget__wishlist-btn:hover { color: #246024 } button.st-button_style_none.course-promo-widget__wishlist-btn:active { color: #1d4d1d } button.st-button_style_none.course-promo-widget__wishlist-btn[data-toggled] { --static-color: #66cc66 } button.st-button_style_none.course-promo-widget__wishlist-btn[data-loading] { cursor: progress } button.st-button_style_none.course-promo-widget__wishlist-btn .svg-icon { display: flex } .course-promo-widget__price { display: flex; align-items: baseline; margin: 12px 0 6px; font-size: 20px; font-weight: 500; letter-spacing: .15px; line-height: 1em } .course-promo-widget__price .format-price.format-price_free { color: #54ad54; font-size: 12px; letter-spacing: .4px } .course-promo-widget__price .display-price__price_regular { order: 1; margin-left: 9px; line-height: 1em; font-size: 16px; font-weight: 400; color: #999; letter-spacing: .25px } .course-promo-widget__tariff-badge { display: flex; margin: 0 0 16px } .course-promo-widget__tariff-badge>.course-tariff-badge { margin: 0 } .course-index__video-join-button, .course-promo-widget__tariff-badge+.course-promo-widget__price, .course-promo-widget__tariff-badge+.course-promo-widget__stats { margin-top: auto } .course-promo-widget__stats { list-style: none; align-self: stretch; display: flex; justify-content: space-between; margin: 0; min-height: 19px; color: #777; font-size: 14px } .course-promo-widget__stats-item { line-height: 16px; display: flex; align-items: center; justify-content: center; flex-basis: 33% } .course-promo-widget__stats-item:first-child { justify-content: flex-start } .course-promo-widget__stats-item:last-child { justify-content: flex-end } .course-promo-widget__stats-item .svg-icon { color: #b7b7b7; position: relative; font-size: 16px; line-height: 16px } .course-promo-widget__stats-item .svg-icon svg { height: 16px; width: 16px } .course-promo-widget__erolled-widget { background: #939393; font-size: 14px; padding: 0 10px; line-height: 2; position: absolute; top: 0; right: 0; color: #fff; border-bottom-left-radius: 3px } @media screen and (min-width:480px) { .course-promo-widget { width: 47% } .course-promo-widget:not(:empty) { margin: 5px } } @media screen and (min-width:680px) { .course-promo-widget { width: 31% } } @media screen and (min-width:790px) { .course-promo-widget { width: 23% } } @media screen and (min-width:1024px) { .course-promo-widget { width: 31.8%; max-width: 217px } } .user-subscribe-button .user-subscribe-button__link { margin-top: 0; padding: .3em 0; font-size: 14px; color: #5e5e5e } .user-subscribe-button .user-subscribe-button__button svg { color: #b7b7b7 } .user-subscribe-button .user-subscribe-button__count { display: inline-block; padding-left: .5em; color: #5e5e5e; font-size: .9em } .discussions-list .s-select { font-size: 14px; width: 100% } .discussions-list .s-select__select { width: 100% } @media screen and (min-width:768px) { .discussions-list .s-select { position: absolute; top: 0; right: 0; width: auto } .discussions-list .s-select__select { width: auto } } .comment-input__editor { margin-bottom: 16px; background-color: #fff; border: 1px solid #ccc; --rich-text-editor-border-radius: 4px } .comment-input__editor:focus-within { border-color: #999 } .comment-input__editor .rich-text-editor__content { min-height: 90px; max-height: 50vh; padding: 12px; font-size: inherit; overflow: auto; outline: 0 } .comment-input__editor .rich-text-editor__content>p:first-child, .comment-input__editor .rich-text-editor__content>span:first-child+p { margin-top: 0 } .comment-input__editor .rich-text-editor__content>:last-child { margin-bottom: 0 } .comment-input__maxlength { display: flex; flex-wrap: wrap; gap: 5px 20px; margin: -6px 0 12px; color: #999; font-size: 12px } .comment-input__maxlength-counter { margin-left: auto; color: #d41f1f } .comment-input__header { display: flex; flex-wrap: wrap } .comment-input__editor-toolbar-container { min-height: 41px } .comment-input__editor-toolbar-container>.cke_chrome { border: none } .comment-input__editor-toolbar-container .cke_inner { background: 0 0 } .comment-input__editor-toolbar-container .cke_top { background: 0 0; border: none } .comment-input__submission-selector { display: flex; align-items: center; margin-right: 8px } .comment-input__btns { margin: 16px -10px -6px 0 } .comment-input__btns>button { margin: 0 10px 6px 0; padding: 9px 24px } .comment-input__bait { font-size: 14px; color: #999; border-bottom: 1px solid #ccc; padding: 4px 0 8px; cursor: text; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .comment-input__bait:hover { border-bottom-color: #999; color: #5e5e5e } .comment-input[data-disabled] .comment-input__bait { cursor: default; color: #999 } .comment-input[data-disabled] .comment-input__bait:hover { border-bottom-color: #ccc } .comment-input__ban-note { background: rgba(255, 121, 101, .12); border: 1px solid #222; border-radius: 4px; padding: 16px; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: .25px } .comment-input__ban-note 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 } .comment-menu__title { font-size: 10px; line-height: 12px; letter-spacing: 1.5px; color: #777; margin-left: -8px } button.st-button_style_none.comment-menu__menu-toggler { padding: 3px; color: #a5a5a5 } button.st-button_style_none.comment-menu__menu-toggler:focus, button.st-button_style_none.comment-menu__menu-toggler:hover { color: #222 } button.st-button_style_none.comment-menu__menu-toggler svg { width: 18px; height: 18px; vertical-align: top } .item-tile { display: grid; grid-template-areas: "desc desc desc desc ." "cover title title value tools" "cover . . value tools" "cover subtitle subtitle . ." "cover body body body body" "cover footer action action action"; grid-auto-rows: -webkit-min-content; grid-auto-rows: min-content; padding: 20px 0; word-wrap: break-word; word-break: break-word; transition: box-shadow .1s; position: relative } .item-tile[data-unavailable] .item-tile__cover, .item-tile[data-unavailable] .item-tile__footer, .item-tile[data-unavailable] .item-tile__subtitle, .item-tile[data-unavailable] .item-tile__title { opacity: .38 } .item-tile+.item-tile { border-top: 1px solid #E9EBFA } .item-tile:focus-within { z-index: 3 } .item-tile:hover { box-shadow: 0 15px 18px -14px #E9EBFA, 0 3px 2px -2px #E9EBFA; z-index: 2 } .item-tile>* { position: relative; z-index: 1; pointer-events: none } .item-tile .ember-tooltip-target, .item-tile [tabindex="0"], .item-tile a, .item-tile button { pointer-events: auto } .item-tile .item-tile__link-wrapper { z-index: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0 } @media (min-width:769px) { .comment-menu__menu-toggler svg { transform: rotate(90deg) } button.st-button_style_none.comment-menu__menu-toggler { color: #4485ed } button.st-button_style_none.comment-menu__menu-toggler:focus, button.st-button_style_none.comment-menu__menu-toggler:hover { color: #1466C6 } button.st-button_style_none.comment-menu__menu-toggler svg { width: 16px; height: 16px } .item-tile:focus-within [data-hover=false], .item-tile:hover [data-hover=false], .item-tile:not(:hover):not(:focus-within) [data-hover=true] { visibility: hidden } } .item-tile__desc { grid-area: desc; font-size: 14px; line-height: 20px; color: #777; margin-bottom: 16px } .item-tile__cover { grid-area: cover; align-self: start; margin: 0 16px 0 0; width: 60px; height: 60px; position: relative } .item-tile__cover-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px } .item-tile__cover-badge { display: flex; position: absolute; right: -5px; top: -4px } .item-tile__cover-badge>.svg-icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background-color: #1466c6; color: #fff; border: 1px solid #fff; cursor: help } .item-tile__cover-badge>.svg-icon.eye-off_icon { background-color: #999 } .item-tile__cover-badge>.svg-icon>svg { width: 100%; height: 100%; vertical-align: top } .item-tile__cover-badge+.tooltip { white-space: nowrap } .item-tile__title { grid-area: title; margin: 0; font-size: 16px; font-weight: 500; line-height: 18px; letter-spacing: .15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .item-tile__body { grid-area: body } .item-tile__body[data-full-space] { grid-row-start: title; grid-row-end: footer; align-self: center } .item-tile__title_with_badge { display: block } .item-tile__title_with_badge .course-tariff-badge { vertical-align: bottom } .item-tile__title_with_badge .item-tile__title-link { display: -webkit-inline-box; -webkit-line-clamp: inherit; -webkit-box-orient: vertical; overflow: hidden; margin-right: 5px; vertical-align: bottom } .item-tile__subtitle-link, .item-tile__title-link { display: inline-block; --link-color: initial; --link-line-color: transparent; --link-line-offset: 0.1em; --link-hover-color: #5e5e5e; --link-hover-line-color: #5e5e5e; --link-active-color: #5e5e5e; --link-active-line-color: #5e5e5e } .item-tile__subtitle { grid-area: subtitle; margin: 6px 0 0; font-size: 14px; line-height: 20px; letter-spacing: .25px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .item-tile__subtitle strong { font-weight: 500 } .item-tile__footer { grid-area: footer; margin: 6px 0 -3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 12px; line-height: 14px; letter-spacing: .4px } html.no-flexbox-gap .item-tile__footer>* { margin-right: 16px } .item-tile__footer[data-hover=true] { font-size: 14px; line-height: 20px; letter-spacing: .25px } .item-tile__footer-badge { display: inline-flex; align-items: center; color: #999 } .item-tile__footer-badge>.svg-icon { display: flex; margin-right: 4px; font-size: 13px } .item-tile__footer-badge>.svg-icon.user_icon { font-size: 12px; transform: translateY(-1px) } .item-tile__footer-badge[data-danger] { color: #ff7965 } a.item-tile__footer-badge { --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 } .item-tile__footer-link { white-space: nowrap; text-overflow: ellipsis; --link-line-color: transparent } .item-tile__footer-link_primary { padding: 2px 12px; line-height: 20px; border-radius: 4px; background-color: #e7f2ff } .item-tile__tools { grid-area: tools; align-self: start; margin: 0 0 0 16px; display: flex; align-items: flex-start; height: 18px; gap: 2px } .item-tile__value { grid-area: value; margin: 0 0 0 16px; font-size: 16px; font-weight: 500; letter-spacing: .15px; line-height: 1; white-space: nowrap } button:not(.st-button_style_none).item-tile__tool-btn { padding: 3px; background: 0 0; border: none; color: #999; font-size: 18px; outline: 0 } button:not(.st-button_style_none).item-tile__tool-btn:focus, button:not(.st-button_style_none).item-tile__tool-btn:hover { color: #5e5e5e } button:not(.st-button_style_none).item-tile__tool-btn:active, button:not(.st-button_style_none).item-tile__tool-btn[data-active] { color: #222 } button:not(.st-button_style_none).item-tile__tool-btn .svg-icon { display: flex } button:not(.st-button_style_none).item-tile__pin:not([data-pinned]):not(:hover):not(:focus):not(:active) { color: #ccc } button:not(.st-button_style_none).item-tile__pin:not([data-pinned])>.svg-icon { transform: rotate(45deg) translateY(2px) } .item-tile__menu, .item-tile__menu>.drop-down-toggler { display: inline-flex } .item-tile__action { grid-area: action; align-self: end } .button:not(.st-button_style_none).item-tile__action, .item-tile__action, button:not(.st-button_style_none).item-tile__action { margin: 0 0 0 16px; font-size: 12px; line-height: 14px; letter-spacing: .4px; white-space: nowrap } .button:not(.st-button_style_none).item-tile__action, button:not(.st-button_style_none).item-tile__action { align-self: baseline; justify-self: end; padding: 6px 15px } @media (max-width:768px) { .discussions__sorting { max-width: 100vw; text-overflow: ellipsis } .item-tile [data-hover=true] { visibility: hidden } .item-tile__subtitle, .item-tile__title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden } .item-tile { padding: 12px 0 16px; grid-template-areas: "desc desc desc desc ." "cover title title title tools" "cover subtitle subtitle subtitle subtitle" "cover body body body body" "cover footer footer footer footer" "cover value value value value" "cover action action action action" } .item-tile__cover { margin: 0 12px 0 0; width: 40px; height: 40px } .item-tile__cover-badge>.svg-icon { width: 20px; height: 20px } .item-tile__subtitle { margin: 6px 0 0; font-size: 12px; line-height: 14px; letter-spacing: .4px } .item-tile__footer { margin: 10px 0 0; gap: 4px 12px } .button:not(.st-button_style_none).item-tile__action, .item-tile__action, .item-tile__value, button:not(.st-button_style_none).item-tile__action { margin: 10px 0 0 } .button:not(.st-button_style_none).item-tile__action, button:not(.st-button_style_none).item-tile__action { align-self: baseline; justify-self: start } } .learn-course-tile__price .display-price__price_regular .format-price>[data-type=currency], .learn-course-tile__price .display-price__price_regular .format-price>[data-type=literal], .teach-course-tile__price .display-price__price_regular .format-price>[data-type=currency], .teach-course-tile__price .display-price__price_regular .format-price>[data-type=literal] { display: none } .teach-course-tile__footer-reviews-link { flex-basis: 100%; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; --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) } .teach-course-tile__price .display-price__price_regular { margin-right: 2px; font-size: 12px; font-weight: 400; letter-spacing: .25px; color: #999 } .learn-course-tile__course-authors { overflow-wrap: anywhere } .learn-course-tile__course-author-link { display: inline } .learn-course-tile__footer-progress>.progress-pie { margin-right: 4px; color: #54ad54 } .learn-course-tile__footer-cert.user-certificate-widget, .user-certificate-widget.learn-class-tile__footer-cert { font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit } .learn-class-tile__footer-cert .user-certificate-widget__icon, .learn-course-tile__footer-cert .user-certificate-widget__icon { margin-right: 0 } .learn-course-tile__footer-deadlines>span:not(.svg-icon) { color: #3e50cb } .learn-class-tile__action-continue-not-available, .learn-class-tile__action-enroll-not-available, .learn-course-tile__action-continue-not-available, .learn-course-tile__action-enroll-not-available { font-size: 12px; line-height: 14px; letter-spacing: .4px; color: #ff7965 } .learn-course-tile__price { font-size: 16px; font-weight: 500; line-height: 1.13; letter-spacing: .15px; color: #6c7bdf } .learn-course-tile__price .format-price.format-price_free { font-size: 14px; color: #6c6 } .learn-course-tile__price .display-price__price_regular { margin-right: 2px; font-size: 12px; font-weight: 400; letter-spacing: .13px; color: #3e50cb } .learn-course-tile__price .display-price__price_discount { color: #ff7965 } @media (min-width:769px) { .teach-class-tile .item-tile__cover, .teach-lesson-tile .item-tile__cover { width: 48px; height: 48px } .learn-course-tile__course-authors { margin-top: 4px } .learn-course-tile__course-author-link { --link-color: #999 } .search-lesson-step-tile .item-tile__cover { width: 45px; height: 45px } } .search-comment-tile .item-tile__title { display: flex; align-items: baseline } .search-comment-tile .item-tile__cover { width: 35px; height: 35px; border-radius: 8px; margin-right: 10px } .search-comment-tile__user { font-size: 14px; font-weight: 500; line-height: 16px; letter-spacing: .15px } .search-comment-tile__user[data-role=student]>a { --link-color: #222; --link-line: underline; --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); --link-disabled-hover-color: rgba(34, 35, 188, 0.5); --external-link-icon-color: #222; --link-line-color: transparent } .search-comment-tile__user:not([data-role=student])>a { padding: 2px 12px !important } .search-comment-tile__date { font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: .25px; color: #777; margin-left: 8px } .search-comment-tile__comment { margin-top: 4px } .search-comment-tile__comment.rich-text-viewer { line-height: 1.29; font-size: 14px } .search-comment-tile__comment.rich-text-viewer p { margin: .4em 0 } .search-comment-tile__comment.rich-text-viewer p:first-child { margin-top: 0 } .search-comment-tile__comment.rich-text-viewer p:last-child { margin-bottom: 0 } .search-comment-tile__comment.rich-text-viewer code { background-color: #fff } .search-comment-tile__submission:not([data-plugin=code]) { background-color: #f3f4f6 !important } .search-comment-tile__votes { display: flex; align-items: baseline; margin-top: 4px } .search-comment-tile__vote { color: #ccc; margin-right: 16px } .search-comment-tile__vote .svg-icon { opacity: .38 } .search-comment-tile__vote .svg-icon, .search-comment-tile__vote .svg-icon svg { width: 18px; height: 18px } .search-comment-tile__vote[data-type=abuse] .svg-icon svg { transform: rotate(180deg) translateY(-5px) } .search-comment-tile__vote>span { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: #777; margin-left: 4px } .course-review-card { display: grid; align-items: center; grid-template-areas: "score title cover" "content content cover" "info info info" "actions actions actions" "reply reply reply"; grid-template-columns: -webkit-min-content 1fr -webkit-min-content; grid-template-columns: min-content 1fr min-content; grid-template-rows: -webkit-min-content 1fr -webkit-min-content -webkit-min-content; grid-template-rows: min-content 1fr min-content min-content; gap: 8px 16px; border-radius: 4px } .course-review-card[data-is-editing] { background-color: rgba(255, 206, 110, .12); margin: -8px; padding: 8px } .course-review-card[data-is-target] { -webkit-animation: card-highlight 2s alternate 2; animation: card-highlight 2s alternate 2; margin: -8px; padding: 8px } .course-review-card[data-theme=course-promo] { grid-template-areas: "score title" "content content" "info info" "actions actions" "reply reply"; grid-template-columns: -webkit-min-content 1fr; grid-template-columns: min-content 1fr } @media (max-width:768px) { .course-review-card[data-with-mobile] { grid-template-areas: "cover title" "cover score" "content content" "info info" "actions actions" "reply reply"; grid-template-columns: -webkit-min-content 1fr; grid-template-columns: min-content 1fr; grid-template-rows: -webkit-min-content -webkit-min-content 1fr -webkit-min-content -webkit-min-content; grid-template-rows: min-content min-content 1fr min-content min-content } .course-review-card[data-with-mobile] .course-review-card__score { margin-top: -4px } } .course-review-card[data-theme=course-review-taken] { grid-template-areas: "score title" "content content"; grid-template-columns: -webkit-min-content 1fr; grid-template-columns: min-content 1fr; grid-template-rows: -webkit-min-content 1fr; grid-template-rows: min-content 1fr; border-left: 2px solid #E9EBFA; padding: 0 0 0 12px } .course-review-card[data-theme=course-review-taken] .course-review-card__text button.btn-details { --btn-details-color: #777; --btn-details-underline-color: rgba(34, 34, 34, 0.28) } .course-review-card[data-theme=course-review-replied] { grid-template-areas: "score title" "info info" "actions actions" "reply reply"; grid-template-columns: -webkit-min-content 1fr; grid-template-columns: min-content 1fr; grid-template-rows: -webkit-min-content -webkit-min-content 1fr; grid-template-rows: min-content min-content 1fr; gap: 0 16px } .course-review-card[data-theme=course-review-replied] .course-review-card__text button.btn-details { --btn-details-color: #777; --btn-details-underline-color: rgba(34, 34, 34, 0.28) } .course-review-card[data-theme=course-review-replied] .course-review-card__reply-card, .course-review-card[data-theme=course-review-replied] .course-review-card__reply-editor { margin: 14px 0 0; padding: 0; background-color: transparent !important } .course-review-card[data-theme=course-review-replied] .course-review-card__info, .course-review-card[data-theme=course-review-replied] .course-review-card__score { border-left: 2px solid #E9EBFA; padding: 0 0 0 12px } .course-review-card[data-theme=course-review-replied] .course-review-card__info { padding-top: 8px } .course-review-card__title { grid-area: title; font-weight: 500; line-height: 16px; letter-spacing: .15px; --link-color: #222; --link-line: underline; --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; --link-line-color: transparent } .course-review-card__text { grid-area: content; --show-more-fog: rgba(0, 0, 0, 1) calc(100% - 30px), rgba(0, 0, 0, 0.5) calc(100% - 15px), rgba(0, 0, 0, 0.1) calc(100% - 5px), rgba(0, 0, 0, 0) 100% } .course-review-card__text button.btn-details { display: block; margin-top: 10px } .course-review-card__text .show-more[data-truncated]+.btn-details { margin-top: 2px } .course-review-card__text .show-more__content { font-size: var(--course-review-card-text-font-size, 14px); font-weight: var(--course-review-card-text-font-weight, 400); line-height: var(--course-review-card-text-line-height, 20px); letter-spacing: var(--course-review-card-text-letter-spacing, .25px); white-space: pre-line; overflow-wrap: break-word } .course-review-card__info, .course-review-reply-card { font-size: 14px; line-height: 20px; letter-spacing: .25px; font-weight: 400 } .course-review-card__info { grid-area: info; display: flex; align-items: flex-start; gap: 12px } .course-review-card__author { --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-review-card__date { color: #777 } .course-review-card__score { grid-area: score; display: flex; position: relative; min-width: 100px; --rating-stars-color: #FFCE6E } .course-review-card__score .rating_stras__star, .course-review-card__score .rating_stras__star .svg-icon, .course-review-card__score .rating_stras__star svg { width: 20px; height: 20px; margin: 0 } .course-review-card__cover { grid-area: cover; align-self: start; position: relative } .course-review-card__cover, .course-review-card__cover figure { width: 36px; height: 36px; margin: 0 } .course-review-card__cover-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px } .course-review-card__cover-badge { display: flex; position: absolute; right: -5px; top: -4px } .course-review-card__cover-badge>.svg-icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background-color: #1466c6; color: #fff; border: 1px solid #fff; cursor: help } .course-review-card__cover-badge>.svg-icon.eye-off_icon { background-color: #999 } .course-review-card__cover-badge>.svg-icon>svg { width: 100%; height: 100%; vertical-align: top } .course-review-card__cover-badge+.tooltip { white-space: nowrap } .course-review-card__actions { grid-area: actions; display: flex; justify-content: flex-start; flex-direction: row; gap: 24px; margin-top: 4px } .course-review-card__actions button.btn-details { -webkit-text-decoration-line: none; text-decoration-line: none; --btn-details-arrow-size: 10px; --btn-details-arrow-offset: 4px } .course-review-card__menu-toggler.st-button_style_none { padding: 3px; color: #4485ed } .course-review-card__menu-toggler.st-button_style_none:focus, .course-review-card__menu-toggler.st-button_style_none:hover { color: #1466C6 } .course-review-card__menu-toggler.st-button_style_none svg { transform: rotate(90deg); width: 16px; height: 16px; vertical-align: top } .course-review-card__reply { grid-area: reply; display: flex; justify-content: space-between; flex-direction: column; margin-top: -8px } .course-review-card__reply-card, .course-review-card__reply-editor { margin: 16px 0 0 16px } .course-review-card__reply-card { background-color: #f6f6f6; padding: 16px; border-radius: 4px } .course-review-card__reply-card[data-is-edited] { -webkit-animation: card-highlight 2s alternate 2; animation: card-highlight 2s alternate 2 } .course-review-card__reply-editor { margin-bottom: 24px } .course-review-reply-card { display: grid; grid-template-areas: "content tools" "info-changes info-changes" "info info"; align-items: center; grid-template-columns: 1fr -webkit-min-content; grid-template-columns: 1fr min-content; grid-template-rows: -webkit-min-content -webkit-min-content -webkit-min-content; grid-template-rows: min-content min-content min-content; gap: 8px; -webkit-font-smoothing: antialiased } [data-theme=course-review-replied] .course-review-reply-card { grid-template-areas: "content tools" "info-changes info-changes"; grid-template-columns: 1fr -webkit-min-content; grid-template-columns: 1fr min-content; grid-template-rows: -webkit-min-content -webkit-min-content; grid-template-rows: min-content min-content } .course-review-reply-card__content { grid-area: content; font-size: var(--course-review-card-reply-font-size, 14px); font-weight: var(--course-review-card-reply-font-weight, 400); line-height: var(--course-review-card-reply-line-height, 20px); letter-spacing: var(--course-review-card-reply-letter-spacing, .25px); white-space: pre-line; overflow-wrap: break-word } .course-review-reply-card__tools { grid-area: tools; align-self: start } .course-review-reply-card__info { grid-area: info; display: flex; align-items: flex-start; gap: 12px } .course-review-reply-card__tools+.course-review-reply-card__info { margin-top: -8px } .course-review-reply-card__author { --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-review-reply-card__author[data-skeleton] { min-width: 100px } .course-review-reply-card__date { color: #999 } .course-review-reply-card__info-changes { grid-area: info-changes; display: flex; align-items: flex-start; gap: 4px; font-size: 12px; font-style: italic; font-weight: 400; line-height: 14px; letter-spacing: .4px; color: #777 } .course-review-reply-card__info-changes .course-review-reply-card__author { --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 } .course-review-reply-card__info-changes .course-review-reply-card__date { color: inherit } button.st-button_style_none.course-review-reply-card__menu-toggler { padding: 3px; color: #a5a5a5 } button.st-button_style_none.course-review-reply-card__menu-toggler:focus, button.st-button_style_none.course-review-reply-card__menu-toggler:hover { color: #222 } button.st-button_style_none.course-review-reply-card__menu-toggler svg { width: 18px; height: 18px; vertical-align: top } .course-review-editor { display: grid; grid-template-areas: "content" "actions"; align-items: center; grid-template-columns: 1fr; grid-template-rows: -webkit-min-content -webkit-min-content; grid-template-rows: min-content min-content; gap: 16px; -webkit-font-smoothing: antialiased } .course-review-editor__content { grid-area: content } .course-review-editor__content textarea.st-input { font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: .25px } .course-review-editor__actions { grid-area: actions; display: flex } .course-review-editor__actions .button, .course-review-editor__actions button { padding: 9px 24px } .course-info, .course-info__about-course, .course-review__modal-top { padding-top: 30px } @-webkit-keyframes card-highlight { 100% { background-color: rgba(255, 206, 110, .3) } } @keyframes card-highlight { 100% { background-color: rgba(255, 206, 110, .3) } } .course-list__item { margin: 5px 0 } @media only screen and (min-width:480px) { .course-list__item { margin: 5px 1vw } } @media only screen and (min-width:768px) { .course-list__item { margin: 0 } } .course-info { padding-bottom: 30px } .course-info video { max-width: 100%; display: block; margin: 0 auto } .course-info__rating { margin: 0; align-items: center; padding: 0 1em } .course-info__rating .rating-stars { font-size: 1.3em } .course-join-button .button { display: inline-flex; align-items: center; justify-content: center } .course-join-button .button svg { width: 18px; height: 18px; color: #b7b7b7; margin-right: 10px } .course-checklist { font-size: 14px; max-width: 640px } .course-checklist__item { display: flex; justify-content: space-between } .course-checklist__item+.course-checklist__item { margin-top: 14px } .course-checklist__group+.course-checklist__group { margin-top: 32px } .course-checklist__group-title { font-weight: 500; font-size: 18px; line-height: 22px; letter-spacing: .17px; margin: 0 0 16px } .course-checklist__icon { font-size: 18px; margin-right: 12px; width: 18px } .course-checklist__content { flex: 1; margin-right: 12px } .course-checklist__text { display: inline-block; max-width: 408px; font-size: 14px; line-height: 20px; letter-spacing: .25px } .course-checklist__desc { max-width: 408px; font-size: 12px; line-height: 14px; letter-spacing: .4px; color: #777 } .course-checklist__action { flex: 1; text-align: right; max-width: 250px } .course-checklist__links { margin-top: 24px; border: 1px solid #f3f4f6; border-radius: 4px; padding: 16px; font-size: 14px; line-height: 20px; letter-spacing: .25px } .course-checklist__links a { white-space: nowrap } .course-checklist__links 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); 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-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100%; mask-size: 100%; background-color: var(--external-link-icon-color, #1466C6) } .course-checklist__nav { position: -webkit-sticky; position: sticky; top: var(--header-height); padding: 24px 16px 0 } .course-checklist__nav-title { margin: 0 0 16px; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: .15px } .course-checklist__nav-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 } .course-checklist__nav-menu .menu-item>a, .course-checklist__nav-menu .menu-item>button { position: relative; display: flex; justify-content: space-between; height: 32px; font-size: 14px; line-height: 16px; font-weight: 400; letter-spacing: .15px } .course-checklist__nav-menu .menu-item>a.active, .course-checklist__nav-menu .menu-item>a[data-active], .course-checklist__nav-menu .menu-item>button.active, .course-checklist__nav-menu .menu-item>button[data-active] { font-weight: 500 } .active .course-checklist__nav-menu-item-text::before, .course-checklist__nav-menu-item-text [data-active]::before { content: ""; position: absolute; left: 0; top: calc(50% - .5em); height: 1em; border-left: 2px solid #54ad54 } .course-checklist-refresh:not(.st-button_style_none) { background-color: transparent; padding: 6px; font-size: 12px; color: #999 } .course-checklist-refresh:not(.st-button_style_none):focus, .course-checklist-refresh:not(.st-button_style_none):hover { background-color: #f6f6f6; color: #222 } .course-checklist-refresh:not(.st-button_style_none).disabled, .course-checklist-refresh:not(.st-button_style_none)[aria-disabled=true], .course-checklist-refresh:not(.st-button_style_none)[disabled] { background-color: #f6f6f6; color: #5E5E5E } .course-checklist-refresh:not(.st-button_style_none)[data-is-running] { padding: 6px 16px 6px 10px } .course-readiness { font-size: 14px } .course-readiness .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 } .course-readiness h3 { font-weight: 500; font-size: 16px; line-height: 18px; letter-spacing: .15px; margin-bottom: 18px } .course-readiness .course-settings-price-editor { font-size: 16px } .course-readiness__item { display: flex; justify-content: space-between; transition: opacity .4s } .course-readiness__item+.course-readiness__item { margin-top: 14px } [data-is-running] .course-readiness__item { opacity: .3 } .course-readiness__icon { display: flex; justify-content: center; align-items: center; font-size: 18px; margin-right: 8px; width: 18px; height: 18px } .course-readiness__icon>.svg-icon { display: flex } .course-readiness__icon .question_icon { font-size: 16px; width: 16px; height: 16px; color: #999 } .course-readiness__content { flex: 1; margin-right: 12px } .course-readiness__text { display: inline-block; font-size: 14px; line-height: 20px; letter-spacing: .25px } .course-readiness__actions { margin-top: 18px } .course-readiness__actions p+button { margin-top: 16px } .course-readiness__actions .button, .course-readiness__actions button:not(.st-button_style_none) { padding: 9px 24px } .course-readiness-widget .svg-icon svg { height: 19px; width: 19px } .course-readiness-widget_readiness_high .svg-icon { color: #6c6 } .course-readiness-widget_readiness_low .svg-icon { color: red } .course-buy-widget h2 { font-size: 20px; font-weight: 500; line-height: 23px; letter-spacing: .15px } .course-buy-widget .modal-popup__overlay { background-color: #222; -webkit-animation: none !important; animation: none !important } .course-buy-widget__type { margin-bottom: 24px } .course-buy-widget__form-section { margin-bottom: 16px } .course-buy-widget__form-row { display: flex; flex-direction: row; font-size: 14px; line-height: 20px; letter-spacing: .25px; padding: 8px 0 } .course-buy-widget__form-row:first-child { padding-top: 0 } .course-buy-widget__form-caption { width: var(--form-caption-width, 116px); padding-right: 8px } .course-buy-widget__form-caption[data-required]::after { content: "*"; margin-left: 1px; color: #d41f1f } .course-buy-widget__form-data { flex: 1 } .course-buy-widget__form-field { width: 100%; max-width: 360px } .course-buy-widget__form-field .date-picker__input, .course-buy-widget__form-field .st-input { width: 100%; margin: 0 } .course-buy-widget__form-field textarea { font-size: 14px; resize: none } .course-buy-widget__form-field .the-form-field__footnote { display: flex; color: #777; padding-right: 45px } .course-buy-widget__form-field .the-form-field__char-counter[data-pos=footnote] { font-size: 12px; bottom: 0; top: auto } .course-buy-widget__date-picker-input[type=text] { border-radius: 4px; width: 186px; padding: 8px 12px } .course-buy-widget__promocode { margin-top: 4px; padding: 10px 0 } .course-buy-widget__promocode-field { width: 224px } .course-buy-widget__promocode-field input[type=text] { margin-bottom: 0; border: none; font-size: 14px; height: 36px } .course-buy-widget__promocode-field-wrap { height: 36px; border: 1px solid var(--validation-border-color, #999); border-radius: 4px; display: inline-flex; align-items: center; overflow: hidden } .course-buy-widget__promocode-field-wrap input[type=text] { padding-right: 32px; width: 100% } .course-buy-widget__promocode-field-wrap .svg-icon { position: relative; display: inline-block; margin-left: -28px; margin-right: 6px; color: #999 } .course-buy-widget__promocode-field-wrap .svg-icon, .course-buy-widget__promocode-field-wrap .svg-icon svg { height: 22px; width: 22px } .course-buy-widget__promocode-btn:not(.st-button_style_none) { margin-left: 8px; font-size: 16px; height: 36px; padding: 9px 24px } .course-buy-widget__promocode-form { display: flex; align-items: flex-start } .course-buy-widget__promocode-form[data-hidden] { display: none } .course-buy-widget__promocode-toggler.st-button_style_none { font-size: 14px; line-height: 20px; color: #54ad54; padding: 0; display: inline-flex; justify-content: center; align-items: center } .course-buy-widget__promocode-toggler.st-button_style_none[data-hidden] { display: none } .course-buy-widget__promocode-toggler.st-button_style_none .svg-icon { align-items: center; display: inline-flex; justify-content: center; margin-left: 8px } .course-buy-widget__promocode-toggler.st-button_style_none .svg-icon, .course-buy-widget__promocode-toggler.st-button_style_none .svg-icon svg { width: 8px; height: 5px } .course-buy-widget__promocode-toggler-caption { border-bottom: 1px dashed rgba(84, 173, 84, .28) } .course-buy-widget__promocode-toggler:hover .course-buy-widget__promocode-toggler-caption { border-bottom-color: #54ad54 } .course-buy-widget__form-price { display: flex; align-items: baseline; font-size: 20px; font-style: normal; font-weight: 500; line-height: 23px; letter-spacing: .15px } .course-buy-widget__form-price .display-price__price_regular { order: 1; margin-left: 12px; font-size: 18px; color: #999 } .course-buy-widget__form-price .display-price__price_regular [data-type=fraction] { opacity: 1; font-size: 13px } .course-buy-widget__form-price .display-price__price_discount [data-type=fraction] { opacity: 1; font-size: 14px } .course-buy-widget__active-promocodes { list-style: none; margin: 0 } .course-buy-widget__active-promocodes li { display: flex } .course-buy-widget__reset-active-promocode .svg-icon { display: inline-block; color: #999; transition: color .1s ease-in } .course-buy-widget__reset-active-promocode .svg-icon, .course-buy-widget__reset-active-promocode .svg-icon svg { height: 10px; width: 10px } .course-buy-widget__reset-active-promocode:hover .svg-icon { color: #222 } .course-buy-widget__active-promocodes-note { font-size: 12px; color: #288b28 } .course-buy-widget__active-promocodes-note .format-price { font-weight: 500 } .course-buy-widget__active-promocodes-note .format-price>[data-type=fraction] { font-size: 10px } .course-buy-widget__additional-info { margin-top: 24px; font-size: 12px; line-height: 14px; letter-spacing: .4px; white-space: normal } .course-buy-widget__how-can-i-pay, .course-buy-widget__how-to-installments, .course-buy-widget__pay-from-company { margin-bottom: 16px } .course-buy-widget__support-notice, .course-buy-widget__user-agreement { display: inline } .course-buy-widget__support-notice a, .course-buy-widget__user-agreement 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-buy-widget__card-type { margin-bottom: 24px; display: flex; align-items: center; white-space: normal; justify-content: flex-start } .course-buy-widget__card-help { margin-left: 0; color: #a5a5a5; cursor: help } .course-buy-widget__card-help, .course-buy-widget__card-help svg { display: inline-flex; width: 24px; height: 24px } @media (max-width:576px) { .quiz__manual-score-upload-btn { --data-tooltip-max-width: 70vw } .course-buy-widget__promocode-form { flex-direction: column } .course-buy-widget__promocode-field { width: auto } .course-buy-widget__promocode-btn:not(.st-button_style_none) { margin-left: 0; margin-top: 8px } } .user-comments__course, .user-comments__user { border: 1px solid #d8d8d8; border-radius: 6px; padding: 30px; margin-bottom: 1.5em } .user-comments__course { padding-top: 20px; padding-bottom: 20px } .user-comments__user { display: flex; flex-direction: row; justify-content: space-between } .user-comments__user-widget { flex: 1 } .user-comments__user-actions { margin-left: 1.5em } .user-comments__user-actions>button { margin-left: 16px } .user-comments__item { display: flex; flex-direction: row; justify-content: space-between; margin-top: 1em } .user-comments__empty, .user-comments__item:first-child { margin-top: 0 } .user-comments__comment { flex: 1 } .user-comments__comment-actions { margin-left: 1em } .user-comments__comment-actions svg { height: 16px; width: 16px } .user-comments__reply:not(:last-child) { margin-bottom: 16px } .course-rating { display: grid; grid-gap: 0 4px; grid-template-areas: "average star distr" "max space count"; grid-template-columns: auto auto -webkit-min-content; grid-template-columns: auto auto min-content; align-items: center; justify-content: start } .course-rating__average { grid-area: average; font-size: 42px; font-weight: 900; letter-spacing: .4px; line-height: 1 } .course-rating__max { grid-area: max; font-size: 12px; justify-self: center } .course-rating__distribution { grid-area: distr; justify-self: end; margin-left: 14px } .course-rating__star { grid-area: star; color: #FFCE6E } .course-rating__star, .course-rating__star svg { width: 20px; height: 21px } .course-rating__rate-stars { color: #999; white-space: nowrap; display: flex; justify-self: end } .course-rating__rate-star { display: flex } .course-rating__rate-star:not(:first-child) { margin-left: 1px } .course-rating__rate-star, .course-rating__rate-star svg { width: 7px; height: 9px } .course-rating__rate { display: grid; grid-gap: 8px; grid-template-columns: 1fr auto; align-items: center } .course-rating__rate meter { height: 2px; width: 80px; --meter-color: #999; --meter-background: #e5e5e5 } .course-rating__count { grid-area: count; font-size: 12px; justify-self: right } .rating-badge { display: flex; gap: 2px; align-items: center; font-size: var(--rating-badge-font-size, 16px); line-height: var(--rating-badge-line-height, 18px); font-weight: var(--rating-badge-font-weight, 500); letter-spacing: var(--rating-badge-letter-spacing, .15px); --rating-badge-icon-size: 18px; -webkit-font-smoothing: antialiased } .rating-badge[data-hidden] { display: none } .rating-badge[data-theme=small] { --rating-badge-font-size: 14px; --rating-badge-line-height: 16px; --rating-badge-font-weight: 500; --rating-badge-icon-size: 16px } .rating-badge[data-theme=min] { --rating-badge-font-size: 12px; --rating-badge-line-height: 14px; --rating-badge-font-weight: 400; --rating-badge-icon-size: 16px } .rating-badge__icon { display: inline-flex; color: var(--rating-badge-icon-color, var(--theme-color-base-warning-2)); font-size: var(--rating-badge-icon-size, inherit) } .rating-badge__average { font-style: normal; color: var(--rating-badge-color, var(--theme-color-fg-primary)) } .rating-badge__count { font-style: normal; color: var(--rating-badge-count-color, var(--rating-badge-color, var(--theme-color-fg-primary))) } .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 } .review-viewer { white-space: pre-line; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; word-break: break-word } .course-review__main { margin: 15px 0; border: 1px solid #d3d3d3; border-radius: 4px } .course-review__main[data-is-editor] { border: none } .course-review__main[data-is-editor] .course-review__content { margin: 0 } .course-review__main.author-review { border: 1px solid #3c3 } .course-review__main.can-open:hover { box-shadow: 0 0 10px rgba(0, 0, 0, .1) } .course-review__main.can-open:hover .course-review__link-indicator { display: inline-block } .course-review__main .course-review__link-indicator { color: #5e5e5e; display: none } .course-review__main .s-radio { margin-right: 10px } .course-review__main .course-review__button, .course-review__main .course-review__button-delete { display: inline-block; margin-right: 16px } .course-review__main .course-review__button-delete { margin-right: 32px } .course-review-popup { margin: 60px -6px 0 } .course-review__header { display: flex; margin: 10px 0 15px 15px } .course-review__content { margin: 20px } .course-review__content textarea { resize: none } .course-review__rating { display: flex; margin-left: auto; margin-right: 10px } .course-review__rating .course-review__rating-spacing { margin-right: 8px; color: #5e5e5e } .course-review__rating .course-review__rating-spacing_mobile { display: inline; color: #f3ab34; font-size: 1.5em; line-height: 1.1; margin-right: 5px } .course-review__date-author { display: block; font-size: 12px; color: #5e5e5e } .course-review__author, .course-review__avatar, .course-review__badge, .course-review__date, .course-review__link, .course-review__pin { margin: 0 .5rem } .course-review__avatar { margin-left: 0 } .course-review__author { cursor: pointer; position: relative; color: #1466c6; display: block } .course-review__author:hover { color: #000 } .course-review__author::before { position: absolute; left: -.85em; transition: all .3s ease-out; opacity: 0 } .course-review__author:hover::before { transition: all .3s ease-in; opacity: 1 } .course-review__modal-top .course-review__main { margin-bottom: 0 } .course-review__modal-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap } .course-review__modal-bottom .course-review__share-buttons { padding: 3px 0 } .course-review__modal-bottom .course-review__share-buttons .share-buttons__buttons .ya-share2__icon { width: 36px; height: 36px } .course-review__modal-bottom .course-review__share-buttons .share-buttons__buttons .ya-share2__container_size_m .ya-share2__icon { background-size: 36px } .course-reivew__trans-btn.st-button_style_none { margin-top: 15px; color: #5e5e5e; padding: 0; font-size: 12px } .course-reivew__trans-text { margin-top: 15px } @media (min-width:768px) { .course-review__rating { margin-right: 20px } } .course-review-summary { display: inline-block; line-height: 1; font-size: 14px } .course-review-summary__header { padding-bottom: 1em; display: inline-flex; align-items: center; width: 100%; border-bottom: 1px solid #d8d8d8 } .course-review-summary__average { font-size: 20px; margin-left: auto } .course-review-summary__stars { margin: 2px 0 0 10px; font-size: 14px } .course-review-summary__no-reviews { font-size: 12px; color: #5e5e5e } .course-review-summary__stats { margin: 20px 0 0 } .course-review-summary__stats-name { font-weight: 400; display: inline-block } .course-review-summary__stats-value { float: right; margin-bottom: 0; display: inline-block; font-weight: 700 } .course-user-review-legacy__controls { margin-bottom: 20px } .course-user-review-legacy__threshold-note { margin-left: 16px; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: .25px } .toc-syllabus__section-widget { margin-top: 1px; border: 1px solid #ccc } .toc-syllabus__lessons { counter-reset: section; margin: 0 0 30px 30px; position: relative; border: 1px solid #ccc; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px } .toc-syllabus__lesson:not(:last-child):before { content: ""; position: absolute; left: 2%; bottom: 0; height: 1px; width: 96%; border-bottom: 1px solid #ccc } .toc-syllabus-section { padding: 14px 20px 14px 30px; line-height: 1.3; background: #fff; position: relative } .toc-syllabus-section[data-foldable] { cursor: pointer } .toc-syllabus-section .tooltip { line-height: 1.4; font-size: 12px; text-align: center; max-width: 350px } .toc-syllabus-section__header { display: flex; align-items: baseline } .toc-syllabus-section__title { flex: 1; font-size: 20px; color: #222; font-weight: 500; letter-spacing: .15px } .toc-syllabus-section__progress { display: flex } .toc-syllabus-section__progress[data-without-progress] .toc-syllabus-section__progress-pie { --progress: 100 !important; color: #d8d8d8 } .toc-syllabus-section__progress-pie { width: 20px; height: 20px } .toc-syllabus-section__progress-pie+.toc-syllabus-section__score { margin-left: 8px } .toc-syllabus-section__score { display: flex; color: #999 } .toc-syllabus-section__description { margin-top: 14px; line-height: 1.44; letter-spacing: .3px } .toc-syllabus-section__time-info { font-size: 14px; margin-top: 10px; line-height: 1.44 } .toc-syllabus-section__time-info time { font-weight: 700; display: inline-block } .toc-syllabus-section__time-info time:hover { color: #000; cursor: default } .toc-syllabus-section__time-info>div+div { margin-top: 4px } .toc-syllabus-section__position { color: #999 } .toc-syllabus-section__status-row { display: flex; flex-direction: row; justify-content: space-between; margin-top: 16px } .toc-syllabus-section__status-message { font-size: 14px; color: #3e50cb; line-height: 1.43; letter-spacing: .25px; margin-bottom: 0 } .toc-syllabus-section__status-message 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) } .toc-syllabus-section__status-btn:not(.st-button_style_none) { padding: 7px 16px; border-radius: 16px; font-size: 14px } .toc-syllabus-section__status-btn:not(.st-button_style_none) .svg-icon { width: 18px; height: 18px } .toc-syllabus-section__status-btn:not(.st-button_style_none), .toc-syllabus-section__status-btn:not(.st-button_style_none)[aria-disabled=true] { background-color: #eaecf0; color: #222; border: 1px solid transparent; cursor: default } .toc-syllabus-section__status-btn:not(.st-button_style_none) .svg-icon, .toc-syllabus-section__status-btn:not(.st-button_style_none)[aria-disabled=true] .svg-icon { color: #999 } .toc-syllabus-section__status-btn:not(.st-button_style_none):hover { border-color: #ccc } .toc-syllabus-section__edit-btn.button:not(.st-button_style_none) { width: 40px; padding: 10px 0; margin-left: 10px } .toc-syllabus-section__edit-btn .svg-icon, .toc-syllabus-section__edit-btn .svg-icon svg { height: 14px; width: 100% } .toc-syllabus-section__exam-finished-btn:not(.st-button_style_none) { padding: 7px 16px; border-radius: 16px; font-size: 14px } .toc-syllabus-section__exam-finished-btn:not(.st-button_style_none) .svg-icon { width: 18px; height: 18px } .toc-syllabus-section__exam-finished-btn:not(.st-button_style_none), .toc-syllabus-section__exam-finished-btn:not(.st-button_style_none)[aria-disabled=true] { background-color: #E9EBFA; color: #3e50cb; cursor: default } .toc-syllabus-section__continue { display: flex; flex-direction: row; justify-content: space-between; align-items: center } .toc-syllabus-section__continue-timer+.toc-syllabus-section__continue-btn { margin-left: 25px } .toc-syllabus-section__continue-timer { font-size: 18px; font-weight: 700; line-height: 1.11; letter-spacing: .32px; color: #222 } .toc-syllabus-section__continue-timer .time-left { display: flex } .toc-syllabus-section__continue-timer [data-sep]+[data-part] { margin-left: 4px } .toc-syllabus-section__continue-timer [data-sep] { display: none } .toc-syllabus-section__continue-timer [data-label] { font-size: 14px; font-weight: 400 } .toc-syllabus-section__progress-bar { display: block; min-height: 100%; width: 6px; background: #eee; position: absolute; top: 0; left: 0 } .toc-syllabus-section__progress-bar::after { content: ""; display: block; height: 0; width: 6px; background: #6c6; position: absolute; bottom: 0; left: 0; min-height: calc(var(--progress, 0) * 1%) } .user-edit-menu { padding-right: 1em; white-space: nowrap } .user-edit-menu__links { list-style: none; line-height: 34px } .user-edit-menu__links a { --link-line-color: transparent } .user-edit-menu__links a.active { --link-color: #222; --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; --link-line: none } @media (max-width:1024px) { .quiz__statistics { grid-row: 1 } .attempt__message { grid-column: 1/3 } .user-edit-menu { scrollbar-width: none; -ms-overflow-style: none; flex-basis: 100%; max-width: 100%; overflow-x: scroll; padding-right: 0 } .user-edit-menu::-webkit-scrollbar { display: none; width: 0; height: 0 } .user-edit-menu__links { display: flex; margin-bottom: 0; background-color: #fff; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; line-height: inherit } .user-edit-menu__links li { list-style: none; min-width: 100px; text-align: center } .user-edit-menu__links li:first-child a { padding-left: 10px } .user-edit-menu__links li:last-child a { padding-right: 10px } .user-edit-menu__links a { display: block; padding: 1em; --link-color: #222; --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; --link-line: none } .user-edit-menu__links a.active { font-weight: 700 } .activity-graph-wrapper { margin-bottom: 24px } } .activity-graph .cal-heatmap-container, .activity-graph .cal-heatmap-container svg, .activity-graph .graph, .activity-graph .graph-domain, .navbar__mobile-menu .menu { overflow: visible } .activity-graph-wrapper { flex-direction: column; align-items: stretch } .activity-graph__loader { width: 100% } .activity-graph .cal-heatmap-container { display: block } .activity-graph .cal-heatmap-container .graph { font-family: "Lucida Grande", Lucida, Verdana, sans-serif } .activity-graph .cal-heatmap-container .graph-label { fill: #999; font-size: 10px } .activity-graph .cal-heatmap-container .graph, .activity-graph .cal-heatmap-container .graph-legend rect { shape-rendering: crispedges } .activity-graph .cal-heatmap-container .graph-rect { fill: #ededed } .activity-graph .cal-heatmap-container .graph-subdomain-group rect:hover { stroke: #000; stroke-width: 1px } .activity-graph .cal-heatmap-container .subdomain-text { font-size: 8px; fill: #999; pointer-events: none } .activity-graph .cal-heatmap-container .hover_cursor:hover { cursor: pointer } .activity-graph .cal-heatmap-container .q0 { background-color: #ededed; fill: #ededed } .activity-graph .cal-heatmap-container .q1 { fill: #ededed } .activity-graph .cal-heatmap-container .q2 { background-color: #9C9; fill: #9C9 } .activity-graph .cal-heatmap-container .q3 { background-color: #6C6; fill: #6C6 } .activity-graph .cal-heatmap-container .q4 { background-color: #468C46; fill: #468C46 } .activity-graph .cal-heatmap-container .q5 { background-color: #264C26; fill: #264C26 } .activity-graph .cal-heatmap-container rect.highlight { stroke: #444; stroke-width: 1 } .activity-graph .cal-heatmap-container text.highlight { fill: #444 } .activity-graph .cal-heatmap-container rect.now { stroke: red } .activity-graph .cal-heatmap-container text.now { fill: red; font-weight: 800 } .activity-graph .cal-heatmap-container .domain-background { fill: none; shape-rendering: crispedges } .activity-graph .ch-tooltip { padding: 10px; background: #222; color: #bbb; font-size: 12px; line-height: 1.4; width: 140px; position: absolute; z-index: 29; text-align: center; border-radius: 2px; box-shadow: 2px 2px 2px rgba(0, 0, 0, .2); display: none; box-sizing: border-box } .activity-graph .ch-tooltip::after { position: absolute; width: 0; height: 0; border-color: #222 transparent transparent; border-style: solid; content: ""; padding: 0; display: block; bottom: -6px; left: 50%; margin-left: -6px; border-width: 6px 6px 0 } .activity-graph .cal-heatmap-container .future { fill: none !important } .activity-graph .activity-graph__graph { display: block } .activity-graph .activity-graph__graph-inner { width: 100% } .activity-graph .activity-graph__info { float: right; color: #777; font-size: 10px; padding: .5em 1em 0 } @media screen and (max-width:1024px) { .activity-graph .activity-graph__graph { display: none } .activity-graph .activity-graph__counters { margin: 0; border-top: 0 } } .comments-user-badge[data-role=staff] a { padding: 2px 12px; --link-line: none; --link-color: #fff; --link-hover-color: initial; --link-active-color: initial; background-color: #6c6; border-radius: 1em } .comments-user-badge[data-role=assistant] a, .comments-user-badge[data-role=teacher] a { padding: 2px 12px; --link-line: none; --link-color: #fff; --link-hover-color: initial; --link-active-color: initial; background-color: #1466c6; border-radius: 1em } .comments-user-badge[data-role=moderator] a { padding: 2px 12px; --link-line: none; --link-color: #fff; --link-hover-color: initial; --link-active-color: initial; background-color: #999; border-radius: 1em } .comments-user-badge[data-role=student]>a { --link-color: #222; --link-line: underline; --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; --link-line-color: transparent; --link-line-offset: .1em } .comments-user-badge__name { font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: .15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } button:not(.st-button_style_none).pin-toggle__button { display: flex; align-items: center; color: #1466c6 } button:not(.st-button_style_none).pin-toggle__button:focus, button:not(.st-button_style_none).pin-toggle__button:hover { color: #003e86 } .pin-toggle__pin { margin-right: 4px } .pin-toggle__pin, .pin-toggle__pin svg { width: 16px; height: 16px } .pin-toggle__pin svg { vertical-align: text-top } .ban-modal__user { display: grid; grid-template-areas: "userpic username" "userpic info"; align-items: start; grid-template-columns: 32px 1fr; grid-template-rows: -webkit-min-content 1fr; grid-template-rows: min-content 1fr; gap: 4px 12px; font-size: 14px; line-height: 1.29; letter-spacing: .25px; margin-bottom: 16px } .ban-modal__user-userpic { grid-area: userpic } .ban-modal__user-userpic .user-avatar__img_shape_square { border-radius: 8px } .ban-modal__user-username { grid-area: username; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: .15px; --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 } .ban-modal__user-info { grid-area: info; font-weight: 400; font-size: 12px; line-height: 14px; letter-spacing: .4px; color: #777 } .ban-modal__reason-variants { font-size: 14px; line-height: 20px; letter-spacing: .25px } .ban-modal__reason-variants>button { margin-right: 16px } body[data-embedded] .navbar__profile { display: none } body[data-embedded]:not([data-route="step.index"]) { --header-height: 0px } body[data-embedded]:not([data-route="step.index"]) .main-header { display: none !important } body[data-fullscreen] .header-banner, body[data-fullscreen][data-fullscreen-header-overlay][data-route="step.index"] .m-step-pin[data-is-active]::after, body[data-fullscreen][data-fullscreen-header-overlay][data-route="step.index"] .player-topbar__mobile-panel, body[data-fullscreen][data-fullscreen-header-overlay][data-route="step.lesson-end"] .m-step-pin[data-is-active]::after, body[data-fullscreen][data-fullscreen-header-overlay][data-route="step.lesson-end"] .player-topbar__mobile-panel, body[data-route="step.index"] #main-navbar-body-slot+.navbar__spacer, body[data-route="step.index"] .navbar>.language-selector, body[data-route="step.index"] .navbar>.language-selector+.navbar__divider, body[data-route="step.index"] .navbar__links, body[data-route="step.index"] .navbar__search-form:not(.navbar__search-form_mobile), body[data-route="step.lesson-end"] #main-navbar-body-slot+.navbar__spacer, body[data-route="step.lesson-end"] .navbar>.language-selector, body[data-route="step.lesson-end"] .navbar>.language-selector+.navbar__divider, body[data-route="step.lesson-end"] .navbar__links, body[data-route="step.lesson-end"] .navbar__search-form:not(.navbar__search-form_mobile) { display: none } body[data-fullscreen][data-fullscreen-header-overlay] { --header-height: 0px } body[data-fullscreen][data-fullscreen-header-overlay] .main-header { position: fixed; background: linear-gradient(180deg, #000, transparent) } body[data-fullscreen][data-fullscreen-header-overlay][data-fullscreen-header-overlay=hidden] .main-header { transform: translateY(-100%) } body[data-fullscreen][data-fullscreen-header-overlay][data-route="step.index"] .player-lesson-sidebar, body[data-fullscreen][data-fullscreen-header-overlay][data-route="step.lesson-end"] .player-lesson-sidebar { --header-height: 50px } body[data-route="step.index"] #main-navbar-body-slot, body[data-route="step.lesson-end"] #main-navbar-body-slot { flex: 1 } .main-header { --drop-down-spacing: 4px; --menu-border-radius: 0 0 4px 4px; position: -webkit-sticky; position: sticky; top: 0; width: 100%; display: grid; grid-template-columns: 100%; align-items: start; justify-content: stretch; background: #222; transition: box-shadow .2s ease-out, transform .2s; z-index: var(--z-main-header); --focus-outline-color: rgba(100, 200, 255, 0.5) } .navbar__search-input .navbar__search-input, .navbar__search-wrapper .navbar__search-input, .w-full { width: 100% !important } .show-modal .main-header[data-banner-above-overlay] { z-index: calc(var(--z-old-modals) + 1); background-color: transparent } .show-modal .main-header[data-banner-above-overlay] .custom-navbar, .show-modal .main-header[data-banner-above-overlay] .navbar { visibility: hidden } [data-show-modal-popup] .main-header[data-banner-above-overlay] { z-index: calc(var(--z-modal-popup) + 1); background-color: transparent } [data-show-modal-popup] .main-header[data-banner-above-overlay] .custom-navbar, [data-show-modal-popup] .main-header[data-banner-above-overlay] .navbar { visibility: hidden } #main-navbar-body-slot { min-width: 0 } .custom-navbar, .navbar { display: flex; height: 50px; padding: 4px 24px } @media (max-width:768px) { .custom-navbar, .navbar { padding: 4px 12px 4px 10px } } .navbar__search-form, .navbar__search-input, .navbar__search-wrapper { margin: 0; height: 34px !important; line-height: normal; padding-top: 0; padding-bottom: 0 } .navbar__search-form { margin: 0 16px 0 0; align-self: center; --drop-down-spacing: -1px } .navbar__search-form .with-autocomplete .menu-item>button { padding-left: 31px } .navbar__search-form .navbar__search-wrapper { background-color: #333; color: #5e5e5e } .navbar__search-form:focus-within .navbar__search-wrapper { background-color: #fff } .navbar__search-form .navbar__search-input { background-color: #333; color: #5e5e5e } .navbar__search-form_mobile { --menu-background: #fff; margin: calc(var(--menu-item-padding-v) * -1) calc(var(--menu-item-padding-h) * -1) } .navbar__search-form_mobile .with-autocomplete .menu-item>button { padding-left: 23px } .navbar__search-form_mobile .navbar__search-wrapper { padding-left: var(--menu-item-padding-h); background-color: transparent; background-size: 13px !important } .navbar__search-input, .navbar__search-wrapper { max-width: 209px } .navbar__search-wrapper:focus { outline: 0 !important } .navbar__search-wrapper input:focus { box-shadow: none } .navbar__down-arrow { margin-left: 8px; color: #fff; transform: translateY(-1px) } .navbar__submenu-toggler, .navbar__submenu-toggler .navbar__down-arrow { color: #bbb; transition: color .3s } .navbar__down-arrow svg { width: 10px !important; height: 10px !important; vertical-align: middle } .navbar__submenu-toggler { padding: 0 5px; position: relative; display: flex; align-items: center; cursor: pointer; background: 0 0 } .navbar__submenu-toggler:focus, .navbar__submenu-toggler:hover { outline: 0; color: #6c6 } .navbar__submenu-toggler:focus .navbar__down-arrow, .navbar__submenu-toggler:hover .navbar__down-arrow { color: #6c6 } .navbar__submenu-toggler[data-expanded] { color: #fff } .navbar__submenu-toggler-icon { position: relative; top: 1px; margin-right: 10px } .st-link.navbar__link { white-space: nowrap; color: #bbb; font-size: 16px; display: flex; padding: 5px 12px; align-items: center } .st-link.navbar__link:hover { text-decoration: none; color: #6c6 } .st-link.navbar__link.active { filter: none; cursor: default; color: #EFF6F9 } .st-link.navbar__link.active:hover { color: #EFF6F9 } .navbar__divider { margin: -4px 8px; width: 1px; background-color: rgba(94, 94, 94, .6) } .st-link.st-link_style_button.navbar__auth { align-self: center; white-space: nowrap; color: #fff; border-color: rgba(94, 94, 94, .6) } .st-link.st-link_style_button.navbar__auth:hover { color: #fff; border-color: #777 } .st-link.st-link_style_button.navbar__auth+.navbar__auth { margin-left: 5px } .navbar__links { display: flex; margin: 0; min-width: 0 } .navbar__logo { display: block; width: 130px; height: 40px } .navbar__spacer { flex: 1; margin: 0 10px; pointer-events: none } .navbar__logo-link { flex-shrink: 0; display: flex; align-items: center; margin-right: 6px } .navbar__menu-item { display: flex } .navbar__activity, .navbar__profile { flex-shrink: 0; display: flex; align-items: center } .navbar__rubricator .drop-down-toggler { margin-top: 3px } .navbar__activity+.navbar__profile { margin-left: 12px } button.st-button_style_none.navbar__profile-toggler { position: relative; padding: 0; border-radius: 8px } .navbar__mobile-menu { align-self: center } .navbar__mobile-menu .menu .menu-item>a, .navbar__mobile-menu .menu .menu-item>button { display: flex; align-items: baseline; justify-content: space-between } .navbar__mobile-menu .menu .menu-item>a>span, .navbar__mobile-menu .menu .menu-item>button>span { flex: 1 } .navbar__mobile-menu .menu .menu-item>a>.svg-icon, .navbar__mobile-menu .menu .menu-item>button>.svg-icon { position: relative; top: 1px; right: -16px; flex: 0; transform: none; font-size: 12px; margin-top: 1px } .navbar__mobile-menu .menu .menu-item>select { background-image: url("data:image/svg+xml;utf8,"); background-size: 8px; background-position: calc(100% - 10px) 50%; background-repeat: no-repeat } button.st-button_style_none.navbar__mobile-menu-toggler { padding: 12px; vertical-align: middle; color: #999 } button.st-button_style_none.navbar__mobile-menu-toggler .svg-icon { display: flex } button.st-button_style_none.navbar__mobile-menu-toggler svg { width: 18px; height: 18px } .navbar__profile-notifications-badge { position: absolute; top: -3px; right: -9px; display: flex; align-items: center; justify-content: center; height: 16px; min-width: 16px; padding: 0 3px 0 4px; border-radius: 8px; font-size: 10px; font-weight: 500; line-height: normal; letter-spacing: .33px; color: #fff; background-color: #54ad54; box-shadow: inset 1px 1px 2px 0 #288b28 } .navbar__profile-notifications-badge[data-count="0"] { visibility: hidden } .navbar__profile-news-badge { position: absolute; bottom: 0; right: -9px } .platform-news-badge { display: inline-block; height: 8px; width: 8px; border-radius: 50%; vertical-align: middle; background-color: #6c7bdf; box-shadow: inset 1px 1px 4px 0 #9ca6e6 } .navbar__profile-img { width: 36px; height: 36px; border-radius: 8px } @media (max-width:768px) { .navbar>.language-selector, .navbar>.language-selector+.navbar__divider, .navbar__links, .navbar__search-form:not(.navbar__search-form_mobile) { display: none } } @media (max-width:1024px) { .navbar__logo { width: 34px; height: 34px } } #custom-navbar-slot, #main-navbar { grid-row: 2; grid-column: 1 } #custom-navbar-slot { z-index: 1 } #custom-navbar-slot:not(:empty)+#main-navbar { display: none } .marketing-banner-timer { display: block; --banner-timer-font-size: 44px; --banner-timer-caption-font-size: 14px; color: #fff } .marketing-banner-timer .time-left { display: flex; flex-wrap: nowrap; flex-direction: row; gap: calc(var(--banner-timer-font-size) * 15 / 44); font-size: var(--banner-timer-caption-font-size); font-style: normal; font-weight: 500; text-decoration: none; letter-spacing: .15px; line-height: normal; -webkit-font-smoothing: antialiased } .marketing-banner-timer [data-sep] { display: none } .marketing-banner-timer [data-part] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px } .marketing-banner-timer [data-part] [data-value] { font-size: var(--banner-timer-font-size); width: calc(var(--banner-timer-font-size) * (1 + 48 / 44)); height: calc(var(--banner-timer-font-size) * (1 + 29 / 44)); display: inline-flex; justify-content: center; align-items: center; background-image: url(/static/frontend/timer/group.svg); background-repeat: no-repeat; background-position: center center; background-size: contain } .marketing-banner-timer [data-part] [data-label] { display: inline-flex; padding: 2px 6px; justify-content: center; align-items: center; border-radius: 4px; background: rgba(0, 0, 0, .7); text-transform: lowercase } .marketing-banner { display: block; overflow: hidden; border-radius: 4px; position: relative } .marketing-banner__timer-area { position: absolute; display: flex; align-items: center; padding: 0 } .marketing-teasers { -webkit-font-smoothing: antialiased } .marketing-teasers>.course-list-card[data-accent="1"] { color: #222; background-color: #FDC2A0; background-image: url(/static/frontend/sale-bg.png), linear-gradient(295deg, #FDC2A0 6.89%, #FFDBA6 97.97%); background-size: 240px 120px; background-position: calc(100%) 0 } .marketing-teasers>.course-list-card[data-accent="1"]:hover { filter: contrast(1.15) } .marketing-teasers>.course-list-card[data-accent="2"] { background-color: #6c7bdf; color: #fff; background-image: url(/static/frontend/course-list-card-featured-background.svg); background-repeat: repeat-y; background-size: 129px 109px; background-position: calc(100% - 17px) -8px } .onboarding-feedback-button { display: inline-flex; gap: 8px; flex-wrap: nowrap; flex-direction: row; justify-content: space-between } .onboarding-feedback-button__btn { flex: 0; white-space: nowrap; --link-line: none } .onboarding-feedback-button__btn.btn-link { font-weight: 500 } .onboarding-feedback-button__score { flex: 1; display: inline-flex; gap: 4px; flex-wrap: nowrap; flex-direction: row; justify-content: space-between } .onboarding-feedback-button__score-item.st-button_style_none { padding: 1px 0 } .onboarding-feedback__modal { --modal-popup-width: 384px } .onboarding-feedback__form { margin: 0 } .onboarding-feedback__form>fieldset { padding: 0; margin: 0; border: none } .onboarding-feedback__title { margin: 0 0 32px; font-size: 20px; font-weight: 500; letter-spacing: .15px; line-height: normal } .onboarding-feedback__section-title { margin: 16px 0 8px; font-size: 14px; font-weight: 500; line-height: 16px; letter-spacing: .15px } .onboarding-feedback__score-section { display: flex; justify-content: space-between; margin: 12px 0 32px } .onboarding-feedback__score-section[data-no-score] { --radio-opacity: 1 } input[type=radio].onboarding-feedback__score { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; width: 36px; height: 36px; padding: 4px; opacity: var(--radio-opacity, .38); cursor: pointer; position: relative } input[type=radio].onboarding-feedback__score::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-size: cover; pointer-events: none } input[type=radio].onboarding-feedback__score[value="1"]::after { background-image: url(/static/frontend/feedback/1.svg) } input[type=radio].onboarding-feedback__score[value="2"]::after { background-image: url(/static/frontend/feedback/2.svg) } input[type=radio].onboarding-feedback__score[value="3"]::after { background-image: url(/static/frontend/feedback/3.svg) } input[type=radio].onboarding-feedback__score[value="4"]::after { background-image: url(/static/frontend/feedback/4.svg) } input[type=radio].onboarding-feedback__score[value="5"]::after { background-image: url(/static/frontend/feedback/5.svg) } input[type=radio].onboarding-feedback__score:focus, input[type=radio].onboarding-feedback__score:hover { --radio-opacity: 0.8 } input[type=radio].onboarding-feedback__score:checked { --radio-opacity: 1 } input[type=radio].onboarding-feedback__score+input[type=radio].onboarding-feedback__score { margin-left: 24px } .onboarding-feedback__comment-section { margin: 24px 0 } .onboarding-feedback__comment { resize: none; display: block; width: 100%; padding: 12px 16px; font-size: 14px; line-height: 20px } .onboarding-feedback__comment.st-input { display: block !important; margin: 0 } .onboarding-feedback__comment-label { margin: 0 0 4px; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: .25px; color: #222 } .onboarding-feedback__bad-score-section>label { display: block } button:not(.st-button_style_none).onboarding-feedback__submit { display: block; margin: 32px 0 0; padding: 9px 24px } .onboarding-feedback__woof-icon { --woof-icon-color: #66cc66 } .course-publication__section { border-radius: 4px } .course-publication__section+.course-publication__section { margin-top: 32px } .course-publication__section:empty { display: none } .course-publication__form, .course-publication__form .the-form__field { margin: 0 } .course-publication__form .the-form__field+.the-form__field { margin-top: 40px } .course-publication__form .the-form-field__caption { margin: 0 0 16px; font-size: 16px; font-weight: 500; letter-spacing: .15px } .course-publication__card+.course-publication__card { margin-top: 40px } .course-publication__course-public-group { margin-top: 12px } .course-publication__share-buttons { display: flex; flex-wrap: wrap; margin-top: -10px } .course-publication__share-buttons .share-buttons__buttons { margin-right: 16px; margin-top: 10px } .course-publication__share-link { margin-top: 10px } .course-pricing__section+.course-pricing__section, .course-publication__enable-payment-msg { margin-top: 40px } .course-publication__invalid-subscription-warn { margin-bottom: 24px } .course-pricing { padding: 24px 0 120px; display: grid; grid-template-areas: "header" "content"; grid-template-columns: auto; grid-template-rows: auto 1fr; grid-gap: 26px 70px } .button:not(.st-button_style_none).course-pricing__make-paid-btn, .course-pricing__checklist-actions .button, .course-pricing__checklist-actions button:not(.st-button_style_none), .course-pricing__preview-lesson-editor[data-new]>button, button:not(.st-button_style_none).course-pricing__make-paid-btn { padding: 9px 24px } .course-pricing__header { grid-area: header } .course-pricing__content { grid-area: content; min-width: 0 } .course-pricing__section { max-width: 640px; border-radius: 4px } .course-pricing__section:empty { display: none } .course-pricing__section[data-type=comission] { font-size: 14px } .course-pricing__aside { grid-area: aside } .course-pricing__aside>*+* { margin-top: 24px } .course-pricing__title { margin: 0; font-size: 24px; font-weight: 400 } .course-pricing__section-title { margin: 0 0 10px; font-size: 20px; font-weight: 500; letter-spacing: .15px } .course-pricing__section-title+.course-pricing__form { margin-top: 24px } .course-pricing__title-status { display: inline-flex; align-items: center; margin-left: 10px; color: #999; font-size: 12px; font-weight: 400 } .course-pricing__title-status .spinner-small_icon { display: flex; margin-right: 4px; color: #ccc } .course-pricing__title-status .spinner-small_icon svg { height: 1em; width: 1em } .course-pricing__actions { margin-bottom: 18px } .course-pricing__financial-details-warn { margin-bottom: 30px } .course-pricing__financial-details-warn .course-publication-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) } .course-pricing__checklist-actions { margin-top: 34px } .course-pricing__checklist-more { margin-top: 20px } .course-pricing__placeholder-img { margin: 20px 0 24px; height: 140px; opacity: .38 } .course-pricing__section-desc { margin: 0 0 24px; line-height: 23px; letter-spacing: .3px } .course-pricing__price-toast-panel p, .course-pricing__section-desc:last-child { margin-bottom: 0 } .course-pricing__section-desc 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-pricing__status-comment { margin-top: 10px; font-style: italic; color: #5e5e5e; white-space: pre-wrap; white-space: break-spaces } .course-pricing__price-links-row { margin-top: -5px } .course-pricing__price-links-row+.course-pricing__price-toast-panel { margin-top: 16px } .course-pricing__price-toast-panel p+p { margin-top: 12px } .course-pricing__price-toast-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-pricing__price-link, .course-pricing__price-link.btn-link:not(.st-button_style_none) { font-size: 14px } .course-pricing__price-link+.course-pricing__price-link { margin-left: 24px } .course-pricing__commission-section { margin-top: 10px; font-size: 14px } .course-pricing__commission-section-info 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-pricing__referral-link { margin-bottom: 24px } .course-pricing__preview-lesson-caption, .course-pricing__promocode-caption { font-size: 16px; font-weight: 500; line-height: 1.13; letter-spacing: .15px } .course-pricing__preview-lesson-caption>small { display: inline-block; margin-left: 8px; font-size: 12px; color: #999 } .course-pricing__promocode-editor { margin-top: 4px } .course-pricing__preview-lesson-editor { margin-top: 16px } .course-pricing__preview-lesson-editor[data-edit] { display: flex; font-size: 14px; line-height: 1.43; letter-spacing: .25px } .course-pricing__preview-lesson-editor[data-new] { display: grid; align-items: center; grid-template-columns: auto 1fr; grid-gap: 16px } .course-pricing__preview-lesson-editor[data-new]>span { font-size: 12px; line-height: 1.17; letter-spacing: .4px } .course-pricing__preview-lesson-pos { margin-right: 8px; font-weight: 500 } .course-pricing__preview-lesson-title { display: inline-block; margin-right: 16px } .course-pricing__preview-lesson-title[data-skeleton] { width: 312px; max-width: 50vw } .course-pricing__preview-lesson-title>a { color: inherit; text-decoration: none } .course-pricing__preview-lesson-title>a:hover { text-decoration: underline } .course-pricing__preview-lesson-modal { max-height: 588px } input.st-input.course-pricing__preview-lessons-filter { height: auto; margin: 0 0 8px; padding: 9px 14px 9px 30px; font-size: 14px; line-height: normal; border-radius: 4px } .course-pricing__preview-lessons { list-style: none } .course-pricing__preview-lessons>p { margin: 6px 0; font-size: 14px; line-height: 1.43; letter-spacing: .25px } .course-pricing__preview-lesson-item { position: relative; display: flex; margin: -1px 0; border-radius: 4px } .course-pricing__preview-lesson-item:not(:last-child)::after { content: ""; position: absolute; bottom: 0; left: 4px; right: 4px; border-bottom: 1px solid #E9EBFA; z-index: -1 } button.course-pricing__preview-lesson-item-btn:not(.st-button_style_none) { all: unset; flex: 1; display: grid; grid-template-columns: auto 1fr auto; padding: 8px 16px 8px 6px; cursor: pointer; border-radius: inherit; font-size: 14px; line-height: 1.43; letter-spacing: .25px } button.course-pricing__preview-lesson-item-btn:not(.st-button_style_none)::before { content: attr(data-pos); display: inline-block; min-width: 5ch; font-weight: 500 } button.course-pricing__preview-lesson-item-btn:not(.st-button_style_none):focus, button.course-pricing__preview-lesson-item-btn:not(.st-button_style_none):hover { background-color: #f5fcf5 } button.course-pricing__preview-lesson-item-btn:not(.st-button_style_none)[data-selected] { background-color: #e9f9e9 } button.course-pricing__preview-lesson-item-btn:not(.st-button_style_none)[data-selected]::after { content: url(/static/frontend/common_icons/check-green.svg); align-self: center; flex-shrink: 0; width: 20px; height: 20px; margin-left: 8px } .course-pricing__price-editor { margin-bottom: 30px } .user-financial-details { padding-bottom: 110px } .user-financial-details__title { font-size: 23px; font-weight: 500; line-height: 1.3; margin: 0 16px 24px } .user-financial-details__form { padding: 0 16px 16px } .user-financial-details__note 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__description { padding-top: 20px } .course__toc { position: relative; margin-top: 58px } .course__toc .course-toc-component { position: relative; margin-top: 16px } .course__scoreboard-info { display: flex; justify-content: center } .course__scoreboard-table { width: 100%; margin: auto } .course__scoreboard-table .course__scoreboard-table__current-user { background: #cfc } .course-index { word-wrap: break-word; font-size: 14px } .course-index .course-index__adaptive-row { margin-bottom: 30px; align-items: center; margin-right: 1rem; margin-left: 1rem } .course-index .course-index__adaptive-note .svg-icon { top: 5px; color: #6c6 } .course-index .course-index__adaptive-note .svg-icon svg { width: 14px; height: 21px } .course-index .course-index__reviews-link { align-self: center; text-align: right; margin-left: auto } .course-index .course-index__authors-list { list-style: none } .course-index .course-index__author.author-widget { margin-bottom: 15px } .course-index .course-index__aside-section .course-index__author+.course-index__author { margin-top: 1em } .course-index .course-index__header { margin-top: 10px; margin-bottom: 10px } .course-index .course-index__header:first-child, .course-index .course-index__header:first-child .st-h2 { margin-top: 0 } .course-index .st-h2.course-index__header { margin-top: 55px; margin-bottom: 20px } .course-index .course-index__aside-section { display: flex; align-items: center } .course-index .course-index__aside-authors.course-index__aside-section { flex-direction: column; align-items: flex-start } .course-index .course-index__aside-authors .user-avatar { width: 100%; padding-bottom: 10px; line-height: 1.4 } .course-index .course-index__aside-authors .user-avatar a { display: flex; align-items: center } .course-index .course-index__aside-authors .user-avatar img { flex-shrink: 0 } .course-index .course-index__aside-join.course-join-button { margin-top: 1em; width: 100% } .course-index .course-index__aside-section+.course-index__aside-section { margin-top: 35px } .course-index .course-index__rating { font-size: 22px; margin-right: 10px } .course-index .course-index__def-row { display: flex; justify-content: space-between; text-align: right } .course-index .course-index__description { border-bottom: 1px solid #e6e9ed; border-top: 1px solid #e6e9ed; padding: 30px 0 45px } .course-index .course-index__cert-details { background: #f3f4f6; min-height: 55px; color: #777; margin: 0 -1.75em -1em; padding: 1em 1.75em 1em 4em; position: relative; display: flex; align-items: center } .course-index .course-index__cert-details:before { content: ""; display: block; position: absolute; height: 20px; width: 20px; background: url(/static/frontend/question.svg) no-repeat; background-size: 20px 20px; top: 50%; left: 1.75em; transform: translateY(-50%) } .course-editor__menu, .lesson-editor__menu { position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; padding: 4px 20px; z-index: var(--z-editor-footer-panel); background-color: #ccc; border-top: 1px solid #eee; height: 50px } .course-editor__menu button, .lesson-editor__menu button { padding: 9px 24px; border-radius: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden } @media (max-width:768px) { .lesson-editor__menu { height: 95px } } .course-editor__menu-inner { display: flex; align-items: center; justify-content: flex-end; max-width: 1400px; padding-right: 0 } .course-editor__menu-inner>button:not(:first-child) { margin-left: 12px } .course-editor__cancel-btn { flex-shrink: 9999 } .course-index__def-title { color: #999; font-weight: 400 } .course-index__selfpaced-note { display: flex; justify-content: space-between } .course-index__selfpaced-note .svg-icon { color: #3E8AF8; margin-right: 10px } .course-index__selfpaced-note .svg-icon svg { width: 28px; height: 28px } .course-index__share-block-wrapper { width: 100%; order: 2 } .col-xs-12.course-index__share-block { border: 1px solid #e6e9ed; border-radius: 3px; display: flex; flex-direction: column; min-height: 150px; justify-content: space-between; padding: 0; margin-top: 30px; margin-bottom: 30px } .course-index__share-text, .course-index__share-url, .share-buttons.course-buttons__share-buttons { padding-left: 22px; padding-right: 22px } .course-index__share-text { padding-top: 15px } .share-buttons.course-buttons__share-buttons .ya-share2__container_size_m .ya-share2__icon { height: 32px; width: 32px; background-size: 32px } .course-index__share-url { padding-top: 15px; padding-bottom: 15px; background-color: #f3f4f6; font-size: 14px; max-height: 55px; color: #777 } .course-index__share-copy-button { visibility: hidden; opacity: 0; will-change: opacity; transition: opacity .3s; position: absolute; right: 22px } .course-index__share-url:hover .course-index__share-copy-button { opacity: 1; visibility: visible } a.course-index__empty-field { font-size: 14px; --link-line: underline; --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; --link-line-color: transparent; --link-color: #777 } .course-index__main-wrapper .course-index__aside-wrapper { order: -1; display: flex; flex-direction: column } .course-index__main-wrapper .course-join-button { display: none } .course-index__bordered-wrapper { padding-top: 1em } .course-index__wrapper { padding-top: 1em; margin-left: -5px; margin-right: -5px } .course-index__similar-courses .course-promo-widget { border-color: #e6e9ed !important } .course-index__video-player { position: relative } .course-index__video-join-overlay { position: absolute; width: 100%; height: 100%; padding-top: 32px; z-index: 1 } .course-index__video-join { display: flex; flex-direction: column; background: rgba(0, 0, 0, .65); height: 100%; align-items: center } .course-index__video-join-button .video-join-button a { background-color: #6c6 } .course-index__video-join-repeat { margin-top: 16px; margin-bottom: auto; cursor: pointer; color: #fff; text-decoration: underline } .course-index__main-wrapper_fixed-btn .course-index__join-btn_last, .course-index__robot-icon, .course-index_xs-hidden { display: none } .course-index__promo { display: flex; align-items: center; font-size: 16px; line-height: 1.37 } .course-index__promo .svg-icon { display: flex; padding: 10px; margin-right: 16px; border-radius: 50%; font-size: 20px; background-color: #eaecf0 } .course-index__promo .button { align-self: flex-start; margin-left: 24px } .course-index__adaptive-row+.course-index__header-row { padding-top: 30px } .course-pay-success__msg { margin: 30px 0 20px; padding: 20px; max-width: 700px; border: 1px solid #6c6; border-radius: 4px } @media only screen and (min-width:1024px) { .course-index .course-index__description { border: none; padding-top: 0 } .course-index .course-index__header { margin-top: 0; padding-top: 10px } .course-index .course-index__aside-join.course-join-button { margin-top: 0 } .course-index .course-index__def-row { flex-wrap: wrap; text-align: left } .course-index .course-index__def-title { flex-basis: 100%; font-weight: 700; color: #000 } .course-index .course-index__certificate-tooltip .tooltip-hint_inside .certificate:after { display: none } .course-index .course-index__adaptive-link { text-align: right } .course-index .course-index__adaptive-row { margin-right: 1rem; margin-left: 1rem; margin-bottom: 0; padding: 10px; border-radius: 3px; background-color: #ffeec2; display: flex } .course-index .course-index__bordered-wrapper { margin: 2rem 0 0 } .course-index .course-index__share-block-wrapper { order: 0; margin-top: 2rem } .course-index_md-hidden { display: none } .course-index_xs-hidden { display: block } .course-index__join-btn_last { display: none } .col-xs-12.course-index__share-block { margin-top: 0; margin-bottom: 0 } .course-index__adaptive-note { padding-right: 10px; display: flex; align-items: center } .course-index__flag-icon { display: none } .course-index .course-index__adaptive-note .course-index__robot-icon { display: block; top: 0; margin-right: 10px; height: 35px; width: 35px } .course-index .course-index__adaptive-note .course-index__robot-icon svg { height: 35px; width: 35px } .course-index__aside-section_sticky-btn { position: -webkit-sticky; position: sticky; top: var(--header-height); background-color: #fff; z-index: 12; padding-top: 2rem; padding-bottom: 0 } .course-index__aside-section_sticky-btn:after { content: ""; display: block; position: absolute; background: #FFF; box-shadow: 0 2px 1px -2px #b7b7b7; width: 100%; height: 2rem; bottom: -2rem } .course-index__bordered-wrapper { border: 1px solid #e6e9ed; padding: 1em 1.75em; border-radius: 3px } .course-index__bordered-wrapper .course-index__header:not(:first-child) { border-top: 1px solid #e6e9ed } .course__checklist-sign { border: 1px solid #e6e9ed; padding: 1em 1.75em; border-radius: 3px; font-size: 14px; margin: 2em 0 0 } .course-page__syllabus .course__checklist-sign { margin: 1em 0 2em } .course-index__short-desc { border-bottom: 1px solid #e6e9ed; padding-bottom: .75em } .course-index__video { margin-top: 2rem } .course-editor__menu-inner { padding-right: 70px } .course-index__main-wrapper .course-index__aside-wrapper { order: 1 } .course-index__main-wrapper .course-index__aside-wrapper dl.col-xs-12 { margin-bottom: 0 } .course-index__main-wrapper .course-join-button { display: block } } .course-info-reviews__item { border-bottom: 1px solid #E9EBFA; font-size: 14px; padding-bottom: 24px } .course-info-reviews__item+.course-info-reviews__item { margin-top: 16px } @media only screen and (min-width:1170px) { .course-index .course-index__adaptive-row { margin-right: 0; margin-left: 0 } .course-index__robot-icon, .course-index_xs-hidden { display: block } .course-page__news.col-xs-12, .course-page__syllabus.col-xs-12 { padding: 0 } } body[data-embedded] .course-page__syllabus { padding-bottom: 50px } .news__tab { margin-bottom: 24px } .news__item+.news__item { margin-top: 40px } .news__empty-placeholder { margin-top: 16px } .news__empty-placeholder[data-specific] { text-align: center } .news__empty-placeholder-img { margin: 0 0 24px; height: 150px; opacity: .38 } .news__empty-placeholder-desc a.external::after, .news__links a::after { content: ""; top: -.125em; width: var(--external-link-icon-size, .5em); 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-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100%; mask-size: 100%; background-color: var(--external-link-icon-color, #1466C6); position: relative } .news__empty-placeholder-desc { line-height: 23px; letter-spacing: .3px } .news__empty-placeholder-desc a.external { --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); white-space: nowrap } .news__empty-placeholder-desc a.external::after { display: inline-block; margin: 0 0 0 var(--external-link-icon-offset, 3px) } .news__empty-placeholder-label { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: #999 } .news__add-btn:not(.st-button_style_none) { padding: 9px 24px; white-space: nowrap } .news__header { display: grid; grid-gap: 0 24px; grid-template-areas: "title links" "actions links"; grid-template-columns: auto -webkit-min-content; grid-template-columns: auto min-content } .news__group-desc { margin: -16px 0 24px; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: .15px; color: #999 } .news__actions { grid-area: actions; margin-bottom: 32px } .news__info, .news__links { min-width: 270px; border: 1px solid #f3f4f6; border-radius: 4px; padding: 16px; font-size: 14px; line-height: 20px; letter-spacing: .25px } .news__info a, .news__links 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) } .news__links { grid-area: links; align-self: center } .news__links a { white-space: nowrap } .news__links a::after { display: inline-block; margin: 0 0 0 var(--external-link-icon-offset, 3px) } .news__info { margin-top: 24px } .news__settings-link { display: flex; align-items: center; line-height: 20px; --link-line-color: transparent } .news__settings-link .svg-icon { margin-right: 12px } .news__settings-link .svg-icon+span { flex: 1 } .news__manage-panel { border: 1px solid #f3f4f6; border-radius: 4px; padding: 16px } *+.news__manage-panel { margin-top: 20px } .news__manage-panel-actions { list-style: none; margin-bottom: 0 } .news__manage-panel-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 } .user__header { margin-bottom: 32px } .user__title { font-size: 24px; font-weight: 400 } @media (max-width:1024px) { .user__title { margin: 16px 0; font-size: 20px; font-weight: 500; line-height: 23.44px; letter-spacing: .15px } } .user__header-toolbar .search-form { display: block } .user__header-toolbar .search-form__input-wrapper { margin-right: 0 } .user__header-toolbar input.search-form__input[type=search] { padding: 8px 28px 8px 32px !important; height: 36px } .user-teach__courses { margin-bottom: 24px } .user-reviews__header { margin-bottom: 16px } .user-reviews__title { margin-bottom: 24px } .user-reviews__header-toolbar { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #E9EBFA; margin-bottom: 16px; font-weight: 400; line-height: 18px; letter-spacing: .3px } .profile__counters, .user-reviews__rating { margin-bottom: 24px } .user-reviews__reviews-filter { color: #5e5e5e; font-size: 16px } .user-reviews__reviews-filter-ico { margin-right: 4px } .user-reviews__reviews-count { font-size: 18px; font-weight: 500; line-height: 22px; letter-spacing: .17px } .user-reviews__review-item { border-bottom: 1px solid #E9EBFA; font-size: 14px; padding-bottom: 24px } .user-reviews__review-item+.user-reviews__review-item { margin-top: 16px } .user-reviews__empty-note { margin: 0 0 24px; max-width: 640px; font-size: 16px; line-height: 23px; letter-spacing: .3px } .user-reviews__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) } .user-reviews__empty-placeholder-img { display: block; margin: 0 0 24px; height: 160px; width: 200px; opacity: .38 } body[data-profile-preview-mode] .loading-slider { display: none } .profile__header { margin-bottom: 32px } .profile__title { font-size: 34px; font-weight: 500; line-height: 40px; letter-spacing: .25px } @media (max-width:1024px) { .profile__title { margin: 16px 0; font-size: 20px; font-weight: 500; line-height: 23.44px; letter-spacing: .15px } .profile__header-details { font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: .25px } } .profile__details { font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: .25px } .profile__header-details { margin-bottom: 32px } .profile__cover { display: block; margin: 0 auto; max-height: 200px } .profile__main { margin-top: 40px; margin-bottom: 100px } .profile__main[data-is-mobile] { margin: 0 } .profile__main-content { padding: 0 16px } .profile__content { margin: 0 0 32px } .profile__details+.profile__content, .profile__title+.profile__content { margin-top: 24px } @media (max-width:1024px) { .profile__cover { height: auto } .profile__main-content { flex-basis: 100%; max-width: 100% } .profile__content h3.st-h3 { margin: 16px 0; font-size: 18px; font-weight: 500; line-height: 22px; letter-spacing: .17px } } .profile__counters, .profile__text { font-weight: 400; line-height: 20px; letter-spacing: .25px; font-size: 14px } .profile__info { -webkit-font-smoothing: antialiased } .profile__course-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(324px, 1fr)); grid-gap: 24px; margin: 0 0 24px } .profile__course-cards .course-cards__item { margin: 0; max-width: 372px } .profile__course-cards .course-card { width: auto } .profile__avatar { border-radius: 16px; overflow: hidden; display: inline-flex; position: relative } .profile__avatar, .profile__avatar img { width: 150px; height: 150px } .profile__rating { position: absolute; bottom: 0; left: 0; padding: 4px 12px 4px 8px; background: rgba(34, 34, 34, .56); border-radius: 0 16px; --rating-badge-color: var(--theme-color-fg-oncolorbg) } .profile__text { color: #777 } .profile__counters li+li { margin-top: 8px } .profile__counters li>b { font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: .15px; color: #222 } .profile__counters .svg-icon { color: #999; vertical-align: center; display: inline-block; position: relative; bottom: -.25em; margin-right: 4px } .profile__counters .svg-icon, .profile__counters .svg-icon svg { height: 16px; width: 16px } .profile__counters .profile__rank-icon { bottom: -.35em; margin-left: -.1em } .profile__counters .profile__rank-icon, .profile__counters .profile__rank-icon svg { height: 20px; width: 20px } @media (max-width:1024px) { .profile__counters { margin-bottom: 0 } .profile__subscribe { margin-top: 16px } } .profile__counter 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 } .profile__nav { margin-bottom: 24px } .profile__nav[data-type=sidebar] { list-style: none; font-weight: 400; font-size: 16px; line-height: 23px; letter-spacing: .3px; border-bottom: 1px solid #EAEAEA; padding-bottom: 16px } .profile__nav[data-type=sidebar] li { padding: 6px 0 } .profile__nav[data-type=sidebar] a { --link-line-color: transparent } .profile__nav[data-type=sidebar] a.active { --link-color: #222; --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; --link-line: none } .profile__subscribe { text-align: left; margin-bottom: 24px } .profile__link-item { margin: 14px 8px 0 0 } @media (max-width:1024px) { .profile__link-item { margin: 0 } .profile__social-acounts { display: flex; flex-wrap: wrap; flex-direction: row; gap: 16px 20px; margin-bottom: 24px; max-width: 70% } } .profile__social-acounts { margin-bottom: 24px } @media (max-width:768px) { .profile__social-acounts { max-width: 100% } } .profile__link { --link-line-color: transparent; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: .25px } .profile__link:not(:hover):not(:focus) { color: #777; filter: grayscale(100%) } .profile__link img { width: 16px; height: 16px; margin-right: 8px; vertical-align: top } @media (max-width:1024px) { .profile__link:not(:hover):not(:focus) { color: var(--theme-color-fg-primary); filter: grayscale(100%) contrast(1) brightness(1) } } .profile__counters, .profile__links { margin-top: 24px; list-style: none; color: #777 } .profile__title-action:not(.st-button_style_none).btn-link { display: inline-flex; justify-content: flex-start; align-items: center; font-size: 14px; line-height: 20px; letter-spacing: .25px; --link-color: #4485ed; --link-line: underline; --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-color: transparent } .profile__title-action:not(.st-button_style_none).btn-link>span:not(.svg-icon) { text-align: left } .profile__title-action:not(.st-button_style_none).btn-link>.svg-icon { margin-right: 8px; width: 18px; height: 18px; font-size: 12px; border-radius: 4px; background-color: #E7F2FF } .profile__show-preview { --data-tooltip-max-width: 220px; --data-tooltip-offset: 1px; --data-tooltip-side-offset: -15px; --data-tooltip-arrow-side-offset: 1px; --data-tooltip-text-align: start; margin-right: 30px; margin-bottom: 24px } @media (max-width:1024px) { .profile__counters, .profile__links, .profile__show-preview { margin-top: 16px } } @media (min-width:1025px) { .profile__preview-toast-panel { margin-top: 24px } } .profile__preview-loader { padding: 30px 0 } .profile__preview-iframe { display: block; width: 100%; height: calc(100vh - var(--header-height)); border: none } .profile__block { margin-top: 16px } .profile-summary { display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 16px } .profile-summary__avatar { display: inline-flex; position: relative; overflow: hidden; border-radius: 4px; margin-right: 24px; flex: 0; width: 80px; min-width: 80px; height: 80px } .profile-summary__counters { list-style: none; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 0 18px; flex: 1; margin: 0; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: .45px; -webkit-font-smoothing: antialiased } .profile-summary__counters>li { margin-top: 14px; text-align: center; color: var(--theme-color-fg-secondary) } .profile-summary__counters>li>b, .profile-summary__rating-badge { color: var(--theme-color-fg-primary); font-size: 20px; font-weight: 500; line-height: 23.44px; letter-spacing: .15px; margin-bottom: 4px } .profile-summary__counters>li>b { display: block } .profile-summary__rating-badge { flex-direction: row-reverse; justify-content: center; --rating-badge-icon-color: var(--theme-color-fg-tertiary) } .profile-info .profile__text { margin: 16px 0 0 } .profile-info .profile__text+.profile__text { margin: 4px 0 0 } @media not all and (max-width:768px) { [data-media-query~=mobile] { display: none !important } } @media not all and (min-width:769px) and (max-width:1024px) { [data-media-query~=tablet] { display: none !important } } @media not all and (min-width:1025px) { [data-media-query~=desktop] { display: none !important } } @media not all and (min-width:769px) { [data-media-query~=not-mobile] { display: none !important } } @media not all and (max-width:1024px) { [data-media-query~=not-desktop] { display: none !important } } .block { display: block !important }