@charset "UTF-8";

@font-face {
  font-family: FuturaPT;
  font-display: swap;
  src: url("../fonts/FuturaPT-Bold.woff2") format("woff2"), url("../fonts/FuturaPT-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: FuturaPT;
  font-display: swap;
  src: url("../fonts/FuturaPT-Light.woff2") format("woff2"), url("../fonts/FuturaPT-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: FuturaPT;
  font-display: swap;
  src: url("../fonts/FuturaPT-Medium.woff2") format("woff2"), url("../fonts/FuturaPT-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: FuturaPT;
  font-display: swap;
  src: url("../fonts/FuturaPT-Book.woff2") format("woff2"), url("../fonts/FuturaPT-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: FuturaPT;
  font-display: swap;
  src: url("../fonts/FuturaPT-Demi.woff2") format("woff2"), url("../fonts/FuturaPT-Demi.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

* {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

html,
body {
  height: 100%;
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  line-height: 1.4;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input,
button,
textarea {
  font-family: var(--font-family);
  font-size: inherit;
}

button {
  cursor: pointer;
  color: inherit;
  background-color: inherit;
  line-height: 1.5;
}

a {
  color: inherit;
  cursor: pointer;
}

a:link,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]:hover,
input[type=number]:focus {
  -moz-appearance: number-input;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body {
  font-family: "FuturaPT", sans-serif;
  background-color: #fff;
}

.lock body {
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
}

body.lock {
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
}

.wrapper {
  position: relative;
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
}

.wrapper.visible {
  overflow: visible;
}

.wrapper > main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.wrapper > * {
  min-width: 0;
}

.wrapper_overflow-visible {
  overflow: visible;
}

[class$=__container] {
  max-width: 1220px;
  margin: 0 auto;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  padding: 0px 15px;
}

.page {
  position: relative;
}

.decor {
  position: absolute;
  left: 0px;
  bottom: 0px;
  bottom: 0px;
  width: 568;
  height: 200px;
}

/*Формы*/

/* 
 * БЭМ БЛОК: Кнопка
 * Базовый блок для всех типов кнопок
 */

.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 4px;
  padding: 12px 50px;
  font-weight: 600;
  font-size: 16px;
  line-height: 130%;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  margin-top: auto;
  /* 
    * МОДИФИКАТОРЫ ЦВЕТА И СТИЛЯ
    * Определяют внешний вид кнопки
    */
  /* 
    * ЭЛЕМЕНТЫ КНОПКИ
    * Составные части блока кнопки
    */
  /* 
    * МОДИФИКАТОРЫ РАСПОЛОЖЕНИЯ ИКОНОК
    * Управляют позиционированием элементов внутри кнопки
    */
  /* 
    * МОДИФИКАТОРЫ РАЗМЕРА
    * Управляют размерами кнопки
    */
}

.btn:hover {
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn--continue {
  background: #0880ea;
  color: #fff;
}

.btn--continue:hover {
  background: #0669c7;
}

.btn--completed {
  background: #299764;
  color: #fff;
}

.btn--completed:hover {
  background: #237c52;
}

.btn--disabled {
  background: #f0f0f0;
  color: #acacac;
  cursor: not-allowed;
}

.btn--disabled:hover {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #f0f0f0;
}

.btn--register {
  background: #b80024;
  color: #fff;
}

.btn--register:hover {
  background: #9a001e;
}

.btn--add-chart-light {
  background: #fff5f7;
  font-weight: 500;
  font-size: 25px;
  text-transform: uppercase;
  text-align: center;
  color: #b80024;
  padding: 15px 30px;
}

.btn--add-chart-light:hover {
  background: #ffebef;
}

.btn--add-chart-dark {
  background: #b80024;
  font-weight: 500;
  font-size: 25px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  padding: 15px 30px;
}

.btn--add-chart-dark:hover {
  background: #9a001e;
}

.btn--next-lesson-red {
  border-radius: 4px;
  background: #b80024;
  color: #fff;
  padding: 12px 20px;
}

.btn--next-lesson-red:hover {
  background: #9a001e;
}


.btn--next-lesson-gray {
  border-radius: 4px;
  color: #acacac;
  background: #f0f0f0;
  padding: 12px 20px;
}


.btn--next-lesson-bright {
  border-radius: 4px;
  background: #eb191c;
  color: #fff;
  padding: 12px 20px;
}

.btn--next-lesson-bright:hover {
  background: #d01518;
}

.btn--back {
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  color: #acacac;
  background: #f0f0f0;
  padding: 12px 30px;
}

.btn--back:hover {
  background: #e5e5e5;
  color: #999;
}

.btn--join {
  border-radius: 4px;
  padding: 12px 50px;
  background: #6fa5fe;
  color: #fff;
}

.btn--join:hover {
  background: #5d94f7;
}

.btn--connect-green {
  border-radius: 4px;
  padding: 12px 50px;
  font-weight: 600;
  font-size: 16px;
  line-height: 130%;
  text-transform: uppercase;
  color: #fff;
  background: #299764;
}

.btn--connect-green:hover {
  background: #237c52;
}

.btn--connect-blue {
  border-radius: 4px;
  padding: 12px 50px;
  font-weight: 600;
  font-size: 16px;
  line-height: 130%;
  text-transform: uppercase;
  color: #fff;
  background: #37c181;
}

.btn--connect-blue:hover {
  background: #2da369;
}

.btn__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.btn__text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
}

.btn__arrow {
  margin-left: 8px;
  font-weight: bold;
}

.btn--with-icon-left .btn__icon {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.btn--with-icon-left .btn__text {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  text-align: left;
}

.btn--with-icon-right .btn__icon {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.btn--with-icon-right .btn__text {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  text-align: left;
}

.btn--compact {
  padding: 8px 24px;
  font-size: 14px;
}

.btn--large {
  padding: 16px 60px;
  font-size: 18px;
}

.btn--full-width {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* 
 * КОНТЕКСТНЫЕ СТИЛИ
 * Стили, зависящие от контекста использования
 */

.buttons-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.buttons-group--vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.buttons-group--centered {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.button-preview {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
}

.button-preview__label {
  font-size: 14px;
  color: #666;
  text-align: center;
}

body::after {
  content: "";
  background: rgba(0, 21, 52, 0.46);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 0.8s ease 0s;
  -o-transition: opacity 0.8s ease 0s;
  transition: opacity 0.8s ease 0s;
  pointer-events: none;
  z-index: 149;
}

.popup-show body::after {
  opacity: 1;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 30px 10px;
  -webkit-transition: visibility 0.8s ease 0s;
  -o-transition: visibility 0.8s ease 0s;
  transition: visibility 0.8s ease 0s;
  visibility: hidden;
  pointer-events: none;
}

.popup_show {
  z-index: 150;
  visibility: visible;
  overflow: auto;
  pointer-events: auto;
}

.popup_show .popup__content {
  visibility: visible;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.popup__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  align-items: center;
}

.popup__content {
  visibility: hidden;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s ease 0s;
  transition: -webkit-transform 0.3s ease 0s;
  -o-transition: transform 0.3s ease 0s;
  transition: transform 0.3s ease 0s;
  transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
  width: 100%;
  max-width: 664px;
  background: #fff;
}

.lock .popup__content {
  visibility: visible;
}

.popup-feedback {
  width: 100%;
  height: auto;
}

.popup-feedback__title {
  font-size: 30px;
  margin: 0px 0px 20px 0px;
  text-align: center;
  font-weight: 600;
}

.popup-feedback__text {
  font-size: 20px;
  margin: 0px 0px 20px 0px;
  text-align: center;
  font-weight: 300;
}

.popup-feedback__inputs {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 20px;
}

.popup-feedback__line {
  position: relative;
  border-radius: 30px;
  width: 100%;
  height: 60px;
  overflow: hidden;
  background-color: #ffffff;
}

.popup-feedback__placeholder {
  position: absolute;
  top: 50%;
  left: 20px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.popup-feedback__input {
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: rgb(0, 0, 0);
  background: transparent;
  padding: 20px;
}

.popup-feedback__input:focus ~ .popup-feedback__placeholder,
.popup-feedback__input:valid ~ .popup-feedback__placeholder {
  -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
          transform: translateY(-20px);
  font-size: 10px;
}

.popup-feedback__button {
  min-height: 50px;
}

.data-sent {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 20px;
  padding: 20px;
}

.data-sent__close {
  position: absolute;
  right: 0px;
  top: 0px;
}

.data-sent__text {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 300;
  color: #000;
  text-align: center;
}

.popup-location__title {
  font-size: 46px;
  line-height: 48px;
  margin: 0px 0px 50px 0px;
  text-align: center;
  font-weight: 700;
}

.popup-location__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 10px;
}

.popup-location__button {
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  font-size: 18px;
  line-height: 24px;
  cursor: pointer;
  border: 2px solid transparent;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  padding: 16px 20px;
}

.popup-location__button._active {
  background: var(--main-color);
  color: var(--fourth-color);
  border: 2px solid var(--third-color);
  -webkit-box-shadow: 0 0 8px var(--third-color);
          box-shadow: 0 0 8px var(--third-color);
}


[class*=-ibg] {
  position: relative;
}

[class*=-ibg] img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

[class*=-ibg_contain] img {
  -o-object-fit: contain;
     object-fit: contain;
}

.breadcrumbs__list::-webkit-scrollbar {
  display: none;
}

.hidden-element {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  pointer-events: none !important;
}

h2,
.h2 {
  font-weight: 500;
  font-size: 45px;
  text-align: center;
  color: #1a1a1a;
}

.header {
  padding: 28px 0;
  background: #fbfafa;
  position: relative;
  z-index: 100;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 0px 0px 50px 0px;
}

.header__header--margi0 {
  margin: 0px;
}

.header__container {
  max-width: 1708px;
  margin: 0 auto;
  padding: 0 15px;
}

.header__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
}

.header__name {
  font-weight: 400;
  font-size: 18px;
  color: #333;
  margin-left: auto;
}

.header-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  text-decoration: none;
  position: relative;
  z-index: 101;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.header-logo:hover {
  opacity: 0.8;
}

.header-logo__text {
  font-weight: 600;
  font-size: 18px;
  color: #b80024;
}

.header-logo__text span:nth-child(2) {
  font-weight: 600;
  color: #001534;
}

.header-logo__text span:nth-child(3) {
  font-weight: 600;
  color: #001534;
}

.actions-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 28px;
     -moz-column-gap: 28px;
          column-gap: 28px;
  position: relative;
}

.search {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 32px;
  height: 32px;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

.search--active {
  width: 460px;
}

.search__wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 4px;
  min-height: 32px;
  background-color: transparent;
  border: none;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  overflow: hidden;
  width: 100%;
}

.search__wrapper--active {
  background: rgba(184, 0, 36, 0.1);
  border: 1px solid rgba(184, 0, 36, 0.1);
  padding: 6px 9px;
}

.search__input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  font-weight: 400;
  font-size: 18px;
  color: #b80024;
  opacity: 0.5;
  border: none;
  outline: none;
  display: none;
}

.search__input::-webkit-input-placeholder {
  font-size: 18px;
  color: #b80024;
}

.search__input::-moz-placeholder {
  font-size: 18px;
  color: #b80024;
}

.search__input:-ms-input-placeholder {
  font-size: 18px;
  color: #b80024;
}

.search__input::-ms-input-placeholder {
  font-size: 18px;
  color: #b80024;
}

.search__input::placeholder {
  font-size: 18px;
  color: #b80024;
}

.search__input--visible {
  display: block;
}

.search__input:focus {
  opacity: 1;
}

.search__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.3s ease, -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease, background-color 0.3s ease;
  transition: transform 0.2s ease, background-color 0.3s ease;
  transition: transform 0.2s ease, background-color 0.3s ease, -webkit-transform 0.2s ease;
  border-radius: 4px;
  padding: 4px;
  position: absolute;
  right: 0;
}

.search__icon:hover {
  background-color: rgba(184, 0, 36, 0.1);
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

.search__close {
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin-left: 5px;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.3s ease, -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease, background-color 0.3s ease;
  transition: transform 0.2s ease, background-color 0.3s ease;
  transition: transform 0.2s ease, background-color 0.3s ease, -webkit-transform 0.2s ease;
  border-radius: 4px;
  padding: 4px;
}

.search__close:hover {
  background-color: rgba(184, 0, 36, 0.1);
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

.search__close:focus {
  outline: 2px solid #b80024;
  outline-offset: 1px;
}

.search__result {
  position: absolute;
  top: 50px;
  right: 0;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  width: 460px;
  max-height: 170px;
  padding: 20px;
  -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  overflow: auto;
  display: none;
  z-index: 10;
}

.search__result--visible {
  display: block;
}

.search-result__link {
  display: inline-block;
  font-weight: 300;
  font-size: 18px;
  line-height: 100%;
  color: #1a1a1a;
  text-decoration: none;
  padding: 5px 0;
  -webkit-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
  width: 100%;
}

.search-result__link:hover,
.search-result__link:focus {
  color: #b80024;
  outline: none;
}

.notification {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.notification:hover {
  background-color: rgba(184, 0, 36, 0.1);
}

.notification--active {
  background-color: rgba(184, 0, 36, 0.1);
}

.notification__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.notification__quantity {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00a2aa;
  font-weight: 600;
  font-size: 8px;
  color: #fff;
  top: 4px;
  right: 3px;
  z-index: 2;
}

.notification__result {
  display: none;
  position: absolute;
  top: 80px;
  right: 170px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  width: 554px;
  max-height: 270px;
  -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  overflow: auto;
  padding: 20px;
  z-index: 10;
}

.notification__result::-webkit-scrollbar {
  display: none;
}

.notification__result--visible {
  display: block;
}

.notification__result-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  text-transform: uppercase;
  color: #b61f22;
  margin: 0 0 15px 0;
}

.notification__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  padding: 10px;
  border-radius: 4px;
  -webkit-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.notification__item:hover {
  background-color: rgba(184, 0, 36, 0.05);
}

.notification__item:not(:last-child) {
  margin-bottom: 10px;
}

.notification__decor {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #b80024;
  margin-top: 5px;
}

.notification__text {
  font-size: 16px;
  line-height: 100%;
  color: #1a1a1a;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.notification__date {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-align: right;
  color: #1a1a1a;
}

.user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.user:hover {
  background-color: rgba(184, 0, 36, 0.1);
}

.user--active {
  background: rgba(184, 0, 36, 0.1);
}

.user:focus {
  outline: 2px solid #b80024;
  outline-offset: 1px;
}

.user__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.user-spoler {
  display: none;
  position: absolute;
  right: 0;
  top: 50px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  width: 150px;
  -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  z-index: 10;
  padding: 20px 0px;
}

.user-spoler--visible {
  display: block;
}

.user-spoler__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  list-style: none;
}

.user-spoler__item {
  width: 100%;
}

.user-spoler__link {
  width: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #1a1a1a;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  -o-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.user-spoler__link:hover,
.user-spoler__link:focus {
  background-color: rgba(184, 0, 36, 0.1);
  color: #b80024;
  outline: none;
}

.user-spoler__link--get-out {
  border-top: 1px solid #e6e3e3;
  padding: 15px 10px 10px 10px;
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #766f6f;
}

.burger-btn {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: none;
}

.burger-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.burger-btn:focus {
  outline: 2px solid #b80024;
  outline-offset: 1px;
}

.burger-line {
  width: 20px;
  height: 2px;
  background-color: #b80024;
  margin: 2px 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 1px;
}

.burger-btn--active .burger-line:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(4px, 4px);
      -ms-transform: rotate(45deg) translate(4px, 4px);
          transform: rotate(45deg) translate(4px, 4px);
}

.burger-btn--active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger-btn--active .burger-line:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(4px, -4px);
      -ms-transform: rotate(-45deg) translate(4px, -4px);
          transform: rotate(-45deg) translate(4px, -4px);
}

.menu {
  padding-top: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #fff;
  left: -100%;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.menu--active {
  left: 0;
}

.menu__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 20px;
  padding: 20px;
}

.menu__list {
  list-style: none;
  overflow: auto;
}

.menu__link {
  display: inline-block;
  font-weight: 400;
  font-size: 18px;
  color: #333;
  text-decoration: none;
  padding: 8px 0;
  -webkit-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.menu__link:hover,
.menu__link:focus {
  color: #b80024;
  outline: none;
}

.menu-contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  row-gap: 16px;
  text-align: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.menu-contacts__phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.menu-contacts__phone:hover,
.menu-contacts__phone {
  color: #b80024;
  outline: none;
}

.menu-contacts__phone-text {
  font-weight: 400;
  font-size: 18px;
  color: #001534;
}

.menu-contacts__email {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.menu-contacts__email-text {
  font-weight: 400;
  font-size: 18px;
  color: #001534;
}

.menu-contacts__email-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.menu-contacts__phone-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.social-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.social-media__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer {
  background-color: #001534;
  padding: 40px 0px;
  position: relative;
  z-index: 3;
}

.footer__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  row-gap: 24px;
}

.footer-contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
}

.footer-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}

.footer-phone,
.footer-email,
.footer-tg {
  font-size: 18px;
  text-align: center;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}

.footer-phone span,
.footer-email span,
.footer-tg span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}

.footer-social-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
}

.breadcrumbs {
  position: relative;
  z-index: 2;
}

.breadcrumbs__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: auto;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}

.breadcrumbs__item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width=%2764px%27 height=%2764px%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M4 12H20M20 12L16 8M20 12L16 16%27 stroke=%27%23afafaf%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.breadcrumbs__link {
  font-weight: 400;
  font-size: 18px;
  color: #afafaf;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.breadcrumbs__current {
  font-size: 18px;
  font-weight: 500;
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #333;
}

.breadcrumbs-lesson {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  z-index: 2;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  padding: 8px 18px;
  margin: 0px 0px 20px 0px;
}

.breadcrumbs-lesson__list {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
  font-weight: 500;
  font-weight: 400;
  font-size: 18px;
  color: #afafaf;
}

.breadcrumbs-lesson__item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.breadcrumbs-lesson__item:not(:last-child)::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 5px;
  background-image: url("data:image/svg+xml,%3Csvg width=%2764px%27 height=%2764px%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M4 12H20M20 12L16 8M20 12L16 16%27 stroke=%27%23afafaf%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.first-section {
  padding: 50px 0px;
}

.first-section__bg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  -o-object-fit: cover;
     object-fit: cover;
}

.first-section__container {
  position: relative;
}

.no-webp .first-section__wrap{
  background-image: url("../img/first-section-bg.png"); }

.first-section__wrap {
  padding: 98px 50px 40px 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 38px;
     -moz-column-gap: 38px;
          column-gap: 38px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.first-section__image {
  width: 160px;
  height: 160px;
  background-color: #b80024;
  border-radius: 50%;
}

.first-section__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.first-section__lighten {
  position: absolute;
  right: -150px;
  top: -27px;
}

.first-section__text {
  position: relative;
  z-index: 2;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b80024;
}

.first-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 2;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  font-weight: 500;
  font-size: 40px;
  color: #1a1a1a;
}

.first-section__text1 {
  position: relative;
  z-index: 2;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  color: #1a1a1a;
}

.home-banner {
  padding: 50px 0px;
  color: #fff;
  font-family: var(--font-family);
}

.home-banner__wrap {
  position: relative;
}

.home-banner__box {
  overflow: hidden;
}

.home-banner__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.home-banner__icon {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 2;
}

.home-banner__content {
  max-width: 700px;
  width: 100%;
  position: relative;
  z-index: 3;
  min-height: 383px;
  padding: 70px 50px;
}

.home-banner__title {
  font-weight: 600;
  font-size: 45px;
  color: #fff;
  margin: 0px 0px 10px 0px;
}

.home-banner__text {
  font-size: 24px;
  line-height: 110%;
  color: #fff;
  margin: 0px 0px 25px 0px;
}

.home-banner__text strong {
  font-weight: 600;
}

.home-banner__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 600;
  font-size: 16px;
  padding: 11px 43px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  min-height: 50px;
  text-transform: uppercase;
}

.separator {
  position: relative;
  z-index: 99;
  width: 100%;
  height: 50px;
  background: -o-linear-gradient(282deg, #001534 12%, #021780 39%);
  background: linear-gradient(168deg, #001534 12%, #021780 39%);
}

.section-card {
  position: relative;
  padding: 50px 0px;
  overflow: hidden;
}

.section-card__gray-background::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  background: #f7f7f7;
  border-radius: 4px;
  width: 1440px;
  margin: 0 auto;
}

.section-card__margin {
  margin: 50px 0px;
}

.section-card__fon {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0px;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.section-card__wrap {
  position: relative;
  z-index: 2;
}

.section-card__title {
  margin: 0px 0px 20px 0px;
}

.section-card__info {
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  text-align: center;
  color: #1a1a1a;
  margin: 0px 0px 20px 0px;
}

.section-card__box {
  margin-top: 40px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.webinar-room {
  padding: 0px 0px 50px 0px;
}

.webinar-room__container {
  max-width: 100%;
  padding: 0px 50px;
}

.webinar-room__title {
  font-weight: 600;
  font-size: 36px;
  color: #1a1a1a;
  margin: 0px 0px 40px 0px;
}

.webinar-room__title.text-center {
  text-align: center;
}

.webinar-room__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}

.webinar-room__body {
  width: 100%;
  height: calc(100% - 20px);
}

/* Секция вебинар-комнаты */

.webinar-room {
  padding: 0;
  height: calc(100vh - 50px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.webinar-room__container {
  max-width: 100%;
  padding: 0;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.webinar-room__wrap {
  height: 100%;
  padding: 20px;
  padding-bottom: 0px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.webinar-room__title {
  font-weight: 600;
  font-size: 36px;
  color: #1a1a1a;
  margin: 0px 0px 40px 0px;
}

.webinar-room__title.text-center {
  text-align: center;
}

.webinar-room__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  height: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
}

.webinar-room__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 0;
}

.webinar-room__title {
  font-weight: 600;
  font-size: 28px;
  color: #1a1a1a;
  margin: 0px 0px 40px 0px;
}

/* Контейнер видеоплеера */


.player-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
}

/* Обертка видео */

.video-wrapper {
  position: relative;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* Основной видео элемент */

#videoPlayer {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  max-height: 100%;
}

/* Панель управления видео */

.controls {
  position: relative;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-height: 60px;
}

/* Кнопки управления */

.control-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 5px;
  font-size: 16px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Контейнер прогресс-бара */

.progress-container {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  min-width: 50px;
}

/* Сам прогресс-бар */

.progress-bar {
  height: 100%;
  background: #b80024;
  border-radius: 2px;
  width: 0%;
  -webkit-transition: width 0.1s ease;
  -o-transition: width 0.1s ease;
  transition: width 0.1s ease;
}

/* Отображение времени */

.time {
  color: white;
  font-size: 14px;
  min-width: 100px;
  text-align: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Контейнер громкости */

.volume-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Слайдер громкости */

.volume-slider {
  width: 60px;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Меню настроек */

.settings-menu {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Содержимое настроек */

.settings-content {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 5px;
  display: none;
  min-width: 80px;
  z-index: 20;
}

.settings-menu:hover .settings-content {
  display: block;
}

/* Опции настроек */

.settings-option {
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
}

.settings-option:hover,
.settings-option.active {
  background: #b80024;
}

/* Чат вебинар-комнаты */

.chat-webinar-room {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 370px;
  width: 100%;
  border: 2px solid #f0f0f0;
  padding: 17px 15px 19px 15px;
  background-color: #fff;
  border-radius: 4px;
  margin-left: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: calc(100% - 20px);
}

.chat-webinar-room__title {
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 130%;
  color: #1a1a1a;
  margin: 0px 0px 16px 0px;
  text-align: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.chat-webinar-room__input {
  padding: 10px 10px;
  width: 100%;
  height: 64px;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  margin: 0px 0px 5px 0px;
  font-size: 18px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 20px;
}

.chat-webinar-room__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  padding: 15px 17px 15px 25px;
  border-radius: 4px;
  background: #f9f9f9;
  margin: 0px 0px 5px 0px;
  overflow-y: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
}

.chat-webinar-room__items {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
}

.chat-webinar-room__button {
  border-radius: 4px;
  width: 100%;
  background: #b80024;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  padding: 10px 10px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-top: auto;
  border: none;
  cursor: pointer;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  transition: all 0.3s ease 0s;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 5px;
}

.chat-webinar-room__button--empty {
  background: #eae8e9;
  color: #fff;
}

/* Элементы чата */

.chat-webinar-room-item {
  position: relative;
  -webkit-box-shadow: 0 4px 24px 0 rgba(26, 26, 26, 0.1);
          box-shadow: 0 4px 24px 0 rgba(26, 26, 26, 0.1);
  background: #fff;
  border-radius: 4px;
  padding: 10px 28px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.chat-webinar-room-item:not(:last-child) {
  margin-bottom: 10px;
}

.chat-webinar-room-item__icon {
  position: absolute;
  top: 0px;
  left: -15px;
  width: 31px;
  height: 31px;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  border-radius: 50%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: #d9d9d9;
  z-index: 2;
}

.chat-webinar-room-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0px 0px 4px 0px;
}

.chat-webinar-room-item__name {
  font-weight: 500;
  font-size: 16px;
  color: #a39a9a;
}

.chat-webinar-room-item__time {
  font-weight: 600;
  font-size: 12px;
  line-height: 142%;
  text-align: right;
  color: #a39a9a;
}

.chat-webinar-room-item__text {
  font-weight: 400;
  font-size: 14px;
  line-height: 107%;
  color: #1a1a1a;
}

.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 4px;
  padding: 12px 50px;
  font-weight: 600;
  font-size: 16px;
  line-height: 130%;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn--continue {
  background: #0880ea;
  color: #fff;
}

.btn--continue:hover {
  background: #0669c7;
}

.btn--completed {
  background: #299764;
  color: #fff;
}

.btn--completed:hover {
  background: #237c52;
}

.btn--disabled {
  background: #f0f0f0;
  color: #acacac;
  cursor: not-allowed;
}

.btn--disabled:hover {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #f0f0f0;
}

.btn--register {
  background: #b80024;
  color: #fff;
}

.btn--register:hover {
  background: #9a001e;
}

.btn__text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
}

.btn__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.btn__arrow {
  margin-left: 8px;
  font-weight: bold;
}

.progress {
  width: 100%;
  height: 4px;
  background-color: #beebd6;
  border-radius: 2px;
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background-color: #37c181;
  -webkit-transition: width 0.3s ease, background-color 0.3s ease;
  -o-transition: width 0.3s ease, background-color 0.3s ease;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 2px;
}

.progress__bar--high {
  background-color: #299764;
}

.progress--disabled {
  background-color: #f0f0f0;
}

.progress--disabled .progress__bar {
  background-color: #acacac;
}

.circle-progress {
  width: 36px;
  height: 36px;
  position: relative;
}

.circle-progress__svg {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.circle-progress__background {
  fill: none;
  stroke: #beebd6;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.circle-progress__fill {
  fill: none;
  stroke: #37c181;
  stroke-width: 4;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  -webkit-transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
  -o-transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
  transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
}

.circle-progress__fill--high {
  stroke: #299764;
}

.circle-progress__text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
  color: #37c181;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.circle-progress__text--high {
  color: #299764 !important;
}

.circle-progress--disabled .circle-progress__background {
  stroke: #f0f0f0;
}

.circle-progress--disabled .circle-progress__fill {
  stroke: #acacac;
}

.circle-progress--disabled .circle-progress__text {
  color: #acacac !important;
}

.main-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  background: #f1f1f1;
  width: 100%;
  overflow: hidden;
}

.main-card--low-progress .main-card__title {
  color: #37c181;
}

.main-card--medium-progress .main-card__title {
  color: #0880ea;
}

.main-card--high-progress .main-card__title {
  color: #299764;
}

.main-card--completed .main-card__title {
  color: #299764;
}

.main-card--disabled {
  opacity: 0.7;
}

.main-card--disabled .main-card__title {
  color: #acacac;
}

.main-card__block-number {
  position: absolute;
  top: 20px;
  right: 10px;
  border-radius: 4px;
  padding: 4px 11px;
  min-height: 31px;
  background: #b80024;
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  color: #fff;
  z-index: 2;
}

.main-card__icon {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 62px;
  left: 22px;
  z-index: 2;
}

.main-card__image {
  position: relative;
  width: 100%;
  height: 195px;
  background-color: #fff;
}

.main-card__image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.main-card__body {
  background-color: #fff;
  padding: 10px 20px 20px 20px;
}

.main-card__header {
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  margin: 0 0 8px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.main-card__title {
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
}

.main-card__title--completed {
  color: #299764;
}

.main-card__title--disabled {
  color: #acacac;
}

.main-card__text {
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: #1a1a1a;
}

.main-card__btn {
  margin-top: 50px;
  width: 100%;
}

.card-event {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  height: auto;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  width: 100%;
  max-width: 290px;
  min-height: 390px;
  width: 100%;
  padding: 20px;
  -webkit-box-shadow: 0 4px 10px rgba(20, 38, 84, 0.25);
          box-shadow: 0 4px 10px rgba(20, 38, 84, 0.25);
  background: #fff;
}

.card-event__image {
  position: absolute;
  bottom: 0px;
  left: 0px;
  pointer-events: none;
}

.card-event__target {
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 4px;
  padding: 4px 11px;
  width: auto;
  min-height: 31px;
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
}

.card-event__target--green {
  background: #299764;
  color: #fff;
}

.card-event__target--blue {
  background: #0880ea;
  color: #fff;
}

.card-event__target--yellow {
  color: #1a1a1a;
  background: #f9da10;
}

.card-event__target--dark-red {
  color: #fff;
  background: #b80024;
}

.card-event__header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ececec;
  margin: 0 0 30px 0;
}

.card-event__header-date {
  font-weight: 500;
  font-size: 28px;
  line-height: 130%;
  color: #1a1a1a;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  margin: 0 0 10px 0;
}

.card-event__time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: #1a1a1a;
  gap: 8px;
}

.card-event__time-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 16px;
  height: 16px;
}

.card-event__body {
  margin: 0 0 20px 0;
}

.card-event__day {
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  color: #b80024;
  margin: 0 0 10px 0;
}

.card-event__list {
  font-size: 18px;
  line-height: 100%;
  color: #1a1a1a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
}

.card-event__btn {
  width: 100%;
  margin-top: auto;
}

.main-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  background: #f1f1f1;
  width: 100%;
  overflow: hidden;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="0"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="1"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="2"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="3"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="4"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="5"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="6"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="7"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="8"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="9"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="10"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="11"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="12"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="13"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="14"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="15"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="16"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="17"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="18"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="19"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="20"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="21"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="22"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="23"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="24"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="25"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="26"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="27"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="28"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="29"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="30"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="31"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="32"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="33"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="34"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="35"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="36"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="37"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="38"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="39"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="40"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="41"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="42"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="43"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="44"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="45"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="46"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="47"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="48"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="49"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="50"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="51"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="52"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="53"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="54"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="55"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="56"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="57"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="58"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="59"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="60"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="61"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="62"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="63"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="64"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="65"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="66"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="67"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="68"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="69"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="70"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="71"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="72"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="73"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="75"] .main-card__title {
  color: #37c181;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="0"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="1"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="2"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="3"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="4"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="5"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="6"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="7"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="8"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="9"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="10"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="11"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="12"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="13"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="14"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="15"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="16"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="17"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="18"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="19"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="20"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="21"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="22"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="23"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="24"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="25"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="26"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="27"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="28"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="29"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="30"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="31"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="32"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="33"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="34"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="35"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="36"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="37"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="38"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="39"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="40"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="41"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="42"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="43"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="44"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="45"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="46"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="47"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="48"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="49"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="50"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="51"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="52"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="53"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="54"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="55"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="56"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="57"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="58"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="59"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="60"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="61"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="62"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="63"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="64"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="65"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="66"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="67"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="68"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="69"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="70"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="71"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="72"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="73"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="75"] .progress__bar {
  background-color: #37c181;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="0"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="1"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="2"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="3"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="4"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="5"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="6"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="7"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="8"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="9"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="10"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="11"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="12"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="13"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="14"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="15"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="16"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="17"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="18"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="19"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="20"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="21"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="22"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="23"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="24"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="25"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="26"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="27"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="28"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="29"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="30"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="31"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="32"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="33"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="34"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="35"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="36"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="37"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="38"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="39"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="40"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="41"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="42"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="43"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="44"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="45"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="46"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="47"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="48"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="49"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="50"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="51"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="52"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="53"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="54"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="55"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="56"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="57"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="58"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="59"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="60"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="61"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="62"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="63"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="64"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="65"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="66"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="67"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="68"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="69"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="70"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="71"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="72"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="73"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="75"] .circle-progress__fill {
  stroke: #37c181;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="0"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="1"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="2"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="3"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="4"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="5"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="6"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="7"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="8"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="9"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="10"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="11"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="12"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="13"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="14"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="15"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="16"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="17"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="18"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="19"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="20"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="21"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="22"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="23"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="24"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="25"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="26"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="27"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="28"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="29"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="30"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="31"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="32"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="33"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="34"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="35"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="36"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="37"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="38"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="39"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="40"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="41"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="42"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="43"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="44"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="45"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="46"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="47"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="48"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="49"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="50"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="51"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="52"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="53"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="54"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="55"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="56"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="57"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="58"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="59"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="60"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="61"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="62"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="63"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="64"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="65"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="66"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="67"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="68"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="69"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="70"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="71"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="72"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="73"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="75"] .circle-progress__text {
  color: #37c181;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="0"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="1"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="2"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="3"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="4"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="5"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="6"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="7"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="8"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="9"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="10"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="11"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="12"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="13"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="14"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="15"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="16"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="17"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="18"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="19"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="20"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="21"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="22"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="23"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="24"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="25"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="26"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="27"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="28"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="29"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="30"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="31"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="32"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="33"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="34"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="35"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="36"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="37"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="38"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="39"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="40"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="41"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="42"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="43"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="44"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="45"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="46"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="47"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="48"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="49"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="50"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="51"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="52"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="53"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="54"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="55"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="56"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="57"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="58"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="59"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="60"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="61"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="62"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="63"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="64"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="65"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="66"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="67"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="68"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="69"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="70"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="71"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="72"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="73"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="75"] .main-card__btn {
  background: #0880ea;
  color: #ffffff;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="0"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="1"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="2"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="3"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="4"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="5"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="6"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="7"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="8"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="9"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="10"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="11"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="12"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="13"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="14"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="15"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="16"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="17"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="18"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="19"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="20"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="21"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="22"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="23"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="24"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="25"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="26"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="27"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="28"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="29"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="30"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="31"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="32"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="33"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="34"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="35"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="36"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="37"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="38"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="39"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="40"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="41"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="42"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="43"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="44"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="45"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="46"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="47"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="48"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="49"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="50"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="51"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="52"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="53"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="54"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="55"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="56"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="57"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="58"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="59"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="60"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="61"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="62"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="63"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="64"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="65"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="66"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="67"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="68"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="69"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="70"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="71"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="72"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="73"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="75"] .main-card__btn:hover {
  background: #0669c7;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="76"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="77"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="78"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="79"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="80"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="81"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="82"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="83"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="84"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="85"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="86"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="87"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="88"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="89"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="90"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="91"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="92"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="93"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="94"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="95"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="96"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="97"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="98"] .main-card__title,
.main-card[data-progress]:not([data-status=disabled])[data-progress="99"] .main-card__title {
  color: #299764;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="76"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="77"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="78"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="79"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="80"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="81"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="82"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="83"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="84"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="85"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="86"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="87"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="88"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="89"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="90"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="91"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="92"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="93"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="94"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="95"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="96"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="97"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="98"] .progress__bar,
.main-card[data-progress]:not([data-status=disabled])[data-progress="99"] .progress__bar {
  background-color: #299764;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="76"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="77"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="78"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="79"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="80"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="81"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="82"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="83"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="84"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="85"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="86"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="87"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="88"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="89"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="90"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="91"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="92"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="93"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="94"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="95"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="96"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="97"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="98"] .circle-progress__fill,
.main-card[data-progress]:not([data-status=disabled])[data-progress="99"] .circle-progress__fill {
  stroke: #299764;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="76"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="77"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="78"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="79"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="80"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="81"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="82"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="83"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="84"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="85"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="86"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="87"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="88"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="89"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="90"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="91"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="92"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="93"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="94"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="95"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="96"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="97"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="98"] .circle-progress__text,
.main-card[data-progress]:not([data-status=disabled])[data-progress="99"] .circle-progress__text {
  color: #299764;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="76"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="77"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="78"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="79"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="80"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="81"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="82"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="83"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="84"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="85"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="86"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="87"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="88"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="89"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="90"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="91"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="92"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="93"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="94"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="95"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="96"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="97"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="98"] .main-card__btn,
.main-card[data-progress]:not([data-status=disabled])[data-progress="99"] .main-card__btn {
  background: #0880ea;
  color: #ffffff;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="76"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="77"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="78"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="79"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="80"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="81"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="82"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="83"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="84"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="85"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="86"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="87"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="88"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="89"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="90"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="91"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="92"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="93"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="94"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="95"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="96"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="97"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="98"] .main-card__btn:hover,
.main-card[data-progress]:not([data-status=disabled])[data-progress="99"] .main-card__btn:hover {
  background: #0669c7;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="100"] .main-card__title {
  color: #299764;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="100"] .progress__bar {
  background-color: #299764;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="100"] .circle-progress__fill {
  stroke: #299764;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="100"] .circle-progress__text {
  color: #299764;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="100"] .main-card__btn {
  background: #299764;
  color: #ffffff;
}

.main-card[data-progress]:not([data-status=disabled])[data-progress="100"] .main-card__btn:hover {
  background: #237c52;
}

.main-card[data-status=disabled] .main-card__title {
  color: #acacac;
}

.main-card[data-status=disabled] .progress__bar {
  background-color: #acacac;
}

.main-card[data-status=disabled] .circle-progress__fill {
  stroke: #acacac;
}

.main-card[data-status=disabled] .circle-progress__text {
  color: #acacac;
}

.main-card[data-status=disabled] .main-card__btn {
  background: #f0f0f0;
  color: #acacac;
}

.main-card[data-status=disabled] .progress {
  background-color: #f0f0f0;
}

.main-card[data-status=disabled] .circle-progress__background {
  stroke: #f0f0f0;
}

.main-card[data-status=disabled] .main-card__btn {
  cursor: not-allowed;
}

.main-card[data-status=disabled] .main-card__btn:hover {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #f0f0f0;
}

.main-card__block-number {
  position: absolute;
  top: 20px;
  right: 10px;
  border-radius: 4px;
  padding: 4px 11px;
  min-height: 31px;
  background: #b80024;
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  color: #fff;
  z-index: 2;
}

.main-card__icon {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 62px;
  left: 22px;
  z-index: 2;
}

.main-card__image {
  position: relative;
  width: 100%;
  height: 195px;
}

.main-card__image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.main-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  background-color: #fff;
  padding: 10px 20px 20px 20px;
}

.main-card__header {
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  margin: 0 0 8px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.main-card__title {
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
}

.main-card__text {
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  color: #1a1a1a;
  margin: 0px 0px 52px 0px;
}

.main-card__btn {
  margin-top: 50px;
  width: 100%;
}

.progress {
  width: 100%;
  height: 4px;
  background-color: #beebd6;
  border-radius: 2px;
  overflow: hidden;
}

.progress__progress--training-block {
  height: 6px;
  border-radius: 6px;
}

.progress__bar {
  height: 100%;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
  border-radius: 2px;
}

.circle-progress {
  width: 36px;
  height: 36px;
  position: relative;
}

.circle-progress__svg {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.circle-progress__background {
  fill: none;
  stroke: #beebd6;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.circle-progress__fill {
  fill: none;
  stroke-width: 4;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  -webkit-transition: stroke-dashoffset 0.3s ease;
  -o-transition: stroke-dashoffset 0.3s ease;
  transition: stroke-dashoffset 0.3s ease;
}

.circle-progress__text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
}

.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 4px;
  padding: 12px 50px;
  font-weight: 600;
  font-size: 16px;
  line-height: 130%;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: auto;
}

.btn:hover {
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn__text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
}

.quests {
  padding: 50px 0px;
}

.quests__container {
  position: relative;
  padding: 0px;
}

.quests__back {
  position: absolute;
  left: 50px;
  top: 20px;
  font-weight: 500;
  font-size: 12px;
  color: #acacac;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 10;
}

.quests__bg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}

.quests__decor {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
}

.quests__wrap {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  position: relative;
  z-index: 2;
  min-height: 307px;
  padding: 50px;
  -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
}

.quests__title {
  font-weight: 600;
  font-size: 45px;
  color: #1a1a1a;
}

:root {
  --primary-color: #b80024;
  --light-bg: #f6f6f6;
  --dark-text: #1a1a1a;
  --border-color: #e0e0e0;
}

.school-section {
  padding: 50px 0px;
}

.table-container {
  overflow-x: auto;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
  color: var(--dark-text);
  text-align: left;
  margin: 0px 0px 30px 0px;
}

.border-none::before {
  content: "";
  display: none;
}

.table-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 1fr 216px 1fr 1fr 1fr;
  grid-template-columns: 2fr 1fr 216px 1fr 1fr 1fr;
  min-width: 1200px;
  overflow: hidden;
}

.header-cell {
  background: var(--light-bg);
  padding: 24px 20px;
  font-weight: 600;
  font-size: 18px;
  color: var(--dark-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 82px;
  border-bottom: 1px solid var(--border-color);
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  font-size: 28px;
}

.header-cell:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background-color: var(--border-color);
}

.data-cell {
  padding: 16px;
  font-weight: 400;
  font-size: 18px;
  color: var(--dark-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid #f0f0f0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
}

.data-cell:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background-color: var(--border-color);
}

.course-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  width: 100%;
}

.course-image {
  width: 60px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #999;
  font-size: 12px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.course-name {
  font-weight: 400;
  font-size: 18px;
  color: var(--dark-text);
  line-height: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.course-name.multiline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.status {
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  padding: 5.5px 12px;
  border-radius: 4px;
  display: inline-block;
  width: 100%;
}

.status-waiting {
  background: var(--primary-color);
}

.status-completed {
  background: #299764;
}

.status-in-progress {
  background: #f9da10;
  color: var(--dark-text);
}

.curator {
  font-weight: 400;
  font-size: 18px;
  color: var(--dark-text);
}

.date {
  font-weight: 400;
  font-size: 18px;
  color: var(--dark-text);
  width: 100%;
}

.action-button {
  border-radius: 4px;
  padding: 12px 20px;
  width: 100%;
  height: 45px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 16px;
  line-height: 130%;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary-color);
  border: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.action-button:hover {
  background: #9a001e;
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(184, 0, 36, 0.2);
          box-shadow: 0 4px 8px rgba(184, 0, 36, 0.2);
}

/* Стили для горизонтального скролла */

.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #333;
  opacity: 0.22;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  opacity: 0.5;
}

/* Адаптивность */

.registration {
  padding: 50px 0px;
  margin-bottom: 40px;
}

.registration__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.registration-form {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 30px;
  background-color: #ffffff;
  width: 100%;
}

.registration-form.entrance {
  padding: 30px 30px 0px 30px;
}

.registration-form.hidden {
  display: none;
}

.registration-form__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.registration-form__name {
  font-weight: 600;
  font-size: 28px;
  line-height: 130%;
}

.registration-form__link-account {
  color: #000;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  text-decoration: underline !important;
}

.registration-form__inputs {
  margin-bottom: 20px;
}

.registration-form__item {
  margin-bottom: 15px;
}

.registration-form__title-input {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  margin: 0px 0px 10px 0px;
}

.registration-form__input {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 18px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
}

.registration-form__input::-webkit-input-placeholder {
  font-size: 18px;
}

.registration-form__input::-moz-placeholder {
  font-size: 18px;
}

.registration-form__input:-ms-input-placeholder {
  font-size: 18px;
}

.registration-form__input::-ms-input-placeholder {
  font-size: 18px;
}

.registration-form__input::placeholder {
  font-size: 18px;
}

.registration-form__input:focus {
  outline: none;
  border-color: #b80024;
}

.registration-form__input.valid {
  border-color: #37c181;
}

.registration-form__input.valid:focus {
  border-color: #37c181;
}

.registration-form__input.error {
  border-color: #b80024;
}

.registration-form__input.error:focus {
  border-color: #b80024;
}

.registration-form__error {
  color: #b80024;
  font-size: 12px;
  margin-top: 5px;
  display: none;
}

.registration-form__error.show {
  display: block;
}

.registration-form__forgot-password {
  display: block;
  color: #1a1a1a;
  margin-bottom: 20px;
  text-decoration: none;
}

.registration-form__forgot-password:hover {
  text-decoration: underline;
}

.registration-form__button {
  background-color: #b80024;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: 20px;
  max-width: 180px;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
}

.registration-form__button:hover {
  background-color: #9a001e;
}

.registration-form__button:disabled {
  background-color: #f0f0f0;
  color: #8a8a8a;
  cursor: not-allowed;
}

.registration-form .checkbox {
  margin-bottom: 20px;
}

.registration-form .checkbox__input {
  display: none;
}

.registration-form .checkbox__input:not(:checked) + .checkbox__label::before {
  border: 1px solid #b80024;
  background-color: transparent;
}

.registration-form .checkbox__input:checked + .checkbox__label::before {
  border: 1px solid #b80024;
  background-color: transparent;
}

.registration-form .checkbox__input:checked + .checkbox__label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 8px;
  height: 12px;
  border: solid #b80024;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 1;
}

.registration-form .checkbox__label {
  cursor: pointer;
  position: relative;
  padding-left: 35px;
  font-size: 16px;
  line-height: 100%;
  color: #595959;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 22px;
}

.registration-form .checkbox__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.registration-form .checkbox__label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 8px;
  height: 12px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.registration-form .checkbox__text {
  font-size: 16px;
  line-height: 100%;
  color: #595959;
}

.registration-form .checkbox__text a {
  font-size: 16px;
  line-height: 100%;
  color: #595959;
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.registration-form__or {
  margin-bottom: 20px;
}

.registration-form__or-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 15px;
}

.registration-form__or-box span:nth-child(1),
.registration-form__or-box span:nth-child(3) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 1px;
  background-color: #e0e0e0;
}

.registration-form__or-box span:nth-child(2) {
  padding: 0 10px;
}

.registration-form__or-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.registration-form__contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
}

.registration-form__contacts-phone,
.registration-form__contacts-email {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: #1a1a1a;
  text-decoration: none;
}

.registration-form__contacts-phone span,
.registration-form__contacts-email span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 400;
  font-size: 18px;
}

.profile {
  padding: 50px 0px;
}

.profile__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.profile__section {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  background-color: #ffffff;
  border-radius: 8px;
}

.profile__section--main {
  max-width: 664px;
  width: 100%;
  border: 2px solid #f0f0f0;
  padding: 30px;
}

.profile__section--secondary {
  max-width: 525px;
  width: 100%;
}

.profile__title {
  font-size: 24px;
  line-height: 130%;
  font-weight: 600;
  margin-bottom: 20px;
}

.profile__subtitle {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}

.profile__block {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 26px 22px 26px 22px;
  margin-bottom: 31px;
}

.profile__group {
  margin-bottom: 20px;
}

.profile__label {
  display: block;
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  margin: 0px 0px 10px 0px;
}

.profile__input,
.profile__textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 4px;
  font-size: 18px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
  border: 1px solid transparent;
}

.profile__input::-webkit-input-placeholder, .profile__textarea::-webkit-input-placeholder {
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: #8a8a8a;
}

.profile__input::-moz-placeholder, .profile__textarea::-moz-placeholder {
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: #8a8a8a;
}

.profile__input:-ms-input-placeholder, .profile__textarea:-ms-input-placeholder {
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: #8a8a8a;
}

.profile__input::-ms-input-placeholder, .profile__textarea::-ms-input-placeholder {
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: #8a8a8a;
}

.profile__input::placeholder,
.profile__textarea::placeholder {
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: #8a8a8a;
}

.profile__input:focus,
.profile__textarea:focus {
  outline: none;
  border-color: #b80024;
}

.profile__input.valid,
.profile__textarea.valid {
  border-color: #37c181;
}

.profile__input.valid:focus,
.profile__textarea.valid:focus {
  border-color: #37c181;
}

.profile__input.error,
.profile__textarea.error {
  border-color: #b80024;
}

.profile__input.error:focus,
.profile__textarea.error:focus {
  border-color: #b80024;
}

.profile__textarea {
  min-height: 190px;
  resize: none;
}

.profile__error {
  color: #b80024;
  font-size: 12px;
  margin-top: 5px;
  display: none;
}

.profile__error.show {
  display: block;
}

.profile__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 4px;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding: 13px 10px;
  max-width: 250px;
  background-color: #b80024;
  color: #ffffff;
  border: none;
  height: 50px;
  border-radius: 4px;
}

.profile__button:hover {
  background-color: #9a001e;
}

.profile__button:disabled {
  background-color: #f0f0f0;
  color: #8a8a8a;
  cursor: not-allowed;
}

.profile__button.save {
  max-width: 170px;
  width: 100%;
}

.profile__button.change {
  max-width: 202px;
  width: 100%;
}

.profile__phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.profile__phone.valid .profile__country-selector,
.profile__phone.valid .profile__phone-field {
  border-color: #37c181;
}

.profile__phone.error .profile__country-selector,
.profile__phone.error .profile__phone-field {
  border-color: #b80024;
}

.profile__phone:focus-within .profile__country-selector,
.profile__phone:focus-within .profile__phone-field {
  border-color: #b80024;
}

.profile__country-selector {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 4px 0 0 4px;
  padding: 0 10px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.profile__country-flag {
  width: 27px;
  height: 27px;
  margin-right: 8px;
}

.profile__country-code {
  font-weight: 500;
}

.profile__country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
  display: none;
}

.profile__country-dropdown--active {
  display: block;
}

.profile__country-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.profile__country-option:hover {
  background-color: #f0f0f0;
}

.profile__country-option .profile__country-flag {
  margin-right: 10px;
}

.profile__country-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.profile__country-name {
  font-size: 14px;
  font-weight: 500;
}

.profile__country-full-code {
  font-size: 12px;
  color: #8a8a8a;
}

.profile__phone-field {
  border: 1px solid #e0e0e0;
  border-radius: 0 4px 4px 0;
  border-left: none;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.profile__input-wrapper {
  position: relative;
}

.profile__password-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}

.profile__subscriptions {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 23px 15px;
}

.profile__subscription-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 130%;
  color: #b80024;
  margin-bottom: 23px;
}

.profile__subscription-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.profile__subscription-name {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
}

.profile__subscription-date {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #b80024;
}

.profile__help-text {
  display: inline;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
}

.profile__contact-link {
  font-weight: 500;
  text-decoration: underline !important;
  color: #1a1a1a;
}

.profile__contact {
  margin: 30px 0px 0px 0px;
}

.profile__connect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.profile__connect-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}

.profile__connect-text {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #1a1a1a;
}

.profile__connect-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
  max-width: 163px;
  width: 100%;
  padding: 12px 14px;
}

.no-webp .registration-info{
  background: url("../img/registration-bg.png"); }

.registration-info {
  max-width: 585px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  border-right: 2px solid #f0f0f0;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.registration-info__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
}

.registration-info__logo {
  padding: 35px 25px 0px 25px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.registration-info__bg {
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 1;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}

.registration-info__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  padding: 40px 30px 0px 30px;
  position: relative;
  z-index: 2;
}

.registration-info__text {
  font-weight: 600;
  font-size: 30px;
  line-height: 100%;
  color: #141f3a;
}

.registration-info__text.tablet {
  display: none;
}

.registration-info__text-color-red-dark {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 600;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: #fff;
  background-color: #b80024;
  color: white;
  padding: 1px;
  padding: 2px 4px;
  border-radius: 4px;
}

.registration-info__image {
  margin-top: auto;
  margin: 45px 0px 0px 0px;
}

.registration-info__image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.registration-info.entrance .registration-info__image {
  margin-top: 30px;
}

.registration-info.entrance .registration-info__image img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  height: 348px;
}

.registration-info.entrance .registration-info__box {
  padding-top: 0px;
}

.quick-start {
  padding: 50px 0px;
  position: relative;
}

.quick-start__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  color: #acacac;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 5;
  display: none;
}

.quick-start__wrap {
  padding: 50px 30px 30px 51px;
  position: relative;
}

.quick-start__num {
  position: absolute;
  right: 38px;
  top: 34px;
  border-radius: 4px;
  padding: 4px 11px;
  background: #b80024;
  font-weight: 500;
  font-size: 24px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  z-index: 3;
}

.quick-start__dtcor {
  position: absolute;
  right: 38px;
  bottom: 82.4px;
  z-index: 3;
}

.quick-start__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}

.quick-start__box {
  position: relative;
  z-index: 2;
  margin: 43px 0px 0px 0px;
}

.quick-start__online-course {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b80024;
}

.quick-start__title {
  font-weight: 600;
  font-size: 36px;
  color: #1a1a1a;
  margin: 0px 0px 11px 0px;
  line-height: 100%;
  max-width: 950px;
  width: 100%;
}

.quick-start__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 107px;
     -moz-column-gap: 107px;
          column-gap: 107px;
  margin: 0px 0px 27px 0px;
}

.quick-start__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}

.quick-start__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.quick-start__text {
  font-weight: 400;
  font-size: 20px;
  color: #000;
}

/* Секция общего прогресса */

.progress-section {
  margin-bottom: 30px;
}

.progress-section__container {
  background: #fff;
  -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}

.progress-section__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 15px;
}

.progress-section__title {
  font-weight: 600;
  font-size: 24px;
  color: #1a1a1a;
}

.progress-section__percentage {
  font-size: 20px;
  color: #acacac;
}

.progress-section__percentage--completed {
  color: #299764;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #beebd6;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
  border-radius: 2px;
  background-color: #37c181;
}

.progress-bar__fill--high {
  background-color: #299764;
}

/* Секция спойлеров */

.spoilers-section {
  margin-bottom: 62px;
  position: relative;
  z-index: 10;
}

.spoilers-section__container {
  max-width: 980px;
}

.spoiler {
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: 20px;
  -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  background: #fafafa;
}

.spoiler:last-child {
  margin-bottom: 0;
}

.spoiler--completed {
  border: 2px solid #299764;
}

.spoiler__header {
  padding: 31.5px 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.spoiler__content {
  max-height: 0;
  overflow: hidden;
}

.spoiler__content--open {
  max-height: 2000px;
  background: #fff;
  padding: 20px 0px;
}

.spoiler__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}

.spoiler__info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.spoiler__title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

.spoiler__title {
  font-weight: 600;
  font-size: 28px;
  color: #1a1a1a;
  font-size: 26px;
  font-size: 24px;
}

.spoiler__title--completed {
  color: #299764;
}

.spoiler__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.spoiler__progress-text {
  font-size: 20px;
  font-size: 18px;
  color: #acacac;
}

.spoiler__progress-text--completed {
  color: #299764;
}

.spoiler__toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin: -10px;
}

.spoiler__toggle:hover {
  opacity: 0.8;
}

.spoiler__toggle--open {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* Круговой прогресс */

.circle-progress {
  width: 65px;
  height: 65px;
  position: relative;
}

.circle-progress__svg {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.circle-progress__background {
  fill: none;
  stroke: #beebd6;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.circle-progress__fill {
  fill: none;
  stroke-width: 4;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  -webkit-transition: stroke-dashoffset 0.3s ease;
  -o-transition: stroke-dashoffset 0.3s ease;
  transition: stroke-dashoffset 0.3s ease;
  stroke: #37c181;
}

.circle-progress__fill--high {
  stroke: #299764;
}

.circle-progress__text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
}

.circle-progress__text--high {
  color: #299764;
}

.circle-progress__text--medium {
  color: #37c181;
}

/* Элементы внутри спойлера */

.spoiler-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
  border-radius: 4px;
  padding: 22px;
  margin: 10px 20px 10px 20px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #fafafa;
}

.spoiler-item--done {
  background: #d9f7e9;
}

.spoiler-item--error {
  background: #ffe4ea;
}

.spoiler-item__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.spoiler-item__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.spoiler-item__title {
  font-size: 20px;
  color: #1a1a1a;
}

.spoiler-item__title--done {
  color: #299764;
}

.spoiler-item__status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 20px;
}

.spoiler-item__progress {
  color: #acacac;
}

.spoiler-item__progress--done {
  color: #299764;
}

.spoiler-item__progress--error {
  color: #b80024;
}

.spoiler-item__status-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.lesson {
  position: relative;
  z-index: 2;
  padding-bottom: 100px;
}

.lesson-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
}

.lesson-wrap {
  width: 100%;
}

.lesson-spoiler-box {
  max-width: 425px;
  width: 100%;
  -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  padding: 20px 20px 29px 20px;
}

.lesson-spoiler-wrap {
  margin: 0px 0px 20px 0px;
}

.lesson-spoiler-wrap-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0px 0px 21px 0px;
}

.lesson-spoiler-wrap-title__title {
  font-weight: 600;
  font-size: 24px;
  color: #1a1a1a;
}

.lesson-spoiler-wrap-title__percent {
  font-weight: 400;
  font-size: 20px;
  text-align: right;
  color: #acacac;
}

.lesson-progress-bar-line {
  width: 100%;
  height: 6px;
  background-color: #beebd6;
  border-radius: 4px;
  overflow: hidden;
}

.lesson-progress-bar-line__fill {
  height: 100%;
  background-color: #37c181;
  border-radius: 4px;
  width: 0%;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

.lesson-progress-bar {
  width: 36px;
  height: 36px;
}

.lesson-progress-bar__svg {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.lesson-progress-bar__background {
  fill: none;
  stroke: #beebd6;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.lesson-progress-bar__fill {
  fill: none;
  stroke: #37c181;
  stroke-width: 4;
  stroke-miterlimit: 10;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  -webkit-transition: stroke-dashoffset 0.3s ease;
  -o-transition: stroke-dashoffset 0.3s ease;
  transition: stroke-dashoffset 0.3s ease;
}

.lesson-spollers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.lesson-spollers__item {
  background: #fff;
}

.lesson-spollers__item:not(:last-child) {
  margin-bottom: 10px;
}

.lesson-spollers__item--done {
  border: 1px solid #299764;
  -webkit-box-shadow: 0 4px 24px 0 rgba(255, 245, 247, 0.1);
          box-shadow: 0 4px 24px 0 rgba(255, 245, 247, 0.1);
  border-radius: 4px;
}

.lesson-spollers__item--done .lesson-spollers__title {
  border: 1px solid #299764;
  -webkit-box-shadow: 0 4px 24px 0 rgba(255, 245, 247, 0.1);
          box-shadow: 0 4px 24px 0 rgba(255, 245, 247, 0.1);
  color: #299764;
}

.lesson-spollers__item--done .lesson-spollers__inner {
  background-color: #d9f7e9;
}

.lesson-spollers__item--done .lesson-spollers__title {
  border: none;
}

.lesson-spollers__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  font-weight: 500;
  font-size: 20px;
  color: #1a1a1a;
  padding: 15.5px 16px;
  border-radius: 4px;
  border: 1px solid #f7f7f7;
  background: #f9f9f9;
  cursor: pointer;
  width: 100%;
  align-items: center;
}

.lesson-spollers__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.lesson-spollers__arrow {
  margin-left: auto;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.lesson-spollers__item--active .lesson-spollers__arrow {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.lesson-spollers__content {
  background: #fff;
  display: none;
}

.lesson-spollers__item--active .lesson-spollers__content {
  display: block;
}

.lesson-spollers__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  padding: 20px;
  background: #fafafa;
  border-radius: 4px;
  margin: 10px 0px 10px 20px;
  text-decoration: none;
  color: inherit;
}



.lesson-spollers__inner--done {
  background: #d9f7e9;
}

.lesson-spollers__inner-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.lesson-spollers__inner-text {
  font-weight: 400;
  font-size: 18px;
  color: #1a1a1a;
  line-height: 100%;
  display: flex;
  align-items: center;
}

.lesson-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 30px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.lesson-block__wrap-title {
  padding: 16px 21px;
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  background: #fafafa;
  margin: 0px 0px 20px 0px;
}

.lesson-block__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.lesson-block__name {
  font-weight: 500;
  font-size: 20px;
  color: #1a1a1a;
}

.lesson-block__icon2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: auto;
}

.lesson-block__wra-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0px 0px 0px 0px;
}

.lesson-block-margin-top {
  margin-top: 30px;
}

.lesson-block__title {
  font-weight: 500;
  font-size: 18px;
  color: #1a1a1a;
  margin: 0px 0px 10px 0px;
}

.lesson-block__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 10px;
}

.lesson-block__item {
  font-weight: 400;
  font-size: 16px;
  color: #1a1a1a;
}

.lesson-block__buttons {
  margin-left: auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}

.lesson-block__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: none;
}

.lesson-block-bottons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  margin-left: auto;
  margin-top: 30px;
}

.lesson-block-bottons .btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: auto;
  padding: 12px 15px;
  line-height: 100%;
}

.player-container {
  width: 100%;
  overflow: hidden;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  background-color: #000;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
}

.play-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 10;
  opacity: 1;
  border-radius: 50%;
  overflow: hidden;
}

.play-button.hidden {
  opacity: 0;
  pointer-events: none;
}

.play-button:hover {
  -webkit-transform: translate(-50%, -50%) scale(1.1);
      -ms-transform: translate(-50%, -50%) scale(1.1);
          transform: translate(-50%, -50%) scale(1.1);
}

.controls {
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 16px;
  background-color: #333;
}

.controls.visible {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.control-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  margin-right: 10px;
  padding: 5px;
  border-radius: 4px;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.progress-container {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 6px;
  background-color: #555;
  border-radius: 3px;
  margin: 0 15px;
  cursor: pointer;
  position: relative;
}

.progress-bar {
  height: 100%;
  background-color: #b80024;
  border-radius: 3px;
  width: 0%;
}

.time {
  color: #ddd;
  font-size: 14px;
  min-width: 100px;
  text-align: center;
}

.volume-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 10px;
}

.volume-slider {
  width: 80px;
  margin-left: 8px;
}

.settings-menu {
  position: relative;
}

.settings-content {
  display: none;
  position: absolute;
  bottom: 40px;
  right: 0;
  background-color: #222;
  border-radius: 4px;
  padding: 10px;
  min-width: 150px;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.settings-content.show {
  display: block;
}

.settings-option {
  color: white;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.settings-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.quality-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.quality-option.active {
  color: white;
}

.speed-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.speed-option.active {
  color: white;
}

/* Мобильные элементы управления */

.mobile-controls-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), color-stop(20%, transparent), color-stop(80%, transparent), to(rgba(0, 0, 0, 0.4)));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.4) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.4) 100%);
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  z-index: 5;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.mobile-controls-overlay.visible {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}

.mobile-controls-top,
.mobile-controls-bottom {
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mobile-controls-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.mobile-control-btn {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  font-size: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.mobile-control-btn.big {
  width: 60px;
  height: 60px;
  font-size: 28px;
}

.mobile-control-btn:active {
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
  background: rgba(184, 0, 36, 0.8);
}

.mobile-time {
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Адаптивные стили для мобильных устройств */

/* Горизонтальная ориентация на мобильных */

/* Поддержка жестов для перемотки */

.video-wrapper {
  -ms-touch-action: pan-y;
      touch-action: pan-y;
}

/* Улучшения для доступности на мобильных */

/* Анимация появления мобильных контролов */

@-webkit-keyframes fadeInControls {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeInControls {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.mobile-controls-overlay.visible .mobile-controls-top,
.mobile-controls-overlay.visible .mobile-controls-bottom {
  -webkit-animation: fadeInControls 0.3s ease;
          animation: fadeInControls 0.3s ease;
}

.lesson-block-testing__title {
  font-weight: 600;
  font-size: 24px;
  color: #1a1a1a;
  margin: 0px 0px 11px 0px;
}

.lesson-block-testing__text {
  font-size: 18px;
  color: #1a1a1a;
  font-weight: 400;
}

.lesson-block-testing__text strong {
  font-weight: 500;
}

.lesson-block-testing__button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 600;
  font-size: 16px;
  padding: 11px 22px;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-top: 30px;
  cursor: pointer;
}

/* Блок lesson-question */

.lesson-question {
  width: 100%;
  max-width: 720px;
  /* Элемент lesson-question__indicators */
  /* Элемент lesson-question__indicator */
  /* Элемент lesson-question__count */
  /* Элемент lesson-question__title */
  /* Элемент lesson-question__options */
  /* Элемент lesson-question__option */
  /* Элемент lesson-question__checkbox */
  /* Элемент lesson-question__checkbox-inactive */
  /* Элемент lesson-question__checkbox-active */
  /* Элемент lesson-question__checkbox-incorrect */
  /* Элемент lesson-question__option-text */
}

.lesson-question__indicators {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.lesson-question__indicator {
  border-radius: 10px;
  width: 36px;
  height: 4px;
  background: #ececec;
  /* Модификатор lesson-question__indicator--correct */
  /* Модификатор lesson-question__indicator--incorrect */
}

.lesson-question__indicator--correct {
  background: #299764;
}

.lesson-question__indicator--incorrect {
  background: #eb8fa1;
}

.lesson-question__count {
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  color: #333;
  margin-bottom: 12px;
}

.lesson-question__title {
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 20px;
}

.lesson-question__options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}

.lesson-question__option {
  border-radius: 4px;
  width: 100%;
  min-height: 46px;
  background: #f5f5f5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 16px;
  gap: 12px;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  /* Ховер для lesson-question__option */
  /* Модификатор lesson-question__option--active */
  /* Модификатор lesson-question__option--incorrect */
}

.lesson-question__option:hover {
  background: #eeeeee;
}

.lesson-question__option--active {
  background: #d9f7e9;
  /* Ховер для lesson-question__option--active */
}

.lesson-question__option--active:hover {
  background: #c5f0dc;
}

.lesson-question__option--incorrect {
  background: #f9e6ea;
  cursor: not-allowed;
  /* Ховер для lesson-question__option--incorrect */
}

.lesson-question__option--incorrect:hover {
  background: #f9e6ea;
}

.lesson-question__checkbox {
  width: 20px;
  height: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.lesson-question__checkbox-inactive {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 1px solid #d8d5d5;
  -webkit-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
  /* Ховер для lesson-question__checkbox-inactive */
}

.lesson-question__option:hover .lesson-question__checkbox-inactive {
  border-color: #b3b3b3;
}

.lesson-question__checkbox-active {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 3px solid #299764;
  position: relative;
  /* Псевдоэлемент для lesson-question__checkbox-active */
}

.lesson-question__checkbox-active::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #299764;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.lesson-question__checkbox-incorrect {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 3px solid #b80024;
  position: relative;
  /* Псевдоэлемент для lesson-question__checkbox-incorrect */
}

.lesson-question__checkbox-incorrect::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b80024;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.lesson-question__option-text {
  font-weight: 400;
  font-size: 18px;
  color: #7e7e7e;
  -webkit-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
  /* Ховер для lesson-question__option-text */
  /* Модификатор для lesson-question__option-text в активном состоянии */
  /* Модификатор для lesson-question__option-text в неправильном состоянии */
}

.lesson-question__option:hover .lesson-question__option-text {
  color: #5a5a5a;
}

.lesson-question__option--active .lesson-question__option-text {
  color: #1a1a1a;
}

.lesson-question__option--incorrect .lesson-question__option-text {
  color: #b80024;
}

.correct-answers {
  background: #d9f7e9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 10px 10px 10px;
  margin-top: 30px;
}

.correct-answers__correct-answers--erorr {
  background: #ffe4ea;
}

.correct-answers__correct-answers--erorr .correct-answers__percent {
  color: #b80024;
}

.correct-answers__title {
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  color: #333;
  margin: 0px 0px 5px 0px;
}

.correct-answers__wrap-percent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}

.correct-answers__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.correct-answers__percent {
  font-weight: 600;
  font-size: 28px;
  color: #299764;
}

.correct-answers__correct {
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  color: #333;
}

.task-process-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  row-gap: 10px;
  margin: 0px 0px 25px 0px;
}

.task-process-buttons__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 7px;
     -moz-column-gap: 7px;
          column-gap: 7px;
  border-radius: 4px;
  width: 100%;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  min-height: 50px;
  border: 1px solid #b80024;
}

.task-process-buttons__button.border-none {
  border: none;
}

.task-process-buttons__button.transparent {
  background-color: transparent;
  color: #1e1e1e;
  border: none;
}

.task-process-buttons__button.left {
  max-width: 350px;
  width: 100%;
}

.task-process-buttons__button-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.task-process-exercise:not(:last-child) {
  margin-bottom: 30px;
}

.task-process-exercise__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #1a1a1a;
  margin: 0px 0px 15px 0px;
}

.task-process-exercise__list {
  margin: 0px 0px 25px 0px;
}

.task-process-exercise__list li {
  font-weight: 400;
  font-size: 18px;
  line-height: 110%;
  position: relative;
  color: #1a1a1a;
  padding-left: 15px;
}

.task-process-exercise__list li:not(:last-child) {
  margin-bottom: 2px;
}

.task-process-exercise__list li::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 8px;
  left: 0;
  background-color: #1a1a1a;
  border-radius: 50%;
}

.task-process-exercise__list li strong {
  font-weight: 500;
}

.task-process-exercise p {
  font-size: 16px;
  line-height: 110%;
  color: #1a1a1a;
}

.task-process-exercise p:not(:last-child) {
  margin-bottom: 14px;
}

.task-process-exercise__task-process-exercise--color-green {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #d9f7e9;
  border-radius: 9px;
}

.task-process-exercise__task-process-exercise--color-green p {
  padding-left: 15px;
}

.task-process-exercise__icon {
  padding: 30px 20px 30px 20px;
}

.task-process-exercise__box {
  padding: 30px 20px 30px 0px;
}

.task-process-schedule:not(:last-child) {
  margin-bottom: 10px;
}

.task-process-items {
  margin: 0px 0px 22px 0px;
}

.item-schedule {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 26px;
     -moz-column-gap: 26px;
          column-gap: 26px;
  row-gap: 10px;
}

.item-schedule__schedule {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #1a1a1a;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  /* will make [...] at the end */
  width: 270px;
  /* change to your preferences */
  white-space: nowrap;
  /* paragraph to one line */
  overflow: hidden;
  /* older browsers */
  display: flex;
  justify-content: space-between;
}

.item-schedule__status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-column-gap: 26px;
  -moz-column-gap: 26px;
  column-gap: 26px;
  margin-left: auto;
  min-width: 250px; /* 150 было */
}

.item-schedule__status .text {
  font-size: 18px;
  line-height: 100%;
  color: #1a1a1a;
}

.item-schedule__status .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.item-schedule__button {
  padding: 8px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: #acacac;
  border-radius: 4px;
  background: #f0f0f0;
}

.form-schedule {
  position: relative;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  width: 100%;
  padding: 50px 30px 45px 30px;
}

.form-schedule__button {
  position: absolute;
  right: 20px;
  top: 20px;
}

.form-schedule__header {
  font-weight: 600;
  font-size: 28px;
  line-height: 130%;
  color: #1a1a1a;
  margin: 0px 0px 40px 0px;
}

.form-schedule__title {
  font-weight: 600;
  font-size: 28px;
  line-height: 130%;
  color: #1a1a1a;
  margin: 0px 0px 10px 0px;
}

.form-schedule__text {
  font-size: 18px;
  line-height: 130%;
  color: #1a1a1a;
  font-weight: 400;
}

.form-schedule__inputs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 20px;
  margin: 0px 0px 20px 0px;
}

.form-schedule__input {
  border-radius: 4px;
  width: 100%;
  height: 50px;
  border-radius: 4px;
  background: #f9f9f9;
  border: 1px solid #b4b4b4;
  padding: 10px 15px;
}

.form-schedule__input.active {
  background: #fff5f7;
}

.form-schedule__sub-title {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #1a1a1a;
  margin: 0px 0px 10px 0px;
}

.form-schedule__textarea {
  border-radius: 4px;
  width: 100%;
  height: 190px;
  resize: none;
  background: #f9f9f9;
  border: 1px solid #b4b4b4;
  padding: 10px 15px;
}

.form-schedule__textarea.active {
  background: #fff5f7;
}


.popup-schedule__textarea {
  border-radius: 4px;
  width: 100%;
  height: 120px;
  resize: none;
  background: #f9f9f9;
  border: 1px solid #b4b4b4;
  padding: 10px 15px;
  margin-top: 15px;
}

.popup-schedule__textarea.active {
  background: #fff5f7;
}

.form-schedule__submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: auto;
  border-radius: 4px;
  padding: 10.5px 30px;
  background: #b80024;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

.asset-name {
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  max-width: 664px;
  width: 100%;
  background: #fff;
  padding: 50px 30px;
}

.asset-name__dialogue-curator-text {
  font-size: 18px;
  line-height: 100%;
  color: #1a1a1a;
}

.asset-name__asset-name--dialogue .asset-name__dialogue-curator-body {
  min-height: 472px;
  overflow: auto;
  background-color: transparent;
}

.asset-name__header {
  margin: 0px 0px 20px 0px;
}

.asset-name__сharts {
  margin: 0px 0px 20px 0px;
}

.asset-name__сharts-text {
  font-weight: 500;
  font-size: 22px;
  color: #1a1a1a;
  margin: 0px 0px 5px 0px;
}

.asset-name__сharts-link {
  display: block;
  font-size: 18px;
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #1a1a1a;
}

.asset-name__rationale {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 5px;
  margin: 0px 0px 20px 0px;
}

.asset-name__rationale-title {
  font-weight: 500;
  font-size: 22px;
  color: #1a1a1a;
}

.asset-name__rationale-body {
  font-weight: 400;
  font-size: 18px;
  color: #1a1a1a;
  line-height: 100%;
}

.asset-name__dialogue-curator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 10px;
}

.asset-name__dialogue-curator-title {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #1a1a1a;
}

.asset-name__dialogue-curator-body {
  font-size: 18px;
  color: #1a1a1a;
  background: #f9f9f9;
  border-radius: 4px;
  width: 100%;
  height: 120px;
  resize: none;
  margin: 0px 0px 20px 0px;
  overflow: auto;
  border: 1px solid #b4b4b4;
  padding: 10px 15px;
}

.asset-name__dialogue-curator-body.active {
  background: #fff5f7;
}

.asset-name__dialogue-curator-body.border-none {
  border: none;
}

.header-asset {
  border-radius: 4px;
  padding: 21px 18px;
  width: 100%;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: #fafafa;
  margin: 0px 0px 20px 0px;
}

.header-asset__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 14px;
     -moz-column-gap: 14px;
          column-gap: 14px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header-asset__icom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.header-asset__name {
  font-weight: 500;
  font-size: 20px;
  color: #1a1a1a;
}

.header-asset__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 14px;
     -moz-column-gap: 14px;
          column-gap: 14px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header-asset__status {
  font-weight: 400;
  font-size: 16px;
  color: #acacac;
}

.header-asset__status--completed {
  color: #299764;
}

.header-asset__status-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.asset-name-date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
  margin-top: 20px;
}

.asset-name-date__item {
  width: 50%;
}

.asset-name-date__name {
  font-weight: 500;
  font-size: 20px;
  color: #1a1a1a;
  margin: 0px 0px 7px 0px;
}

.asset-name-date__data {
  font-weight: 600;
  font-size: 16px;
  line-height: 106%;
  color: #a39a9a;
}

.buttons-asset-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
  margin: 0;
}

.buttons-asset-name__button-download {
  text-align: center;
  color: #b80024;
  border: 1px solid #b80024;
  background: #fff5f7;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.buttons-asset-name__button {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 4px;
  min-height: 50px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}

.buttons-asset-name__button span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.buttons-asset-name__send {
  color: #fff;
  background: #b80024;
  border: 1px solid #b80024;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.dialogue-curator-item {
  border-radius: 4px;
  max-width: 338px;
  width: 100%;
  padding: 10px;
}

.dialogue-curator-item:not(:last-child) {
  margin-bottom: 20px;
}

.dialogue-curator-item__dialogue-curator-item--student {
  background: #e0fff0;
  margin-left: auto;
}

.dialogue-curator-item__dialogue-curator-item--curator {
  background: #fff5f7;
}

.dialogue-curator-item__name {
  font-weight: 500;
  font-size: 16px;
  color: #a39a9a;
  margin: 0px 0px 5px 0px;
}

.dialogue-curator-item__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 106%;
  color: #1a1a1a;
  margin: 0px 0px 10px 0px;
}

.dialogue-curator-item__data {
  font-weight: 600;
  font-size: 12px;
  line-height: 142%;
  color: #a39a9a;
}

.dialogue-curator-items:not(:last-child) {
  margin-bottom: 30px;
}

.decore-room {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 627px;
  height: 189px;
}

@media (min-width: 1025px) {
  .search__close {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  .wrapper.visible {
    overflow: hidden;
  }

  [class$=__container] {
    padding: 0px 20px;
  }

  .decor {
    display: none;
  }

  .btn {
    font-weight: 500;
  }

  h2,
  .h2 {
    font-size: 35px;
  }

  .header {
    margin: 0px 0px 0px 0px;
  }

  .notification__result {
    right: 0px;
  }

  .breadcrumbs-lesson {
    display: none;
  }

  .first-section {
    padding: 20px 0px;
  }

  .first-section__wrap {
    padding: 40px 30px 40px 30px;
    background-position: right;
  }

  .first-section__image {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 36px;
  }

  .first-section__image img,
  .first-section__image svg {
    position: absolute;
    width: 90px;
    height: 90px;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .first-section__content {
    padding-left: 0px;
  }

  .first-section__lighten {
    right: -30px;
    top: -10px;
    top: 0%;
    right: -30%;
  }

  .first-section__text {
    font-size: 18px;
    padding-left: 118px;
  }

  .first-section__title {
    font-size: 28px;
    padding-left: 115px;
  }

  .first-section__text1 {
    margin: 26px 0px 0px 0px;
  }

  .home-banner {
    padding: 20px 0px;
  }

  .home-banner__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 15px;
       -moz-column-gap: 15px;
            column-gap: 15px;
  }

  .home-banner__icon {
    width: 320px;
    height: 302px;
    bottom: 50%;
    -webkit-transform: translate(0, 50%);
        -ms-transform: translate(0, 50%);
            transform: translate(0, 50%);
  }

  .home-banner__content {
    padding: 40px 30px;
    max-width: 400px;
    min-height: 313px;
  }

  .home-banner__title {
    font-size: 35px;
  }

  .home-banner__text {
    font-size: 20px;
  }

  .home-banner__link {
    font-size: 16px;
    max-width: 180px;
    width: 100%;
    font-weight: 500;
  }

  .separator {
    height: 25px;
  }

  .section-card {
    padding: 20px 0px;
  }

  .section-card {
    padding: 50px 0px 50px 0px;
  }

  .section-card__margin {
    margin: 0px 0px 0px 0px;
  }

  .section-card__title {
    margin: 0px 0px 25px 0px;
  }

  .section-card__title {
    margin: 0px 0px 25px 0px;
  }

  .section-card__title.margin-botom {
    margin: 0px 0px 15px 0px;
  }

  .section-card__box {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0px;
  }

  .webinar-room__container {
    padding: 0px 15px;
  }

  .webinar-room__box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 45px;
  }

  .webinar-room__wrap {
    padding: 15px;
  }

  .webinar-room__box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 20px;
  }

  .chat-webinar-room {
    min-width: 100%;
    height: 450px;
    margin-left: 0;
    max-width: none;
  }

  .chat-webinar-room__input {
    height: 60px;
  }

  .chat-webinar-room__button {
    font-weight: 500;
    padding: 15px 15px;
  }

  .card-event {
    max-width: 100%;
    min-height: 386px;
  }

  .btn {
    font-weight: 500;
  }

  .quests {
    padding: 20px 0px;
  }

  .quests__container {
    padding: 0px 20px;
  }

  .quests__decor {
    height: 215px;
  }

  .quests__wrap {
    min-height: 230px;
    padding: 35px;
  }

  .quests__title {
    font-size: 35px;
  }

  .school-section {
    padding: 20px 0px;
  }

  .school-section {
    margin: 0px 0px 25px 0px;
  }

  .header-cell {
    font-size: 24px;
  }

  .registration {
    padding: 20px 0px;
  }

  .registration {
    margin: 0px;
    padding-bottom: 0px;
  }

  .registration__wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: none;
  }

  .registration__container {
    padding: 0px;
  }

  .registration-form.entrance {
    padding: 30px 30px 30px 30px;
  }

  .registration-form__container {
    border: 1px solid #e0e0e0;
    padding: 15px;
  }

  .registration-form__button {
    font-weight: 500;
  }

  .registration-form__contacts {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0px 30px;
  }

  .profile {
    padding: 20px 0px;
  }

  .profile__wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .profile__section--main {
    max-width: 100%;
    margin: 0px 0px 30px 0px;
    padding: 30px 30px 30px 20px;
  }

  .profile__section--secondary {
    max-width: 100%;
  }

  .profile__button {
    font-weight: 500;
    font-size: 16px;
    max-width: 100%;
    width: 100%;
  }

  .profile__help-text {
    font-size: 18px;
  }

  .profile__connect-btn {
    font-size: 16px;
    font-weight: 500;
  }

  .registration-info {
    max-width: 100%;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }

  .registration-info__logo {
    display: none;
  }

  .registration-info__text {
    display: none;
  }

  .registration-info__text.tablet {
    display: block;
  }

  .registration-info__text-color-red-dark {
    display: inline;
    padding: 0px;
    line-height: 150%;
  }

  .registration-info__image {
    margin: 45px 0px -4px 0px;
  }

  .registration-info.registration-big-image .registration-info__image {
    margin-top: 30px;
  }

  .registration-info.registration-big-image .registration-info__image img {
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    height: 348px;
  }

  .registration-info.registration-big-image .registration-info__box {
    padding-top: 0px;
  }

  .quick-start {
    padding: 20px 0px;
  }

  .quick-start {
    padding: 50px 0px;
  }

  .quick-start__wrap {
    padding: 20px 35px;
  }

  .quick-start__num {
    border-radius: 4px;
    padding: 4px 11px;
    font-weight: 500;
    font-size: 16px;
    height: 28px;
    right: 35px;
  }

  .quick-start__dtcor {
    right: 35px;
    bottom: 51px;
  }

  .quick-start__dtcor svg {
    width: 95px;
    height: 95px;
  }

  .quick-start__box {
    margin: 36px 0px 0px 0px;
  }

  .quick-start__online-course {
    font-size: 18px;
  }

  .quick-start__title {
    font-size: 35px;
    max-width: 620px;
  }

  .quick-start__info {
    -webkit-column-gap: 40px;
       -moz-column-gap: 40px;
            column-gap: 40px;
  }

  .quick-start__text {
    font-size: 16px;
  }

  .spoilers-section {
    margin: 0px 0px 50px 0px;
  }

  .spoiler__header {
    padding: 10px 31px;
  }

  .spoiler__title-wrap {
    margin: 0px 0px 0px 0px;
  }

  .spoiler__title {
    font-size: 24px;
  }

  .spoiler__progress-text {
    font-size: 18px;
  }

  .circle-progress {
    width: 54px;
    height: 54px;
  }

  .spoiler-item {
    padding: 13px 20px;
    margin: 20px 30px;
  }

  .spoiler-item__title {
    font-size: 20px;
    font-weight: 400;
  }

  .lesson {
    padding-bottom: 50px;
    padding-top: 50px;
  }

  .lesson-spoiler-box {
    display: none;
  }

  .lesson-block__wrap-title {
    margin-left: -16px;
  }

  .lesson-block__icon {
    display: none;
  }

  .lesson-block__back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .lesson-block-bottons .btn {
    font-size: 16px;
    min-width: 150px;
    width: 100%;
    padding: 15.5px 15px;
  }

  .player-container {
    max-width: 100%;
  }

  .play-button img {
    width: 68px;
    height: 68px;
  }

  .lesson-question {
    max-width: 100%;
  }

  .item-schedule__schedule {
    width: 150px;
    /* change to your preferences */
  }

  .form-schedule__submit {
    font-weight: 500;
  }
}

@media (max-width: 1199.98px) and (max-width: 767.98px) {
  .registration-info.registration-big-image .registration-info__image img {
    margin: 45px 0px -4px 0px;
  }

  .registration-info.registration-big-image .registration-info__image img {
    height: auto;
  }
}

@media (max-width: 1024px) {
  .header__name {
    display: none;
  }

  .burger-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 101;
  }

  .search--active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    z-index: 1000;
    padding: 10px 15px;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .search__wrapper--active {
    width: 100%;
  }

  .search__result {
    width: 100%;
    top: 60px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 60px);
  }

  .section-title {
    margin: 0px 0px 28px 0px;
    line-height: 86%;
  }

  .table-grid {
    padding-bottom: 20px;
  }
}

@media (max-width: 1024px) and (max-width: 1199.98px) {
  .search__result {
    top: 100px;
  }
}

@media (max-width: 1024px) and (max-width: 767.98px) {
  .search__result {
    top: 80px;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 6px 0;
  }

  .menu {
    padding-top: 50px;
  }

  .menu__body {
    padding: 10px 15px;
  }

  .menu__list {
    border-bottom: #e6e3e3 solid 1px;
    border-top: #e6e3e3 solid 1px;
    padding: 25px 0 62px 0;
  }

  .menu-contacts {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .header-cell,
  .data-cell {
    padding: 18px 15px;
  }

  .status {
    padding: 8px 10px;
  }

  .action-button {
    padding: 10px 15px;
    font-size: 14px;
  }

  .course-cell {
    gap: 15px;
  }

  .course-image {
    width: 50px;
    height: 35px;
  }

  .header-cell {
    height: 60px;
  }

  .player-container {
    border-radius: 0;
  }

  .controls {
    padding: 8px 12px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .control-btn {
    font-size: 14px;
    margin-right: 8px;
    padding: 4px;
  }

  .progress-container {
    margin: 0 10px;
    height: 4px;
  }

  .time {
    font-size: 12px;
    min-width: 80px;
  }

  .volume-slider {
    width: 60px;
  }

  .settings-content {
    bottom: 35px;
    min-width: 120px;
    font-size: 14px;
  }

  /* Скрываем некоторые элементы на мобильных */

  .volume-container:not(:hover) .volume-slider {
    width: 0;
    opacity: 0;
    margin: 0;
  }

  .settings-menu .settings-content {
    position: fixed;
    bottom: 70px;
    right: 10px;
    left: 10px;
    min-width: auto;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .player-container {
    max-width: 100%;
  }

  .video-wrapper {
    padding-top: 0;
    height: 300px;
  }

  .mobile-controls-overlay {
    padding: 10px;
  }

  .mobile-controls-top,
  .mobile-controls-bottom {
    padding: 10px;
  }

  .mobile-control-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .mobile-control-btn.big {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}

@media (max-width: 767.98px) {
  .popup-location__title {
    font-size: 28px;
    margin: 0px 0px 25px 0px;
  }

  .popup-location__button {
    text-transform: none;
    padding: 12px 20px;
  }

  h2,
  .h2 {
    font-size: 28px;
    line-height: 86%;
  }

  .header-logo__text {
    display: none;
  }

  .search__close--visible {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .notification__item {
    padding: 0px;
  }

  .notification__item:not(:last-child) {
    margin: 0px 0px 16px 0px;
  }

  .notification__text {
    font-size: 14px;
  }

  .notification__date {
    display: none;
  }

  .user {
    position: static;
  }

  .user {
    display: none;
  }

  .footer-contacts {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 5px;
  }

  .footer-social-media {
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
  }

  .footer-social-media__item svg {
    width: 33px;
    height: 33px;
  }

  .breadcrumbs__link {
    font-size: 12px;
  }

  .no-webp .first-section__wrap{
    background-image: url("../img/first-section-bg-mob.png"); }

  .first-section__wrap {
    overflow: hidden;
    padding: 0px 18px 0px 20px;
    min-height: auto;
    min-height: 260px;
  }

  .first-section__image {
    left: 20px;
    top: 20px;
  }

  .first-section__content {
    display: block;
  }

  .first-section__lighten {
    right: -150px;
    top: 213px;
  }

  .first-section__text {
    padding-left: 0px;
    max-width: 300px;
    margin: 0px 0px 16px 0px;
    padding-left: 107px;
  }

  .first-section__title {
    padding-left: 0px;
    max-width: 440px;
    line-height: 104%;
    font-size: 24px;
    margin: 0px 0px 10px 0px;
  }

  .first-section__text1 {
    margin: 0px 0px 0px 0px;
    width: 100%;
    max-width: 350px;
    width: 100%;
    font-size: 18px;
  }

  .first-section__text1 br {
    display: none;
  }

  .home-banner {
    padding: 0px;
  }

  .home-banner__box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .home-banner__icon {
    position: relative;
    width: 100%;
    height: 100%;
    left: -50px;
    bottom: 0px;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  .home-banner__icon img {
    height: 140px;
    width: 100%;
  }

  .home-banner__content {
    max-width: 100%;
    padding: 20px;
    min-height: auto;
  }

  .home-banner__title {
    font-size: 24px;
  }

  .home-banner__text {
    font-size: 16px;
  }

  .home-banner__link {
    width: 100%;
    padding: 5px;
  }

  .home-banner__link {
    max-width: 100%;
  }

  .separator {
    height: 15px;
    display: none;
  }

  .section-card {
    padding: 30px 0px 50px 0px;
  }

  .section-card__gray-background::after {
    width: 100%;
  }

  .section-card__section-card--free-program {
    background: -o-linear-gradient(282deg, #001534 12%, #021780 39%);
    background: linear-gradient(168deg, #001534 12%, #021780 39%);
  }

  .section-card__section-card--free-program .section-card__title {
    color: #fff;
  }

  .section-card__section-card--free-program .section-card__fon {
    display: none;
  }

  .section-card__info {
    font-size: 18px;
    margin: 0px 0px 20px 0px;
  }

  .section-card__box {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }

  .webinar-room__title {
    margin: 0px 0px 10px 0px;
    font-weight: 600;
    font-size: 20px;
    color: #1a1a1a;
  }

  .webinar-room__box {
    row-gap: 15px;
  }

  .webinar-room__wrap {
    padding: 10px;
  }

  .webinar-room__title {
    margin: 0px 0px 10px 0px;
    font-weight: 600;
    font-size: 20px;
    color: #1a1a1a;
  }

  .webinar-room__box {
    row-gap: 15px;
  }

  .webinar-room__title {
    margin: 0px 0px 10px 0px;
    font-weight: 600;
    font-size: 20px;
    color: #1a1a1a;
  }

  .controls {
    padding: 8px;
    gap: 8px;
    min-height: 50px;
  }

  .control-btn {
    font-size: 14px;
    padding: 4px;
  }

  .time {
    min-width: 80px;
    font-size: 12px;
  }

  .volume-slider {
    width: 40px;
  }

  .settings-option {
    font-size: 12px;
    padding: 4px 8px;
  }

  .chat-webinar-room {
    height: 410px;
    padding: 12px 10px 15px 10px;
  }

  .chat-webinar-room__title {
    font-size: 14px;
    margin: 0px 0px 10px 0px;
  }

  .chat-webinar-room__input {
    font-size: 16px;
    padding: 8px;
  }

  .chat-webinar-room__body {
    padding: 10px 12px 10px 20px;
  }

  .chat-webinar-room-item {
    padding: 8px 15px;
  }

  .chat-webinar-room-item:not(:last-child) {
    margin-bottom: 8px;
  }

  .chat-webinar-room-item__icon {
    width: 25px;
    height: 25px;
    left: -12px;
    font-size: 14px;
  }

  .chat-webinar-room-item__name {
    font-size: 14px;
  }

  .chat-webinar-room-item__time {
    font-size: 11px;
  }

  .chat-webinar-room-item__text {
    font-size: 13px;
    line-height: 120%;
  }

  .quests__container {
    padding: 0px;
  }

  .quests__back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 20px;
  }

  .quests__bg {
    -o-object-position: left;
       object-position: left;
  }

  .quests__decor {
    height: 138px;
  }

  .quests__wrap {
    min-height: 138px;
  }

  .quests__wrap {
    padding: 20px;
  }

  .quests__title {
    font-size: 24px;
  }

  .quests .breadcrumbs {
    display: none;
  }

  .header-cell {
    font-size: 20px;
  }

  .course-name {
    font-size: 16px;
  }

  .table-container::-webkit-scrollbar {
    height: 4px;
  }

  .registration-form.entrance {
    padding: 20px;
  }

  .registration-form {
    padding: 20px;
  }

  .registration-form__name {
    font-weight: 600;
    font-size: 20px;
  }

  .registration-form__title-input {
    font-weight: 500;
    font-size: 16px;
  }

  .registration-form__input {
    font-weight: 400;
    font-size: 16px;
  }

  .registration-form__button {
    max-width: 100%;
    width: 100%;
  }

  .registration-form .checkbox__text {
    font-weight: 400;
    font-size: 12px;
  }

  .registration-form .checkbox__text a {
    font-weight: 400;
    font-size: 12px;
  }

  .registration-form__contacts {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0px;
  }

  .profile__wrap {
    gap: 15px;
  }

  .profile__section {
    gap: 15px;
  }

  .profile__section--main {
    padding: 15px;
  }

  .profile__title {
    font-size: 20px;
    line-height: 130%;
    margin-bottom: 10px;
  }

  .profile__block {
    padding: 15px 15px;
    min-height: auto;
  }

  .profile__group {
    margin: 0px 0px 15px 0px;
  }

  .profile__group.none-margin {
    margin: 0px;
  }

  .profile__label {
    font-size: 16px;
  }

  .profile__input,
  .profile__textarea {
    padding: 8px 10px;
  }

  .profile__input,
  .profile__textarea {
    line-height: 100%;
  }

  .profile__input::-webkit-input-placeholder, .profile__textarea::-webkit-input-placeholder {
    font-size: 14px;
  }

  .profile__input::-moz-placeholder, .profile__textarea::-moz-placeholder {
    font-size: 14px;
  }

  .profile__input:-ms-input-placeholder, .profile__textarea:-ms-input-placeholder {
    font-size: 14px;
  }

  .profile__input::-ms-input-placeholder, .profile__textarea::-ms-input-placeholder {
    font-size: 14px;
  }

  .profile__input::placeholder,
  .profile__textarea::placeholder {
    font-size: 14px;
  }

  .profile__textarea {
    min-height: 129px;
  }

  .profile__subscription-title {
    font-size: 20px;
    margin: 0px 0px 14px 0px;
  }

  .profile__subscription-name {
    font-size: 16px;
  }

  .profile__subscription-date {
    font-size: 16px;
  }

  .profile__help-text {
    font-size: 16px;
  }

  .profile__contact {
    margin: 20px 0px 0px 0px;
  }

  .profile__connect-text {
    font-size: 16px;
  }

  .profile__connect-btn {
    max-width: 100%;
    width: auto;
    padding: 12px 14px;
  }

  .profile__connect-btn .btn__text {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
  }

  .profile__connect-btn .btn__icon {
    display: none;
  }

  .registration-info__decor svg {
    width: 36px;
    height: 36px;
  }

  .registration-info__container {
    padding: 0px;
  }

  .registration-info__box {
    padding: 20px 20px 0px 20px;
  }

  .registration-info__text {
    font-size: 20px;
  }

  .registration-info__text-color-red-dark br {
    display: none;
  }

  .registration-info.entrance .registration-info__image img {
    margin: 45px 0px -4px 0px;
  }

  .registration-info.entrance .registration-info__image img {
    height: auto;
  }

  .quick-start .breadcrumbs {
    display: none;
  }

  .quick-start__back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .quick-start__wrap {
    padding: 25px 20px;
  }

  .quick-start__num {
    border-radius: 4px;
    padding: 4px 11px;
    width: auto;
    height: auto;
    top: 24px;
    right: 21px;
    font-size: 14px;
  }

  .quick-start__dtcor {
    right: 19px;
    bottom: 33px;
  }

  .quick-start__dtcor svg {
    width: 42px;
    height: 42px;
  }

  .quick-start__online-course {
    font-size: 16px;
  }

  .quick-start__title {
    font-size: 20px;
  }

  .quick-start__info {
    -webkit-column-gap: 15px;
       -moz-column-gap: 15px;
            column-gap: 15px;
    margin: 0px 0px 15px 0px;
  }

  .quick-start__text {
    font-size: 14px;
  }

  .spoiler__header {
    padding: 10px 13px;
  }

  .spoiler__left {
    -webkit-column-gap: 13px;
       -moz-column-gap: 13px;
            column-gap: 13px;
  }

  .spoiler__title {
    font-size: 18px;
  }

  .spoiler__icon {
    display: none;
  }

  .spoiler__progress-text {
    font-size: 12px;
  }

  .spoiler__toggle {
    padding: 0px;
  }

  .spoiler__toggle svg {
    width: 19px;
    height: 7px;
  }

  .circle-progress {
    width: 30px;
    height: 30px;
  }

  .circle-progress__text {
    font-size: 8px;
  }

  .spoiler-item {
    margin: 5px 13px;
    padding: 10px 10px;
  }

  .spoiler-item__title {
    font-size: 15px;
  }

  .spoiler-item__status {
    display: none;
  }

  .spoiler-item__progress {
    display: none;
  }

  .lesson-block {
    padding: 25px 15px;
  }

  .lesson-block__wrap-title {
    padding: 10px 12px;
    margin: 0px 0px 10px -12px;
  }

  .lesson-block__name {
    font-size: 15px;
  }

  .lesson-block-margin-top {
    margin-top: 20px;
  }

  .lesson-block__wra-list {
    margin: 0px 0px 0px 0px;
  }

  .lesson-block__title {
    font-size: 15px;
    margin: 0px 0px 10px 0px;
  }

  .lesson-block__list {
    row-gap: 5px;
  }

  .lesson-block__item {
    font-size: 14px;
  }

  .play-button img {
    width: 40px;
    height: 40px;
  }

  .lesson-block-testing__body {
    margin: 0px 0px 0px 0px;
  }

  .lesson-block-testing__title {
    font-size: 18px;
  }

  .lesson-block-testing__text {
    font-size: 16px;
    line-height: 100%;
  }

  .lesson-block-testing__button {
    font-size: 18px;
    width: 100%;
    margin-top: 15px;
    font-weight: 500;
  }

  .lesson-question {
    padding: 0px 0px;
  }

  .lesson-question__indicators {
    gap: 5px;
  }

  .lesson-question__indicator {
    height: 3px;
  }

  .lesson-question__count {
    font-size: 12px;
    margin: 0px 0px 10px 0px;
  }

  .lesson-question__title {
    font-weight: 600;
    font-size: 16px;
    line-height: 94%;
    margin: 0px 0px 15px 0px;
  }

  .lesson-question__option {
    min-height: 46px;
    gap: 0px;
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
  }

  .lesson-question__option-text {
    font-size: 14px;
  }

  .correct-answers {
    margin-top: 15px;
  }

  .task-process-buttons {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0px 0px 20px 0px;
  }

  .task-process-buttons__button {
    font-weight: 500;
  }

  .task-process-buttons__button.left {
    max-width: 100%;
  }

  .task-process-buttons__button-icon svg {
    width: 15px;
    height: 15px;
  }

  .task-process-exercise:not(:last-child) {
    margin: 0px 0px 15px 0px;
  }

  .task-process-exercise__title {
    font-size: 18px;
    margin: 0px 0px 10px 0px;
  }

  .task-process-exercise__list {
    margin: 0px 0px 10px 0px;
  }

  .task-process-exercise__list li {
    padding-left: 10px;
    font-size: 14px;
  }

  .task-process-exercise__list li::after {
    top: 6px;
  }

  .task-process-exercise__list li::after {
    width: 4px;
    height: 4px;
  }

  .task-process-exercise p {
    font-size: 14px;
  }

  .task-process-exercise p:not(:last-child) {
    margin: 0px 0px 10px 0px;
  }

  .task-process-exercise__task-process-exercise--color-green {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .task-process-exercise__icon {
    padding: 20px 20px 10px 20px;
  }

  .task-process-exercise__box {
    padding: 0px 20px 20px 20px;
  }

  .item-schedule {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .item-schedule__schedule {
    font-size: 18px;
    width: auto;
    white-space: wrap;
    /* paragraph to one line */
    -o-text-overflow: clip;
       text-overflow: clip;
  }

  .item-schedule__status {
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
    min-width: auto;
    padding-right: 12px;
  }

  .item-schedule__status .text {
    font-size: 14px;
  }

  .item-schedule__button {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
  }

  .form-schedule {
    padding: 50px 30px;
  }

  .form-schedule__button {
    right: 10px;
    top: 10px;
  }

  .form-schedule__header {
    margin: 0px 0px px 0px;
  }

  .form-schedule__title {
    font-size: 20px;
    line-height: 130%;
    color: #1a1a1a;
  }

  .form-schedule__text {
    font-size: 14px;
    line-height: 120%;
    color: #1a1a1a;
    font-weight: 400;
  }

  .form-schedule__sub-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #1a1a1a;
  }

  .form-schedule__submit {
    width: 100%;
    text-align: center;
    color: #fff;
  }

  .asset-name__dialogue-curator-text {
    font-size: 16px;
  }

  .asset-name__asset-name--dialogue .asset-name__dialogue-curator-body {
    min-height: 432px;
  }

  .asset-name {
    padding: 40px 25px 20px 25px;
  }

  .asset-name__сharts-text {
    font-size: 18px;
    margin: 0px 0px 10px 0px;
  }

  .asset-name__сharts-link {
    font-size: 16px;
  }

  .asset-name__rationale {
    row-gap: 10px;
  }

  .asset-name__rationale-title {
    font-size: 16px;
  }

  .asset-name__rationale-body {
    font-size: 16px;
    line-height: 106%;
    color: #1a1a1a;
  }

  .asset-name__dialogue-curator-title {
    font-size: 18px;
    color: #1a1a1a;
  }

  .asset-name__dialogue-curator-body {
    font-size: 16px;
    line-height: 106%;
    color: #1a1a1a;
    height: 120px;
  }

  .header-asset {
    padding: 12px;
    height: 40px;
  }

  .header-asset__name {
    font-size: 15px;
  }

  .header-asset__right {
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
  }

  .header-asset__status {
    display: none;
  }

  .asset-name-date {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 27px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    margin-top: 20px;
  }

  .asset-name-date__name {
    font-size: 16px;
  }

  .asset-name-date__data {
    font-size: 14px;
  }

  .buttons-asset-name {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 10px;
  }

  .buttons-asset-name__button {
    font-weight: 500;
  }

  .dialogue-curator-item:not(:last-child) {
    margin-bottom: 15px;
  }

  .dialogue-curator-item__name {
    font-size: 14px;
    margin: 0px 0px 8 px 0px;
  }

  .dialogue-curator-item__text {
    font-size: 12px;
    line-height: 117%;
    color: #1a1a1a;
    margin: 0px 0px 16px 0px;
  }

  .dialogue-curator-items:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (max-width: 767.98px) and (max-width: 1199.98px) {
  .profile__connect-btn .btn__text {
    font-weight: 500;
  }
}

@media (max-width: 480px) {
  .header-logo__text span:nth-child(2),
  .header-logo__text span:nth-child(3) {
    display: none;
  }

  .notification__result {
    width: 100%;
    top: 50px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 50px);
  }

  .user-spoler {
    width: 100%;
    top: 50px;
    left: 0;
    right: 0;
  }

  .controls {
    padding: 6px 8px;
  }

  .control-btn {
    font-size: 12px;
    margin-right: 6px;
  }

  .progress-container {
    margin: 0 8px;
  }

  .time {
    display: none;
    /* Скрываем время в контролах на очень маленьких экранах */
  }

  .mobile-time {
    font-size: 12px;
  }

  /* Компактное меню настроек */

  #speedBtn,
  #qualityBtn {
    font-size: 11px;
    padding: 3px 6px;
  }
}

@media (max-width: 478.98px) {
  .lesson-block-bottons {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    gap: 10px;
  }
}

@media (max-width: 478.98px) and (max-width: 767.98px) {
  .lesson-block-bottons.test-passed {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .lesson-block-bottons.test-passed .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }
}

@media (any-hover: hover) {
  .breadcrumbs__link:hover {
    color: #333;
  }

  .chat-webinar-room__button:hover {
    -webkit-transform: scale(1.01);
        -ms-transform: scale(1.01);
            transform: scale(1.01);
  }

  .buttons-asset-name__button-download:hover {
    -webkit-box-shadow: 0 0 2px rgba(184, 0, 36, 0.5);
            box-shadow: 0 0 2px rgba(184, 0, 36, 0.5);
  }

  .buttons-asset-name__send:hover {
    -webkit-box-shadow: 0 0 2px rgba(184, 0, 36, 0.5);
            box-shadow: 0 0 2px rgba(184, 0, 36, 0.5);
  }
}

@media (hover: none) and (pointer: coarse) {
  .control-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .progress-container {
    min-height: 44px;
  }

  .settings-option {
    min-height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.webp .first-section__wrap{ background-image: url(../img/first-section-bg.webp); }

.webp .registration-info{ background: url(../img/registration-bg.webp); }

@media (max-width: 767.98px){

  .webp .first-section__wrap{ background-image: url(../img/first-section-bg-mob.webp); }
}






.alert-danger {
  padding: 10px;
  background-color: rgb(255,240,240);
  text-align: left;
  border-radius: 4px;
  margin-top: 10xp;
  margin-bottom: 10px;
}


.alert-success {
  padding: 10px;
  background-color: rgba(218, 252, 222, 1);
  text-align: left;
  border-radius: 4px;
  margin-top: 10xp;
  margin-bottom: 10px;
}

.lesson-spollers__name {
  text-align: left;
  line-height: 100%;
  display: flex;
  align-items: center;
}






.answer-img {
  max-width: 100%;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.lesson-question__desc {
  margin-bottom: 15px;
}

.lesson-answer-img{
    display:block;
    max-width:180px;
    border-radius:8px;
    margin-bottom:10px;
}

.lesson-question__option{
    cursor:pointer;
}

.hidden{ display:none }

.lesson-question__option--correct{
    background:#eaffea;
    border:2px solid #299764;
}

.lesson-question__option--incorrect{
    background:#ffe5e5;
    border:2px solid #b80024;
}

.lesson-question__checkbox-correct{
    width:18px;
    height:18px;
    background:#299764;
    border-radius:4px;
}

.lesson-question__checkbox-incorrect{
    width:18px;
    height:18px;
    background:#b80024;
    border-radius:4px;
}





.cursor_pointer {
  cursor: pointer;
}

.popup_msg_data {
  font-weight: 600;
  margin-top: 10px;
}

.text_msg_comment_popup {
  margin-top: -20px;
  font-size: 14px;
}

.btn_popup_msg_data div {
  display: inline-block;
  background-color: rgb(230, 230, 230);
  padding: 4px 8px;
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.btn_popup_msg_data div:active {
  background-color: rgb(210, 210, 210);
}