@charset "UTF-8";
/*Обнуление*/
@import url("https://fonts.googleapis.com/css2?family=Handjet:wght@700&display=swap");
* {
  padding: 0;
  margin: 0;
  border: 0;
}

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

:focus,
:active {
  outline: none;
}

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

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

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

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

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

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

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

img {
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

.wrapper {
  position: relative;
  height: 100%;
}

.min-h-0 {
  min-height: 0;
}

.flex-col-2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flex-col-4 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-col-6 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flex-col-8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flex-col-10 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flex-col-12 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flex-col-14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.flex-col-16 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flex-col-18 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.flex-col-20 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.flex-col-22 {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.flex-col-24 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.flex-col-32 {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.flex-row-10 {
  display: flex;
  gap: 10px;
}
.flex-row-10 > * {
  flex: 1;
}

.flex-row-20 {
  display: flex;
  gap: 20px;
}

.flex-row-40 {
  display: flex;
  gap: 40px;
}

.cursor-pointer {
  cursor: pointer;
}

a {
  cursor: pointer;
}

.mt-1 {
  margin-top: 1px;
}

.mb-1 {
  margin-bottom: 1px;
}

.mt-2 {
  margin-top: 2px;
}

.mb-2 {
  margin-bottom: 2px;
}

.mt-3 {
  margin-top: 3px;
}

.mb-3 {
  margin-bottom: 3px;
}

.mt-4 {
  margin-top: 4px;
}

.mb-4 {
  margin-bottom: 4px;
}

.mt-5 {
  margin-top: 5px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mt-6 {
  margin-top: 6px;
}

.mb-6 {
  margin-bottom: 6px;
}

.mt-7 {
  margin-top: 7px;
}

.mb-7 {
  margin-bottom: 7px;
}

.mt-8 {
  margin-top: 8px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mt-9 {
  margin-top: 9px;
}

.mb-9 {
  margin-bottom: 9px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-11 {
  margin-top: 11px;
}

.mb-11 {
  margin-bottom: 11px;
}

.mt-12 {
  margin-top: 12px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mt-13 {
  margin-top: 13px;
}

.mb-13 {
  margin-bottom: 13px;
}

.mt-14 {
  margin-top: 14px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mt-15 {
  margin-top: 15px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mt-16 {
  margin-top: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mt-17 {
  margin-top: 17px;
}

.mb-17 {
  margin-bottom: 17px;
}

.mt-18 {
  margin-top: 18px;
}

.mb-18 {
  margin-bottom: 18px;
}

.mt-19 {
  margin-top: 19px;
}

.mb-19 {
  margin-bottom: 19px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-21 {
  margin-top: 21px;
}

.mb-21 {
  margin-bottom: 21px;
}

.mt-22 {
  margin-top: 22px;
}

.mb-22 {
  margin-bottom: 22px;
}

.mt-23 {
  margin-top: 23px;
}

.mb-23 {
  margin-bottom: 23px;
}

.mt-24 {
  margin-top: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mt-25 {
  margin-top: 25px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mt-26 {
  margin-top: 26px;
}

.mb-26 {
  margin-bottom: 26px;
}

.mt-27 {
  margin-top: 27px;
}

.mb-27 {
  margin-bottom: 27px;
}

.mt-28 {
  margin-top: 28px;
}

.mb-28 {
  margin-bottom: 28px;
}

.mt-29 {
  margin-top: 29px;
}

.mb-29 {
  margin-bottom: 29px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-31 {
  margin-top: 31px;
}

.mb-31 {
  margin-bottom: 31px;
}

.mt-32 {
  margin-top: 32px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mt-33 {
  margin-top: 33px;
}

.mb-33 {
  margin-bottom: 33px;
}

.mt-34 {
  margin-top: 34px;
}

.mb-34 {
  margin-bottom: 34px;
}

.mt-35 {
  margin-top: 35px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mt-36 {
  margin-top: 36px;
}

.mb-36 {
  margin-bottom: 36px;
}

.mt-37 {
  margin-top: 37px;
}

.mb-37 {
  margin-bottom: 37px;
}

.mt-38 {
  margin-top: 38px;
}

.mb-38 {
  margin-bottom: 38px;
}

.mt-39 {
  margin-top: 39px;
}

.mb-39 {
  margin-bottom: 39px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-41 {
  margin-top: 41px;
}

.mb-41 {
  margin-bottom: 41px;
}

.mt-42 {
  margin-top: 42px;
}

.mb-42 {
  margin-bottom: 42px;
}

.mt-43 {
  margin-top: 43px;
}

.mb-43 {
  margin-bottom: 43px;
}

.mt-44 {
  margin-top: 44px;
}

.mb-44 {
  margin-bottom: 44px;
}

.mt-45 {
  margin-top: 45px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mt-46 {
  margin-top: 46px;
}

.mb-46 {
  margin-bottom: 46px;
}

.mt-47 {
  margin-top: 47px;
}

.mb-47 {
  margin-bottom: 47px;
}

.mt-48 {
  margin-top: 48px;
}

.mb-48 {
  margin-bottom: 48px;
}

.mt-49 {
  margin-top: 49px;
}

.mb-49 {
  margin-bottom: 49px;
}

.flex-center-8 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-center-12 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.flex-center-16 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.flex-center-20 {
  display: flex;
  align-items: center;
  gap: 20px;
}

.align-self-start {
  align-self: flex-start;
}

.grid-row-10 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
}

/*--------------------*/
#app {
  height: 100%;
}

html {
  font-size: 16px;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  font-size: 16px;
  color: #475467;
}
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

hgroup {
  margin-bottom: 24px;
}

section {
  padding: 48px 0;
}

hidden-content {
  display: block;
  min-height: 0;
  overflow: hidden;
}

.relative {
  position: relative;
}

.shrink-0 {
  flex-shrink: 0;
}

.overflow-y-auto {
  overflow-y: auto;
}

:root {
  --white: #fff;
  --black: #000;
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #e4e7ec;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-900: #101828;
  --brand-25: #fcfaff;
  --brand-50: #f9f5ff;
  --brand-100: #f4ebff;
  --brand-200: #e9d7fe;
  --brand-300: #d6bbfb;
  --brand-400: #b692f6;
  --brand-500: #9e77ed;
  --brand-600: #7f56d9;
  --brand-700: #6941c6;
  --brand-800: #53389e;
  --brand-900: #42307d;
  --error-25: #fffbfa;
  --error-50: #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f97066;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;
  --error-800: #912018;
  --error-900: #7a271a;
  --warning-25: #fffcf5;
  --warning-50: #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-300: #fec84b;
  --warning-400: #fdb022;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;
  --warning-800: #93370d;
  --warning-900: #7a2e0e;
  --success-25: #f6fef9;
  --success-50: #ecfdf3;
  --success-100: #d1fadf;
  --success-200: #a6f4c5;
  --success-300: #6ce9a6;
  --success-400: #32d583;
  --success-500: #12b76a;
  --success-600: #039855;
  --success-700: #027a48;
  --success-800: #05603a;
  --success-900: #054f31;
  --blue-gray-25: #fcfcfd;
  --blue-gray-50: #f8f9fc;
  --blue-gray-100: #eaecf5;
  --blue-gray-200: #d5d9eb;
  --blue-gray-300: #afb5d9;
  --blue-gray-400: #717bbc;
  --blue-gray-500: #4e5ba6;
  --blue-gray-600: #3e4784;
  --blue-gray-700: #363f72;
  --blue-gray-800: #293056;
  --blue-gray-900: #101323;
  --blue-light-25: #f5fbff;
  --blue-light-50: #f0f9ff;
  --blue-light-100: #e0f2fe;
  --blue-light-200: #b9e6fe;
  --blue-light-300: #7cd4fd;
  --blue-light-400: #36bffa;
  --blue-light-500: #0ba5ec;
  --blue-light-600: #0086c9;
  --blue-light-700: #026aa2;
  --blue-light-800: #065986;
  --blue-light-900: #0b4a6f;
  --blue-25: #f5faff;
  --blue-50: #eff8ff;
  --blue-100: #d1e9ff;
  --blue-200: #b2ddff;
  --blue-300: #84caff;
  --blue-400: #53b1fd;
  --blue-500: #2e90fa;
  --blue-600: #1570ef;
  --blue-700: #175cd3;
  --blue-800: #1849a9;
  --blue-900: #194185;
  --indigo-25: #f5f8ff;
  --indigo-50: #eef4ff;
  --indigo-100: #e0eaff;
  --indigo-200: #c7d7fe;
  --indigo-300: #a4bcfd;
  --indigo-400: #8098f9;
  --indigo-500: #6172f3;
  --indigo-600: #444ce7;
  --indigo-700: #3538cd;
  --indigo-800: #2d31a6;
  --indigo-900: #2d3282;
  --purple-25: #fafaff;
  --purple-50: #f4f3ff;
  --purple-100: #ebe9fe;
  --purple-200: #d9d6fe;
  --purple-300: #bdb4fe;
  --purple-400: #9b8afb;
  --purple-500: #7a5af8;
  --purple-600: #6938ef;
  --purple-700: #5925dc;
  --purple-800: #4a1fb8;
  --purple-900: #3e1c96;
  --pink-25: #fef6fb;
  --pink-50: #fdf2fa;
  --pink-100: #fce7f6;
  --pink-200: #fcceee;
  --pink-300: #faa7e0;
  --pink-400: #f670c7;
  --pink-500: #ee46bc;
  --pink-600: #dd2590;
  --pink-700: #c11574;
  --pink-800: #9e165f;
  --pink-900: #851651;
  --rose-25: #fff5f6;
  --rose-50: #fff1f3;
  --rose-100: #ffe4e8;
  --rose-200: #fecdd6;
  --rose-300: #fea3b4;
  --rose-400: #fd6f8e;
  --rose-500: #f63d68;
  --rose-600: #e31b54;
  --rose-700: #c01048;
  --rose-800: #a11043;
  --rose-900: #89123e;
  --orange-25: #fffaf5;
  --orange-50: #fff6ed;
  --orange-100: #ffead5;
  --orange-200: #fddcab;
  --orange-300: #feb273;
  --orange-400: #fd853a;
  --orange-500: #fb6514;
  --orange-600: #ec4a0a;
  --orange-700: #c4320a;
  --orange-800: #9c2a10;
  --orange-900: #7e2410;
}

.bg-white {
  background-color: var(--white);
}

.bg-black {
  background-color: var(--black);
}

.bg-gray-25 {
  background-color: var(--gray-25);
}

.bg-gray-50 {
  background-color: var(--gray-50);
}

.bg-gray-100 {
  background-color: var(--gray-100);
}

.bg-gray-200 {
  background-color: var(--gray-200);
}

.bg-gray-300 {
  background-color: var(--gray-300);
}

.bg-gray-400 {
  background-color: var(--gray-400);
}

.bg-gray-500 {
  background-color: var(--gray-500);
}

.bg-gray-600 {
  background-color: var(--gray-600);
}

.bg-gray-700 {
  background-color: var(--gray-700);
}

.bg-gray-800 {
  background-color: var(--gray-800);
}

.bg-gray-900 {
  background-color: var(--gray-900);
}

.bg-brand-25 {
  background-color: var(--brand-25);
}

.bg-brand-50 {
  background-color: var(--brand-50);
}

.bg-brand-100 {
  background-color: var(--brand-100);
}

.bg-brand-200 {
  background-color: var(--brand-200);
}

.bg-brand-300 {
  background-color: var(--brand-300);
}

.bg-brand-400 {
  background-color: var(--brand-400);
}

.bg-brand-500 {
  background-color: var(--brand-500);
}

.bg-brand-600 {
  background-color: var(--brand-600);
}

.bg-brand-700 {
  background-color: var(--brand-700);
}

.bg-brand-800 {
  background-color: var(--brand-800);
}

.bg-brand-900 {
  background-color: var(--brand-900);
}

.bg-error-25 {
  background-color: var(--error-25);
}

.bg-error-50 {
  background-color: var(--error-50);
}

.bg-error-100 {
  background-color: var(--error-100);
}

.bg-error-200 {
  background-color: var(--error-200);
}

.bg-error-300 {
  background-color: var(--error-300);
}

.bg-error-400 {
  background-color: var(--error-400);
}

.bg-error-500 {
  background-color: var(--error-500);
}

.bg-error-600 {
  background-color: var(--error-600);
}

.bg-error-700 {
  background-color: var(--error-700);
}

.bg-error-800 {
  background-color: var(--error-800);
}

.bg-error-900 {
  background-color: var(--error-900);
}

.bg-warning-25 {
  background-color: var(--warning-25);
}

.bg-warning-50 {
  background-color: var(--warning-50);
}

.bg-warning-100 {
  background-color: var(--warning-100);
}

.bg-warning-200 {
  background-color: var(--warning-200);
}

.bg-warning-300 {
  background-color: var(--warning-300);
}

.bg-warning-400 {
  background-color: var(--warning-400);
}

.bg-warning-500 {
  background-color: var(--warning-500);
}

.bg-warning-600 {
  background-color: var(--warning-600);
}

.bg-warning-700 {
  background-color: var(--warning-700);
}

.bg-warning-800 {
  background-color: var(--warning-800);
}

.bg-warning-900 {
  background-color: var(--warning-900);
}

.bg-success-25 {
  background-color: var(--success-25);
}

.bg-success-50 {
  background-color: var(--success-50);
}

.bg-success-100 {
  background-color: var(--success-100);
}

.bg-success-200 {
  background-color: var(--success-200);
}

.bg-success-300 {
  background-color: var(--success-300);
}

.bg-success-400 {
  background-color: var(--success-400);
}

.bg-success-500 {
  background-color: var(--success-500);
}

.bg-success-600 {
  background-color: var(--success-600);
}

.bg-success-700 {
  background-color: var(--success-700);
}

.bg-success-800 {
  background-color: var(--success-800);
}

.bg-success-900 {
  background-color: var(--success-900);
}

.bg-blue-gray-25 {
  background-color: var(--blue-gray-25);
}

.bg-blue-gray-50 {
  background-color: var(--blue-gray-50);
}

.bg-blue-gray-100 {
  background-color: var(--blue-gray-100);
}

.bg-blue-gray-200 {
  background-color: var(--blue-gray-200);
}

.bg-blue-gray-300 {
  background-color: var(--blue-gray-300);
}

.bg-blue-gray-400 {
  background-color: var(--blue-gray-400);
}

.bg-blue-gray-500 {
  background-color: var(--blue-gray-500);
}

.bg-blue-gray-600 {
  background-color: var(--blue-gray-600);
}

.bg-blue-gray-700 {
  background-color: var(--blue-gray-700);
}

.bg-blue-gray-800 {
  background-color: var(--blue-gray-800);
}

.bg-blue-gray-900 {
  background-color: var(--blue-gray-900);
}

.bg-blue-light-25 {
  background-color: var(--blue-light-25);
}

.bg-blue-light-50 {
  background-color: var(--blue-light-50);
}

.bg-blue-light-100 {
  background-color: var(--blue-light-100);
}

.bg-blue-light-200 {
  background-color: var(--blue-light-200);
}

.bg-blue-light-300 {
  background-color: var(--blue-light-300);
}

.bg-blue-light-400 {
  background-color: var(--blue-light-400);
}

.bg-blue-light-500 {
  background-color: var(--blue-light-500);
}

.bg-blue-light-600 {
  background-color: var(--blue-light-600);
}

.bg-blue-light-700 {
  background-color: var(--blue-light-700);
}

.bg-blue-light-800 {
  background-color: var(--blue-light-800);
}

.bg-blue-light-900 {
  background-color: var(--blue-light-900);
}

.bg-blue-25 {
  background-color: var(--blue-25);
}

.bg-blue-50 {
  background-color: var(--blue-50);
}

.bg-blue-100 {
  background-color: var(--blue-100);
}

.bg-blue-200 {
  background-color: var(--blue-200);
}

.bg-blue-300 {
  background-color: var(--blue-300);
}

.bg-blue-400 {
  background-color: var(--blue-400);
}

.bg-blue-500 {
  background-color: var(--blue-500);
}

.bg-blue-600 {
  background-color: var(--blue-600);
}

.bg-blue-700 {
  background-color: var(--blue-700);
}

.bg-blue-800 {
  background-color: var(--blue-800);
}

.bg-blue-900 {
  background-color: var(--blue-900);
}

.bg-indigo-25 {
  background-color: var(--indigo-25);
}

.bg-indigo-50 {
  background-color: var(--indigo-50);
}

.bg-indigo-100 {
  background-color: var(--indigo-100);
}

.bg-indigo-200 {
  background-color: var(--indigo-200);
}

.bg-indigo-300 {
  background-color: var(--indigo-300);
}

.bg-indigo-400 {
  background-color: var(--indigo-400);
}

.bg-indigo-500 {
  background-color: var(--indigo-500);
}

.bg-indigo-600 {
  background-color: var(--indigo-600);
}

.bg-indigo-700 {
  background-color: var(--indigo-700);
}

.bg-indigo-800 {
  background-color: var(--indigo-800);
}

.bg-indigo-900 {
  background-color: var(--indigo-900);
}

.bg-purple-25 {
  background-color: var(--purple-25);
}

.bg-purple-50 {
  background-color: var(--purple-50);
}

.bg-purple-100 {
  background-color: var(--purple-100);
}

.bg-purple-200 {
  background-color: var(--purple-200);
}

.bg-purple-300 {
  background-color: var(--purple-300);
}

.bg-purple-400 {
  background-color: var(--purple-400);
}

.bg-purple-500 {
  background-color: var(--purple-500);
}

.bg-purple-600 {
  background-color: var(--purple-600);
}

.bg-purple-700 {
  background-color: var(--purple-700);
}

.bg-purple-800 {
  background-color: var(--purple-800);
}

.bg-purple-900 {
  background-color: var(--purple-900);
}

.bg-pink-25 {
  background-color: var(--pink-25);
}

.bg-pink-50 {
  background-color: var(--pink-50);
}

.bg-pink-100 {
  background-color: var(--pink-100);
}

.bg-pink-200 {
  background-color: var(--pink-200);
}

.bg-pink-300 {
  background-color: var(--pink-300);
}

.bg-pink-400 {
  background-color: var(--pink-400);
}

.bg-pink-500 {
  background-color: var(--pink-500);
}

.bg-pink-600 {
  background-color: var(--pink-600);
}

.bg-pink-700 {
  background-color: var(--pink-700);
}

.bg-pink-800 {
  background-color: var(--pink-800);
}

.bg-pink-900 {
  background-color: var(--pink-900);
}

.bg-rose-25 {
  background-color: var(--rose-25);
}

.bg-rose-50 {
  background-color: var(--rose-50);
}

.bg-rose-100 {
  background-color: var(--rose-100);
}

.bg-rose-200 {
  background-color: var(--rose-200);
}

.bg-rose-300 {
  background-color: var(--rose-300);
}

.bg-rose-400 {
  background-color: var(--rose-400);
}

.bg-rose-500 {
  background-color: var(--rose-500);
}

.bg-rose-600 {
  background-color: var(--rose-600);
}

.bg-rose-700 {
  background-color: var(--rose-700);
}

.bg-rose-800 {
  background-color: var(--rose-800);
}

.bg-rose-900 {
  background-color: var(--rose-900);
}

.bg-orange-25 {
  background-color: var(--orange-25);
}

.bg-orange-50 {
  background-color: var(--orange-50);
}

.bg-orange-100 {
  background-color: var(--orange-100);
}

.bg-orange-200 {
  background-color: var(--orange-200);
}

.bg-orange-300 {
  background-color: var(--orange-300);
}

.bg-orange-400 {
  background-color: var(--orange-400);
}

.bg-orange-500 {
  background-color: var(--orange-500);
}

.bg-orange-600 {
  background-color: var(--orange-600);
}

.bg-orange-700 {
  background-color: var(--orange-700);
}

.bg-orange-800 {
  background-color: var(--orange-800);
}

.text-white {
  color: var(--white);
}

.text-black {
  color: var(--black);
}

.text-gray-25 {
  color: var(--gray-25);
}

.text-gray-50 {
  color: var(--gray-50);
}

.text-gray-100 {
  color: var(--gray-100);
}

.text-gray-200 {
  color: var(--gray-200);
}

.text-gray-300 {
  color: var(--gray-300);
}

.text-gray-400 {
  color: var(--gray-400);
}

.text-gray-500 {
  color: var(--gray-500);
}

.text-gray-600 {
  color: var(--gray-600);
}

.text-gray-700 {
  color: var(--gray-700);
}

.text-gray-800 {
  color: var(--gray-800);
}

.text-gray-900 {
  color: var(--gray-900);
}

.text-brand-25 {
  color: var(--brand-25);
}

.text-brand-50 {
  color: var(--brand-50);
}

.text-brand-100 {
  color: var(--brand-100);
}

.text-brand-200 {
  color: var(--brand-200);
}

.text-brand-300 {
  color: var(--brand-300);
}

.text-brand-400 {
  color: var(--brand-400);
}

.text-brand-500 {
  color: var(--brand-500);
}

.text-brand-600 {
  color: var(--brand-600);
}

.text-brand-700 {
  color: var(--brand-700);
}

.text-brand-800 {
  color: var(--brand-800);
}

.text-brand-900 {
  color: var(--brand-900);
}

.text-error-25 {
  color: var(--error-25);
}

.text-error-50 {
  color: var(--error-50);
}

.text-error-100 {
  color: var(--error-100);
}

.text-error-200 {
  color: var(--error-200);
}

.text-error-300 {
  color: var(--error-300);
}

.text-error-400 {
  color: var(--error-400);
}

.text-error-500 {
  color: var(--error-500);
}

.text-error-600 {
  color: var(--error-600);
}

.text-error-700 {
  color: var(--error-700);
}

.text-error-800 {
  color: var(--error-800);
}

.text-error-900 {
  color: var(--error-900);
}

.text-warning-25 {
  color: var(--warning-25);
}

.text-warning-50 {
  color: var(--warning-50);
}

.text-warning-100 {
  color: var(--warning-100);
}

.text-warning-200 {
  color: var(--warning-200);
}

.text-warning-300 {
  color: var(--warning-300);
}

.text-warning-400 {
  color: var(--warning-400);
}

.text-warning-500 {
  color: var(--warning-500);
}

.text-warning-600 {
  color: var(--warning-600);
}

.text-warning-700 {
  color: var(--warning-700);
}

.text-warning-800 {
  color: var(--warning-800);
}

.text-warning-900 {
  color: var(--warning-900);
}

.text-success-25 {
  color: var(--success-25);
}

.text-success-50 {
  color: var(--success-50);
}

.text-success-100 {
  color: var(--success-100);
}

.text-success-200 {
  color: var(--success-200);
}

.text-success-300 {
  color: var(--success-300);
}

.text-success-400 {
  color: var(--success-400);
}

.text-success-500 {
  color: var(--success-500);
}

.text-success-600 {
  color: var(--success-600);
}

.text-success-700 {
  color: var(--success-700);
}

.text-success-800 {
  color: var(--success-800);
}

.text-success-900 {
  color: var(--success-900);
}

.text-blue-gray-25 {
  color: var(--blue-gray-25);
}

.text-blue-gray-50 {
  color: var(--blue-gray-50);
}

.text-blue-gray-100 {
  color: var(--blue-gray-100);
}

.text-blue-gray-200 {
  color: var(--blue-gray-200);
}

.text-blue-gray-300 {
  color: var(--blue-gray-300);
}

.text-blue-gray-400 {
  color: var(--blue-gray-400);
}

.text-blue-gray-500 {
  color: var(--blue-gray-500);
}

.text-blue-gray-600 {
  color: var(--blue-gray-600);
}

.text-blue-gray-700 {
  color: var(--blue-gray-700);
}

.text-blue-gray-800 {
  color: var(--blue-gray-800);
}

.text-blue-gray-900 {
  color: var(--blue-gray-900);
}

.text-blue-light-25 {
  color: var(--blue-light-25);
}

.text-blue-light-50 {
  color: var(--blue-light-50);
}

.text-blue-light-100 {
  color: var(--blue-light-100);
}

.text-blue-light-200 {
  color: var(--blue-light-200);
}

.text-blue-light-300 {
  color: var(--blue-light-300);
}

.text-blue-light-400 {
  color: var(--blue-light-400);
}

.text-blue-light-500 {
  color: var(--blue-light-500);
}

.text-blue-light-600 {
  color: var(--blue-light-600);
}

.text-blue-light-700 {
  color: var(--blue-light-700);
}

.text-blue-light-800 {
  color: var(--blue-light-800);
}

.text-blue-light-900 {
  color: var(--blue-light-900);
}

.text-blue-25 {
  color: var(--blue-25);
}

.text-blue-50 {
  color: var(--blue-50);
}

.text-blue-100 {
  color: var(--blue-100);
}

.text-blue-200 {
  color: var(--blue-200);
}

.text-blue-300 {
  color: var(--blue-300);
}

.text-blue-400 {
  color: var(--blue-400);
}

.text-blue-500 {
  color: var(--blue-500);
}

.text-blue-600 {
  color: var(--blue-600);
}

.text-blue-700 {
  color: var(--blue-700);
}

.text-blue-800 {
  color: var(--blue-800);
}

.text-blue-900 {
  color: var(--blue-900);
}

.text-indigo-25 {
  color: var(--indigo-25);
}

.text-indigo-50 {
  color: var(--indigo-50);
}

.text-indigo-100 {
  color: var(--indigo-100);
}

.text-indigo-200 {
  color: var(--indigo-200);
}

.text-indigo-300 {
  color: var(--indigo-300);
}

.text-indigo-400 {
  color: var(--indigo-400);
}

.text-indigo-500 {
  color: var(--indigo-500);
}

.text-indigo-600 {
  color: var(--indigo-600);
}

.text-indigo-700 {
  color: var(--indigo-700);
}

.text-indigo-800 {
  color: var(--indigo-800);
}

.text-indigo-900 {
  color: var(--indigo-900);
}

.text-purple-25 {
  color: var(--purple-25);
}

.text-purple-50 {
  color: var(--purple-50);
}

.text-purple-100 {
  color: var(--purple-100);
}

.text-purple-200 {
  color: var(--purple-200);
}

.text-purple-300 {
  color: var(--purple-300);
}

.text-purple-400 {
  color: var(--purple-400);
}

.text-purple-500 {
  color: var(--purple-500);
}

.text-purple-600 {
  color: var(--purple-600);
}

.text-purple-700 {
  color: var(--purple-700);
}

.text-purple-800 {
  color: var(--purple-800);
}

.text-purple-900 {
  color: var(--purple-900);
}

.text-pink-25 {
  color: var(--pink-25);
}

.text-pink-50 {
  color: var(--pink-50);
}

.text-pink-100 {
  color: var(--pink-100);
}

.text-pink-200 {
  color: var(--pink-200);
}

.text-pink-300 {
  color: var(--pink-300);
}

.text-pink-400 {
  color: var(--pink-400);
}

.text-pink-500 {
  color: var(--pink-500);
}

.text-pink-600 {
  color: var(--pink-600);
}

.text-pink-700 {
  color: var(--pink-700);
}

.text-pink-800 {
  color: var(--pink-800);
}

.text-pink-900 {
  color: var(--pink-900);
}

.text-rose-25 {
  color: var(--rose-25);
}

.text-rose-50 {
  color: var(--rose-50);
}

.text-rose-100 {
  color: var(--rose-100);
}

.text-rose-200 {
  color: var(--rose-200);
}

.text-rose-300 {
  color: var(--rose-300);
}

.text-rose-400 {
  color: var(--rose-400);
}

.text-rose-500 {
  color: var(--rose-500);
}

.text-rose-600 {
  color: var(--rose-600);
}

.text-rose-700 {
  color: var(--rose-700);
}

.text-rose-800 {
  color: var(--rose-800);
}

.text-rose-900 {
  color: var(--rose-900);
}

.text-orange-25 {
  color: var(--orange-25);
}

.text-orange-50 {
  color: var(--orange-50);
}

.text-orange-100 {
  color: var(--orange-100);
}

.text-orange-200 {
  color: var(--orange-200);
}

.text-orange-300 {
  color: var(--orange-300);
}

.text-orange-400 {
  color: var(--orange-400);
}

.text-orange-500 {
  color: var(--orange-500);
}

.text-orange-600 {
  color: var(--orange-600);
}

.text-orange-700 {
  color: var(--orange-700);
}

.text-orange-800 {
  color: var(--orange-800);
}

.breadcrumbs {
  font-size: 12px;
  color: #98A2B3;
  margin-bottom: 24px;
  overflow: hidden;
}
.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}
.breadcrumbs li {
  text-wrap: nowrap;
}
.breadcrumbs li::after {
  content: "›";
  font-size: 24px;
  line-height: 1;
  padding: 0 6px;
  margin-left: 8px;
  vertical-align: sub;
}
.breadcrumbs li:hover {
  color: #475467;
}
.breadcrumbs li:last-child {
  color: #475467;
}
.breadcrumbs li:last-child::after {
  visibility: hidden;
}

.back-button {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 600;
  color: #6941C6;
}
.back-button img {
  display: inline-block;
  vertical-align: sub;
}
.back-button:hover {
  opacity: 0.6;
}

.preloader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  overflow: auto;
}
.preloader__wrapper {
  width: 100%;
  min-height: 100%;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.preloader__content {
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.preloader__image {
  max-width: 250px;
  width: 100%;
  margin-bottom: 40px;
}
.preloader__image img {
  width: 100%;
}
.preloader__bar {
  height: 12px;
  width: 100%;
  max-width: 480px;
  border-radius: 6px;
  background-color: #E4E7EC;
  position: relative;
}
.preloader__filled {
  position: absolute;
  top: 0px;
  left: -1px;
  right: -1px;
  bottom: 0px;
  border-radius: 6px;
  background-color: #7F56D9;
}
.preloader__text {
  text-align: center;
  font-family: "Inter", sans-serif;
  margin-top: 16px;
  font-size: 16px;
  color: #475467;
}
.preloader__spinner {
  width: 64px;
  height: 64px;
  border-radius: 100px;
  border: 6px solid white;
  border-top-color: #7F56D9;
  animation: spinning 1s linear infinite;
}
.preloader.--dark {
  background-color: rgba(16, 24, 40, 0.7);
}
.preloader.--dark .preloader__bar {
  background-color: #fff;
  background-color: rgba(16, 24, 40, 0.7);
}
.preloader.--dark .preloader__text {
  color: white;
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.not-found {
  padding-top: 40px;
  padding-bottom: 48px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: white;
}
.not-found__icon {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
  text-align: center;
}
.not-found__text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.not-found__text h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #101828;
}
.not-found__text p {
  font-size: 14px;
  color: #475467;
}
.not-found__buttons {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 352px;
  margin-left: auto;
  margin-right: auto;
}
.not-found__buttons > * {
  flex: 1;
}

.button {
  padding: 4px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  background-color: unset;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
}
.button img {
  transition: 0.3s;
}

.button.button-small {
  height: 36px;
  font-size: 14px;
  padding: 8px 14px;
}

.button.--without-text {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  aspect-ratio: 1;
  padding: unset !important;
}

.button-gray-hover:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.button.--block {
  display: flex;
}

.button[disabled],
.button.--disabled,
.popup-user-agreement:not(:has(.cssCheckboxTrigger:checked)) .button.cssButtonAction {
  cursor: unset;
  opacity: 0.4;
}
.button[disabled]:hover,
.button.--disabled:hover,
.popup-user-agreement:not(:has(.cssCheckboxTrigger:checked)) .button.cssButtonAction:hover {
  opacity: 0.4;
}

.button-blue,
.button-course-continue,
.button-lesson-test,
.button-lesson-next {
  color: white;
  background-color: #7F56D9;
}
.button-blue svg,
.button-course-continue svg,
.button-lesson-test svg,
.button-lesson-next svg {
  stroke: #F9FAFB;
}
.button-blue:not([disabled]):not(.--disabled):hover,
.button-course-continue:not([disabled]):not(.--disabled):hover,
.button-lesson-test:not([disabled]):not(.--disabled):hover,
.button-lesson-next:not([disabled]):not(.--disabled):hover {
  background-color: #6941C6;
}
.button-blue:not([disabled]):not(.--disabled):focus,
.button-course-continue:not([disabled]):not(.--disabled):focus,
.button-lesson-test:not([disabled]):not(.--disabled):focus,
.button-lesson-next:not([disabled]):not(.--disabled):focus {
  outline: 4px solid #F4EBFF;
}

.button-outline {
  border: 1px solid #D0D5DD;
  background-color: white;
  text-wrap: nowrap;
}
.button-outline.--bg-white {
  background-color: #fff;
}
.button-outline:not([disabled]):not(.--disabled):hover {
  background-color: #F9FAFB;
}
.button-outline:not([disabled]):not(.--disabled):focus {
  outline: 4px solid #F2F4F7;
}
.button-outline.active {
  outline: 4px solid #F2F4F7;
}
.button-outline .ticket-dot {
  position: absolute;
  top: 5px;
  right: 5px;
}

.button-blue-text,
.button-red-text,
.button-context-text,
.button-green-text,
.button-gray-text,
.button-table-chevron-down {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: unset;
  font-size: 14px;
  font-weight: 600;
  line-height: 143%;
}
.button-blue-text:not([disabled]):not(.--disabled):hover,
.button-red-text:not([disabled]):not(.--disabled):hover,
.button-context-text:not([disabled]):not(.--disabled):hover,
.button-green-text:not([disabled]):not(.--disabled):hover,
.button-gray-text:not([disabled]):not(.--disabled):hover,
.button-table-chevron-down:not([disabled]):not(.--disabled):hover {
  opacity: 0.6;
}

.button-blue-text {
  color: #6941c6;
}

.button-red-text {
  color: #B42318;
}

.button-green-text {
  color: #039855;
}

.button-context-text,
.button-gray-text {
  color: #475467;
}

.button.button-blue-text {
  flex: unset;
}
.button.button-blue-text:not([disabled]):not(.--disabled):hover {
  opacity: unset;
  background-color: #F9F5FF;
}

.button.button-red-text {
  flex: unset;
}
.button.button-red-text:not([disabled]):not(.--disabled):hover {
  opacity: unset;
  background-color: #FEF3F2;
}

.button-table-chevron-down {
  padding: 2px 8px;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #344054;
}

.button-gray,
.button-lesson-prev {
  border: 1px solid #E4E7EC;
  background-color: #F9FAFB;
  color: #344054;
}
.button-gray svg,
.button-lesson-prev svg {
  stroke: #344054;
}
.button-gray:not([disabled]):not(.--disabled):hover,
.button-lesson-prev:not([disabled]):not(.--disabled):hover {
  opacity: 0.6;
}

.button-sort {
  border: 1px solid #D0D5DD;
  background-color: unset;
  text-wrap: nowrap;
  width: 220px;
  justify-content: space-between;
}
.button-sort:hover {
  background-color: rgba(208, 213, 221, 0.3019607843);
}

.button-play {
  font-size: 14px;
  color: #6941C6;
  background-color: #F9F5FF;
}
.button-play:hover {
  opacity: 0.6;
}

.button-filter {
  background-color: #F9F5FF;
  color: #6941C6;
  text-wrap: nowrap;
}
.button-filter:hover {
  opacity: 0.7;
}

.button-red {
  color: white;
  background-color: #d92d20;
}
.button-red:not([disabled]):not(.--disabled):hover {
  opacity: 0.6;
}

.button-light-blue {
  color: #6941C6;
  background-color: #F9F5FF;
}
.button-light-blue:not([disabled]):not(.--disabled):hover {
  opacity: 0.6;
}

.button-red-text.--without-text:not(:hover) img {
  content: url("/images/buttons-icons/delete-gray-20x20.svg");
}

.button-blue-text.--without-text:not(:hover) img {
  content: url("/images/buttons-icons/edit-gray-20x20.svg");
}

.form-control,
input:not([type=checkbox]):not([type=radio]),
textarea,
select {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background-color: white;
  border: 1px solid #d0d5dd;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #101828;
}
.form-control::-moz-placeholder, input:not([type=checkbox]):not([type=radio])::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #667085;
}
.form-control::placeholder,
input:not([type=checkbox]):not([type=radio])::placeholder,
textarea::placeholder,
select::placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #667085;
}
.form-control:not([disable]):not([readonly]):focus,
input:not([type=checkbox]):not([type=radio]):not([disable]):not([readonly]):focus,
textarea:not([disable]):not([readonly]):focus,
select:not([disable]):not([readonly]):focus {
  border-color: #D6BBFB;
  box-shadow: 0 0 0 4px #f4ebff, 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  box-shadow: 0px 0px 0px 4px #F4EBFF, 0px 1px 2px 0px rgba(16, 24, 40, 0.0509803922);
}
.form-control[readonly],
input:not([type=checkbox]):not([type=radio])[readonly],
textarea[readonly],
select[readonly] {
  color: #101828;
  background-color: #F9FAFB;
}
.form-control[disabled],
input:not([type=checkbox]):not([type=radio])[disabled],
textarea[disabled],
select[disabled] {
  color: #667085;
  background-color: #F9FAFB;
}
.form-control.--green-border,
input:not([type=checkbox]):not([type=radio]).--green-border,
textarea.--green-border,
select.--green-border {
  border-color: #039855;
}
.form-control.--red-border,
input:not([type=checkbox]):not([type=radio]).--red-border,
textarea.--red-border,
select.--red-border {
  border-color: #D92D20;
}

.form-control,
input:not([type=checkbox]):not([type=radio]),
select {
  height: 44px;
}

.form-control.--max-height-100 {
  overflow: hidden;
  max-height: 110px;
}

div.form-control,
span.form-control {
  white-space: pre-wrap;
  min-height: 44px;
  height: unset;
  word-wrap: break-word;
}

select {
  padding: 11.5px 14px;
}

textarea {
  resize: vertical;
  min-height: 160px;
  max-height: 300px;
}
textarea.--as-input {
  min-height: 45px;
}

.wrapper .input-email,
.wrapper .input-tel,
.wrapper .input-time,
.wrapper .input-search,
.wrapper .input-date {
  display: block;
  position: relative;
}
.wrapper .input-email input,
.wrapper .input-tel input,
.wrapper .input-time input,
.wrapper .input-search input,
.wrapper .input-date input {
  padding-left: 42px;
}
.wrapper .input-email::before,
.wrapper .input-tel::before,
.wrapper .input-time::before,
.wrapper .input-search::before,
.wrapper .input-date::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}
.wrapper .input-email input::-webkit-calendar-picker-indicator,
.wrapper .input-tel input::-webkit-calendar-picker-indicator,
.wrapper .input-time input::-webkit-calendar-picker-indicator,
.wrapper .input-search input::-webkit-calendar-picker-indicator,
.wrapper .input-date input::-webkit-calendar-picker-indicator {
  background: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.input-email::before {
  background-image: url("/images/input-mail-icon.svg");
}

.input-tel::before {
  background-image: url("/images/input-tel-icon.svg");
}

.input-time::before {
  background-image: url("/images/input-time-icon.svg");
}

.input-search::before {
  background-image: url("/images/search.svg");
}

.input-date::before {
  background-image: url("/images/input-calendar.svg");
}

.input,
.form-block {
  font-size: 14px;
  font-weight: 500;
  line-height: 143%;
  color: #344054;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wrapper .input-password,
.wrapper .input-close,
.wrapper .input-chain {
  position: relative;
}
.wrapper .input-password input,
.wrapper .input-close input,
.wrapper .input-chain input {
  padding-right: 42px;
}
.wrapper .input-password input-trigger,
.wrapper .input-close input-trigger,
.wrapper .input-chain input-trigger {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  cursor: pointer;
}

.input-password:has(input[type=password]) input-trigger {
  background-image: url("/images/input-password.svg");
}

.input-password:has(input[type=text]) input-trigger {
  background-image: url("/images/input-password-opened.svg");
}

.input-close input-trigger {
  background-image: url("/images/platform-cross.svg");
}

.input-chain input-trigger {
  background-image: url("/images/input-chain.svg");
}

.input-file {
  padding: 16px 24px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #e4e7ec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: #475467;
  text-align: center;
}
.input-file img {
  margin-bottom: 8px;
}
.input-file b {
  color: #6941c6;
}

.input-search-select {
  position: relative;
}
.input-search-select__body {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10;
  top: calc(100% + 6px);
  border: 1px solid #F2F4F7;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}
.input-search-select__body.--content-max-360 {
  width: -moz-max-content;
  width: max-content;
  max-width: 360px;
}
.input-search-select__body ul {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.input-search-select__body li {
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #101828;
  cursor: pointer;
}
.input-search-select__body li:hover {
  color: #344054;
  background-color: #f9fafb;
}
.input-search-select__body li.--no-hover {
  cursor: unset;
}
.input-search-select__body li.--no-hover:hover {
  color: #101828;
  background-color: unset;
}

.input-search-select.--roles li {
  padding: 16px 24px;
  border-bottom: 1px solid #E4E7EC;
  font-size: 14px;
  font-weight: 500;
  color: #101828;
}
.input-search-select.--roles li:last-child {
  border-bottom: unset;
}
.input-search-select.--roles .input-search-select__body {
  overflow: unset;
}

.wrapper .input-with-select,
.input-wrapper-with-right-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.input-with-left-item {
  position: relative;
}
.input-with-left-item input.input-with-left-item__input {
  padding-left: 42px;
}
.input-with-left-item__item {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #667085;
}

.input-with-hints {
  display: flex;
  gap: 8px;
}
.input-with-hints__trigger {
  align-self: center;
  position: relative;
}
.input-with-hints__content {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 320px;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background-color: white;
  font-size: 12px;
  color: #475467;
  display: none;
}
.input-with-hints__content li {
  list-style-type: disc;
  list-style-position: inside;
}
.input-with-hints__content.--right {
  right: 22px;
}
.input-with-hints__content.--left {
  left: 22px;
}
.input-with-hints__trigger:hover .input-with-hints__content {
  display: block;
}

.input-with-dot {
  display: block;
  position: relative;
}
.input-with-dot input:not([type=checkbox]):not([type=radio]),
.input-with-dot select {
  padding-left: 32px;
}
.input-with-dot__dot {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 10px;
}
.input-with-dot__element {
  padding-left: 32px;
}

.wrapper .multi-input {
  display: block;
  position: relative;
}
.wrapper .multi-input:has(left-item) input {
  padding-left: 42px;
}
.wrapper .multi-input:has(right-item) input {
  padding-right: 42px;
}
.wrapper .multi-input left-item {
  flex-shrink: 0;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%) translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .multi-input right-item {
  flex-shrink: 0;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%) translateX(50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .multi-input right-chevron {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}
.wrapper .multi-input.--opened right-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.wrapper .multi-input-select {
  position: relative;
}
.wrapper .multi-input-select:has(left-item) {
  padding-left: 42px;
}
.wrapper .multi-input-select left-item {
  flex-shrink: 0;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%) translateX(-50%);
}

.input-search-settings {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #E4E7EC;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.input-search-settings__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.input-search-settings__title-right {
  margin-left: auto;
}
.input-search-settings.--hidden {
  visibility: hidden;
}

.platform-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  width: -moz-fit-content;
  width: fit-content;
}

.platform-checkbox, .lesson-test__question input[type=checkbox] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  accent-color: #7F56D9;
}
.platform-checkbox::before, .lesson-test__question input[type=checkbox]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/images/checkbox-empty.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.platform-checkbox:checked:before, .lesson-test__question input[type=checkbox]:checked:before {
  background-image: url("/images/checkbox-filled.svg");
}

.platform-checkbox-plus-minus {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  accent-color: #7F56D9;
}
.platform-checkbox-plus-minus::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/images/checkbox-minus.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.platform-checkbox-plus-minus:checked:before {
  background-image: url("/images/checkbox-plus.svg");
}

.open-in-table-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px;
  border: 1px solid #7F56D9;
  background-color: #F9F5FF;
  position: relative;
}
.open-in-table-checkbox::before {
  content: "+";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #7F56D9;
  line-height: 14px;
  text-align: center;
}
.open-in-table-checkbox:checked::before {
  content: "–";
}

.platform-radio-2 {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  accent-color: #7F56D9;
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  border-radius: 100%;
  background-color: white;
  border: 1px solid #D0D5DD;
  box-sizing: content-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.platform-radio-2::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #D0D5DD;
  flex-shrink: 0;
}
.platform-radio-2:checked {
  border-color: #7F56D9;
}
.platform-radio-2:checked::before {
  background-color: #7F56D9;
}
.platform-radio-2.--green:checked {
  border-color: #039855;
}
.platform-radio-2.--green:checked::before {
  background-color: #039855;
}
.platform-radio-2.--red:checked {
  border-color: #D92D20;
}
.platform-radio-2.--red:checked::before {
  background-color: #D92D20;
}

.platform-radio, .lesson-test__question input[type=radio] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  accent-color: #7F56D9;
}
.platform-radio::before, .lesson-test__question input[type=radio]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/images/radio-empty.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.platform-radio:checked:before, .lesson-test__question input[type=radio]:checked:before {
  background-image: url("/images/radio-filled.svg");
}

.platform-leads-table, .platform-table {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 3px 0 rgba(16, 24, 40, 0.1);
  background: #fff;
}
.platform-leads-table__head, .platform-table__head {
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  color: #475467;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.platform-leads-table__head img, .platform-table__head img {
  cursor: pointer;
  flex-shrink: 0;
}
.platform-leads-table__head img:hover, .platform-table__head img:hover {
  opacity: 0.6;
}
.platform-leads-table__head-filters {
  padding: 14px 24px !important;
  background: unset !important;
  position: relative;
  text-align: left;
  overflow: visible !important;
}
.platform-leads-table__filter-wrapper {
  height: 44px;
  width: 100%;
  position: relative;
}
.platform-leads-table__filter-inner {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
}
.platform-leads-table__filter-inner label,
.platform-leads-table__filter-inner input {
  width: 100%;
  min-width: 200px;
}
.platform-leads-table__date {
  font-size: 14px;
  font-weight: 400;
  line-height: 143%;
  color: #101828;
}
.platform-leads-table__name {
  font-size: 14px;
  font-weight: 400;
  line-height: 143%;
  color: #101828;
}
.platform-leads-table__email {
  font-size: 14px;
  font-weight: 400;
  line-height: 143%;
  color: #475467;
}
.platform-leads-table__buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.platform-leads-table__buttons img {
  cursor: pointer;
}
.platform-leads-table__buttons img:hover {
  opacity: 0.6;
}
.platform-leads-table table, .platform-table table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
}
.platform-leads-table th, .platform-table th {
  height: 60px;
  padding: 12px 24px;
  background: #f9fafb;
  border-bottom: 1px solid #e4e7ec;
}
@media (max-width: 1100px) {
  .platform-leads-table th, .platform-table th {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.platform-leads-table td, .platform-table td {
  padding: 16px 24px;
  border-top: 1px solid #e4e7ec;
  border-bottom: 1px solid #e4e7ec;
}
@media (max-width: 1100px) {
  .platform-leads-table td, .platform-table td {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.platform-leads-table th, .platform-table th,
.platform-leads-table td,
.platform-table td {
  white-space: nowrap;
  overflow: hidden;
  max-width: 250px;
  min-width: 250px;
}
.platform-leads-table td:last-child, .platform-table td:last-child,
.platform-leads-table th:last-child,
.platform-table th:last-child,
.platform-leads-table td:has(.button),
.platform-table td:has(.button),
.platform-leads-table td:has(.platform-participant),
.platform-table td:has(.platform-participant) {
  max-width: unset;
}
.platform-leads-table__footer {
  font-size: 14px;
  font-weight: 500;
  line-height: 143%;
  color: #344054;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 16px 24px;
}
.platform-leads-table .input-search, .platform-table .input-search {
  position: relative;
}
.platform-leads-table .input-search::before, .platform-table .input-search::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("/images/search.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}
.platform-leads-table .input-search input, .platform-table .input-search input {
  display: inline-block;
  padding-left: 42px;
}
.platform-leads-table filter-statuses, .platform-table filter-statuses {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;
  font-size: 14px;
  font-weight: 400;
  margin: 0 24px;
  border-radius: 8px;
  background: #f9fafb;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}
.platform-leads-table filter-statuses li, .platform-table filter-statuses li {
  cursor: pointer;
}
.platform-leads-table filter-statuses li:hover, .platform-table filter-statuses li:hover {
  opacity: 0.6;
}
.platform-leads-table filter-statuses.active, .platform-table filter-statuses.active {
  grid-template-rows: 1fr;
  padding: 10px 14px;
  border: 1px solid #D0D5DD;
}
.platform-leads-table button#filter-statuses, .platform-table button#filter-statuses {
  width: 100%;
  justify-content: space-between;
}
.platform-leads-table button#filter-statuses.active img, .platform-table button#filter-statuses.active img {
  transform: rotate(180deg);
}
.platform-leads-table__empty-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding-top: 40px;
  padding-bottom: 48px;
  background-color: #fff;
}
.platform-leads-table__empty-message img {
  margin-bottom: 12px;
}
.platform-leads-table__empty-message message-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  text-align: center;
  color: #101828;
}
.platform-leads-table__empty-message message-text {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 143%;
  text-align: center;
  color: #475467;
}

.platform-table__cell {
  color: #101828;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.platform-table__cell.--gray-color {
  color: #475467;
}
.platform-table__buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.platform-table__buttons > * {
  flex-shrink: 0;
}
.platform-table__buttons .button-blue-text:not(:hover) {
  color: #475467;
}
.platform-table__buttons .button-red-text.--without-text {
  filter: grayscale(1);
}
.platform-table__buttons .button-red-text.--without-text:hover {
  filter: grayscale(0);
}
.platform-table__buttons.--end {
  justify-content: flex-end;
}
@media (hover: hover) {
  .platform-table tr.--hoverable:hover {
    cursor: pointer;
    background-color: #f9fafb;
  }
}
.platform-table.--roles tbody td {
  padding-top: 4px;
  padding-bottom: 4px;
  height: 52px;
}
.platform-table.--roles .platform-table__cell {
  white-space: normal;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: nowrap;
}
.tag button {
  font-size: 16px;
}
.tag img {
  flex-shrink: 0;
}
.tag--passed, .tag.--passed {
  color: #027A48;
  background-color: #ECFDF3;
}
.tag--in-process, .tag.--in-process {
  color: #B54708;
  background-color: #FFFAEB;
}
.tag--new, .tag.--new {
  color: #B42318;
  background-color: #FEF3F2;
}
.tag--blue, .tag.--blue {
  color: #175CD3;
  background-color: #EFF8FF;
}
.tag--red, .tag.--red {
  color: #C01048;
  background-color: #fff1f3;
}
.tag--school, .tag.--school {
  color: #c4320a;
  background-color: #fff6ed;
}
.tag--square, .tag.--square {
  border-radius: 2px;
}

.buttons-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.text-buttons {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.to-edit-button__container {
  position: relative;
  display: flex;
  align-items: flex-start;
}
.to-edit-button__left {
  flex: 1;
  width: 100%;
}
.to-edit-button__left:has(.platform-personal__item) {
  max-width: 820px;
}
.to-edit-button__right {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 600px) {
  .to-edit-button__right span {
    display: none;
  }
}
.to-edit-button__right.--left {
  gap: 10px;
  margin: 0;
}
.to-edit-button__right.--center {
  align-self: center;
}
.to-edit-button__right.--top {
  align-self: flex-start;
}
.to-edit-button__right.--bottom {
  align-self: flex-end;
}
.to-edit-button__move, .to-edit-button__drag {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  transform: translateX(-100%);
  position: absolute;
  top: 0;
  left: -6px;
}
.to-edit-button__move button, .to-edit-button__drag button {
  background-color: unset;
}
.to-edit-button__drag {
  justify-content: center;
  height: 100%;
}

.emphasize-link {
  color: rgba(0, 0, 0, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.avatar-image {
  flex: unset !important;
  flex-shrink: 0 !important;
  width: 64px;
  height: 64px;
  border-radius: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  color: #7F56D9;
}
.avatar-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.avatar-image.--header {
  width: 40px;
  height: 40px;
}
.avatar-image.--text {
  background-color: #F9F5FF;
}

hr {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e4e7ec;
}

.horizontal-line-top {
  padding-top: 12px;
  border-top: 1px solid #E4E7EC;
}

.horizontal-line-bottom {
  padding-bottom: 12px;
  border-top: 1px solid #E4E7EC;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pagination__text {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}
.pagination__two-buttons {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 600px) {
  .pagination__single-button button span {
    display: none;
  }
  .pagination__single-button button {
    width: 40px;
    height: 40px;
    padding: 5px;
  }
}
.pagination__list {
  display: inline-flex;
  align-items: center;
}
.pagination__list li {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #667085;
  cursor: pointer;
}
.pagination__list li.active {
  color: #7F56D9;
  background-color: #F9F5FF;
}
.pagination__list li:not(.--empty):not(.active):hover {
  opacity: 0.6;
}
.pagination__combined {
  display: flex;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
}
@media (max-width: 600px) {
  .pagination__combined button span {
    display: none;
  }
  .pagination__combined button {
    width: 40px;
    height: 40px;
    padding: 5px;
  }
}
.pagination__combined button {
  border: unset;
}
.pagination__combined ul {
  display: flex;
  align-items: center;
}
.pagination__combined li {
  width: 40px;
  height: 100%;
  padding: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #1D2939;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination__combined li.active {
  background-color: #F9FAFB;
}
.pagination__combined li:not(.--empty):not(.active):hover {
  opacity: 0.6;
}
.pagination__combined li {
  border-left: 1px solid #D0D5DD;
}
.pagination__combined li:last-child {
  border-right: 1px solid #D0D5DD;
}

.custom-scroll::-webkit-scrollbar {
  width: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
  background-color: #F2F4F7;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background-color: #7F56D9;
}

.custom-scroll-horizontal::-webkit-scrollbar, .overview-courses__grid::-webkit-scrollbar, .platform-table .overflow-x-auto::-webkit-scrollbar {
  height: 4px;
}
.custom-scroll-horizontal::-webkit-scrollbar-track, .overview-courses__grid::-webkit-scrollbar-track, .platform-table .overflow-x-auto::-webkit-scrollbar-track {
  background-color: #F2F4F7;
}
.custom-scroll-horizontal::-webkit-scrollbar-thumb, .overview-courses__grid::-webkit-scrollbar-thumb, .platform-table .overflow-x-auto::-webkit-scrollbar-thumb {
  background-color: #7F56D9;
}

.custom-scroll-horizontal-gray::-webkit-scrollbar, .platform-student-tabs ul::-webkit-scrollbar, .platform-tabs ul::-webkit-scrollbar {
  height: 2px;
}
.custom-scroll-horizontal-gray::-webkit-scrollbar-track, .platform-student-tabs ul::-webkit-scrollbar-track, .platform-tabs ul::-webkit-scrollbar-track {
  background-color: #F2F4F7;
}
.custom-scroll-horizontal-gray::-webkit-scrollbar-thumb, .platform-student-tabs ul::-webkit-scrollbar-thumb, .platform-tabs ul::-webkit-scrollbar-thumb {
  background-color: #D0D5DD;
  border-radius: 2px;
}

.platform-person,
.filter__person {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #101828;
}
.platform-person p,
.filter__person p {
  font-size: 16px;
  font-weight: 600;
}
.platform-person > button,
.filter__person > button {
  margin-left: auto;
}
.platform-person label,
.filter__person label {
  flex-grow: 2;
}
.platform-person.--context-menu-opened,
.filter__person.--context-menu-opened {
  background-color: #F9F5FF;
}
.platform-person .tag,
.filter__person .tag {
  margin-left: 8px;
}

.spinning {
  animation-name: spinning;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.border-divider-y > * {
  border-bottom: 1px solid #e4e7ec;
}
.border-divider-y > *:last-child {
  border-bottom: unset;
}

.text-16-bold {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
}

.text-16-bold-blue {
  font-size: 16px;
  font-weight: 600;
  color: #7F56D9;
}

h1,
.h1 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: #101828;
}
@media (max-width: 768px) {
  h1,
  .h1 {
    font-size: 24px;
  }
}

.h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 133%;
  color: #101828;
}
@media (max-width: 768px) {
  .h2 {
    font-size: 20px;
  }
}

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

.no-wrap, .platform-games__item-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text-12 {
  font-size: 12px;
}

.text-14 {
  font-size: 14px;
}

.text-16 {
  font-size: 16px;
}

.text-18 {
  font-size: 18px;
}
@media (max-width: 768px) {
  .text-18 {
    font-size: 16px;
  }
}

.text-500 {
  font-weight: 500;
}

.text-600 {
  font-weight: 600;
}

.text-700 {
  font-weight: 700;
}

.text-800 {
  font-weight: 800;
}

.text-height-1 {
  line-height: 1;
}

.text-gray-600 {
  color: #475467;
}

.text-gray-700 {
  color: #344054;
}

.text-gray-900 {
  color: #101828;
}

.text-success-700 {
  color: #027A48;
}

.text-warning-600 {
  color: #DC6803;
}

.text-error-700 {
  color: #B42318;
}

.text-brand-700 {
  color: #6941C6;
}

.text-6941C6 {
  color: #6941C6;
}

.list-with-dots li {
  position: relative;
  padding-left: 20px;
}
.list-with-dots li::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 8px;
  background-color: #475467;
  position: absolute;
  left: 7px;
  top: 10px;
}
.list-with-dots.text-14 li::before {
  top: 10px;
}
.list-with-dots.text-16 li::before {
  top: 12px;
}

.right-click-wrapper,
.dropdown-wrapper,
.hover-wrapper {
  position: relative;
  display: inline-block;
}

.right-click-popup {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 3;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  padding-bottom: 8px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #F2F4F7;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
}
.right-click-popup.--right {
  left: unset;
  right: 0;
}
.right-click-popup.--inline {
  left: unset;
  right: unset;
  bottom: unset;
  top: unset;
}
.right-click-popup > button,
.right-click-popup > a {
  padding: 10px 16px;
}

.hover-wrapper:hover .hover-wrapper__content {
  display: block;
}
.hover-wrapper > button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hover-wrapper__content {
  display: none;
  position: absolute;
  z-index: 99;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 12px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
  max-width: 320px;
  width: -moz-max-content;
  width: max-content;
  font-size: 12px;
  font-weight: 400;
  color: #475467;
}
.hover-wrapper__content.--bottom {
  top: calc(100% + 10px);
}
.hover-wrapper__content.--top {
  top: unset;
  bottom: calc(100% + 10px);
}
.hover-wrapper__content::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 1px;
  background-color: white;
  transform: translateX(-50%) translateY(50%) rotate(45deg);
}
.hover-wrapper__content.--bottom::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(50%) rotate(45deg);
}
.hover-wrapper__content.--top::before {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.hover-wrapper__content.--context-menu {
  display: block;
}
.hover-wrapper__content.--context-menu::before {
  display: none;
}

.dropdown-content {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 3;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  padding-bottom: 8px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #F2F4F7;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
}
.dropdown-content.--right {
  left: unset;
  right: 0;
}
.dropdown-content > button,
.dropdown-content > a {
  padding: 10px 16px;
}
.dropdown-content li {
  min-width: 186px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.dropdown-content li:hover {
  background-color: rgba(249, 245, 255, 0.4470588235);
}
.dropdown-content li.--selected {
  background-color: #F9F5FF;
}
.dropdown-content li.--selected::after {
  content: url("/images/check.svg");
  width: 20px;
  height: 20px;
  display: block;
  align-self: center;
  margin-left: auto;
}

.course__content {
  max-width: 1124px;
  padding: 0 32px;
  margin: 0 auto;
}
.course__grid {
  display: grid;
  grid-template-columns: 1fr 40%;
  gap: 24px;
}
@media (max-width: 768px) {
  .course__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.course__main {
  width: 100%;
  overflow: hidden;
}
.course__aside {
  width: 100%;
  overflow: hidden;
}

.course-label__main-image {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}
.course-label__main-image img {
  width: 100%;
}
.course-label__image {
  padding: 90px 20px;
  border-radius: 8px;
  background-color: #7EC0F1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.course-label__image img:first-child {
  position: absolute;
  top: 26px;
  left: 26px;
}
.course-label__image img:last-child {
  position: absolute;
  bottom: 26px;
  right: 26px;
}
.course-label__title {
  text-align: center;
  color: white;
}
.course-label course-description {
  display: block;
}
.course-label course-title {
  display: block;
  font-size: 28px;
  font-weight: 700;
}
.course-label__progress {
  font-size: 14px;
  color: #475467;
  padding: 24px 0;
  border-bottom: 1px solid #E4E7EC;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
}
.course-label course-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
@media (max-width: 768px) {
  .course-label course-progress {
    grid-template-columns: 1fr auto;
  }
}
.course-label course-progress.--no-text {
  grid-template-columns: 1fr auto;
}
.course-label course-status {
  display: block;
  flex-shrink: 0;
  margin-right: 16px;
}
@media (max-width: 768px) {
  .course-label course-status {
    grid-column: span 2;
  }
}
.course-label course-lessons {
  font-weight: 500;
  margin-left: 4px;
}
.course-label course-progress-bar {
  display: block;
  height: 8px;
  border-radius: 8px;
  background-color: #F2F4F7;
}
.course-label course-progress-fill {
  display: block;
  height: 100%;
  border-radius: 8px;
  background-color: #7F56D9;
}
.course-label course-percent {
  color: #344054;
  font-weight: 500;
  margin-left: 12px;
}
.course-label course-percent::after {
  content: "%";
}
@media (max-width: 768px) {
  .course-label button span {
    display: none;
  }
}
.course-label .completed course-progress-fill {
  background-color: #039855;
}
.course-label .completed course-status {
  color: #475467;
}
.course-label .completed course-percent {
  color: #344054;
}

.course-progress course-description {
  display: block;
}
.course-progress course-title {
  display: block;
  font-size: 28px;
  font-weight: 700;
}
.course-progress__progress {
  font-size: 14px;
  color: #475467;
  padding: 24px 0;
  border-bottom: 1px solid #E4E7EC;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
}
.course-progress course-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  font-size: 14px;
}
@media (max-width: 768px) {
  .course-progress course-progress {
    grid-template-columns: 1fr auto;
  }
}
.course-progress course-progress.--no-text {
  grid-template-columns: 1fr auto;
}
.course-progress course-status {
  display: block;
  flex-shrink: 0;
  margin-right: 16px;
  grid-column: span 2;
}
.course-progress course-lessons {
  font-weight: 500;
  margin-left: 4px;
}
.course-progress course-progress-bar {
  display: block;
  height: 8px;
  border-radius: 8px;
  background-color: #F2F4F7;
}
.course-progress course-progress-fill {
  display: block;
  height: 100%;
  border-radius: 8px;
  background-color: #7F56D9;
}
.course-progress course-percent {
  color: #344054;
  font-weight: 500;
  margin-left: 12px;
}
.course-progress course-percent::after {
  content: "%";
}
.course-progress.completed course-progress-fill {
  background-color: #039855;
}
.course-progress.completed course-status {
  color: #475467;
}
.course-progress.completed course-percent {
  color: #344054;
}

.course-overall {
  padding-top: 32px;
  padding-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.course-overall__left {
  display: flex;
  gap: 8px;
}
.course-overall__right {
  display: flex;
  gap: 8px;
}
.course-overall course-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
}

.course-text {
  font-size: 16px;
  line-height: 1.5;
}
.course-text h1 {
  font-size: 24px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 12px;
}
.course-text course-beginning {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #475467;
  margin-bottom: 12px;
}
.course-text br {
  content: "";
  display: block;
  height: 12px;
}
.course-text ul {
  display: flex;
  flex-direction: column;
}
.course-text li {
  list-style-type: disc;
  list-style-position: inside;
}
@media (max-width: 768px) {
  .course-text .button-gray span {
    display: none;
  }
  .course-text.mobile-hidden {
    display: none;
  }
  .course-text.mobile-shown {
    display: block;
  }
}
.course-text__rating-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.course-text__read-reviews {
  font-size: 14px;
  font-weight: 600;
  color: #6941C6;
  cursor: pointer;
}
.course-text__read-reviews:hover {
  opacity: 0.6;
}

.course-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.course-price {
  padding: 8px;
  padding-right: 12px;
  border-radius: 10px;
  background-color: white;
  border: 1px solid #E4E7EC;
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.course-price__right {
  font-size: 18px;
  color: #475467;
  display: flex;
  align-items: center;
  gap: 10px;
}
.course-price__price {
  display: flex;
  align-items: center;
  gap: 10px;
}
.course-price__price old-price {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  text-decoration: line-through;
  color: #98A2B3;
}
.course-price__price new-price {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0%;
  text-align: right;
}

.course-materials {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 512px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.course-materials__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border-radius: 8px;
  border: 1px solid #E4E7EC;
  background-color: #fff;
  cursor: pointer;
}
.course-materials__item.--blue-border {
  border-color: #9E77ED;
}
.course-materials__item file-title {
  font-weight: 500;
  color: #344054;
}
.course-materials__item file-size {
  color: #475467;
}
.course-materials__text {
  font-size: 14px;
  line-height: 20px;
  display: flex;
  flex-direction: column;
}
.course-materials file-title {
  font-weight: 500;
  color: #344054;
}
.course-materials file-size {
  color: #475467;
}
.course-materials__status {
  margin-left: auto;
}
.course-materials__buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.course-materials__buttons button:hover {
  opacity: 0.6;
}
.course-materials.--no-margins {
  margin: 0;
}

.course-materials__item .--before {
  display: block;
}
.course-materials__item .--after {
  display: none;
}

.course-materials__item.downloaded {
  border-color: #9E77ED;
}
.course-materials__item.downloaded .--before {
  display: none;
}
.course-materials__item.downloaded .--after {
  display: block;
}

label.course-materials__item {
  cursor: pointer;
}

.course-accordion > p {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}
.course-accordion article {
  border: 1px solid #E4E7EC;
  border-radius: 8px;
}
.course-accordion article:hover {
  background-color: #F9F5FF;
}
.course-accordion article.test {
  background-color: #FCFCFD;
}
.course-accordion article.opened {
  border-color: #6941C6;
}
.course-accordion article.opened accordion-body-wrapper {
  grid-template-rows: 1fr;
}
.course-accordion article.opened accordion-title {
  padding-bottom: 12px;
}
.course-accordion article.opened accordion-title img {
  transform: rotate(180deg);
}
.course-accordion h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.course-accordion li {
  list-style-type: disc;
  list-style-position: inside;
}
.course-accordion__column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-accordion accordion-title {
  display: flex;
  align-items: center;
  padding: 20px 60px 20px 20px;
  position: relative;
  transition: 0.3s;
  cursor: pointer;
}
.course-accordion accordion-title img {
  position: absolute;
  top: 20px;
  right: 20px;
}
.course-accordion accordion-body {
  font-size: 16px;
  color: #475467;
  padding: 0 20px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-accordion accordion-body a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6941C6;
}
.course-accordion accordion-body a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
.course-accordion accordion-body-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.6s;
}
.course-accordion hidden-content {
  display: block;
  min-height: 0;
  overflow: hidden;
}
.course-accordion .tag {
  margin-left: auto;
}

.platform-personal__item .course-accordion h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.course-authors {
  padding-left: 20px;
  border-left: 2px solid #E4E7EC;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}
.course-authors__title {
  color: #475467;
  font-weight: 600;
}
.course-authors__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-authors__item {
  list-style-type: none;
  display: flex;
  gap: 16px;
}
.course-authors__item-image {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.course-authors__item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.course-authors__item-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.course-authors__name {
  color: #101828;
}

.platform-course-reviews {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(98vh - 193px);
}
.platform-course-reviews .--blue-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6941C6;
}
.platform-course-reviews .--blue-button:hover {
  opacity: 0.6;
}
.platform-course-reviews__column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.platform-course-reviews__wrapper-with-responses {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.platform-course-reviews__wrapper-with-responses .--blue-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6941C6;
}
.platform-course-reviews__wrapper-with-responses .--blue-button:hover {
  opacity: 0.6;
}
.platform-course-reviews__item, .platform-course-reviews__responses {
  padding: 24px;
  border-radius: 20px;
  background-color: white;
  border: 1px solid #E4E7EC;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.platform-course-reviews__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.platform-course-reviews__item-footer {
  padding-top: 20px;
  border-top: 1px solid #E4E7EC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.platform-course-reviews__item-date {
  font-size: 14px;
  color: #667085;
  margin-left: auto;
}
.platform-course-reviews__body-person {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.platform-course-reviews__body-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  max-height: 96px;
  overflow: hidden;
  color: var(--gray-900);
}
.platform-course-reviews__body-trigger {
  margin-top: 4px;
}
.platform-course-reviews__responses {
  margin-left: 20px;
  display: none;
}
.platform-course-reviews__responses .platform-course-reviews__item-body {
  padding-bottom: 20px;
  border-bottom: 1px solid #E4E7EC;
}
.platform-course-reviews__responses .platform-course-reviews__item-text {
  max-height: unset;
}
.platform-course-reviews .platform-course-reviews__responses-trigger {
  display: block;
}
.platform-course-reviews .platform-course-reviews__responses-close {
  display: none;
}
.platform-course-reviews__responses-more-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
}
.platform-course-reviews__more-reviews-trigger {
  display: flex;
  justify-content: center;
}
.platform-course-reviews__item.--full-text .platform-course-reviews__body-trigger, .--full-text.platform-course-reviews__responses .platform-course-reviews__body-trigger, .platform-course-reviews__item.--no-content .platform-course-reviews__body-trigger, .--no-content.platform-course-reviews__responses .platform-course-reviews__body-trigger {
  display: none;
}
.platform-course-reviews__item.--full-text .platform-course-reviews__body-text, .--full-text.platform-course-reviews__responses .platform-course-reviews__body-text {
  max-height: unset;
}
.platform-course-reviews__item.--no-content .platform-course-reviews__body-text, .--no-content.platform-course-reviews__responses .platform-course-reviews__body-text {
  display: none;
}
.platform-course-reviews__item.--no-content .platform-course-reviews__body-person, .--no-content.platform-course-reviews__responses .platform-course-reviews__body-person {
  margin: 0;
}
.platform-course-reviews__item.--no-responses .platform-course-reviews__responses-trigger, .--no-responses.platform-course-reviews__responses .platform-course-reviews__responses-trigger {
  display: none;
}
.platform-course-reviews__item.--no-permissions .platform-course-reviews__make-an-answer, .--no-permissions.platform-course-reviews__responses .platform-course-reviews__make-an-answer {
  display: none;
}
.platform-course-reviews__item.--no-responses.--no-permissions .platform-course-reviews__item-footer, .--no-responses.--no-permissions.platform-course-reviews__responses .platform-course-reviews__item-footer {
  display: none;
}
.platform-course-reviews__wrapper-with-responses.--with-responses .platform-course-reviews__responses {
  display: flex;
}
.platform-course-reviews__wrapper-with-responses.--with-responses .platform-course-reviews__responses-trigger {
  display: none;
}
.platform-course-reviews__wrapper-with-responses.--with-responses .platform-course-reviews__responses-close {
  display: flex;
}

.lesson__content {
  max-width: 1124px;
  padding: 0 32px;
  margin: 0 auto;
}
.lesson__grid {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 24px;
}
@media (max-width: 768px) {
  .lesson__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.lesson__video {
  margin-bottom: 32px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  /*

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
  }

  &:not(.active):after {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 8px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

    background-color: #F9F5FF;
    background-image: url("/images/play.svg");
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
  }

  &:hover::after {
    opacity: 0.8;
  }

  &.active {
    img {
      display: none;
    }
  }
  */
}
.lesson__video iframe,
.lesson__video video {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.lesson__accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lesson__accordion article {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #E4E7EC;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.lesson__accordion article:hover {
  background-color: #F9F5FF;
}
.lesson__accordion article.current {
  border-color: #6941C6;
  background-color: #F9FAFB;
  cursor: unset;
}
.lesson__accordion article.test {
  background-color: #FCFCFD;
}
.lesson__accordion h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #101828;
}
.lesson__accordion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.lesson__accordion-row .tag {
  display: block;
  margin: 0;
}
.lesson__tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #E4E7EC;
}
@media (min-width: 768px) {
  .lesson__tabs {
    display: none;
  }
}
.lesson__tab {
  padding-bottom: 16px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #667085;
  cursor: pointer;
}
.lesson__tab.active {
  color: #6941C6;
  border-color: #6941C6;
}
.lesson__main {
  width: 100%;
  overflow: hidden;
}
.lesson__main video {
  width: 100%;
}
.lesson__aside {
  width: 100%;
  overflow: hidden;
}
@media (max-width: 768px) {
  .lesson .lesson__aside {
    display: none;
  }
  .lesson .lesson__aside.mobile-hidden {
    display: none;
  }
  .lesson .lesson__aside.mobile-shown {
    display: block;
  }
}

.lesson-test {
  padding: 32px 32px 48px 32px;
  background-color: #FCFCFD;
  border-radius: 8px;
}
.lesson-test hgroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E4E7EC;
  line-height: 150%;
  color: #475467;
}
.lesson-test hgroup mark {
  font-size: 14px;
  line-height: 143%;
  color: #f04438;
  background-color: unset;
}
.lesson-test hgroup p:has(mark) {
  margin-top: 8px;
}
.lesson-test h1 {
  font-weight: 600;
  font-size: 24px;
  line-height: 133%;
  color: #101828;
}
.lesson-test__column {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 800px;
}
.lesson-test__question {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lesson-test__question p {
  line-height: 150%;
  color: #475467;
}
.lesson-test__question b {
  font-weight: 600;
  color: #344054;
}
.lesson-test__question label {
  display: block;
}
.lesson-test__question label:has(input[type=checkbox]), .lesson-test__question label:has(input[type=radio]) {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lesson-test__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e4e7ec;
  padding: 12px 24px 16px 24px;
  margin-top: 32px;
}
@media (max-width: 768px) {
  .lesson-test__footer {
    display: none;
  }
}
.lesson-test__buttons {
  display: flex;
  gap: 12px;
}
.lesson-test__results {
  max-width: 480px;
}
.lesson-test__results h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 133%;
  color: #101828;
  margin-bottom: 12px;
}
.lesson-test__results lesson-result {
  font-size: 30px;
  font-weight: 600;
  line-height: 127%;
  text-align: center;
  color: #101828;
}
.lesson-test__results .lesson-test__buttons {
  margin-top: 32px;
}
.lesson-test__percent-block {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 100%;
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  text-align: center;
  color: #475467;
  position: relative;
}
.lesson-test__percent-block span,
.lesson-test__percent-block lesson-result {
  position: relative;
  z-index: 3;
}
.lesson-test__percent-block.--s64 {
  width: 64px;
  height: 64px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
}
.lesson-test__percent-block.--s64::after {
  width: 52px;
  height: 52px;
}
.lesson-test__percent-block::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  background: conic-gradient(#7F56D9 0deg var(--progress), #F2F4F7 var(--progress));
}
.lesson-test__percent-block::after {
  content: "";
  display: block;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  border-radius: 100%;
  position: absolute;
  z-index: 2;
  background: white;
}
.lesson-test__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.lesson-test__timer {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 8px;
  background-color: #F9F5FF;
  color: #6941C6;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.lesson-test__timer.--red {
  color: #B42318;
}

.lesson-test * {
  font-family: "Inter", sans-serif !important;
}

.courses__content {
  max-width: 1124px;
  padding: 0 32px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .courses__content {
    padding: 0;
  }
}
.courses__tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #E4E7EC;
}
.courses__tabs course-tab {
  font-size: 14px;
  font-weight: 600;
  display: block;
  color: #667085;
  padding: 0 4px 16px 4px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.courses__tabs course-tab:hover {
  font-weight: 600;
  color: #6941C6;
}
.courses__tabs course-tab.active {
  font-weight: 600;
  color: #6941C6;
  border-color: #6941C6;
}
.courses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .courses__grid {
    grid-template-columns: 1fr;
  }
}
.courses__pagination {
  padding: 12px 24px;
  padding-bottom: 16px;
  border-top: 1px solid #E4E7EC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}
.courses__pagination-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.courses-content-panel {
  display: none;
}
.courses-content-panel.active {
  display: block;
}

.courses-arrangers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
}
.courses-arrangers__selectors {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.courses-arrangers__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.courses-arrangers__filters {
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  padding-bottom: 20px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #F2F4F7;
  box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  width: 300px;
  position: absolute;
  left: 0;
  top: 57px;
  z-index: 6;
  display: none;
}
.courses-arrangers__filters.active {
  display: flex;
}
@media (max-width: 768px) {
  .courses-arrangers__filters {
    width: 100%;
  }
}
.courses-arrangers__filters-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #101828;
  background-color: #fff;
}
.courses-arrangers__filters-block p {
  font-size: 16px;
  font-weight: 600;
}
.courses-arrangers__filters-block label {
  display: flex;
  align-items: center;
  gap: 8px;
  accent-color: #7F56D9;
}
.courses-arrangers__sorters {
  flex-direction: column;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #F2F4F7;
  box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  width: 220px;
  position: absolute;
  right: 0;
  top: 57px;
  z-index: 5;
  display: none;
}
.courses-arrangers__sorters.active {
  display: flex;
}
.courses-arrangers__sorters arranger-sorter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  color: #101828;
  background-color: #fff;
  cursor: pointer;
}
.courses-arrangers__sorters arranger-sorter img {
  display: none;
}
.courses-arrangers__sorters arranger-sorter:hover {
  background-color: #f9fafb;
}
.courses-arrangers__sorters arranger-sorter.active {
  background-color: #f9fafb;
}
.courses-arrangers__sorters arranger-sorter.active img {
  display: block;
}

.courses-arrangers__range {
  display: flex;
  height: 24px;
  position: relative;
  overflow: hidden;
}
.courses-arrangers__range input {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: transparent;
  cursor: pointer;
}
.courses-arrangers__range input:focus {
  outline: none;
}
.courses-arrangers__range input::-webkit-slider-thumb {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: all;
  cursor: pointer;
  margin-top: -8px;
  width: 24px;
  height: 24px;
  border-radius: 100px;
  background-color: #f9fafb;
  border: 2px solid #7f56d9;
  box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.1);
  position: relative;
  z-index: 3;
}
.courses-arrangers__range input::-webkit-slider-runnable-track {
  background-color: #e4e7ec;
  border-radius: 8px;
  height: 8px;
}
.courses-arrangers__range range-track {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  height: 8px;
  width: 20px;
  border-radius: 8px;
  background-color: #7f56d9;
  cursor: unset;
}

.courses-item {
  border-radius: 8px;
  position: relative;
  align-self: start;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.courses-item:hover {
  box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
}
.courses-item__top {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  aspect-ratio: 340/140;
}
.courses-item__top img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.courses-item__middle {
  padding: 20px;
  flex: 1;
  border-left: 1px solid #E4E7EC;
  border-right: 1px solid #E4E7EC;
}
.courses-item__middle h2 {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 8px;
}
.courses-item__middle course-beginning {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #6941c6;
  margin-bottom: 8px;
}
.courses-item__middle p {
  font-size: 16px;
  font-weight: 400;
  color: #475467;
  max-height: 72px;
  overflow: hidden;
}
.courses-item__info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.courses-item__info-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.courses-item__info-left span {
  display: block;
  border-radius: 16px;
  padding: 2px 8px;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}
.courses-item__info-left span.blue {
  background-color: #eff8ff;
  color: #175cd3;
}
.courses-item__info-left span.rose {
  background-color: #fff1f3;
  color: #c01048;
}
.courses-item__info-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
}
.courses-item__bottom {
  padding: 20px;
  padding-top: 14px;
  border: 1px solid #E4E7EC;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.courses-item__bottom button {
  display: none;
}
.courses-item__bottom course-progress {
  grid-template-columns: 1fr auto;
  font-size: 14px;
}
.courses-item__bottom course-status {
  grid-column: span 2;
}
.courses-item__price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.courses-item__price span {
  font-size: 16px;
  font-weight: 400;
  color: #475467;
  margin-right: auto;
}
.courses-item__price course-price {
  font-size: 20px;
  font-weight: 600;
  color: #7f56d9;
}
.courses-item__price course-price.new {
  color: #039855;
}
.courses-item__price course-price.old {
  font-size: 16px;
  font-weight: 400;
  color: #98a2b3;
  text-decoration: line-through;
}
.courses-item__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #667085;
}
.courses-item__rating-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (min-width: 768px) {
  all-courses .courses-item:hover .courses-item__bottom {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: calc(100% - 65px);
    width: 100%;
    background-color: #fff;
  }
  all-courses .courses-item:hover .courses-item__bottom button {
    display: block;
  }
}
@media (max-width: 768px) {
  all-courses .courses-item:hover .courses-item__bottom button {
    display: block;
  }
}
.courses-not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 48px;
}
.courses-not-found img {
  margin-bottom: 16px;
}
.courses-not-found h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #101828;
  margin-bottom: 4px;
}
.courses-not-found p {
  font-size: 14px;
  color: #475467;
}

.left-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 20;
  max-height: 100vh;
}
.left-panel__trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #e4e7ec;
  position: absolute;
  top: 36px;
  left: calc(100% - 1px);
  z-index: 11;
  cursor: pointer;
}
.left-panel__trigger img {
  height: 24px;
}
.left-panel__content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  border-right: 1px solid #e4e7ec;
  display: flex;
  flex-direction: column;
  padding-top: 26px;
  padding-bottom: 32px;
}
.left-panel__content::-webkit-scrollbar {
  width: 4px;
  background-color: #f2f4f7;
}
.left-panel__content::-webkit-scrollbar-thumb {
  background-color: #7f56d9;
  border-radius: 8px;
}
.left-panel__logo {
  transition: 0.5s;
  margin-left: 28px;
  margin-right: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.left-panel__logo a:hover,
.left-panel__logo button:hover {
  opacity: 0.6;
}
.left-panel__logo a {
  flex-shrink: 10;
  overflow: hidden;
  transition: width 0.5s;
}
.left-panel__logo a img {
  width: unset;
  max-width: unset;
}
.left-panel__logo button {
  flex-shrink: 0;
  margin-left: auto;
}
.left-panel__nav {
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #101828;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px;
  flex-grow: 2;
}
.left-panel__nav-item span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.left-panel__nav-item.--settings {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #E4E7EC;
}
.left-panel__nav-item.--settings::before {
  content: "";
  width: 100%;
  height: 24px;
}
.left-panel__nav-item.--with-accordion > .left-panel__nav-title.--with-chevron::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-left: auto;
  background-image: url("/images/platform-chevron-up.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(180deg);
}
.left-panel__nav-item.--with-accordion.open .left-panel__nav-title.--with-chevron::after {
  transform: rotate(0deg);
}
.left-panel__nav-item.--with-accordion.open .left-panel__nav-accordion {
  grid-template-rows: 1fr;
  margin-top: 4px;
}
.left-panel__nav-title {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
}
.left-panel__nav-title:hover {
  background-color: #f9fafb;
}
.left-panel__nav-title.selected {
  background-color: #f9fafb;
}
.left-panel__nav-accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;
}
.left-panel__trigger {
  display: none;
}
.left-panel .left-panel__logo button {
  transform: rotate(180deg);
}
.left-panel.active .left-panel__logo button {
  transform: rotate(0deg);
}

@media (min-width: 768px) {
  .left-panel {
    width: 85px;
  }
  .left-panel .left-panel__logo {
    margin-left: 16px;
  }
  .left-panel .left-panel__logo a {
    width: 0;
  }
  .left-panel .left-panel__nav-item.--with-accordion.open .left-panel__nav-accordion {
    margin-top: unset;
    grid-template-rows: 0fr;
  }
  .left-panel.active,
  .left-panel:has(.left-panel__nav:hover) {
    width: 300px;
  }
  .left-panel.active .left-panel__logo,
  .left-panel:has(.left-panel__nav:hover) .left-panel__logo {
    margin-left: 28px;
  }
  .left-panel.active .left-panel__logo a,
  .left-panel:has(.left-panel__nav:hover) .left-panel__logo a {
    width: 100%;
  }
  .left-panel.active .left-panel__nav-item.--with-accordion.open .left-panel__nav-accordion,
  .left-panel:has(.left-panel__nav:hover) .left-panel__nav-item.--with-accordion.open .left-panel__nav-accordion {
    margin-top: 4px;
    grid-template-rows: 1fr;
  }
}
@media (max-width: 768px) {
  .left-panel {
    width: 300px;
    transform: translateX(-100%);
  }
  .left-panel.active {
    transform: translateX(0);
  }
}
.platform-header {
  padding-top: 20px;
  padding-right: 28px;
  padding-bottom: 20px;
  padding-left: 28px;
}
@media (max-width: 768px) {
  .platform-header {
    padding: 20px 10px;
  }
}
.platform-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.platform-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .platform-header__left {
    display: none;
  }
}
.platform-header__left user-name {
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
  color: #101828;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .platform-header__left .tag {
    display: none;
  }
}
.platform-header__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .platform-header__right {
    margin-left: auto;
  }
}
.platform-header__languages {
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #475467;
  position: relative;
  z-index: 11;
}
.platform-header__languages.opened .platform-header__languages-all {
  grid-template-rows: 1fr;
}
.platform-header__languages.opened .platform-header__languages-selected::after {
  transform: rotate(180deg);
}
.platform-header__languages-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
  line-height: 1.5;
  padding: 4px 0;
  cursor: pointer;
}
.platform-header__languages-selected::after {
  flex-shrink: 0;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("/images/platform-chevron-down-gray.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.platform-header__languages-all {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;
  position: absolute;
  top: 100%;
  left: -4px;
  z-index: 99;
  width: -moz-max-content;
  width: max-content;
  background-color: #fff;
}
.platform-header__languages-all hidden-content {
  overflow-x: visible;
  overflow-y: hidden;
}
.platform-header__languages-all ul {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  border-radius: 8px;
  border: 1px solid var(--gray-100);
}
.platform-header__languages-all li {
  padding: 10px 14px;
  cursor: pointer;
  color: var(--gray-900);
}
.platform-header__languages-all li:hover {
  background-color: #f9fafb;
}
.platform-header__exit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #475467;
}
@media (max-width: 600px) {
  .platform-header__exit span {
    display: none;
  }
}
.platform-header__aside-trigger {
  display: none;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .platform-header__aside-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.platform-header-notifications {
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.platform-header-notifications__amount {
  padding: 2px 8px;
  border-radius: 16px;
  display: inline-block;
  background-color: #F9F5FF;
  font-size: 12px;
  color: #6941C6;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
}
.platform-header-notifications:hover {
  background-color: #F9F5FF;
}

.platform-header-profile {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  position: relative;
}
.platform-header-profile__title {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 12px;
  cursor: pointer;
}
.platform-header-profile__title company-name {
  max-width: 150px;
  text-wrap: nowrap;
  overflow-x: hidden;
  font-weight: 400;
  color: #475467;
  text-overflow: ellipsis;
}
.platform-header-profile__title-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
@media (max-width: 900px) {
  .platform-header-profile__title-column {
    display: none;
  }
}
.platform-header-profile__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.6s;
  min-width: max(250px, 100%);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
}
.platform-header-profile__content {
  border-radius: 8px;
  padding-bottom: 8px;
  background-color: #fff;
  border: 1px solid #E4E7EC;
  box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
}
.platform-header-profile__item, .welcome-back-item, .platform-accordion.--header-accounts .platform-accordion__title, .platform-header-profile-other-accounts__title {
  padding: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  color: #101828;
  cursor: pointer;
}
.platform-header-profile__item:hover, .welcome-back-item:hover, .platform-accordion.--header-accounts .platform-accordion__title:hover, .platform-header-profile-other-accounts__title:hover {
  background-color: #f9fafb;
}
.platform-header-profile__item.--selected, .--selected.welcome-back-item, .platform-accordion.--header-accounts .--selected.platform-accordion__title, .--selected.platform-header-profile-other-accounts__title {
  background-color: #F9F5FF;
}
.platform-header-profile__item.--selected .platform-participant, .--selected.welcome-back-item .platform-participant, .platform-accordion.--header-accounts .--selected.platform-accordion__title .platform-participant, .--selected.platform-header-profile-other-accounts__title .platform-participant {
  outline: 2px solid white;
}
.platform-header-profile__item, .welcome-back-item, .platform-accordion.--header-accounts .platform-accordion__title, .platform-header-profile-other-accounts__title, .platform-header-profile__item a, .welcome-back-item a, .platform-accordion.--header-accounts .platform-accordion__title a, .platform-header-profile-other-accounts__title a {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.platform-header-profile__item.--add-new-profile, .--add-new-profile.welcome-back-item, .platform-accordion.--header-accounts .--add-new-profile.platform-accordion__title, .--add-new-profile.platform-header-profile-other-accounts__title, .platform-header-profile__item.--exit, .--exit.welcome-back-item, .platform-accordion.--header-accounts .--exit.platform-accordion__title, .--exit.platform-header-profile-other-accounts__title, .platform-header-profile__item.--blue-with-button, .--blue-with-button.welcome-back-item, .platform-accordion.--header-accounts .--blue-with-button.platform-accordion__title, .--blue-with-button.platform-header-profile-other-accounts__title {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  gap: 8px;
}
.platform-header-profile__item.--add-new-profile a, .--add-new-profile.welcome-back-item a, .platform-accordion.--header-accounts .--add-new-profile.platform-accordion__title a, .--add-new-profile.platform-header-profile-other-accounts__title a, .platform-header-profile__item.--exit a, .--exit.welcome-back-item a, .platform-accordion.--header-accounts .--exit.platform-accordion__title a, .--exit.platform-header-profile-other-accounts__title a, .platform-header-profile__item.--blue-with-button a, .--blue-with-button.welcome-back-item a, .platform-accordion.--header-accounts .--blue-with-button.platform-accordion__title a, .--blue-with-button.platform-header-profile-other-accounts__title a {
  gap: 8px;
}
.platform-header-profile__item.--add-new-profile, .--add-new-profile.welcome-back-item, .platform-accordion.--header-accounts .--add-new-profile.platform-accordion__title, .--add-new-profile.platform-header-profile-other-accounts__title, .platform-header-profile__item.--blue-with-button, .--blue-with-button.welcome-back-item, .platform-accordion.--header-accounts .--blue-with-button.platform-accordion__title, .--blue-with-button.platform-header-profile-other-accounts__title {
  color: #6941c6;
}
.platform-header-profile__item.--exit, .--exit.welcome-back-item, .platform-accordion.--header-accounts .--exit.platform-accordion__title, .--exit.platform-header-profile-other-accounts__title {
  color: #475467;
}
.platform-header-profile__item profile-email, .welcome-back-item profile-email, .platform-accordion.--header-accounts .platform-accordion__title profile-email, .platform-header-profile-other-accounts__title profile-email {
  font-size: 14px;
  font-weight: 400;
  line-height: 143%;
  color: #475467;
}
.platform-header-profile__notification {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 16px;
  background-color: #f9f5ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 143%;
  text-align: center;
  color: #6941c6;
}
.platform-header-profile hr {
  display: block;
  height: 1px;
  background-color: #e4e7ec;
  margin: 0 12px;
}
.platform-header-profile.opened .platform-header-profile__body {
  grid-template-rows: 1fr;
}
.platform-header-profile.opened .platform-header-profile__title > img {
  transform: rotate(180deg);
}
.platform-header-profile__add-profile {
  padding: 0 16px;
}
.platform-header-profile__add-profile .button {
  padding-top: 8px;
  padding-bottom: 8px;
  width: 100%;
}

.platform-header-profile-other-accounts__title {
  padding-right: 16px;
}
.platform-header-profile-other-accounts__title img {
  margin-left: auto;
}
.platform-header-profile-other-accounts__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.6s;
}
.platform-header-profile-other-accounts__content li {
  padding-top: 10px;
  padding-bottom: 10px;
}
.platform-header-profile-other-accounts.opened .platform-header-profile-other-accounts__body {
  grid-template-rows: 1fr;
}
.platform-header-profile-other-accounts.opened .platform-header-profile-other-accounts__title > img {
  transform: rotate(180deg);
}

.panel-grid-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
}
.panel-grid-wrapper aside.left-panel {
  grid-column: 1;
  grid-row: 1/3;
  transition: 0.4s;
}
.panel-grid-wrapper header.platform-header {
  grid-column: 2;
  grid-row: 1;
  transition: margin 0.4s;
}
.panel-grid-wrapper main.platform-main {
  grid-column: 2;
  grid-row: 2;
  transition: margin 0.4s;
}

main.platform-main,
header.platform-header {
  margin-left: 85px;
}
@media (max-width: 768px) {
  main.platform-main,
  header.platform-header {
    margin-left: 0;
  }
}

.panel-grid-wrapper:has(aside.left-panel.active) main.platform-main,
.panel-grid-wrapper:has(aside.left-panel.active) header.platform-header {
  margin-left: 300px;
}
@media (max-width: 900px) {
  .panel-grid-wrapper:has(aside.left-panel.active) main.platform-main,
  .panel-grid-wrapper:has(aside.left-panel.active) header.platform-header {
    margin-left: 85px;
  }
}
@media (max-width: 768px) {
  .panel-grid-wrapper:has(aside.left-panel.active) main.platform-main,
  .panel-grid-wrapper:has(aside.left-panel.active) header.platform-header {
    margin-left: 0;
  }
}

.platform-main {
  padding: 32px 32px 48px 32px;
  background-color: #fcfcfd;
  overflow-x: hidden;
  position: relative;
}
@media (max-width: 768px) {
  .platform-main {
    padding: 20px 10px;
  }
}
.platform-main__title {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.platform-main__title.--with-border-bottom {
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ec;
}
@media (max-width: 768px) {
  .platform-main__title.--three-items {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 20px;
  }
  .platform-main__title.--three-items h2 {
    grid-row: 1;
    grid-column: span 2;
  }
}
.platform-main__title h2 {
  font-weight: 600;
  font-size: 24px;
  line-height: 133%;
  color: #101828;
}
.platform-main__more {
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #6941c6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-main__more more-arrow {
  font-size: 22px;
}
.platform-main__more:hover {
  opacity: 0.6;
}
.platform-main section {
  padding: 0;
}
.platform-main.--with-aside {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
}
@media (max-width: 600px) {
  .platform-main.--with-aside {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.platform-main .button {
  padding: 10px 14px;
  font-size: 14px;
}

.platform-student-tabs, .platform-tabs {
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 1px;
}
.platform-student-tabs ul, .platform-tabs ul {
  display: flex;
  gap: 16px;
  margin-bottom: -1px;
  overflow-x: auto;
  overflow-y: hidden;
}
.platform-student-tabs li, .platform-tabs li {
  font-size: 14px;
  font-weight: 600;
  line-height: 143%;
  color: #667085;
  padding: 0px 4px 16px 4px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.platform-student-tabs li:hover, .platform-tabs li:hover {
  opacity: 0.6;
}
.platform-student-tabs li.active, .platform-tabs li.active {
  color: #6941c6;
  border-color: #6941c6;
}

.platform-tab__edit-button {
  padding-top: 5px;
  float: right;
  padding-right: 20px;
  border: 0.1px solid;
  border-top: initial;
  border-radius: 0px 0px 15px 15px;
  margin-top: -24px;
}

.platform-accordion {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #d0d5dd;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}
.platform-accordion__title {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #344054;
}
.platform-accordion__title img[src$="chevron-down-gray.svg"] {
  margin-left: auto;
}
.platform-accordion__title.--tickets {
  align-items: unset;
  flex-direction: column;
  gap: 10px;
}
.platform-accordion__title-buttons {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  align-self: center;
}
.platform-accordion__top-title {
  display: flex;
  align-items: center;
}
.platform-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;
}
.platform-accordion__content {
  padding: 24px 32px 32px 32px;
  border-top: 1px solid #d0d5dd;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.platform-accordion.opened .platform-accordion__title img[src$="chevron-down-gray.svg"] {
  transform: rotate(180deg);
}
.platform-accordion.opened .platform-accordion__body {
  grid-template-rows: 1fr;
}
.platform-accordion__body.--tickets .platform-accordion__content {
  padding: 20px;
}

.platform-accordion.--header-accounts {
  border-radius: unset;
  background-color: unset;
  border: unset;
  box-shadow: unset;
}
.platform-accordion.--header-accounts .platform-accordion__title {
  padding-right: 16px;
}
.platform-accordion.--header-accounts .platform-accordion__content {
  padding: unset;
  border-top: unset;
  display: unset;
  flex-direction: unset;
  gap: unset;
}
.platform-accordion.--header-accounts .platform-accordion__content li {
  padding-top: 10px;
  padding-bottom: 10px;
}

.platform-participant {
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  text-align: center;
  color: #7f56d9;
  background: #f9f5ff;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.platform-participant.active {
  outline: 4px solid #F4EBFF;
}
.platform-participant img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.platform-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.popups {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  overflow: auto;
  background: rgba(16, 24, 40, 0.7);
  padding: 40px 12px;
  color: #101828;
}
.popups.modal-xs .popups__content {
  max-width: 400px;
}
.popups.modal-sm .popups__content {
  max-width: 640px;
}
.popups.modal-md .popups__content {
  max-width: 768px;
}
.popups.modal-lg .popups__content {
  max-width: 1024px;
}
.popups__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
.popups__content {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 12px;
  background: #f9fafb;
  box-shadow: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.08);
}
.popups__basic {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  position: relative;
}
.popups__buttons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.popups__buttons > * {
  flex: 1;
}
.popups__close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.popups__close:hover {
  opacity: 0.5;
}
.popups__close-button {
  flex-shrink: 0;
}
.popups__close-button:hover {
  opacity: 0.5;
}
.popups__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.popups__title:has(.task-checkbox) {
  align-items: flex-start;
}
.popups__title.--with-border-bottom {
  padding-bottom: 16px;
  border-bottom: 1px solid #E4E7EC;
}
.popups__title-left {
  align-self: flex-start;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.popups__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.popups__tags .tag {
  margin: 0;
}
.popups__sub-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popups__comment-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popups h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 156%;
  color: #101828;
}
.popups .pagination {
  justify-content: center;
}
.popups .horizontal-line-top {
  margin-top: 12px;
}

.popup-make-lead {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  position: relative;
}

.popup-task {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  position: relative;
}

.popup-after-review {
  text-align: center;
  color: #475467;
}
.popup-after-review b {
  font-weight: 600;
}
.popup-after-review__qr-code {
  max-width: 200px;
  margin: 0 auto;
}
.popup-after-review__qr-code img {
  width: 100%;
}

.popup-contacts-block {
  padding: 20px;
  border-radius: 8px;
  background-color: white;
}
.popup-contacts-block__title {
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E4E7EC;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: #475467;
}
.popup-contacts-block ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.popup-contacts-block li,
.popup-contacts-block li a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.popup-contacts-block li {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #101828;
}
.popup-contacts-block a:hover {
  color: #53389E;
}

.popup-history-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: #344054;
}
.popup-history-block del {
  font-size: 12px;
  font-weight: 500;
  color: #475467;
  text-decoration: line-through;
}
.popup-history-block ins {
  font-size: 12px;
  font-weight: 500;
  color: #6941C6;
  text-decoration: none;
}
.popup-history-block i {
  font-size: 14px;
  font-weight: 400;
  color: #101828;
  font-style: italic;
}
.popup-history-block b {
  font-weight: 600;
}
.popup-history-block time {
  font-size: 12px;
  color: #475467;
}
.popup-history-block__wrapper-with-bg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 8px;
  background-color: #F2F4F7;
}
.popup-history-block.--request del,
.popup-history-block.--request ins {
  font-size: 16px;
}

.notification-modal__badge {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.notification-modal__text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.notification-modal__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #101828;
}
.notification-modal__text {
  font-size: 14px;
  line-height: 20px;
  color: #475467;
}
.notification-modal__buttons {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.notification-modal__buttons > * {
  flex: 1;
}
.notification-modal__white-block-title {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #E4E7EC;
}
.notification-modal__white-block-text {
  font-size: 14px;
}

.popups-title-with-buttons {
  display: flex;
  align-items: center;
  width: 100%;
}
.popups-title-with-buttons__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 768px) {
  .popups-title-with-buttons__right {
    margin-left: unset;
    align-self: center;
    margin-right: -24px;
  }
}
.popups-title-with-buttons__right .button {
  height: 36px;
}
@media (max-width: 768px) {
  .popups-title-with-buttons {
    flex-direction: column;
    align-items: unset;
  }
}

.popups__title:has(.popups-title-with-buttons) .popups__title-left {
  align-self: center;
}
@media (max-width: 768px) {
  .popups__title:has(.popups-title-with-buttons) .popups__title-left {
    align-self: flex-start;
  }
}

.platform-overview-with-aside {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
}
@media (max-width: 900px) {
  .platform-overview-with-aside {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.platform-overview {
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow-x: hidden;
  overflow-y: auto;
  height: unset;
}
.platform-overview__grid--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1400px) {
  .platform-overview__grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1100px) {
  .platform-overview__grid--three {
    grid-template-columns: repeat(1, 1fr);
  }
}
.platform-overview__item {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #e4e7ec;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
}
.platform-overview__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #101828;
  display: flex;
  justify-content: space-between;
}

.overview-statistics__content {
  font-size: 14px;
  font-weight: 500;
  line-height: 143%;
  color: #475467;
  margin-top: 24px;
}
.overview-statistics__content .--red {
  color: #B42318;
}
.overview-statistics__content stat-figure {
  display: block;
  font-size: 36px;
  font-weight: 600;
  line-height: 122%;
  letter-spacing: -0.02em;
  color: #101828;
  margin-bottom: 8px;
}
.overview-statistics__chart {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  margin-top: auto;
}
.overview-statistics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.overview-courses__labels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.overview-courses__stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.overview-courses__stats-item {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  color: #98a2b3;
}
.overview-courses__progress {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  margin-top: auto;
  padding-top: 12px;
}
.overview-courses__more {
  font-size: 14px;
  font-weight: 600;
  line-height: 143%;
  color: #6941c6;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-right: 20px;
}
.overview-courses__more more-arrow {
  font-size: 20px;
}
.overview-courses__discount {
  padding: 6px 10px;
  border-radius: 8px 0;
  background-color: #f63d68;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #f9fafb;
  position: absolute;
  bottom: 0;
  right: 0;
}
.overview-courses__grid {
  display: grid;
  grid-auto-columns: 340px;
  grid-auto-flow: column;
  gap: 20px;
  overflow: auto;
  padding-bottom: 12px;
}
.overview-courses__grid-wrapper {
  position: relative;
}
.overview-courses__grid-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
  width: 80px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
.overview-courses__grid-wrapper .courses-item:hover {
  box-shadow: unset;
}

.platform-overview-right {
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (max-width: 900px) {
  .platform-overview-right {
    width: 100%;
  }
}
.platform-overview-right h3 {
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 156%;
  color: #101828;
}
.platform-overview-right h4 {
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  color: #101828;
}

.platform-overview-calendar {
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #e4e7ec;
  font-size: 12px;
}
.platform-overview-calendar__table {
  padding: 10px;
}
.platform-overview-calendar__events {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.platform-overview-calendar__event-day h4 {
  margin-bottom: 8px;
}
.platform-overview-calendar__event-day ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.platform-overview-calendar__event-day li {
  font-weight: 600;
  font-size: 12px;
  line-height: 150%;
  color: #101828;
  display: flex;
  align-items: center;
  gap: 4px;
}
.platform-overview-calendar table {
  width: 100%;
  border-spacing: 4px;
  text-align: center;
}
.platform-overview-calendar th {
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  color: #475467;
  padding: 7px;
}
.platform-overview-calendar td {
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  color: #101828;
  padding: 7px;
  border-radius: 4px;
  position: relative;
}
.platform-overview-calendar td:hover {
  background-color: #f9f5ff;
}
.platform-overview-calendar td:hover table-hover-block {
  display: block;
}
.platform-overview-calendar .current-day {
  background-color: #f9f5ff;
}
.platform-overview-calendar .other-month {
  color: #98a2b3;
}
.platform-overview-calendar table-events {
  display: flex;
  justify-content: center;
  gap: 1px;
  flex-wrap: wrap;
}
.platform-overview-calendar table-event {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
}
.platform-overview-calendar event-mark {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
}
.platform-overview-calendar event-time {
  margin-left: auto;
}
.platform-overview-calendar table-hover-block {
  display: none;
  width: 160px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: white;
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
}
.platform-overview-calendar table-hover-block ul {
  overflow: hidden;
}
.platform-overview-calendar table-hover-block li {
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.platform-overview-calendar table-hover-block event-mark,
.platform-overview-calendar table-hover-block event-time {
  flex-shrink: 0;
}
.platform-overview-calendar table-hover-block span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.platform-overview-calendar table-hover-block::after {
  content: "";
  display: block;
  width: 16px;
  height: 6px;
  border-top: 6px solid white;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: absolute;
  top: calc(100% - 1px);
  left: calc(50% - 8px);
}

.platform-overview-notification {
  padding: 20px;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid #e4e7ec;
}
.platform-overview-notification__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform-overview-notification__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.platform-overview-notification__date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
}
.platform-overview-notification.--news {
  cursor: pointer;
}
.platform-overview-notification.--news:hover {
  background-color: #F9F5FF;
}
.platform-overview-notification h4 {
  margin-bottom: 8px;
}
.platform-overview-notification p {
  font-size: 12px;
  line-height: 150%;
  color: #475467;
}
.platform-overview-notification button {
  padding: 8px 14px;
  font-weight: 600;
  font-size: 14px;
  line-height: 143%;
}
.platform-overview-notification__link {
  padding: 10px 14px;
  border-radius: 8px;
  background-color: white;
  border: 1px solid #E4E7EC;
  word-break: break-all;
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-overview-notification__link button {
  margin-left: auto;
  flex-shrink: 0;
}
.platform-overview-notification__popup-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #475467;
}

.platform-overview-banner {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #E4E7EC;
  background-color: #53389E;
  position: relative;
}
.platform-overview-banner::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url("/images/student-overview-banner-bg.png");
  background-repeat: repeat;
  background-size: 700px;
  background-position: center;
  opacity: 15%;
}
.platform-overview-banner__content {
  color: white;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}
@media (max-width: 768px) {
  .platform-overview-banner__content {
    grid-template-columns: 1fr;
  }
}
.platform-overview-banner__text-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.platform-overview-banner__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}
.platform-overview-banner__text {
  font-size: 16px;
  line-height: 24px;
}
.platform-overview-banner__buttons {
  display: flex;
  gap: 12px;
}

.platform-personal {
  min-height: 100%;
}
.platform-personal:has(.platform-chats-message) {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.platform-personal__edit-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 143%;
  color: #6941c6;
}
.platform-personal__edit-button:hover {
  opacity: 0.6;
}
.platform-personal__edit-button.--disabled, .popup-user-agreement:not(:has(.cssCheckboxTrigger:checked)) .platform-personal__edit-button.cssButtonAction {
  opacity: 0.2;
}
.platform-personal__content {
  border-top: 1px solid #e4e7ec;
}
.platform-personal__block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ec;
}
.platform-personal__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  max-width: 820px;
  width: 100%;
}
@media (max-width: 768px) {
  .platform-personal__item {
    flex-direction: column;
    gap: 12px;
  }
}
.platform-personal__item h2 {
  font-size: 24px;
  font-weight: 600;
  color: #101828;
}
.platform-personal__item.--subscription-image .input-file {
  height: 240px;
}
.platform-personal__item.--subscription-image .platform-personal__input-image {
  width: 100%;
}
.platform-personal__item.--subscription-image .platform-personal__input-image > img {
  width: 100%;
  height: 300px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  max-width: unset;
  max-height: unset;
}
.platform-personal__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 143%;
  color: #344054;
  flex: 0 1 300px;
}
@media (max-width: 768px) {
  .platform-personal__title {
    flex: unset;
  }
}
.platform-personal__item .platform-personal__input {
  flex: 0 1 500px;
}
@media (max-width: 768px) {
  .platform-personal__item .platform-personal__input {
    flex: unset;
  }
}
.platform-personal__input {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 500px;
  width: 100%;
}
.platform-personal__input:has(.input-time) {
  flex-direction: row;
}
@media (max-width: 768px) {
  .platform-personal__input {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: unset;
  }
}
.platform-personal__input > * {
  flex: 1;
}
.platform-personal__input.--tags {
  flex-wrap: wrap;
}
.platform-personal__input.--tags > * {
  flex: unset;
}
.platform-personal__input.--full-width {
  max-width: 100%;
  width: 100%;
  flex: unset;
}
.platform-personal__input-image {
  flex: unset;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
.platform-personal__input-image img {
  flex: unset;
  max-width: 200px;
  max-height: 200px;
}
.platform-personal__input-image delete-trigger {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.platform-personal__input-image delete-trigger:hover ~ img {
  opacity: 0.5;
}
.platform-personal__input-with-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.platform-personal__input-with-text-wrapper span {
  font-size: 14px;
  color: #344054;
}
.platform-personal__checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
}
.platform-personal__checkbox-label span {
  font-size: 14px;
}
.platform-personal__radio-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.platform-personal__radio-label span {
  font-size: 16px;
  font-weight: 500;
}
.platform-personal__radio-label question-circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 1px solid #D0D5DD;
  flex-shrink: 0;
}
.platform-personal__sub-input-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  color: #6941C6;
  font-size: 14px;
}
.platform-personal__sub-input-text span {
  color: #6941C6;
  font-size: 14px;
}
.platform-personal__quiz-question {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform-personal__quiz-question.--closed .platform-personal__radio-label span {
  height: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 250px;
}
.platform-personal__question-tags {
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.platform-personal__question-tags .tag {
  margin: 0;
}
.platform-personal__quiz-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}
.platform-personal__buttons {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 16px;
}
.platform-personal__checkbox-table th {
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #344054;
  text-align: left;
}
.platform-personal__checkbox-table td {
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: #344054;
}
.platform-personal__checkbox-table td,
.platform-personal__checkbox-table th {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
}
.platform-personal__checkbox-table td:first-child,
.platform-personal__checkbox-table th:first-child {
  padding-left: 0;
}
.platform-personal__checkbox-table td:last-child,
.platform-personal__checkbox-table th:last-child {
  padding-right: 0;
}
.platform-personal__checkbox-table input[type=checkbox] {
  accent-color: #7f56d9;
}

.platform-personal .input-email,
.platform-personal .input-tel,
.platform-personal .input-time {
  position: relative;
}
.platform-personal .input-email input,
.platform-personal .input-tel input,
.platform-personal .input-time input {
  padding-left: 42px;
}
.platform-personal .input-email::before,
.platform-personal .input-tel::before,
.platform-personal .input-time::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}
.platform-personal .input-email::before {
  background-image: url("/images/input-mail-icon.svg");
}
.platform-personal .input-tel::before {
  background-image: url("/images/input-tel-icon.svg");
}
.platform-personal .input-time::before {
  background-image: url("/images/input-time-icon.svg");
}
.platform-personal input,
.platform-personal textarea {
  color: #101828;
}
.platform-personal input[readonly],
.platform-personal textarea[readonly],
.platform-personal input[disabled],
.platform-personal textarea[disabled] {
  color: #667085;
}

.platform-personal-sub-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: #475467;
}
@media (max-width: 1100px) {
  .platform-personal-sub-info {
    align-items: flex-start;
    flex-direction: column;
  }
}
.platform-personal-sub-info__text {
  display: flex;
  gap: 40px;
}
@media (max-width: 1100px) {
  .platform-personal-sub-info__text {
    gap: 20px;
  }
}
@media (max-width: 600px) {
  .platform-personal-sub-info__text {
    flex-direction: column;
    gap: 10px;
  }
}
.platform-personal-sub-info__buttons {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.platform-personal-contacts {
  display: flex;
  gap: 20px;
}
.platform-personal-contacts__inputs {
  display: flex;
  gap: 20px;
  flex: 1 1 640px;
  max-width: 640px;
}
.platform-personal-contacts__inputs > * {
  flex: 1;
}
.platform-personal-contacts__input-buttons {
  display: flex;
  gap: 8px;
}
.platform-personal-contacts select {
  width: 100%;
}

.platform-tasks__sub-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 600px) {
  .platform-tasks__sub-title {
    align-items: unset;
    flex-direction: column;
  }
}
.platform-tasks__sub-title select {
  display: block;
  max-width: 220px;
  width: 100%;
}
.platform-tasks__sub-title > * {
  flex: auto;
}
.platform-tasks__grid {
  padding-top: 24px;
  padding-bottom: 24px;
  gap: 24px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  overflow-x: auto;
}
@media (max-width: 1000px) {
  .platform-tasks__grid {
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.platform-tasks__status-block {
  display: flex;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
  gap: 16px;
  flex: 1;
  max-width: 260px;
  font-size: 14px;
  font-weight: 600;
  line-height: 143%;
  color: #1d2939;
}
@media (max-width: 1000px) {
  .platform-tasks__status-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    max-width: unset;
  }
  .platform-tasks__status-block > p {
    grid-column: span 2;
  }
}
@media (max-width: 600px) {
  .platform-tasks__status-block {
    grid-template-columns: repeat(1, 1fr);
  }
  .platform-tasks__status-block > p {
    grid-column: unset;
  }
}
.platform-tasks__status-block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
}
.platform-tasks__status-block-title .right-click-wrapper,
.platform-tasks__status-block-title > button {
  flex-shrink: 0;
}

.platform-tasks-participants {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  line-height: 143%;
  color: #475467;
}
.platform-tasks-participants button.add-participant {
  font-size: 30px;
  font-weight: 300;
  color: #98a2b3;
  border: 1px dashed #d0d5dd;
  border-radius: 20px;
  background-color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.platform-tasks-participants button.add-participant span {
  display: block;
  margin-bottom: 4px;
}
.platform-tasks-participants button.add-participant:hover {
  color: #667085;
}
.platform-tasks-participants button.add-participant:active {
  box-shadow: 0px 0px 0px 4px #F2F4F7;
}
.platform-tasks-participants .platform-participant-wrapper:nth-child(n+2) {
  margin-left: -12px;
}
.platform-tasks-participants__items {
  display: flex;
}
.platform-tasks-participants__items > *:nth-child(n+2) {
  margin-left: -12px;
}

.platform-tasks-item {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 3px 0 rgba(96, 108, 128, 0.05);
  position: relative;
  border: 1px solid transparent;
}
.platform-tasks-item:hover {
  border-color: #D0D5DD;
}
.platform-tasks-item__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.platform-tasks-item__title task-title {
  display: block;
}
.platform-tasks-item__title > button,
.platform-tasks-item__title .right-click-wrapper {
  flex-shrink: 0;
  align-self: flex-start;
}
.platform-tasks-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.platform-tasks-item__tags .tag {
  margin-right: 0;
}
.platform-tasks-item__participants {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.platform-tasks-item__participants item-participant {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #f9fafb;
  background: #f9f5ff;
  border-radius: 200px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 143%;
  text-align: center;
  color: #7f56d9;
}
.platform-tasks-item__participants item-participant:nth-child(n+2) {
  margin-left: -8px;
}
.platform-tasks-item__participants button {
  font-size: 22px;
  font-weight: 300;
  color: #98a2b3;
  border: 1px dashed #d0d5dd;
  border-radius: 20px;
  background-color: #fff;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.platform-tasks-item__participants button span {
  display: block;
  margin-bottom: 4px;
}
.platform-tasks-item__bottom {
  display: flex;
  margin-top: 12px;
}
.platform-tasks-item__bottom-item {
  font-size: 12px;
  font-weight: 700;
  line-height: 150%;
  color: #98a2b3;
  display: flex;
  align-items: center;
  gap: 4px;
}
.platform-tasks-item__bottom-date {
  font-size: 12px;
  font-weight: 400;
  line-height: 150%;
  color: #98a2b3;
  margin-right: auto;
}
.platform-tasks-item__add-new-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  border: 2px solid #98A2B3;
  font-size: 20px;
  color: #98A2B3;
  font-weight: 500;
}
.platform-tasks-item__add-new-item span {
  display: block;
  margin-bottom: 2px;
}
.platform-tasks-item__buttons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.platform-tasks-item__buttons > * {
  flex: 1;
  text-wrap: nowrap;
}
.platform-tasks-item__checkbox {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.platform-tasks-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-end;
}
@media (max-width: 600px) {
  .platform-tasks-filters {
    justify-content: unset;
  }
}
.platform-tasks-filters .input .button {
  width: calc(100% - 20px);
  margin: 14px 10px;
  margin-top: 4px;
}

.task-checkbox {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.task-checkbox::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/images/task-checkbox.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.task-checkbox:checked:before {
  background-image: url("/images/task-checkbox-completed.svg");
}

.board-drag-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

.platform-tasks-title-quantity {
  padding: 2px 8px;
  border-radius: 100px;
  display: inline-block;
  background-color: #F2F4F7;
  font-size: 12px;
  color: #344054;
  font-weight: 500;
}

.platform-board__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-board__title button {
  flex-shrink: 0;
}
.platform-board__title button:hover {
  opacity: 0.7;
}
.platform-board__stats {
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-board__stats img {
  flex-shrink: 0;
}
.platform-board__stats ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.platform-board__stats li {
  padding: 0 2px;
}
.platform-board__stats li::after {
  content: " | ";
  color: #667085;
}
.platform-board__stats li:last-child::after {
  display: none;
}
.platform-board__action-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
.platform-board__action-button {
  height: 48px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 1px 3px 0px rgba(96, 108, 128, 0.0509803922);
  display: flex;
  align-items: center;
  justify-content: center;
}
.platform-board__action-button:hover {
  background-color: #f3f3f3;
}
.platform-board__column-title {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.platform-board__column-title > img,
.platform-board__column-title .hover-wrapper,
.platform-board__column-title .right-click-wrapper {
  flex-shrink: 0;
}
.platform-board__column-title-text {
  flex-grow: 1;
  overflow: hidden;
}

.right-filters {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 20;
  width: 360px;
  padding: 20px;
  padding-left: 16px;
  background-color: #F9FAFB;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
  overflow: auto;
  color: #101828;
  transform: translateX(100%);
  transition: 0.5s;
  /* width */
  /* Track */
  /* Handle */
}
.right-filters.active {
  transform: translateX(0%);
}
.right-filters__title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E4E7EC;
}
.right-filters__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.right-filters__item-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.right-filters__item-title {
  font-size: 16px;
  font-weight: 600;
}
.right-filters__item-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.right-filters__item-content label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.right-filters__tags {
  display: flex;
  gap: 4px 8px;
  flex-wrap: wrap;
}
.right-filters__tags .tag button {
  font-size: 16px;
}
.right-filters__tags .tag {
  margin: 0;
}
.right-filters__buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}
.right-filters__buttons > * {
  flex: 1;
}
.right-filters__row-center {
  display: flex;
  align-items: center;
  gap: 12px;
}
.right-filters .platform-checkbox, .right-filters .lesson-test__question input[type=checkbox], .lesson-test__question .right-filters input[type=checkbox],
.right-filters .platform-radio,
.right-filters .lesson-test__question input[type=radio],
.lesson-test__question .right-filters input[type=radio] {
  width: 16px;
  height: 16px;
}
.right-filters::-webkit-scrollbar {
  width: 4px;
}
.right-filters::-webkit-scrollbar-track {
  background: #F2F4F7;
}
.right-filters::-webkit-scrollbar-thumb {
  background: #7F56D9;
}

.filter__person-buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.platform-calendar__table {
  overflow-x: auto;
}
.platform-calendar__title {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #e4e7ec;
  padding: 16px;
}
@media (max-width: 768px) {
  .platform-calendar__title {
    display: grid;
    grid-template-columns: repeat(2, auto);
  }
  .platform-calendar__title table-date {
    grid-column: span 2;
  }
}
.platform-calendar__title select {
  width: 220px;
  height: 42px;
  margin-left: auto;
}
.platform-calendar table-date {
  display: block;
  font-size: 24px;
  font-weight: 500;
  line-height: 133%;
  color: #101828;
}
.platform-calendar table-time {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  color: #101828;
  text-align: center;
}
.platform-calendar item-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 150%;
  color: #89123e;
}
.platform-calendar item-time {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  color: #89123e;
}
.platform-calendar item-day-more {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 150%;
  color: #7f56d9;
}
.platform-calendar item-day-circle {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
}
.platform-calendar table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.platform-calendar td {
  border: 1px solid #d0d5dd;
  height: 100%;
  position: relative;
  padding: 2px;
}
.platform-calendar tr {
  vertical-align: top;
}
.platform-calendar .--day tr {
  height: 60px;
}
.platform-calendar .--week tr {
  height: 100px;
}
.platform-calendar .--month tr {
  height: 130px;
}
.platform-calendar :is(.--day, .--week, .--month) thead tr {
  height: unset;
}
.platform-calendar thead tr {
  height: unset;
}
.platform-calendar th {
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  color: #101828;
  padding: 4px 0;
}
.platform-calendar :is(.--day, .--week) td:first-child {
  border: unset;
}
.platform-calendar .--schedule:is(.--day, .--week) td:first-child {
  border: 1px solid #d0d5dd;
}
.platform-calendar td.--old-day {
  background: #f2f4f7;
}
.platform-calendar td.--old-day > * {
  opacity: 0.5;
}
.platform-calendar__add-new-event {
  position: fixed;
  bottom: 40px;
  right: 40px;
  top: unset;
  left: unset;
}
.platform-calendar__add-new-event span {
  line-height: 1;
  font-size: 30px;
  font-weight: 200;
  margin-top: -4px;
}

.platform-calendar-table__data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.platform-calendar-table__data > * {
  flex: 1;
}
.platform-calendar-table__data.--schedule:has(.platform-calendar-table__schedule-item) {
  justify-content: center;
  padding: 4px 6px;
  border-radius: 3px;
  background-color: #D1FADF;
  border: 1px solid #A6F4C5;
  cursor: pointer;
}
.platform-calendar-table__data.--schedule:has(.platform-calendar-table__schedule-item) > * {
  flex: unset;
}
.platform-calendar-table__item {
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid #fecdd6;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.platform-calendar-table__item-title {
  display: flex;
  align-items: center;
}
.platform-calendar-table__item-content {
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  color: #89123e;
}
.platform-calendar-table__day-item {
  padding: 4px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.platform-calendar-table__day-item-figure {
  font-weight: 500;
  font-size: 12px;
  line-height: 150%;
  color: #101828;
  padding: 5px;
}
.platform-calendar-table__day-item-content {
  margin-top: auto;
}
.platform-calendar-table__schedule-item {
  border-radius: 8px;
  padding: 10px 14px;
  border: 1px solid #D0D5DD;
  background-color: #D1FADF;
  font-size: 16px;
  color: #101828;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}
.platform-calendar-table__schedule-item:hover {
  filter: brightness(0.97);
}
.platform-calendar-table__empty-cell-with-add-plus {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #667085;
  font-size: 20px;
  cursor: pointer;
}
.platform-calendar-table__empty-cell-with-add-plus:hover {
  background-color: rgba(102, 112, 133, 0.05);
}
.platform-calendar-table__regular-tasks-data {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.platform-calendar-table__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.platform-calendar-table__tags .tag {
  margin: 0;
}

.calendar-schedule-left-block {
  padding: 10px;
  background-color: #FCFCFD;
}
.calendar-schedule-left-block__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;
  font-size: 12px;
  color: #42307D;
}
.calendar-schedule-left-block__main {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #101828;
}

.platform-leads__sub-title {
  display: flex;
  border-bottom: 1px solid #e4e7ec;
  margin-bottom: 24px;
}
.platform-leads__tabs {
  display: flex;
  gap: 16px;
  margin-bottom: -1px;
}
.platform-leads__tabs li {
  font-weight: 600;
  font-size: 14px;
  line-height: 143%;
  color: #667085;
  padding: 0 4px 16px 4px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.platform-leads__tabs li:not(.active):hover {
  opacity: 0.6;
}
.platform-leads__tabs li.active {
  color: #6941c6;
  border-color: #6941c6;
}

.platform-student-comment {
  flex: 100%;
}
.platform-student-comment.--editing input {
  padding-right: 38px;
}
.platform-student-comment.--editing label {
  position: relative;
}
.platform-student-comment.--editing label::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("/images/detele-icon.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  cursor: pointer;
}

.platform-auth__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 100vh;
}
@media (max-width: 900px) {
  .platform-auth__row {
    grid-template-columns: 1fr;
  }
}
.platform-auth__left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.platform-auth__right {
  position: relative;
}
.platform-auth__right img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media (max-width: 900px) {
  .platform-auth__right {
    display: none;
  }
}
.platform-auth__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
}
.platform-auth__text {
  width: 100%;
  max-width: 424px;
  margin: 0 auto;
  padding: 0 32px;
}
.platform-auth__footer {
  padding: 32px;
  font-size: 14px;
  line-height: 143%;
  color: #475467;
}

.platform-auth__title {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  margin-bottom: 32px;
}
.platform-auth__title h1 {
  font-weight: 600;
  font-size: 36px;
  line-height: 122%;
  letter-spacing: -0.02em;
  text-align: center;
  color: #101828;
}
.platform-auth__title p {
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  color: #475467;
}
.platform-auth__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.platform-auth__inputs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.platform-auth__input-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.platform-auth__input-block input-error {
  display: block;
  font-size: 14px;
  line-height: 143%;
  color: #f04438;
}
.platform-auth__input-block input-hint {
  display: block;
  font-size: 14px;
  line-height: 143%;
  color: #475467;
}
.platform-auth__pass-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  color: #344054;
}
.platform-auth__pass-row label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-auth__pass-row a {
  color: #6941c6;
}
.platform-auth__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.platform-auth__buttons-with-divider {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.platform-auth__buttons-with-divider button-divider {
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-auth__buttons-with-divider button-divider span {
  font-size: 14px;
  line-height: 143%;
  text-align: center;
  color: #667085;
}
.platform-auth__buttons-with-divider button-divider::before,
.platform-auth__buttons-with-divider button-divider::after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  background: #e4e7ec;
}
.platform-auth__sub-text {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  line-height: 143%;
  color: #475467;
}
.platform-auth__sub-text a {
  color: #6941c6;
}

.platform-auth-notification {
  position: fixed;
  top: 80px;
  right: 0px;
  z-index: 100;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.platform-auth-notification__content {
  width: 100%;
  max-width: 544px;
  padding: 24px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.08);
  display: flex;
  align-items: center;
  gap: 24px;
}
.platform-auth-notification__image {
  align-self: start;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.platform-auth-notification__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.platform-auth-notification__text h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 156%;
  color: #101828;
}
.platform-auth-notification__text p {
  font-size: 14px;
  line-height: 143%;
  color: #475467;
}
.--success .platform-auth-notification__image {
  background-image: url("/images/notifications/success.svg");
}
.--warning .platform-auth-notification__image {
  background-image: url("/images/notifications/warning.svg");
}
.--error .platform-auth-notification__image {
  background-image: url("/images/notifications/error.svg");
}
.--reload .platform-auth-notification__image {
  background-image: url("/images/notifications/reload.svg");
}

.platform-auth-after {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.platform-auth-after > * {
  width: 100%;
}
.platform-auth-after__text {
  text-align: center;
  font-size: 14px;
  line-height: 143%;
  color: #475467;
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.platform-auth-after__text img {
  margin-bottom: 24px;
}
.platform-auth-after__text h1 {
  font-size: 18px;
  font-weight: 600;
  line-height: 156%;
  color: #101828;
}
.platform-auth-after__text p {
  margin: 8px 0;
}
.platform-auth-after__text .button {
  margin-top: 24px;
}
.platform-auth-after__mail-again {
  margin-top: 32px;
}
.platform-auth-after__mail-again a {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  color: #6941c6;
}
.platform-auth-after .platform-auth__footer {
  text-align: center;
}

.platform-accounts-list__item {
  padding: 20px 12px;
  border-top: 1px solid #E4E7EC;
}
.platform-accounts-list__item, .platform-accounts-list__item a {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  cursor: pointer;
}
.platform-accounts-list__item:hover, .platform-accounts-list__item a:hover {
  background-color: #f9fafb;
}
.platform-accounts-list__item.--selected {
  background-color: #F9F5FF;
}
.platform-accounts-list__item.--selected .platform-participant {
  outline: 2px solid white;
}
.platform-accounts-list__item:last-child {
  border-bottom: 1px solid #E4E7EC;
}
.platform-accounts-list__item-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.platform-chats {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.platform-chats__content {
  display: flex;
  flex-grow: 1;
  height: 100%;
  position: relative;
}
.platform-chats__modal-stars {
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-chats__modal-star {
  cursor: pointer;
}
.platform-chats__modal-star img {
  content: url("/images/chats-star-grey.svg");
}
.platform-chats__modal-star.selected img, .platform-chats__modal-star.hovered img {
  content: url("/images/chats-star-active.svg");
}
.platform-chats__modal-star:hover img {
  content: url("/images/chats-star-active.svg");
}

.platform-chats-left {
  padding: 16px;
  background-color: white;
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: 0.6s;
}
@media (max-width: 900px) {
  .platform-chats-left {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    transform: translateX(-100%);
  }
}
.platform-chats-left__tabs {
  margin-bottom: 12px;
  border-bottom: 1px solid #E4E7EC;
}
.platform-chats-left__tabs li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-chats-left__list {
  flex-grow: 1;
  height: 600px;
  margin-right: -16px;
  padding-right: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}
.platform-chats-left__list ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
}
.platform-chats-left__notification {
  font-size: 14px;
  font-weight: 500;
  color: #6941C6;
  padding: 2px 10px;
  border-radius: 100px;
  background-color: #F9F5FF;
  flex-shrink: 0;
}
.platform-chats-left__trigger {
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #e4e7ec;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 11;
  display: none;
}
.platform-chats-left__trigger img {
  height: 24px;
  transform: rotate(180deg);
}
@media (max-width: 900px) {
  .platform-chats-left__trigger {
    display: flex;
  }
}
.platform-chats-left.active {
  transform: translateX(0%);
}
.platform-chats-left.active .platform-chats-left__trigger img {
  transform: rotate(0deg);
}

.platform-chats-left-member {
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  cursor: pointer;
}
.platform-chats-left-member.--online .platform-chats-left-member__image::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background-color: #12B76A;
  outline: 1.5px solid white;
  position: absolute;
  bottom: 0;
  right: 0;
}
.platform-chats-left-member__image {
  position: relative;
  flex-shrink: 0;
  align-self: center;
}
.platform-chats-left-member__preview {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #475467;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  align-self: center;
}
.platform-chats-left-member__preview person-name {
  display: block;
  font-weight: 600;
  color: #344054;
  overflow: hidden;
  text-overflow: ellipsis;
}
.platform-chats-left-member__preview by-whom {
  color: #7F56D9;
  vertical-align: middle;
  display: inline-block;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.platform-chats-left-member__preview latest-msg {
  color: #475467;
  vertical-align: middle;
}
.platform-chats-left-member__preview p {
  overflow: hidden;
  text-overflow: ellipsis;
}
.platform-chats-left-member__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.platform-chats-left-member__tags .tag {
  margin: 0;
}
.platform-chats-left-member__settings {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 3px;
  margin-left: auto;
}
.platform-chats-left-member__settings .right-click-wrapper > button:hover {
  opacity: 0.6;
}
.platform-chats-left-member.active, .platform-chats-left-member:hover {
  background-color: #F9FAFB;
}

.platform-chats-right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.platform-chats-right.--from-tabs {
  margin-left: -32px;
  margin-right: -32px;
  margin-bottom: -48px;
}

.platform-chats-right-title {
  padding: 24px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.platform-chats-right-title__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-chats-right-title__top h3 {
  font-size: 20px;
  color: #101828;
}
.platform-chats-right-title__top .input {
  flex-grow: 1;
}
.platform-chats-right-title__icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.platform-chats-right-title__icon {
  cursor: pointer;
}
.platform-chats-right-title__icon:hover {
  opacity: 0.6;
}
.platform-chats-right-title__back {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.platform-chats-right-title__back:hover {
  opacity: 0.6;
}
.platform-chats-right-title__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  background-color: #F9F5FF;
  font-size: 14px;
  font-weight: 500;
  color: #6941C6;
  flex-shrink: 0;
}

.platform-chats-area {
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  padding-right: 32px;
  background-color: #F9FAFB;
  flex-grow: 1;
  overflow-y: auto;
}
.platform-chats-area__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.platform-chats-area__divider {
  font-size: 14px;
  color: #667085;
  text-align: center;
  padding: 28px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-chats-area__divider span {
  flex-shrink: 0;
  text-wrap: nowrap;
}
.platform-chats-area__divider::before, .platform-chats-area__divider::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #E4E7EC;
  flex-grow: 1;
}

.platform-chats-message {
  display: flex;
}
.platform-chats-message__content {
  display: flex;
  gap: 12px;
  max-width: max(312px, 70%);
}
.platform-chats-message.--mine .platform-chats-message__image {
  display: none;
}
.platform-chats-message.--mine {
  justify-content: flex-end;
}
.platform-chats-message.--mine .platform-chats-message__body {
  background-color: #7F56D9;
  border-radius: 8px 0 8px 8px;
}
.platform-chats-message.--mine .platform-chats-message__text {
  color: #F9FAFB;
}
.platform-chats-message.--online .platform-chats-message__image::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background-color: #12B76A;
  outline: 1.5px solid white;
  position: absolute;
  bottom: 0;
  right: 0;
}
.platform-chats-message__image {
  flex-shrink: 0;
  align-self: start;
  position: relative;
}
.platform-chats-message__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.platform-chats-message__info-top {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr min-content;
  gap: 8px;
  text-wrap: nowrap;
}
.platform-chats-message__info-top info-whom {
  font-size: 14px;
  color: #344054;
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
}
.platform-chats-message__info-top info-when {
  font-size: 12px;
  color: #475467;
}
.platform-chats-message__body {
  padding: 10px 14px;
  background-color: #F2F4F7;
  border-radius: 0 8px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.platform-chats-message__text {
  font-size: 16px;
  color: #101828;
}
.platform-chats-message__uploads {
  display: grid;
  gap: 10px;
}
.platform-chats-message__uploads.--grid {
  grid-template-columns: repeat(auto-fit, 80px);
}
.platform-chats-message__uploads.--column {
  grid-template-columns: 1fr;
}
.platform-chats-message.--context-menu-opened {
  background-color: #F9F5FF;
}
.platform-chats-message__load-prev {
  padding: 10px 14px;
  background-color: #F2F4F7;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  color: #101828;
  cursor: pointer;
}
.platform-chats-message__load-prev:hover {
  background-color: rgba(242, 244, 247, 0.4666666667);
}

.platform-chats-upload, .platform-uploads-folder {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.platform-chats-upload__preview, .platform-uploads-folder__preview {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.platform-chats-upload.--image .platform-chats-upload__preview img, .platform-chats-upload.--image .platform-uploads-folder__preview img, .--image.platform-uploads-folder .platform-chats-upload__preview img, .--image.platform-uploads-folder .platform-uploads-folder__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.platform-chats-upload__title, .platform-uploads-folder__title {
  font-size: 14px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.platform-chats-upload__title file-name, .platform-uploads-folder__title file-name {
  font-weight: 500;
  color: #344054;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.platform-chats-upload__title file-size, .platform-uploads-folder__title file-size {
  color: #475467;
}
.platform-chats-upload__action-button, .platform-uploads-folder__action-button {
  position: absolute;
  top: 4px;
  right: 4px;
  flex-shrink: 0;
}
.platform-chats-upload:hover, .platform-uploads-folder:hover {
  opacity: 0.7;
}
.platform-chats-upload.--vertical .platform-chats-upload__title file-size, .platform-chats-upload.--vertical .platform-uploads-folder__title file-size, .--vertical.platform-uploads-folder .platform-chats-upload__title file-size, .--vertical.platform-uploads-folder .platform-uploads-folder__title file-size {
  display: none;
}
.platform-chats-upload.--vertical .platform-chats-upload__preview, .platform-chats-upload.--vertical .platform-uploads-folder__preview, .--vertical.platform-uploads-folder .platform-chats-upload__preview, .--vertical.platform-uploads-folder .platform-uploads-folder__preview {
  border: 1px solid #E4E7EC;
}
.platform-chats-upload.--horizontal, .--horizontal.platform-uploads-folder {
  padding: 10px 14px;
  border-radius: 8px;
  background-color: white;
  border: 1px solid #E4E7EC;
  flex-direction: row;
}
.platform-chats-upload.--horizontal .platform-chats-upload__preview, .platform-chats-upload.--horizontal .platform-uploads-folder__preview, .--horizontal.platform-uploads-folder .platform-chats-upload__preview, .--horizontal.platform-uploads-folder .platform-uploads-folder__preview {
  width: 32px;
  background-color: unset;
  border-radius: unset;
}
.platform-chats-upload.--horizontal .platform-chats-upload__title, .platform-chats-upload.--horizontal .platform-uploads-folder__title, .--horizontal.platform-uploads-folder .platform-chats-upload__title, .--horizontal.platform-uploads-folder .platform-uploads-folder__title {
  text-align: left;
}
.platform-chats-upload.--horizontal .platform-chats-upload__action-button, .platform-chats-upload.--horizontal .platform-uploads-folder__action-button, .--horizontal.platform-uploads-folder .platform-chats-upload__action-button, .--horizontal.platform-uploads-folder .platform-uploads-folder__action-button {
  position: static;
  margin-left: auto;
}
.platform-chats-upload.--horizontal .platform-chats-upload__action-button img, .platform-chats-upload.--horizontal .platform-uploads-folder__action-button img, .--horizontal.platform-uploads-folder .platform-chats-upload__action-button img, .--horizontal.platform-uploads-folder .platform-uploads-folder__action-button img {
  width: 20px;
}

.platform-chats-interface {
  margin-top: auto;
  padding: 16px 24px;
  background-color: #F9FAFB;
  border-top: 1px solid #E4E7EC;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform-chats-interface__uploads {
  display: grid;
  gap: 12px 10px;
}
.platform-chats-interface__uploads.--grid {
  grid-template-columns: repeat(auto-fit, 80px);
}
.platform-chats-interface__uploads.--column {
  grid-template-columns: 1fr;
}
.platform-chats-interface__input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}
.platform-chats-interface__input-wrapper {
  position: relative;
}
.platform-chats-interface__input-wrapper input {
  padding-right: 38px;
}
.platform-chats-interface__input-upload {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 2;
  transform: translateY(-50%);
  cursor: pointer;
  height: -moz-fit-content;
  height: fit-content;
  padding: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.platform-chats-interface__input-upload input {
  display: none !important;
}
.platform-chats-interface__input-upload:hover {
  opacity: 0.6;
}

.platform-main:has(.platform-chats) {
  padding: 0;
}

.platform-main:has(.platform-chats) .platform-personal {
  height: 100%;
}

.platform-chats-interface-edit-message {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: white;
}
.platform-chats-interface-edit-message__left, .platform-chats-interface-edit-message__right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.platform-chats-interface-edit-message__left button:hover, .platform-chats-interface-edit-message__right button:hover {
  opacity: 0.6;
}
.platform-chats-interface-edit-message__content {
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  padding: 4px 10px;
  border-radius: 8px;
  background-color: #F9F5FF;
  border-left: 2px solid #6941C6;
}
.platform-chats-interface-edit-message__content-title {
  font-weight: 600;
  color: #6941C6;
}
.platform-chats-interface-edit-message__content-text {
  color: #101828;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.platform-ticket__subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.platform-ticket__id {
  color: #101828;
}
.platform-ticket__topic {
  color: #101828;
  max-width: 400px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.platform-ticket__person {
  color: #475467;
  display: flex;
  align-items: center;
  gap: 12px;
}
.platform-ticket__date {
  color: #475467;
}
.platform-ticket__buttons {
  width: -moz-fit-content;
  width: fit-content;
}

.ticket-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.ticket-step__title {
  font-size: 14px;
  font-weight: 600;
  color: #344054;
}
.ticket-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 20px;
}

.popups-departments-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.popups-departments-quantity__amount {
  display: flex;
  gap: 8px;
}

.platform-departments-top-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.platform-departments-top-nav label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-departments-top-nav__zoom-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.platform-departments-top-nav__zoom-buttons button {
  width: 44px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #D0D5DD;
  border-bottom: 1px solid #D0D5DD;
  border-left: 1px solid #D0D5DD;
}
.platform-departments-top-nav__zoom-buttons button:hover {
  background-color: rgba(208, 213, 221, 0.2117647059);
}
.platform-departments-top-nav__zoom-buttons button:first-child {
  border-radius: 8px 0 0 8px;
}
.platform-departments-top-nav__zoom-buttons button:last-child {
  border-radius: 0 8px 8px 0;
  border-right: 1px solid #D0D5DD;
}

.platform-departments__tree {
  padding-top: 32px;
  padding-bottom: 32px;
  overflow-x: auto;
}
.platform-departments__tree > tree-node {
  margin: 0 auto;
}
.platform-departments__tree tree-node:has(sub-nodes) > sub-nodes > tree-node > node-item::before {
  display: block;
  bottom: 100%;
}
.platform-departments__tree tree-node:has(sub-nodes) > node-item::after {
  display: block;
  top: 100%;
}
.platform-departments__tree tree-node:has(sub-nodes) > sub-nodes > tree-node::before {
  display: block;
}
.platform-departments__tree tree-node:has(sub-nodes) > sub-nodes > tree-node:last-child::before {
  display: block;
  right: calc(50% - 1px);
}
.platform-departments__tree tree-node:has(sub-nodes) > sub-nodes > tree-node:first-child::before {
  display: block;
  left: calc(50% - 1px);
}

tree-node,
.platform-departments-node {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 60px;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
}
tree-node::before,
.platform-departments-node::before {
  content: "";
  height: 1px;
  background-color: #98A2B3;
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: calc(100% + 30px);
  display: none;
}

node-item,
.platform-departments-node__item {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
}
node-item::before, node-item::after,
.platform-departments-node__item::before,
.platform-departments-node__item::after {
  content: "";
  width: 1px;
  height: 30px;
  background-color: #98A2B3;
  position: absolute;
  left: calc(50% - 1px);
  display: none;
}

sub-nodes,
.platform-departments-node__subnodes {
  display: grid;
  grid-auto-flow: column;
  gap: 20px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
}

.platform-departments-node-item {
  padding: 16px;
  border-radius: 8px;
  background-color: white;
  border: 1px solid #E4E7EC;
  width: 240px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform-departments-node-item:hover {
  border-color: #7F56D9;
}
.platform-departments-node-item__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #667085;
}
.platform-departments-node-item__header .platform-participant {
  margin-bottom: 4px;
}
.platform-departments-node-item__header .tag {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
  margin: 0;
}
.platform-departments-node-item__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #344054;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.platform-departments-node-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.platform-departments-node-item__participants-items {
  flex-shrink: 0;
}
.platform-departments-node-item__participants-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #475467;
  flex-shrink: 0;
}
.platform-departments-node-item__more {
  position: absolute;
  top: 0;
  right: 6px;
}
.platform-departments-node-item__more > button:hover {
  opacity: 0.6;
}
.platform-departments-node-item.--in-popup {
  width: 100%;
}
.platform-departments-node-item.--in-popup .platform-departments-node-item__header {
  text-align: left;
  align-items: flex-start;
}

.platform-uploads-filtering {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.platform-uploads-filtering__right {
  display: flex;
  gap: 16px;
}

.platform-uploads-breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.platform-uploads-breadcrumbs li {
  color: #98A2B3;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-uploads-breadcrumbs li:hover {
  opacity: 0.8;
}
.platform-uploads-breadcrumbs li:after {
  content: url("/images/chevron-right-gray-16x16.svg");
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
}
.platform-uploads-breadcrumbs li:last-child {
  color: #475467;
  cursor: unset;
}
.platform-uploads-breadcrumbs li:last-child:hover {
  opacity: unset;
}
.platform-uploads-breadcrumbs li:last-child::after {
  display: none;
}

.platform-uploads-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform-uploads-grid__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #101828;
}
.platform-uploads-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.platform-uploads-item {
  padding: 8px;
  border-radius: 8px;
  background-color: #F2F4F7;
  border: 1px solid #E4E7EC;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.platform-uploads-item:hover {
  background-color: #E4E7EC;
}
.platform-uploads-item__preview {
  height: 80px;
  border-radius: 6px;
  background-color: white;
  border: 1px solid #E4E7EC;
  display: flex;
  justify-content: center;
  align-items: center;
}
.platform-uploads-item__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.platform-uploads-item__title button,
.platform-uploads-item__title .right-click-wrapper {
  flex-shrink: 0;
}
.platform-uploads-item__title-text {
  overflow: hidden;
  flex-shrink: 10;
  font-size: 14px;
  line-height: 20px;
}
.platform-uploads-item__title-text file-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #344054;
}
.platform-uploads-item__title-text file-size {
  display: block;
  font-weight: 400;
}
.platform-uploads-item__date {
  font-size: 12px;
  line-height: 18px;
  color: #667085;
}

.platform-uploads-folder {
  padding: 10px 14px;
  border-radius: 8px;
  background-color: white;
  border: 1px solid #E4E7EC;
  flex-direction: row;
  align-items: center;
}
.platform-uploads-folder:hover {
  background-color: #F2F4F7;
}
.platform-uploads-folder__preview {
  width: 32px;
  background-color: unset;
  border-radius: unset;
}
.platform-uploads-folder__title {
  text-align: left;
}
.platform-uploads-folder__action-button {
  position: static;
  margin-left: auto;
}
.platform-uploads-folder__action-button img {
  width: 20px;
}
.platform-uploads-folder__action-button.--close {
  position: absolute;
}
.platform-uploads-folder__action-button.--close img {
  width: unset;
}

.platform-uploads-popup-grid {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background-color: #F2F4F7;
}
.platform-uploads-popup-grid.--items {
  grid-template-columns: repeat(auto-fill, 80px);
}
.platform-uploads-popup-grid.--folders {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.platform-uploads-popup-grid.--no-bg {
  background-color: unset;
}
.platform-uploads-popup-grid .platform-chats-upload,
.platform-uploads-popup-grid .platform-uploads-folder {
  cursor: unset;
}
.platform-uploads-popup-grid .platform-chats-upload:hover,
.platform-uploads-popup-grid .platform-uploads-folder:hover {
  opacity: unset;
}
.platform-uploads-popup-grid .platform-uploads-folder:hover {
  background-color: white;
}

.platform-games__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 340px);
  gap: 20px;
}
.platform-games__item {
  border-radius: 8px;
  border: 1px solid #E4E7EC;
}
.platform-games__item-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #E4E7EC;
}
.platform-games__item-text {
  padding: 20px;
  border-bottom: 1px solid #E4E7EC;
}
.platform-games__item-title {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  max-width: 280px;
}
.platform-games__item-teacher {
  font-size: 14px;
  font-weight: 600;
  color: #6941C6;
}
.platform-games__item-stats {
  padding: 20px;
  border-bottom: 1px solid #E4E7EC;
}
.platform-games__item-stats ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform-games__item-stats li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.platform-games__item-stats .hover-wrapper {
  vertical-align: middle;
  margin-left: 4px;
}
.platform-games__item-stats-left {
  font-size: 14px;
  font-weight: 600;
  color: #344054;
}
.platform-games__item-stats-right {
  font-size: 16px;
  color: #101828;
}
.platform-games__item-result {
  padding: 20px;
  border-radius: 0 0 8px 8px;
}

.comments__input {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
}
.comments__column {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.comments__single {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comments__single-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.comments__single-head-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}
.comments__single-body div.form-control {
  background-color: #F9FAFB;
}
.comments__single-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.comments textarea {
  height: 0;
  resize: unset;
  min-height: 44px;
  max-height: unset;
  overflow: hidden;
  padding-top: 8px;
  padding-bottom: 8px;
}

.platform-input-calendar {
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.031372549), 0px 20px 24px -4px rgba(16, 24, 40, 0.0784313725);
}
.platform-input-calendar__inner {
  display: grid;
  grid-template-columns: auto 1fr;
}
@media (max-width: 1000px) {
  .platform-input-calendar__inner {
    grid-template-columns: 1fr;
  }
}
.platform-input-calendar__main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.platform-input-calendar__main-top {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  flex-grow: 1;
}
.platform-input-calendar__main-footer {
  padding: 16px 24px;
  border-top: 1px solid #E4E7EC;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.platform-input-calendar__main-top-date-range {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}
.platform-input-calendar__main-top-date-range input,
.platform-input-calendar__main-top-date-range label {
  width: unset;
  flex: 1;
}
.platform-input-calendar__main-top-date-range .input-time {
  min-width: 110px;
  max-width: 110px;
}
.platform-input-calendar__main-footer-date-range, .platform-input-calendar__main-footer-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 900px) {
  .platform-input-calendar__main-footer-date-range {
    display: none;
  }
}
.platform-input-calendar__main-footer-buttons {
  margin-left: auto;
}
@media (max-width: 900px) {
  .platform-input-calendar__main-footer-buttons {
    width: 100%;
  }
  .platform-input-calendar__main-footer-buttons button {
    flex: 1;
  }
}
.platform-input-calendar .platform-input-calendar__main-footer-date-range input {
  width: 128px;
  text-align: center;
}
@media (min-width: 900px) {
  .platform-input-calendar .--mobile-only {
    display: none;
  }
}

.platform-input-calendar.--single-day .platform-input-calendar__inner {
  grid-template-columns: 1fr;
}
.platform-input-calendar.--single-day .platform-input-calendar__main-footer-buttons {
  width: 100%;
}
.platform-input-calendar.--single-day .platform-input-calendar__main-footer-buttons button {
  flex: 1;
}

.platform-input-calendar-item {
  display: block;
  padding: 20px 24px;
  min-height: 100%;
}
.platform-input-calendar-item:nth-child(2) {
  border-left: 1px solid #E4E7EC;
}
@media (max-width: 900px) {
  .platform-input-calendar-item:nth-child(2) {
    display: none;
  }
}
.platform-input-calendar-item__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.platform-input-calendar-item__top {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #344054;
  text-align: center;
}
.platform-input-calendar-item__top span {
  grid-column: 2;
}
.platform-input-calendar-item__main {
  flex-grow: 1;
}

.platform-input-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  grid-auto-rows: 40px;
  gap: 4px 0;
}
.platform-input-calendar-grid calendar-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #344054;
  position: relative;
  cursor: pointer;
}
@media (hover: hover) {
  .platform-input-calendar-grid calendar-cell:hover {
    border-radius: 40px;
    background-color: #F9F5FF;
    color: #6941C6;
    font-weight: 500;
  }
}
.platform-input-calendar-grid calendar-cell span {
  position: relative;
  z-index: 2;
}
.platform-input-calendar-grid calendar-cell.--head {
  font-weight: 500;
}
.platform-input-calendar-grid calendar-cell.--none {
  color: #667085;
}
.platform-input-calendar-grid calendar-cell.--current {
  border-radius: 40px;
  background-color: #F2F4F7;
  color: #344054;
  font-weight: 500;
}
.platform-input-calendar-grid calendar-cell.--range {
  border-radius: unset;
  background-color: #F9F5FF;
  color: #6941C6;
  font-weight: 500;
}
.platform-input-calendar-grid calendar-cell.--active {
  color: #F9FAFB;
  font-weight: 500;
}
.platform-input-calendar-grid calendar-cell.--active::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 40px;
  background-color: #7F56D9;
}
.platform-input-calendar-grid calendar-cell.--range + calendar-cell.--active {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}
.platform-input-calendar-grid calendar-cell:not(.--range) + calendar-cell.--active {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}
.platform-input-calendar-grid calendar-cell:nth-child(7n) {
  border-top-right-radius: 40px !important;
  border-bottom-right-radius: 40px !important;
}
.platform-input-calendar-grid calendar-cell:nth-child(7n+1) {
  border-top-left-radius: 40px !important;
  border-bottom-left-radius: 40px !important;
}

.platform-input-calendar-list {
  min-height: 100%;
  padding: 12px 16px;
  border-right: 1px solid #E4E7EC;
}
@media (max-width: 1000px) {
  .platform-input-calendar-list {
    display: none;
  }
}
.platform-input-calendar-list ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.platform-input-calendar-list li {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #344054;
  cursor: pointer;
}
@media (hover: hover) {
  .platform-input-calendar-list li:hover {
    background-color: #F9F5FF;
  }
}
.platform-input-calendar-list li.active {
  background-color: #F9F5FF;
  color: #6941C6;
}

.platform-input-time {
  position: relative;
}
.platform-input-time__main {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  overflow: hidden;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.031372549), 0px 20px 24px -4px rgba(16, 24, 40, 0.0784313725);
}
.platform-input-time__main-inner {
  display: flex;
  flex-direction: column;
}
.platform-input-time__main-body {
  padding: 20px 24px;
}
.platform-input-time__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
}
.platform-input-time__divider {
  width: 1px;
  height: 100%;
  background-color: #E4E7EC;
}
.platform-input-time__item {
  height: 320px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 10px;
}
.platform-input-time__item::-webkit-scrollbar {
  width: 4px;
  border-radius: 8px;
}
.platform-input-time__item::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #E4E7EC;
}
.platform-input-time__item li {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #667085;
  cursor: pointer;
}
@media (hover: hover) {
  .platform-input-time__item li:hover {
    background-color: #F9F5FF;
  }
}
.platform-input-time__item li.--active {
  color: #6941C6;
  background-color: #F9F5FF;
}
.platform-input-time__main-footer {
  padding: 16px 24px;
  border-top: 1px solid #E4E7EC;
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-input-time__main-footer > * {
  flex: 1;
}

.new-course__grid {
  display: grid;
  grid-template-columns: 1fr 424px;
  gap: 40px;
}
@media (max-width: 1260px) {
  .new-course__grid {
    grid-template-columns: 1fr 320px;
    gap: 20px;
  }
}
@media (max-width: 1000px) {
  .new-course__grid {
    grid-template-columns: 1fr;
  }
}
.new-course__right {
  position: relative;
}
@media (max-width: 1000px) {
  .new-course__right {
    display: none;
  }
}
.new-course__right-inner {
  position: sticky;
  top: -20px;
  left: 0;
  right: 0;
  z-index: 10;
}
.new-course__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: clip;
  word-break: break-word;
}
@media (max-width: 768px) {
  .new-course__left {
    gap: 20px;
  }
}
.new-course__main-wrapper {
  position: relative;
  padding-top: 62px;
}
@media (max-width: 768px) {
  .new-course__main-wrapper {
    padding-top: 58px;
  }
}
.new-course__left-mobile-banner {
  display: none;
}
@media (max-width: 1000px) {
  .new-course__left-mobile-banner {
    display: block;
  }
}
.new-course__left-tabs-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.new-course__left-tabs {
  padding-top: 12px;
  margin-top: -12px;
  background-color: #fcfcfd;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  left: -1px;
  right: -1px;
  top: -32px;
  z-index: 10;
}
@media (max-width: 768px) {
  .new-course__left-tabs {
    top: -20px;
  }
}
.new-course__image-wrapper .course-label__progress {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  border-bottom: unset;
}
.new-course__left-image {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}
.new-course__left-image img {
  width: 100%;
}
.new-course__left-image video {
  width: 100%;
}
.new-course__main {
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.new-course__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 18px;
}
@media (max-width: 768px) {
  .new-course__text {
    font-size: 16px;
  }
}
.new-course__text ul li {
  display: block;
  position: relative;
  padding-left: 27px;
}
.new-course__text ul li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background-color: var(--gray-600);
  position: absolute;
  left: 11px;
  top: 11px;
}
@media (max-width: 768px) {
  .new-course__text ul li {
    padding-left: 20px;
  }
  .new-course__text ul li::before {
    width: 5px;
    height: 5px;
    top: 9px;
    left: 9px;
  }
}
.new-course__text ol li {
  list-style-type: auto;
  list-style-position: inside;
}
.new-course__text blockquote {
  padding: 20px;
  border-radius: 0 8px 8px 0;
  background-color: var(--brand-50);
  border-left: 2px solid var(--brand-700);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.new-course__text blockquote p {
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 150%;
  color: var(--brand-700);
}
@media (max-width: 768px) {
  .new-course__text blockquote p {
    font-size: 18px;
  }
}
.new-course__text blockquote cite {
  font-size: 16px;
  font-style: normal;
}
@media (max-width: 768px) {
  .new-course__text blockquote cite {
    font-size: 14px;
  }
}
.new-course__text-advantages ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.new-course__text-advantages li {
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.new-course__text-advantages li::before {
  display: none !important;
}
.new-course__text-advantage-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  font-size: 16px;
}
@media (max-width: 768px) {
  .new-course__text-advantage-inner {
    font-size: 14px;
  }
}
.new-course__text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.new-course__text-table th,
.new-course__text-table td {
  min-width: unset !important;
  max-width: unset !important;
}
.new-course__text-table td,
.new-course__text-table .platform-table__cell {
  white-space: unset !important;
}
.new-course__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.new-course b {
  font-weight: 600;
  color: var(--gray-900);
}
.new-course__logo {
  width: 200px;
}
@media (max-width: 768px) {
  .new-course__logo {
    width: 160px;
  }
}
.new-course__logo img {
  width: 100%;
}

.new-course-right-banner {
  padding: 20px;
  border-radius: 10px;
  background-color: var(--brand-50);
  border: 1px solid var(--brand-200);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.new-course-right-banner__logo {
  width: 200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .new-course-right-banner__logo {
    width: 160px;
  }
}
.new-course-right-banner__logo img {
  width: 100%;
}
.new-course-right-banner__title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.new-course-right-banner__price {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 0 10px;
}
.new-course-right-banner__price span {
  font-size: 30px;
  grid-column: 2;
}
@media (max-width: 768px) {
  .new-course-right-banner__price span {
    font-size: 24px;
  }
}
.new-course-right-banner__price del {
  text-align: right;
  text-decoration: line-through;
}
@media (max-width: 1260px) {
  .new-course-right-banner__price {
    grid-template-columns: 1fr auto;
  }
  .new-course-right-banner__price span {
    text-align: center;
    grid-column: unset;
  }
}
@media (max-width: 1000px) {
  .new-course-right-banner__price {
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
  }
  .new-course-right-banner__price span {
    grid-column: 2;
  }
  .new-course-right-banner__price del {
    text-align: left;
  }
}
@media (max-width: 768px) {
  .new-course-right-banner__price {
    gap: 8px;
  }
}
.new-course-right-banner__button {
  width: 100%;
}
.new-course-right-banner__button .button {
  width: 100%;
}

.new-course-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.new-course-head__tags {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.new-course-head__tags-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.new-course-head__tags-right {
  margin-left: auto;
}
.new-course-head__title {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.new-course-head__title-right {
  margin-left: auto;
}
.new-course-head__reviews {
  display: flex;
  align-items: center;
  gap: 20px;
}
.new-course-head__reviews-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.new-course-head__reviews-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.new-course-programm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .new-course-programm {
    gap: 8px;
  }
}
.new-course-programm__item {
  overflow: hidden;
  border-radius: 8px;
  background-color: white;
  border: 1px solid var(--gray-200);
}
@media (hover: hover) {
  .new-course-programm__item:hover {
    border-color: var(--brand-700);
  }
}
.new-course-programm__head {
  padding: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  padding-right: 52px;
  transition: padding 0.6s;
}
.new-course-programm__head svg {
  flex-shrink: 0;
  stroke: var(--gray-500);
}
.new-course-programm__head span {
  overflow: hidden;
}
@media (hover: hover) {
  .new-course-programm__head:hover {
    color: var(--brand-700) !important;
  }
  .new-course-programm__head:hover svg {
    stroke: var(--brand-500) !important;
  }
}
.new-course-programm__head::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("/images/chevron-down-black-24x24.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.new-course-programm__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.6s;
  padding: 0 20px;
}
.new-course-programm__content {
  padding-top: 16px;
  padding-bottom: 20px;
  border-top: 1px solid var(--gray-200);
}
.new-course-programm__item.--opened:not(.--current):not(.--passed) {
  border-color: var(--brand-700);
}
.new-course-programm__item.--opened .new-course-programm__head {
  color: var(--brand-700);
  padding-bottom: 16px;
}
.new-course-programm__item.--opened .new-course-programm__head svg {
  stroke: var(--brand-500);
}
.new-course-programm__item.--opened .new-course-programm__head::after {
  transform: translateY(-50%) rotate(180deg);
}
.new-course-programm__item.--opened .new-course-programm__body {
  grid-template-rows: 1fr;
}
.new-course-programm__item.--current .new-course-programm__head {
  color: var(--warning-700);
  padding-bottom: 16px;
}
.new-course-programm__item.--current .new-course-programm__head svg {
  stroke: var(--warning-500);
}
.new-course-programm__item.--passed .new-course-programm__head {
  color: var(--success-700);
  padding-bottom: 16px;
}
.new-course-programm__item.--passed .new-course-programm__head svg {
  stroke: var(--success-500);
}

.new-course-authors {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.new-course-authors__item {
  overflow: hidden;
  border: 1px solid var(--gray-200);
}
.new-course-authors__item-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.new-course-authors__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.new-course-authors__head-image {
  flex-shrink: 0;
}
.new-course-authors__head-image .platform-participant {
  cursor: unset;
}
.new-course-authors__head-text {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.new-course-authors__head-text h3 {
  overflow: hidden;
}
.new-course-authors__head-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.new-course-authors__body {
  font-size: 14px;
}

.new-course-reviews {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
.new-course-reviews__title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.new-course-reviews__title h2 {
  overflow: hidden;
}
.new-course-reviews__title-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.new-course-reviews__column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.new-course-reviews__button {
  display: flex;
  justify-content: center;
}

.new-course-programm-mobile {
  border-radius: 8px;
  background-color: var(--brand-50);
}
.new-course-programm-mobile__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  padding-right: 52px;
  cursor: pointer;
  position: relative;
  transition: 0.6s;
}
@media (max-width: 500px) {
  .new-course-programm-mobile__head {
    padding-left: 10px;
    padding-right: 42px;
  }
}
.new-course-programm-mobile__head::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("/images/chevron-down-black-24x24.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
@media (max-width: 500px) {
  .new-course-programm-mobile__head::after {
    right: 10px;
  }
}
.new-course-programm-mobile__body {
  padding: 0 20px;
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.6s;
}
@media (max-width: 500px) {
  .new-course-programm-mobile__body {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.new-course-programm-mobile__content {
  padding-bottom: 20px;
}
.--opened .new-course-programm-mobile__head {
  padding-bottom: 16px;
}
.--opened .new-course-programm-mobile__head::after {
  transform: translateY(-50%) rotate(180deg);
}
.--opened .new-course-programm-mobile__body {
  grid-template-rows: 1fr;
}

.platform-main:has(.new-course) {
  scroll-padding-top: 62px;
}
@media (max-width: 768px) {
  .platform-main:has(.new-course) {
    scroll-padding-top: 58px;
  }
}

.new-lesson .new-course__grid {
  display: grid;
  grid-template-columns: 1fr 256px;
  gap: 40px;
}
@media (max-width: 1260px) {
  .new-lesson .new-course__grid {
    gap: 20px;
  }
}
@media (max-width: 1000px) {
  .new-lesson .new-course__grid {
    grid-template-columns: 1fr;
  }
}
.new-lesson .new-course-programm__head {
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
}
.new-lesson .new-course-programm__head span {
  text-overflow: ellipsis;
}
.new-lesson .new-course-programm__head::after {
  display: none;
}
.new-lesson .h2 {
  color: var(--gray-600);
}

.new-course .res_container,
.new-lesson .res_container {
  width: unset !important;
  height: unset !important;
}

.lesson__content:has(.new-course),
.lesson__content:has(.new-lesson) {
  padding: 0 !important;
}

.new-course__text ul li > p,
.new-course__text ol li > p {
  display: inline !important;
}

.lesson__content {
  padding: 0;
}

@media (max-width: 768px) {
  .lesson-test {
    padding: 0;
  }
}

.user-agreement-page {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/images/auth.jpg");
  background-color: rgba(16, 24, 40, 0.2);
  background-blend-mode: color;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.user-agreement-page .popups__wrapper {
  min-height: 500px;
  height: 100%;
}
.user-agreement-page .popups__content {
  height: 100%;
}

.popup-user-agreement {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.popup-user-agreement__main {
  flex-grow: 1;
  overflow: auto;
  padding: 1px;
}
.popup-user-agreement__head {
  margin-bottom: 24px;
}
.popup-user-agreement__head-image-badge {
  margin-bottom: 24px;
}
.popup-user-agreement__head-image-badge img {
  display: block;
  margin: 0 auto;
}
.popup-user-agreement__head-text {
  text-align: center;
}
.popup-user-agreement__head-text time {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #7F56D9;
}
@media (max-width: 768px) {
  .popup-user-agreement__head-text time {
    font-size: 14px;
  }
}
.popup-user-agreement__head-text h1 {
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
}
@media (max-width: 768px) {
  .popup-user-agreement__head-text h1 {
    font-size: 24px;
  }
}
.popup-user-agreement__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #475467;
}
.popup-user-agreement__body h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #101828;
  margin-bottom: 12px;
}
.popup-user-agreement__footer {
  padding-top: 32px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.popup-user-agreement:has(.cssCheckboxTrigger:checked) .hover-wrapper__content {
  display: none;
}

.landing-timer {
  padding-top: 80px;
  padding-bottom: 120px;
  padding-top: 80px;
  padding-bottom: 120px;
}
@media (max-width: 768px) {
  .landing-timer {
    padding-top: 60px;
    padding-bottom: 100px;
  }
}
.landing-timer__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
@media (max-width: 1740px) {
  .landing-timer__column {
    gap: 60px;
  }
}
@media (max-width: 768px) {
  .landing-timer__column {
    gap: 40px;
  }
}
.landing-timer__title {
  text-align: center;
}
.landing-timer__title h2,
.landing-timer__title .h2 {
  font-weight: 700;
  font-size: 48px;
  line-height: 120%;
  color: #000;
}
@media (max-width: 1740px) {
  .landing-timer__title h2,
  .landing-timer__title .h2 {
    font-size: 38px;
  }
}
@media (max-width: 768px) {
  .landing-timer__title h2,
  .landing-timer__title .h2 {
    font-size: 32px;
  }
}
.landing-timer__timer {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
@media (max-width: 1260px) {
  .landing-timer__timer {
    width: 100%;
  }
}
.landing-timer__item-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  color: #959595;
  font-size: 24px;
}
@media (max-width: 1740px) {
  .landing-timer__item-column {
    gap: 16px;
  }
}
@media (max-width: 1260px) {
  .landing-timer__item-column {
    gap: 12px;
    flex: 1;
  }
}
@media (max-width: 1740px) {
  .landing-timer__item-column {
    font-size: 22px;
  }
}
@media (max-width: 768px) {
  .landing-timer__item-column {
    font-size: 18px;
  }
}
.landing-timer__item-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 1260px) {
  .landing-timer__item-row {
    gap: 12px;
  }
}
.landing-timer__digit {
  width: 140px;
  padding: 40px 0;
  border-radius: 40px;
  border: 2px solid #FFD66C;
  font-family: Handjet;
  font-size: 78px;
  font-weight: 700;
  line-height: 120%;
  text-align: center;
  color: #AA80F1;
}
@media (max-width: 1740px) {
  .landing-timer__digit {
    width: 120px;
    padding: 30px 0;
    font-size: 64px;
  }
}
@media (max-width: 1260px) {
  .landing-timer__digit {
    width: unset;
    padding: 20px 0;
    border-radius: 30px;
    font-size: 56px;
  }
}
@media (max-width: 768px) {
  .landing-timer__digit {
    width: unset;
    border: unset;
    padding: unset;
    border-radius: unset;
    font-size: 56px;
  }
}
.landing-timer__colon {
  width: 60px;
  margin-top: 50px;
  font-size: 78px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: #AA80F1;
}
@media (max-width: 1740px) {
  .landing-timer__colon {
    width: unset;
    margin-top: 35px;
    font-size: 64px;
  }
}
@media (max-width: 1260px) {
  .landing-timer__colon {
    margin-top: 22px;
    font-size: 56px;
  }
}
@media (max-width: 768px) {
  .landing-timer__colon {
    margin-top: 1px;
  }
}
@media (max-width: 1260px) {
  .landing-timer__image {
    width: 120px;
  }
}
@media (max-width: 768px) {
  .landing-timer__image {
    width: 100px;
  }
}

.wrapper .nsl_WYSIWYG_container {
  border-radius: 8px;
  border: 1px solid #E4E7EC;
}
.wrapper .nsl_WYSIWYG_container .toolbar {
  border: unset;
  padding: 8px 12px;
  background-color: #fff;
  border-radius: 8px 8px;
  display: flex;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.wrapper .nsl_WYSIWYG_container .toolbar__group-12 {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 12px;
  flex-shrink: 0;
}
.wrapper .nsl_WYSIWYG_container .toolbar .toolbar_select {
  display: inline-flex;
  align-items: center;
  border: unset;
  padding: 0 4px;
  background-color: #F4F4F5;
}
.wrapper .nsl_WYSIWYG_container .toolbar .toolbar_select .toolbar_select__items {
  padding: 0 4px;
  background-color: white;
  border: 1px solid #F4F4F5;
  top: 100%;
  min-width: 100%;
}
.wrapper .nsl_WYSIWYG_container .editor {
  border: unset;
  padding: 20px 10px;
  background-color: rgb(252, 252, 252);
  border-radius: 0 0 8px 8px;
}

.quiz-drop-to-me {
  text-align: center;
  font-weight: 700;
  border-style: dashed;
  background-color: #eeefef;
}
.quiz-drop-to-me.--hovered {
  background-color: #cbcbcb;
}

.quiz-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.quiz-table td {
  padding-bottom: 12px;
}
.quiz-table tr:last-child td {
  padding: 0;
}
.quiz-table drop-container {
  display: block !important;
}

drag-item {
  cursor: grab;
}

.block-20-white {
  padding: 20px;
  border-radius: 8px;
  background-color: white;
}/*# sourceMappingURL=style.css.map */