@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
:root {
  --iti-hover-color: rgba(0, 0, 0, 0.05);
  --iti-border-color: #ccc;
  --iti-dialcode-color: #999;
  --iti-dropdown-bg: white;
  --iti-spacer-horizontal: 8px;
  --iti-flag-height: 12px;
  --iti-flag-width: 16px;
  --iti-border-width: 1px;
  --iti-arrow-height: 4px;
  --iti-arrow-width: 6px;
  --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
  --iti-arrow-padding: 6px;
  --iti-arrow-color: #555;
  --iti-path-flags-1x: url(/images/vendor/intl-tel-input/build/flags.webp?bd95ef49b665a571ca041e845485f680);
  --iti-path-flags-2x: url(/images/vendor/intl-tel-input/build/flags@2x.webp?bea0200ba7ea874b359fd5423614fef5);
  --iti-path-globe-1x: url(/images/vendor/intl-tel-input/build/globe.webp?7fb216c936a98b90918e505af20b71d9);
  --iti-path-globe-2x: url(/images/vendor/intl-tel-input/build/globe@2x.webp?5dc7e51d6b5d42fc2be450b5e5e1c54d);
  --iti-flag-sprite-width: 3904px;
  --iti-flag-sprite-height: 12px;
  --iti-mobile-popup-margin: 30px;
}

.iti {
  position: relative;
  display: inline-block;
}
.iti * {
  box-sizing: border-box;
}
.iti__hide {
  display: none;
}
.iti__v-hide {
  visibility: hidden;
}
.iti__a11y-text {
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
}
.iti input.iti__tel-input,
.iti input.iti__tel-input[type=text],
.iti input.iti__tel-input[type=tel] {
  position: relative;
  z-index: 0;
  margin: 0 !important;
}
.iti__country-container {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: var(--iti-border-width);
}
.iti__selected-country {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}
.iti__selected-country-primary {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
}
.iti__arrow {
  margin-left: var(--iti-arrow-padding);
  width: 0;
  height: 0;
  border-left: var(--iti-triangle-border) solid transparent;
  border-right: var(--iti-triangle-border) solid transparent;
  border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
}
[dir=rtl] .iti__arrow {
  margin-right: var(--iti-arrow-padding);
  margin-left: 0;
}
.iti__arrow--up {
  border-top: none;
  border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
}
.iti__dropdown-content {
  border-radius: 3px;
  background-color: var(--iti-dropdown-bg);
}
.iti--inline-dropdown .iti__dropdown-content {
  position: absolute;
  z-index: 2;
  margin-top: 3px;
  margin-left: calc(var(--iti-border-width) * -1);
  border: var(--iti-border-width) solid var(--iti-border-color);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.iti__search-input {
  width: 100%;
  border-width: 0;
  border-radius: 3px;
}
.iti__search-input + .iti__country-list {
  border-top: 1px solid var(--iti-border-color);
}
.iti__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.iti--inline-dropdown .iti__country-list {
  max-height: 185px;
}
.iti--flexible-dropdown-width .iti__country-list {
  white-space: nowrap;
}
@media (max-width: 500px) {
  .iti--flexible-dropdown-width .iti__country-list {
    white-space: normal;
  }
}
.iti__country {
  display: flex;
  align-items: center;
  padding: 8px var(--iti-spacer-horizontal);
  outline: none;
}
.iti__dial-code {
  color: var(--iti-dialcode-color);
}
.iti__country.iti__highlight {
  background-color: var(--iti-hover-color);
}
.iti__country-list .iti__flag, .iti__country-name {
  margin-right: var(--iti-spacer-horizontal);
}
[dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
  margin-right: 0;
  margin-left: var(--iti-spacer-horizontal);
}
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button {
  cursor: pointer;
}
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
  background-color: var(--iti-hover-color);
}
.iti .iti__selected-dial-code {
  margin-left: 4px;
}
[dir=rtl] .iti .iti__selected-dial-code {
  margin-left: 0;
  margin-right: 4px;
}
.iti--container {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: var(--iti-border-width);
}
.iti--container:hover {
  cursor: pointer;
}

.iti--fullscreen-popup.iti--container {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  padding: var(--iti-mobile-popup-margin);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.iti--fullscreen-popup .iti__dropdown-content {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
}
.iti--fullscreen-popup .iti__country {
  padding: 10px 10px;
  line-height: 1.5em;
}

.iti__flag {
  --iti-flag-offset: 100px;
  height: var(--iti-flag-height);
  width: var(--iti-flag-width);
  border-radius: 1px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: var(--iti-path-flags-1x);
  background-repeat: no-repeat;
  background-position: var(--iti-flag-offset) 0;
  background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height);
}

.iti__ac {
  --iti-flag-offset: 0px;
}

.iti__ad {
  --iti-flag-offset: -16px;
}

.iti__ae {
  --iti-flag-offset: -32px;
}

.iti__af {
  --iti-flag-offset: -48px;
}

.iti__ag {
  --iti-flag-offset: -64px;
}

.iti__ai {
  --iti-flag-offset: -80px;
}

.iti__al {
  --iti-flag-offset: -96px;
}

.iti__am {
  --iti-flag-offset: -112px;
}

.iti__ao {
  --iti-flag-offset: -128px;
}

.iti__ar {
  --iti-flag-offset: -144px;
}

.iti__as {
  --iti-flag-offset: -160px;
}

.iti__at {
  --iti-flag-offset: -176px;
}

.iti__au {
  --iti-flag-offset: -192px;
}

.iti__aw {
  --iti-flag-offset: -208px;
}

.iti__ax {
  --iti-flag-offset: -224px;
}

.iti__az {
  --iti-flag-offset: -240px;
}

.iti__ba {
  --iti-flag-offset: -256px;
}

.iti__bb {
  --iti-flag-offset: -272px;
}

.iti__bd {
  --iti-flag-offset: -288px;
}

.iti__be {
  --iti-flag-offset: -304px;
}

.iti__bf {
  --iti-flag-offset: -320px;
}

.iti__bg {
  --iti-flag-offset: -336px;
}

.iti__bh {
  --iti-flag-offset: -352px;
}

.iti__bi {
  --iti-flag-offset: -368px;
}

.iti__bj {
  --iti-flag-offset: -384px;
}

.iti__bl {
  --iti-flag-offset: -400px;
}

.iti__bm {
  --iti-flag-offset: -416px;
}

.iti__bn {
  --iti-flag-offset: -432px;
}

.iti__bo {
  --iti-flag-offset: -448px;
}

.iti__bq {
  --iti-flag-offset: -464px;
}

.iti__br {
  --iti-flag-offset: -480px;
}

.iti__bs {
  --iti-flag-offset: -496px;
}

.iti__bt {
  --iti-flag-offset: -512px;
}

.iti__bw {
  --iti-flag-offset: -528px;
}

.iti__by {
  --iti-flag-offset: -544px;
}

.iti__bz {
  --iti-flag-offset: -560px;
}

.iti__ca {
  --iti-flag-offset: -576px;
}

.iti__cc {
  --iti-flag-offset: -592px;
}

.iti__cd {
  --iti-flag-offset: -608px;
}

.iti__cf {
  --iti-flag-offset: -624px;
}

.iti__cg {
  --iti-flag-offset: -640px;
}

.iti__ch {
  --iti-flag-offset: -656px;
}

.iti__ci {
  --iti-flag-offset: -672px;
}

.iti__ck {
  --iti-flag-offset: -688px;
}

.iti__cl {
  --iti-flag-offset: -704px;
}

.iti__cm {
  --iti-flag-offset: -720px;
}

.iti__cn {
  --iti-flag-offset: -736px;
}

.iti__co {
  --iti-flag-offset: -752px;
}

.iti__cr {
  --iti-flag-offset: -768px;
}

.iti__cu {
  --iti-flag-offset: -784px;
}

.iti__cv {
  --iti-flag-offset: -800px;
}

.iti__cw {
  --iti-flag-offset: -816px;
}

.iti__cx {
  --iti-flag-offset: -832px;
}

.iti__cy {
  --iti-flag-offset: -848px;
}

.iti__cz {
  --iti-flag-offset: -864px;
}

.iti__de {
  --iti-flag-offset: -880px;
}

.iti__dj {
  --iti-flag-offset: -896px;
}

.iti__dk {
  --iti-flag-offset: -912px;
}

.iti__dm {
  --iti-flag-offset: -928px;
}

.iti__do {
  --iti-flag-offset: -944px;
}

.iti__dz {
  --iti-flag-offset: -960px;
}

.iti__ec {
  --iti-flag-offset: -976px;
}

.iti__ee {
  --iti-flag-offset: -992px;
}

.iti__eg {
  --iti-flag-offset: -1008px;
}

.iti__eh {
  --iti-flag-offset: -1024px;
}

.iti__er {
  --iti-flag-offset: -1040px;
}

.iti__es {
  --iti-flag-offset: -1056px;
}

.iti__et {
  --iti-flag-offset: -1072px;
}

.iti__fi {
  --iti-flag-offset: -1088px;
}

.iti__fj {
  --iti-flag-offset: -1104px;
}

.iti__fk {
  --iti-flag-offset: -1120px;
}

.iti__fm {
  --iti-flag-offset: -1136px;
}

.iti__fo {
  --iti-flag-offset: -1152px;
}

.iti__fr {
  --iti-flag-offset: -1168px;
}

.iti__ga {
  --iti-flag-offset: -1184px;
}

.iti__gb {
  --iti-flag-offset: -1200px;
}

.iti__gd {
  --iti-flag-offset: -1216px;
}

.iti__ge {
  --iti-flag-offset: -1232px;
}

.iti__gf {
  --iti-flag-offset: -1248px;
}

.iti__gg {
  --iti-flag-offset: -1264px;
}

.iti__gh {
  --iti-flag-offset: -1280px;
}

.iti__gi {
  --iti-flag-offset: -1296px;
}

.iti__gl {
  --iti-flag-offset: -1312px;
}

.iti__gm {
  --iti-flag-offset: -1328px;
}

.iti__gn {
  --iti-flag-offset: -1344px;
}

.iti__gp {
  --iti-flag-offset: -1360px;
}

.iti__gq {
  --iti-flag-offset: -1376px;
}

.iti__gr {
  --iti-flag-offset: -1392px;
}

.iti__gt {
  --iti-flag-offset: -1408px;
}

.iti__gu {
  --iti-flag-offset: -1424px;
}

.iti__gw {
  --iti-flag-offset: -1440px;
}

.iti__gy {
  --iti-flag-offset: -1456px;
}

.iti__hk {
  --iti-flag-offset: -1472px;
}

.iti__hn {
  --iti-flag-offset: -1488px;
}

.iti__hr {
  --iti-flag-offset: -1504px;
}

.iti__ht {
  --iti-flag-offset: -1520px;
}

.iti__hu {
  --iti-flag-offset: -1536px;
}

.iti__id {
  --iti-flag-offset: -1552px;
}

.iti__ie {
  --iti-flag-offset: -1568px;
}

.iti__il {
  --iti-flag-offset: -1584px;
}

.iti__im {
  --iti-flag-offset: -1600px;
}

.iti__in {
  --iti-flag-offset: -1616px;
}

.iti__io {
  --iti-flag-offset: -1632px;
}

.iti__iq {
  --iti-flag-offset: -1648px;
}

.iti__ir {
  --iti-flag-offset: -1664px;
}

.iti__is {
  --iti-flag-offset: -1680px;
}

.iti__it {
  --iti-flag-offset: -1696px;
}

.iti__je {
  --iti-flag-offset: -1712px;
}

.iti__jm {
  --iti-flag-offset: -1728px;
}

.iti__jo {
  --iti-flag-offset: -1744px;
}

.iti__jp {
  --iti-flag-offset: -1760px;
}

.iti__ke {
  --iti-flag-offset: -1776px;
}

.iti__kg {
  --iti-flag-offset: -1792px;
}

.iti__kh {
  --iti-flag-offset: -1808px;
}

.iti__ki {
  --iti-flag-offset: -1824px;
}

.iti__km {
  --iti-flag-offset: -1840px;
}

.iti__kn {
  --iti-flag-offset: -1856px;
}

.iti__kp {
  --iti-flag-offset: -1872px;
}

.iti__kr {
  --iti-flag-offset: -1888px;
}

.iti__kw {
  --iti-flag-offset: -1904px;
}

.iti__ky {
  --iti-flag-offset: -1920px;
}

.iti__kz {
  --iti-flag-offset: -1936px;
}

.iti__la {
  --iti-flag-offset: -1952px;
}

.iti__lb {
  --iti-flag-offset: -1968px;
}

.iti__lc {
  --iti-flag-offset: -1984px;
}

.iti__li {
  --iti-flag-offset: -2000px;
}

.iti__lk {
  --iti-flag-offset: -2016px;
}

.iti__lr {
  --iti-flag-offset: -2032px;
}

.iti__ls {
  --iti-flag-offset: -2048px;
}

.iti__lt {
  --iti-flag-offset: -2064px;
}

.iti__lu {
  --iti-flag-offset: -2080px;
}

.iti__lv {
  --iti-flag-offset: -2096px;
}

.iti__ly {
  --iti-flag-offset: -2112px;
}

.iti__ma {
  --iti-flag-offset: -2128px;
}

.iti__mc {
  --iti-flag-offset: -2144px;
}

.iti__md {
  --iti-flag-offset: -2160px;
}

.iti__me {
  --iti-flag-offset: -2176px;
}

.iti__mf {
  --iti-flag-offset: -2192px;
}

.iti__mg {
  --iti-flag-offset: -2208px;
}

.iti__mh {
  --iti-flag-offset: -2224px;
}

.iti__mk {
  --iti-flag-offset: -2240px;
}

.iti__ml {
  --iti-flag-offset: -2256px;
}

.iti__mm {
  --iti-flag-offset: -2272px;
}

.iti__mn {
  --iti-flag-offset: -2288px;
}

.iti__mo {
  --iti-flag-offset: -2304px;
}

.iti__mp {
  --iti-flag-offset: -2320px;
}

.iti__mq {
  --iti-flag-offset: -2336px;
}

.iti__mr {
  --iti-flag-offset: -2352px;
}

.iti__ms {
  --iti-flag-offset: -2368px;
}

.iti__mt {
  --iti-flag-offset: -2384px;
}

.iti__mu {
  --iti-flag-offset: -2400px;
}

.iti__mv {
  --iti-flag-offset: -2416px;
}

.iti__mw {
  --iti-flag-offset: -2432px;
}

.iti__mx {
  --iti-flag-offset: -2448px;
}

.iti__my {
  --iti-flag-offset: -2464px;
}

.iti__mz {
  --iti-flag-offset: -2480px;
}

.iti__na {
  --iti-flag-offset: -2496px;
}

.iti__nc {
  --iti-flag-offset: -2512px;
}

.iti__ne {
  --iti-flag-offset: -2528px;
}

.iti__nf {
  --iti-flag-offset: -2544px;
}

.iti__ng {
  --iti-flag-offset: -2560px;
}

.iti__ni {
  --iti-flag-offset: -2576px;
}

.iti__nl {
  --iti-flag-offset: -2592px;
}

.iti__no {
  --iti-flag-offset: -2608px;
}

.iti__np {
  --iti-flag-offset: -2624px;
}

.iti__nr {
  --iti-flag-offset: -2640px;
}

.iti__nu {
  --iti-flag-offset: -2656px;
}

.iti__nz {
  --iti-flag-offset: -2672px;
}

.iti__om {
  --iti-flag-offset: -2688px;
}

.iti__pa {
  --iti-flag-offset: -2704px;
}

.iti__pe {
  --iti-flag-offset: -2720px;
}

.iti__pf {
  --iti-flag-offset: -2736px;
}

.iti__pg {
  --iti-flag-offset: -2752px;
}

.iti__ph {
  --iti-flag-offset: -2768px;
}

.iti__pk {
  --iti-flag-offset: -2784px;
}

.iti__pl {
  --iti-flag-offset: -2800px;
}

.iti__pm {
  --iti-flag-offset: -2816px;
}

.iti__pr {
  --iti-flag-offset: -2832px;
}

.iti__ps {
  --iti-flag-offset: -2848px;
}

.iti__pt {
  --iti-flag-offset: -2864px;
}

.iti__pw {
  --iti-flag-offset: -2880px;
}

.iti__py {
  --iti-flag-offset: -2896px;
}

.iti__qa {
  --iti-flag-offset: -2912px;
}

.iti__re {
  --iti-flag-offset: -2928px;
}

.iti__ro {
  --iti-flag-offset: -2944px;
}

.iti__rs {
  --iti-flag-offset: -2960px;
}

.iti__ru {
  --iti-flag-offset: -2976px;
}

.iti__rw {
  --iti-flag-offset: -2992px;
}

.iti__sa {
  --iti-flag-offset: -3008px;
}

.iti__sb {
  --iti-flag-offset: -3024px;
}

.iti__sc {
  --iti-flag-offset: -3040px;
}

.iti__sd {
  --iti-flag-offset: -3056px;
}

.iti__se {
  --iti-flag-offset: -3072px;
}

.iti__sg {
  --iti-flag-offset: -3088px;
}

.iti__sh {
  --iti-flag-offset: -3104px;
}

.iti__si {
  --iti-flag-offset: -3120px;
}

.iti__sj {
  --iti-flag-offset: -3136px;
}

.iti__sk {
  --iti-flag-offset: -3152px;
}

.iti__sl {
  --iti-flag-offset: -3168px;
}

.iti__sm {
  --iti-flag-offset: -3184px;
}

.iti__sn {
  --iti-flag-offset: -3200px;
}

.iti__so {
  --iti-flag-offset: -3216px;
}

.iti__sr {
  --iti-flag-offset: -3232px;
}

.iti__ss {
  --iti-flag-offset: -3248px;
}

.iti__st {
  --iti-flag-offset: -3264px;
}

.iti__sv {
  --iti-flag-offset: -3280px;
}

.iti__sx {
  --iti-flag-offset: -3296px;
}

.iti__sy {
  --iti-flag-offset: -3312px;
}

.iti__sz {
  --iti-flag-offset: -3328px;
}

.iti__tc {
  --iti-flag-offset: -3344px;
}

.iti__td {
  --iti-flag-offset: -3360px;
}

.iti__tg {
  --iti-flag-offset: -3376px;
}

.iti__th {
  --iti-flag-offset: -3392px;
}

.iti__tj {
  --iti-flag-offset: -3408px;
}

.iti__tk {
  --iti-flag-offset: -3424px;
}

.iti__tl {
  --iti-flag-offset: -3440px;
}

.iti__tm {
  --iti-flag-offset: -3456px;
}

.iti__tn {
  --iti-flag-offset: -3472px;
}

.iti__to {
  --iti-flag-offset: -3488px;
}

.iti__tr {
  --iti-flag-offset: -3504px;
}

.iti__tt {
  --iti-flag-offset: -3520px;
}

.iti__tv {
  --iti-flag-offset: -3536px;
}

.iti__tw {
  --iti-flag-offset: -3552px;
}

.iti__tz {
  --iti-flag-offset: -3568px;
}

.iti__ua {
  --iti-flag-offset: -3584px;
}

.iti__ug {
  --iti-flag-offset: -3600px;
}

.iti__us {
  --iti-flag-offset: -3616px;
}

.iti__uy {
  --iti-flag-offset: -3632px;
}

.iti__uz {
  --iti-flag-offset: -3648px;
}

.iti__va {
  --iti-flag-offset: -3664px;
}

.iti__vc {
  --iti-flag-offset: -3680px;
}

.iti__ve {
  --iti-flag-offset: -3696px;
}

.iti__vg {
  --iti-flag-offset: -3712px;
}

.iti__vi {
  --iti-flag-offset: -3728px;
}

.iti__vn {
  --iti-flag-offset: -3744px;
}

.iti__vu {
  --iti-flag-offset: -3760px;
}

.iti__wf {
  --iti-flag-offset: -3776px;
}

.iti__ws {
  --iti-flag-offset: -3792px;
}

.iti__xk {
  --iti-flag-offset: -3808px;
}

.iti__ye {
  --iti-flag-offset: -3824px;
}

.iti__yt {
  --iti-flag-offset: -3840px;
}

.iti__za {
  --iti-flag-offset: -3856px;
}

.iti__zm {
  --iti-flag-offset: -3872px;
}

.iti__zw {
  --iti-flag-offset: -3888px;
}

.iti__globe {
  background-image: var(--iti-path-globe-1x);
  background-size: contain;
  background-position: right;
  box-shadow: none;
  height: 19px;
}

@media (min-resolution: 2x) {
  .iti__flag {
    background-image: var(--iti-path-flags-2x);
  }
  .iti__globe {
    background-image: var(--iti-path-globe-2x);
  }
}
@charset "UTF-8";

/*
$breakpoints
- phone
- tab-port
- tab-land
- big-desktop

1em = 16px
*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  height: 100%;
}

html {
  font-size: 62.5%;
}

:focus {
  outline: none;
}

::-moz-focus-inner {
  border: 0;
}

a {
  text-decoration: none;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

p {
  line-height: 2.6rem;
  margin-bottom: 1rem;
}

@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}

@media (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}

@media (max-width: 37.5em) {
  html {
    font-size: 50%;
  }
}

body {
  background: #fff;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #3d3d3d;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  font-family: "Open Sans", sans-serif;
  display: flex;
  flex-direction: column;
}

@media (max-width: 37.5em) {
  body {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}

label {
  font-weight: 700;
}

input {
  padding: 0.5rem;
  line-height: 3rem;
}

button {
  color: #3d3d3d;
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  font-size: 1.6rem;
}

.error-block ul,
.error-block li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.overlay {
  z-index: 10;
  position: fixed;
  background-color: #000;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity=4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.status-0 {
  background: #fff;
}

.status-1 {
  background: #fcbbbb;
}

.status-2 {
  background: #bce6f3;
}

.status-3 {
  background: #fefe77;
}

.status-4 {
  background: #adf3ad;
}

.color-0 {
  background: #dddddd;
}

.color-1 {
  background: #afd2b8;
}

.color-2 {
  background: #ffe7aa;
}

.color-3 {
  background: #f8a2ad;
}

.color-4 {
  background: #bcdaff;
}

.color-5 {
  background: #f8a2ad;
}

.hide {
  display: none;
}

.green {
  color: #98b000;
}

.violet {
  color: #6b298a;
}

.light-green {
  color: #2dc50e;
}

.light-red {
  color: #e90c0c;
}

.body-wrapper {
  flex-grow: 1;
  padding-top: 100px;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (max-width: 75em) {
  .body-wrapper {
    padding-top: 90px;
  }
}

@media (max-width: 56.25em) {
  .body-wrapper {
    padding-top: 80px;
  }
}

@media (max-width: 37.5em) {
  .body-wrapper {
    padding-top: 99px;
  }
}

.main-wrapper {
  width: 100%;
  max-width: 120rem;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 2rem;
}

.background-secondary {
  background-color: #f8f3fa;
}

.padding-5 {
  padding: 5rem 0;
}

.glide li {
  display: flex;
  justify-content: center;
  align-items: center;
}

.glide li img {
  width: 100%;
  height: auto;
}

.glide__arrow--left {
  background: url("/img/arrow-left.png");
  width: 15px;
  height: 22px;
  display: inline-block;
  margin-right: 0.5rem;
}

.glide__arrow--left:hover {
  background: url("/img/arrow-left-hover.png");
  cursor: pointer;
}

.glide__arrow--right {
  background: url("/img/arrow-right.png");
  width: 15px;
  height: 22px;
  display: inline-block;
  margin-left: 0.5rem;
}

.glide__arrow--right:hover {
  background: url("/img/arrow-right-hover.png");
  cursor: pointer;
}

.glide__arrows {
  display: flex;
  justify-content: center;
}

.review-shadow-right {
  width: 30rem;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff", endColorstr="#ffffff",GradientType=1 );
  /* IE6-9 */
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
}

@media (max-width: 37.5em) {
  .review-shadow-right {
    display: none;
  }
}

.review-shadow-left {
  width: 30rem;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#00ffffff",GradientType=1 );
  /* IE6-9 */
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

@media (max-width: 37.5em) {
  .review-shadow-left {
    display: none;
  }
}

.reviews-wrapper {
  margin-bottom: 3rem;
}

#overlay {
  z-index: 250;
  position: fixed;
  background-color: #000;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}

.section-empty {
  height: calc(100vh - 57.5rem);
}

.error-message {
  display: flex;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  color: #e90c0c;
  margin-top: 4px;
}

.check-login {
  display: flex;
  align-items: center;
  gap: 5px;
}

.check-login input {
  width: 16px;
}

.group-login {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hide {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.container-site {
  max-width: 1360px;
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

.container-site--md {
  max-width: 1232px;
}

.account-img img {
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
}

svg path {
  fill: currentColor;
  stroke: currentColor;
}

.btn-base {
  padding: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  margin: 0;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: 0.4s;
}

.btn-base:active,
.btn-base:focus {
  border: none;
  outline: none;
}

.btn-base--gray {
  border: 1px solid #E9E9E9;
  background-color: #FFFFFF;
  color: #333333;
  height: 35px;
}

.btn-base--gray:hover {
  background-color: #f9f9f9;
}

.btn-base--transparent {
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc3545;
}

.btn-base--transparent::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  opacity: 1;
  transition: 0.4s;
  background-color: #dc3545;
}

.btn-base--transparent:hover::after {
  opacity: 0;
}

.btn-base--green {
  background-color: #28a745;
  color: #FFFFFF;
}

.btn-base--green:hover {
  background-color: #1e7a34;
}

.btn-base--red {
  background-color: #dc3545;
  color: #FFFFFF;
}

.btn-base--red:hover {
  background-color: #a42935;
}

.btn-base--blue {
  background-color: #007bff;
  color: #FFFFFF;
}

.btn-base--blue:hover {
  background-color: #035fc2;
}

.btn-site {
  font-weight: 700;
  font-size: 14px;
  line-height: 100%;
  padding: 10px 18px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: 0.4s;
}

.btn-site:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-site--round {
  border-radius: 28px;
}

.btn-site--green {
  color: #fff;
  background-color: #98b000;
  border: 1px solid #98b000;
}

.btn-site--green:hover {
  color: #98b000 !important;
  background-color: #fff;
}

.btn-site--violet {
  background-color: #6b298a;
  color: #fff;
}

.btn-site--violet:hover {
  color: #fff !important;
  background-color: #98b000;
}

.btn-site--lg {
  padding: 20px 30px;
}

.btn-site--md {
  padding: 14px 20px;
}

.btn-site--outlined-green {
  border: 1px solid #98b000;
  background-color: #fff;
  color: #6b298a;
}

.btn-site--outlined-green:hover {
  background-color: #98b000;
  color: #fff;
}

.container-base {
  width: 100%;
  height: 100%;
  padding: 0 16px;
  margin: 0 auto;
  transition: 0s;
}

.counter {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #ff3b30;
  font-size: 12px;
  border-radius: 50%;
}

.counter--white {
  background-color: #fff;
  color: #ff3b30;
  font-weight: 600;
}

.counter--green {
  background-color: #98b000;
  color: #fff;
}

.counter--violet {
  background-color: #6b298a;
  color: #fff;
}

.counter--grey {
  background-color: grey;
  color: #fff;
}

.icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.icon--violet {
  color: #6b298a;
}

.icon--gray {
  color: rgba(0, 0, 0, 0.6);
}

.icon--silver {
  opacity: 0.3;
}

.icon--md {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.icon--lg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.icon--sm {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.field {
  display: flex;
  gap: 8px;
}

@media (max-width: 992px) {
  .field {
    flex-direction: column;
  }
}

.field--col {
  flex-direction: column;
}

.field--col .field__label {
  width: 100%;
  flex: 1 1 100%;
}

.field__wrapper {
  width: 100%;
}

.field input {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #000000;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  height: 40px;
  width: 100%;
  outline: none;
}

.field input::-moz-placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #999CA6;
}

.field input::placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #999CA6;
}

.field label {
  margin: 0;
  padding: 0;
  width: 200px;
  flex: 0 0 200px;
}

@media (max-width: 992px) {
  .field label {
    width: 100%;
    flex: 1 1 100%;
  }
}

.select-base {
  max-width: 200px;
  width: 100%;
  height: 40px;
}

.select-base--full {
  max-width: 100%;
}

.select-base select {
  opacity: 0;
}

.select-base .select2-container {
  height: 100%;
  width: 100% !important;
}

.select-base .selection {
  display: flex;
  height: 100%;
  width: 100% !important;
}

.select-base .select2-container--default .select2-selection--single,
.select-base .select2-container--default .select2-selection--multiple {
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  height: 100% !important;
  padding: 0 10px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.select-base .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 100%;
  color: #000000;
  height: 100%;
  margin: 0;
  padding: 0;
}

.select-base .select2-container--default .select2-selection--single .select2-selection__arrow {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.select-base .select2-container--default .select2-selection--single .select2-selection__arrow b {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-base .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.select-base .select2-container--default .select2-selection--multiple.text-sm .select2-selection__choice,
.select-base .text-sm .select2-container--default .select2-selection--multiple .select2-selection__choice,
.select-base .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 0;
  padding: 2px 8px;
}

.select2-container--default .select2-dropdown {
  border: 1px solid #e5e5e5;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
}

.select2-results__options {
  background: #FFFFFF;
}

.title-base {
  font-weight: 600;
  font-size: 28px;
  line-height: 120%;
  margin: 0;
}

.error-message {
  display: flex;
  font-size: 12px;
  line-height: 100%;
  color: red;
  padding-left: 8px;
}

.error-message--lg {
  font-weight: 600;
  font-size: 14px;
}

.required::after {
  content: "*";
  color: red;
}

.text {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
}

.text--md {
  font-weight: 600;
  font-size: 18px;
}

.hover {
  position: relative;
}

.hover::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background-color: #6b298a;
  transition: 400ms;
}

.hover:hover::after,
.hover:focus-visible::after {
  left: 0;
  right: initial;
  width: 100%;
}

.btn {
  font-size: 1.4rem;
}

@media (max-width: 37.5em) {
  .btn {
    font-size: 1.6rem;
  }
}

.btn-download {
  background: #98b000;
  color: #fff;
  border-radius: 2rem;
  padding: 1rem 2rem;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .btn-download {
    display: flex;
    margin-bottom: 1rem;
  }
}

.btn-download:hover {
  background: #6b298a;
}

.btn-download i {
  width: 2rem;
  height: 2rem;
  background: url("/img/download-icon-40.png");
  background-size: 100%;
  display: inline-block;
  margin-right: 1rem;
}

.btn-download i.bank-logo {
  background: url("/img/bank-logo.png");
  background-size: 100%;
}

.btn-download i.privat-logo {
  background: url("/img/privat24-logo.png");
  background-size: 100%;
}

.btn-download i.monobank-logo {
  background: url("/img/monobank-logo.png");
  background-size: 100%;
}

.btn-download i.chast-logo {
  background: url("/img/chast-logo.png");
  background-size: 100%;
}

.btn-download i.arrow-scroll-down {
  background: url("/img/scroll-down.png");
  background-size: 100%;
}

.hidden {
  display: none;
}

.modal-lg .attendance-legend .block {
  display: flex;
  align-items: center;
}

.modal-lg .attendance-legend .block .color {
  margin-right: 5px;
}

.modal-lg .attendance-legend .color {
  width: 13px;
  height: 13px;
  border: 1px solid #ccc;
}

.modal-lg .attendance-legend .color-0 {
  background: #dddddd;
}

.modal-lg .attendance-legend .color-1 {
  background: #afd2b8;
}

.modal-lg .attendance-legend .color-2 {
  background: #ffe7aa;
}

.modal-lg .attendance-legend .color-3 {
  background: #f8a2ad;
}

.modal-lg .attendance-legend .color-4 {
  background: #bcdaff;
}

.modal-lg .attendance-legend .color-5 {
  background: #f8a2ad;
}

.modal-lg .modal-title {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.modal-lg .modal-header {
  padding: 0.5rem 1rem;
}

.modal-lg .modal-body {
  padding: 0.5rem 1rem;
}

.modal-lg label {
  margin-bottom: 0.1em;
  display: block;
}

.modal-lg textarea {
  width: 100%;
  padding: 4px 5px;
}

.modal-lg .mb-3,
.modal-lg .my-3 {
  margin-bottom: 0.5rem !important;
}

@media (min-width: 992px) {
  .modal-full-full {
    max-width: 1600px;
    padding: 15px;
  }
}

.modal-schedule {
  font-size: 12px;
}

.modal-schedule .modal-dialog {
  max-width: 600px;
}

.modal-schedule .student-col {
  margin-bottom: 15px;
}

.modal-schedule .modal-title {
  font-weight: 700;
}

.modal-schedule .schedule-modal-label {
  font-weight: 700;
  margin-bottom: 10px;
}

.modal-schedule .teacher-modal-row {
  margin-bottom: 15px;
}

.modal-schedule .attendance-wrapper {
  margin-bottom: 15px;
}

.modal-schedule .attendance-wrapper.student-wrapper {
  margin-bottom: 0;
}

.modal-schedule .attendance-wrapper .student-name {
  margin-bottom: 5px;
}

.modal-schedule .attendance-wrapper .student-attendance {
  display: flex;
  margin-bottom: 10px;
}

.modal-schedule .attendance-wrapper .student-attendance .form-group {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.modal-schedule .attendance-wrapper .student-attendance .form-group input {
  height: 35px;
  border-radius: 3px;
  border: 1px solid #bababa;
}

.modal-schedule .attendance-wrapper .student-attendance .form-group:nth-child(1) {
  background: #dddddd;
}

.modal-schedule .attendance-wrapper .student-attendance .form-group:nth-child(2) {
  background: #afd2b8;
}

.modal-schedule .attendance-wrapper .student-attendance .form-group:nth-child(3) {
  background: #ffe7aa;
}

.modal-schedule .attendance-wrapper .student-attendance .form-group:nth-child(4) {
  background: #f8a2ad;
}

.modal-schedule .attendance-wrapper .student-attendance .form-group:nth-child(5) {
  background: #bcdaff;
}

.modal-schedule .attendance-legend .block {
  display: flex;
  align-items: center;
}

.modal-schedule .attendance-legend .block .color {
  margin-right: 5px;
}

.modal-schedule .attendance-legend .color {
  width: 13px;
  height: 13px;
  border: 1px solid #ccc;
}

.modal-schedule .attendance-legend .color-0 {
  background: #dddddd;
}

.modal-schedule .attendance-legend .color-1 {
  background: #afd2b8;
}

.modal-schedule .attendance-legend .color-2 {
  background: #ffe7aa;
}

.modal-schedule .attendance-legend .color-3 {
  background: #f8a2ad;
}

.modal-schedule .attendance-legend .color-4 {
  background: #bcdaff;
}

.modal-schedule .meta-info {
  margin-bottom: 0;
}

.modal-schedule .meta-info .schedule-modal-label {
  margin-bottom: 3px;
}

.modal-schedule .meta-info .col-md-4 {
  margin-bottom: 15px;
}

.modal-schedule .btn-primary {
  width: 120px;
}

.legend-row {
  margin-bottom: 15px;
}

.modal .label {
  margin-bottom: 0.1em;
  display: block;
}

.modal textarea {
  width: 100%;
  padding: 4px 5px;
}

.modal-body .attendance-wrapper {
  margin-bottom: 10px;
  padding-bottom: 3px;
  width: 100%;
}

.modal-body .attendance-wrapper:last-child {
  margin-bottom: 15px;
}

.modal-body .attendance-wrapper .person-name {
  padding: 10px;
  font-weight: 700;
}

.modal-body .attendance-wrapper .person-attendance {
  display: flex;
  margin-bottom: 5px;
}

.modal-body .attendance-wrapper .person-attendance .form-group {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.modal-body .attendance-wrapper .person-attendance .form-group:hover {
  filter: brightness(90%);
}

.modal-body .attendance-wrapper .person-attendance .form-group input {
  height: 35px;
}

.modal-body .attendance-wrapper .person-info {
  display: flex;
  align-items: center;
  width: 100%;
}

.modal-body .attendance-wrapper .person-info .student-product {
  width: 100%;
}

.modal-body .attendance-wrapper .person-info .student-product .select2 {
  width: 100% !important;
}

.trial-user-name {
  position: relative;
}

.contact-icon {
  position: absolute;
  top: 13px;
  width: 18px;
  z-index: 1;
}

.contact-icon-confirm {
  right: 35px;
  /* лівіша іконка */
}

.contact-icon-telegram {
  right: 10px;
  /* правіша іконка */
}

.contact-icon img {
  width: 100%;
  height: auto;
}

.modal-body .attendance-wrapper-students {
  margin-bottom: 0;
}

.modal-body .attendance-wrapper-students .person-name-student {
  padding-left: 10px;
}

.modal-body .block-title {
  display: flex;
  justify-content: space-between;
}

.modal-body .person-name {
  position: relative;
}

.modal-body .person-name .contact-show {
  position: absolute;
  z-index: 1;
  width: 18px;
  top: 13px;
  right: 5px;
}

.modal-body .person-name .contact-show img {
  width: 100%;
  height: auto;
}

.modal-body .person-contacts {
  background: #eff4f5;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.modal-body .person-contacts.open {
  height: 80px;
}

.modal-body .person-contacts .inner {
  padding: 5px;
}

.account-login {
  background-color: #fff;
  position: absolute;
  z-index: 0;
  opacity: 0;
  border: 1px solid #98b000;
  -o-box-shadow: 0 1px 7px 0 rgba(50, 50, 50, 0.25);
  box-shadow: 0 1px 7px 0 rgba(50, 50, 50, 0.25);
  top: -100rem;
  display: flex;
  padding: 1.5rem 1.5rem 0;
  width: 30rem;
  right: 6rem;
  transition: all 0.3s ease;
}

.account-login input {
  width: 100%;
}

@media (max-width: 37.5em) {
  .account-login {
    width: 80%;
    left: 50%;
    right: 50%;
    transform: translate(-50%);
  }

  .account-login new input {
    width: 100%;
  }
}

.account-login.toggle-active {
  top: 0;
  opacity: 1;
}

.account-login .form-wrapper .title {
  text-align: center;
  color: #6b298a;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.account-login .form-wrapper .form-group {
  margin-bottom: 1.5rem;
}

.account-login .form-wrapper .form-group.buttons {
  text-align: center;
}

.account-login .form-wrapper .form-group.buttons button {
  border: none;
  background: #98b000;
  color: #fff;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.account-login .form-wrapper .form-group.buttons button:hover {
  cursor: pointer;
  background: #6b298a;
}

.course-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 42rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  z-index: 300;
}

.course-modal.toggle-active {
  opacity: 1;
  pointer-events: initial;
}

.course-modal .form-wrapper {
  position: relative;
  padding: 1.5rem 1.5rem 1rem;
  z-index: 21;
  width: 39rem;
  max-height: 85vh;
  border: 1px solid #98b000;
  box-shadow: 0 1px 7px 0 rgba(50, 50, 50, 0.25);
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}

.course-modal .form-wrapper::-webkit-scrollbar {
  display: none;
}

.course-modal .form-wrapper .title {
  text-align: center;
  color: #6b298a;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.course-modal .form-wrapper .title-course {
  text-align: center;
  font-weight: 700;
  margin-bottom: 1rem;
}

.course-modal .form-wrapper .form-group {
  margin-bottom: 1.5rem;
}

.course-modal .form-wrapper .form-group .group-wrapper {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.course-modal .form-wrapper .form-group .group-wrapper .label-subtitle {
  font-size: 12px;
  line-height: 100%;
  color: #fff;
  position: absolute;
  top: -14px;
  left: 0;
  background-color: #e42218;
  padding: 5px 10px 5px 15px;
  font-weight: 600;
  clip-path: polygon(0% 0%, 100% 0, 95% 50%, 100% 100%, 0% 100%);
}

.course-modal .form-wrapper .form-group input {
  display: block;
  width: 100%;
}

.course-modal .form-wrapper .form-group.buttons {
  text-align: center;
}

.course-modal .form-wrapper .form-group.buttons button {
  border: none;
  background: #98b000;
  color: #fff;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.course-modal .form-wrapper .form-group.buttons button:hover {
  cursor: pointer;
  background: #6b298a;
}

.course-modal .form-wrapper .form-group.buttons button:disabled,
.course-modal .form-wrapper .form-group.buttons button[disabled] {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

.course-modal .form-wrapper .form-group select {
  width: 100%;
  height: 4rem;
}

.course-modal .form-wrapper .form-group.radio {
  position: relative;
  height: 27rem;
  margin-bottom: 0;
}

@media (max-width: 37.5em) {
  .course-modal .form-wrapper .form-group.radio {
    height: 33rem;
  }
}

.course-modal .form-wrapper .form-group.radio .radio-wrapper {
  position: absolute;
  left: -2.6rem;
  width: calc(100% + 5.2rem);
}

.course-modal .form-wrapper .form-group.radio label {
  position: relative;
  display: flex;
  align-items: center;
  height: 4.4rem;
  background: #6b298a;
  color: #fff;
  margin-bottom: 1.6rem;
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .course-modal .form-wrapper .form-group.radio label {
    height: 6rem;
  }
}

.course-modal .form-wrapper .form-group.radio label span {
  padding-left: 5rem;
}

@media (max-width: 37.5em) {
  .course-modal .form-wrapper .form-group.radio label span {
    padding-left: 6rem;
  }
}

.course-modal .form-wrapper .form-group.radio label:hover {
  background: #98b000;
  cursor: pointer;
}

.course-modal .form-wrapper .form-group.radio label:hover .top-corner {
  border-top: 2.2rem solid #98b000;
}

@media (max-width: 37.5em) {
  .course-modal .form-wrapper .form-group.radio label:hover .top-corner {
    border-top: 3rem solid #98b000;
  }
}

.course-modal .form-wrapper .form-group.radio label:hover .bottom-corner {
  border-bottom: 2.2rem solid #98b000;
}

@media (max-width: 37.5em) {
  .course-modal .form-wrapper .form-group.radio label:hover .bottom-corner {
    border-bottom: 3rem solid #98b000;
  }
}

.course-modal .form-wrapper .form-group.radio label:before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 1rem solid #98b000;
  border-left: 1rem solid transparent;
  top: -22px;
  left: 0;
  position: absolute;
}

.course-modal .form-wrapper .form-group.radio label:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 1rem solid #98b000;
  border-right: 1rem solid transparent;
  bottom: -1rem;
  right: 0;
  position: absolute;
}

.course-modal .form-wrapper .form-group.radio label input {
  position: absolute;
  left: 25px;
  top: 14px;
  width: 16px;
  height: 16px;
}

.course-modal .form-wrapper .form-group.radio label .top-corner {
  width: 0;
  height: 0;
  border-top: 2.2rem solid #6b298a;
  border-right: 2rem solid transparent;
  position: absolute;
  right: -2rem;
  top: 0;
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .course-modal .form-wrapper .form-group.radio label .top-corner {
    border-top: 3rem solid #6b298a;
  }
}

.course-modal .form-wrapper .form-group.radio label .bottom-corner {
  width: 0;
  height: 0;
  border-bottom: 2.2rem solid #6b298a;
  border-right: 2rem solid transparent;
  position: absolute;
  right: -2rem;
  bottom: 0;
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .course-modal .form-wrapper .form-group.radio label .bottom-corner {
    border-bottom: 3rem solid #6b298a;
  }
}

.course-modal .form-wrapper .form-group.checkbox label {
  display: flex;
}

.course-modal .form-wrapper .form-group.checkbox input {
  width: auto;
  margin-right: 1rem;
}

.tabs .modal-tabs {
  display: flex;
}

.tabs .modal-tabs .nav-tab {
  background: #ececec;
  border-bottom: 1px solid #d5d5d5;
}

.tabs .modal-tabs .nav-tab:hover {
  cursor: pointer;
  background: #e5e5e5;
}

.tabs .modal-tabs .nav-tab.active {
  background: #fff;
  border-top: 1px solid #d5d5d5;
  border-left: 1px solid #d5d5d5;
  border-right: 1px solid #d5d5d5;
  border-bottom: none;
}

.tabs .modal-tabs-content {
  padding-top: 15px;
  padding-bottom: 15px;
}

.tabs .modal-tabs-content .tab {
  display: none;
}

.tabs .modal-tabs-content .tab.active {
  display: block;
}

.tabs textarea[disabled] {
  background: #e5e5e5;
  border: 1px solid #ccc;
}

.admin-sidebar {
  display: flex;
  width: 300px;
  right: -300px;
  top: 0;
  float: none;
  height: 100vh;
  position: fixed;
  z-index: 10000;
  box-shadow: -4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}

.admin-sidebar.active {
  right: 0;
}

.admin-sidebar .control-sidebar-button {
  background-color: #dc3545;
  width: 30px;
  height: 40px;
  top: 50px;
  left: -30px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.admin-sidebar .control-sidebar-button span {
  color: white;
}

.admin-sidebar .control-sidebar-button:hover {
  cursor: pointer;
  opacity: 0.8;
}

.admin-sidebar .control-sidebar-content {
  background-color: white;
  width: 100%;
  padding: 10px;
  overflow: scroll;
}

.admin-sidebar .accordionjs {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-sidebar .accordionjs .acc_section {
  border: 1px solid #ccc;
  position: relative;
  z-index: 10;
  margin-top: -1px;
  overflow: hidden;
}

.admin-sidebar .accordionjs .acc_section .acc_head {
  position: relative;
  background: #fff;
  padding: 10px;
  display: block;
  cursor: pointer;
}

.admin-sidebar .accordionjs .acc_section .acc_head h3 {
  line-height: 1;
  margin: 5px 0;
}

.admin-sidebar .accordionjs .acc_section .acc_content {
  padding: 10px;
}

.admin-sidebar .accordionjs .acc_section:first-of-type,
.admin-sidebar .accordionjs .acc_section:first-of-type .acc_head {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.admin-sidebar .accordionjs .acc_section:last-of-type,
.admin-sidebar .accordionjs .acc_section:last-of-type .acc_content {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.admin-sidebar .accordionjs .acc_section.acc_active > .acc_content {
  display: block;
}

.admin-sidebar .accordionjs .acc_section.acc_active > .acc_head {
  background: #e7e7e7;
  border-bottom: 1px solid #ccc;
}

.admin-sidebar .copy-data:hover {
  cursor: initial;
  color: #dc3545;
}

.admin-help-sidebar {
  display: flex;
  width: 300px;
  right: -300px;
  top: 0;
  float: none;
  height: 100vh;
  position: fixed;
  z-index: 10000;
  box-shadow: -4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}

.admin-help-sidebar.active {
  right: 0;
}

.admin-help-sidebar .control-sidebar-help-button {
  background-color: #dc3545;
  width: 40px;
  height: 40px;
  top: 100px;
  left: -40px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.admin-help-sidebar .control-sidebar-help-button span {
  color: white;
}

.admin-help-sidebar .control-sidebar-help-button:hover {
  cursor: pointer;
  opacity: 0.8;
}

.admin-help-sidebar .control-sidebar-help-content {
  background-color: white;
  width: 100%;
  padding: 10px;
  overflow: scroll;
}

.admin-help-sidebar .accordionjs {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-help-sidebar .accordionjs .acc_section {
  border: 1px solid #ccc;
  position: relative;
  z-index: 10;
  margin-top: -1px;
  overflow: hidden;
}

.admin-help-sidebar .accordionjs .acc_section .acc_head {
  position: relative;
  background: #fff;
  padding: 10px;
  display: block;
  cursor: pointer;
}

.admin-help-sidebar .accordionjs .acc_section .acc_head h3 {
  line-height: 1;
  margin: 5px 0;
}

.admin-help-sidebar .accordionjs .acc_section .acc_content {
  padding: 10px;
}

.admin-help-sidebar .accordionjs .acc_section:first-of-type,
.admin-help-sidebar .accordionjs .acc_section:first-of-type .acc_head {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.admin-help-sidebar .accordionjs .acc_section:last-of-type,
.admin-help-sidebar .accordionjs .acc_section:last-of-type .acc_content {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.admin-help-sidebar .accordionjs .acc_section.acc_active > .acc_content {
  display: block;
}

.admin-help-sidebar .accordionjs .acc_section.acc_active > .acc_head {
  background: #e7e7e7;
  border-bottom: 1px solid #ccc;
}

.admin-help-sidebar .copy-data:hover {
  cursor: initial;
  color: #dc3545;
}

.admin-courses-sidebar {
  display: flex;
  width: 600px;
  right: -600px;
  top: 0;
  float: none;
  height: 100vh;
  position: fixed;
  z-index: 10000;
  box-shadow: -4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}

.admin-courses-sidebar.active {
  right: 0;
}

.admin-courses-sidebar .control-sidebar-courses-button {
  background-color: #dc3545;
  width: 50px;
  height: 40px;
  top: 150px;
  left: -50px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.admin-courses-sidebar .control-sidebar-courses-button span {
  color: white;
}

.admin-courses-sidebar .control-sidebar-courses-button:hover {
  cursor: pointer;
  opacity: 0.8;
}

.admin-courses-sidebar .control-sidebar-courses-content {
  background-color: white;
  width: 100%;
  padding: 10px;
  overflow: scroll;
}

.admin-courses-sidebar .accordionjs {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-courses-sidebar .accordionjs .acc_section {
  border: 1px solid #ccc;
  position: relative;
  z-index: 10;
  margin-top: -1px;
  overflow: hidden;
}

.admin-courses-sidebar .accordionjs .acc_section .acc_head {
  position: relative;
  background: #fff;
  padding: 10px;
  display: block;
  cursor: pointer;
}

.admin-courses-sidebar .accordionjs .acc_section .acc_head h3 {
  line-height: 1;
  margin: 5px 0;
}

.admin-courses-sidebar .accordionjs .acc_section .acc_content {
  padding: 10px;
}

.admin-courses-sidebar .accordionjs .acc_section:first-of-type,
.admin-courses-sidebar .accordionjs .acc_section:first-of-type .acc_head {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.admin-courses-sidebar .accordionjs .acc_section:last-of-type,
.admin-courses-sidebar .accordionjs .acc_section:last-of-type .acc_content {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.admin-courses-sidebar .accordionjs .acc_section.acc_active > .acc_content {
  display: block;
}

.admin-courses-sidebar .accordionjs .acc_section.acc_active > .acc_head {
  background: #e7e7e7;
  border-bottom: 1px solid #ccc;
}

.admin-courses-sidebar .copy-data:hover {
  cursor: initial;
  color: #dc3545;
}

.block-type-modal .modal-title {
  font-weight: 700;
}

.block-type-modal .modal-body {
  padding: 1.5rem;
}

.block-type-modal .modal-content {
  border-radius: 0.5rem;
  box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.5);
}

.block-type-modal .block-radio-list label {
  font-weight: 400;
  font-size: 13px;
  display: inline-block;
}

.block-type-modal .block-radio-list input {
  font-size: 14px;
  margin-left: -1.75rem;
  height: 16px;
  margin-top: 3px;
}

.block-type-modal .block-radio-list .form-check {
  position: relative;
  display: flex;
  padding-left: 1.75rem;
  margin-bottom: 9px;
}

.block-type-modal .btn {
  font-size: 13px;
  text-transform: capitalize;
  padding: 0.5rem 1.25rem;
}

.block-type-modal .btn-default {
  background-color: #f8f9fa;
  border-color: #ddd;
  color: #444;
}

.error-modal {
  background-color: #fff;
  position: fixed;
  z-index: 11;
  opacity: 0;
  border: 1px solid #98b000;
  box-shadow: 0 1px 7px 0 rgba(50, 50, 50, 0.25);
  top: -100rem;
  display: flex;
  padding: 2rem;
  width: 39rem;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .error-modal {
    width: 80%;
  }
}

.error-modal.toggle-active {
  top: 50%;
  opacity: 1;
}

@media (max-width: 37.5em) {
  .error-modal.toggle-active {
    z-index: 100;
  }
}

@media (min-width: 992px) {
  .modal-full {
    max-width: 1200px;
  }
}

@media (min-width: 992px) {
  .modal-full-full {
    max-width: 1600px;
    padding: 15px;
  }
}

.unread-count {
  display: inline-block;
  background-color: #d01616;
  color: white;
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
}

.form-signin {
  width: 100%;
  max-width: 33rem;
  padding: 1rem;
  margin: auto;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 0.8rem;
  font-size: 1.4rem;
}

@media (max-width: 37.5em) {
  .form-signin .form-control {
    font-size: 1.6rem;
  }
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin input {
  margin-bottom: 0.625rem;
}

.form-signin .btn {
  padding: 1rem;
}

.pricing-block {
  width: 34rem;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
  position: relative;
  margin: 0 auto 5rem;
  color: #3d3d3d;
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .pricing-block {
    width: 100%;
  }
}

.pricing-block a {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pricing-block:hover {
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.45);
}

.pricing-block .title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  color: #6b298a;
  text-transform: uppercase;
  font-size: 2.2rem;
  padding: 0 2rem;
  text-align: center;
  line-height: 3rem;
}

.pricing-block .title.best-offer {
  background: #6b298a;
  color: #fff;
}

.pricing-block .info {
  padding: 2.2rem 4rem;
  border-top: 1px solid #e0c4ee;
  border-bottom: 1px solid #e0c4ee;
}

.pricing-block .info ul li {
  position: relative;
  font-size: 1.5rem;
  padding-left: 2rem;
}

@media (max-width: 37.5em) {
  .pricing-block .info ul li {
    font-size: 1.6rem;
  }
}

.pricing-block .info ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #98b000;
  display: inline-block;
  border-radius: 4px;
  position: absolute;
  top: 8px;
  left: 0;
}

.pricing-block .offer {
  padding: 2.2rem 4rem;
  text-align: center;
}

.pricing-block .offer .offer-main {
  font-size: 1.8rem;
}

.pricing-block .offer.last {
  border-bottom: none;
}

.pricing-block .offer-label {
  position: relative;
  height: 7rem;
  margin-bottom: 1rem;
}

.pricing-block .offer-label .offer-inner {
  background-color: #6b298a;
  position: absolute;
  display: flex;
  color: #fff;
  left: -1rem;
  width: 90%;
  height: 6rem;
}

.pricing-block .offer-label .offer-inner::before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 1rem solid #98b000;
  border-left: 1rem solid transparent;
  top: -2.4rem;
  position: absolute;
}

@media (max-width: 37.5em) {
  .pricing-block .offer-label .offer-inner::before {
    top: -2.6rem;
  }
}

.pricing-block .offer-label .offer-inner .top-corner {
  width: 0;
  height: 0;
  border-top: 3rem solid #6b298a;
  border-right: 2rem solid transparent;
  position: absolute;
  right: -2rem;
  top: 0;
}

.pricing-block .offer-label .offer-inner .bottom-corner {
  width: 0;
  height: 0;
  border-bottom: 3rem solid #6b298a;
  border-right: 2rem solid transparent;
  position: absolute;
  right: -2rem;
  bottom: 0;
}

.pricing-block .offer-label .offer-inner .price {
  font-weight: 700;
  font-size: 1.8rem;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.pricing-block .offer-label .offer-inner .price::after {
  content: "";
  width: 3rem;
  background: linear-gradient(107deg, #6b298a 45%, #fff 51%, #6b298a 53%);
  height: 6rem;
  position: absolute;
  right: -0.7rem;
}

.pricing-block .offer-label .offer-inner .price .price-number {
  font-size: 2rem;
  margin-right: 0.6rem;
}

.pricing-block .offer-label .offer-inner .price.price-extra {
  color: #98b000;
}

.pricing-block .offer-label .offer-inner .price.price-extra .price-number {
  font-size: 2.2rem;
  margin-right: 0.6rem;
}

.pricing-block .offer-label .offer-inner .bonus {
  display: flex;
  width: 50%;
  justify-content: space-around;
}

.pricing-block .offer-label .offer-inner .bonus .numbers {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pricing-block .offer-label .offer-inner .bonus .numbers .bottom {
  background-color: #fff;
  border-radius: 1.3rem;
  width: 2.6rem;
  height: 2.6rem;
  position: relative;
}

.pricing-block .offer-label .offer-inner .bonus .numbers .bottom span {
  font-weight: 700;
  color: #6b298a;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  line-height: 1rem;
  bottom: block;
}

.pricing-block .offer-label .offer-inner .bonus .text {
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pricing-block .offer-label .offer-inner .bonus .text .top {
  font-size: 1.2rem;
}

.pricing-block .offer-label__subtitle {
  font-size: 12px;
  line-height: 100%;
  color: #fff;
  position: absolute;
  top: -14px;
  left: -1rem;
  background-color: #e42218;
  padding: 5px 10px 5px 15px;
  font-weight: 600;
  clip-path: polygon(0% 0%, 100% 0, 95% 50%, 100% 100%, 0% 100%);
}

.pricing-block .button {
  text-align: center;
  padding: 0 4rem;
  z-index: 10;
  position: relative;
}

.pricing-block .button button {
  border: none;
  background: #98b000;
  color: #fff;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.pricing-block .button button:hover {
  cursor: pointer;
  background: #6b298a;
}

.pricing-block .start {
  padding: 2rem 4rem;
  text-align: center;
}

.pricing-block__prices {
  height: 100%;
}

.pricing-show-all {
  text-align: center;
  padding: 5rem 0;
}

.pricing-show-all a {
  text-transform: uppercase;
  color: #98b000;
  border-bottom: 2px dotted #98b000;
  font-weight: 700;
  font-size: 2rem;
  transition: all 0.3s ease;
}

.pricing-show-all a:hover {
  color: #6b298a;
  border-bottom: 2px dotted #6b298a;
}

.lang-block {
  width: 27rem;
  -o-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
  background-color: #fff;
  margin-bottom: 2rem;
  position: relative;
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .lang-block {
    width: 100%;
  }
}

.lang-block.lang-block-long {
  width: 37rem;
}

@media (max-width: 37.5em) {
  .lang-block.lang-block-long {
    width: 100%;
  }
}

.lang-block a {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.lang-block:hover {
  -o-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.lang-block:hover .nonsense .label {
  width: 50%;
  position: relative;
}

.lang-block:hover .nonsense .label span {
  background-color: #98b000;
}

.lang-block .title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  color: #6b298a;
  text-transform: uppercase;
  font-size: 1.8rem;
}

@media (max-width: 37.5em) {
  .lang-block .title {
    font-size: 2.4rem;
    text-align: center;
    line-height: 3rem;
  }
}

.lang-block .lang-wrapper {
  padding: 0 2rem;
}

.lang-block .info-title {
  font-weight: 700;
  text-align: center;
  width: 100%;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

@media (max-width: 37.5em) {
  .lang-block .info-title {
    font-size: 1.8rem;
  }
}

.lang-block .info {
  padding: 2.2rem 0;
  border-top: 1px solid #e0c4ee;
  color: #3d3d3d;
}

.lang-block .info ul {
  min-height: 29rem;
}

@media (max-width: 37.5em) {
  .lang-block .info ul {
    min-height: initial;
  }
}

.lang-block .info ul li {
  position: relative;
  font-size: 1.3rem;
  padding-left: 1.5rem;
}

@media (max-width: 37.5em) {
  .lang-block .info ul li {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
}

.lang-block .info ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #98b000;
  display: inline-block;
  border-radius: 4px;
  position: absolute;
  top: 8px;
  left: 0;
}

.lang-block .nonsense {
  display: flex;
  padding-bottom: 1.4rem;
}

.lang-block .nonsense .flag {
  width: 50%;
  text-align: center;
}

.lang-block .nonsense .flag img {
  width: 77px;
  height: 77px;
  -o-object-fit: contain;
     object-fit: contain;
}

.lang-block .nonsense .label {
  width: 50%;
  position: relative;
}

.lang-block .nonsense .label span {
  background-color: #6b298a;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  border-bottom-left-radius: 2rem;
  border-top-left-radius: 2rem;
  padding: 1rem 3rem;
  font-size: 1.4rem;
  position: absolute;
  right: 0;
  top: calc(50% - 2.1rem);
  transition: all 0.3s ease;
}

.drop-menu {
  background-color: #fff;
  position: absolute;
  z-index: 0;
  opacity: 0;
  left: 27rem;
  border: 1px solid #98b000;
  box-shadow: 0 1px 7px 0 rgba(50, 50, 50, 0.25);
  top: -1000px;
  display: flex;
  transition: all 0.3s ease;
}

.drop-menu.toggle-active {
  top: 0;
  opacity: 1;
}

.drop-menu .menu-inner {
  padding: 2rem 0;
  display: flex;
}

.drop-menu .categories-list {
  width: 19rem;
}

.drop-menu .categories-list li {
  background-color: #fff;
  transition: all 0.3s ease;
}

.drop-menu .categories-list li.active,
.drop-menu .categories-list li:hover {
  background-color: #6b298a;
}

.drop-menu .categories-list li.active a,
.drop-menu .categories-list li:hover a {
  color: #fff;
  position: relative;
}

.drop-menu .categories-list li.active a::after,
.drop-menu .categories-list li:hover a::after {
  content: "";
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 13px solid #6b298a;
  display: block;
  position: absolute;
  top: 0;
  right: -13px;
}

.drop-menu .categories-list a {
  text-transform: uppercase;
  color: #3d3d3d;
  padding: 0.5rem 2rem;
  display: block;
  position: relative;
  transition: all 0.3s ease;
}

.drop-menu .categories-list a::after {
  content: "";
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 13px solid transparent;
  display: block;
  position: absolute;
  top: 0;
  right: -13px;
  transition: all 0.3s ease;
}

.drop-menu .items-list {
  width: 42rem;
}

.drop-menu .items-list .item-content {
  display: none;
  padding: 0 3rem;
}

.drop-menu .items-list .item-content ul {
  -moz-columns: 2;
       columns: 2;
  gap: 3rem;
}

.drop-menu .items-list .item-content ul a {
  color: #6b298a;
  padding: 0.4rem 0;
  display: block;
  transition: all 0.3s ease;
}

.drop-menu .items-list .item-content ul a:hover {
  color: #98b000;
}

.drop-menu .items-list .item-content.active {
  display: block;
}

.courses-menu {
  left: 27rem;
}

.courses-menu .categories-list {
  border-right: 1px solid #6b298a;
}

.languages-menu {
  left: 27rem;
}

.languages-menu .categories-list {
  border-right: 1px solid #6b298a;
}

.languages-menu .items-list {
  width: 23rem;
}

.languages-menu .items-list .item-content ul {
  -moz-columns: 1;
       columns: 1;
}

.about-menu {
  left: 45rem;
}

.menu-mobile {
  padding: 2rem 2rem 2rem 4rem;
  background: #5c2376;
  width: 90%;
  position: absolute;
  left: -100%;
  height: calc(100vh - 99px);
  z-index: 1;
  overflow-y: scroll;
  transition: all 0.3s ease;
}

.menu-mobile.right {
  left: initial;
  right: -100%;
}

.menu-mobile.toggle-active {
  left: 0;
}

.menu-mobile.toggle-active.right {
  left: initial;
  right: 0;
}

.menu-mobile a {
  color: #fff;
  font-size: 1.8rem;
}

.menu-mobile .misc {
  position: absolute;
  z-index: 1;
  right: 2rem;
  text-align: center;
}

.menu-mobile .misc .lang {
  padding-top: 2rem;
}

.menu-mobile .misc .lang a {
  color: #fff;
  margin-bottom: 1rem;
}

.menu-mobile .misc .lang a:visited {
  color: #fff;
}

.menu-mobile .menu-category-title > a {
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.2rem;
  display: block;
}

.menu-mobile .menu-subcategory {
  padding-left: 2rem;
  margin-bottom: 1.2rem;
}

.menu-mobile .menu-subcategory li {
  margin-bottom: 0.6rem;
}

.menu-mobile .btn-site {
  margin-top: 20px;
  max-width: 300px;
}

.menu-mobile-bottom {
  margin-top: auto;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menu-mobile-bottom .phones {
  text-align: center;
  margin-bottom: 10px;
}

.menu-mobile-bottom .telegram-phone {
  font-size: 16px;
  color: #98b000;
  text-decoration: none;
}

.btn-site {
  display: block;
  text-align: center;
  padding: 12px 20px;
  font-size: 15px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-site--green {
  background-color: #98b000;
  color: #fff;
  border: none;
}

.btn-site--transparent {
  background: transparent;
  border: 1px solid #98b000;
  color: #98b000;
}

.table-control {
  display: flex;
  padding: 0.5rem;
  justify-content: space-between;
}

.table-control .items-per-page-wrapper {
  display: flex;
  align-items: center;
}

.table-control .items-per-page-wrapper label {
  margin: 0 0.5rem 0 0;
}

.table-control .pagination {
  margin-bottom: 0;
}

.page-link-disabled {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #bfc2c6;
  background-color: #f0f0f0;
  border: 1px solid #dee2e6;
}

.page-item:last-child .page-link-disabled {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-item:first-child .page-link-disabled {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.modal-success {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  opacity: 0;
  z-index: -15;
  pointer-events: none;
  transition: 0.4s;
}

.modal-success .overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 25;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: 0.6s;
}

.modal-success__container {
  max-width: 550px;
  width: 100%;
  padding: 42px 31px;
  background-color: #FFF;
  z-index: 30;
}

.modal-success__title {
  font-weight: 500;
  font-size: 28px;
  line-height: 120%;
  text-align: center;
}

.modal-success__text {
  margin-top: 20px;
  line-height: 100%;
  text-align: center;
}

.modal-success__btns {
  margin-top: 30px;
}

.modal-success__btns .btn-site {
  border: 1px solid #98b000;
  padding: 15px;
  text-transform: uppercase;
  max-width: 70%;
  margin: 0 auto;
}

.modal-success__btns .btn-site:hover {
  background-color: #FFF;
  color: #98b000 !important;
}

.modal-success.open {
  opacity: 1;
  z-index: 300;
  pointer-events: initial;
}

.modal-success.open .overlay {
  opacity: 1;
  pointer-events: initial;
}

.login-form {
  margin: 0 auto;
  width: 26rem;
  padding: 10rem 0;
}

.login-form label {
  font-weight: 400;
  font-size: 1.3rem;
}

.login-form input {
  padding: 0.5rem;
  line-height: 3rem;
  width: 100%;
}

.login-form .form-group {
  margin-bottom: 1.5rem;
}

.login-form button {
  background: #98b000;
  border: 1px solid #98b000;
  border-radius: 2rem;
  font-weight: 700;
  color: #fff;
  font-size: 1.3rem;
  padding: 0.7rem 3rem;
  transition: all 0.3s ease;
}

.login-form button:hover {
  background: #6b298a;
  border: 1px solid #6b298a;
  cursor: pointer;
}

.section-faq {
  padding: 5rem 0;
}

.section-faq .faq-accordion {
  margin-bottom: 15px;
  border-top: 1px solid gainsboro;
  padding-top: 50px;
}

.section-faq .faq-accordion h2 {
  margin-bottom: 15px;
  text-transform: uppercase;
  color: #4a5152;
}

.section-faq .faq-accordion ul {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

.section-faq .faq-accordion li {
  list-style: none !important;
  margin-bottom: 0;
}

.section-faq .faq-accordion li a {
  text-decoration: none;
}

.section-faq .product-tabs .product-tabs-content .faq-accordion ul li {
  margin-bottom: 0;
}

.section-faq ul li a.faq-toggle {
  width: 100%;
  display: block;
  background: #e2e2e2;
  color: #4a5152 !important;
  padding: 0.75em;
  border-radius: 0.15em;
  transition: background 0.3s ease;
  border: 1px solid #c5c5c5;
  box-sizing: border-box;
}

.section-faq ul li a.faq-toggle:hover {
  background: #c5c5c5;
}

.section-faq .accordion-content {
  background: #fff;
  padding: 1rem;
}

.section-faq .accordion-content a {
  color: #4056c9;
  font-weight: 400;
}

.section-faq .accordion-content a:focus {
  color: #4056c9;
}

.section-faq .accordion-content a:visited {
  color: #4056c9;
}

.section-faq .accordion-content a:hover {
  color: #5468cf;
  opacity: 0.75;
}

.section-faq .accordion-content p {
  margin: 0;
  font-weight: 300;
}

.teacher-videos {
  padding: 0 0 5rem;
}

.teacher-videos .glide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 6rem;
}

@media (max-width: 56.25em) {
  .teacher-videos .glide {
    padding-inline: 0;
    padding-bottom: 6rem;
  }
}

@media (max-width: 37.5em) {
  .teacher-videos .glide {
    display: block;
  }
}

.teacher-videos .glide__track {
  height: 315px;
}

@media (max-width: 37.5em) {
  .teacher-videos .glide__track {
    display: block;
  }
}

.teacher-videos .glide__slides {
  height: 100%;
  display: flex;
  justify-content: center;
}

@media (max-width: 37.5em) {
  .teacher-videos .glide__slides {
    display: block;
  }
}

.teacher-videos .glide__arrow--left,
.teacher-videos .glide__arrow--right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 35px;
  height: 35px;
  background-repeat: no-repeat;
  background-size: 0px 0px;
  margin: 0;
}

@media (max-width: 56.25em) {
  .teacher-videos .glide__arrow--left,
  .teacher-videos .glide__arrow--right {
    transform: translateY(0);
    top: initial;
    bottom: 0;
    width: 24px;
    height: 24px;
  }
}

.teacher-videos .glide__arrow--left svg,
.teacher-videos .glide__arrow--right svg {
  width: 35px;
  height: 35px;
  color: #6b298a;
  transition: 0.4s;
}

@media (max-width: 56.25em) {
  .teacher-videos .glide__arrow--left svg,
  .teacher-videos .glide__arrow--right svg {
    width: 24px;
    height: 24px;
  }
}

.teacher-videos .glide__arrow--left:hover svg,
.teacher-videos .glide__arrow--right:hover svg {
  color: #97b000;
}

.teacher-videos .glide__arrow--left {
  left: 0;
}

@media (max-width: 56.25em) {
  .teacher-videos .glide__arrow--left {
    left: calc(50% - 30px);
  }
}

.teacher-videos .glide__arrow--right {
  right: 0;
}

@media (max-width: 56.25em) {
  .teacher-videos .glide__arrow--right {
    right: calc(50% - 30px);
  }
}

.teacher-videos .review-shadow-left,
.teacher-videos .review-shadow-right {
  cursor: pointer;
}

.section-pricing__card {
  display: grid;
}

@media (max-width: 37.5em) {
  .section-pricing__card {
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem;
  }
}

.message-modal {
  position: fixed;
  right: 0;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%) translateY(500px);
  width: 80%;
  background-color: #fff;
  box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background-color: #fff;
  pointer-events: none;
  transition: 0.6s;
  z-index: 200;
}

@media (max-width: 37.5em) {
  .message-modal {
    bottom: 20px;
    width: 90%;
  }
}

.message-modal__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}

.message-modal__title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
}

@media (max-width: 37.5em) {
  .message-modal__title {
    font-size: 26px;
  }
}

.message-modal__text {
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 30px;
}

@media (max-width: 37.5em) {
  .message-modal__text {
    font-size: 18px;
    margin-bottom: 20px;
  }
}

.message-modal__btns {
  display: flex;
  gap: 20px;
}

@media (max-width: 37.5em) {
  .message-modal__btns {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
}

.message-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.message-modal__close:focus {
  outline: none;
}

.message-modal__close img {
  width: 32px;
  height: 32px;
}

.message-modal.open {
  transform: translateX(-50%) translateY(0);
  pointer-events: initial;
}

.change-price-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  width: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  pointer-events: none;
  transition: all 0.5s ease;
  z-index: 200;
}

@media (max-width: 37.5em) {
  .change-price-modal {
    width: 90%;
  }
}

.change-price-modal__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}

.change-price-modal__title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
}

@media (max-width: 37.5em) {
  .change-price-modal__title {
    font-size: 26px;
  }
}

.change-price-modal__text {
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 30px;
}

@media (max-width: 37.5em) {
  .change-price-modal__text {
    font-size: 18px;
    margin-bottom: 20px;
  }
}

.change-price-modal__btns {
  display: flex;
  gap: 20px;
}

@media (max-width: 37.5em) {
  .change-price-modal__btns {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
}

.change-price-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.change-price-modal__close:focus {
  outline: none;
}

.change-price-modal__close img {
  width: 32px;
  height: 32px;
}

.change-price-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.change-price-modal #price-increase-countdown {
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: bold;
  color: red;
}

.change-price-modal .price-increase-date-text {
  font-size: 14px;
  color: #888;
  margin-top: 8px;
}

.header-menu {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  background: #e5e5e5;
  padding: 5px;
  z-index: 100;
}

@media (max-width: 992px) {
  .header-menu {
    padding: 5px 15px;
    justify-content: space-between;
  }
}

.header-menu__burger {
  background-color: #fff;
  display: none;
}

@media (max-width: 992px) {
  .header-menu__burger {
    display: flex;
  }
}

.header-menu-links {
  display: flex;
  align-items: center;
}

.header-menu-links a:not(.tasks__block),
.header-menu-links a:not(.notification-item) {
  width: 24px;
  height: 26px;
  display: block;
  margin-right: 8px;
}

.header-menu-links a:not(.tasks__block) img,
.header-menu-links a:not(.notification-item) img {
  width: 100%;
  height: auto;
}

.header-menu-links a:not(.tasks__block):last-child,
.header-menu-links a:not(.notification-item):last-child {
  margin-right: 0;
}

.header-menu-links .release {
  display: none;
}

@media (max-width: 992px) {
  .header-menu-links .release {
    display: block;
    margin-right: 15px;
    width: 18px;
    height: 18px;
  }
}

.title-auth {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.title-auth h1,
.title-auth h2 {
  line-height: 1;
  text-align: center;
  color: #6b298a;
}

.title-auth h1 {
  font-weight: 800;
  font-size: 40px;
}

@media (max-width: 37.5em) {
  .title-auth h1 {
    font-size: 30px;
  }
}

.title-auth h2 {
  font-weight: 600;
  font-size: 30px;
}

@media (max-width: 37.5em) {
  .title-auth h2 {
    font-size: 26px;
  }
}

.tasks {
  position: fixed;
  top: 150px;
  left: 0;
  z-index: 1000;
}

.tasks__btn {
  position: relative;
  width: 60px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 20px;
  line-height: 110%;
  font-weight: 500;
  padding: 5px 15px 5px 5px;
  background-color: rgba(128, 0, 128, 0.8);
  color: #ffffff;
  border-radius: 0 100px 100px 0;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 300;
  transition: 0.4s;
}

.tasks__btn:hover {
  background-color: #800080;
}

.tasks__num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.tasks__block {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  font-weight: 500;
  font-size: 20px;
  line-height: 110%;
  color: #FFFFFF !important;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  cursor: pointer;
}

.tasks__block img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.tasks__block--new {
  background-color: rgba(220, 59, 59, 0.9);
}

.tasks__block--new:hover {
  background-color: #dc3b3b;
  transition-delay: 0s;
}

.tasks__block--in_work {
  background-color: rgba(244, 253, 0, 0.9);
  color: #333333 !important;
}

.tasks__block--in_work:hover {
  background-color: #f4fd00;
  color: #333333;
  transition-delay: 0s;
}

.tasks__block--on_inspection {
  background-color: rgba(0, 38, 253, 0.9);
}

.tasks__block--on_inspection:hover {
  background-color: #0026fd;
  transition-delay: 0s;
}

.tasks__block--green {
  background-color: rgba(0, 128, 0, 0.9);
}

.tasks__block--green:hover {
  background-color: #008000;
  transition-delay: 0s;
}

.tasks__block--first {
  transition-delay: 0.4s;
}

.tasks__block--second {
  transition-delay: 0.3s;
}

.tasks__block--second img {
  transform: rotate(135deg);
  margin-right: -12px;
}

.tasks__block--third {
  transition-delay: 0.2s;
}

.tasks__block--third img {
  transform: rotate(-45deg);
  margin-right: -12px;
}

.tasks__block--four {
  transition-delay: 0.1s;
}

.tasks.open .tasks__block {
  opacity: 1;
  pointer-events: initial;
}

.tasks.open .tasks__block--first {
  top: -75px;
  left: 10px;
  transition-delay: 0.1s;
}

.tasks.open .tasks__block--second {
  top: 15%;
  transform: translateY(-50%);
  left: calc(100% + 10px);
  transition-delay: 0.2s;
}

.tasks.open .tasks__block--third {
  top: 85%;
  transform: translateY(-50%);
  left: calc(100% + 10px);
  transition-delay: 0.3s;
}

.tasks.open .tasks__block--four {
  top: calc(100% + 5px);
  left: 10px;
  transition-delay: 0.4s;
}

.tabs-tasks {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.tabs-tasks li {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  height: 50px;
}

.tabs-tasks input[type=radio] {
  display: none;
}

.tabs-tasks input[type=radio] + .tabs-tasks__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  background-color: #e5e5e5;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  color: #000000 !important;
  border-radius: 5px 5px 0 0;
  outline: none;
  width: 100%;
  height: 100%;
  padding: 10px 15px;
  margin: 0;
  cursor: pointer;
}

.tabs-tasks input[type=radio]:checked + .tabs-tasks__btn {
  font-weight: 600;
  background-color: #ffffff;
  border: none;
}

.field-comment {
  width: 100%;
  height: 100px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  padding: 6px 10px;
}

.field-comment textarea {
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  resize: none;
  padding: 0;
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
}

.field-comment textarea::-moz-placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  color: rgba(0, 0, 0, 0.4);
}

.field-comment textarea::placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  color: rgba(0, 0, 0, 0.4);
}

.comments-message {
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(229, 229, 229, 0.3);
}

.comments-message__date {
  font-size: 12px;
  line-height: 120%;
  color: rgba(0, 0, 0, 0.4);
}

.comments-message__name {
  font-size: 18px;
  line-height: 100%;
  color: rgba(0, 0, 0, 0.8);
}

.comments-message__text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 120%;
}

.your-comment {
  background-color: #f0f8ff;
  border-left: 4px solid #007bff;
}

.comments-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-task {
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.02);
  border: 1px solid #1E1D1D44;
}

.card-task__inner {
  display: flex;
  padding: 0;
}

@media (max-width: 768px) {
  .card-task__inner {
    flex-direction: column;
  }
}

.card-task-date {
  min-width: 100px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  padding: 10px;
}

.card-task-date:first-child {
  border-right: 1px solid #1E1D1D44;
}

@media (max-width: 768px) {
  .card-task-date:first-child {
    border: none;
  }
}

.card-task-date:last-child {
  border-left: 1px solid #1E1D1D44;
}

@media (max-width: 768px) {
  .card-task-date:last-child {
    border: none;
  }
}

.card-task-date__title {
  font-size: 14px;
  line-height: 100%;
  color: #8C8C8C;
  text-align: center;
}

.card-task-date__desc {
  font-weight: 600;
  font-size: 24px;
  line-height: 120%;
  text-align: center;
  color: #333333;
}

.card-task-content {
  width: 100%;
}

@media (max-width: 768px) {
  .card-task-content {
    border-bottom: 1px solid #1E1D1D44;
  }
}

.card-task-content__name {
  font-weight: 700;
  font-size: 30px;
  line-height: 120%;
  text-align: center;
  padding: 10px;
  color: #333333;
}

.card-task-content__cols {
  display: flex;
  border-top: 1px solid #1E1D1D44;
}

@media (max-width: 992px) {
  .card-task-content__cols {
    flex-direction: column;
  }
}

.card-task-content-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card-task-content-block:nth-child(2) {
  border-left: 1px solid #1E1D1D44;
  border-right: 1px solid #1E1D1D44;
}

@media (max-width: 992px) {
  .card-task-content-block:nth-child(2) {
    border: none;
  }
}

.card-task-content-block__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 110%;
  padding: 10px;
  border-bottom: 1px solid #1E1D1D44;
}

@media (max-width: 992px) {
  .card-task-content-block__title {
    border-top: 1px solid #1E1D1D44;
  }
}

@media (max-width: 992px) {
  .card-task-content-block__title:first-child {
    border-top: none;
  }
}

.card-task-content-block__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}

.card-task-content-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: #605D5D;
}

.card-task__btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid #1E1D1D44;
}

@media (max-width: 768px) {
  .card-task__btns {
    justify-content: flex-start;
  }
}

.card-task--1 {
  background-color: rgba(220, 20, 60, 0.1);
}

.card-task--4 {
  background-color: rgba(151, 176, 0, 0.1);
}

.card-task--2 {
  background-color: rgba(239, 217, 16, 0.1);
}

.card-task--3 {
  background-color: rgba(62, 153, 219, 0.1);
}

.form-base {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 992px) {
  .form-base {
    gap: 15px;
  }
}

.status-block {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #333333;
}

.status-block__title {
  font-size: 20px;
  line-height: 100%;
}

.status-block__desc {
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
}

.filters-base {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pulse {
  box-shadow: 0 0 0 rgba(128, 0, 128, 0.8);
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

.pulse:hover {
  animation: none;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(128, 0, 128, 0.6);
    scale: 1;
  }

  70% {
    box-shadow: 0 0 0 15px rgba(128, 0, 128, 0);
    scale: 1.05;
  }

  100% {
    box-shadow: 0 0 0 0 rgba(128, 0, 128, 0);
    scale: 1;
  }
}

.field-poll .error-message {
  position: absolute;
  margin-top: 10px;
}

.field-poll__title {
  position: relative;
  color: #5e6d55;
  font-size: 16px;
  font-weight: 500;
  line-height: 120%;
}

.field-poll__title span {
  font-size: 14px;
  font-weight: 400;
  margin-left: 5px;
}

.field-poll__input,
.field-poll__wrapper {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  width: 100%;
  outline: none;
  color: #5e6d55;
  background-color: #fff;
  border: 1px solid rgba(153, 156, 166, 0.6);
  border-radius: 10px;
  padding: 10px 20px;
  transition: 0.6s;
  width: 100%;
}

.field-poll__input textarea,
.field-poll__wrapper textarea {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #5e6d55;
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  resize: none;
}

.field-poll__wrapper {
  height: 150px;
}

.checkboxes {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .checkboxes {
    grid-template-columns: repeat(1, 1fr);
  }
}

.checkbox {
  position: relative;
}

.checkbox input[type=checkbox],
.checkbox input[type=radio] {
  display: none;
}

.checkbox input[type=checkbox] + .checkbox__title,
.checkbox input[type=radio] + .checkbox__title {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #5E6D55;
  padding-left: 28px;
  cursor: pointer;
  transition: 0.4s;
}

.checkbox input[type=checkbox] + .checkbox__title--inline,
.checkbox input[type=radio] + .checkbox__title--inline {
  display: inline;
  line-height: 130%;
}

.checkbox input[type=checkbox] + .checkbox__title::before,
.checkbox input[type=checkbox] + .checkbox__title::after,
.checkbox input[type=radio] + .checkbox__title::before,
.checkbox input[type=radio] + .checkbox__title::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transition: 0.4s;
}

.checkbox input[type=checkbox] + .checkbox__title::before,
.checkbox input[type=radio] + .checkbox__title::before {
  border: 1.5px solid rgba(94, 109, 85, 0.4);
  background-color: #FFFFFF;
}

.checkbox input[type=checkbox] + .checkbox__title::after,
.checkbox input[type=radio] + .checkbox__title::after {
  background-image: url("/img/check.svg");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
  width: 10px;
  height: 10px;
  left: 4px;
  top: 3.5px;
}

.checkbox input[type=checkbox] + .checkbox__title:hover::before,
.checkbox input[type=radio] + .checkbox__title:hover::before {
  border: 1.5px solid #98b000;
}

.checkbox input[type=checkbox]:checked + .checkbox__title::before,
.checkbox input[type=radio]:checked + .checkbox__title::before {
  border: 1.5px solid #98b000;
  background-color: #98b000;
}

.section-title {
  text-align: center;
  padding: 5rem 0 6rem;
  position: relative;
}

.section-title::after {
  content: "";
  height: 1px;
  background: #e0c4ee;
  width: 100%;
  display: block;
  position: absolute;
  top: 6rem;
}

.section-title .title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2.4rem;
  background: #fff;
  padding: 0 1rem;
  z-index: 1;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

.section-title.background-secondary .title {
  background-color: #f8f3fa;
}

.breadcrumbs {
  background-color: #f8f3fa;
  padding: 1rem 0;
}

.breadcrumbs ul {
  display: flex;
}

@media (max-width: 37.5em) {
  .breadcrumbs ul {
    display: inline-block;
  }
}

@media (max-width: 37.5em) {
  .breadcrumbs ul li {
    display: inline-block;
  }
}

.breadcrumbs ul li a {
  color: #6b298a;
}

.breadcrumbs ul li::after {
  content: "/";
  padding: 0 0.4rem;
}

.breadcrumbs ul li:last-child::after {
  content: "";
}

.show-more {
  text-align: center;
}

.show-more button {
  border: 1px solid #98b000;
  color: #3d3d3d;
  padding: 1rem 2.6rem;
  border-radius: 3rem;
  transition: all 0.3s ease;
}

.show-more button:hover {
  cursor: pointer;
  background: #98b000;
  color: #fff;
}

.shadow {
  display: inline-block;
  height: 8rem;
  margin-top: -8rem;
  width: 100%;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8f3fa+0,f8f3fa+100&0+0,1+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(248, 243, 250, 0) 0%, #f8f3fa 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00f8f3fa", endColorstr="#f8f3fa",GradientType=0 );
  /* IE6-9 */
}

.shadow.toggle-active {
  display: none;
}

.seo-text {
  height: 20rem;
  overflow: hidden;
  margin-bottom: 1.8rem;
  transition: all 0.3s ease;
}

.seo-text.toggle-active {
  height: auto;
}

@media (max-width: 37.5em) {
  .seo-text iframe {
    width: 100% !important;
  }

  .seo-text h2 {
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }
}

.seo-text p {
  margin-bottom: 1.5rem;
}

.seo-text ul {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.seo-text ul li {
  list-style: disc;
}

.color-gradient-0 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dddddd+0,ffffff+100&1+0,0+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #dddddd 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#dddddd", endColorstr="#00ffffff",GradientType=1 );
  /* IE6-9 */
}

.color-gradient-1 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#afd2b8+0,ffffff+100&1+0,0+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #afd2b8 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#afd2b8", endColorstr="#00ffffff",GradientType=1 );
  /* IE6-9 */
}

.color-gradient-2 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffe7aa+0,ffffff+100&1+0,0+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #ffe7aa 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffe7aa", endColorstr="#00ffffff",GradientType=1 );
  /* IE6-9 */
}

.color-gradient-3 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8a2ad+0,ffffff+100&1+0,0+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #f8a2ad 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f8a2ad", endColorstr="#00ffffff",GradientType=1 );
  /* IE6-9 */
}

.color-gradient-4 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bcdaff+0,ffffff+100&1+0,0+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #bcdaff 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#bcdaff", endColorstr="#00ffffff",GradientType=1 );
  /* IE6-9 */
}

.youtube-video {
  position: relative;
  text-align: center;
  height: 315px;
  width: 100%;
}

.youtube-video img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}

.youtube-video .play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  background: #f00;
  border-radius: 50%/10%;
  font-size: 2em;
  color: #ffffff;
  padding: 0;
  border: none;
  text-align: center;
  text-indent: 0.1em;
  transition: all 400ms ease-out;
  cursor: pointer;
  z-index: 5;
}

.youtube-video .play::after {
  content: " ";
  position: absolute;
  height: 0;
  width: 0;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent white;
}

.youtube-video .play::before {
  content: "";
  position: absolute;
  right: -5%;
  top: 9%;
  bottom: 9%;
  left: -5%;
  background: inherit;
  border-radius: 5%/50%;
}

.course-card {
  display: flex;
  flex-direction: column;
  position: relative;
  color: #3d3d3d;
  width: 34rem;
  margin: 0 auto 5rem;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .course-card {
    width: 100%;
  }
}

.course-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b298a;
  font-size: 2.2rem;
  text-align: center;
  line-height: 1.4;
  font-weight: bold;
  text-transform: uppercase;
  padding: 2.5rem 2rem;
  border-bottom: 1px solid #e0c4ee;
}

.course-card__list {
  padding: 2.2rem 4rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid #e0c4ee;
}

.course-card__list ul {
  display: flex;
  flex-direction: column;
}

.course-card__list ul li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.5rem;
}

.course-card__list ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: #98b000;
  display: inline-block;
  border-radius: 4px;
}

.course-card__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.course-card__prices {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 2rem;
}

.course-card__btn {
  max-width: 135px;
  margin: 0 auto;
  font-weight: 700;
  font-size: 1.6rem;
  border-radius: 2rem;
  padding: 1rem 2rem;
  height: 37px;
}

.course-card__btn:hover {
  background-color: #98b000;
  color: #fff !important;
}

.course-card__text {
  padding: 0rem 2rem 1rem;
  text-align: center;
}

.course-card__remember {
  padding: 2rem 4rem;
  text-align: center;
}

.course-card__remember span {
  font-weight: 600;
}

.list {
  display: flex;
  flex-direction: column;
}

.list__item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.5rem;
}

.list__item::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: #98b000;
  display: inline-block;
  border-radius: 4px;
}

.price-course {
  position: relative;
  left: -1rem;
  padding-top: 15px;
}

.price-course::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 1rem solid #98b000;
  border-left: 1rem solid transparent;
}

.price-course__label {
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  color: #fff;
  position: absolute;
  top: 0;
  background-color: #e42218;
  padding: 5px 10px 5px 15px;
  clip-path: polygon(0% 0%, 100% 0, 95% 50%, 100% 100%, 0% 100%);
  z-index: 2;
}

.price-course__content {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #6b298a;
  height: 6rem;
  width: 90%;
}

.price-course__number {
  position: relative;
  font-weight: 700;
  font-size: 2rem;
  width: 52%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.price-course__number::after {
  content: "";
  width: 3rem;
  background: linear-gradient(107deg, #6b298a 45%, #fff 51%, #6b298a 53%);
  height: 100%;
  position: absolute;
  right: -0.7rem;
}

.price-course__count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1rem;
  color: #6b298a;
  background-color: #fff;
  border-radius: 1.3rem;
  margin-left: 1rem;
}

.price-course__text {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40%;
}

.price-course__corner {
  position: absolute;
  width: 0;
  height: 0;
  right: -2rem;
  border-right: 2rem solid transparent;
  margin-right: 1px;
}

.price-course__corner--top {
  top: 0;
  border-top: 3rem solid #6b298a;
}

.price-course__corner--bottom {
  bottom: 0;
  border-bottom: 3rem solid #6b298a;
}

.iti {
  width: 100%;
}

.iti__flag {
  background-image: url "path/to/flags.png";
}

@media (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url "path/to/flags@2x.png";
  }
}

.free-lesson-card {
  position: relative;
  padding-left: 72px;
  cursor: pointer;
}

@media (max-width: 75em) {
  .free-lesson-card {
    padding-left: 66px;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-card {
    padding-left: 44px;
  }
}

.free-lesson-card input {
  position: absolute;
  opacity: 0;
}

.free-lesson-card input ~ .free-lesson-card__choose {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 134px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  box-shadow: 0 0 0 1px inset rgba(210, 210, 210, 0.1);
  cursor: pointer;
  transition: 0.6s;
}

@media (max-width: 75em) {
  .free-lesson-card input ~ .free-lesson-card__choose {
    width: 100px;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-card input ~ .free-lesson-card__choose {
    height: 82px;
    bottom: initial;
  }
}

.free-lesson-card input ~ .free-lesson-card__choose::before,
.free-lesson-card input ~ .free-lesson-card__choose::after {
  content: "";
  position: absolute;
  cursor: pointer;
  transition: 0.4s;
}

.free-lesson-card input ~ .free-lesson-card__choose::before {
  background-image: url("/img/check-white-lg.png");
  background-repeat: no-repeat;
  background-size: 28px 28px;
  width: 28px;
  height: 28px;
  left: 22px;
  opacity: 0;
}

@media (max-width: 37.5em) {
  .free-lesson-card input ~ .free-lesson-card__choose::before {
    left: 14px;
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
}

.free-lesson-card input ~ .free-lesson-card__choose::after {
  content: "";
  position: absolute;
  left: 25px;
  width: 22px;
  height: 22px;
  border: 1px solid #9f9f9f;
  opacity: 1;
}

@media (max-width: 37.5em) {
  .free-lesson-card input ~ .free-lesson-card__choose::after {
    width: 14px;
    height: 14px;
    left: 16px;
  }
}

.free-lesson-card input ~ .free-lesson-card__choose:hover {
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px inset rgba(210, 210, 210, 0.3);
}

.free-lesson-card input ~ .free-lesson-card__choose:hover::after {
  border-color: #fff;
}

.free-lesson-card input ~ .free-lesson-card__content {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 215px 1fr auto;
  gap: 25px;
  background-color: #6b298a;
  border-radius: 15px;
  padding: 22px 30px 22px 25px;
  box-shadow: 0 0 0 1px inset #fff;
  z-index: 2;
  transition: 0.6s;
}

@media (max-width: 75em) {
  .free-lesson-card input ~ .free-lesson-card__content {
    gap: 20px;
    padding: 22px;
    grid-template-columns: 200px minmax(140px, 1fr) auto;
  }
}

@media (max-width: 56.25em) {
  .free-lesson-card input ~ .free-lesson-card__content {
    grid-template-columns: 200px 1fr;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-card input ~ .free-lesson-card__content {
    grid-template-columns: 130px 1fr;
    padding: 14px 10px 10px;
    gap: 15px;
  }
}

.free-lesson-card input ~ .free-lesson-card__content:hover {
  box-shadow: 0 0 0 2px inset #98b000;
}

.free-lesson-card input ~ .free-lesson-card__content::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("/img/rectangle-arrow.png");
  background-repeat: no-repeat;
  background-size: 30px 80px;
  width: 30px;
  height: 80px;
  opacity: 0;
  transition: 0.6s;
}

@media (max-width: 37.5em) {
  .free-lesson-card input ~ .free-lesson-card__content::before {
    background-size: 18px 48px;
    width: 18px;
    height: 48px;
    top: initial;
    transform: translateY(0);
    bottom: 14px;
  }
}

.free-lesson-card input:checked ~ .free-lesson-card__choose {
  background-color: #98b000;
  box-shadow: 0 0 0 2px inset #98b000;
}

.free-lesson-card input:checked ~ .free-lesson-card__choose::before {
  opacity: 1;
}

.free-lesson-card input:checked ~ .free-lesson-card__choose::after {
  opacity: 0;
}

.free-lesson-card input:checked ~ .free-lesson-card__content {
  box-shadow: 0 0 0 2px inset #98b000;
}

.free-lesson-card input:checked ~ .free-lesson-card__content::before {
  opacity: 1;
}

.free-lesson-card__photo {
  position: relative;
  width: 215px;
  height: 100px;
}

@media (max-width: 75em) {
  .free-lesson-card__photo {
    width: 200px;
    height: 78px;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-card__photo {
    width: 130px;
    height: 50px;
  }
}

.free-lesson-card__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 1;
  transition: 0.6s;
}

.free-lesson-card__img:last-child {
  opacity: 0;
}

.free-lesson-card__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
}

@media (max-width: 75em) {
  .free-lesson-card__title {
    font-size: 22px;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-card__title {
    font-size: 14px;
    text-align: left;
  }
}

.free-lesson-card__text {
  display: flex;
  flex-direction: column;
  background-color: #98b000;
  border-radius: 10px;
  padding: 10px 20px;
}

@media (max-width: 75em) {
  .free-lesson-card__text {
    padding: 8px 18px;
  }
}

@media (max-width: 56.25em) {
  .free-lesson-card__text {
    grid-column: span 2;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-card__text {
    padding: 5px 10px 5px 12px;
  }
}

.free-lesson-card__text p {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

@media (max-width: 75em) {
  .free-lesson-card__text p {
    font-size: 22px;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-card__text p {
    font-size: 14px;
  }
}

.free-lesson-card__text p span {
  text-transform: uppercase;
}

.free-lesson-card.checked .free-lesson-card__img:first-child {
  opacity: 0;
}

.free-lesson-card.checked .free-lesson-card__img:last-child {
  opacity: 1;
}

.field-lesson {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-lesson__label {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: #98b000;
}

@media (max-width: 56.25em) {
  .field-lesson__label {
    font-size: 16px;
  }
}

.field-lesson__label > span {
  font-weight: 400;
  color: #ff3b30;
  padding-left: 5px;
}

.field-lesson input {
  font-family: "Inter", sans-serif;
  width: 100%;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: #3d3d3d;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-radius: 10px;
}

@media (max-width: 56.25em) {
  .field-lesson input {
    font-size: 16px;
  }
}

.field-lesson input:-webkit-autofill {
  -webkit-text-fill-color: #3d3d3d !important;
  -webkit-box-shadow: 0 0 0 50px #fff inset !important;
  -webkit-background-clip: text;
}

.field-lesson input:-webkit-autofill:focus,
.field-lesson input:-webkit-autofill::first-line {
  -webkit-text-fill-color: #3d3d3d !important;
  -webkit-box-shadow: 0 0 0 50px #fff inset !important;
  font-size: 16px;
}

.field-lesson input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 50px #fff inset !important;
}

.field-lesson .iti__selected-flag {
  padding: 0 10px;
  border-right: 1px solid #d3d3d3;
}

.field-lesson .iti--allow-dropdown input[type=tel] {
  padding-left: 65px;
}

@media (max-width: 56.25em) {
  .field-lesson .iti--allow-dropdown input[type=tel] {
    font-size: 16px;
  }
}

.field-lesson .iti__arrow {
  margin-left: 10px;
}

.select-lesson .select2 {
  width: 100% !important;
}

.select-lesson .select2-container--default .select2-selection--single {
  border: 1px solid #d3d3d3;
  border-radius: 10px;
}

.select-lesson .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: "Inter", sans-serif;
  line-height: 1;
  color: #3d3d3d;
}

.select-lesson .select2-container--default .select2-selection--single .select2-selection__arrow {
  position: absolute;
  width: 38px;
  height: 100%;
  top: 0;
  left: 0;
  right: initial;
  border-right: 1px solid #d3d3d3;
}

.select-lesson .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-width: 5px 4px 0 4px;
  border-color: #3d3d3d transparent transparent transparent;
  margin: 0;
  top: 16px;
  left: 15px;
}

.select-lesson .select2-container .select2-selection--single {
  height: 37px;
}

.select-lesson .select2-container .select2-selection--single .select2-selection__rendered {
  font-weight: 400;
  font-size: 18px;
  padding: 8px 52px;
}

@media (max-width: 56.25em) {
  .select-lesson .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16px;
  }
}

.select2-container--open .select2-dropdown--above {
  border-radius: 10px 10px 0 0 !important;
}

.select2-container .select2-dropdown {
  border: 1px solid #d3d3d3;
  border-radius: 0 0 10px 10px;
}

.select2-results__option {
  font-weight: 400;
  font-size: 16px;
  padding: 8px 10px;
  background-color: #fff;
  transition: 0.6s;
  cursor: pointer;
}

.select2-results__option--highlighted {
  background-color: #d2d2d2;
}

.select2-search__field {
  font-size: 16px !important;
  line-height: 1.2 !important;
  padding: 8px !important;
  border-radius: 6px !important;
  border: 1px solid #d3d3d3 !important;
}

.floating-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid rgba(107, 41, 138, 0.2);
  z-index: 1000;
  transition: 0.4s;
}

@media (max-width: 37.5em) {
  .floating-btn {
    bottom: 8px;
    right: 8px;
  }
}

.floating-btn:hover {
  background-color: rgba(107, 41, 138, 0.1);
}

.floating-btn img {
  width: 28px;
  height: 28px;
}

.card-vacancies {
  padding: 30px 16px 20px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.12);
}

.card-vacancies__title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  text-align: center;
  color: #6b298a;
  text-transform: uppercase;
  padding: 0 20px;
}

.card-vacancies__btn {
  position: relative;
  margin-top: 52px;
  text-transform: uppercase;
}

.card-vacancies__btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -25px;
  height: 1px;
  width: 100%;
  background-color: #e0c4ee;
}

.block-vacancies {
  display: grid;
  gap: 20px;
}

@media (max-width: 37.5em) {
  .block-vacancies {
    gap: 15px;
  }
}

.block-vacancies__title {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #6b298a;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #fff;
}

.block-vacancies__title::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background-color: #e0c4ee;
}

.block-vacancies__text,
.block-vacancies ul > li,
.block-vacancies p {
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.57 !important;
}

.block-vacancies ul {
  display: grid;
  gap: 12px;
}

.block-vacancies ul li {
  position: relative;
  padding-left: 15px;
}

.block-vacancies ul li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #98b000;
}

footer {
  background-color: #6b298a;
  width: 100%;
  margin: auto 0 0 0;
}

@media (max-width: 37.5em) {
  footer {
    height: auto;
    position: initial;
    bottom: initial;
  }
}

footer .btn-site {
  margin: 10px 10px 0 0;
  width: 100% !important;
}

footer .inner {
  display: flex;
  position: relative;
  padding: 4rem 0 0 0;
}

@media (max-width: 37.5em) {
  footer .inner {
    padding: 4rem 0;
    display: block;
    text-align: center;
  }
}

footer .image {
  position: relative;
  width: 36rem;
  height: 37rem;
}

@media (max-width: 37.5em) {
  footer .image {
    display: none;
  }
}

footer .image img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36rem;
  height: 37rem;
}

footer .links {
  width: 50rem;
  display: flex;
  border-right: 1px solid #a34ecb;
}

@media (max-width: 37.5em) {
  footer .links {
    display: block;
    width: 100%;
    margin: 0;
    border: none;
  }
}

footer .links .links-list {
  width: 33.3%;
}

@media (max-width: 37.5em) {
  footer .links .links-list {
    display: block;
    width: 100%;
    margin-bottom: 5rem;
  }
}

footer .links .links-list:last-child {
  margin-right: 10px;
}

footer .links .links-list.languages {
  padding-left: 2rem;
}

@media (max-width: 37.5em) {
  footer .links .links-list.languages {
    padding: 0;
  }
}

footer .links .links-list li {
  margin-bottom: 0.3rem;
}

@media (max-width: 37.5em) {
  footer .links .links-list li {
    margin-bottom: 1rem;
  }
}

footer .links .links-list.info ul:nth-child(2) {
  margin-bottom: 2rem;
}

footer .links .links-list.info a {
  color: #fff;
  text-decoration: none;
  display: block;
  position: relative;
}

@media (max-width: 37.5em) {
  footer .links .links-list.info a {
    display: inline-block;
    width: 13rem;
  }
}

footer .links .links-list.info a.viber-phone::before {
  content: "";
  background: url("/img/viber.png");
  width: 1.8rem;
  height: 1.8rem;
  display: inline-block;
  background-size: 100%;
  position: absolute;
  left: -2.5rem;
  top: 0.4rem;
}

footer .links .links-list.info a.telegram-phone::before {
  content: "";
  background-image: url("/img/telegram-white.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  width: 2.5rem;
  height: 1.7rem;
  display: inline-block;
  position: absolute;
  left: -2.5rem;
  top: 0.2rem;
}

footer .links .links-list.info a.cell-phone {
  /*&::before {
      content: "";
      background: url('/img/phone-icon.webp');
      width: 1.8rem;
      height: 1.8rem;
      display: inline-block;
      background-size: 100%;
      position: absolute;
      left: -2.5rem;
      top: 0.4rem;
  }*/
}

footer .links .title {
  color: #98b000;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

footer .links a {
  transition: all 0.3s ease;
  text-decoration: none;
  color: #3d3d3d;
  color: #fff;
}

footer .links a:focus,
footer .links a:visited {
  text-decoration: none;
  color: #fff;
}

footer .links a:hover {
  cursor: pointer;
  color: #98b000;
  text-decoration: none;
}

footer .social {
  padding-left: 2rem;
}

@media (max-width: 37.5em) {
  footer .social {
    margin-bottom: 0;
  }
}

footer .social .logo {
  width: 23rem;
  text-align: center;
  padding-bottom: 3rem;
}

@media (max-width: 37.5em) {
  footer .social .logo {
    display: none;
  }
}

footer .social .logo img {
  width: auto;
  height: auto;
}

footer .social .icons {
  display: flex;
  flex-wrap: wrap;
}

footer .social .icons a {
  width: 20%;
  text-align: center;
  margin-bottom: 2rem;
}

footer .social .icons a img {
  width: 27px;
  height: 27px;
  transition: all 0.3s ease;
}

footer .social .icons a:hover img {
  opacity: 0.5;
}

footer .account {
  cursor: pointer;
}

.copyright {
  text-align: center;
  padding: 2rem 0;
  background-color: #ad62d0;
  color: #fff;
}

.header {
  background-color: #fff;
  -o-box-shadow: 0 1px 7px 0 rgba(50, 50, 50, 0.25);
  box-shadow: 0 1px 7px 0 rgba(50, 50, 50, 0.25);
  position: fixed;
  z-index: 20;
  top: 0;
  width: 100%;
}

.header .main-wrapper {
  position: relative;
  background: white;
}

.header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 10rem;
}

@media (max-width: 37.5em) {
  .header .inner {
    height: 6.2rem;
  }

  .header .inner.bottom {
    gap: 5px;
    background: #ececec;
  }

  .header .inner.bottom .inner-bottom .currency-switch {
    padding-left: 1rem;
    justify-content: flex-start;
  }

  .header .inner.bottom .inner-bottom .currency-switch a {
    color: #6b298a;
  }

  .header .inner.bottom .inner-bottom .currency-switch a:hover,
  .header .inner.bottom .inner-bottom .currency-switch a:focus,
  .header .inner.bottom .inner-bottom .currency-switch a:visited {
    color: #6b298a;
  }

  .header .inner.bottom .inner-bottom .currency-switch > * {
    margin-right: 0.75rem;
  }

  .header .inner.bottom .phone {
    margin-left: 4.5rem;
  }

  .header .inner.bottom .phone a {
    font-size: 1.8rem;
    font-weight: 700;
    color: #6b298a;
    position: relative;
    line-height: 2rem;
    display: inline-block;
  }

  .header .inner.bottom .phone a:visited {
    color: #6b298a;
  }

  .header .inner.bottom .phone a.telegram-phone::before {
    content: "";
    background: url("/img/telegram.svg");
    width: 1.8rem;
    height: 1.8rem;
    display: inline-block;
    background-size: 100%;
    position: absolute;
    left: -2.5rem;
    top: 0.2rem;
  }

  .header .inner.bottom .bottom-right {
    display: flex;
    gap: 6px;
    margin-right: 2rem;
  }

  .header .inner.bottom .bottom-right__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #fff;
    background: #98b000;
    border-radius: 2.6rem;
    padding: 1rem;
    text-transform: uppercase;
    transition: 0.4s;
  }

  .header .inner.bottom .bottom-right__btn:visited {
    color: #fff;
  }

  .header .inner.bottom .bottom-right__btn:hover {
    background: #6b298a;
    color: #fff;
  }

  .header .inner.bottom .bottom-right__btn--violet {
    background: #6b298a;
  }

  .header .inner.bottom .bottom-right__btn--violet:hover {
    background-color: #98b000;
  }

  .header .inner .misc {
    display: flex;
    align-items: center;
  }

  .header .inner .menu-tests {
    font-size: 2rem;
    color: #6b298a;
    position: relative;
    margin-right: 3rem;
    text-transform: lowercase;
  }

  .header .inner .menu-lang,
  .header .inner .menu-about,
  .header .inner .menu-course {
    font-size: 2rem;
    color: #6b298a;
    position: relative;
    margin-right: 3rem;
  }

  .header .inner .menu-lang::after,
  .header .inner .menu-about::after,
  .header .inner .menu-course::after {
    content: "";
    width: 11px;
    height: 6px;
    background: url("/img/arrow-green-down.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    position: absolute;
    top: 9px;
    right: -15px;
  }

  .header .inner .lang {
    margin-left: 1rem;
  }

  .header .inner .account {
    margin-left: 2rem;
  }

  .header .inner .menu-mobile-button {
    display: block;
    width: 25px;
    height: 20px;
    margin-right: 2rem;
    margin-left: 2rem;
  }

  .header .inner .menu-mobile-button span {
    width: 100%;
    height: 2px;
    background: #6b298a;
    border-radius: 1px;
    margin-bottom: 6px;
    display: block;
  }

  .header .inner .menu-mobile-button span:last-child {
    margin-bottom: 0;
  }
}

.header .logo {
  width: 20rem;
}

@media (max-width: 37.5em) {
  .header .logo {
    width: auto;
  }
}

.header .logo a {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  line-height: 1.9rem;
  text-decoration: none;
  color: #3d3d3d;
}

.header .logo a:focus,
.header .logo a:visited {
  text-decoration: none;
  color: #3d3d3d;
}

.header .logo a:hover {
  cursor: pointer;
  color: #3d3d3d;
  text-decoration: none;
}

.header .logo a img {
  margin-right: 1rem;
  width: 60px;
  height: 68px;
}

@media (max-width: 37.5em) {
  .header .logo a img {
    width: 4rem;
    height: auto;
    margin-left: 2rem;
  }
}

.header .menu {
  max-width: 48rem;
}

.header .menu ul {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 16px;
       column-gap: 16px;
  row-gap: 12px;
  justify-content: center;
  max-width: 480px;
  margin-inline: auto;
}

.header .menu ul li {
  list-style: none;
  text-transform: uppercase;
  margin-right: 2.7rem;
  font-size: 1.5rem;
  position: relative;
  white-space: nowrap;
}

.header .menu ul li:last-child {
  margin-right: 0;
}

.header .menu ul li a {
  text-decoration: none;
  color: #3d3d3d;
}

.header .menu ul li a:focus,
.header .menu ul li a:visited {
  text-decoration: none;
  color: #3d3d3d;
}

.header .menu ul li a:hover {
  cursor: pointer;
  color: #6b298a;
  text-decoration: none;
}

.header .menu ul li.menu-item-tests,
.header .menu ul li.menu-item-contacts {
  margin-right: 14px;
}

.header .menu ul li.dropdown::after {
  content: "";
  width: 11px;
  height: 6px;
  background: url("/img/arrow-green-down.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  position: absolute;
  top: 9px;
  right: -15px;
}

.header .contacts {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px 0;
}

.header .contacts .btn-site {
  text-transform: uppercase;
}

.header .contacts .phones {
  display: block;
  margin: 0 1rem;
}

.header .contacts .phones a {
  position: relative;
  font-size: 1.6rem;
  color: #6b298a;
  display: block;
  text-decoration: none;
  padding-left: 2.5rem;
}

.header .contacts .phones a.viber-phone::before {
  content: "";
  background: url("/img/viber-violet.png");
  width: 1.8rem;
  height: 1.8rem;
  display: inline-block;
  background-size: 100%;
  position: absolute;
  left: -2.5rem;
  top: 0.4rem;
}

.header .contacts .phones a.telegram-phone::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 2.5rem;
  height: 1.8rem;
  display: block;
  background: url("/img/telegram.svg") no-repeat top left;
  background-size: auto 100%;
}

.header .contacts .phones .show-more-phones {
  border: none;
  background: none;
  position: relative;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #3d3d3d;
}

.header .contacts .phones .show-more-phones:focus,
.header .contacts .phones .show-more-phones:visited {
  text-decoration: none;
  color: #3d3d3d;
}

.header .contacts .phones .show-more-phones:hover {
  cursor: pointer;
  color: #6b298a;
  text-decoration: none;
}

.header .contacts .phones .show-more-phones::after {
  content: "";
  width: 11px;
  height: 6px;
  background: url("/img/arrow-green-down.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  position: absolute;
  top: 10px;
  right: -20px;
}

.header .contacts .phones .callback {
  border: none;
  background: none;
  border-bottom: 1px solid #6b298a;
  font-weight: 700;
  color: #6b298a;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.header .contacts .phones .callback:hover {
  cursor: pointer;
  color: #98b000;
  border-bottom: 1px solid #98b000;
}

.header .contacts .request {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: span 2;
  grid-row: 2/3;
}

.header .contacts .request .free-lesson {
  background: #fff;
  border: 1px solid #98b000;
  border-radius: 2rem;
  font-weight: 700;
  color: #6b298a;
  font-size: 1.3rem;
  padding: 0.7rem 1.2rem;
  text-transform: uppercase;
  display: block;
  transition: all 0.3s ease;
}

.header .contacts .request .free-lesson:hover {
  cursor: pointer;
  background: #98b000;
  color: #fff;
}

.header .spacer {
  background-color: #d6d6d6;
  width: 1px;
  height: 50px;
}

.header .account:hover {
  cursor: pointer;
}

.header .lang a {
  display: block;
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  color: #3d3d3d;
}

.header .lang a:focus,
.header .lang a:visited {
  text-decoration: none;
  color: #6b298a;
}

.header .lang a:hover {
  cursor: pointer;
  color: #98b000;
  text-decoration: none;
}

.header .lang a.active {
  color: #98b000;
}

.currency-switch {
  font-weight: 700;
  font-size: 1.2rem;
  color: #3d3d3d;
  display: flex;
  justify-content: space-around;
}

@media (max-width: 37.5em) {
  .currency-switch {
    padding-top: 1rem;
  }
}

.currency-switch a {
  color: #6b298a;
}

.currency-switch a:focus,
.currency-switch a:visited {
  color: #6b298a;
}

.currency-switch a:hover {
  color: #98b000;
}

@media (max-width: 37.5em) {
  .currency-switch a {
    font-size: 1.3rem !important;
  }
}

.currency-switch a.active {
  color: #98b000;
}

.section-top-banner {
  width: 100%;
  background: url("/img/words-map.webp") #6b298a;
  background-repeat: no-repeat;
  background-position: center;
}

.section-top-banner .banner {
  height: 47.5rem;
  display: flex;
}

.section-top-banner .banner .block-text {
  width: 55%;
  text-align: center;
}

@media (max-width: 37.5em) {
  .section-top-banner .banner .block-text {
    width: 100%;
  }
}

.section-top-banner .banner .block-text .title {
  font-size: 5.6rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  margin-top: 8rem;
}

@media (max-width: 37.5em) {
  .section-top-banner .banner .block-text .title {
    font-size: 4rem;
  }
}

.section-top-banner .banner .block-text .title p {
  line-height: 5.5rem;
}

.section-top-banner .banner .block-text .button {
  margin-top: 3rem;
}

.section-top-banner .banner .block-text .button .banner-button {
  background: none;
  border: 1px solid #fff;
  border-radius: 3rem;
  color: #fff;
  padding: 2rem 4rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  font-size: 1.6rem;
  transition: all 0.3s ease;
}

.section-top-banner .banner .block-text .button .banner-button:hover {
  background: #98b000;
  color: #fff;
  border: 1px solid #98b000;
  cursor: pointer;
}

.section-top-banner .banner .block-text .subtitle {
  color: #fff;
  margin-top: 3rem;
}

.section-top-banner .banner .block-text .subtitle .free-lesson {
  border-bottom: 2px dotted #cc9de2;
  font-weight: 700;
  font-size: 1.7rem;
  color: #fff;
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .section-top-banner .banner .block-text .subtitle .free-lesson {
    line-height: 4rem;
  }
}

.section-top-banner .banner .block-text .subtitle .free-lesson:hover {
  cursor: pointer;
  color: #98b000;
}

.section-top-banner .banner .block-text .subtitle .free-lesson:hover .green {
  color: #fff;
}

.section-top-banner .banner .block-text .subtitle .free-lesson .green {
  text-transform: uppercase;
  font-size: 2.2rem;
  transition: all 0.3s ease;
}

@media (max-width: 37.5em) {
  .section-top-banner .banner .block-text .subtitle .free-lesson .green {
    display: block;
  }
}

.section-top-banner .banner .block-image {
  width: 45%;
  position: relative;
}

@media (max-width: 37.5em) {
  .section-top-banner .banner .block-image {
    display: none;
  }
}

.section-top-banner .banner .block-image img {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: auto;
  height: auto;
}

.section-pricing .inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.section-languages {
  padding-bottom: 5rem;
}

.section-languages .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.section-about-us .text {
  text-align: justify;
}

.section-about-us .image {
  width: 100%;
  height: 50rem;
  position: relative;
}

@media (max-width: 37.5em) {
  .section-about-us .image {
    height: auto;
    padding: 2rem 0;
  }
}

.section-about-us .image img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 37.5em) {
  .section-about-us .image img {
    position: relative;
    width: 100%;
    height: auto;
  }
}

.section-about-us-extra {
  padding: 8rem 0;
}

@media (max-width: 37.5em) {
  .section-about-us-extra {
    padding: 4rem 0;
  }
}

.schedule {
  padding: 1.5rem;
}

.schedule .hour-leave {
  background-color: #fbfb7c;
}

.schedule .hour-holiday {
  background-color: #ffd589;
}

.schedule .hour-hospital {
  background-color: #afafff;
}

.schedule .control-row-wrapper {
  background: #fff;
}

@media (max-width: 37.5em) {
  .schedule .control-row-wrapper {
    position: fixed;
    z-index: 5;
    width: calc(100% - 3rem);
    padding: 1.5rem 0;
    top: 0;
  }
}

.schedule .control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.schedule .teacher-name {
  display: flex;
  align-items: center;
  align-content: center;
}

.schedule .teacher-name .name {
  margin-right: 1.5rem;
}

.schedule .teacher-name button {
  font-size: 1.3rem;
}

.schedule .show-week {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.schedule .show-week a {
  font-size: 1.3rem;
  margin-right: 1rem;
}

.schedule .show-week a:last-child {
  margin-right: 0;
}

@media (max-width: 37.5em) {
  .schedule .show-week a {
    font-size: 1.6rem;
  }
}

.schedule .legend {
  display: flex;
  margin-bottom: 1rem;
}

@media (max-width: 37.5em) {
  .schedule .legend {
    flex-direction: column;
  }
}

.schedule .legend .block {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
}

.schedule .legend .block span {
  margin-right: 0.5rem;
}

.schedule .legend .color {
  width: 1.3rem;
  height: 1.3rem;
  border: 0.1rem solid #ccc;
}

.programs-wrapper {
  display: flex;
}

.programs-wrapper .sidebar-js-tree {
  width: 450px;
  margin-right: 20px;
}

.programs-wrapper .content-js-tree {
  width: calc(100% - 470px);
}

.programs-wrapper .row-jstree {
  display: flex;
  background: #dcdfe5;
  padding: 20px;
  width: 100%;
}

.programs-wrapper .col-jstree {
  width: 100%;
}

.programs-wrapper .col-jstree-content {
  width: 100%;
}

.schedule-calendar-wrapper {
  overflow: scroll;
  height: calc(100vh - 15rem);
}

@media (max-width: 37.5em) {
  .schedule-calendar-wrapper {
    overflow: initial;
    height: auto;
    margin-top: 21rem;
  }
}

.schedule-calendar-wrapper .schedule-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1.5rem;
}

@media (max-width: 37.5em) {
  .schedule-calendar-wrapper .schedule-row {
    flex-direction: column;
  }
}

.schedule-calendar-wrapper .schedule-row:last-child {
  justify-content: flex-start;
}

.schedule-calendar-wrapper .schedule-row > div {
  box-sizing: border-box;
  width: 13%;
  min-width: 21.5rem;
  margin-right: 2.2rem;
}

@media (max-width: 37.5em) {
  .schedule-calendar-wrapper .schedule-row > div {
    width: 100%;
    margin: 0 0 1rem;
  }
}

.schedule-calendar-wrapper .schedule-row .calendar-day {
  background: #E2E7F7;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .header-account {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-weight: 700;
  color: #515151;
  background: lightgrey;
  padding: 0.3rem 1.5rem;
  align-items: center;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .header-account > div {
  width: 33.333%;
  text-align: center;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .header-account .date-number {
  font-size: 2rem;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body {
  min-height: 300px;
  padding: 1rem;
  height: auto;
  overflow: hidden;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item {
  font-size: 1.2rem;
  padding: 0.2rem 1.1rem;
  border-bottom: 0.1rem solid #C5C5C5;
  position: relative;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .sub-teacher-event {
  position: absolute;
  z-index: 1;
  background: orange;
  bottom: 0;
  height: 21px;
  left: 50%;
  text-align: center;
  width: 50%;
  transform: translate(-50%, 0);
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .top {
  display: flex;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .bottom {
  position: relative;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .bottom i.approved-icon {
  position: absolute;
  z-index: 1;
  right: 6px;
  font-size: 17px;
  top: -16px;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .bottom i.approved-icon i {
  position: absolute;
  right: -8px;
  top: -3px;
  font-size: 19px;
}

@media (max-width: 37.5em) {
  .schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item {
    padding: 1rem;
  }
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item:last-child {
  border: none;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item:hover {
  cursor: pointer;
  filter: brightness(90%);
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .group {
  width: 50%;
  display: flex;
  align-content: center;
  align-items: center;
  position: relative;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .group i.approved-icon {
  position: absolute;
  z-index: 1;
  right: 0;
  font-size: 17px;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .group i.approved-icon i {
  position: absolute;
  right: -8px;
  top: -3px;
  font-size: 19px;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .group .direction {
  width: 1.5rem;
  display: flex;
  margin-right: 0.4rem;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .group .direction img {
  width: 100%;
  height: auto;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .start {
  width: 20%;
  text-align: center;
}

.schedule-calendar-wrapper .schedule-row .calendar-day .body .schedule-item .office {
  text-align: right;
}

.schedule-calendar-wrapper .schedule-row .calendar-day.today {
  background: #CDADB8;
}

.schedule-calendar-wrapper .schedule-row .calendar-day.today .header {
  background: #964f73 !important;
  color: #fff;
}

.schedule-calendar-wrapper .schedule-row .calendar-day:nth-child(1) .header {
  background: #CFE2F3;
}

.schedule-calendar-wrapper .schedule-row .calendar-day:nth-child(2) .header {
  background: #b1c9dd;
}

.schedule-calendar-wrapper .schedule-row .calendar-day:nth-child(3) .header {
  background: #8daac3;
}

.schedule-calendar-wrapper .schedule-row .calendar-day:nth-child(4) .header {
  background: #6b8dab;
  color: #fff;
}

.schedule-calendar-wrapper .schedule-row .calendar-day:nth-child(5) .header {
  background: #497093;
  color: #fff;
}

.schedule-calendar-wrapper .schedule-row .calendar-day:nth-child(6) .header {
  background: #255179;
  color: #fff;
}

.schedule-calendar-wrapper .schedule-row .calendar-day:nth-child(7) .header {
  background: #073763;
  color: #fff;
}

.schedule-calendar-wrapper .schedule-row .calendar-day.past-day {
  filter: brightness(80%);
}

.schedule-calendar-wrapper .schedule-row .calendar-day.past-day:nth-child(1) .header {
  background: #CFE2F3;
}

.schedule-calendar-wrapper .schedule-row .calendar-day.past-day:nth-child(2) .header {
  background: #b1c9dd;
}

.schedule-calendar-wrapper .schedule-row .calendar-day.past-day:nth-child(3) .header {
  background: #8daac3;
}

.schedule-calendar-wrapper .schedule-row .calendar-day.past-day:nth-child(4) .header {
  background: #6b8dab;
  color: #fff;
}

.schedule-calendar-wrapper .schedule-row .calendar-day.past-day:nth-child(5) .header {
  background: #497093;
  color: #fff;
}

.schedule-calendar-wrapper .schedule-row .calendar-day.past-day:nth-child(6) .header {
  background: #255179;
  color: #fff;
}

.schedule-calendar-wrapper .schedule-row .calendar-day.past-day:nth-child(7) .header {
  background: #073763;
  color: #fff;
}

.schedule-result {
  background: #fff;
  padding: 1.5rem;
}

.modal-error .modal-content {
  background-color: #c82333;
  color: #fff;
}

.trial-attendance-wrapper {
  margin-bottom: 15px;
}

.trial-attendance-user .trial-user-name {
  width: 260px;
  display: flex;
  align-items: center;
  padding: 10px;
  font-weight: 700;
}

.trial-attendance-user .trial-user-attendance {
  display: flex;
}

.trial-attendance-user .trial-user-attendance .form-group {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.trial-attendance-user .trial-user-attendance .form-group input {
  height: 35px;
}

.trial-comment {
  width: 100%;
}

.trial-comment input {
  width: 100%;
  height: 35px;
}

.trial-attendance-comment {
  width: 100%;
}

.trial-attendance-comment input {
  width: 100%;
  height: 35px;
}

#modal-schedule .btn-confirm:disabled {
  background: #9e9e9e;
}

.account-menu ul {
  display: flex;
}

.account-menu ul a {
  color: black;
  margin-right: 10px;
}

.account-menu ul a.active {
  color: #dc3545;
}

.card-study dt {
  margin-bottom: 5px;
}

.card-study dd {
  margin-bottom: 20px;
}

.script-status span {
  margin-bottom: 15px;
  display: block;
  font-weight: 700;
  text-transform: uppercase;
}

.prev-script-block {
  margin-bottom: 15px;
  background: #e5e5e5;
  padding: 10px;
}

.select2-program,
.select2-lesson {
  width: 100% !important;
}

.card-instruction ol {
  padding-left: 30px;
}

.card-instruction ol li {
  list-style: decimal;
}

.card.card-test,
.card.card-homework {
  margin-bottom: 20px;
}

.card.card-test .card-body .form-group:last-child,
.card.card-homework .card-body .form-group:last-child {
  margin-bottom: 0;
}

.card.card-test .bg-gradient-secondary,
.card.card-homework .bg-gradient-secondary {
  background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x !important;
  padding: 1.25rem 2rem;
}

.card.card-test .bg-gradient-secondary .card-title,
.card.card-homework .bg-gradient-secondary .card-title {
  font-size: 1.5rem;
  color: white;
  margin: 0;
}

.card.card-test .bg-gradient-secondary.card-header,
.card.card-homework .bg-gradient-secondary.card-header {
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  padding: 1.25rem 2rem;
  position: relative;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.card.card-test .add-homework-block,
.card.card-test .add-test-block,
.card.card-homework .add-homework-block,
.card.card-homework .add-test-block {
  background: #97bbdb;
  border: #809fbb;
  text-transform: capitalize;
  padding: 0.75rem 1.25rem;
}

.card.card-test .add-homework-block:hover,
.card.card-test .add-test-block:hover,
.card.card-homework .add-homework-block:hover,
.card.card-homework .add-test-block:hover {
  background: #809fbb;
}

.card.card-test .form-control,
.card.card-homework .form-control {
  display: block;
  width: 100%;
  height: calc(3.25rem + 2px);
  padding: 0.75rem 1.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 transparent;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.card.card-test textarea.form-control,
.card.card-homework textarea.form-control {
  height: auto;
}

.card.card-test .btn-success,
.card.card-homework .btn-success {
  padding: 0.75rem 1.25rem;
}

.tree ul,
.tree li {
  list-style: none;
  position: relative;
}

.tree a {
  padding: 15px;
  border: 1px solid #ccc;
  display: block;
  border-radius: 5px;
  margin-bottom: 10px;
}

.tree .title {
  padding-left: 10px;
  font-weight: 700;
  font-size: 12px;
  background: #97bbdb;
  display: flex;
  justify-content: space-between;
}

.tree .title .title-wrapper {
  display: flex;
}

.tree .title .title-wrapper .form-check {
  margin-bottom: 0;
  padding-left: 0;
}

.tree .title .title-wrapper .form-check:hover {
  background: none;
}

.tree .title span {
  margin-right: 20px;
}

.tree .title .controls .move-homework-answer-down,
.tree .title .controls .move-homework-answer-up,
.tree .title .controls .move-test-answer-down,
.tree .title .controls .move-test-answer-up {
  font-size: 9px !important;
}

.tree .title .delete-block {
  color: #dc3545;
  padding-right: 10px;
}

.tree .title .delete-block i {
  margin-right: 10px;
}

.tree .title .delete-block:hover {
  cursor: pointer;
  color: #e15c69;
}

.tree .test-element .title {
  background: #e15c69;
}

.tree .content {
  padding: 10px;
}

.tree .content .form-group {
  margin-bottom: 7px;
}

.tree .content label {
  font-size: 12px;
  margin-bottom: 0;
}

.tree .content input {
  font-size: 14px;
  padding: 3px 3px 3px 10px;
  line-height: 14px;
  height: 27px;
}

.tree .content textarea {
  font-size: 14px;
  padding: 3px 3px 3px 10px;
  line-height: 17px;
}

.tree .add-delete-block {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  position: relative;
  height: 40px;
}

.tree .add-delete-block button {
  font-size: 12px !important;
  padding: 3px 6px;
  color: #000;
  font-weight: 700;
}

.tree .add-delete-block button.add-homework-qa-block,
.tree .add-delete-block button.add-test-qa-block {
  position: absolute;
  left: 12px;
}

.tree .add-delete-block button.delete-homework-block,
.tree .add-delete-block button.delete-test-block {
  position: absolute;
  right: 12px;
}

.tree .add-delete-block button.add-homework-block,
.tree .add-delete-block button.add-test-block {
  background: #97bbdb;
  border: #809fbb;
}

.tree .add-delete-block button.add-homework-qa-block,
.tree .add-delete-block button.add-test-qa-block {
  background: #f5cc6c;
  border: #d0a94e;
}

.tree .add-delete-block button.add-homework-qa-block-answer,
.tree .add-delete-block button.add-test-qa-block-answer {
  background: #abe0ae;
  border: #7da97f;
}

.tree .add-delete-block button:hover {
  opacity: 0.75;
}

.tree .add-delete-block button.btn-danger {
  color: #fff;
}

.tree .tree-element {
  background: #e5e5e5;
  border: 1px solid #ccc;
  border-radius: 5px;
  position: relative;
  margin-bottom: 10px;
}

.tree ul.tree-block-list {
  padding-left: 0;
}

.tree ul.tree-block-list li.tree-block {
  position: relative;
}

.tree ul.tree-block-list li.tree-block > .line-after {
  border-bottom-left-radius: 5px;
  border-left: 2px solid #afc0cc;
  content: "";
  height: 100px;
  left: 18px;
  position: absolute;
  top: 0;
  width: 10px;
}

.tree ul.tree-block-list li.tree-block .tree-block-element {
  position: relative;
  z-index: 1;
}

.tree ul.tree-question-list {
  padding-left: 40px;
}

.tree ul.tree-question-list li.tree-question {
  position: relative;
}

.tree ul.tree-question-list li.tree-question > .line-after {
  border-bottom-left-radius: 5px;
  border-left: 2px solid #afc0cc;
  content: "";
  height: 100px;
  left: 18px;
  position: absolute;
  top: 0;
  width: 10px;
}

.tree ul.tree-question-list li.tree-question .tree-question-element {
  position: relative;
  z-index: 1;
}

.tree ul.tree-question-list li.tree-question .tree-question-element .title {
  background: #f5cc6c;
}

.tree ul.tree-question-list li.tree-question .tree-question-element > .line-before {
  border-bottom: 2px solid #afc0cc;
  content: "";
  height: 1px;
  position: absolute;
  top: 50%;
  width: 20px;
  left: -20px;
}

.tree ul.tree-answer-list {
  padding-left: 40px;
}

.tree ul.tree-answer-list li.tree-answer .tree-answer-element {
  position: relative;
}

.tree ul.tree-answer-list li.tree-answer .tree-answer-element .title {
  background: #abe0ae;
}

.tree ul.tree-answer-list li.tree-answer .tree-answer-element > .line-before {
  border-bottom: 2px solid #afc0cc;
  content: "";
  height: 1px;
  position: absolute;
  top: 50%;
  width: 20px;
  left: -20px;
}

.add-homework-block,
.add-test-block {
  background: #97bbdb;
  border: #809fbb;
}

.add-homework-block:hover,
.add-test-block:hover {
  background: #809fbb;
}

.homework-test-form .btn-success {
  padding: 0.75rem 1.25rem;
  text-transform: capitalize;
}

input[readonly],
textarea[readonly] {
  background-color: #f9d7d7 !important;
}

.toggle-question:hover {
  cursor: pointer;
  background: #efc257 !important;
}

.toggle-question::before {
  content: "➖";
  margin-right: 5px;
}

.toggle-question.collapse::before {
  content: "➕";
  margin-right: 5px;
}

.toggle-block:hover {
  cursor: pointer;
  background: #73a9d9 !important;
}

.toggle-block::before {
  content: "➖";
  margin-right: 5px;
}

.toggle-block.collapse::before {
  content: "➕";
  margin-right: 5px;
}

.scroll-y {
  overflow-y: scroll;
  height: calc(100vh - 160px);
}

.no-accordione {
  border: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

.no-accordione .acc_head {
  padding: 0 !important;
  position: static !important;
}

.no-accordione .acc_content {
  display: inline-block !important;
}

.grid-column {
  display: grid;
  gap: 8px;
}

.grid-column--4 {
  grid-template-columns: repeat(4, 1);
}

.grid-column--4 .grid-column__name {
  grid-column: span 4;
}

.grid-column--3 {
  grid-template-columns: repeat(3, 1);
}

.grid-column--3 .grid-column__name {
  grid-column: span 3;
}

.grid-column--5 {
  grid-template-columns: repeat(5, 1);
}

.grid-column--5 .grid-column__name {
  grid-column: span 5;
}

.chat {
  position: relative;
  display: flex;
  height: 100%;
  background-color: #f9f9f9;
}

.chat__left {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  z-index: 1;
  flex: 0 0 25%;
}

@media (max-width: 992px) {
  .chat__left {
    flex: 0 0 40%;
  }
}

@media (max-width: 768px) {
  .chat__left {
    flex: 1;
    box-shadow: none;
    transition: 0.4s;
  }
}

@media (max-width: 992px) {
  .chat__left.hide-chat {
    flex: 0 0 40%;
  }
}

@media (max-width: 768px) {
  .chat__left.hide-chat {
    flex: 0;
  }
}

.chat__head {
  display: flex;
  flex-direction: column-reverse;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.chat__head .search {
  width: 100%;
}

.chat__tabs {
  margin-bottom: 10px;
}

.chat__right {
  position: relative;
  flex: 0 0 25%;
  background-color: #ffffff;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
  overflow: hidden;
}

@media (max-width: 992px) {
  .chat__right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    flex: 1;
    width: 0;
    height: 100%;
    z-index: 3;
    transition: width 0.4s;
  }
}

@media (max-width: 768px) {
  .chat__right {
    position: static;
    flex: 0;
    box-shadow: none;
    transition: 0.4s;
  }
}

@media (max-width: 992px) {
  .chat__right.show-info {
    width: 40%;
  }
}

@media (max-width: 768px) {
  .chat__right.show-info {
    flex: 1;
    width: 100%;
  }
}

@media (max-width: 992px) {
  .chat__right.show-info + .chat-overlay {
    opacity: 1;
    pointer-events: initial;
  }
}

@media (max-width: 768px) {
  .chat__right.show-info + .chat-overlay {
    opacity: 0;
    pointer-events: none;
  }
}

.chat-btn {
  line-height: 1;
  padding: 3px 5px;
  white-space: nowrap;
}

.chat-btn--violet {
  background-color: #6b298a;
  color: #ffffff;
}

.chat-btn--violet:hover {
  background-color: #97b000;
  color: #ffffff;
}

.chat ul,
.chat li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat button:focus {
  outline: none;
}

.chat p {
  margin: 0;
}

.chat .name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

.chat .student-product-status {
  position: relative;
}

.chat-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: 0.4s;
}

.chat-burger {
  display: none;
}

@media (max-width: 768px) {
  .chat-burger:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 992px) {
  .chat-burger:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
}

.chat-burger__icon::before {
  font-size: 16px;
  color: #6b298a;
}

.chat-close {
  display: none;
}

@media (max-width: 992px) {
  .chat-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: -10px 0 0 auto;
  }
}

.chat-close__icon {
  width: 24px;
  height: 24px;
}

.chat-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.chat-info__head {
  padding: 10px 5px;
}

.chat-info__title {
  padding-left: 5px;
  font-weight: 600;
  font-size: 14px;
}

.chat-info__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 5px;
  height: calc(100% - 145px);
  overflow-y: auto;
}

@media (max-width: 992px) {
  .chat-info__content {
    height: calc(100% - 165px);
  }
}

.chat-info__blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 5px;
  border-radius: 5px;
  border: 1px solid rgba(107, 41, 138, 0.2);
  box-shadow: 0px 4px 20px 0px #00000014;
}

.chat-info-block {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 5px;
}

.chat-info-block__title {
  color: rgba(0, 0, 0, 0.7);
}

.chat-info-block__desc {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
}

.chat-info__line {
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}

.chat-info__tabs {
  display: grid !important;
  border-bottom: none !important;
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 1400px) {
  .chat-info__tabs {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1600px) {
  .chat-info__tabs {
    grid-template-columns: repeat(6, 1fr);
  }
}

.chat-statuses {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-statuses__blocks {
  display: flex;
  flex-direction: column;
}

.chat-statuses__blocks-text {
  font-weight: 600;
  font-size: 12px;
  align-self: flex-end;
  color: #6b298a;
}

.chat-statuses__label {
  position: relative;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
}

.chat-statuses__label--violet {
  background-color: #6b298a;
  color: #ffffff;
}

.chat-statuses-block {
  background-color: transparent;
}

.chat-statuses-block__top {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.chat-statuses-block__product {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
}

.chat-statuses-block__product--wrap {
  flex-wrap: wrap;
}

.chat-statuses-block__text {
  white-space: nowrap;
}

.chat-statuses-block__img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}

.chat-statuses-block__select {
  height: 26px;
  border-radius: 5px;
}

.chat-statuses-block__select--0 {
  background-color: #fcbbbb;
}

.chat-statuses-block__select--1 {
  background-color: #eeda5f;
}

.chat-statuses-block__select--2 {
  background-color: #eea25f;
}

.chat-statuses-block__select--3 {
  background-color: #bbe5fc;
}

.chat-statuses-block__select--8 {
  background-color: #5a40ba;
}

.chat-statuses-block__select--5 {
  background-color: #adf3ad;
}

.chat-statuses-block__select--9 {
  background-color: #821e3a;
  color: #ffffff;
}

.chat-statuses-block__select--4 {
  background-color: #4081ba;
  color: #ffffff;
}

.chat-statuses-block__select--6 {
  background-color: #adadad;
  color: #ffffff;
}

.chat-statuses-block__select--7 {
  background-color: #adadad;
  color: #ffffff;
}

.chat-statuses-block__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
  gap: 5px;
}

.chat-statuses-block__group--nowrap {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.chat-statuses-block__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #6b298a;
  border: none;
  cursor: pointer;
  margin: 0;
  transition: 0.4s;
}

.chat-statuses-block__btn .icon {
  color: #6b298a;
}

.chat-statuses-block__btn:hover:not(:disabled) {
  background-color: #e9e9e9;
}

.chat-statuses-block__btn:disabled {
  cursor: not-allowed;
}

.chat-statuses-block__btn--full {
  width: -moz-fit-content;
  width: fit-content;
}

.chat-statuses-block__arrow {
  transform: rotate(180deg);
  transition: 0.4s;
}

.chat-statuses-block__wrapper {
  height: 0;
  overflow: hidden;
  transition: 0.6s;
}

.chat-statuses-block__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 5px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.chat-statuses-block__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-statuses-block__row:first-child {
  justify-content: space-between;
}

.chat-statuses-block.open .chat-statuses-block__top {
  background-color: rgba(151, 176, 0, 0.1);
}

.chat-statuses-block.open .chat-statuses-block__arrow {
  transform: rotate(0deg);
}

.chat-statuses-block.open .chat-statuses-block__content {
  background-color: rgba(151, 176, 0, 0.1);
}

.chat-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 0 0 50%;
}

@media (max-width: 992px) {
  .chat-body {
    flex: 0 0 60%;
  }
}

@media (max-width: 768px) {
  .chat-body {
    flex: 0;
    transition: 0.4s;
  }
}

@media (max-width: 992px) {
  .chat-body.show-chat-body {
    flex: 0 0 60%;
  }
}

@media (max-width: 768px) {
  .chat-body.show-chat-body {
    flex: 1;
  }
}

.chat-body__head {
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
  .chat-body__head {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
  }
}

.chat-body__messages {
  padding: 10px;
  display: grid;
  gap: 10px;
  max-height: 100%;
  overflow-y: auto;
  margin: auto 0 0 0;
}

.chat-body__footer {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.chat-message {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 5px;
  width: 80%;
}

.chat-message--left {
  background-color: #ffffff;
}

.chat-message--right {
  background-color: rgba(151, 176, 0, 0.1);
  margin: 0 0 0 auto;
}

.chat-message__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-message__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-message__body {
  display: grid;
  gap: 5px;
}

.chat-message__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.chat-message__time {
  margin: 0 0 0 auto;
}

.chat-message-deleted {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-message-deleted span {
  font-weight: 600;
}

.chat-message.active {
  background-color: rgba(107, 41, 138, 0.1);
}

.chat-message.deleted {
  background-color: #e5e5e5;
}

.chat-message.deleted .chat-message__body,
.chat-message.deleted .chat-message__top,
.chat-message.deleted .chat-message__time {
  opacity: 0.5;
}

.chat-message.deleted .attachment {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-message.deleted .attachment-photo {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-message.deleted .attachment-photo a {
  cursor: not-allowed;
}

.chat-field__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-field__attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 5px;
}

.chat-field__field {
  position: relative;
  width: 100%;
}

.chat-field__content {
  display: flex;
  gap: 5px;
}

.chat-field__counter {
  margin: 0 0 0 auto;
}

.chat-field__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  border: none;
  transition: 0.4s;
}

.chat-field__btn:hover {
  background-color: #e9e9e9;
}

.chat-field__btn .icon {
  color: #6b298a;
}

.chat-respond {
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.chat-respond__icon {
  color: #6b298a;
}

.chat-respond__text {
  display: grid;
  gap: 5px;
  color: #8c8c8c;
  font-style: italic;
}

.chat-tabs {
  display: flex;
}

.chat-tabs li {
  display: flex;
  width: 100%;
}

.chat-tabs li:last-child button {
  border-right: none;
}

.chat-tabs__btn {
  position: relative;
  padding: 10px;
  width: 100%;
  height: 42px;
  border: none;
  color: #8c8c8c;
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.chat-tabs__btn:focus {
  outline: none;
}

.chat-tabs__btn::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  width: 100%;
  background-color: #97b000;
  scale: 0 0;
  transition: 0.4s;
}

.chat-tabs__btn.active {
  font-weight: 600;
  color: #000000;
  background-color: rgba(151, 176, 0, 0.1);
}

.chat-tabs__btn.active::after {
  scale: 1 1;
}

.chat-tabs__counter {
  position: absolute;
  right: 2px;
  top: 2px;
}

.chat-tabs-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.chat-tabs-pills::-webkit-scrollbar {
  display: none;
}

.chat-tabs-pills li {
  display: flex;
  width: 100%;
}

.chat-tabs-pills__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 5px 10px;
  border-radius: 25px;
  background-color: #ffffff;
  color: #8c8c8c;
  white-space: nowrap;
  border: none;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
}

.chat-tabs-pills__btn.active {
  font-weight: 600;
  background-color: #97b000;
  color: #ffffff;
}

.chat-tabs-pills__btn.database-active {
  font-weight: 600;
  background-color: #6b298a;
  color: #ffffff;
}

.chat-list {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  height: calc(100% - 167px);
  overflow-y: auto;
}

.chat-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.chat-item-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.chat-item-top__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chat-item__message {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  line-height: 1;
}

.chat-item__message .icon {
  margin-top: 2px;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: #6b298a;
}

.chat-item__blocks {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chat-item-block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.chat-item-block__title {
  color: rgba(0, 0, 0, 0.6);
  line-height: 1;
}

.chat-item-block__desc {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
  line-height: 1;
  justify-self: flex-end;
}

.chat-item.attached {
  background-color: #e0e0e0;
}

.chat-item.active {
  background-color: rgba(151, 176, 0, 0.1);
}

.chat-date {
  font-size: 12px;
  color: #8c8c8c;
  white-space: nowrap;
}

.chat-label {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1;
}

.chat-label::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}

.chat-label--violet {
  background-color: rgba(107, 41, 138, 0.2);
  color: #6b298a;
}

.chat-label--violet::before {
  background-color: #6b298a;
}

.chat-label--green {
  background-color: rgba(151, 176, 0, 0.2);
  color: #97b000;
}

.chat-label--green::before {
  background-color: #6b298a;
}

.chat-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-user__photo {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  position: relative;
}

.chat-user__icon {
  display: flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  overflow: hidden;
}

.chat-user__icon--silver::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(140, 140, 140, 0.8);
}

.chat-user__icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.chat-user__img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}

.chat-user__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.chat-user__content {
  display: grid;
  gap: 5px;
}

.chat-user__counter {
  margin: 0 0 0 auto;
}

.chat-user__blocks {
  display: flex;
  flex-direction: column;
}

.chat-user__block {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
  padding-top: 2px;
  margin-top: 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.chat-blanks {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chat-blanks li {
  display: flex;
  flex-direction: column;
}

.chat-blanks li.open > .chat-blanks {
  max-height: 100%;
}

.chat-blanks li.open > .chat-blanks__btn {
  background-color: #6b298a;
  color: #ffffff;
}

.chat-blanks li.open > .chat-blanks__btn button {
  color: #ffffff;
}

.chat-blanks li.open > .chat-blanks__btn {
  background-color: #6b298a;
  color: #ffffff;
}

.chat-blanks li.open > .chat-blanks__btn i {
  color: #ffffff;
}

.chat-blanks li.open > .chat-blanks__placeholder {
  background-color: #6b298a;
  color: #ffffff;
}

.chat-blanks li.open > .chat-blanks__placeholder i,
.chat-blanks li.open > .chat-blanks__placeholder button {
  color: #ffffff;
}

.chat-blanks li.open > .chat-blanks__content {
  max-height: 100%;
}

.chat-blanks li.open > .chat-blanks__copy i {
  color: #ffffff;
}

.chat-blanks__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  border-radius: 5px;
  padding: 5px 10px;
  border: none;
  background-color: rgba(151, 176, 0, 0.1);
}

.chat-blanks__placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  background-color: rgba(151, 176, 0, 0.1);
  overflow: hidden;
  transition: 0.4s;
}

.chat-blanks__placeholder-btn {
  width: 100%;
  text-align: left;
  padding: 5px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.chat-blanks__placeholder-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer !important;
  transition: 0.4s;
}

.chat-blanks__placeholder-copy i {
  font-size: 16px;
  color: #6b298a;
  transition: 0.4s;
}

.chat-blanks__placeholder-copy:hover {
  background-color: #6b298a;
}

.chat-blanks__placeholder-copy:hover i {
  color: #ffffff;
}

.chat-blanks__copy {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  background-color: transparent;
  border: none;
  display: flex;
  border-radius: 5px;
  align-items: center;
  cursor: pointer !important;
  transition: 0.4s;
}

.chat-blanks__copy i {
  font-size: 18px;
  color: #6b298a;
}

.chat-blanks__copy:hover {
  background-color: #6b298a;
}

.chat-blanks__copy:hover i {
  color: #ffffff;
}

.chat-blanks__content {
  max-height: 0;
  overflow: hidden;
  transition: 0.4s;
}

.chat-blanks__text {
  position: relative;
  padding: 5px 20px 5px 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.chat-blanks .chat-blanks {
  padding-left: 15px;
  max-height: 0;
  overflow: hidden;
  transition: 0.4s;
}

.chat-blanks .chat-blanks__btn {
  margin-bottom: 5px;
}

.message-respond {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 10px;
  background-color: rgba(107, 41, 138, 0.1);
  border-radius: 5px;
  margin-bottom: 5px;
}

.message-respond__icon {
  color: #6b298a;
}

.message-respond__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid #6b298a;
}

.message-respond__title {
  font-weight: 600;
}

.message-respond__text {
  color: #8c8c8c;
  font-style: italic;
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.message-respond__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  margin-left: auto;
}

.message-respond__delete .icon {
  color: #6b298a;
}

.chat-icon {
  position: relative;
  cursor: pointer;
}

.chat-icon__counter {
  position: absolute;
  right: -6px;
  top: -12px;
}

.chat-icon__counter-type {
  position: absolute;
  right: -6px;
  top: 12px;
}

.category-title {
  text-align: center;
  position: relative;
  background-color: #6b298a;
  padding: 1.5rem 0;
}

.category-title .title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2.4rem;
  color: #ffffff;
  z-index: 1;
  position: relative;
  background-color: #6b298a;
  padding: 0 1rem;
  display: inline-block;
}

.category-title::after {
  content: "";
  height: 1px;
  background: #e0c4ee;
  width: 100%;
  display: block;
  position: absolute;
  top: 25px;
  z-index: 0;
}

.category-title::before {
  content: "";
  border-right: 100px solid transparent;
  border-top: 20px solid #6b298a;
  border-left: 100px solid transparent;
  display: block;
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translate(-50%);
}

.category-title--mt-50 {
  margin-top: 50px;
}

.category-number {
  text-align: center;
  padding: 3rem 0;
}

.category-number .inner {
  width: 9rem;
  height: 9rem;
  border-radius: 4.5rem;
  background-color: #6b298a;
  position: relative;
  display: inline-block;
  margin-bottom: 3rem;
}

.category-number .inner span {
  display: block;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.category-number .text {
  text-transform: uppercase;
  font-size: 2.4rem;
  height: auto;
}

.category-reasons {
  display: flex;
}

@media (max-width: 37.5em) {
  .category-reasons {
    display: block;
  }
}

.category-reasons .text {
  width: 50%;
  padding-bottom: 3rem;
  height: auto;
  align-self: center;
}

@media (max-width: 37.5em) {
  .category-reasons .text {
    width: 100%;
  }
}

.category-reasons .text ul li {
  padding-left: 3rem;
  position: relative;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.category-reasons .text ul li::before {
  content: "";
  width: 19px;
  height: 17px;
  background-image: url("/img/leave.png");
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.category-reasons .image {
  width: 50%;
  padding-bottom: 3rem;
}

@media (max-width: 37.5em) {
  .category-reasons .image {
    width: 100%;
  }
}

.category-reasons .image img {
  width: 100%;
  height: auto;
}

.section-course {
  padding: 3rem 0;
  position: relative;
}

@media (max-width: 37.5em) {
  .section-course {
    padding: 2rem 0;
  }
}

.section-course .title {
  text-align: center;
  margin-bottom: 3.5rem;
}

@media (max-width: 37.5em) {
  .section-course .title {
    margin-bottom: 2rem;
  }
}

.section-course .title h1 {
  text-transform: uppercase;
  color: #6b298a;
  position: relative;
  font-size: 2.4rem;
  font-weight: 700;
  display: inline-block;
}

@media (max-width: 37.5em) {
  .section-course .title h1 {
    line-height: 3.2rem;
  }
}

.section-course .title h1::before {
  content: "";
  width: 19px;
  height: 17px;
  background-image: url("/img/leave.png");
  background-repeat: no-repeat;
  position: absolute;
  top: 0.4rem;
  left: -3rem;
}

@media (max-width: 37.5em) {
  .section-course .title h1::before {
    display: none;
  }
}

.section-course .title h2 {
  text-transform: uppercase;
  color: #6b298a;
  position: relative;
  font-size: 2.4rem;
  font-weight: 700;
  display: inline-block;
}

@media (max-width: 37.5em) {
  .section-course .title h2 {
    line-height: 3.2rem;
  }
}

.section-course .title h2::before {
  content: "";
  width: 19px;
  height: 17px;
  background-image: url("/img/leave.png");
  background-repeat: no-repeat;
  position: absolute;
  top: 0.4rem;
  left: -3rem;
}

@media (max-width: 37.5em) {
  .section-course .title h2::before {
    display: none;
  }
}

.section-course .course-content {
  width: 100%;
  display: flex;
}

@media (max-width: 37.5em) {
  .section-course .course-content {
    display: block;
  }
}

.section-course .course-content .col-left {
  width: 28%;
  border-right: 1px solid #e0c4ee;
  padding-right: 2.4rem;
}

@media (max-width: 37.5em) {
  .section-course .course-content .col-left {
    width: 100%;
    border: none;
    padding: 0;
    margin-bottom: 1.5rem;
  }
}

.section-course .course-content .col-left .info {
  margin-bottom: 3rem;
}

@media (max-width: 37.5em) {
  .section-course .course-content .col-left .info {
    margin-bottom: 0;
  }
}

.section-course .course-content .col-left .info ul li {
  position: relative;
  font-size: 1.6rem;
  padding-left: 2rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
}

.section-course .course-content .col-left .info ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #97b000;
  display: inline-block;
  border-radius: 4px;
  position: absolute;
  top: 8px;
  left: 0;
}

.section-course .course-content .col-mid {
  width: 44%;
}

@media (max-width: 37.5em) {
  .section-course .course-content .col-mid {
    width: 100%;
    margin-bottom: 2.6rem;
  }
}

.section-course .course-content .col-mid .offer {
  padding: 2.8rem 0;
  text-align: center;
}

.section-course .course-content .col-mid .offer .offer-main {
  font-size: 2.6rem;
}

.section-course .course-content .col-mid .offer.last {
  border-bottom: none;
}

.section-course .course-content .col-mid .offer-label {
  position: relative;
  height: 8rem;
  margin-bottom: 4rem;
}

.section-course .course-content .col-mid .offer-label:first-child {
  margin-bottom: 7rem;
}

.section-course .course-content .col-mid .offer-label .offer-inner {
  background-color: #6b298a;
  position: absolute;
  display: flex;
  color: #ffffff;
  left: -9px;
  width: 90%;
  height: 8rem;
}

.section-course .course-content .col-mid .offer-label .offer-inner::before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 1rem solid #97b000;
  border-left: 1rem solid transparent;
  top: -3.8rem;
  left: 0;
  position: absolute;
}

@media (max-width: 56.25em) {
  .section-course .course-content .col-mid .offer-label .offer-inner::before {
    top: -4.45rem;
  }
}

.section-course .course-content .col-mid .offer-label .offer-inner .top-corner {
  width: 0;
  height: 0;
  border-top: 4rem solid #6b298a;
  border-right: 2rem solid transparent;
  position: absolute;
  right: -2rem;
  top: 0;
}

.section-course .course-content .col-mid .offer-label .offer-inner .bottom-corner {
  width: 0;
  height: 0;
  border-bottom: 4rem solid #6b298a;
  border-right: 2rem solid transparent;
  position: absolute;
  right: -2rem;
  bottom: 0;
}

.section-course .course-content .col-mid .offer-label .offer-inner .price {
  font-weight: 700;
  font-size: 2.6rem;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.section-course .course-content .col-mid .offer-label .offer-inner .price::after {
  content: "";
  width: 3rem;
  background: linear-gradient(107deg, #6b298a 45%, #ffffff 51%, #6b298a 53%);
  height: 8rem;
  position: absolute;
  right: -0.7rem;
}

.section-course .course-content .col-mid .offer-label .offer-inner .price .price-number {
  font-size: 2.8rem;
  margin-right: 0.6rem;
}

.section-course .course-content .col-mid .offer-label .offer-inner .price.price-extra {
  color: #97b000;
}

.section-course .course-content .col-mid .offer-label .offer-inner .price.price-extra .price-number {
  font-size: 3rem;
  margin-right: 0.6rem;
}

.section-course .course-content .col-mid .offer-label .offer-inner .bonus {
  display: flex;
  width: 50%;
  justify-content: space-evenly;
}

.section-course .course-content .col-mid .offer-label .offer-inner .bonus .numbers {
  font-size: 2rem;
  text-align: center;
  width: 8rem;
  padding-top: 0.8rem;
}

.section-course .course-content .col-mid .offer-label .offer-inner .bonus .numbers .top {
  margin-bottom: 0.6rem;
}

.section-course .course-content .col-mid .offer-label .offer-inner .bonus .numbers .bottom {
  background-color: #ffffff;
  border-radius: 1.5rem;
  width: 3rem;
  height: 3rem;
  position: relative;
  display: inline-block;
}

.section-course .course-content .col-mid .offer-label .offer-inner .bonus .numbers .bottom span {
  font-weight: 700;
  color: #6b298a;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2.4rem;
  font-size: 2rem;
  line-height: 116%;
}

.section-course .course-content .col-mid .offer-label .offer-inner .bonus .text {
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section-course .course-content .col-mid .offer-label .offer-inner .bonus .text .top {
  font-size: 1.2rem;
}

.section-course .course-content .col-mid .offer-label__subtitle {
  font-size: 16px;
  line-height: 100%;
  color: #fff;
  position: absolute;
  top: -28px;
  left: -9px;
  background-color: #e42218;
  padding: 10px 30px 10px 20px;
  font-weight: 600;
  clip-path: polygon(0% 0%, 100% 0, 95% 50%, 100% 100%, 0% 100%);
}

.section-course .course-content .col-mid .button {
  text-align: center;
  padding: 0 4rem;
  margin-bottom: 1.5rem;
}

.section-course .course-content .col-mid .button button {
  border: none;
  background: #97b000;
  color: #ffffff;
  text-transform: uppercase;
  padding: 1.5rem 5rem;
  border-radius: 3rem;
  font-weight: 700;
  font-size: 2.2rem;
  transition: all 0.3s ease;
}

.section-course .course-content .col-mid .button button:hover {
  cursor: pointer;
  background: #6b298a;
}

.section-course .course-content .col-mid .start {
  text-align: center;
}

@media (max-width: 37.5em) {
  .section-course .course-content .col-mid .start {
    margin-bottom: 2.2rem;
  }
}

.section-course .course-content .col-right {
  width: 28%;
}

@media (max-width: 37.5em) {
  .section-course .course-content .col-right {
    width: 100%;
  }
}

.section-course .course-content .col-right .image {
  text-align: center;
  margin-bottom: 3rem;
}

.section-course .course-content .col-right .image img {
  width: 100%;
  height: auto;
}

.section-course .course-content .col-right .col-title {
  text-align: center;
  position: relative;
  margin-bottom: 2rem;
}

.section-course .course-content .col-right .col-title span {
  color: #97b000;
  font-size: 1.8rem;
  text-transform: uppercase;
  background: #ffffff;
  font-weight: 700;
  z-index: 1;
  position: relative;
  padding: 0 1.4rem;
}

.section-course .course-content .col-right .col-title::after {
  content: "";
  height: 1px;
  background: #97b000;
  width: 100%;
  display: block;
  position: absolute;
  top: 10px;
  z-index: 0;
}

.section-course .course-content .col-right .related .related-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.section-course .course-content .col-right .related .links {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}

.section-course .course-content .col-right .related .links a {
  width: 25%;
  height: auto;
  text-align: center;
  margin-bottom: 1rem;
}

.section-course .course-content .col-right .related .links a img {
  width: 75%;
  height: auto;
}

.section-course .course-content__text {
  padding: 0rem 2rem 1rem;
  text-align: center;
}

.free-lesson-section {
  font-family: "Inter", sans-serif;
  flex: 1;
  padding-top: 38px;
  padding-bottom: 74px;
  background-color: #6b298a;
  border-top: 12px solid #ffffff;
  border-bottom: 5px solid #ffffff;
}

.free-lesson-section .pulsing-button {
  z-index: 1;
  overflow: hidden;
  animation: pulse-button 1.5s infinite;
  --pulse-color: rgba(173, 255, 47, 0.7);
  border-radius: 50px;
}

@keyframes pulse-button {
  0% {
    box-shadow: 0 0 0 0 var(--pulse-color);
    transform: scale(1);
  }

  70% {
    box-shadow: 0 0 0 20px transparent;
    transform: scale(1.08);
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
    transform: scale(1);
  }
}

@media (max-width: 56.25em) {
  .free-lesson-section {
    padding-top: 30px;
    padding-bottom: 94px;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-section {
    padding-top: 20px;
    padding-bottom: 44px;
  }
}

.free-lesson-section__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1046px;
  margin-inline: auto;
}

.free-lesson-section__container--center {
  align-items: center;
  height: 100%;
}

.free-lesson-section__title {
  margin-bottom: 30px;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.6;
  color: #ffffff;
  text-align: center;
}

@media (max-width: 56.25em) {
  .free-lesson-section__title {
    margin-bottom: 26px;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-section__title {
    margin-bottom: 18px;
    font-size: 26px;
  }
}

.free-lesson-section__title::after {
  content: "*";
  color: #dc3545;
}

.free-lesson-section__title span {
  font-weight: 700;
  color: #97b000;
  text-transform: uppercase;
}

.free-lesson-section__blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 38px;
  padding-right: 30px;
}

@media (max-width: 56.25em) {
  .free-lesson-section__blocks {
    margin-bottom: 58px;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-section__blocks {
    margin-bottom: 24px;
    gap: 6px;
    padding-right: 18px;
  }
}

.free-lesson-section__form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 15px 55px;
  padding: 25px 50px 54px 50px;
  border: 3px dashed #97b000;
  border-radius: 15px;
  max-width: 984px;
}

@media (max-width: 75em) {
  .free-lesson-section__form {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 56.25em) {
  .free-lesson-section__form {
    gap: 15px 30px;
    padding: 25px 25px 50px 25px;
  }
}

@media (max-width: 37.5em) {
  .free-lesson-section__form {
    grid-template-columns: 1fr;
    padding: 24px 28px 50px 20px;
    gap: 8px;
  }
}

.free-lesson-section__form .field-lesson {
  grid-column: 1/2;
}

.free-lesson-section__form .field-lesson:nth-child(5) {
  grid-column: 2/3;
  grid-row: 1/2;
}

@media (max-width: 37.5em) {
  .free-lesson-section__form .field-lesson:nth-child(5) {
    grid-column: 1/2;
    grid-row: auto;
  }
}

.free-lesson-section__form .field-lesson:nth-child(6) {
  grid-column: 2/3;
  grid-row: 2/3;
}

@media (max-width: 37.5em) {
  .free-lesson-section__form .field-lesson:nth-child(6) {
    grid-column: 1/2;
    grid-row: auto;
  }
}

.free-lesson-section__form .field-lesson:nth-child(7) {
  grid-column: 2/3;
  grid-row: 3/4;
}

@media (max-width: 37.5em) {
  .free-lesson-section__form .field-lesson:nth-child(7) {
    grid-column: 1/2;
    grid-row: auto;
  }
}

.free-lesson-section__btn {
  position: absolute;
  top: calc(100% - 22px);
  right: 11%;
  background-color: #6b298a;
  padding-inline: 95px;
}

@media (max-width: 75em) {
  .free-lesson-section__btn {
    padding-inline: 50px;
  }
}

@media (max-width: 56.25em) {
  .free-lesson-section__btn {
    right: 50%;
    transform: translateX(50%);
    padding-inline: 20px;
  }
}

.free-lesson-section__btn--static {
  position: static;
  transform: translateX(0);
  padding-inline: 0;
  background-color: transparent;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

@media (max-width: 37.5em) {
  .free-lesson-section__btn--static {
    max-width: 100%;
  }
}

.free-lesson-section__btn .btn-site {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  padding: 12px;
  padding: 15px;
  text-transform: uppercase;
}

@media (max-width: 37.5em) {
  .free-lesson-section__btn .btn-site {
    font-size: 14px;
    padding: 13px 20px;
  }
}

.free-lesson-section .error-message {
  color: #dc3545;
}

.free-lesson-section__thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 800px;
  margin-inline: auto;
  padding: 100px 50px;
  border: 3px dashed #97b000;
  border-radius: 15px;
  height: 100%;
}

@media (max-width: 37.5em) {
  .free-lesson-section__thankyou {
    padding: 50px 16px;
  }
}

.free-lesson-section__text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
}

@media (max-width: 37.5em) {
  .free-lesson-section__text {
    font-size: 30px;
  }
}

.free-lesson-section__subtext {
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 10px;
}

.section-form {
  height: auto;
}

@media (max-width: 37.5em) {
  .section-form {
    height: auto;
  }
}

.section-form .inner {
  display: flex;
}

@media (max-width: 37.5em) {
  .section-form .inner {
    display: block;
  }
}

.section-form .inner .image {
  width: 55%;
  margin-right: 5%;
}

@media (max-width: 37.5em) {
  .section-form .inner .image {
    display: none;
  }
}

.section-form .inner .image img {
  width: 100%;
  height: auto;
}

.section-form .inner .form {
  width: 40%;
  padding-left: 2rem;
}

@media (max-width: 37.5em) {
  .section-form .inner .form {
    width: 100%;
  }
}

.section-form .inner .form form {
  max-width: 40rem;
  width: 100%;
}

.section-form .inner .form .form-title {
  font-size: 2rem;
  padding: 2rem 0;
  line-height: 3rem;
  margin-bottom: 1.5rem;
}

.section-form .inner .form .form-title span {
  text-transform: uppercase;
  font-weight: 700;
  color: #6b298a;
}

.section-form .inner .form .form-title.form-title-thankyou {
  text-transform: uppercase;
  color: #6b298a;
  text-align: center;
  padding-top: 10rem;
  font-weight: 700;
}

@media (max-width: 37.5em) {
  .section-form .inner .form .form-title.form-title-thankyou {
    padding-top: 5rem;
  }
}

.section-form .inner .form .form-inner {
  display: flex;
  margin: 0 auto;
}

.section-form .inner .form .form-inner .col .form-price {
  font-size: 1.3rem;
  text-transform: initial;
}

.section-form .inner .form .form-group-checkbox {
  margin-bottom: 2.5rem;
}

.section-form .inner .form .form-group-checkbox label {
  display: block;
  position: relative;
  padding-left: 3rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 400;
}

.section-form .inner .form .form-group-checkbox label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.section-form .inner .form .form-group-checkbox label input:checked ~ .checkmark {
  height: 18px;
  width: 18px;
  background: url("/img/checkbox-checked.png");
  background-size: 18px;
}

.section-form .inner .form .form-group-checkbox label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background: url("/img/checkbox-unchecked.png");
  background-size: 18px;
}

.section-form .inner .form .form-group-checkbox label .checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

.section-form .inner .form .form-group-checkbox label .checkmark::after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.section-form .inner .form .form-group {
  margin-bottom: 1rem;
}

.section-form .inner .form .form-group label {
  display: block;
  font-weight: 400;
}

.section-form .inner .form .form-group input {
  width: 90%;
  display: block;
}

.section-form .inner .form .form-group select {
  width: 90%;
  height: 4rem;
}

.section-form .inner .form .form-group.checkbox label {
  display: flex;
}

.section-form .inner .form .form-group.checkbox input {
  width: auto;
  margin-right: 1rem;
}

.section-form .inner .form .submit-button {
  padding-top: 1rem;
  text-align: center;
  width: 90%;
}

.section-form .inner .form .submit-button button {
  border: none;
  background: #97b000;
  color: #ffffff;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.section-form .inner .form .submit-button button:hover {
  cursor: pointer;
  background: #6b298a;
}

.contacts-text-center {
  text-align: center;
  justify-content: center;
  margin-bottom: 100px;
}

.contacts-wrapper {
  display: flex;
}

@media (max-width: 37.5em) {
  .contacts-wrapper {
    display: block;
  }
}

.contacts-wrapper .info {
  width: 30%;
}

@media (max-width: 37.5em) {
  .contacts-wrapper .info {
    width: 100%;
    text-align: center;
    margin-bottom: 3rem;
  }
}

.contacts-wrapper .info .contacts-name {
  color: #6b298a;
  font-size: 1.8rem;
  font-weight: 700;
}

.contacts-wrapper .info .contacts-address {
  font-size: 1.7rem;
  margin-bottom: 2rem;
  line-height: 2.7rem;
}

.contacts-wrapper .info a {
  display: block;
  color: #6b298a;
  font-size: 1.7rem;
  margin-bottom: 0.8rem;
}

.contacts-wrapper .info a.viber-phone {
  position: relative;
  display: inline-block;
}

.contacts-wrapper .info a.viber-phone:before {
  content: "";
  background: url("/img/viber-violet.png");
  width: 1.8rem;
  height: 1.8rem;
  display: inline-block;
  background-size: 100%;
  position: absolute;
  left: -2.5rem;
  top: 0.4rem;
}

.contacts-wrapper .info a.telegram-phone {
  position: relative;
  display: inline-block;
}

.contacts-wrapper .info a.telegram-phone:before {
  content: "";
  background: url("/img/telegram.svg") no-repeat top left;
  background-size: auto 100%;
  width: 2.5rem;
  height: 1.8rem;
  display: inline-block;
  position: absolute;
  left: -2.5rem;
  top: 0.2rem;
}

.contacts-wrapper .info a:hover {
  color: #97b000;
}

.contacts-wrapper .info a:visited {
  color: #6b298a;
}

.contacts-wrapper .map {
  width: 70%;
}

@media (max-width: 37.5em) {
  .contacts-wrapper .map {
    width: 100%;
  }
}

.table-wrapper {
  margin-bottom: 7rem;
}

.table-name {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
}

.invoice-table th {
  text-align: left;
  background-color: #c2c2c2;
  border: 1px solid #b3b3b3;
  padding: 8px;
  font-weight: 400;
}

.invoice-table td {
  border: 1px solid #b3b3b3;
  padding: 8px;
}

@media (max-width: 37.5em) {
  .invoice-table {
    font-size: 1.4rem;
  }

  .invoice-table td:first-child {
    background-color: #c2c2c2;
  }
}

.table-last-row {
  display: flex;
  justify-content: space-between;
}

.payment-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5rem;
  position: relative;
}

@media (max-width: 37.5em) {
  .payment-buttons {
    display: block;
    margin-bottom: 5rem;
  }
}

@media (max-width: 37.5em) {
  .show-privat-options {
    display: none;
  }
}

.privat-options {
  position: absolute;
  z-index: 0;
  top: 6rem;
  left: 28.5rem;
  display: block;
  opacity: 0;
  transition: all 0.3s ease;
}

.privat-options.toggle-active {
  opacity: 1;
  top: 5rem;
  z-index: 1;
}

.privat-options a {
  display: block;
  margin-bottom: 1rem;
}

@media (max-width: 37.5em) {
  .privat-options a {
    display: flex;
  }
}

@media (max-width: 37.5em) {
  .privat-options {
    opacity: 1;
    top: initial;
    position: relative;
    left: initial;
  }
}

.instruction-list {
  margin-bottom: 3rem;
}

.instruction-list .instruction-list-item {
  display: flex;
  margin-bottom: 1rem;
}

.instruction-list .instruction-list-item.item-images .instruction-text {
  margin-right: 2rem;
}

.instruction-list .instruction-list-item.item-images img {
  width: 100%;
  max-width: 30rem;
  height: auto;
}

.instruction-list .instruction-list-item .instruction-number {
  background: #6b298a;
  color: #ffffff;
  font-weight: 700;
  margin-right: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.instruction-list.instruction-list-pc .instruction-list-item.item-images img {
  width: 100%;
  max-width: 90rem;
  height: auto;
}

.two-cols {
  display: flex;
}

@media (max-width: 37.5em) {
  .two-cols {
    display: block;
  }
}

.two-cols div {
  width: 50%;
}

@media (max-width: 37.5em) {
  .two-cols div {
    width: 100%;
  }
}

.two-cols div:last-child {
  text-align: center;
}

.trust-us {
  margin-bottom: 20rem;
}

.trust-us > p {
  font-weight: 700;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 5rem;
}

.trust-us .show-more-text li {
  position: relative;
  margin-bottom: 1rem;
}

.trust-us .show-more-text li span {
  width: 2rem;
  height: 2rem;
  display: block;
  background-color: #98b000;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  left: 0;
}

.trust-us .show-more-text li a {
  padding-left: 2.6rem;
  color: #3d3d3d;
  font-size: 1.6rem;
}

.trust-us .show-more-text li a:hover {
  color: #6b298a;
}

.trust-us .show-more-text li .link {
  padding-top: 1rem;
  padding-left: 2rem;
  margin-bottom: 3rem;
}

.trust-us .show-more-text li .link a {
  color: #6b298a;
  font-weight: 700;
}

.scroll-to-invoice {
  width: 90%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 999;
  bottom: 5rem;
  left: 50%;
  transform: translate(-50%, 0);
}

.scroll-to-invoice:hover {
  cursor: pointer;
}

.invoice-wrapper {
  position: relative;
}

.invoice-wrapper .doc-download {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
}

.buttons-pdf-wrapper {
  width: 330px;
}

.buttons-pdf-wrapper a {
  width: 330px;
  margin-bottom: 15px;
}

.buttons-pdf-wrapper a:last-child {
  margin-bottom: 0;
}

.user-document-table {
  padding: 50px 0;
  font-size: 1.2rem;
}

.user-document-table .document-table-header {
  display: flex;
  font-weight: 700;
  background: #dee2e6;
}

.user-document-table .document-table-header > div {
  padding: 5px 10px;
}

.user-document-table .document-table-body .row {
  display: flex;
  border-bottom: 1px solid #dee2e6;
}

.user-document-table .document-table-body .row > div {
  padding: 8px 10px;
  border-right: 1px solid #dee2e6;
}

.user-document-table .document-table-body .row.style-common {
  background: #e2fbe2;
}

.user-document-table .document-table-body .row.style-realization {
  background: #fee2e2;
}

.user-document-table .document-table-data {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-document-table .document-table-lessons {
  width: 150px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-document-table .document-table-doc {
  width: 100px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-document-table .document-table-price {
  width: 150px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-document-table .document-table-comment {
  width: calc(100% - 650px);
}

.test-description {
  margin-bottom: 3.5rem;
  text-align: center;
  font-size: 18px;
}

.test-from .test-from-block .block-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.test-from .test-from-block .block-description {
  text-align: center;
  margin-bottom: 4rem;
}

.test-from .test-from-block .test-from-task {
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.23);
  padding: 5rem;
  display: none;
  width: 80%;
  margin: 0 auto 19rem;
}

@media (max-width: 37.5em) {
  .test-from .test-from-block .test-from-task {
    width: 95%;
  }
}

.test-from .test-from-block .test-from-task.show {
  display: block;
}

.test-from .test-from-block .test-from-task .task-order {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #c5c5c5;
}

.test-from .test-from-block .test-from-task .task {
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 2rem;
}

@media (max-width: 37.5em) {
  .test-from .test-from-block .test-from-task .task {
    line-height: 3rem;
  }
}

.test-from .test-from-block .test-from-task .answers {
  margin-bottom: 3rem;
}

.test-from .test-from-block .test-from-task .answers .test-from-answer {
  margin-bottom: 1.5rem;
}

.test-from .test-from-block .test-from-task .answers .test-from-answer:last-child {
  margin-bottom: 0;
}

.test-from .test-from-block .test-from-task .prev-task-button {
  text-align: center;
  color: #c5c5c5;
}

.test-from .test-from-block .test-from-task .prev-task-button:hover {
  cursor: pointer;
  color: #6b298a;
}

.test-from .test-from-block .test-from-task .submit {
  text-align: center;
}

.test-from .test-from-block .test-from-task .submit button {
  border: none;
  background: #98b000;
  color: #fff;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  transition: all 0.3s ease;
  width: 25rem;
  margin: 0 auto 1rem;
}

.test-from .test-from-block .test-from-task .submit button:hover {
  cursor: pointer;
  background: #6b298a;
}

.next-task {
  text-align: center;
  margin: 5rem 0;
}

.next-task .next-task-button,
.next-task .start-test-button {
  border: none;
  background: #98b000;
  color: #fff;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  transition: all 0.3s ease;
  width: 25rem;
  margin: 0 auto 1rem;
}

.next-task .next-task-button:hover,
.next-task .start-test-button:hover {
  cursor: pointer;
  background: #6b298a;
}

.next-task .start-test-button {
  margin-bottom: 20rem;
}

.test-form-submit {
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.23);
  padding: 3rem;
  position: absolute;
  z-index: 11;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 32rem;
  opacity: 0;
  top: -100rem;
  z-index: 300;
  transition: all 0.3s ease;
}

.test-form-submit.toggle-active {
  opacity: 1;
  top: 50%;
}

.test-form-submit .title {
  font-weight: 700;
}

.test-form-submit .error {
  text-align: center;
  width: 100%;
}

.test-form-submit .row {
  margin-bottom: 1.5rem;
}

.test-form-submit .row input {
  width: 100%;
}

.test-form-submit .row label {
  display: block;
  margin-bottom: 0.8rem;
}

.test-form-submit .row .call {
  text-align: center;
}

.test-form-submit .row .call input {
  margin-right: 0.9rem;
  width: auto;
}

.test-form-submit button {
  border: none;
  background: #98b000;
  color: #fff;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  transition: all 0.3s ease;
  width: 25rem;
  margin: 0 auto 1rem;
}

.test-form-submit button:hover {
  cursor: pointer;
  background: #6b298a;
}

.test-form-submit .result {
  text-align: center;
  width: 100%;
  font-size: 24px;
  margin-bottom: 2rem;
}

.test-form-submit .message {
  text-align: center;
  width: 100%;
}

.result-container .title {
  font-weight: 700;
  font-size: 20px;
}

.result-container .result {
  text-align: center;
  width: 100%;
  font-size: 24px;
  margin-bottom: 3rem;
}

.result-container .message {
  text-align: center;
  width: 100%;
}

.result-container .message p {
  margin-bottom: 0;
}

.result-container .message {
  margin-bottom: 3rem;
}

.result-container .result-row {
  text-align: center;
}

.result-container .result-row .result-button {
  border: none;
  background: #98b000;
  color: #fff;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  transition: all 0.3s ease;
  width: 31rem;
  margin: 0 auto 1rem;
}

.result-container .result-row .result-button:hover {
  cursor: pointer;
  background: #6b298a;
}

.fails {
  margin-top: 3rem;
}

.fails .title {
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.fails .task-wrapper {
  margin-bottom: 3rem;
  padding: 1.5rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.23);
  border: 1px solid #e5e5e5;
  border-radius: 15px;
}

.fails .task-wrapper .task {
  margin-bottom: 2rem;
}

.fails .task-wrapper .task .title {
  text-align: left;
  font-size: 14px;
  margin-bottom: 0;
}

.fails .task-wrapper .task .content {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
}

.fails .task-wrapper .answer {
  margin-bottom: 2rem;
}

.fails .task-wrapper .answer .title {
  text-align: left;
  font-size: 14px;
  margin-bottom: 0;
}

.fails .task-wrapper .answer .content {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
}

.fails .task-wrapper .answer.correct {
  color: #00b44e;
}

.fails .task-wrapper .answer.user {
  color: #b40000;
}

.teacher-report__icon {
  color: #6b298a;
}

.report-history {
  display: flex;
  border: #000 solid 1px;
  width: 400px;
  margin-top: -1px;
}

.report-history__date {
  width: 100px;
  text-align: center;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.report-history__cntrl {
  text-transform: none;
}

.report-history__cntrl__btn {
  text-decoration: none;
}

.report-history__value {
  flex-grow: 1;
  text-align: center;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-left: 1px solid #000;
}

.report-history__value__needToPay {
  padding: 8px 12px;
  background: #adf3ad;
  border-bottom: solid 1px;
}

.report-history__value__needToPay:hover {
  cursor: pointer;
  background: #94cf94;
}

.report-history__value__paid {
  padding: 8px 12px;
  background: #bce6f3;
  cursor: pointer;
}

.report-history__value__paid:hover {
  cursor: pointer;
  background: #add2df;
}

.report-history-document {
  display: flex;
  border: #000 solid 1px;
  width: 1000px;
  margin-top: -1px;
}

.report-history-document__date {
  width: 100px;
  text-align: center;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.report-history-document__cntrl {
  text-transform: none;
}

.report-history-document__cntrl__btn {
  text-decoration: none;
}

.report-history-document__value {
  flex-grow: 1;
  text-align: center;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-left: 1px solid #000;
}

.report-history-document__value__needToPay {
  padding: 8px 12px;
  background: #adf3ad;
  border-bottom: solid 1px;
}

.report-history-document__value__needToPay:hover {
  cursor: pointer;
  background: #94cf94;
}

.report-history-document__value__paid {
  padding: 8px 12px;
  background: #bce6f3;
  cursor: pointer;
}

.report-history-document__value__paid:hover {
  cursor: pointer;
  background: #add2df;
}

.report-inner-month {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  margin-top: 10px;
}

.report-inner-month::-webkit-scrollbar {
  display: none;
}

.report-inner-month .card {
  display: flex;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.report-inner-month .card > .card-body {
  flex-shrink: 0;
}

.need-to-pay-wr,
.paid-per-day-wr {
  display: flex;
  background: #b7ffb7;
  border-bottom: solid 1px;
}

.need-to-pay-wr:hover,
.paid-per-day-wr:hover {
  background: #adf3ad;
}

.need-to-pay__amount,
.paid-per-day__amount {
  width: 40%;
  text-align: center;
  padding: 4px 0;
}

.need-to-pay__date,
.paid-per-day__date {
  width: 60%;
  text-align: center;
  padding: 4px 0;
}

.tooltip-teacher-report {
  font-size: 12px;
}

.paid-per-day-wr {
  border-top: solid 1px;
  background: #bce6f3;
}

.paid-per-day-wr:hover {
  background: #add2df;
}

.task-page__wrapper {
  margin-top: 30px;
}

.task-page__cols {
  margin-top: 30px;
  display: flex;
  gap: 20px;
}

@media (max-width: 992px) {
  .task-page__cols {
    flex-direction: column;
  }
}

.task-page__tabs ~ .page-base-content {
  border-radius: 0 5px 5px 5px;
}

.task-page__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}

.task-page__form {
  margin-top: 2px;
}

.task-show-date {
  font-size: 18px;
  line-height: 120%;
}

.task-show-bold {
  font-size: 30px;
  font-weight: 600;
}

.task-show-subtext {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

.task-show-box {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.task-show-box__title {
  font-size: 16px;
  line-height: 120%;
  color: rgba(0, 0, 0, 0.7);
}

.task-show-box__desc {
  font-size: 22px;
  line-height: 120%;
}

.task-show-title {
  font-weight: 500;
  font-size: 26px;
  line-height: 100%;
}

.task-show__btn {
  display: flex;
  margin: 0 0 0 auto;
}

.task-show__comments {
  margin-top: 20px;
  overflow-y: auto;
  padding-right: 10px;
}

.task-show__comments::-webkit-scrollbar {
  width: 4px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.task-show__comments::-webkit-scrollbar-thumb {
  width: 4px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.task-show__card {
  position: sticky;
  top: 80px;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
}

@media (max-width: 992px) {
  .task-show__card {
    position: static;
  }
}

.page-base {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #dcdfe5;
  transition: 0s;
}

.page-base-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-base-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.page-base__btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-base-content {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.02);
  padding: 15px;
  border-radius: 10px;
  background-color: #ffffff;
  width: 100%;
}

.page-base__badge {
  padding: 2px 5px;
}

.page-base__badge--violet {
  background-color: rgba(128, 0, 128, 0.8);
  color: white;
}

.page-base__badge--red {
  background-color: #dc3b3b;
  color: #ffffff;
}

.page-base__badge--yellow {
  background-color: #f4fd00;
  color: #333333;
}

.page-base__badge--blue {
  background-color: #0026fd;
  color: #ffffff;
}

.comment-img {
  font-size: 14px;
}

.comment-img--lg {
  font-size: 18px;
}

.teacher-poll {
  margin-top: 50px;
  margin-bottom: 150px;
}

.teacher-poll--top {
  margin: 50px 0 0 0;
}

.teacher-poll__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 750px;
  text-align: center;
  margin: 0 auto;
}

.teacher-poll__form {
  max-width: 550px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.teacher-poll__btn {
  padding: 15px;
}

.teacher-poll__btn:hover {
  color: #FFFFFF !important;
  background-color: #6b298a;
}

.teacher-poll .hover {
  color: #6b298a;
}

.policy {
  margin: 50px 0 150px;
}

.policy--mt-50 {
  margin: 50px 0 0 0;
}

.policy__title {
  font-weight: 600;
  font-size: 26px;
  line-height: 120%;
  color: #5e6d55;
  text-align: center;
}

.policy__subtitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 120%;
  color: #5e6d55;
  text-align: center;
}

.policy__content {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.policy__content p {
  padding: 0;
  margin: 0;
}

.policy .list-marked {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.policy .list-marked li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy .list-marked li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background-color: #000;
  border-radius: 50%;
}

.test-page {
  margin-top: 35px;
  padding-bottom: 125px;
  max-width: 1200px;
  border-bottom: 42px solid #97b000;
  height: 100%;
}

@media (max-width: 56.25em) {
  .test-page {
    margin-top: 30px;
    padding-bottom: 120px;
  }
}

@media (max-width: 37.5em) {
  .test-page {
    margin-top: 18px;
    padding-bottom: 70px;
    border-width: 24px;
  }
}

.test-page__container {
  max-width: 900px;
  margin-inline: auto;
  overflow: hidden;
}

.test-page__title {
  position: relative;
  font-weight: 700;
  font-size: 31px;
  line-height: 1.2;
  color: #6b298a;
  padding-bottom: 70px;
  padding-left: 24px;
}

@media (max-width: 56.25em) {
  .test-page__title {
    padding-bottom: 38px;
    padding-left: 20px;
    font-size: 17px;
  }
}

.test-page__title::before,
.test-page__title::after {
  content: "";
  position: absolute;
  background-color: #97b000;
}

.test-page__title::before {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  left: 0;
  top: 14px;
}

@media (max-width: 56.25em) {
  .test-page__title::before {
    width: 8px;
    height: 8px;
    top: 7px;
  }
}

.test-page__title::after {
  height: 100%;
  width: 2px;
  top: 14px;
  left: 6px;
}

@media (max-width: 56.25em) {
  .test-page__title::after {
    width: 1px;
    top: 7px;
    left: 4px;
  }
}

.test-page__items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: 6px;
  padding-left: 210px;
}

@media (max-width: 56.25em) {
  .test-page__items {
    padding-left: 140px;
    margin-left: 4px;
  }
}

@media (max-width: 37.5em) {
  .test-page__items {
    padding-left: 30px;
    gap: 10px;
  }
}

.test-page__items::before,
.test-page__items::after {
  content: "";
  position: absolute;
  background-color: #97b000;
}

.test-page__items::before {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  left: -6px;
  bottom: 0;
}

@media (max-width: 56.25em) {
  .test-page__items::before {
    width: 8px;
    height: 8px;
    left: -4px;
  }
}

.test-page__items::after {
  height: 100%;
  width: 2px;
  top: 0;
  bottom: 0;
  left: 0;
}

@media (max-width: 56.25em) {
  .test-page__items::after {
    width: 1px;
  }
}

.test-page-item {
  padding-left: 40px;
  padding-right: 62px;
  position: relative;
  cursor: pointer;
}

@media (max-width: 56.25em) {
  .test-page-item {
    padding-left: 22px;
    padding-right: 34px;
  }
}

.test-page-item::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 2px;
  left: -210px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #97b000;
  opacity: 0;
  transition: 0.6s;
}

@media (max-width: 56.25em) {
  .test-page-item::before {
    width: 130px;
    left: -140px;
    height: 1px;
  }
}

@media (max-width: 37.5em) {
  .test-page-item::before {
    width: 20px;
    left: -30px;
  }
}

.test-page-item:hover::before {
  opacity: 1;
}

.test-page-item:hover .test-page-item__content {
  background-color: #97b000;
}

.test-page-item:hover .test-page-item__content::before {
  opacity: 0;
}

.test-page-item:hover .test-page-item__content::after {
  opacity: 1;
}

.test-page-item__content {
  position: relative;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #ffffff;
  text-transform: lowercase;
  background-color: #6b298a;
  padding: 28px 50px;
  border-radius: 15px;
  transition: 0.6s;
}

@media (max-width: 56.25em) {
  .test-page-item__content {
    padding: 15px;
    font-size: 18px;
  }
}

.test-page-item__content::before,
.test-page-item__content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  transition: 0.6s;
}

.test-page-item__content::before {
  right: calc(100% + 13px);
  width: 27px;
  border-radius: 15px;
  background-color: #97b000;
}

@media (max-width: 56.25em) {
  .test-page-item__content::before {
    width: 15px;
    right: calc(100% + 7px);
  }
}

.test-page-item__content::after {
  background-image: url("/img/test/triangle.png");
  background-repeat: no-repeat;
  background-size: 48px 100%;
  width: 48px;
  right: calc(100% + 16px);
  opacity: 0;
}

@media (max-width: 56.25em) {
  .test-page-item__content::after {
    right: calc(100% + 7px);
    background-size: 27px 100%;
    width: 27px;
  }
}

.test-page-item__img {
  position: absolute;
  top: 50%;
  right: -62px;
  width: 124px;
  height: 84px;
  transform: translateY(-50%);
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 1;
}

@media (max-width: 56.25em) {
  .test-page-item__img {
    width: 70px;
    height: 46px;
    right: -34px;
  }
}

.test-section {
  padding: 10rem 0;
  margin-bottom: 10rem;
}

.test-section__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.test-section__list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 2.4rem;
  color: #3d3d3d;
  transition: 0.4s;
}

.test-section__list li a:hover {
  color: #6b298a;
}

.test-section__list li a img {
  width: 24px;
  height: 24px;
}

.vacancies {
  margin-top: 60px;
  margin-bottom: 150px;
}

.vacancies__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 56.25em) {
  .vacancies__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 37.5em) {
  .vacancies__cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

.vacancies__btn {
  margin: 28px auto 0;
}

.vacancies-content {
  max-width: 650px;
  margin: 0 auto;
  padding: 30px 24px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.12);
}

@media (max-width: 37.5em) {
  .vacancies-content {
    padding: 24px;
  }
}

.vacancies-content__label,
.vacancies-content__title {
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
}

.vacancies-content__label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: #97b000;
}

.vacancies-content__title {
  max-width: 310px;
  margin: 5px auto 0;
  font-weight: 700;
  font-size: 20px;
  color: #6b298a;
}

.vacancies-content__blocks {
  display: grid;
  gap: 30px;
  margin-top: 30px;
}

.vacancies-content__btn {
  margin-top: 60px;
  text-transform: uppercase;
}

@media (max-width: 37.5em) {
  .vacancies-content__btn {
    margin-top: 30px;
  }
}

.vacancies__video-wrapper {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}

.vacancies .video-thumb {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  background: black;
}

.vacancies .video-thumb__image {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}

.vacancies .video-thumb__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.vacancies .video-thumb__image .video-thumb__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  transition: transform 0.3s ease;
}

.vacancies .video-thumb__image .video-thumb__icon svg {
  display: block;
}

.vacancies .video-thumb__image .video-thumb__icon svg path:first-child {
  fill: #f00 !important;
}

.vacancies .video-thumb__image .video-thumb__icon svg path:last-child {
  fill: #fff !important;
}

.vacancies .video-thumb__image .video-thumb__icon:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.vacancies .video-thumb__iframe {
  position: relative;
  width: 100%;
  height: 100%;
}

.vacancies .video-thumb__iframe iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.teacher-auth__head {
  margin-top: 30px;
}

.teacher-auth__form {
  padding: 2rem 0 10rem;
}

.notification-header {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 3000;
  pointer-events: none;
  transition: 0.4s;
}

@media (min-width: 992px) {
  .notification-header {
    position: absolute;
    top: 40px;
    width: 375px;
    height: 595px;
    right: 0;
    left: 700px;
    bottom: initial;
  }
}

.notification-header .overlay {
  z-index: 3000;
  cursor: pointer;
}

@media (min-width: 992px) {
  .notification-header .overlay {
    display: none;
  }
}

.notification-header button {
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
}

.notification-header__container {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
  height: 70%;
  transform: translateY(-100%);
  z-index: 3500;
  transition: 0.3s;
}

@media (min-width: 992px) {
  .notification-header__container {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transform: translateY(0);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  }
}

.notification-header__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 36px 12px 0;
}

@media (min-width: 992px) {
  .notification-header__head {
    padding: 24px 12px 0;
  }
}

.notification-header__close {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  .notification-header__close {
    display: none;
  }
}

.notification-header__close svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.notification-header__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #6b298a;
  height: 28px;
}

.notification-header__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.notification-header__body::-webkit-scrollbar {
  display: none;
}

.notification-header__add {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  width: 100% !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
  font-weight: 600;
  font-size: 16px;
}

@media (hover: hover) {
  .notification-header__add:hover {
    opacity: 0.8;
    color: #6b298a;
  }
}

.notification-header__plug {
  margin: 20% auto auto auto;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: #5e6d55;
}

.notification-header.toggle-active {
  opacity: 1;
  pointer-events: initial;
}

.notification-header.toggle-active .notification-header__container {
  transform: translateY(0);
}

.notification-header.toggle-active .overlay {
  opacity: 1;
  pointer-events: initial;
}

.notification-item {
  position: relative;
  display: flex !important;
  gap: 12px;
  width: 100% !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
  padding: 16px 14px;
  border-radius: 6px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  border: 1.5px solid transparent;
  opacity: 0.8;
  transition: 0.4s;
  cursor: pointer;
}

@media (hover: hover) {
  .notification-item:hover {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
    opacity: 1;
  }
}

.notification-item.release-status-0 {
  border-color: #dc3545;
  background-color: rgba(220, 53, 69, 0.2);
}

.notification-item.release-status-0::after {
  opacity: 1;
  pointer-events: initial;
}

.notification-item.release-status-1 {
  border-color: #fcc2a3;
  background-color: rgba(252, 194, 163, 0.2);
}

.notification-item.release-status-2 {
  border-color: #97b000;
  background-color: rgba(151, 176, 0, 0.2);
}

.notification-item.show {
  border-color: #000000;
  opacity: 1;
}

.notification-item::after {
  content: "new";
  position: absolute;
  left: -8px;
  top: -12px;
  padding: 5px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  background-color: #dc3545;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
}

.notification-item__name {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  color: #5e6d55;
  margin-bottom: 6px;
}

.notification-item__name span:last-child {
  margin-left: 5px;
  color: #6b298a;
}

.notification-item__text {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #1d1d1d;
  opacity: 0.6;
  margin-bottom: 12px;
}

.notification-item__date {
  font-size: 14px;
  line-height: 1;
  color: #1d1d1d;
  opacity: 0.6;
}

.notification-item__content {
  flex: 1;
}

.notification-item__count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #ffffff;
  background-color: #6b298a;
  border-radius: 50%;
}

.notification-btn {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.notification-btn i {
  font-size: 24px;
  color: rgba(128, 0, 128, 0.8);
}

.notification-btn__badge {
  position: absolute;
  right: -12px;
  top: -12px;
}

.note-editor {
  width: 100%;
  min-height: 500px !important;
}

.note-editing-area {
  min-height: 500px !important;
}



/*# sourceMappingURL=main.css.map*/