.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    text-align: center;
}

@font-face {
    font-family: VideoJS;
    src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABUgAAsAAAAAItAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV33Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADwwAABdk9R/WHmhlYWQAABGcAAAAKwAAADYn8kSnaGhlYQAAEcgAAAAdAAAAJA+RCL1obXR4AAAR6AAAABMAAAC8Q44AAGxvY2EAABH8AAAAYAAAAGB7SIHGbWF4cAAAElwAAAAfAAAAIAFAAI9uYW1lAAASfAAAASUAAAIK1cf1oHBvc3QAABOkAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7xDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADbZCycAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1gUV5auc6urCmxEGrq6VRD6ATQP5dHPKK8GRIyoKApoEBUDAiGzGmdUfKNRM4qLZrUZdGKcGN/GZJKd0SyOWTbfbmZ2NxqzM5IxRtNZd78vwYlJdtREoO7sudVNq6PmmxmKqrqPU+eee173P80Bh39Cu9DOEY4DHZBK3i20D/QRLcfxbE5sEVtwLpZzclw4ibFIkSCJUcZ4MBpMnnzwuKNsGWBL5i3qy6kO2dVpvUpKbkAP9fq62rdeGJ+TM/7C1nbIutfuWrWk5ci4zMxxR1qW/N+9JsmCGXj9VKWhFx/6tr/nz78INDm2C9yPF/fDcxLuyKxLBZ1ZBz2QTi+RSkiH5RrDQJ/GgGQadX9m0YSURs7GpSG905Zsk41uj14yul1OtieZ7QUk5GRG/YiS7PYYPSAZNRed9sq3+bOpz00rKb7pe/ZEZvbALxZAHT3AFoH8GXP3rt67QFn40kt8W13FjLTDb48c+fSi5/7h0P4dL5yz7DPtbmgmYxfQA9RL2+EOfTcvdp+1vmuBpvOll1As1S6ak0IvJzC7sKWJFtJgBd2uWcg+0Zyg7dzQfhcjXRgXGZRf5/a4A58IDU777Nl252AUk4m2ByRRjqTNqIDCEJeAnU3iCFwrkrNwXEzg4yFevBwypzxkcX+AIfk3VEKl3XmWbT8788SzvpvFJaiOezL6QyuSr9VNf97csNu0z3LuhR0wATUxZAfVBwVOy+nQFhxYdWaXlXe4HC4zWGWzzsrLDtmhI9pOWOHv7PTT7XybH1Z0+v2d5Abd3kmG+TsH23CS/KwTxx/JkzEwx6jcQOUc42LLwHJ/J93uZ9ygh3HuZGwqsY9dWDHQ58dxNqyqKRQTYdxwTubiOSs3FiMDkq0WSZQgCT0GBDOg2lxOAd1FlPVGs4AKBAcYHHaP2wPkHaivmLF5zYqnIZrvcHx5gN4k/6tchNW1DtdgNL2KrxEkS/kfnIHoVnp1VjmjpTf5r0lTzLj0mdS28tX+XGorU364eMPmnWVl8J36nlKGw3CZhjEiuMw8h8mKvhGD+4/lElBWjAhLJMg6fTw4zPZ8cOmcGQBm2Qxml1nAm13CpYGq1JKUlJJUzQn1PTAO0mgv6VMMpA/DuRfSWEu4lDIxdbAtdWIKvnn2Vk766CWfz9fpY0sH/UpdP50rfszaVpdVRmvIejEdLMk45s4Bu0EWHjeOySmFyZSiMahvZdNSn29peoI/YexYfKQTLeurTXXwEVLeSfInTWHkkMaeUx7sBvOCSTSj3AlcKjfueyS36tCrXDlgRtF0etFq9jhc1kfKuBT/OwMr0F4UUTTh1AN0g20+H/ScPcsIEsYu9d/zN5PmjprPtNwI1ZZcDK6iC97Mcjp2y2aX36f+QbpGHrgRuHlXJ+Zf6PFRL2uQSp8vxHeF2IoRb8Rd2rhMzsNxSRmEuKK4JFnkojhMcx6jzqHzGMGFcW+MhBj0bhf6cowN+45I4LHvwT6fteu7M42wGRI/pxcg6/MZdEvt1U1XaulHFXuLmqov/MukvRVL35/b3ODM1+4aPjtzeK7zmUkV2h3DN54HaQ9GzJvxHRb6Ks2gB81fwqraT+A7GvZJrRLRofU6G0urNL+zFw3v0FaVDFxsKEZW56F31r6ip6vOL+FCObBPuIMRiXld9RaMdLzRIOGhPey2T9vA/35DmZPK9IWaT9d/WgOGMieYqJ/dzjLIhZU118gbysxrNUGefxD6UO/hyNNllpFTOIbx32kSFQctnweV5PxTMHLjRqiAN+fQE9gL+Xy5WB6MOS4GJJuYbDUHhcKDhHGRbLzOpjsjdM1+iwAZLGeieehACX2hhI7SjK/ZUTNrvVje31TxJiFBGYViWFkCn9PMeX9fS6qVbzfCj4fOCTzDnuWy2c4xA7mdNkA3RS9FH2VeqzdCBlixxbzXjvkHU1I8BOYFb1pZvPIHSSIj4svT8xpzcxtXN+ZKyjdDvbz08niiF3PqV9Tn5NST8vg48MTaY8E5xqSSIsWoWHo+LtAzxdH/GDUyp37CBEYfso04F/NlMTcDJUTpECLY0HFGQHImE8xsEUdgnrQlixIvGhJA1BvxpDHGxEMBYFeNOHcBJlSjwe2JcSfbBEsGOPPBHg/6SBBOCsLLw0SpUxod0Z1bFMfLkbQ3UiZxEyd0Dx8t+SRBu18Q9msFbI4e3p1THEfkSEh7kEJ5orR10qTWDvbgPWn5aWvCYyOAjwgXyjJi34uMjo58L25cmRAeQZWI2PA1QQLsPESAH8WGFwZZ4SPoR73BHPzIPMJj9AreBzKUmrH4todT18ANvi1oc3YGjUT/0j+ExUwq8PI9BLaCQIpvewwYu2evAG/Vo/5avPdY7o+BemLLXw3y+AdkzP9bpIxB1wm5EYq8fesHbPEPtm6HrHvtx4jcGPR8fDDpkZBefIjB46QnlUNRltv4Z/pO/J6dxEjhYAtmoMeq+GozvUVvNYOW3m6GCIhoprcfr97B8AcIQYsfD8ljUvGNjvkrpj0ETA48ZMIxCeqsRIsQALE0gi2GB+glSOfbOjW3GSBM9yPq8/rpJXrJDz0BPxV6xdN4uiCGDQed3WhgFkBUZEFsmeyyBpzXrm7UGTBZG8Lh5aubFufk5eUsbrrFGr7McYdbltxa0nKYqRKbQjvikXYkTGM0f2xuyM3Ly21oXnWfvf6I1BmZwfh7EWWIYsg2nHhsDhOnczhJcmI6eBAmy3jZ3RiJmKQR/JA99FcwsfaVbNDDyi1rL9NPj9hfo61wjM6BjzOLijLpeTgk/pL+ip6tfYWupzeOgPny2tcUu9J/9mhxJlgyi985NFRbvCVewXUNXLJaW0RxZqtRYtnfYdcYomXQWdnJHQA3jiEEkeTQWcWxdDP9IvvVWvo2TK553XEMEq+s69/QDU1Q7p0zxwsm9qS379whr8NI2PJqLUyGyfNeX3eFfnJU2U+uHR9cVV1IqgurqwuV44XVp0h2qN55X5XJwtk59yP0IZuHrqBOBIuIYhkcoT6Kx79Pu2HS/IPZIMOqLWs/pteOOk4NPgEb6QAIdAPsyZk5Mwd+wVaHMexJv719W7xCu2l37UG6lvYdBcvHa08p89741zd63phTRGqL5ggo6SlvdbWXzCqsPq78NnSu7wnKy2HNZbVoRCI7UJEOyRj+sPE002tOOY7Qa5fXboFWkLNeqYUSZRocp9XwSUZxcQZ9Hw6LV2pOoVmvHQEDbGIENEG5i6bLgMSM4n8+FNLTtAds99DaWEvgcf4o5SyYe9x+kF6/tGoTPAdRmS/XQIEy//QxKC2oqioAI3tS5auvxCtzT6y6RK8fhChYcwCJaMJhxc0vqSxQ/qmgsrKAlBZUHlauheTpvd9uj5DnLzJct6qfq5fXbYHVIGcfrIVJihbaVLu1wW7Vbs8zK0A8e9Jvb91S9cVMjPrazD6gpfeZTXzYbCFMcppVRsGMpp55OWgx1/3JeAxW1Y7AORgM/m3rWrsdLkQVmEVSU16cX/e7uvkvpqRiQsG06XJ0t64Tf+l0nG1dt025gyOIZlvq5u9KSU1N2TW/rsWnnMRPyTDkctbhvIcNvYIXWyLzdwYLoYesUbaQG4iK2cWO2gdpeUYLqDD0MUTOPhDIGnZEs58yArR86FznuWEsU4YDi2x26dA4klkn8Qa6vhk2QUfX4Jxm/ngX9r7ogn1dmlmwqZmuhxtdg9XN/DEcUgqb+9hMyNansfaQET2mcROCmGEMVqxm5u+h6kN2MOwgqykV2wH9yQG9DvVFU38Pogaf4FVuE62KI/oJ02RDdWW2w5dqQwU/8+N1q1DlvsL863u61KLE7x/o8w0VJQM/Y/SQ3unIrqxueEa1BqT5VFNsO7p39/UC771a77RowpaKe9nvJQIT1Pog5LGx8XblBKmCNGTf3xMogAQvPnz9PYKX/08sVDTG1OKUlOLUgS/UaZtm1NAaYTsl7i9ZQ+L6O4Rl0OGa577LuWvc+C+x96/vYh0lLBuM+7XwI/dTLtdT7v4d6rRTWDnku0IBrqFnZ5bVIqKP8lasJlithWnaLhTsr8qFJBulF/70p4undou36HeTJ5+jv1fCybeQ8nH3+Xv6aENczmOFlab+hqMDg1rLOt12A+tiUFrYDwQ6c3RUJp601nzegTNX6WlYAI2zSUV945F6zU56ZmZVQaWspWcIADxJ9GmljQUnL2p2Dpr5T8H+5KJFu+vqBq8qvyHRzStLHPEO5SPYCV9nZe0yZT2RcH0oHvegSzNEJ0oGWU8iQWM12dgPEugngVceGIwZgPFp0BiT1a0a3R5Rcot7ihfA1J/20v96jX7zmTX9s583H0kwx6WnLd09cXrR9LGroOa9sHNbdyz8wcKk5lqhaVFJZNwmqtw884MXNdvJujpBa3xzuSaZH9sxa06Z7x+HJSduPbdYHv/DgmEhfbehvlmGN7JUkcG78GDM12CeyFFTPNqVeNxC1gzjz+c2nVo63Xxs8rKJWXoBJM0tmEbfGm4qzpoOH3xpzQfyxLzW1gnE9NHo6tol1eMEic4ZVPrjnVi0kqAe2sQ2bgqupScaq8WGlUWgWHI51SKJl/UYT6zccNsCSkBtiVZLsiefuFSDYT3Fi8Zk7EUnmjTRYtsFeuDDJS05MW79M3mr3mla+d8dzac31KTPmBYfFiYSUef48PhPjm9ryZsSGZZkdNvzq0Y9rdNcwDq5Dg5C3QW+7UN64IKptvS3tvHbvu5c9pv1Exau21rc9LIpwpQwUjTq8576yeVDz5+4WZ1nXT43wV60rPLJbDp/UksNrP3iQ2SA63Pst058gOYDbhRnRUw8l/sRt4HbxPzO4WYpInCpuVgSbVh6JXuwnnJngKTTCwaPWmG5Xbhpm1U0Yt3FyBGpGYemPM77p2TD904JjgJ2QFpFLeYpGx8X15Qx1Zk31p5ki9ZLUuXE0lmuJlcakJMVLeFS1iIvrB8drY0aloilakqCZwzwRORtxlgwxS4IThggJd4TDxoiaAIT80fFPGrCPPru+puFn504P/ybr4ihA/6dKASLshEJic7xE8tmzu3KzA7TABBe8y5fNbWo3ilQn/SuFKM16b2l5bOeayqfGhYmhIulU+fVNDdWVv4NMzX10MBHyPR5uhWUu8D9P1VnIMt4nGNgZGBgAOJ/1bf64vltvjJwszOAwAOlmqvINEc/WJyDgQlEAQA+dgnjAHicY2BkYGBnAAGOPgaG//85+hkYGVCBPgBGJwNkAAAAeJxjYGBgYB/EmKMPtxwAhg4B0gAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAe4CLgKKAtAC/ANiA4wDqAPgBDAEsATaBQgFWgXABggGLgZwBqwG9gdOB4oH0ggqCHAIhgicCMgJJAlWCYgJrAnyCkAKdgrkC7J4nGNgZGBg0GdoZmBnAAEmIOYCQgaG/2A+AwAaqwHQAHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkXlT2zAQxf1C4thJAwRajt4HRy8VMwwfSJHXsQZZcnUQ+PYoTtwpM+wf2t9brWZ2n5JBsol58nJcYYAdDDFCijEy5JhgileYYRd72MccBzjEa7zBEY5xglO8xTu8xwd8xCd8xhd8xTec4RwXuMR3/MBP/MJvMPzBFYpk2Cr+OF0fTEgrFI1aHhxN740KDbEmeJpsWZlVj40s+45aLuv9KijlhCXSjLQnu/d/4UH6sWul1mRzFxZeekUuE7z10mg3qMtM1FGQddPSrLQyvJR6OaukItYXDp6pCJrmz0umqkau5pZ2hFmm7m+ImG5W2t0kZoJXUtPhVnYTbbdOBdeCVGqpJe7XKTqSbRK7zbdwXfR0U+SVsStuS3Y76em6+Ic3xYiHUppc04Nn0lMzay3dSxNcp8auDlWlaCi48yetFD7Y9USsx87G45cuop1ZxQUtjLnL4j53FO0a+5X08UXqQ7NQNo92R0XOz7sxWEnxN2TneJI8Acttu4Q=) format("woff");
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-play, .video-js .vjs-play-control .vjs-icon-placeholder, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "\f101";
}

.vjs-icon-play-circle {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-play-circle:before {
    content: "\f102";
}

.vjs-icon-pause, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
    content: "\f103";
}

.vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
    content: "\f104";
}

.vjs-icon-volume-low, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
    content: "\f105";
}

.vjs-icon-volume-mid, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-volume-mid:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
    content: "\f106";
}

.vjs-icon-volume-high, .video-js .vjs-mute-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
    content: "\f107";
}

.vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: "\f108";
}

.vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: "\f109";
}

.vjs-icon-spinner {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-spinner:before {
    content: "\f10a";
}

.vjs-icon-subtitles, .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-subtitles-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-subtitles:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before {
    content: "\f10b";
}

.vjs-icon-captions, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-captions-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-captions:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-captions-button .vjs-icon-placeholder:before {
    content: "\f10c";
}

.vjs-icon-hd {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-hd:before {
    content: "\f10d";
}

.vjs-icon-chapters, .video-js .vjs-chapters-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-chapters:before, .video-js .vjs-chapters-button .vjs-icon-placeholder:before {
    content: "\f10e";
}

.vjs-icon-downloading {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-downloading:before {
    content: "\f10f";
}

.vjs-icon-file-download {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-file-download:before {
    content: "\f110";
}

.vjs-icon-file-download-done {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-file-download-done:before {
    content: "\f111";
}

.vjs-icon-file-download-off {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-file-download-off:before {
    content: "\f112";
}

.vjs-icon-share {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-share:before {
    content: "\f113";
}

.vjs-icon-cog {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-cog:before {
    content: "\f114";
}

.vjs-icon-square {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-square:before {
    content: "\f115";
}

.vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-circle:before, .vjs-seek-to-live-control .vjs-icon-placeholder:before, .video-js .vjs-volume-level:before, .video-js .vjs-play-progress:before {
    content: "\f116";
}

.vjs-icon-circle-outline {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-circle-outline:before {
    content: "\f117";
}

.vjs-icon-circle-inner-circle {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-circle-inner-circle:before {
    content: "\f118";
}

.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
    content: "\f119";
}

.vjs-icon-repeat {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-repeat:before {
    content: "\f11a";
}

.vjs-icon-replay, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-replay:before, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
    content: "\f11b";
}

.vjs-icon-replay-5, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-replay-5:before, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before {
    content: "\f11c";
}

.vjs-icon-replay-10, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-replay-10:before, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before {
    content: "\f11d";
}

.vjs-icon-replay-30, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-replay-30:before, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before {
    content: "\f11e";
}

.vjs-icon-forward-5, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-forward-5:before, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before {
    content: "\f11f";
}

.vjs-icon-forward-10, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-forward-10:before, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before {
    content: "\f120";
}

.vjs-icon-forward-30, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-forward-30:before, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before {
    content: "\f121";
}

.vjs-icon-audio, .video-js .vjs-audio-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-audio:before, .video-js .vjs-audio-button .vjs-icon-placeholder:before {
    content: "\f122";
}

.vjs-icon-next-item {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-next-item:before {
    content: "\f123";
}

.vjs-icon-previous-item {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-previous-item:before {
    content: "\f124";
}

.vjs-icon-shuffle {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-shuffle:before {
    content: "\f125";
}

.vjs-icon-cast {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-cast:before {
    content: "\f126";
}

.vjs-icon-picture-in-picture-enter, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-picture-in-picture-enter:before, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
    content: "\f127";
}

.vjs-icon-picture-in-picture-exit, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-picture-in-picture-exit:before, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
    content: "\f128";
}

.vjs-icon-facebook {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-facebook:before {
    content: "\f129";
}

.vjs-icon-linkedin {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-linkedin:before {
    content: "\f12a";
}

.vjs-icon-twitter {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-twitter:before {
    content: "\f12b";
}

.vjs-icon-tumblr {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-tumblr:before {
    content: "\f12c";
}

.vjs-icon-pinterest {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-pinterest:before {
    content: "\f12d";
}

.vjs-icon-audio-description, .video-js .vjs-descriptions-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}
.vjs-icon-audio-description:before, .video-js .vjs-descriptions-button .vjs-icon-placeholder:before {
    content: "\f12e";
}

.video-js {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    color: #fff;
    background-color: #000;
    position: relative;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif;
    word-break: initial;
}
.video-js:-moz-full-screen {
    position: absolute;
}
.video-js:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
}

.video-js[tabindex="-1"] {
    outline: none;
}

.video-js *,
.video-js *:before,
.video-js *:after {
    box-sizing: inherit;
}

.video-js ul {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    list-style-position: outside;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
.video-js.vjs-9-16,
.video-js.vjs-1-1 {
    width: 100%;
    max-width: 100%;
}

.video-js.vjs-fluid:not(.vjs-audio-only-mode),
.video-js.vjs-16-9:not(.vjs-audio-only-mode),
.video-js.vjs-4-3:not(.vjs-audio-only-mode),
.video-js.vjs-9-16:not(.vjs-audio-only-mode),
.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
    height: 0;
}

.video-js.vjs-16-9:not(.vjs-audio-only-mode) {
    padding-top: 56.25%;
}

.video-js.vjs-4-3:not(.vjs-audio-only-mode) {
    padding-top: 75%;
}

.video-js.vjs-9-16:not(.vjs-audio-only-mode) {
    padding-top: 177.7777777778%;
}

.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
    padding-top: 100%;
}

.video-js.vjs-fill:not(.vjs-audio-only-mode) {
    width: 100%;
    height: 100%;
}

.video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-js.vjs-audio-only-mode .vjs-tech {
    display: none;
}

body.vjs-full-window,
body.vjs-pip-window {
    padding: 0;
    margin: 0;
    height: 100%;
}

.vjs-full-window .video-js.vjs-fullscreen,
body.vjs-pip-window .video-js {
    position: fixed;
    overflow: hidden;
    z-index: 1000;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),
body.vjs-pip-window .video-js {
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
}

.video-js.vjs-fullscreen.vjs-user-inactive {
    cursor: none;
}

.vjs-pip-container .vjs-pip-text {
    position: absolute;
    bottom: 10%;
    font-size: 2em;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0.5em;
    text-align: center;
    width: 100%;
}

.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,
.vjs-layout-x-small.vjs-pip-container .vjs-pip-text,
.vjs-layout-small.vjs-pip-container .vjs-pip-text {
    bottom: 0;
    font-size: 1.4em;
}

.vjs-hidden {
    display: none !important;
}

.vjs-disabled {
    opacity: 0.5;
    cursor: default;
}

.video-js .vjs-offscreen {
    height: 1px;
    left: -9999px;
    position: absolute;
    top: 0;
    width: 1px;
}

.vjs-lock-showing {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.vjs-no-js {
    padding: 20px;
    color: #fff;
    background-color: #000;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    width: 300px;
    height: 150px;
    margin: 0px auto;
}

.vjs-no-js a,
.vjs-no-js a:visited {
    color: #66A8CC;
}

.video-js .vjs-big-play-button {
    font-size: 3em;
    line-height: 1.5em;
    height: 1.63332em;
    width: 3em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    margin-top: -0.81666em;
    margin-left: -1.5em;
    cursor: pointer;
    opacity: 1;
    border: 0.06666em solid #fff;
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);
    border-radius: 0.3em;
    transition: all 0.4s;
}
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
    border-color: #fff;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5);
    transition: all 0s;
}

.vjs-controls-disabled .vjs-big-play-button,
.vjs-has-started .vjs-big-play-button,
.vjs-using-native-controls .vjs-big-play-button,
.vjs-error .vjs-big-play-button {
    display: none;
}

.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
    display: block;
}

.video-js button {
    background: none;
    border: none;
    color: inherit;
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    text-decoration: none;
    transition: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.vjs-control .vjs-button {
    width: 100%;
    height: 100%;
}

.video-js .vjs-control.vjs-close-button {
    cursor: pointer;
    height: 3em;
    position: absolute;
    right: 0;
    top: 0.5em;
    z-index: 2;
}
.video-js .vjs-modal-dialog {
    background: rgba(0, 0, 0, 0.8);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
    overflow: auto;
}

.video-js .vjs-modal-dialog > * {
    box-sizing: border-box;
}

.vjs-modal-dialog .vjs-modal-dialog-content {
    font-size: 1.2em;
    line-height: 1.5;
    padding: 20px 24px;
    z-index: 1;
}

.vjs-menu-button {
    cursor: pointer;
}

.vjs-menu-button.vjs-disabled {
    cursor: default;
}

.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
    display: none;
}

.vjs-menu .vjs-menu-content {
    display: block;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto;
}

.vjs-menu .vjs-menu-content > * {
    box-sizing: border-box;
}

.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
    display: none;
}

.vjs-menu li {
    list-style: none;
    margin: 0;
    padding: 0.2em 0;
    line-height: 1.4em;
    font-size: 1.2em;
    text-align: center;
    text-transform: lowercase;
}

.vjs-menu li.vjs-menu-item:focus,
.vjs-menu li.vjs-menu-item:hover,
.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5);
}

.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover,
.js-focus-visible .vjs-menu li.vjs-selected:hover {
    background-color: #fff;
    color: #2B333F;
}

.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),
.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) {
    background: none;
}

.vjs-menu li.vjs-menu-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 2em;
    padding: 0;
    margin: 0 0 0.3em 0;
    font-weight: bold;
    cursor: default;
}

.vjs-menu-button-popup .vjs-menu {
    display: none;
    position: absolute;
    bottom: 0;
    width: 10em;
    left: -3em;
    height: 0em;
    margin-bottom: 1.5em;
    border-top-color: rgba(43, 51, 63, 0.7);
}

.vjs-pip-window .vjs-menu-button-popup .vjs-menu {
    left: unset;
    right: 1em;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);
    position: absolute;
    width: 100%;
    bottom: 1.5em;
    max-height: 15em;
}

.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 5em;
}

.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 10em;
}

.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 14em;
}

.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 25em;
}

.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,
.vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
    display: block;
}

.video-js .vjs-menu-button-inline {
    transition: all 0.4s;
    overflow: hidden;
}

.video-js .vjs-menu-button-inline:before {
    width: 2.222222222em;
}

.video-js .vjs-menu-button-inline:hover,
.video-js .vjs-menu-button-inline:focus,
.video-js .vjs-menu-button-inline.vjs-slider-active {
    width: 12em;
}

.vjs-menu-button-inline .vjs-menu {
    opacity: 0;
    height: 100%;
    width: auto;
    position: absolute;
    left: 4em;
    top: 0;
    padding: 0;
    margin: 0;
    transition: all 0.4s;
}

.vjs-menu-button-inline:hover .vjs-menu,
.vjs-menu-button-inline:focus .vjs-menu,
.vjs-menu-button-inline.vjs-slider-active .vjs-menu {
    display: block;
    opacity: 1;
}

.vjs-menu-button-inline .vjs-menu-content {
    width: auto;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.video-js .vjs-control-bar {
    display: none;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);
}

.vjs-has-started .vjs-control-bar,
.vjs-audio-only-mode .vjs-control-bar {
    display: flex;
    visibility: visible;
    opacity: 1;
    transition: visibility 0.1s, opacity 0.1s;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
    transition: visibility 1s, opacity 1s;
}

.vjs-controls-disabled .vjs-control-bar,
.vjs-using-native-controls .vjs-control-bar,
.vjs-error .vjs-control-bar {
    display: none !important;
}

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.video-js .vjs-control {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 4em;
    flex: none;
}

.video-js .vjs-control.vjs-visible-text {
    width: auto;
    padding-left: 1em;
    padding-right: 1em;
}

.vjs-button > .vjs-icon-placeholder:before {
    font-size: 1.8em;
    line-height: 1.67;
}

.vjs-button > .vjs-icon-placeholder {
    display: block;
}

.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
    text-shadow: 0em 0em 1em white;
}

.video-js *:not(.vjs-visible-text) > .vjs-control-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.video-js .vjs-custom-control-spacer {
    display: none;
}

.video-js .vjs-progress-control {
    cursor: pointer;
    flex: auto;
    display: flex;
    align-items: center;
    min-width: 4em;
    touch-action: none;
}

.video-js .vjs-progress-control.disabled {
    cursor: default;
}

.vjs-live .vjs-progress-control {
    display: none;
}

.vjs-liveui .vjs-progress-control {
    display: flex;
    align-items: center;
}

.video-js .vjs-progress-holder {
    flex: auto;
    transition: all 0.2s;
    height: 0.3em;
}

.video-js .vjs-progress-control .vjs-progress-holder {
    margin: 0 10px;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 1.6666666667em;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
    font-size: 1em;
}

.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div {
    position: absolute;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 0;
}

.video-js .vjs-play-progress {
    background-color: #fff;
}
.video-js .vjs-play-progress:before {
    font-size: 0.9em;
    position: absolute;
    right: -0.5em;
    line-height: 0.35em;
    z-index: 1;
}

.video-js .vjs-load-progress {
    background: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-load-progress div {
    background: rgba(115, 133, 159, 0.75);
}

.video-js .vjs-time-tooltip {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.3em;
    color: #000;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding: 6px 8px 8px 8px;
    pointer-events: none;
    position: absolute;
    top: -3.4em;
    visibility: hidden;
    z-index: 1;
}

.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
    display: none;
}

.video-js .vjs-progress-control:hover .vjs-time-tooltip,
.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
    display: block;
    font-size: 0.6em;
    visibility: visible;
}

.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
    font-size: 1em;
}

.video-js .vjs-progress-control .vjs-mouse-display {
    display: none;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #000;
    z-index: 1;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display {
    display: block;
}

.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
}

.vjs-mouse-display .vjs-time-tooltip {
    color: #fff;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
}

.video-js .vjs-slider {
    position: relative;
    cursor: pointer;
    padding: 0;
    margin: 0 0.45em 0 0.45em;
    /* iOS Safari */
    -webkit-touch-callout: none;
    /* Safari */
    -webkit-user-select: none;
    /* Konqueror HTML */
    /* Firefox */
    -moz-user-select: none;
    /* Internet Explorer/Edge */
    /* Non-prefixed version, currently supported by Chrome and Opera */
    user-select: none;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-slider.disabled {
    cursor: default;
}

.video-js .vjs-slider:focus {
    text-shadow: 0em 0em 1em white;
    box-shadow: 0 0 1em #fff;
}

.video-js .vjs-mute-control {
    cursor: pointer;
    flex: none;
}
.video-js .vjs-volume-control {
    cursor: pointer;
    margin-right: 1em;
    display: flex;
}

.video-js .vjs-volume-control.vjs-volume-horizontal {
    width: 5em;
}

.video-js .vjs-volume-panel .vjs-volume-control {
    visibility: visible;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin-left: -1px;
}

.video-js .vjs-volume-panel {
    transition: width 1s;
}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
    visibility: visible;
    opacity: 1;
    position: relative;
    transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
    width: 5em;
    height: 3em;
    margin-right: 0;
}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
    left: -3.5em;
    transition: left 0s;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
    width: 10em;
    transition: width 0.1s;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
    width: 4em;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
    height: 8em;
    width: 3em;
    left: -3000em;
    transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
    transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
}

.video-js .vjs-volume-panel {
    display: flex;
}

.video-js .vjs-volume-bar {
    margin: 1.35em 0.45em;
}

.vjs-volume-bar.vjs-slider-horizontal {
    width: 5em;
    height: 0.3em;
}

.vjs-volume-bar.vjs-slider-vertical {
    width: 0.3em;
    height: 5em;
    margin: 1.35em auto;
}

.video-js .vjs-volume-level {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
}
.video-js .vjs-volume-level:before {
    position: absolute;
    font-size: 0.9em;
    z-index: 1;
}

.vjs-slider-vertical .vjs-volume-level {
    width: 0.3em;
}
.vjs-slider-vertical .vjs-volume-level:before {
    top: -0.5em;
    left: -0.3em;
    z-index: 1;
}

.vjs-slider-horizontal .vjs-volume-level {
    height: 0.3em;
}
.vjs-slider-horizontal .vjs-volume-level:before {
    line-height: 0.35em;
    right: -0.5em;
}

.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
    width: 4em;
}

.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
    height: 100%;
}

.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
    width: 100%;
}

.video-js .vjs-volume-vertical {
    width: 3em;
    height: 8em;
    bottom: 8em;
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);
}

.video-js .vjs-volume-horizontal .vjs-menu {
    left: -2em;
}

.video-js .vjs-volume-tooltip {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.3em;
    color: #000;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding: 6px 8px 8px 8px;
    pointer-events: none;
    position: absolute;
    top: -3.4em;
    visibility: hidden;
    z-index: 1;
}

.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
    display: block;
    font-size: 1em;
    visibility: visible;
}

.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
    left: 1em;
    top: -12px;
}

.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
    font-size: 1em;
}

.video-js .vjs-volume-control .vjs-mouse-display {
    display: none;
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #000;
    z-index: 1;
}

.video-js .vjs-volume-horizontal .vjs-mouse-display {
    width: 1px;
    height: 100%;
}

.video-js .vjs-volume-control:hover .vjs-mouse-display {
    display: block;
}

.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
}

.vjs-mouse-display .vjs-volume-tooltip {
    color: #fff;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
}

.vjs-poster {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}

.vjs-has-started .vjs-poster,
.vjs-using-native-controls .vjs-poster {
    display: none;
}

.vjs-audio.vjs-has-started .vjs-poster,
.vjs-has-started.vjs-audio-poster-mode .vjs-poster,
.vjs-pip-container.vjs-has-started .vjs-poster {
    display: block;
}

.vjs-poster img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.video-js .vjs-live-control {
    display: flex;
    align-items: flex-start;
    flex: auto;
    font-size: 1em;
    line-height: 3em;
}

.video-js:not(.vjs-live) .vjs-live-control,
.video-js.vjs-liveui .vjs-live-control {
    display: none;
}

.video-js .vjs-seek-to-live-control {
    align-items: center;
    cursor: pointer;
    flex: none;
    display: inline-flex;
    height: 100%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-size: 1em;
    line-height: 3em;
    width: auto;
    min-width: 4em;
}

.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
.video-js:not(.vjs-live) .vjs-seek-to-live-control {
    display: none;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
    cursor: auto;
}

.vjs-seek-to-live-control .vjs-icon-placeholder {
    margin-right: 0.5em;
    color: #888;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
    color: red;
}

.video-js .vjs-time-control {
    flex: none;
    font-size: 1em;
    line-height: 3em;
    min-width: 2em;
    width: auto;
    padding-left: 1em;
    padding-right: 1em;
}

.vjs-live .vjs-time-control,
.vjs-live .vjs-time-divider,
.video-js .vjs-current-time,
.video-js .vjs-duration {
    display: none;
}

.vjs-time-divider {
    display: none;
    line-height: 3em;
}

.video-js .vjs-play-control {
    cursor: pointer;
}

.video-js .vjs-play-control .vjs-icon-placeholder {
    flex: none;
}

.vjs-text-track-display {
    position: absolute;
    bottom: 3em;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
}

.video-js.vjs-controls-disabled .vjs-text-track-display,
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
    bottom: 1em;
}

.video-js .vjs-text-track {
    font-size: 1.4em;
    text-align: center;
    margin-bottom: 0.1em;
}

.vjs-subtitles {
    color: #fff;
}

.vjs-captions {
    color: #fc6;
}

.vjs-tt-cue {
    display: block;
}

video::-webkit-media-text-track-display {
    transform: translateY(-3em);
}

.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
    transform: translateY(-1.5em);
}

.video-js .vjs-picture-in-picture-control {
    cursor: pointer;
    flex: none;
}
.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,
.vjs-pip-window .vjs-picture-in-picture-control {
    display: none;
}

.video-js .vjs-fullscreen-control {
    cursor: pointer;
    flex: none;
}
.video-js.vjs-audio-only-mode .vjs-fullscreen-control,
.vjs-pip-window .vjs-fullscreen-control {
    display: none;
}

.vjs-playback-rate > .vjs-menu-button,
.vjs-playback-rate .vjs-playback-rate-value {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vjs-playback-rate .vjs-playback-rate-value {
    pointer-events: none;
    font-size: 1.5em;
    line-height: 2;
    text-align: center;
}

.vjs-playback-rate .vjs-menu {
    width: 4em;
    left: 0em;
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
    font-size: 1.4em;
    text-align: center;
}

.vjs-error .vjs-error-display:before {
    color: #fff;
    content: "X";
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4em;
    left: 0;
    line-height: 1;
    margin-top: -0.5em;
    position: absolute;
    text-shadow: 0.05em 0.05em 0.1em #000;
    text-align: center;
    top: 50%;
    vertical-align: middle;
    width: 100%;
}

.vjs-loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    opacity: 0.85;
    text-align: left;
    border: 6px solid rgba(43, 51, 63, 0.7);
    box-sizing: border-box;
    background-clip: padding-box;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    visibility: hidden;
}

.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {
    display: block;
    animation: vjs-spinner-show 0s linear 0.3s forwards;
}

.vjs-loading-spinner:before,
.vjs-loading-spinner:after {
    content: "";
    position: absolute;
    margin: -6px;
    box-sizing: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: 1;
    border: inherit;
    border-color: transparent;
    border-top-color: white;
}

.vjs-seeking .vjs-loading-spinner:before,
.vjs-seeking .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:after {
    animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

.vjs-seeking .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:before {
    border-top-color: rgb(255, 255, 255);
}

.vjs-seeking .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:after {
    border-top-color: rgb(255, 255, 255);
    animation-delay: 0.44s;
}

@keyframes vjs-spinner-show {
    to {
        visibility: visible;
    }
}
@keyframes vjs-spinner-spin {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes vjs-spinner-fade {
    0% {
        border-top-color: #73859f;
    }
    20% {
        border-top-color: #73859f;
    }
    35% {
        border-top-color: white;
    }
    60% {
        border-top-color: #73859f;
    }
    100% {
        border-top-color: #73859f;
    }
}
.video-js.vjs-audio-only-mode .vjs-captions-button {
    display: none;
}

.vjs-chapters-button .vjs-menu ul {
    width: 24em;
}

.video-js.vjs-audio-only-mode .vjs-descriptions-button {
    display: none;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
    vertical-align: middle;
    display: inline-block;
    margin-bottom: -0.1em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
    font-family: VideoJS;
    content: "\f10c";
    font-size: 1.5em;
    line-height: inherit;
}

.video-js.vjs-audio-only-mode .vjs-subs-caps-button {
    display: none;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
    vertical-align: middle;
    display: inline-block;
    margin-bottom: -0.1em;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
    font-family: VideoJS;
    content: " \f12e";
    font-size: 1.5em;
    line-height: inherit;
}

.video-js.vjs-layout-small .vjs-current-time,
.video-js.vjs-layout-small .vjs-time-divider,
.video-js.vjs-layout-small .vjs-duration,
.video-js.vjs-layout-small .vjs-remaining-time,
.video-js.vjs-layout-small .vjs-playback-rate,
.video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time,
.video-js.vjs-layout-x-small .vjs-time-divider,
.video-js.vjs-layout-x-small .vjs-duration,
.video-js.vjs-layout-x-small .vjs-remaining-time,
.video-js.vjs-layout-x-small .vjs-playback-rate,
.video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time,
.video-js.vjs-layout-tiny .vjs-time-divider,
.video-js.vjs-layout-tiny .vjs-duration,
.video-js.vjs-layout-tiny .vjs-remaining-time,
.video-js.vjs-layout-tiny .vjs-playback-rate,
.video-js.vjs-layout-tiny .vjs-volume-control {
    display: none;
}
.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
    width: auto;
    width: initial;
}
.video-js.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
    display: none;
}
.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
    flex: auto;
    display: block;
}

.vjs-modal-dialog.vjs-text-track-settings {
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.75);
    color: #fff;
    height: 70%;
}

.vjs-text-track-settings .vjs-modal-dialog-content {
    display: table;
}

.vjs-text-track-settings .vjs-track-settings-colors,
.vjs-text-track-settings .vjs-track-settings-font,
.vjs-text-track-settings .vjs-track-settings-controls {
    display: table-cell;
}

.vjs-text-track-settings .vjs-track-settings-controls {
    text-align: right;
    vertical-align: bottom;
}

@supports (display: grid) {
    .vjs-text-track-settings .vjs-modal-dialog-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        padding: 20px 24px 0px 24px;
    }
    .vjs-track-settings-controls .vjs-default-button {
        margin-bottom: 20px;
    }
    .vjs-text-track-settings .vjs-track-settings-controls {
        grid-column: 1/-1;
    }
    .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
    .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
    .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
        grid-template-columns: 1fr;
    }
}
.vjs-track-setting > select {
    margin-right: 1em;
    margin-bottom: 0.5em;
}

.vjs-text-track-settings fieldset {
    margin: 10px;
    border: none;
}

.vjs-text-track-settings fieldset span {
    display: inline-block;
    padding: 0 6px 8px;
}

.vjs-text-track-settings fieldset span > select {
    max-width: 7.3em;
}

.vjs-text-track-settings legend {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

.vjs-text-track-settings .vjs-label {
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    margin: 0 5px 5px 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.vjs-track-settings-controls button:focus,
.vjs-track-settings-controls button:active {
    outline-style: solid;
    outline-width: medium;
    background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
}

.vjs-track-settings-controls button:hover {
    color: rgba(43, 51, 63, 0.75);
}

.vjs-track-settings-controls button {
    background-color: #fff;
    background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
    color: #2B333F;
    cursor: pointer;
    border-radius: 2px;
}

.vjs-track-settings-controls .vjs-default-button {
    margin-right: 1em;
}

.vjs-title-bar {
    background: rgba(0, 0, 0, 0.9);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%);
    font-size: 1.2em;
    line-height: 1.5;
    transition: opacity 0.1s;
    padding: 0.666em 1.333em 4em;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.vjs-title-bar-title,
.vjs-title-bar-description {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vjs-title-bar-title {
    font-weight: bold;
    margin-bottom: 0.333em;
}

.vjs-playing.vjs-user-inactive .vjs-title-bar {
    opacity: 0;
    transition: opacity 1s;
}

.video-js .vjs-skip-forward-5 {
    cursor: pointer;
}
.video-js .vjs-skip-forward-10 {
    cursor: pointer;
}
.video-js .vjs-skip-forward-30 {
    cursor: pointer;
}
.video-js .vjs-skip-backward-5 {
    cursor: pointer;
}
.video-js .vjs-skip-backward-10 {
    cursor: pointer;
}
.video-js .vjs-skip-backward-30 {
    cursor: pointer;
}
@media print {
    .video-js > *:not(.vjs-tech):not(.vjs-poster) {
        visibility: hidden;
    }
}
.vjs-resize-manager {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: -1000;
}

.js-focus-visible .video-js *:focus:not(.focus-visible) {
    outline: none;
}

.video-js *:focus:not(:focus-visible) {
    outline: none;
}:root{--f-spinner-width: 36px;--f-spinner-height: 36px;--f-spinner-color-1: rgba(0, 0, 0, 0.1);--f-spinner-color-2: rgba(17, 24, 28, 0.8);--f-spinner-stroke: 2.75}.f-spinner{margin:auto;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height)}.f-spinner svg{width:100%;height:100%;vertical-align:top;animation:f-spinner-rotate 2s linear infinite}.f-spinner svg *{stroke-width:var(--f-spinner-stroke);fill:none}.f-spinner svg *:first-child{stroke:var(--f-spinner-color-1)}.f-spinner svg *:last-child{stroke:var(--f-spinner-color-2);animation:f-spinner-dash 2s ease-in-out infinite}@keyframes f-spinner-rotate{100%{transform:rotate(360deg)}}@keyframes f-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}.f-throwOutUp{animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutUp}.f-throwOutDown{animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0, calc(var(--f-throw-out-distance, 150px) * -1), 0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0, var(--f-throw-out-distance, 150px), 0);opacity:0}}.f-zoomInUp{animation:var(--f-transition-duration, 0.2s) ease .1s both f-zoomInUp}.f-zoomOutDown{animation:var(--f-transition-duration, 0.2s) ease both f-zoomOutDown}@keyframes f-zoomInUp{from{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}}.f-fadeIn{animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2}.f-fadeOut{animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeOut{100%{opacity:0}}.f-fadeFastIn{animation:var(--f-transition-duration, 0.2s) ease-out both f-fadeFastIn;z-index:2}.f-fadeFastOut{animation:var(--f-transition-duration, 0.1s) ease-out both f-fadeFastOut;z-index:2}@keyframes f-fadeFastIn{0%{opacity:.75}100%{opacity:1}}@keyframes f-fadeFastOut{100%{opacity:0}}.f-fadeSlowIn{animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowIn;z-index:2}.f-fadeSlowOut{animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowOut;z-index:1}@keyframes f-fadeSlowIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeSlowOut{100%{opacity:0}}.f-crossfadeIn{animation:var(--f-transition-duration, 0.2s) ease-out both f-crossfadeIn;z-index:2}.f-crossfadeOut{animation:calc(var(--f-transition-duration, 0.2s)*.5) linear .1s both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-crossfadeOut{100%{opacity:0}}.f-slideIn.from-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInNext}.f-slideIn.from-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInPrev}.f-slideOut.to-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutNext}.f-slideOut.to-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutPrev}@keyframes f-slideInPrev{0%{transform:translateX(100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideInNext{0%{transform:translateX(-100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideOutNext{100%{transform:translateX(-100%)}}@keyframes f-slideOutPrev{100%{transform:translateX(100%)}}.f-classicIn.from-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInNext;z-index:2}.f-classicIn.from-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInPrev;z-index:2}.f-classicOut.to-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutNext;z-index:1}.f-classicOut.to-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutPrev;z-index:1}@keyframes f-classicInNext{0%{transform:translateX(-75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translateX(75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicOutNext{100%{transform:translateX(-75px);opacity:0}}@keyframes f-classicOutPrev{100%{transform:translateX(75px);opacity:0}}:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-hover-bg: #e0e0e0;--f-button-active-bg: #d0d0d0;--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-disabled-opacity: 0.65}.f-button{display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);pointer-events:all;cursor:pointer;transition:var(--f-button-transition)}@media(hover: hover){.f-button:hover:not([disabled]){color:var(--f-button-hover-color);background-color:var(--f-button-hover-bg)}}.f-button:active:not([disabled]){background-color:var(--f-button-active-bg)}.f-button:focus:not(:focus-visible){outline:none}.f-button:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))}.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);fill:var(--f-button-svg-fill);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s ease;transform:var(--f-button-transform);filter:var(--f-button-svg-filter);pointer-events:none}.f-button[disabled]{cursor:default}.f-button[disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}.f-carousel__nav .f-button.is-prev,.f-carousel__nav .f-button.is-next,.fancybox__nav .f-button.is-prev,.fancybox__nav .f-button.is-next{position:absolute;z-index:1}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-next{top:50%;transform:translateY(-50%)}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-prev{left:var(--f-button-prev-pos)}.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-next{right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,.is-horizontal.is-rtl .fancybox__nav .f-button.is-prev{left:auto;right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,.is-horizontal.is-rtl .fancybox__nav .f-button.is-next{right:auto;left:var(--f-button-prev-pos)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-next{top:auto;left:50%;transform:translateX(-50%)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-prev{top:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-next{bottom:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-prev svg,.is-vertical .f-carousel__nav .f-button.is-next svg,.is-vertical .fancybox__nav .f-button.is-prev svg,.is-vertical .fancybox__nav .f-button.is-next svg{transform:rotate(90deg)}.f-carousel__nav .f-button:disabled,.fancybox__nav .f-button:disabled{pointer-events:none}html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}html.with-fancybox body{touch-action:none}html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));overflow:hidden !important;overscroll-behavior-y:none}.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-hover-color: #fff;--fancybox-bg: rgba(24, 24, 27, 0.98);--fancybox-slide-gap: 10px;--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-color-1: rgba(255, 255, 255, 0.1);--f-spinner-color-2: #bbb;--f-spinner-stroke: 3.65;position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;display:flex;flex-direction:column;box-sizing:border-box;margin:0;padding:0;color:#f8f8f8;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:visible;z-index:var(--fancybox-zIndex, 1050);outline:none;transform-origin:top left;-webkit-text-size-adjust:100%;-moz-text-size-adjust:none;-ms-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:contain}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__container::backdrop{background-color:rgba(0,0,0,0)}.fancybox__backdrop{position:fixed;top:0;left:0;bottom:0;right:0;z-index:-1;background:var(--fancybox-bg);opacity:var(--fancybox-opacity, 1);will-change:opacity}.fancybox__carousel{position:relative;box-sizing:border-box;flex:1;min-height:0;z-index:10;overflow-y:visible;overflow-x:clip}.fancybox__viewport{width:100%;height:100%}.fancybox__viewport.is-draggable{cursor:move;cursor:grab}.fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}.fancybox__track{display:flex;margin:0 auto;height:100%}.fancybox__slide{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;margin:0 var(--fancybox-slide-gap) 0 0;padding:4px;overflow:auto;overscroll-behavior:contain;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top:40px}.fancybox__slide.has-iframe,.fancybox__slide.has-video,.fancybox__slide.has-html5video{overflow:hidden}.fancybox__slide.has-image{overflow:hidden}.fancybox__slide.has-image.is-animating,.fancybox__slide.has-image.is-selected{overflow:visible}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}.fancybox__content{align-self:center;display:flex;flex-direction:column;position:relative;margin:0;padding:2rem;max-width:100%;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);cursor:default;border-radius:0;z-index:20}.is-loading .fancybox__content{opacity:0}.is-draggable .fancybox__content{cursor:move;cursor:grab}.can-zoom_in .fancybox__content{cursor:zoom-in}.can-zoom_out .fancybox__content{cursor:zoom-out}.is-dragging .fancybox__content{cursor:move;cursor:grabbing}.fancybox__content [data-selectable],.fancybox__content [contenteditable]{cursor:auto}.fancybox__slide.has-image>.fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__slide.has-image>.fancybox__content>picture>img{width:100%;height:auto;max-height:100%}.is-zooming-in .fancybox__viewport:not(.is-dragging) .fancybox__slide:not(.is-selected) .fancybox__content,.is-zooming-out .fancybox__viewport:not(.is-dragging) .fancybox__slide:not(.is-selected) .fancybox__content{visibility:hidden}.is-animating .fancybox__content,.is-dragging .fancybox__content{filter:blur(0px);will-change:transform,width,height}.fancybox-image{margin:auto;display:block;width:100%;height:100%;min-height:0;object-fit:contain;user-select:none}.fancybox__caption{align-self:center;max-width:100%;flex-shrink:0;margin:0;padding:14px 0 4px 0;overflow-wrap:anywhere;line-height:1.375;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);cursor:auto;visibility:visible}.is-loading .fancybox__caption,.is-closing .fancybox__caption{opacity:0;visibility:hidden}.is-compact .fancybox__caption{padding-bottom:0}.f-button.is-close-btn{--f-button-svg-stroke-width: 2;position:absolute;top:0;right:8px;z-index:40}.fancybox__content>.f-button.is-close-btn{--f-button-width: 34px;--f-button-height: 34px;--f-button-border-radius: 4px;--f-button-color: var(--fancybox-color, #fff);--f-button-hover-color: var(--fancybox-color, #fff);--f-button-bg: transparent;--f-button-hover-bg: transparent;--f-button-active-bg: transparent;--f-button-svg-width: 22px;--f-button-svg-height: 22px;position:absolute;top:-38px;right:0;opacity:.75}.is-loading .fancybox__content>.f-button.is-close-btn{visibility:hidden}.is-zooming-out .fancybox__content>.f-button.is-close-btn{visibility:hidden}.fancybox__content>.f-button.is-close-btn:hover{opacity:1}.fancybox__footer{padding:0;margin:0;position:relative}.fancybox__footer .fancybox__caption{width:100%;padding:24px;opacity:var(--fancybox-opacity, 1);transition:all .25s ease}.is-compact .fancybox__footer{position:absolute;bottom:0;left:0;right:0;z-index:20;background:rgba(24,24,27,.5)}.is-compact .fancybox__footer .fancybox__caption{padding:12px}.is-compact .fancybox__content>.f-button.is-close-btn{--f-button-border-radius: 50%;--f-button-color: #fff;--f-button-hover-color: #fff;--f-button-outline-color: #000;--f-button-bg: rgba(0, 0, 0, 0.6);--f-button-active-bg: rgba(0, 0, 0, 0.6);--f-button-hover-bg: rgba(0, 0, 0, 0.6);--f-button-svg-width: 18px;--f-button-svg-height: 18px;--f-button-svg-filter: none;top:5px;right:5px}.fancybox__nav{--f-button-width: 50px;--f-button-height: 50px;--f-button-border: 0;--f-button-border-radius: 50%;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: transparent;--f-button-hover-bg: rgba(24, 24, 27, 0.3);--f-button-active-bg: rgba(24, 24, 27, 0.5);--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 26px;--f-button-svg-height: 26px;--f-button-svg-stroke-width: 2.5;--f-button-svg-fill: none;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));--f-button-svg-disabled-opacity: 0.65;--f-button-next-pos: 1rem;--f-button-prev-pos: 1rem;opacity:var(--fancybox-opacity, 1)}.fancybox__nav .f-button:before{position:absolute;content:"";top:-30px;right:-20px;left:-20px;bottom:-30px;z-index:1}.is-idle .fancybox__nav{animation:.15s ease-out both f-fadeOut}.is-idle.is-compact .fancybox__footer{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__slide>.f-spinner{position:absolute;top:50%;left:50%;margin:var(--f-spinner-top, calc(var(--f-spinner-width) * -0.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -0.5));z-index:30;cursor:pointer}.fancybox-protected{position:absolute;top:0;left:0;right:0;bottom:0;z-index:40;user-select:none}.fancybox-ghost{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:contain;z-index:40;user-select:none;pointer-events:none}.fancybox-focus-guard{outline:none;opacity:0;position:fixed;pointer-events:none}.fancybox__container:not([aria-hidden]){opacity:0}.fancybox__container.is-animated[aria-hidden=false]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=false] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-enter-duration, 0.25s) ease .1s backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop{animation:var(--f-backdrop-enter-duration, 0.35s) ease backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=true]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=true] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-exit-duration, 0.15s) ease forwards f-fadeOut}.fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop{animation:var(--f-backdrop-exit-duration, 0.35s) ease forwards f-fadeOut}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content{width:calc(100% - 120px);height:90%}.fancybox__container.is-compact .has-iframe .fancybox__content,.fancybox__container.is-compact .has-map .fancybox__content,.fancybox__container.is-compact .has-pdf .fancybox__content{width:100%;height:100%}.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0}.f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1}.f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px}.f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none;perspective:1000px;transform:translateZ(0)}.f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2, #e2e8f0);z-index:-1}.f-thumbs .f-spinner svg{display:none}.f-thumbs.is-vertical{height:100%}.f-thumbs__viewport{width:100%;height:auto;overflow:hidden;transform:translate3d(0, 0, 0)}.f-thumbs__track{display:flex}.f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer}.f-thumbs__slide.is-loading img{opacity:0}.is-classic .f-thumbs__viewport{height:100%}.is-modern .f-thumbs__track{width:max-content}.is-modern .f-thumbs__track::before{content:"";position:absolute;top:0;bottom:0;left:calc((var(--f-thumb-clip-width, 0))*-0.5);width:calc(var(--width, 0)*1px + var(--f-thumb-clip-width, 0));cursor:pointer}.is-modern .f-thumbs__slide{width:var(--f-thumb-clip-width);transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);transition:none;pointer-events:none}.is-modern.is-resting .f-thumbs__slide{transition:transform .33s ease}.is-modern.is-resting .f-thumbs__slide__button{transition:clip-path .33s ease}.is-using-tab .is-modern .f-thumbs__slide:focus-within{filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))}.f-thumbs__slide__button{appearance:none;width:var(--f-thumb-width);height:100%;margin:0 -100% 0 -100%;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:rgba(0,0,0,0);outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease}.f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)}.f-thumbs__slide__button:focus:not(:focus-visible){outline:none}.f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)}.is-modern .f-thumbs__slide__button{--clip-path: inset( 0 calc( ((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0))) * (1 - var(--progress, 0)) * 0.5 ) round var(--f-thumb-border-radius, 0) );clip-path:var(--clip-path)}.is-classic .is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)}.is-classic .is-nav-selected .f-thumbs__slide__button::after{content:"";position:absolute;top:0;left:0;right:0;height:auto;bottom:0;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10}.f-thumbs__slide__img{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover;border-radius:var(--f-thumb-border-radius)}.f-thumbs.is-horizontal .f-thumbs__track{padding:8px 0 12px 0}.f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0}.f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;padding:0 8px}.f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0}.fancybox__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-border-radius: 2px;--f-thumb-outline: 2px;--f-thumb-outline-color: #ededed;position:relative;opacity:var(--fancybox-opacity, 1);transition:max-height .35s cubic-bezier(0.23, 1, 0.32, 1)}.fancybox__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-classic .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-modern .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-horizontal{padding:0 var(--f-thumb-gap)}.fancybox__thumbs.is-vertical{padding:var(--f-thumb-gap) 0}.is-compact .fancybox__thumbs{--f-thumb-width: 64px;--f-thumb-clip-width: 32px;--f-thumb-height: 48px;--f-thumb-extra-gap: 10px}.fancybox__thumbs.is-masked{max-height:0px !important}.is-closing .fancybox__thumbs{transition:none !important}.fancybox__toolbar{--f-progress-color: var(--fancybox-color, rgba(255, 255, 255, 0.94));--f-button-width: 46px;--f-button-height: 46px;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: rgba(24, 24, 27, 0.65);--f-button-hover-bg: rgba(70, 70, 73, 0.65);--f-button-active-bg: rgba(90, 90, 93, 0.65);--f-button-border-radius: 0;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.5;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.15));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: 0.65;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.5));pointer-events:none;z-index:20}.fancybox__toolbar :focus-visible{z-index:1}.fancybox__toolbar.is-absolute,.is-compact .fancybox__toolbar{position:absolute;top:0;left:0;right:0}.is-idle .fancybox__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}.fancybox__toolbar__column.is-left,.fancybox__toolbar__column.is-right{flex-grow:1;flex-basis:0}.fancybox__toolbar__column.is-right{display:flex;justify-content:flex-end;flex-wrap:nowrap}.fancybox__infobar{padding:0 5px;line-height:var(--f-button-height);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;cursor:default;user-select:none}.fancybox__infobar span{padding:0 5px}.fancybox__infobar:not(:first-child):not(:last-child){background:var(--f-button-bg)}[data-fancybox-toggle-slideshow]{position:relative}[data-fancybox-toggle-slideshow] .f-progress{height:100%;opacity:.3}[data-fancybox-toggle-slideshow] svg g:first-child{display:flex}[data-fancybox-toggle-slideshow] svg g:last-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:first-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:last-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}.f-progress{position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;background:var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));z-index:30;user-select:none;pointer-events:none}@font-face {
    font-family: Gilroy;
    font-display: swap;
    src: url("/fonts/Gilroy-Bold.woff2") format("woff2"), url("/fonts/Gilroy-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

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

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

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

@font-face {
    font-family: "icons";
    src: url("/fonts/icons.eot?jzoaq112");
    src: url("/fonts/icons.eot?jzoaq112#iefix") format("embedded-opentype"), url("/fonts/icons.woff?jzoaq112") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

:root {
    /*--default-color: #295CC9;*/
    --default-color: #54B268;

    --bodyBg: #F7F8FA;
    --mainBg: #FFFFFF;

    --text: #333333;
    --textOpacity: rgba(51, 51, 51, .5);

    --accent: #295CC9;
    --accentOpacity: rgba(41, 92, 201, 0.15);

    --accentGray: #F9FAFD;

    --courseBg: #97B8FF;

    --hint: #FFFFFF;
    --hintShadow: rgba(122, 148, 199, 0.15);
    --filterShadow: rgba(101, 121, 152, 0.13);

    --svg: #F5F5F5;
    --svgBg: #F9FAFD;

    --border: #EAEAEA;

    --hover: rgba(41, 92, 201, 0.05);
}

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

/*html {*/
/*    margin-left: calc(100vw - 100%);*/
/*    margin-right: 0;*/
/*}*/

body {
    width: 100vw;
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    font-style: normal;
    background-color: var(--bodyBg);
    color: var(--text);
    overflow-x: hidden;
}

body._dark {
    --default-color: #295CC9;

    --bodyBg: #090A0A;
    --mainBg: #151617;

    --text: #FFFFFF;
    --textOpacity: rgba(255, 255, 255, .5);

    --accent: #1857F1;
    --accentOpacity: rgba(24, 87, 241, .15);

    --accentGray: #1C1D1E;

    --courseBg: rgba(255, 255, 255, .5);

    --hint: #38393A;
    --hintShadow: rgba(29, 31, 35, 0.15);
    --filterShadow: rgba(8, 9, 10, 0.4);

    --svg: rgba(255, 255, 255, .15);
    --svgBg: #090A0A;

    --border: rgba(247, 248, 250, 0.25);

    --hover: rgba(255, 255, 255, .05);

    color-scheme: dark;
}

body._modal {
    overflow: hidden;
}

input,
textarea,
button {
    font: inherit;
    color: inherit;
}

input:focus,
textarea:focus {
    outline: none;
}

textarea {
    resize: none;
}

ul[class],
ol[class] {
    list-style: none;
}

img {
    display: block;
}

.tariff-banner__button,
.mobile__btn,
.profile-aside__header-plug,
.profile_finance-hitory__avatarbox,
.profile_tariff-options__hint-icon,
.profile__notification-icon,
.profile-error__button,
.profile__profile-warning,
.sidebar__save,
.sidebar-filter__row-button,
.sidebar-item__inner[data-type=course]+.sidebar-item__hidden .sidebar-item__icon,
.student_aside__backwards-icon,
.lesson-mob__backwards-icon,
.student_aside-lesson__icon,
.student_aside__navitem-icon,
.student_lesson-box__attention-icon,
.lce__header-remove,
.lce__header-save,
.calendar__button,
.calendar__month-days li span,
.calendar__month-days li,
.popup-delete__button,
.popup-delete,
.user-delete__button,
.user-invite__button,
.user-delete,
.popup-crop__button,
.crop-editor__button,
.crop-error__btn,
.user-access__roles-button,
.user-access__roles-item div,
.users-filter__item-checkbox,
.users__header-create,
.add_user__button,
.add_user-plug__inner,
.add_user-plug__button,
.users__header-action,
.deps-list__button,
.dep_sett-users__header-button,
.dep_sett-users__footer-button,
.dep_sett-user__img,
.invite_user__button,
.invite_user-item__checkbox,
.invite_user-item__img,
.invite_user__footer-user,
.mini-popup__wrapper,
.mini-popup__button,
.lesson-aside__content-button,
.lesson-content-item__hidden[data-type=lesson] .lesson-content-item__icon,
.template-actions__button-icon,
.template_video-item__plug-inner,
.template_audio-item__rec-btn,
.template_audio-item__plug-icon,
.template_image-item__plug-inner,
.template_media-box__item-icon,
.template_media__header-tab,
.template_test-answer__label-icon,
.template-item__new,
.template-item__new-btn div,
.template-item__actions-item,
.template-item__question-footer div,
.template-item__new-plus,
.admin_table-row__manager-avatarbox,
.admin_table-row__tariff-btn,
.admin_table-row__user-avatarbox,
.admin__header-icon,
.admin__invite,
.file__icon,
.link__icon,
.student_template-task__audio-icon,
.users-department__header-remove,
.tariff-list__item-btn,
.tariff-list__item-warning,
.tariff_sett-item__button,
.tariff_end__button,
.lce__header-rename,
.lcr__button,
.lcr__plug,
.lesson-remove__button,
.faq__plug-inner,
.faq__plug,
.faq__button,
.ef__button,
.ef__ext,
.warning__button,
.warning__header-icon,
.button-settings__colors-btn,
.warning__colors-btn,
.editor__hint-item,
.editor__color-item,
.user_avatar-box,
.loader,
.admin-profile_notification-plug__inner,
.admin-profile_notification-plug,
.admin_profile-aside__header-avatarbox,
.admin_profile-aside__header-avatarbox div,
.admin_table-hidden__initiator-avatarbox,
.portal-destroy__button,
.p-socket__wrapper,
.p-socket__button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tariff-banner,
.mobile__btn,
.profile_tariff-options__item,
.profile-aside__save,
.profile-aside__link,
.profile-aside__header-remove,
.profile__settings-delete,
.profile__settings-accept,
.profile__settings-checkbox,
.profile__profile-button,
.profile__profile-checkbox,
.profile__header-button,
.profile-aside__remove,
.profile-error__button,
.header__user,
.sidebar__back,
.sidebar__save,
.sidebar__box-title,
.sidebar-switcher,
.sidebar-filter__row-button,
.sidebar-item__inner,
.student_aside,
.lce__header-save,
.calendar__button,
.calendar__month-days li,
.popup-delete__button,
.user-delete__button,
.user-invite__button,
.popup-crop__button,
.crop-editor__button,
.crop-error__btn,
.user-access__roles-button,
.user-access__roles-item,
.user-access__item,
.add_user__button,
.add_user-select__item,
.add_user-select__header-input[name="dep"],
.add_user-plug__button,
.users__header-action,
.deps-list__button,
.dep_sett-users__header-button,
.dep_sett-users__footer-button,
.dep_sett-user__img,
.deps-list__item,
.invite_user__button,
.invite_user-item,
.mini-popup__button,
.lesson__start-options--item,
.lesson-content-item__inner,
.auto_add-footer__buttons-btn,
.auto_add-list__user,
.auto_add-body__department-header,
.user__info,
.users-department__header-remove,
.users-department__header-add,
.tariff-confirm__btn,
.template-item._locked trix-editor,
.template-actions__button,
.template_video-item__img-btn,
.template_audio-item__file-remove,
.template_audio-item__menu,
.template_image-item__img-btn,
.template_image-item__img-footer,
.template_media-box__item,
.template_test-answer__label,
.template-item__new-btn,
.template-item__add,
.editor__warning-remove,
.editor__media-remove,
.admin_table-row__action-prolongate,
.admin_table-row__action-pause,
.admin__select,
.student_template-task__audio,
.student_template__box[data-type=queue] .student_test-question__answer,
.user_avatar-box,
.tariff_options-list__item-btn,
.tariff-list__item-btn,
.tariff-list__item-warning,
.tariff_sett-item__button,
.tariff_end__button,
.tariff-enlarge__btn,
.lcr__button,
.lesson-remove__buttons,
.faq-aside__link,
.faq-aside__ask,
.faq__button,
.faq-aside__section-name,
.ef,
.warning__button,
.context,
.logo,
.admin_profile-aside__btn,
.admin_profile-aside__link,
.admin-profile__settings-button,
.admin-profile__settings-checkbox,
.admin-profile__header-button,
.admin_profile-aside__header-avatarbox[style*=image] p,
.admin-tariff__btn,
.admin-tariff__stat-input span,
.admin-tariff__tariff,
.admin-expand__btn,
.admin_table-row__action-manager,
.file__remove,
.portal-destroy__button,
.p-socket__button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

._load * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

._mob {
    display: none;
}

._progress {
    --color: #295CC9;
    --color-15: #EEF2FA;
    --color-25: rgba(41, 92, 201, 0.25);
    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--value) - var(--min)) / var(--range));
    --sx: calc(0.5 * 8px + var(--ratio) * (100% - 8px));

    width: 100%;
    height: 4px;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

body._dark ._progress {
    --color: #FFFFFF;
    --color-15: rgba(255, 255, 255, .25);
    --color-25: var(--svg);
}

._progress:focus {
    outline: none;
}

._progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 16px;
    background: var(--color);
    border: none;
    box-shadow: none;
    margin-top: -2px;
}

._progress::-webkit-slider-runnable-track {
    height: 4px;
    border: none;
    border-radius: 0.5em;
    background: var(--color-25);
    box-shadow: none;
}

._progress::-webkit-slider-runnable-track {
    background: linear-gradient(var(--color), var(--color)) 0/var(--sx) 100% no-repeat, var(--color-25);
}

._progress::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border-radius: 16px;
    background: var(--color);
    border: none;
    box-shadow: none;
}

._progress::-moz-range-track {
    height: 4px;
    border: none;
    border-radius: 0.5em;
    background: linear-gradient(var(--color), var(--color)) 0/var(--sx) 100% no-repeat, var(--color-25);
    box-shadow: none;
}

._progress::-ms-fill-upper {
    background: transparent;
    border-color: transparent;
}

._progress::-ms-fill-lower {
    background: transparent;
    border-color: transparent;
}

._progress::-ms-thumb {
    width: 8px;
    height: 8px;
    border-radius: 16px;
    background: var(--color);
    border: none;
    box-shadow: none;
    margin-top: 0;
    box-sizing: border-box;
}

._progress::-ms-track {
    height: 4px;
    border-radius: 0.5em;
    background: var(--color-25);
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}

._progress::-ms-fill-lower {
    height: 4px;
    border-radius: 0.5em 0 0 0.5em;
    margin: 0;
    background: var(--color);
    border: none;
    border-right-width: 0;
}

._money {
    white-space: nowrap;
}

._container {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.mobile {
    max-width: 428px;
    min-height: calc(100vh - 80px);
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mobile__img {
    max-width: 300px;
    width: 65%;
    margin-bottom: 36px;
}

.mobile__title {
    margin-bottom: 36px;
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
}

.mobile__text {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.15;
}

.mobile__subtitle {
    margin-bottom: 64px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
}

.mobile__btn {
    width: 100%;
    height: 50px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    border-radius: 10px;
    background-color: #295CC9;
    color: #fff;
    text-decoration: none;
}

.tariff-banner {
    margin: -20px 0 20px;
    color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
}

.tariff-banner._mobile {
    display: none;
}

.tariff-banner[data-tariff="1"] {
    background: url('/img/common/tariff-banner-bg-2.png?1') no-repeat right center, linear-gradient(117.77deg, #67a2ef 10.82%, #4777b4 95.44%);
    background-size: contain;
}

.tariff-banner[data-tariff="2"] {
    background: url('/img/common/tariff-banner-bg-1.png?1') no-repeat right center, linear-gradient(90.08deg, #8B67F3 13.2%, #633DF3 74.34%);
    background-size: contain;
}

.tariff-banner[data-tariff="3"] {
    background: url('/img/common/tariff-banner-bg-2.png?1') no-repeat right center, linear-gradient(117.77deg, #4894F5 10.82%, #0470F9 95.44%);
    background-size: contain;
}

.tariff-banner[data-tariff="4"] {
    background: url('/img/common/tariff-banner-bg-3.png?1') no-repeat right center, linear-gradient(117.77deg, #295CC9 10.82%, #063BAC 95.44%);
    background-size: contain;
}

.tariff-banner[data-tariff="5"] {
    background: url('/img/common/tariff-banner-bg-4.png?1') no-repeat right center, linear-gradient(117.77deg, #1B3A68 10.82%, #020E20 95.44%);
    background-size: contain;
}

.tariff-banner__inner {
    padding: 33px 0 33px 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.tariff-banner__text {
    max-width: 1020px;
    margin-right: 44px;
    font-size: 20px;
    line-height: 23px;
}

.tariff-banner__right {
    display: flex;
    align-items: center;
}

.tariff-banner__button {
    width: 180px;
    height: 54px;
    margin-right: 28px;
    font-weight: 600;
    font-size: 18px;
    line-height: 21px;
    border-radius: 5px;
    border: none;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    text-decoration: none;
}

.tariff-banner__stat {
    height: 54px;
    padding: 0 11px 0 23px;
    border-radius: 7px;
    background-color: rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
}

.tariff-banner__stat-icon {
    --s: 33px;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    background-image: url('/img/common/tariff-banner-calendar.svg');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.tariff-banner__stat-text {
    margin-right: 16px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
}

.tariff-banner__stat-days {
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
}

.maintenance {
    padding-left: 90px;
}

.maintenance__inner {
    min-height: calc(100vh - 122px);
    padding: 44px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.maintenance__img {
    max-width: 580px;
    width: 100%;
}

.maintenance__title {
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
}

.maintenance__text {
    font-size: 20px;
    line-height: 1.15;
}

.user_avatar-box {
    width: var(--s);
    height: var(--s);
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    border-radius: 50%;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    flex-shrink: 0;
    position: relative;
    text-transform: uppercase;
}

.header__user._lbg .user_avatar-box::before {
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('/img/common/crown.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.user_avatar-box[style*="background-image"] {
    color: transparent;
}

.common-input {
    width: 100%;
    padding: 18px 24px;
    border-radius: 8px;
    border: 1px solid #EEEFF1;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ccc;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes lds-ellipsis2 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(24px, 0);}
}
@keyframes lds-ellipsis3 {
    0% {transform: scale(1);}
    100% {transform: scale(0);}
}

.ref {
    --color: #295CC9;
    --color-15: #EEF2FA;

    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.stat-block__student .ref + .ref {
    margin-top: 10px;
}

.ref__icon {
    --s: 40px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-color: var(--color-15);
    border-radius: 50%;
}

body._dark .ref__icon {
    background-color: var(--svg);
}

.ref__icon span {
    --s: 26px;

    width: var(--s);
    height: var(--s);
    background-color: var(--color);
    -webkit-mask-image: url("/img/stat/download.svg");
    mask-image: url("/img/stat/download.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .ref__icon span {
    background-color: var(--text);
}

.ref__info {
    display: flex;
    flex-direction: column;
}

.ref__name {
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.ref__size {
    font-size: 12px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.link,
.file {
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.file {
    padding-top: 20px;
}

.file._file-loading .file__icon span {
    --s: 32px;

    background-color: var(--accent);
    -webkit-mask-image: url("/img/common/audio-loader.svg?1");
    mask-image: url("/img/common/audio-loader.svg?1");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    /*background-image: url('/img/common/audio-loader.svg?1');*/
    /*-webkit-background-size: contain;*/
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center center;*/
}

body._dark .file._file-loading .file__icon span {
    background-color: var(--text);
}

.file._file-loading .file__icon span,
.file._upload._file-loading .file__icon span {
    background-color: transparent;
}

.link__input,
.file__input {
    width: 100%;
    height: 100%;
    font-size: 0;
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    z-index: 2;
}

.link__icon,
.file__icon {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    border-radius: 50%;
    background-color: var(--hover);
    flex-shrink: 0;
}

.link__icon span,
.file__icon span {
    --s: 29px;
    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
    -webkit-mask-image: url("/img/stat/download.svg");
    mask-image: url("/img/stat/download.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .link__icon span,
body._dark .file__icon span {
    background-color: var(--text);
}

.link__info {
    overflow: hidden;
}

.link__name,
.file__name {
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.file__name {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
}

.link__size,
.file__size {
    font-size: 14px;
    color: var(--textOpacity);
}

.file__remove {
    position: absolute;
    font-size: 16px;
    top: 0;
    right: 0;
    background-color: transparent;
    color: var(--textOpacity);
    border: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    cursor: pointer;
    z-index: 3;
}

.file._upload .file__icon span {
    background-color: rgba(51, 51, 51, 0.5);
    -webkit-mask-image: url("/img/common/plus-black.svg");
    mask-image: url("/img/common/plus-black.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .file._upload .file__icon span {
    background-color: var(--text);
}

.file._upload .file__name {
    font-weight: 400;
    color: var(--textOpacity);
}

.file._upload :where(.file__size, .file__remove) {
    display: none;
}

.header {
    margin-bottom: 20px;
    padding: 20px 0;
    top: 0;
    border-bottom: 2px solid var(--bodyBg);
    background-color: var(--mainBg);
    position: sticky;
    z-index: 90;
}

.header__inner {
    padding-left: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__menu {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header__menu-open {
    width: 24px;
    height: 18px;
    position: relative;
    display: none;
}

.header__menu-open span {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: rgba(51, 51, 51, 0.5);
    transition: all 0.3s;
    position: absolute;
}

.header__menu-open span:nth-child(1) {
    top: 0;
    left: 0;
}

.header__menu-open span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.header__menu-open span:nth-child(3) {
    bottom: 0;
    left: 0;
}

.header__user {
    margin-right: 24px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.header__user .user_avatar-box {
    --s: 40px;
    position: relative;
}

.header__user .user_avatar-box::after {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: #E54047;
    box-sizing: border-box;
    display: none;
    position: absolute;
    content: '';
}

.header__user._active .user_avatar-box::after {
    display: block;
}

.header__user-info {
    margin-right: 10px;
    text-align: right;
}

.header__user-name {
    margin-bottom: 3px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
}

.header__user-position {
    font-size: 14px;
    line-height: 1;
    color: var(--textOpacity);
}

.header__user-img {
    --s: 42px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.header-portal {
    position: relative;
    margin-right: 24px;
}

.header-portal__item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-portal__main .header-portal__item {
    text-align: right;
    cursor: pointer;
}

.header-portal__name {
    margin-bottom: 3px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
}

.header-portal__users,
.header-portal__domain,
.header-portal__tariff {
    font-size: 14px;
    line-height: 1;
    color: var(--textOpacity);
}

.header-portal__logo {
    --s: 42px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
}

.header-portal__hidden {
    display: none;
    position: absolute;
    max-height: 450px;
    min-width: 400px;
    max-width: 450px;
    top: calc(100% + 21px);
    right: 0;
    box-shadow: 0 4px 9px 0 var(--hintShadow);
    background-color: var(--hint);
    border-radius: 0 0 10px 10px;
    overflow: auto;
    scrollbar-width: none;
}

.header-portal__hidden::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.header-portal._active .header-portal__hidden {
    display: block;
}

.header-portal__box {
    padding: 20px 30px;
}

.header-portal__box:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.header-portal__box-title {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}

.header-portal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.header-portal__row._current {
    cursor: auto;
}

.header-portal__row:not(:last-child) {
    margin-bottom: 20px;
}

.header-portal__row._expired {
    opacity: .5;
    cursor: not-allowed;
}

.header-portal__row._expired .header-portal__tariff {
    color: #E54047;
}

.header-portal__domain {
    margin-bottom: 4px;
}

.header-portal__count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    opacity: .5;
}

.header-portal__count span {
    --s: 16px;

    width: var(--s);
    height: var(--s);
    background-color: #333;
    -webkit-mask-image: url("/img/xpl/icon-user.svg");
    mask-image: url("/img/xpl/icon-user.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.header-notes {
    position: relative;
    margin-right: 24px;
}

.header-notes._new::after {
    --s: 10px;
    
    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    right: 5px;
    top: 5px;
    background-color: #E54047;
    border-radius: 50%;
}

.header-notes._loading .header-notes__content::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--hint);
    z-index: 10;
}

.header-notes._loading .header-notes__content::after {
    --s: 100px;

    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/chk/loader.svg");
    mask-image: url("/img/chk/loader.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    z-index: 11;
}

.header-notes__button {
    --s: 42px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.header-notes__button span {
    --s: 28px;

    width: var(--s);
    height: var(--s);
    background-color: var(--textOpacity);
    transition: all .2s;
    -webkit-mask-image: url("/img/profile/notification-icon.svg");
    mask-image: url("/img/profile/notification-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .header-notes__button span {
    background-color: var(--text);
}

.header-notes__body {
    display: none;
    flex-direction: column;
    position: absolute;
    min-width: 450px;
    height: 450px;
    top: calc(100% + 21px);
    right: 0;
    box-shadow: 0 4px 9px 0 var(--hintShadow);
    background-color: var(--hint);
    border-radius: 0 0 10px 10px;
    overflow-x: hidden;
    scrollbar-width: none;
}

.header-notes__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.header-notes__body._hidden {
    overflow: hidden;
}

.header-notes__body._empty {
    overflow: hidden;
}

.header-notes__plug {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 50px;
    top: 0;
    left: 0;
    background-color: var(--hint);
    border-radius: 0 0 10px 10px;
    opacity: 0;
    visibility: hidden;
    z-index: 4;
}

.header-notes__body._empty .header-notes__plug {
    opacity: 1;
    visibility: visible;
}

.header-notes__plug-img {
    max-width: 260px;
    width: 100%;
    margin-bottom: 24px;
}

.header-notes__plug-img img {
    width: 100%;
    object-fit: cover;
}

.header-notes__plug-title {
    margin-bottom: 18px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
}

.header-notes__plug-text {
    font-size: 16px;
    line-height: 1.15;
    text-align: center;
}

.header-notes._active .header-notes__body {
    display: flex;
}

.header-notes__body-inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: auto;
    scrollbar-width: none;
}

.header-notes__body-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.header-notes__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    padding: 15px 30px;
    background-color: var(--hint);
    border-bottom: 1px solid var(--border);
    top: 0;
    z-index: 6;
}

.header-notes__title {
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
}

.header-notes__backwards {
    display: none;
}

.header-notes__settings {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-left: 12px;
    background-color: var(--textOpacity);
    transition: all .2s;
    -webkit-mask-image: url('/img/common/settings.svg');
    mask-image: url('/img/common/settings.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    border: none;
    cursor: pointer;
}

.header-notes__settings:hover {
    background-color: var(--text);
}

.header-notes__content {
    flex: 1;
}

.header-notes__box {
    padding: 20px 30px;
}

.header-notes__box + .header-notes__box {
    border-top: 1px solid var(--border);
}

.header-notes__box-title {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.15;
}

.header-notes__box-title._new {
    position: relative;
}

.header-notes__box-title._new::after {
    --s: 10px;
    
    position: absolute;
    width: var(--s);
    height: var(--s);
    margin-left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #E54047;
    border-radius: 50%;
    content: '';
}

.header-notes__item {
    display: block;
    color: inherit;
    text-decoration: none;
}

.header-notes__item:not(:last-child) {
    margin-bottom: 30px;
}

.header-notes__item-inner {
    display: flex;
}

.header-notes__user {
    --s: 38px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    margin-right: 15px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.15;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #FFFFFF;
    border-radius: 50%;
    text-transform: uppercase;
}

.header-notes__item-text {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
}

.header-notes__item-text span {
    font-weight: 600;
}

.header-notes__item-link {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    color: var(--accent);
    text-decoration: underline;
}

.header-notes__item-date {
    font-size: 14px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.header-notes__footer {
    position: sticky;
    padding: 24px 30px;
    bottom: 0;
    background: linear-gradient(0deg, var(--hint), var(--hint) 85%, transparent);
    z-index: 2;
}

.header-notes__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    background-color: rgba(41, 92, 201, 0.15);
    color: #295CC9;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

body._dark .header-notes__clear {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.header-notes__hidden {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: translateX(100%);
    transition: all .2s;
    border-radius: 0 0 10px 10px;
    background-color: var(--hint);
    z-index: 12;
}

.header-notes__body._hidden .header-notes__hidden {
    transform: translateX(0);
}

.header-notes__back {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.header-notes__back span {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    background-color: var(--text);
    -webkit-mask-image: url("/img/common/arrow.svg");
    mask-image: url("/img/common/arrow.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.header-notes__hidden__body {
    padding: 20px 30px;
}

.header-notes__hidden-text {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.15;
}

.header-notes__hidden-label {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.header-notes__hidden-label:not(:last-child) {
    margin-bottom: 20px;
}

.header-notes__hidden-label input {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    border-radius: 5px;
    border: 1px solid var(--textOpacity);
    background-image: url('/img/common/checkmark.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

body._dark .header-notes__hidden-label input {
    background-image: url('/img/common/checkmark-dark.svg');
}

.header-notes__hidden-label input:checked {
    background-color: #54B268;
    border-color: #54B268;
}

body._dark .header-notes__hidden-label input:checked {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

.header__quit {
    --s: 32px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    background-color: #E54047;
    -webkit-mask-image: url("/img/common/shutdown.svg");
    mask-image: url("/img/common/shutdown.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    cursor: pointer;
}

.aside {
    width: 90px;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #0B1C35;
    position: fixed;
    z-index: 91;
    transition: width 0.2s;
}

body._dark .aside {
    background-color: #151617;
}

.aside._active {
    width: 350px;
}

.aside._active .aside__item {
    width: 310px;
}

.aside._active .aside__item-text,
.aside._active .logo__text {
    opacity: 1;
    visibility: visible;
}

.aside__inner {
    padding: 20px;
}

.aside__links {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.aside__links::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.aside__item {
    width: 50px;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s;
    display: block;
    cursor: pointer;
}

.aside__item:not(:last-child) {
    margin-bottom: 20px;
}

.aside__item._active {
    background-color: rgba(255, 255, 255, 0.15);
}

.aside__item[href="/programs"] .aside__item-icon,
.aside__item[href="/content"] .aside__item-icon {
    -webkit-mask-image: url("/img/common/icon-folder.svg");
    mask-image: url("/img/common/icon-folder.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/assign"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-assign.svg");
    mask-image: url("/img/explorer/icon-assign.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/check"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-message.svg?1");
    mask-image: url("/img/explorer/icon-message.svg?1");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/check"]._unchecked .aside__item-icon {
    position: relative;
    -webkit-mask-image: none;
    mask-image: none;
    background-image: url('/img/explorer/icon-message.svg');
    background-color: unset;
}

.aside__item[href="/check"]._unchecked .aside__item-icon::before {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    bottom: -4px;
    right: -4px;
    border-radius: 10px;
    border: 3px solid #0B1C35;
    background-color: #E54047;
    transition: border-color .2s;
    position: absolute;
    content: '';
}

.aside__item[href="/check"]._active._unchecked .aside__item-icon::before {
    border-color: #303e53;
}

.aside__item[href="/study"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-student.svg");
    mask-image: url("/img/explorer/icon-student.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/structure"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-structure.svg?1");
    mask-image: url("/img/explorer/icon-structure.svg?1");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/users"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-users.svg");
    mask-image: url("/img/explorer/icon-users.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/tariff"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-tariff.svg");
    mask-image: url("/img/explorer/icon-tariff.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/news"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-news.svg");
    mask-image: url("/img/explorer/icon-news.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/admin"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-admin.svg");
    mask-image: url("/img/explorer/icon-admin.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/stat"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-stat.svg");
    mask-image: url("/img/explorer/icon-stat.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item[href="/tariff_sett"] .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-tariff-sett.svg");
    mask-image: url("/img/explorer/icon-tariff-sett.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item._profile .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-settings.svg");
    mask-image: url("/img/explorer/icon-settings.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item._faq {
    margin-top: auto;
}

.aside__item._faq .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-help.svg");
    mask-image: url("/img/explorer/icon-help.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item._telegram .aside__item-icon {
    -webkit-mask-image: url("/img/explorer/icon-telegram.svg");
    mask-image: url("/img/explorer/icon-telegram.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.aside__item-inner {
    display: flex;
    align-items: center;
}

.aside__item-icon {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    margin-right: 30px;
    background-color: #fff;
    flex-shrink: 0;
}

.aside__item-text {
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.sidebar {
    top: 102px;
    align-self: flex-start;
    position: sticky;
}

.sidebar__header {
    margin-bottom: 20px;
    padding: 24px;
    border-radius: 10px;
    background-color: var(--mainBg);
}

.sidebar__header._disabled {
    opacity: .4;
}

.sidebar__header._disabled .sidebar-switcher {
    cursor: not-allowed;
}

.sidebar__inner {
    height: calc(100vh - 210px);
    padding: 0 12px;
    border-radius: 10px;
    background-color: var(--mainBg);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    position: relative;
}

.sidebar__inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sidebar__top {
    padding: 24px 12px;
    top: 0;
    background-color: var(--mainBg);
    position: sticky;
    z-index: 5;
}

.xpl-side__structure .sidebar__top {
    padding-top: 0;
}

.sidebar__prg {
    font-weight: 600;
    font-size: 22px;
    line-height: 1.15;
}

.sidebar__back {
    display: block;
    margin-bottom: 20px;
    color: inherit;
    cursor: pointer;
    opacity: .5;
    transition: all 0.2s;
    text-decoration: none;
}

.sidebar__back-inner {
    display: flex;
    align-items: center;
}

.sidebar__back-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    background-color: var(--text);
    transform: rotateY(180deg);
    -webkit-mask-image: url("/img/xpl/section.svg");
    mask-image: url("/img/xpl/section.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.sidebar__back-text {
    font-size: 18px;
    line-height: 1.15;
    color: var(--text);
}

.sidebar__box:not(:last-child) {
    margin-bottom: 36px;
}

.sidebar__box-title {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
    transition: all 0.2s;
    cursor: pointer;
    word-break: break-word;
}

.sidebar__box-title._active {
    color: #333;
}

.sidebar__box-inner {
    padding-top: 24px;
    display: none;
}

.sidebar__save-wrapper {
    padding: 20px 12px;
    bottom: 0;
    background-color: var(--mainBg);
    position: sticky;
    z-index: 5;
}

.sidebar__save-wrapper._hide {
    display: none;
}

.sidebar__save {
    height: 50px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    border-radius: 7px;
    background-color: var(--accent);
    color: #fff;
    cursor: pointer;
}

.sidebar-switcher {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sidebar-switcher._active .sidebar-switcher__body {
    background-color: #295CC9;
}

body._dark .sidebar-switcher._active .sidebar-switcher__body {
    background-color: var(--text);
}

.sidebar-switcher._active .sidebar-switcher__body .sidebar-switcher__circle {
    background-color: #fff;
    transform: translateX(22px);
}

body._dark .sidebar-switcher._active .sidebar-switcher__body .sidebar-switcher__circle {
    background-color: var(--hint);
}

.sidebar-switcher._active .sidebar-switcher__text {
    color: var(--text);
}

.sidebar-switcher__body {
    width: 44px;
    height: 22px;
    margin-right: 12px;
    border-radius: 24px;
    background-color: #F7F8FA;
    position: relative;
    transition: all 0.2s;
}

body._dark .sidebar-switcher__body {
    background-color: var(--svg);
}

.sidebar-switcher__circle {
    --s: 18px;
    width: var(--s);
    height: var(--s);
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background-color: #295CC9;
    position: absolute;
    transition: all 0.2s;
}

body._dark .sidebar-switcher__circle {
    background-color: var(--text);
}

.sidebar-switcher__text {
    font-size: 18px;
    line-height: 1;
    color: var(--textOpacity);
    transition: all 0.2s;
}

.sidebar-filter {
    margin: 0 -12px;
    padding: 20px 12px;
    top: 0;
    background-color: #fff;
    z-index: 10;
    position: sticky;
}

.sidebar-filter__title {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.sidebar-filter__row-inner {
    display: flex;
    position: relative;
}

.sidebar-filter__row-inner::after {
    font-size: 16px;
    line-height: 1.15;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(51, 51, 51, .25);
    position: absolute;
    content: attr(overdraft);
}

.sidebar-filter__row-inner>div:not(:first-child) {
    margin-left: -18px;
}

.sidebar-filter__row-item {
    --s: 36px;
    width: var(--s);
    height: var(--s);
}

.sidebar-filter__row-item .user_avatar-box {
    border: 2px solid #fff;
}

.sidebar-filter__row-item._overdraft {
    display: none;
}

.sidebar-filter__row-button {
    --s: 36px;
    width: var(--s);
    height: var(--s);
    font-size: 26px;
    line-height: 1;
    border-radius: 50%;
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, 0.5);
    z-index: 2;
    cursor: pointer;
}

.sidebar-item {
    position: relative;
    z-index: 2;
}

.sidebar-item:not(:last-child) {
    margin-bottom: 24px;
}

.sidebar-item__inner {
    padding: 11px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sidebar-item__inner._opacity {
    opacity: .5;
}

.sidebar-item__inner.active .sidebar-item__icon {
    transform: rotate(90deg);
}

.sidebar-item__inner._rename {
    cursor: auto;
}

.sidebar-item__inner._rename .sidebar-item__name {
    -webkit-line-clamp: unset;
}

.sidebar-item__inner[data-type=course]+.sidebar-item__hidden .sidebar-item__hidden-inner,
.sidebar-item__inner[data-type=course]+.sidebar-item__hidden .sidebar-item:not(:last-child) {
    margin-bottom: 5px;
}

.sidebar-item__inner[data-type=section] {
    padding: 0;
    font-size: 16px;
    line-height: 1.15;
}

.sidebar-item__inner[data-type=section]._active,
.sidebar-item__inner[data-type=section]:hover {
    background-color: transparent;
}

.sidebar-item__inner[data-type=section]+.sidebar-item__hidden,
.sidebar-item__inner[data-type=program]+.sidebar-item__hidden {
    padding-top: 24px;
}

.sidebar-item__inner[data-type=course]+.sidebar-item__hidden {
    position: relative;
}

.sidebar-item__inner[data-type=course]+.sidebar-item__hidden .sidebar-item__inner {
    padding-left: 32px;
}

.sidebar-item__inner[data-type=course]+.sidebar-item__hidden .sidebar-item:not(:last-child) {
    margin-bottom: 5px;
}

.sidebar-item__inner[data-type=course]+.sidebar-item__hidden .sidebar-item__inner._active {
    background-color: var(--hover);
}

.sidebar-item__inner._readonly .sidebar-item__name,
.sidebar-item__inner[data-access="read"] .sidebar-item__name {
    color: rgba(51, 51, 51, 0.5);
}

.sidebar-item__inner[data-type=create] {
    opacity: .5;
    transition: all .2s;
}

.sidebar-item__icon {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    transition: all .2s;
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center center;*/
}

.sidebar-item__inner[data-type=program] .sidebar-item__icon {
    height: calc(var(--s) / 27 * 23);
    background-image: url("/img/common/folder-closed.svg");
}

.sidebar-item__inner[data-type=course] .sidebar-item__icon {
    background-color: var(--text);
    -webkit-mask-image: url("/img/xpl/section.svg");
    mask-image: url("/img/xpl/section.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.sidebar-item__inner[data-type=course]+.sidebar-item__hidden .sidebar-item__icon span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: var(--text);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.sidebar-item__inner[data-type=test] .sidebar-item__icon span {
    -webkit-mask-image: url("/img/xpl/editor-lesson-test.svg?1");
    mask-image: url("/img/xpl/editor-lesson-test.svg?1");
}

.sidebar-item__inner[data-type=task] .sidebar-item__icon span {
    -webkit-mask-image: url("/img/xpl/editor-lesson-task.svg?1");
    mask-image: url("/img/xpl/editor-lesson-task.svg?1");
}

.sidebar-item__inner[data-type=theory] .sidebar-item__icon span {
    -webkit-mask-image: url("/img/xpl/editor-lesson-theory.svg?1");
    mask-image: url("/img/xpl/editor-lesson-theory.svg?1");
}

.sidebar-item__inner[data-type=create] .sidebar-item__icon span {
    -webkit-mask-image: url("/img/xpl/editor-lesson-add.svg?1");
    mask-image: url("/img/xpl/editor-lesson-add.svg?1");
}

.sidebar-item__inner[data-type=unknown] .sidebar-item__icon span {
    -webkit-mask-image: url("/img/xpl/lesson-unknown.svg");
    mask-image: url("/img/xpl/lesson-unknown.svg");
}

.sidebar-item__name {
    font-size: 18px;
    line-height: 1.15;
    outline: none;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.sidebar-item__content {
    font-size: 12px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.sidebar-item__hidden {
    padding-top: 5px;
    display: none;
}

.context {
    min-width: 240px;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid #EAEAEA;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    position: fixed;
    z-index: 150;
}

.context._active {
    opacity: 1;
    visibility: visible;
}

.context__item {
    height: 35px;
    margin: 0 -12px;
    padding: 0 12px;
    font-size: 16px;
    line-height: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.context__item-paste {
    opacity: 0.5;
    cursor: auto;
}

.context__item-paste._active {
    opacity: 1;
    cursor: pointer;
}

.context__item-remove {
    color: #E54047;
}

.student_aside {
    top: 104px;
    height: calc(100vh - 122px);
    padding: 0 12px 18px;
    border-radius: 10px;
    background-color: var(--mainBg);
    position: sticky;
    overflow-y: auto;
    scrollbar-width: none;
}

.student_aside::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.student_aside__header {
    padding: 24px 12px;
    top: 0;
    background-color: var(--mainBg);
    position: sticky;
    z-index: 5;
}

.student_aside__header-title {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.15;
}

.student_aside__progress {
    margin-bottom: 14px;
}

.student_aside__progress-header {
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 1.15;
    opacity: .5;
    display: flex;
    justify-content: space-between;
}

.student_aside__progress-line {
    height: 10px;
    border-radius: 10px;
    background-color: #DFE7F7;
    position: relative;
}

body._dark .student_aside__progress-line {
    background-color: var(--svg);
}

.student_aside__progress-line div {
    height: 10px;
    top: 0;
    left: 0;
    border-radius: 10px;
    background-color: #97B8FF;
    position: absolute;
}

body._dark .student_aside__progress-line div {
    background-color: var(--accent);
}

.student_aside__backwards {
    font-size: 18px;
    line-height: 1;
    color: var(--text);
    opacity: .5;
    transition: all 0.2s;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.student_aside__backwards-icon,
.lesson-mob__backwards-icon {
    margin-right: 12px;
    flex-shrink: 0;
    transform: rotate(180deg);
}

.student_aside__backwards-icon span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: var(--text);
    transition: all 0.2s;
    -webkit-mask-image: url("/img/xpl/section.svg");
    mask-image: url("/img/xpl/section.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.lesson-mob__backwards-icon span {
    --s: 18px;
    width: var(--s);
    height: var(--s);
    background-color: rgba(51, 51, 51, .5);
    transition: all 0.2s;
    -webkit-mask-image: url("/img/editor/icon-angle.svg");
    mask-image: url("/img/editor/icon-angle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_aside__info,
.student_aside__menu {
    display: none;
}

.student_aside__modules>*:not(:last-child) {
    margin-bottom: 20px;
}

.student_aside__navitem {
    padding: 11px 12px;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: all 0.2s ease 0s;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.student_aside__courses-item>.student_aside__navitem {
    padding-left: 48px;
}

.student_aside__courses-item>.student_aside__navitem._active::before {
    transform: translateY(-50%) rotate(90deg);
}

.student_aside__courses-item>.student_aside__navitem::before {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s;
    background-color: var(--text);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/xpl/section.svg");
    mask-image: url("/img/xpl/section.svg");
    position: absolute;
    content: '';
}

.student_aside__lesson {
    text-decoration: none;
}

.student_aside__lesson-item {
    border-radius: 10px;
    opacity: .5;
    text-decoration: none;
    position: relative;
}

.student_aside__lesson-item:not(:last-child) {
    margin-bottom: 5px;
}

.student_aside__lesson-item._active {
    background-color: var(--hover);
}

.student_aside__lesson-item[data-status="current"],
.student_aside__lesson-item[data-status="completed"],
.student_aside__lesson-item._bd {
    opacity: 1;
}

.student_aside__lesson-item[data-type=theory] .student_aside-lesson__icon span {
    -webkit-mask-image: url("/img/xpl/editor-lesson-theory.svg");
    mask-image: url("/img/xpl/editor-lesson-theory.svg");
}

.student_aside__lesson-item[data-type=test] .student_aside-lesson__icon span {
    -webkit-mask-image: url("/img/xpl/editor-lesson-test.svg");
    mask-image: url("/img/xpl/editor-lesson-test.svg");
}

.student_aside__lesson-item[data-type=task] .student_aside-lesson__icon span {
    -webkit-mask-image: url("/img/xpl/editor-lesson-task.svg");
    mask-image: url("/img/xpl/editor-lesson-task.svg");
}

.student_aside__lesson-item[data-type=unknown] .student_aside-lesson__icon span {
    -webkit-mask-image: url("/img/xpl/lesson-unknown.svg");
    mask-image: url("/img/xpl/lesson-unknown.svg");
}

.student_aside__lesson-item._loading .student_aside-lesson__icon span {
    -webkit-mask-image: url("/img/common/audio-loader.svg");
    mask-image: url("/img/common/audio-loader.svg");
}

.student_aside__hidden {
    padding-top: 5px;
    display: none;
}

.student_aside-lesson {
    padding: 11px 12px 11px 12px;
    font-size: 18px;
    line-height: 115%;
    border-radius: 10px;
    color: var(--text);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.student_aside-lesson__icon {
    margin-right: 12px;
    flex-shrink: 0;
}

.student_aside-lesson__icon span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: var(--text);
    -webkit-mask-size: var(--s);
}

.student_aside-lesson__text {
    margin-right: auto;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.logo {
    margin-bottom: 110px;
    font-size: 30px;
    line-height: 36px;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.logo__img {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-right: 25px;
    background-image: url("/img/common/logo.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.logo__text {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.breadcrumbs {
    display: none;
}

.popup-delete__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: auto;
    scrollbar-width: none;
}

.popup-delete__img {
    --s: 205px;

    flex-shrink: 0;
    width: var(--s);
    height: calc(var(--s) / 205 * 220);
    margin-bottom: 44px;
    object-fit: cover;
}

.popup-delete__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
}

.popup-delete__text {
    margin-bottom: 36px;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
}

.popup-delete__text-name {
    font-weight: 600;
}

.popup-delete__controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-delete__button {
    width: 176px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, 0.5);
    cursor: pointer;
}

.popup-delete__button:not(:last-child) {
    margin-right: 22px;
}

.popup-delete__confirm {
    background-color: #295CC9;
    color: #fff;
}

.user-delete__inner,
.user-invite__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: auto;
    scrollbar-width: none;
}

.user-delete__img,
.user-invite__img {
    --s: 248px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-bottom: 44px;
    object-fit: cover;
}

.user-delete__title,
.user-invite__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
}

.user-delete__text,
.user-invite__text {
    margin-bottom: 36px;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
}

.user-delete__text-name,
.user-invite__text-name {
    font-weight: 600;
}

.user-delete__controls,
.user-invite__controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-delete__button,
.user-invite__button {
    width: 176px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, 0.5);
    cursor: pointer;
}

.user-delete__button:not(:last-child),
.user-invite__button:not(:last-child) {
    margin-right: 22px;
}

.user-delete__confirm,
.user-invite__confirm {
    background-color: #295CC9;
    color: #fff;
}

.calendar {
    padding: 16px;
    font-size: 16px;
    line-height: 1;
    top: 0;
    right: 0;
    border-radius: 10px;
    color: #333;
    background-color: #fff;
    position: absolute;
    z-index: 20;
    display: none;
    flex-direction: column;
}

.calendar._active {
    display: block;
}

.calendar__title {
    margin-bottom: 44px;
    font-weight: 600;
    font-size: 25px;
    line-height: 1;
}

.calendar__inner {
    max-width: calc(100vw - 130px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    display: flex;
    justify-content: space-between;
}

.calendar__inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.calendar__button {
    width: 200px;
    height: 50px;
    font-size: 18px;
    line-height: 1;
    border-radius: 10px;
    background-color: #295CC9;
    color: #fff;
    cursor: pointer;
    align-self: flex-end;
}

.calendar__month {
    flex: 0 0 260px;
}

.calendar__month+.calendar__month {
    margin-left: 50px;
}

.calendar__month-name {
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 1;
    text-align: center;
}

.calendar__month-weekdays {
    margin-bottom: 27px;
    display: flex;
}

.calendar__month-weekdays li {
    flex: 0 0 14.2857142857%;
    text-align: center;
}

.calendar__month-days {
    display: flex;
    flex-wrap: wrap;
}

.calendar__month-days li {
    margin: 3px 0;
    flex: 0 0 14.2857142857%;
    cursor: pointer;
}

.calendar__month-days li._today {
    font-weight: 700;
}

.calendar__month-days li._active span {
    color: #fff;
    background-color: #295CC9;
}

.calendar__month-days li._active+._period {
    border-radius: 20px 0 0 20px;
}

.calendar__month-days li._active+._period._last-day,
.calendar__month-days li._active+._period._last-period,
.calendar__month-days li._active+._period._sunday {
    border-radius: 20px;
}

.calendar__month-days li._period {
    background-color: #EEEFF1;
}

.calendar__month-days li._period._last-day,
.calendar__month-days li._period._sunday,
.calendar__month-days li._period._last-period {
    border-radius: 0 20px 20px 0;
}

.calendar__month-days li._period._first-day,
.calendar__month-days li._period._monday {
    border-radius: 20px 0 0 20px;
}

.calendar__month-days li._period._first-day._last-period,
.calendar__month-days li._period._monday._last-period,
.calendar__month-days li._period._monday._last-day {
    border-radius: 20px;
}

.calendar__month-days li span {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    transition: all 0.3s;
}

.calendar__weekend {
    color: rgba(51, 51, 51, 0.5);
}

.default-popup,
.deep-popup {
    width: 75%;
    padding: 32px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    border-radius: 10px;
    background-color: var(--mainBg);
    transform: translateX(200%);
    transition: all 0.2s;
    position: absolute;
}

.default-popup._loading .loader,
.deep-popup._loading .loader,
.default-popup._loading .xpl-loader__wrapper,
.mini-popup__wrapper._active,
.default-popup__wrapper._active,
.deep-popup__wrapper._active,
.mobile-popup__wrapper._active {
    opacity: 1;
    visibility: visible;
}

.default-popup .xpl-loader__wrapper {
    border-radius: 10px;
    background: #FFFFFF;
}

.default-popup._post-load .loader,
.deep-popup._post-load .loader {
    background-color: rgba(255, 255, 255, .8);
    opacity: 1;
    visibility: visible;
}

.default-popup._active,
.deep-popup._active {
    transform: translate(0);
}

.default-popup._inactive {
    transform: scale(0.95) translateX(-60px);
}

.mini-popup__wrapper,
.default-popup__wrapper,
.deep-popup__wrapper,
.mobile-popup__wrapper {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(51, 51, 51, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    position: fixed;
    z-index: 149;
}

.deep-popup__wrapper {
    z-index: 200;
}

.mini-popup__wrapper {
    z-index: 220;
}

.mini-popup {
    max-width: 730px;
    height: max-content;
    width: 100%;
    padding: 80px 44px 60px;
    border-radius: 20px;
    background-color: #fff;
    transition: all 0.2s;
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

.mini-popup._active {
    opacity: 1;
    visibility: visible;
}

.mini-popup__inner {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.mini-popup__img {
    --s: 205px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 36px;
}

.mini-popup__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
}

.mini-popup__text {
    margin-bottom: 50px;
    font-size: 18px;
    line-height: 1.15;
}

.mini-popup__text span {
    font-weight: 500;
}

.mini-popup__buttons {
    display: flex;
    justify-content: center;
}

.mini-popup__button {
    width: 175px;
    height: 50px;
    font-size: 16px;
    line-height: 19px;
    border-radius: 10px;
    cursor: pointer;
}

.mini-popup__button:not(:last-child) {
    margin-right: 10px;
}

.mini-popup__button-cancel {
    background-color: #f7f8fa;
    color: rgba(51, 51, 51, 0.5);
}

.mini-popup__button-confirm {
    background-color: #295CC9;
    color: #fff;
}

.mobile-popup__wraper,
.mobile-popup {
    display: none;
}

.item_limit__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item_limit__text {
    margin-bottom: 12px;
}

.item_limit__subtext {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

/* OLD CROPPER */
.popup-crop._profile .popup-crop__img .cropper-crop-box,
.popup-crop._profile .cropper-view-box {
    border-radius: 50%;
}

.popup-crop._profile .popup-crop__img .cropper-view-box {
    box-shadow: 0 0 0 1px #39f;
}

.popup-crop._profile .popup-crop__preview {
    height: var(--s) !important;
    border-radius: 50%;
}

.popup-crop__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.popup-crop__title {
    margin-bottom: 32px;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
}

.popup-crop__row {
    display: flex;
}

.popup-crop__img {
    max-height: calc(100vh - 280px);
    max-width: calc(100vw - 900px);
    margin-right: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex: 1;
    position: relative;
}

.popup-crop__img img {
    width: 100%;
    height: 100%;
}

.popup-crop__preview {
    --s: 300px;
    width: var(--s) !important;
    height: calc(var(--s) / 250 * 200) !important;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #f7f8fa;
    overflow: hidden;
}

.popup-crop__preview img {
    width: 100%;
    height: 100%;
}

.popup-crop__button {
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
}

.popup-crop__new {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    background-color: #f7f8fa;
    color: rgba(51, 51, 51, 0.5);
    position: relative;
}

.popup-crop__new input {
    width: 100%;
    height: 100%;
    font-size: 0;
    left: 0;
    top: 0;
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

.popup-crop__buttons {
    display: flex;
    justify-content: space-between;
}

.popup-crop__buttons .popup-crop__button {
    width: 176px;
}

.popup-crop__cancel {
    background-color: #f7f8fa;
    color: rgba(51, 51, 51, 0.5);
}

.popup-crop__confirm {
    background-color: #295CC9;
    color: #fff;
}

.crop-editor__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.crop-editor__top {
    flex: 1;
}

.crop-editor__title {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
}

.crop-editor__subtitle {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.crop-editor__row {
    display: grid;
    grid-template-columns: auto 280px;
    grid-gap: 50px;
}

.crop-editor__img {
    max-height: calc(100vh - 300px);
    border-radius: 10px;
    overflow: hidden;
}

.crop-editor__img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: contain;
}

.crop-editor__preview-wrapper {
    display: flex;
    justify-content: center;
}

.crop-editor__preview {
    --s: 280px;
    width: var(--s);
    height: var(--s);
    border-radius: 5px;
    overflow: hidden;
}

.crop-editor__new {
    margin-top: 20px;
    color: rgba(51, 51, 51, .5);
    display: flex;
    align-items: center;
    position: relative;
}

.crop-editor__new input {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-size: 0;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    z-index: 2;
}

.crop-editor__new span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    margin-right: 8px;
    background-color: rgba(51, 51, 51, .5);
    -webkit-mask-image: url('/img/editor/icon-image-upload.svg');
    mask-image: url('/img/editor/icon-image-upload.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.crop-editor__buttons {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
}

.crop-editor__button {
    width: 176px;
    height: 50px;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    border-radius: 10px;
    cursor: pointer;
}

.crop-editor__cancel {
    background-color: #f7f8fa;
    color: rgba(51, 51, 51, .5);
}

.crop-editor__confirm {
    background-color: #295CC9;
    color: #fff;
}

.crop-error {
    padding: 22px 44px 60px;
}

.crop-error__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.crop-error__img {
    margin-bottom: 20px;
}

.crop-error__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
}

.crop-error__text {
    margin-bottom: 3px;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
}

.crop-error__ext {
    margin-bottom: 22px;
    font-size: 18px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.crop-error__btn {
    width: 175px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    border: none;
    background-color: #295CC9;
    color: #fff;
    cursor: pointer;
}
/* OLD CROPPER */

.users {
    padding-left: 90px;
}

.users__inner {
    /*height: calc(100vh - 124px);*/
    /*padding: 0 24px 18px;*/
    padding-bottom: 24px;
    border-radius: 10px;
    /*background-color: #fff;*/
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
    /*scrollbar-width: none;*/
}

/*.users__inner::-webkit-scrollbar {*/
/*    width: 0;*/
/*    height: 0;*/
/*}*/

.users__header {
    position: sticky;
    /*margin: 0 -24px 30px;*/
    padding: 22px 30px 22px 23px;
    margin-bottom: 30px;
    top: 0;
    background-color: var(--mainBg);
    border-radius: 10px;
    z-index: 4;
}

.users__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.users__header-actions {
    display: flex;
    align-items: center;
}

.users__header-action {
    min-width: 170px;
    height: 40px;
    padding: 0 30px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    border-radius: 7px;
    background: rgba(41, 92, 201, 0.15);
    color: #295CC9;
    cursor: pointer;
}

body._dark .users__header-action {
    background-color: var(--svg);
    color: var(--text);
}

.users__header-action:not(:last-child) {
    margin-right: 10px;
}

.users__search {
    flex: 1;
    display: flex;
    align-items: center;
}

.users__search-icon {
    --s: 20px;

    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/check/search.svg");
    mask-image: url("/img/check/search.svg");
    transform: rotateY(180deg);
}

.users__search-input {
    width: 100%;
    padding: 0 18px;
    background-color: transparent;
    border: none;
}

/*.users__search-input::-webkit-input-placeholder {*/
/*    color: rgba(51, 51, 51, 0.5);*/
/*    opacity: 1;*/
/*}*/

/*.users__search-input::-moz-placeholder {*/
/*    color: rgba(51, 51, 51, 0.5);*/
/*    opacity: 1;*/
/*}*/

/*.users__search-input:-ms-input-placeholder {*/
/*    color: rgba(51, 51, 51, 0.5);*/
/*    opacity: 1;*/
/*}*/

/*.users__search-input::-ms-input-placeholder {*/
/*    color: rgba(51, 51, 51, 0.5);*/
/*    opacity: 1;*/
/*}*/

/*.users__search-input::placeholder {*/
/*    color: rgba(51, 51, 51, 0.5);*/
/*    opacity: 1;*/
/*}*/

.users-department._hide {
    display: none;
}

.users-department:not(:last-child) {
    margin-bottom: 30px;
}

.users-department._empty .users-department__header-remove {
    color: #E54047;
    background-color: rgba(229, 64, 71, 0.15);
    cursor: pointer;
}

.users-department._empty .users-department__header-remove::after {
    display: none;
}

.users-department__header {
    padding-left: 30px;
    margin-bottom: 30px;
}

.users-department__header-inner {
    display: flex;
    align-items: center;
}

.users-department__header-settings {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 18px;
    background-color: var(--text);
    -webkit-mask-image: url("/img/common/dep-sett.svg");
    mask-image: url("/img/common/dep-sett.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    cursor: pointer;
}

.users-department__header-name {
    font-size: 18px;
    line-height: 1.15;
}

.users-department__body {
    padding: 30px 13px;
    background-color: var(--mainBg);
    border-radius: 10px;
}

.users-department__button {
    display: flex;
    align-items: center;
    margin-left: 17px;
    font-size: 18px;
    line-height: 1.15;
    background-color: transparent;
    color: var(--textOpacity);
    border: 0;
}

.users-department__button._hide {
    display: none;
}

.users-department__box:not(._hide) + .users-department__button {
    margin-top: 30px;
}

.users-department__button > span {
    --s: 24px;

    margin-right: 18px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/common/angle-black.svg");
    mask-image: url("/img/common/angle-black.svg");
    transform: rotateZ(90deg);
    transition: all .2s;
}

.users-department__button._active > span {
    transform: rotateZ(90deg) rotateY(180deg);
}

.users-department__box {
    display: none;
    padding-top: 20px;
}

.users-department__box._active {
    display: block;
}

.users-department__box:not(:last-child) {
    margin-bottom: 34px;
}

.user {
    /*margin: -16px -12px;*/
    /*margin: 0 -17px;*/
    /*padding: 16px 12px;*/
    padding: 9px 10px;
    border-radius: 10px;
    transition: all 0.2s;
}

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

.user._opacity .user__info,
.user._blocked .user__info {
    opacity: .5;
}

.user._hide {
    display: none;
}

.user._blocked .user_avatar-box {
    position: relative;
    font-size: 0;
}

.user._blocked .user_avatar-box::before {
    --s: 18px;
    width: var(--s);
    height: calc(var(--s) / 16 * 17);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    -webkit-mask-image: url('/img/xpl/shop-folder-lock.svg');
    mask-image: url('/img/xpl/shop-folder-lock.svg');
    -webkit-mask-size: var(--s) calc(var(--s) / 16 * 17);
    mask-size: var(--s) calc(var(--s) / 16 * 17);
    position: absolute;
    content: '';
}

.user._admin .user-access__item {
    background-color: #EEEFF1 !important;
    color: rgba(51, 51, 51, 0.75) !important;
    cursor: not-allowed;
}

.user__inner {
    display: grid;
    grid-template-columns: auto 800px;
    align-items: center;
    grid-gap: 20px;
}

.user__info {
    --s: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.user__info .user_avatar-box {
    margin-right: 10px;
}

.user__info-name {
    margin-bottom: 2px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
}

.user__info-mail,
.user__info-position {
    font-size: 14px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.user-access__row {
    font-size: 14px;
    line-height: 1.15;
    display: grid;
    grid-template-columns: 150px auto;
    grid-gap: 20px;
}

.user-access__row:not(:last-child) {
    margin-bottom: 15px;
}

.user-access__row._roles .user-access__item,
.user-access__row._sections .user-access__add {
    display: none;
}

.user-access__row._roles .user-access__item._active {
    display: block;
}

.user-access__name {
    height: 24px;
    display: flex;
    align-items: center;
    color: rgba(51, 51, 51, 0.75);
}

body._dark .user-access__name {
    color: var(--textOpacity);
}

.user-access__body {
    margin: -3px -10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.user-access__item {
    margin: 3px 10px;
    padding: 4px 20px;
    border-radius: 5px;
    background-color: #4894F5;
    color: #fff;
    cursor: pointer;
}

.user-access__access {
    margin: 3px 10px;
    padding: 4px 20px;
    border-radius: 5px;
    background-color: #EEEFF1;
    color: rgba(51, 51, 51, 0.75);
    cursor: pointer;
    white-space: nowrap;
}

.user-access__item._student {
    background-color: #4894F5;
    cursor: not-allowed;
}

.user-access__item._hr {
    background-color: #032886;
}

.user-access__item._editor {
    background-color: #0137B0;
}

.user-access__item._curator {
    background-color: #295CC9;
}

.user-access__add {
    position: relative;
}

.user-access__add-button {
    --s: 24px;

    position: relative;
    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin: 3px 5px;
    background-color: #EEEFF1;
    border-radius: 50%;
    cursor: pointer;
}

body._dark .user-access__add-button {
    background-color: var(--svg);
}

.user-access__add-button::before {
    --s: 16px;

    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    left: 50%;
    top: 50%;
    background-color: rgba(51, 51, 51, .75);
    -webkit-mask-image: url("/img/common/icon-plus.svg");
    mask-image: url("/img/common/icon-plus.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transform: translate(-50%, -50%);
}

body._dark .user-access__add-button::before {
    background-color: var(--text);
}

.user-access__roles {
    width: 240px;
    padding: 14px;
    left: 0;
    top: 0;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(238, 239, 241, 0.67);
    background-color: #fff;
    z-index: 2;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    cursor: auto;
}

.user-access__roles._active {
    opacity: 1;
    visibility: visible;
}

.user-access__roles-title {
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.user-access__roles-body {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

.user-access__roles-item {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.user-access__roles-item:not(:last-child) {
    margin-bottom: 12px;
}

.user-access__roles-item div {
    --s: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #E0E0E0;
}

.user-access__roles-item._active div {
    border-color: #295CC9;
    background-color: #295CC9;
}

.user-access__roles-item div span {
    --s: 14px;

    width: var(--s);
    height: var(--s);
    background-color: #FFFFFF;
    -webkit-mask-image: url("/img/common/checkmark.svg");
    mask-image: url("/img/common/checkmark.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.user-access__roles-item p {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.75);
}

.user-access__roles-button {
    height: 42px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    color: #fff;
    background-color: #295CC9;
    cursor: pointer;
}

.add_user__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.add_user__header {
    margin-bottom: 44px;
}

.add_user__header-title {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
}

.add_user__header-text {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.add_user__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.add_user__body._loading .loader {
    opacity: 1;
    visibility: visible;
}

.add_user__body-inner {
    height: calc(100vh - 280px);
    overflow-y: auto;
    scrollbar-width: none;
    position: relative;
}

.add_user__body-inner .loader {
    background-color: rgba(255, 255, 255, 0.5);
}

.add_user__body-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.add_user__body-client {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 60px;
}

.add_user__group {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.15;
}

.add_user__icon {
    --s: 180px;
    width: var(--s);
    height: var(--s);
    margin-right: 8px;
    background-image: url("/img/common/icon-client.svg");
    background-size: var(--s);
    background-repeat: no-repeat;
    background-position: center;
}

.add_user__grid._removable .add_user__remove {
    display: flex;
}

.add_user__grid:not(:last-child) {
    margin-bottom: 32px;
}

.add_user__grid-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    align-items: flex-start;
}

.add_user__field._error .add_user__field-name {
    color: rgba(229, 64, 71, 0.75);
}

.add_user__field._error .add_user__field-input,
.add_user__field._error .add_user-select__header-input,
.add_user__field._error .add_user-select__body {
    color: rgba(229, 64, 71, 0.75);
    border-color: rgba(229, 64, 71, 0.25);
}

.add_user__field-name {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.add_user__field-input {
    height: 58px;
    width: 100%;
    padding: 0 20px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    border: 1px solid #EAEAEA;
}

.add_user__remove {
    margin-top: 20px;
    width: fit-content;
    color: rgba(229, 64, 71, 0.5);
    font-size: 16px;
    display: none;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
    transition: all 0.2s;
    opacity: 0;
    visibility: hidden;
}

.add_user__remove span {
    --s: 12px;
    width: var(--s);
    height: var(--s);
    margin-right: 8px;
    background-color: rgba(229, 64, 71, 0.5);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/users/close-red.svg");
    mask-image: url("/img/users/close-red.svg");
    transition: all .2s ease;
}

.add_user__another {
    width: 210px;
    height: 50px;
    margin-top: 36px;
    background-image: url("/img/users/add-another-user.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.add_user__another._text {
    width: auto;
    height: auto;
    font-size: 16px;
    line-height: 1.15;
    background-image: none;
    cursor: auto;
}

.add_user__another._text a {
    color: #295CC9;
    text-decoration: none;
}

.add_user__buttons {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.add_user__buttons-error {
    min-height: 50px;
    margin-right: 10px;
    padding: 6px 14px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 8px;
    background: rgba(229, 64, 71, 0.15);
    color: #E54047;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    flex: 1;
    display: flex;
    align-items: center;
}

.add_user__buttons-error._active {
    opacity: 1;
    visibility: visible;
}

.add_user__buttons-error span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 15px;
    background-color: #E54047;
    -webkit-mask-image: url("/img/common/warning-green.svg");
    mask-image: url("/img/common/warning-green.svg");
    -webkit-mask-size: var(--s);
    flex-shrink: 0;
}

.add_user__buttons-inner {
    display: flex;
    flex-shrink: 0;
}

.add_user__button {
    min-width: 175px;
    height: 50px;
    padding: 0 36px;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    border-radius: 10px;
    cursor: pointer;
}

.add_user__button-save {
    margin-right: 10px;
    background-color: #295CC9;
    color: #fff;
}

.add_user__button-close {
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, 0.5);
}

.add_user-select {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.15;
    position: relative;
}

.add_user-select._active .add_user-select__header-input {
    border-radius: 10px 10px 0 0;
}

.add_user-select._active .add_user-select__body {
    display: block;
}

.add_user-select__header-input {
    height: 58px;
    width: 100%;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid #EAEAEA;
}

.add_user-select__header-input[name=dep] {
    cursor: pointer;
}

.add_user-select__body {
    width: 100%;
    max-height: 240px;
    top: 58px;
    border-radius: 0 0 10px 10px;
    border: 1px solid #EAEAEA;
    border-top: none;
    background-color: #fff;
    position: absolute;
    overflow-y: auto;
    scrollbar-width: none;
    display: none;
    z-index: 2;
}

.add_user-select__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.add_user-select__item {
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.add_user-select__item._hide,
.add_user-plug._hr .add_user-plug__button {
    display: none;
}

.add_user-plug__inner {
    height: 100%;
    flex-direction: column;
}

.add_user-plug__img {
    width: calc((390 / 1215) * 100%);
    margin-bottom: 28px;
}

.add_user-plug__title {
    margin-bottom: 17px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
    text-align: center;
}

.add_user-plug__text {
    max-width: 550px;
    font-size: 16px;
    line-height: 1.15;
    text-align: center;
}

.add_user-plug__button {
    width: 260px;
    height: 50px;
    margin-top: 28px;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    border-radius: 10px;
    background-color: #295CC9;
    color: #fff;
    text-decoration: none;
}

.dep_sett__inner {
    height: 100%;
    display: grid;
    grid-template-columns: 306px auto;
    grid-gap: 78px;
}

.dep_sett__main {
    height: calc(100vh - 104px);
    overflow: auto;
    scrollbar-width: none;
}

.dep_sett__main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dep_sett__name {
    margin-bottom: 20px;
}

.dep_sett__name-text {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.dep_sett__name-input {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid #EAEAEA;
}

.deps-list {
    margin: -32px;
    padding: 32px 16px;
    background-color: #F7F8FA;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.deps-list__main {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.deps-list__title {
    margin: 0 16px 32px;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
}

.deps-list__inner {
    max-height: calc(100vh - 239px);
    overflow-y: auto;
    scrollbar-width: none;
}

.deps-list__inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.deps-list__item {
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
}

.deps-list__item._active {
    background: rgba(41, 92, 201, 0.03);
}

.deps-list__item>p:nth-child(1) {
    margin-bottom: 2px;
    font-size: 18px;
    line-height: 1.15;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
}

.deps-list__item>p:nth-child(2) {
    font-size: 14px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.deps-list__button {
    height: 50px;
    margin: 24px 16px 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    border-radius: 10px;
    background-color: #295CC9;
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
}

.dep_sett-users__header {
    margin-bottom: 16px;
}

.dep_sett-users__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dep_sett-users__header-text {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.dep_sett-users__header-button {
    height: 40px;
    padding: 0 30px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    border-radius: 7px;
    background: rgba(41, 92, 201, 0.15);
    color: #295CC9;
    cursor: pointer;
}

.dep_sett-users__body {
    margin-bottom: 25px;
}

.dep_sett-users__body-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 15px;
}

.dep_sett-users__item-add {
    min-height: 140px;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.dep_sett-users__item-img {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 4px;
    background-image: url("/img/users/dep_sett-add-user.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.dep_sett-users__item-text {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
    text-align: center;
}

.dep_sett-users__footer-title {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.dep_sett-users__footer-text {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.15;
}

.dep_sett-users__footer-button {
    width: 170px;
    height: 40px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    border-radius: 7px;
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, 0.75);
    cursor: not-allowed;
}

.dep_sett-users__footer-button._empty {
    background: rgba(229, 64, 71, 0.15);
    color: #E54047;
    cursor: pointer;
}

.dep_sett-user {
    cursor: pointer;
}

.dep_sett-user__inner {
    min-height: 140px;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dep_sett-user__img {
    --s: 50px;

    position: relative;
    width: var(--s);
    height: var(--s);
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    border-radius: 50%;
    text-transform: uppercase;
}

.dep_sett-user__name {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    text-align: center;
}

.dep_sett-user__position {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.15;
}

.dep_sett-user__status {
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    color: #54B268;
    display: none;
}

.invite_user__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.invite_user__header {
    margin-bottom: 32px;
}

.invite_user__title {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
}

.invite_user__subtitle {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.invite_user__body {
    max-height: calc(100vh - 275px);
    overflow-y: auto;
    scrollbar-width: none;
}

.invite_user__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.invite_user__box:not(:last-child) {
    margin-bottom: 0;
}

.invite_user__box-button {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    background-color: transparent;
    border: 0;
}

.invite_user__box-button > span:nth-child(1) {
    --s: 24px;

    margin-right: 10px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/common/angle-black.svg");
    mask-image: url("/img/common/angle-black.svg");
    transform: rotateZ(90deg);
    transition: all .2s;
}

.invite_user__box-button._active > span:nth-child(1) {
    transform: rotateZ(90deg) rotateY(180deg);
}

.invite_user__box-title {
    font-size: 18px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.invite_user__box-inner {
    display: none;
}

.invite_user__box._active .invite_user__box-inner {
    display: block;
}

.invite_user__box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 30px 50px;
}

.invite_user__footer-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.invite_user__footer-title {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.invite_user__footer-row {
    height: 40px;
    margin-left: -3px;
    display: flex;
    align-items: center;
}

.invite_user__footer-user {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    border-radius: 50%;
    border: 3px solid #fff;
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-transform: uppercase;
}

.invite_user__footer-user:not(:first-child) {
    margin-left: calc(var(--s) / -2);
}

.invite_user__footer-user._hidden {
    display: none;
}

.invite_user__plus {
    margin-left: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: rgba(51, 51, 51, 0.5);
    display: flex;
    align-items: center;
}

.invite_user__footer-buttons {
    display: flex;
}

.invite_user__button {
    height: 50px;
    padding: 0 50px;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    border-radius: 10px;
    cursor: pointer;
}

.invite_user__button:not(:last-child) {
    margin-right: 10px;
}

.invite_user__button-confirm {
    background-color: #295CC9;
    color: #fff;
}

.invite_user__button-cancel {
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, 0.5);
}

.invite_user-item {
    cursor: pointer;
}

.invite_user-item input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.invite_user-item input:checked+.invite_user-item__inner .invite_user-item__checkbox {
    border-color: #295CC9;
    background-color: #295CC9;
}

.invite_user-item__inner {
    min-height: 140px;
    padding-top: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.invite_user-item__checkbox {
    --s: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    border-radius: 5px;
    border: 1px solid #EAEAEA;
    top: 9px;
    left: 0;
    position: absolute;
}

.invite_user-item__checkbox span {
    --s: 16px;

    width: var(--s);
    height: var(--s);
    background-image: url('/img/xpl/checkmark.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.invite_user-item__img {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    border-radius: 50%;
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-transform: uppercase;
}

.invite_user-item__name {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
}

.invite_user-item__pos {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.invite_user-item__status {
    font-size: 12px;
    line-height: 1;
    color: #54B268;
}

.lesson {
    padding-left: 90px;
}

.lesson > .student_aside__header,
.lesson > .lesson-mob__header,
.lesson._r .sidebar__save-wrapper,
.lesson._r .sidebar-item._button {
    display: none;
}

.lesson__success {
    width: 450px;
    padding: 12px 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    right: 15px;
    top: 102px;
    transform: translateX(200%);
    transition: all 0.5s;
    border-radius: 10px;
    background-color: #E5F3E8;
    color: #54B268;
    position: fixed;
    z-index: 220;
}

.lesson__success._active {
    transform: translateX(0);
}

.lesson__success-inner {
    display: flex;
    align-items: center;
}

.lesson__success-icon {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    background-color: #54B268;
    -webkit-mask-image: url("/img/editor/icon-success.svg");
    mask-image: url("/img/editor/icon-success.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.lesson__hint {
    width: 450px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.15;
    right: 15px;
    top: 102px;
    transform: translateX(200%);
    transition: all 0.5s;
    border-radius: 10px;
    background-color: #0B1C35;
    color: #fff;
    position: fixed;
    z-index: 200;
}

.lesson__hint._active {
    transform: translateX(0);
}

.lesson__hint-header {
    margin-bottom: 12px;
}

.lesson__hint-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.lesson__hint-title span {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    background-color: #fff;
    -webkit-mask-image: url("/img/common/warning-green.svg");
    mask-image: url("/img/common/warning-green.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.lesson__inner {
    display: grid;
    grid-template-columns: 340px auto;
    grid-gap: 20px;
    /*opacity: 0;*/
    /*visibility: hidden;*/
    transition: opacity .2s;
}

.lesson__inner._active {
    opacity: 1;
    visibility: visible;
}

.lesson-content-readonly {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 8px 48px;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.15;
    background-color: #FFFFFF;
    color: rgba(51, 51, 51, .5);
    border-radius: 10px;
}

.lesson-content-readonly__icon {
    --s: 20px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 20px;
    background-color: rgba(51, 51, 51, .5);
    -webkit-mask-image: url("/img/xpl/program-locked.svg");
    mask-image: url("/img/xpl/program-locked.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.lesson__hidden-audio {
    width: 1px;
    height: 1px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: -999;
}

.lesson__hidden-wrapper._show {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    position: static;
    z-index: 2;
}

.lesson__start {
    border-radius: 10px;
    background-color: var(--mainBg);
}

.lesson__start-inner {
    height: calc(100vh - 124px);
    padding: 33px 44px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
}

.lesson__start-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.lesson__start-info {
    margin-bottom: 75px;
}

.lesson__start-info--title {
    font-weight: 600;
    font-size: 25px;
    line-height: 115%;
    margin-bottom: 12px;
}

.lesson__start-info--subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 113.5%;
    color: var(--textOpacity);
}

.lesson__start-content {
    margin-bottom: 125px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.lesson__start-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.lesson__start-options--item {
    padding: 24px;
    border-radius: 10px;
    border: none;
    background-color: transparent;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

.lesson__start-options--item-box {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.lesson__start-options--item-icon {
    --s: 38px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background-color: #295CC9;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lesson__start-options--item-icon:not(:last-child) {
    margin-right: 15px;
}

.lesson__start-options--item-icon>span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.lesson__start-options--item-box[data-type=test] .lesson__start-options--item-icon>span {
    background-image: url("/img/lesson/lesson-test.svg");
}

.lesson__start-options--item-box[data-type=task] .lesson__start-options--item-icon>span {
    background-image: url("/img/lesson/lesson-task.svg");
}

.lesson__start-options--item-box[data-type=theory] .lesson__start-options--item-icon>span {
    background-image: url("/img/lesson/lesson-theory.svg");
}

.lesson__start-options--item-img {
    padding: 12px;
    border-radius: 50%;
    background: var(--accent);
}

.lesson__start-options--item-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 115%;
}

.lesson__start-options--item-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 113.5%;
    color: var(--textOpacity);
}

.lesson__start-options--item-text-bold {
    color: rgba(51, 51, 51, 0.75);
}

body._dark .lesson__start-options--item-text-bold {
    color: rgba(255, 255, 255, .75);
}

@keyframes backgroundAnimation {
    0% {
        background-position: 100%;
    }
    100% {
        background-position: -100%;
    }
}

.lcr {
    font-size: 18px;
    line-height: 1.15;
    position: relative;
}

.lcr:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 70%);
    background-size: 200% 100%;
    border-radius: 10px;
    content: '';
    position: absolute;
    z-index: 3;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility .2s ease;
}

.lesson__content._loading .lcr:before {
    visibility: visible;
    opacity: 1;
    animation: backgroundAnimation 2s infinite linear;
}

.lcr[data-type="theory"] .lcr__header {
    margin-bottom: 0;
    padding: 0 24px;
    border-radius: 10px 10px 0 0;
    background-color: var(--mainBg);
}

.lcr[data-type="theory"] .lcr__header-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 44px 0 15px;
    border-radius: 0;
    background-color: transparent;
}

.lcr[data-type="theory"] .lcr__body-inner {
    padding: 24px 24px 44px;
    border-radius: 0 0 10px 10px;
    background-color: var(--mainBg);
}

.lcr[data-type="theory"] .lcr__body-page {
    max-width: 760px;
    margin: 0 auto;
}

.lcr._completed .student_test-question__answer {
    cursor: auto;
}

.lcr[data-type=test] .student-lesson {
    counter-reset: test-count;
}

.lcr[data-type=task] .student-lesson {
    counter-reset: task-count;
}

.lcr__plug {
    min-height: calc(100vh - 122px);
    border-radius: 10px;
    background-color: #fff;
}

.lcr__plug-inner {
    margin-top: -10%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.lcr__plug-img {
    min-width: calc((562 / 1174) * 100%);
}

.lcr__plug-title {
    margin: -20px 0 18px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.15;
}

.lcr__plug-text {
    max-width: 660px;
    font-size: 16px;
    line-height: 1.15;
    text-align: center;
}

.lcr__inner {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.lcr__header {
    margin-bottom: 20px;
}

.lcr__header-inner {
    min-height: 70px;
    padding: 15px 32px;
    border-radius: 10px;
    background-color: var(--mainBg);
    display: flex;
    align-items: center;
}

.lcr__header-title {
    padding-left: 0;
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: flex;
    position: relative;
}

.lcr__header-name {
    min-height: 40px;
    display: flex;
    align-items: center;
    word-break: break-word;
}

.lcr__header-count {
    margin-right: 12px;
    font-weight: 600;
}

.lcr__status {
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 16px 32px;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.5;
    background-color: rgba(41, 92, 201, 0.15);
    border-radius: 10px;
}

.lcr__status[data-status="complete"] {
    background-color: rgba(84, 178, 104, 0.15);
}

.lcr__status[data-status="fail"] {
    background-color: rgba(229, 64, 71, 0.15);
}

body._dark .lcr__status {
    background-color: var(--mainBg);
    color: var(--accent);
}

body._dark .lcr__status[data-status="complete"] {
    color: #54B268;
}

body._dark .lcr__status[data-status="fail"] {
    color: #E54047;
}

.lcr__status-icon {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 20px;
    background-color: #333333;
    -webkit-mask-image: url('/img/editor/icon-status-in-progress.svg');
    mask-image: url('/img/editor/icon-status-in-progress.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .lcr__status-icon {
    background-color: var(--accent);
}

.lcr__status[data-status="complete"] .lcr__status-icon {
    -webkit-mask-image: url('/img/editor/icon-status-completed.svg');
    mask-image: url('/img/editor/icon-status-completed.svg');
}

body._dark .lcr__status[data-status="complete"] .lcr__status-icon {
    background-color: #54B268;
}

.lcr__status[data-status="fail"] .lcr__status-icon {
    -webkit-mask-image: url('/img/editor/icon-status-failed.svg');
    mask-image: url('/img/editor/icon-status-failed.svg');
}

body._dark .lcr__status[data-status="fail"] .lcr__status-icon {
    background-color: #E54047;
}

.lcr__status[data-status="wait"] .lcr__status-icon {
    -webkit-mask-image: url('/img/editor/icon-status-wait.svg');
    mask-image: url('/img/editor/icon-status-wait.svg');
}


.lcr__status-text {
    display: flex;
    flex: 1;
    margin-right: 20px;
}

.lcr__status-count {
    margin-left: auto;
}

.lcr__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    counter-reset: box-count;
}

.lcr__body-inner {
    flex: 1;
}

.lcr__buttons {
    margin-top: 20px;
}

.lcr__buttons-inner {
    display: flex;
    position: relative;
}

.lcr__buttons-loader {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    background-color: var(--mainBg);
    color: var(--accent);
    border-radius: 10px;
    visibility: hidden;
    z-index: 2;
}

body._dark .lcr__buttons-loader {
    color: var(--text);
}

.lcr__buttons._loading .lcr__buttons-loader {
    visibility: visible;
}

.lcr__button {
    width: 100%;
    height: 80px;
    border-radius: 10px;
    background-color: var(--mainBg);
    color: #295CC9;
    flex: 1;
    text-decoration: none;
    cursor: pointer;
}

body._dark .lcr__button {
    color: var(--text);
}

.lcr__button:not(:last-child) {
    margin-right: 20px;
}

.lcr__button .lcr__button-inner {
    opacity: .5;
    transition: all 0.2s;
    position: relative;
}

.lcr__prev .lcr__button-inner {
    padding-left: 32px;
}

.lcr__next {
    background: var(--accent);
    color: #FFFFFF;
    border: none;
}

.lcr__next .lcr__button-inner {
    padding-right: 32px;
    opacity: 1;
}

.lcr__prev .lcr__button-inner::after,
.lcr__next .lcr__button-inner::after {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    top: 50%;
    transform: translateY(-50%);
    background-color: #295CC9;
    -webkit-mask-image: url("/img/common/angle-black.svg");
    mask-image: url("/img/common/angle-black.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    position: absolute;
    content: '';
}

body._dark .lcr__prev .lcr__button-inner::after,
body._dark .lcr__next .lcr__button-inner::after {
    background-color: var(--text);
}

.lcr__prev .lcr__button-inner::after {
    left: 0;
    transform: translateY(-50%) rotateZ(180deg);
}

.lcr__next._clear .lcr__button-inner {
    padding-right: 0;
}

.lcr__next._clear .lcr__button-inner::after {
    display: none;
}

.lcr__next .lcr__button-inner::after {
    right: 0;
    background-color: #FFFFFF;
}

.lcr__next._pending {
    background-image: url('/img/common/task-btn-loader.svg');
    background-size: auto 70%;
    background-repeat: no-repeat;
    background-position: center center;
}

.lcr__next._pending .lcr__button-inner {
    opacity: 0;
}

.lcr__sending {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border-radius: 10px;
    opacity: 0.5;
    transition: all .2s ease;
    position: absolute;
    z-index: 3;
}

@keyframes lcr-blink { 50% { fill: transparent } }

.lcr__buttons-loader span {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    background-color: var(--accent);
    -webkit-mask-image: url("/img/common/icon-dots-loader.svg");
    mask-image: url("/img/common/icon-dots-loader.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

body._dark .lcr__buttons-loader span {
    background-color: var(--text);
}

.lcr__loader {
    color: #295CC9;
}

.lcr__loader-dot {
    animation: 1s lcr-blink infinite;
    fill: #295CC9;
}

.lcr__loader-dot:nth-child(2) {
    animation-delay: 250ms;
}

.lcr__loader-dot:nth-child(3) {
    animation-delay: 500ms;
}

.lce {
    font-size: 18px;
    line-height: 1.5;
}

.lce[data-type="test"] .template-item:not(:last-child),
.lce[data-type="task"] .template-item:not(:last-child) {
    margin-bottom: 20px;
}


.lce[data-type="theory"] {
    height: calc(100vh - 210px);
    border-radius: 10px;
    background-color: var(--mainBg);
    display: flex;
    position: relative;
}

.lce[data-type="theory"] .lce__inner {
    min-height: auto;
    height: calc(100vh - 210px);
    margin-bottom: 0;
    padding: 0 32px;
    flex: 1;
    overflow: auto;
    scrollbar-width: none;
}

.lce[data-type="theory"] .lce__inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.lce-content {
    width: 36px;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px 0 0 10px;
    box-shadow: -5px 4px 19px 0 var(--filterShadow);
    background: var(--mainBg);
    position: absolute;
    overflow: hidden;
    transition: all .2s;
    z-index: 42;
    cursor: pointer;
    scrollbar-width: none;
}

.lce-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.lce-content__arrow {
    width: 36px;
    height: 100%;
    top: 0;
    right: 0;
    border: none;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    cursor: pointer;
}

.lce-content__arrow span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: #999;
    -webkit-mask-image: url("/img/common/angle-black.svg");
    mask-image: url("/img/common/angle-black.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.lce-content._opened {
    width: 340px;
    box-shadow: 5px 4px 19px 0 var(--filterShadow);
    cursor: auto;
}

.lce-content._opened .lce-content__arrow span {
    transform: rotateY(180deg);
}

.lce-content__inner {
    width: 340px;
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.lce-content__header {
    min-height: 40px;
    margin-bottom: 60px;
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.lce-content__body {
    flex-grow: 1;
    overflow: auto;
    scrollbar-width: none;
}

.lce-content__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.lce-content__wrapper {
    padding-left: 20px;
    position: relative;
    transition: all .2s;

}

.lce-content__wrapper._hidden {
    opacity: 0;
    visibility: hidden;
}

.lce-content__wrapper::before {
    height: 100%;
    width: 1px;
    left: 0;
    top: 0;
    background-color: rgba(51, 51, 51, .25);
    position: absolute;
    content: '';
}

.lce-content__glider {
    width: 3px;
    height: 41px;
    left: -1px;
    border-radius: 2px;
    background-color: var(--text);
    transition: all .2s;
    position: absolute;
}

.lce-content__start,
.lce-content__list-item {
    padding: 10px 0;
    font-size: 18px;
    line-height: 1.15;
    color: var(--textOpacity);
    transition: color .2s;
    word-break: break-word;
    cursor: pointer;
}

.lce-content__start._active,
.lce-content__list-item._active {
    color: var(--text);
}

.lce-line {
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: var(--mainBg);
}

.lce-line__inner {
    min-height: 70px;
    padding: 10px 0 10px 24px;
    display: flex;
    align-items: center;
}

.lce-line__text {
    margin-right: 15px;
    font-size: 18px;
    line-height: 1.15;
    opacity: .5;
    flex-shrink: 0;
}

.lce-line__list {
    display: flex;
    align-items: center;
}

.lce-line__list-item:not(:last-child) {
    margin-right: 5px;
}

.lce-line__list-item._hidden {
    display: none;
}

.lce-line__circle {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    font-size: 17px;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid rgba(51, 51, 51, .5);
    color: rgba(51, 51, 51, .5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lce-line__user {
    position: relative;
}

.lce-line__user-img {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    font-size: 17px;
    line-height: 1;
    border-radius: 50%;
    color: #FFFFFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.lce-line__user-img:hover + .lce-line__hint {
    opacity: 1;
    visibility: visible;
}

.lce-line__hint {
    left: 50%;
    bottom: calc(100% + 15px);
    transform: translateX(-50%);
    position: absolute;
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
}

.lce-line__hint::after,
.lce-line__hint-shadow::after {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    border-radius: 2px;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%) rotateZ(45deg);
    background-color: #fff;
    position: absolute;
    content: '';
}

.lce-line__hint-inner {
    padding: 10px 20px;
    font-weight: 500;
    font-size: 16px;
    border-radius: 5px;
    background-color: #fff;
    white-space: nowrap;
}

.lce-line__hint-shadow {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(122, 148, 199, 0.15);
    position: absolute;
    z-index: -1;
}

.lce[data-type="theory"] .lce__header-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 0 15px;
    position: relative;
}

.lce[data-type="theory"] .lce__header-remove {
    margin-top: 0;
    right: 0;
    position: absolute;
}

.lce[data-type="theory"] .lce__header-name {
    max-width: 760px;
    min-height: 40px;
    padding-right: 52px;
    margin: 0 auto;
    align-items: flex-start;
    position: relative;
}

.lce[data-type="theory"] .lce__header-name>div:nth-child(1) {
    align-self: center;
}

.lce__header-rename {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    margin-left: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}

.lce__header-rename._hide {
    opacity: 0 !important;
    visibility: hidden !important;
}

.lce__header-name textarea {
    scrollbar-width: none;
}

.lce__header-name textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.lce__header-rename>span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    background-color: var(--text);
    -webkit-mask-image: url("/img/editor/icon-rename.svg");
    mask-image: url("/img/editor/icon-rename.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    opacity: .5;
    transition: all 0.2s;
}

.lce[data-type="theory"] .template-item {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 10px;
    border-radius: 10px;
    background-color: var(--mainBg);
    border: 2px solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.template-item[data-type="e-file"] .template-item__inner._loaded>.ef__wrapper {
    display: none;
}

.template-item[data-type="e-file"] .template-item__inner._loaded .ef__add {
    display: block;
}

.lce[data-type="theory"] .template-item__inner {
    width: 100%;
    padding: 0;
    flex: 1;
}
.news .template-item__actions,
.lce[data-type="theory"] .template-item__actions {
    right: 0;
    top: 10px;
    border-radius: 5px;
    background-color: var(--mainBg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    position: absolute;
}

.lce[data-type="theory"] .template-item__actions-copy {
    margin-right: 0;
}

.lce[data-type="theory"] .template-item._unsaved {
    border-color: #295CC9;
}

.lce[data-type="theory"] .template-item._unsaved .template-item__inner {
    border-color: transparent;
}

.lcr__inner,
.lce__inner {
    min-height: calc(100vh - 122px);
}

.lce__header {
    margin-bottom: 20px;
}

.lce[data-type="theory"] .lce__header {
    margin-bottom: 0;
}

.lce__header-inner {
    min-height: 70px;
    padding: 15px 32px;
    border-radius: 10px;
    background-color: var(--mainBg);
    display: flex;
    align-items: center;
}

.lce__header-title {
    flex: 1;
    display: flex;
    position: relative;
}

.lce__header-count {
    margin-right: 12px;
    font-weight: 600;
}

.lce__header-name {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}

.lce__header-name._rename textarea {
    opacity: 1;
    visibility: visible;
}

.lce__header-name>div:nth-child(1) {
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    outline: none;
    display: inline-block;
    position: relative;
    word-break: break-word;
}

.lce__header-name>span {
    min-height: 28px;
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    outline: none;
    display: inline-block;
}

.lce__header-name textarea {
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    top: 0;
    left: 0;
    border: none;
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

.lce__header-save {
    width: 170px;
    height: 40px;
    margin: 0 12px 0 24px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    border-radius: 7px;
    background-color: rgba(41, 92, 201, 0.15);
    color: #295CC9;
    flex-shrink: 0;
    cursor: pointer;
}

.lce__header-remove {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    border-radius: 7px;
    background-color: transparent;
    flex-shrink: 0;
    cursor: pointer;
}

.lce__header-remove span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    background-color: #E54047;
    opacity: .5;
    transition: all 0.2s;
    -webkit-mask-image: url("/img/common/remove.svg");
    mask-image: url("/img/common/remove.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.lce__body {
    padding-bottom: 20px;
    flex: 1;
}

.loader {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 10px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    flex-direction: column;
    position: absolute;
    z-index: 2;
}

.loader__text {
    font-size: 16px;
    line-height: 1;
    color: rgba(51, 51, 51, 0.5);
    text-align: center;
}

.auto_add__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.auto_add__header {
    margin-bottom: 50px;
}

.auto_add__header-info {
    flex-grow: 1;
}

.auto_add__header-title {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 25px;
    line-height: 115%;
    word-break: break-word;
}

.auto_add__header-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 113.5%;
    color: rgba(51, 51, 51, 0.5);
}

.auto_add__header-btn {
    min-width: 210px;
    margin-left: 10px;
    padding: 18px 20px;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    color: #295CC9;
    background-color: rgba(41, 92, 201, 0.15);
    border-radius: 10px;
    transition: all .2s ease;
    cursor: pointer;
}

.auto_add__header-btn:active {
    filter: brightness(0.7);
}

.auto_add-body {
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

.auto_add-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.auto_add-body__department:not(:last-of-type) {
    margin-bottom: 60px;
}

.auto_add-body__department-header {
    margin-bottom: 40px;
}

.department-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 18px;
    line-height: 115%;
    color: rgba(51, 51, 51, 0.25);
}

.department-header__text:not(:last-child) {
    margin-right: 10px;
}

.department-header__checkbox-text {
    display: flex;
    align-items: center;
}

.department-header__checkbox {
    margin-left: 10px;
}

.department-header label {
    cursor: pointer;
}

.profile {
    padding: 0;
}

.profile__inner {
    height: 100%;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 370px auto;
    background-color: rgba(41, 92, 201, 0.03);
    overflow: hidden;
}

.profile__body {
    padding: 20px;
}

.profile__header {
    min-height: 74px;
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.profile__header-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-left: 10px;
    margin-right: 20px;
    background-color: #333;
    flex-shrink: 0;
}

.profile__header-text {
    margin-right: auto;
    font-weight: 500;
    font-size: 18px;
    line-height: 115%;
}

.profile__header-button {
    margin-left: 10px;
    padding: 14px 38px;
    font-weight: 500;
    font-size: 15px;
    line-height: 115%;
    border-radius: 10px;
    color: #295CC9;
    background-color: rgba(41, 92, 201, 0.15);
    transition: all 0.2s ease;
    cursor: pointer;
}

.profile__main {
    border-radius: 10px;
    height: calc(100vh - 170px);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}

.profile__main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.profile__notifications {
    height: 100%;
    position: relative;
    display: none;
}

.profile__notifications._active {
    display: block;
}

.profile__notifications .profile__header-icon {
    -webkit-mask-image: url("/img/profile/notification-icon.svg");
    mask-image: url("/img/profile/notification-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile__notification-box:not(:last-child) {
    margin-bottom: 20px;
}

.profile__notification-date {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 115%;
    text-align: center;
    color: rgba(51, 51, 51, 0.5);
}

.profile-notification__item {
    padding: 12px;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
}

.profile-notification__user {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

.profile-notification__user .user_avatar-box {
    --s: 38px;
    margin-right: 14px;
}

.profile-notification__user-name {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
}

.profile-notification__user-pos {
    font-size: 14px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.profile__notification-new {
    margin-left: 14px;
    font-size: 14px;
    line-height: 115%;
    right: 12px;
    top: 12px;
    color: #E54047;
    position: absolute;
}

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

.profile__notification-text {
    font-size: 16px;
    line-height: 115%;
    word-break: break-word;
}

.profile__notification-text a {
    color: #295CC9;
    text-decoration: none;
}

.profile__profile {
    display: none;
}

.profile__profile._active {
    display: block;
}

.profile__profile .profile__header-icon {
    -webkit-mask-image: url("/img/profile/profile-icon.svg");
    mask-image: url("/img/profile/profile-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile__profile-box {
    padding: 20px;
    border: 2px solid #fff;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
}

.profile__profile-box._error,
.profile__profile-box._error .profile__profile-title {
    border-color: #E54047;
}

.profile__profile-box._edited .profile__profile-button {
    display: block;
}

.profile__profile-box:not(:last-child) {
    margin-bottom: 20px;
}

.profile__profile-box-error {
    display: none;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: #E54047;
}

.profile__profile-box._error .profile__profile-box-error {
    display: block;
}

.profile__profile-userinfo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 20px;
}

.profile__profile-title {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 115%;
}

.profile__profile-body {
    display: flex;
    align-items: center;
}

.profile__profile-input {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    flex-grow: 1;
}

.profile__profile-gender {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.profile__profile-checkbox {
    font-size: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.profile__profile-checkbox:not(:last-of-type) {
    margin-right: 32px;
}

.profile__profile-checkbox>input {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    border: 1px solid #EEEFF1;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("/img/common/checkmark.svg");
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: all 0.2s;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.profile__profile-checkbox>input:checked {
    background-color: #54B268;
    border-color: #54B268;
}

.profile__profile-button {
    margin-left: 20px;
    padding: 16px 48px;
    font-weight: 500;
    font-size: 16px;
    line-height: 115%;
    color: #fff;
    border-radius: 10px;
    background-color: #295CC9;
    transition: all 0.2s ease;
    cursor: pointer;
    display: none;
}

.profile__profile-domain {
    margin-left: 10px;
    font-size: 15px;
    line-height: 1.15;
    color: #333333;
    opacity: .5;
}

.profile__profile-warning {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.15;
    color: transparent;
    transition: color .2s ease;
}

.profile__profile-warning._active {
    color: #E54047;
}

.profile__profile-error {
    top: 16px;
    right: 16px;
    font-size: 15px;
    line-height: 1.15;
    color: transparent;
    position: absolute;
}

.profile__profile-box._error .profile__profile-error {
    color: #E54047;
}

.profile__tariff {
    display: none;
}

.profile__tariff._active {
    display: block;
}

.profile__tariff .profile__header-icon {
    -webkit-mask-image: url("/img/profile/tariff-icon.svg");
    mask-image: url("/img/profile/tariff-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile__finance,
.profile__settings {
    display: none;
}

.profile__finance._active,
.profile__settings._active {
    display: block;
}

.profile__finance .profile__header-icon {
    -webkit-mask-image: url("/img/profile/finance-icon.svg");
    mask-image: url("/img/profile/finance-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile__settings .profile__header-icon {
    -webkit-mask-image: url("/img/profile/settings-icon.svg");
    mask-image: url("/img/profile/settings-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile__settings-item {
    padding: 24px;
    font-size: 16px;
    line-height: 115%;
    border-radius: 10px;
    background-color: #fff;
}

.profile__settings-item:not(:last-of-type) {
    margin-bottom: 20px;
}

.profile__settings-title {
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 115%;
}

.profile__settings-info {
    line-height: 150%;
    color: rgba(51, 51, 51, 0.5);
}

.profile__settings-notifications {
    margin-top: 36px;
}

.profile__settings-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.profile__settings-checkbox:not(:last-of-type) {
    margin-bottom: 16px;
}

.profile__settings-checkbox>input {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    border: 1px solid #EEEFF1;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("/img/common/checkmark.svg");
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: all 0.2s;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.profile__settings-checkbox>input:checked {
    background-color: #54B268;
    border-color: #54B268;
}

.profile__settings-footer {
    display: flex;
    align-items: center;
}

.profile__settings-accept {
    width: fit-content;
    margin-right: 20px;
    padding: 16px 48px;
    border-radius: 10px;
    color: #fff;
    background-color: #295CC9;
    transition: all 0.2s ease;
    cursor: pointer;
}

.profile__settings-success {
    color: #54B268;
    align-items: center;
    display: none;
}

.profile__settings-success div {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    background-color: #54B268;
    -webkit-mask-image: url("/img/profile/success-icon.svg");
    mask-image: url("/img/profile/success-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile__settings-fail {
    color: #E54047;
    align-items: center;
    display: none;
}

.profile__settings-fail div {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    background-color: #E54047;
    -webkit-mask-image: url("/img/profile/warning-icon.svg");
    mask-image: url("/img/profile/warning-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.profile__settings-delete {
    width: fit-content;
    margin-top: 16px;
    padding: 16px 80px;
    border-radius: 10px;
    color: #E54047;
    background-color: rgba(229, 64, 71, 0.15);
    transition: all 0.2s ease;
    cursor: pointer;
}

.profile-aside {
    padding: 24px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.profile-aside__header {
    margin-top: 46px;
    margin-bottom: 100px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-aside__header .user_avatar-box {
    --s: 120px;
    font-size: 46px;
    line-height: 1;
}

.profile-aside__header-user {
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-aside__header-remove {
    font-size: 16px;
    line-height: 1.15;
    color: #E54047;
    cursor: pointer;
}

.profile-aside__header-img {
    margin-bottom: 10px;
    position: relative;
}

.profile-aside__header-img:hover .profile-aside__header-plug {
    opacity: 1;
}

.profile-aside__header-img input {
    width: 100%;
    height: 100%;
    font-size: 0;
    left: 0;
    top: 0;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
}

.profile-aside__header-plug {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.25);
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
    position: absolute;
    z-index: 1;
}

.profile-aside__header-plug span {
    --s: 34px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
    -webkit-mask-image: url('/img/common/icon-gallery.svg');
    mask-image: url('/img/common/icon-gallery.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile-aside__header-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 115%;
}

.profile-aside__header-status {
    font-size: 16px;
    line-height: 115%;
    color: rgba(51, 51, 51, 0.5);
}

.profile-aside__links {
    margin-bottom: auto;
}

.profile-aside__link {
    padding: 8px 20px;
    font-weight: 500;
    font-size: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.profile-aside__link:not(:last-of-type) {
    margin-bottom: 12px;
}

.profile-aside__link[data-type=notifications] .profile-aside__link-icon {
    -webkit-mask-image: url("/img/profile/notification-icon.svg");
    mask-image: url("/img/profile/notification-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile-aside__link[data-type=profile] .profile-aside__link-icon {
    -webkit-mask-image: url("/img/profile/profile-icon.svg");
    mask-image: url("/img/profile/profile-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile-aside__link[data-type=tariff] .profile-aside__link-icon {
    -webkit-mask-image: url("/img/profile/tariff-icon.svg");
    mask-image: url("/img/profile/tariff-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile-aside__link[data-type=finance] .profile-aside__link-icon {
    -webkit-mask-image: url("/img/profile/finance-icon.svg");
    mask-image: url("/img/profile/finance-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile-aside__link[data-type=settings] .profile-aside__link-icon {
    -webkit-mask-image: url("/img/profile/settings-icon.svg");
    mask-image: url("/img/profile/settings-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile-aside__link[data-type=portal] .profile-aside__link-icon {
    -webkit-mask-image: url("/img/common/icon-brush.svg");
    mask-image: url("/img/common/icon-brush.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile-aside__link._active .profile-aside__link-arrow,
.profile-aside__link._unread .profile-aside__link-notice {
    display: block;
}

.profile-aside__link-notice {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #E54047;
    position: absolute;
    content: "";
    display: none;
}

.profile-aside__link-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    background-color: #333;
}

.profile-aside__link-text {
    margin-right: auto;
}

.profile-aside__link-arrow {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-left: 10px;
    background-color: #333;
    -webkit-mask-image: url("/img/profile/arrow-black-icon.svg");
    mask-image: url("/img/profile/arrow-black-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    display: none;
}

.profile-aside__remove {
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 115%;
    text-align: center;
    border-radius: 10px;
    color: #E54047;
    background-color: rgba(229, 64, 71, 0.15);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.profile-aside__save {
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 115%;
    text-align: center;
    border-radius: 10px;
    color: #295CC9;
    background-color: rgba(41, 92, 201, 0.15);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.profile_tariff-info {
    margin-bottom: 20px;
    padding: 20px 26px;
    font-size: 16px;
    line-height: 115%;
    border-radius: 10px;
    color: #fff;
    background: no-repeat url("/img/profile/tariff-background.svg") right center;
    background-size: cover;
}

.profile_tariff-info__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile_tariff-info__price {
    margin-bottom: 48px;
    font-size: 20px;
    line-height: 150%;
}

.profile_tariff-info__link {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.profile_tariff-info__link div {
    --s: 18px;
    width: var(--s);
    height: var(--s);
    margin-left: 8px;
    background-color: #fff;
    transition: transform 0.2s ease;
    -webkit-mask-image: url("/img/profile/arrow-black-icon.svg");
    mask-image: url("/img/profile/arrow-black-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile_tariff-options {
    display: flex;
    align-items: stretch;
    position: relative;
}

.profile_tariff-options__icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    top: 12px;
    right: 12px;
    background-color: #E54047;
    position: absolute;
    display: none;
    -webkit-mask-image: url("/img/profile/warning-icon.svg");
    mask-image: url("/img/profile/warning-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.profile_tariff-options__hint {
    padding: 8px 14px;
    bottom: 100%;
    right: 0;
    max-width: 100%;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    border-radius: 8px;
    color: rgba(51, 51, 51, 0.5);
    background-color: #fff;
    box-shadow: 0 0 8px rgba(51, 51, 51, 0.1), 0 8px 8px rgba(51, 51, 51, 0.1);
    display: flex;
    align-items: center;
    opacity: 0;
    transition: all 0.2s;
    visibility: hidden;
    position: absolute;
    z-index: 5;
}

.profile_tariff-options__hint-icon {
    margin-right: 16px;
    flex-shrink: 0;
}

.profile_tariff-options__hint-icon span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: rgba(51, 51, 51, 0.5);
    -webkit-mask-image: url("/img/common/info-circle.svg");
    mask-image: url("/img/common/info-circle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transform: rotateZ(180deg);
}

.profile_tariff-options__hint:after {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    bottom: -4px;
    right: 20px;
    border-radius: 2px;
    transform: rotate(45deg);
    background-color: #fff;
    z-index: 5;
    content: "";
    position: absolute;
}

.profile_tariff-options__item {
    width: 33.333%;
    padding: 20px 26px;
    border: 2px solid transparent;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
}

.profile_tariff-options__item:not(:last-child) {
    margin-right: 20px;
}

.profile_tariff-options__item._error {
    border: 2px solid #E54047;
}

.profile_tariff-options__item._error .profile_tariff-options__icon {
    display: block;
}

.profile_tariff-options__item._error .profile_tariff-options__icon:hover+.profile_tariff-options__hint {
    opacity: 1;
    visibility: visible;
}

.profile_tariff-options__title {
    font-size: 16px;
    line-height: 115%;
    color: rgba(51, 51, 51, 0.25);
}

.profile_tariff-options__stats {
    margin-bottom: 26px;
    font-weight: 600;
    font-size: 22px;
    line-height: 150%;
    color: rgba(51, 51, 51, 0.25);
}

.profile_tariff-options__stats>span {
    color: #333;
}

.profile_tariff-options__button {
    width: 100%;
    margin-top: auto;
    padding: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 115%;
    text-align: center;
    border-radius: 10px;
    color: #295CC9;
    background-color: rgba(41, 92, 201, 0.15);
    text-decoration: none;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.profile_finance-hitory {
    padding: 24px;
    border-radius: 10px;
    background-color: #fff;
}

.profile_finance-hitory__title {
    font-weight: 500;
    font-size: 16px;
}

.profile_finance-hitory__table {
    font-size: 14px;
}

.profile_finance-hitory__row {
    padding: 16px 0;
    display: grid;
    grid-template-columns: minmax(165px, 2fr) 1fr 0.5fr 1.5fr 1.5fr 2fr;
    gap: 24px;
    align-items: center;
}

.profile_finance-hitory__row:not(:last-child) {
    border-bottom: 1px solid #EEEFF1;
}

.profile_finance-hitory__profile {
    display: flex;
    align-items: center;
}

.profile_finance-hitory__avatarbox {
    --s: 42px;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("/img/assign_users/student5.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.profile_finance-hitory__date,
.profile_finance-hitory__time,
.profile_finance-hitory__value {
    text-align: center;
}

.profile_settings-password {
    margin-top: 36px;
}

.profile_settings-password._green .profile__settings-success,
.profile_settings-password._red .profile__settings-fail {
    display: flex;
}

.profile_settings-password._red .profile__settings-success {
    display: none;
}

.profile_settings-password__box {
    font-size: 16px;
}

.profile_settings-password__box:not(:last-child) {
    margin-bottom: 24px;
}

.profile_settings-password__box._red .profile_settings-password__wrapper input {
    border: 1px solid #E54047;
    color: #E54047;
}

.profile_settings-password__box._red .profile_settings-password__show {
    background-color: #E54047;
}

.profile_settings-password__title {
    margin-bottom: 10px;
}

.profile_settings-password__wrapper {
    position: relative;
}

.profile_settings-password__wrapper>input {
    width: 100%;
    padding: 12px 24px;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
}

.profile_settings-password__show {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    --s: 20px;
    width: var(--s);
    height: var(--s);
    background-color: #333;
    -webkit-mask-image: url("/img/profile/show-icon.svg");
    mask-image: url("/img/profile/show-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    position: absolute;
    cursor: pointer;
}

.faq {
    padding: 0;
}

.faq__inner {
    height: 100%;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 380px auto;
    background-color: rgba(41, 92, 201, 0.03);
    overflow: hidden;
}

body._dark .faq__inner {
    background-color: var(--bodyBg);
}

.faq__body {
    max-height: calc(100vh - 40px);
    padding: 20px;
    position: relative;
}

.faq__content {
    height: 100%;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--mainBg);
    display: flex;
    flex-direction: column;
}

.faq__title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 22px;
}

.faq__info {
    margin-bottom: 20px;
    flex-grow: 1;
    overflow: scroll;
    scrollbar-width: none;
}

.faq__info::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.faq__info .lcr__body-page {
    max-width: 760px;
    margin: 0 auto;
}

.faq__buttons {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq__buttons._removed {
    position: relative;
    transform: translateX(150%);
    transition: transform 0.2s ease;
    animation: remove-faq-btns .2s forwards;
}

@keyframes remove-faq-btns {
    from,
    99% {
        visibility: visible;
    }
    to {
        height: 0;
        margin-top: -20px;
        visibility: hidden;
    }
}

.faq__button {
    min-width: 260px;
    min-height: 50px;
    border-radius: 7px;
    font-weight: 500;
    font-size: 15px;
    color: rgba(51, 51, 51, 0.5);
    background-color: #F7F8FA;
    cursor: pointer;
    transition: filter 0.2s ease;
}

body._dark .faq__button {
    background-color: var(--svg);
    color: var(--text);
}

.faq__button:active {
    filter: brightness(0.8);
}

.faq__button._active,
body._dark .faq__button._active {
    color: #fff;
    background-color: #54B268;
}

.faq-aside {
    padding: 40px;
    background-color: var(--mainBg);
    display: flex;
    flex-direction: column;
}

.faq-aside__title {
    margin-bottom: 40px;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
}

.faq-aside__search {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}

.faq-aside__search-icon {
    --s: 24px;

    width: var(--s);
    height: var(--s);
    margin-right: 24px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url('/img/common/search-black.svg?1');
    mask-image: url('/img/common/search-black.svg?1');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.faq-aside__search-input {
    width: 100%;
    font-size: 18px;
    background-color: transparent;
    border: none;
}

.faq-aside__search-input::placeholder {
    font: inherit;
    opacity: 0.5;
}

.faq-aside__links {
    max-height: calc(100vh - 410px);
    margin-bottom: auto;
    overflow: scroll;
    scrollbar-width: none;
}

.faq-aside__links::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.faq-aside__link {
    padding: 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.faq-aside__link:not(:last-child) {
    margin-bottom: 4px;
}

.faq-aside__link._active {
    background: var(--hover);
}

.faq-aside__link-icon {
    --s: 26px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-image: url('/img/faq/question-icon.svg?1');
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

body._dark .faq-aside__link-icon {
    background-image: url('/img/faq/question-icon-dark.svg');
}

.faq-aside__section {
    font-weight: 500;
    font-size: 18px;
    position: relative;
    cursor: pointer;
}

.faq-aside__section:not(:last-of-type) {
    margin-bottom: 30px;
}

.faq-aside__section:last-of-type {
    margin-bottom: 120px;
}

.faq-aside__section-name {
    padding-right: 24px;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.faq-aside__section-name::after {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: var(--text);
    -webkit-mask-image: url('/img/faq/arrow-black.svg');
    mask-image: url('/img/faq/arrow-black.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    /*background-image: url('/img/faq/arrow-black.svg');*/
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    transition: all 0.2s;
    position: absolute;
    content: "";
}

.faq-aside__section .faq-aside__section-name._active::after {
    transform: translateY(-50%) rotate(-180deg);
}

.faq-aside__section-hidden {
    margin-top: 30px;
    display: none;
}

.faq-aside__section-hidden._active {
    display: block;
}

.faq-aside__footer {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
}

.faq-aside__footer-title {
    font-weight: 600;
}

.faq-aside__ask {
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 115%;
    text-align: center;
    border-radius: 10px;
    color: #fff;
    background-color: var(--accent);
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
}

.faq__plug {
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--mainBg);
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.faq__plug._active {
    opacity: 1;
    visibility: visible;
}

.faq__plug-inner {
    max-width: 678px;
    text-align: center;
    flex-direction: column;
}

.faq__plug-inner svg {
    width: 100%;
    max-width: 380px;
    margin-bottom: 50px;
    flex-shrink: 1;
}

/*.faq__plug-img {*/
/*    width: 100%;*/
/*    max-width: 380px;*/
/*    margin-bottom: 50px;*/
/*    flex-shrink: 1;*/
/*}*/

.faq__plug-title {
    margin-bottom: 18px;
    font-weight: 500;
    font-size: 20px;
    line-height: 115%;
}

.faq__plug-info {
    font-size: 16px;
    line-height: 115%;
}

.auto_add-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    gap: 30px;
}

.auto_add-list__user {
    width: 180px;
    min-height: 140px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.auto_add-list__user._in {
    cursor: auto;
}

.auto_add-list__user .user_avatar-box {
    --s: 50px;
    margin-bottom: 4px;
}

.auto_add-list__user-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 113.5%;
}

.auto_add-list__user-status {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 113.5%;
}

.auto_add-list__user-unassign {
    font-size: 14px;
    color: rgba(229, 64, 71, 0.5);
    cursor: pointer;
    transition: all .2s ease;
}

.auto_add-list__user-unassign:hover {
    color: #E54047;
}

.auto_add-list__user-in {
    font-size: 12px;
    line-height: 1;
    color: #54B268;
}

.auto_add-list__user-checkbox {
    position: absolute;
    top: 0;
    left: 0;
}

.auto_add-footer {
    padding-top: 32px;
    background-color: #fff;
}

.auto_add-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auto_add-footer__summary-text {
    margin-bottom: 6px;
    font-weight: 400;
    font-size: 16px;
    line-height: 113.5%;
    color: rgba(51, 51, 51, 0.5);
}

.auto_add-footer__summary-users {
    min-height: 44px;
    font-weight: 500;
    font-size: 14px;
    line-height: 104%;
    color: rgba(51, 51, 51, 0.25);
    display: flex;
    align-items: center;
    position: relative;
}

.auto_add-footer__summary-users::after {
    right: -30px;
    position: absolute;
    content: attr(overdraft)
}

@keyframes scale {
    from {transform: scale(0);}
    to {transform: scale(1);}
}

.auto_add-footer__summary-avatar:not(:first-child) {
    margin-left: -20px;
}

.auto_add-footer__summary-avatar:last-child {
    margin-right: 8px;
}

.auto_add-footer__summary-avatar._overdraft {
    display: none;
    animation-name: none;
}

.auto_add-footer__summary-avatar .user_avatar-box {
    --s: 40px;
    border: 3px solid #fff;
    animation-name: scale;
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
}

.auto_add-footer__buttons {
    display: flex;
    align-items: center;
}

.auto_add-footer__buttons-btn {
    min-width: 178px;
    padding: 14px;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    border-radius: 10px;
    color: rgba(51, 51, 51, 0.5);
    background-color: #F7F8FA;
    cursor: pointer;
}

.auto_add-footer__buttons-btn:not(:last-child) {
    margin-right: 10px;
}

.auto_add-footer__buttons-btn._colored {
    color: #fff;
    background-color: #295CC9;
}

.auto_checkbox[type=checkbox],
.auto_checkbox[type=radio] {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    border: 1px solid #EAEAEA;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.auto_checkbox[type=checkbox]:checked,
.auto_checkbox[type=radio]:checked {
    background-color: #54B268;
    border-color: #54B268;
    background-image: url("/img/common/checkmark.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 14px;
}

.theory {
    min-height: calc(100vh - 214px);
    padding: 20px 42px;
    border-radius: 10px;
    background-color: #fff;
}

.theory__box {
    padding: 10px;
    border: 1px solid rgba(51, 51, 51, .15);
    border-radius: 7px;
    outline: none;
}

.template-actions {
    margin: 20px 0;
    padding: 20px 42px;
    border-radius: 10px;
    background-color: var(--mainBg);
}

.template-actions__title {
    margin-bottom: 36px;
    font-size: 18px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.template-actions__buttons {
    margin: 0 -16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.lce[data-type="task"] .template-actions__buttons {
    grid-template-columns: repeat(5, 1fr);
}

.template-actions__button {
    padding: 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.template-actions__button-header {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.template-actions__button-icon {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 15px;
    border-radius: 50%;
    background-color: var(--accent);
    flex-shrink: 0;
}

.template-actions__button-icon span {
    --s: 24px;
    width: var(--s);
    height: calc(var(--s) / 24 * 16);
    background-color: #fff;
}

.template-actions__button[data-type=test] .template-actions__button-icon span {
    -webkit-mask-image: url("/img/editor/icon-test-answer.svg");
    mask-image: url("/img/editor/icon-test-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-actions__button[data-type=sort] .template-actions__button-icon span {
    -webkit-mask-image: url("/img/editor/icon-sort-answer.svg");
    mask-image: url("/img/editor/icon-sort-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-actions__button[data-type=queue] .template-actions__button-icon span {
    -webkit-mask-image: url("/img/editor/icon-queue-answer.svg");
    mask-image: url("/img/editor/icon-queue-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-actions__button[data-type=text] .template-actions__button-icon span {
    --s: 22px;
    height: var(--s);
    -webkit-mask-image: url("/img/editor/icon-text-answer.svg");
    mask-image: url("/img/editor/icon-text-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-actions__button[data-type=audio] .template-actions__button-icon span {
    --s: 22px;
    height: var(--s);
    -webkit-mask-image: url("/img/editor/icon-audio-answer.svg");
    mask-image: url("/img/editor/icon-audio-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-actions__button[data-type=video] .template-actions__button-icon span {
    --s: 22px;
    height: var(--s);
    -webkit-mask-image: url("/img/editor/icon-media-video.svg");
    mask-image: url("/img/editor/icon-media-video.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-actions__button[data-type=file] .template-actions__button-icon span {
    --s: 22px;
    height: var(--s);
    -webkit-mask-image: url("/img/editor/icon-file-answer.svg");
    mask-image: url("/img/editor/icon-file-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-actions__button[data-type=media] .template-actions__button-icon span {
    --s: 22px;
    height: var(--s);
    -webkit-mask-image: url("/img/editor/icon-media-text.svg");
    mask-image: url("/img/editor/icon-media-text.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-actions__button-title {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
}

.template-actions__button-descr {
    font-size: 14px;
    line-height: 1.15;
    color: var(--textOpacity);
    text-align: center;
}

.template-rules {
    padding: 20px 42px;
    border-radius: 10px;
    background-color: var(--mainBg);
}

.template-rules__title {
    margin-bottom: 36px;
    font-size: 18px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.template-rules__box:not(:last-child) {
    margin-bottom: 32px;
}

.template-rules__label-info {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.template-rules__label-title {
    font-size: 16px;
    line-height: 19px;
}

.template-rules__label-icon {
    position: relative;
    flex-shrink: 0;
    margin-left: 10px;
}

.template-rules__label-icon .xpl-hint {
    left: -27px;
    right: auto;
}

.template-rules__label-icon .xpl-hint__inner::after,
.template-rules__label-icon .xpl-hint__shadow::after {
    left: 32px;
    right: auto;
}

.template-rules__label-icon>span {
    --s: 20px;

    display: block;
    width: var(--s);
    height: var(--s);
    background-color: var(--textOpacity);
    -webkit-mask-image: url('/img/common/info-circle.svg');
    mask-image: url('/img/common/info-circle.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-rules__label-input {
    width: 100%;
    height: 50px;
    padding: 0 24px;
    font-size: 16px;
    line-height: 19px;
    background-color: transparent;
    border-radius: 8px;
    border: 1px solid #E9E9EE;
    display: block;
}

body._dark .template-rules__label-input {
    border-color: var(--textOpacity);
}

.template-rules__label-input[disabled],
.template-rules__checkbox._disabled input,
.template-rules__checkbox._disabled .template-rules__checkbox-text,
.template-rules__checkbox._disabled .template-rules__label-icon span {
    opacity: .5;
}

.template-rules__checkbox {
    margin-top: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.template-rules__checkbox._disabled {
    cursor: auto;
}

.template-rules__checkbox input {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    border-radius: 5px;
    border: 1px solid #E9E9EE;
    transition: all 0.2s;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.template-rules__checkbox input:checked {
    background-image: url("/img/common/checkmark.svg");
    background-color: #295CC9;
    border-color: #295CC9;
}

body._dark .template-rules__checkbox input:checked {
    background-image: url("/img/common/checkmark-dark.svg");
    background-color: var(--text);
    border-color: var(--text);
}

.template-rules__checkbox-info {
    display: flex;
}

.template-rules__checkbox-text {
    font-size: 16px;
    line-height: 19px;
}

.template-item {
    position: relative;
}

.template-item._hidden {
    display: none!important;
}

.template-item._locked .template-item__inner::after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.7);
    position: absolute;
    content: '';
    z-index: 20;
}

.lce[data-type="theory"] .template-item._locked .template-item__inner::after {
    width: calc(100% + 40px);
    left: -20px;
}

.template-item:first-child .template-item__actions-up,
.lce[data-type="theory"] .template-item:nth-child(2) .template-item__actions-up,
.template-item:last-child .template-item__actions-down {
    opacity: .5;
}

.template-item._active .template-item__new,
.template-item._active .template-item__new-list {
    opacity: 1;
    visibility: visible;
}

.template-item__locked {
    padding: 5px 6px;
    border-radius: 60px;
    left: 0;
    top: 15px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    background-color: #F9FAFD;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 25;
}

body._dark .template-item__locked {
    background-color: var(--svg);
}

.template-item._locked .template-item__locked {
    opacity: 1;
    visibility: visible;
}

:where(.lce[data-type="test"], .lce[data-type="task"]) .template-item .template-item__locked {
    transform: translateY(0);
    left: 15px;
}

.template-item__locked-img {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    font-size: 15px;
    line-height: 1;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.template-item__locked-name {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.15;
}

.template-item__locked-text {
    font-size: 12px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.template-item__inner {
    padding: 24px 32px;
    border-radius: 10px;
    border: 2px solid transparent;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    background-color: var(--mainBg);
    position: relative;
}

.template-item__emoji-wrapper {
    top: 3px;
    right: -25px;
    position: absolute;
    display: none;
}

.warning .template-item__emoji-wrapper {
    top: 25px;
}

.template-item[data-type="e-text"] .template-item__emoji-wrapper {
    right: -35px;
}

.template-item[data-type="warning"] .template-item__emoji-wrapper {
    right: 25px;
}

.template-item__emoji-wrapper._active {
    display: block;
}

.template-item__emoji-btn {
    --s: 24px;

    width: var(--s);
    height: var(--s);
    margin-left: auto;
    border: none;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/common/icon-smile.svg");
    mask-image: url("/img/common/icon-smile.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transition: all .2s;
    cursor: pointer;
}

.template-item__emoji-box {
    display: none;
    right: 0;
    bottom: calc(100% + 5px);
    position: absolute;
    z-index: 20;
}

.template-item__emoji-box._down {
    top: calc(100% + 5px);
    bottom: auto;
}

.template-item__emoji-box._active {
    display: block;
}

.emoji {
    display: flex;
    flex-direction: column;
    height: 250px;
    padding: 6px;
    background-color: var(--mainBg);
    border-radius: 10px;
    border: 1px solid rgba(41, 92, 201, 0.25);
}

.emoji-header {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 1px;
    border-bottom: 1px solid rgba(41, 92, 201, 0.25);
}

body._dark .emoji,
body._dark .emoji-header {
    border-color: rgba(24, 87, 241, 0.15);
}

.emoji-header__btn,
.emoji-button {
    font-size: 24px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.emoji-header__btn {
    width: 36px;
    height: 42px;
    display: flex;
    justify-content: center;
}

.emoji-header__btn._active {
    border-bottom: 3px solid var(--accent);
}

.emoji-button {
    --s: 36px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
}

.emoji-main {
    padding: 5px 0;
    overflow: auto;
    scrollbar-width: none;
}

.emoji-main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.emoji-tab {
    display: none;
}

.emoji-tab._active {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 1px;
}

.template-item._unsaved .template-item__inner {
    border-color: #295CC9;
}

.template-item__new {
    padding: 10px 0 16px;
    font-size: 16px;
    line-height: 19px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    position: relative;
}

.template-item__new::after {
    width: 100%;
    height: 1px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(41, 92, 201, 0.15);
    position: absolute;
    content: '';
}

body._dark .template-item__new::after {
    background-color: var(--svg);
}

.template-item__new._start {
    max-width: 760px;
    margin: 0 auto;
    opacity: 0;
    transition: all 0.2s;
    visibility: visible;
}

.template-item__new._start._one {
    opacity: 1;
    visibility: visible;
}

.template-item__new-inner {
    padding: 0 15px;
    background-color: var(--mainBg);
    display: flex;
    justify-content: center;
    z-index: 2;
    position: relative;
}

.template-item__new-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.template-item__new-btn:not(:last-child) {
    margin-right: 8px;
}

.template-item__new-btn div {
    --s: 28px;

    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background-color: #F2F5FC;
    flex-shrink: 0;
    transition: all .2s;
}

body._dark .template-item__new-btn div {
    background-color: var(--svg);
}

.template-item__new-btn div::after {
    font-size: 14px;
    line-height: 1;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--textOpacity);
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    position: absolute;
    z-index: 12;
}

.template-item__new-etext div::after {
    content: 'Вставить текстовый блок';
}

.template-item__new-image div::after {
    content: 'Вставить изображение';
}

.template-item__new-video div::after {
    content: 'Вставить видеозапись';
}

.template-item__new-audio div::after {
    content: 'Вставить аудиозапись';
}

.template-item__new-file div::after {
    content: 'Вставить файл';
}

.template-item__new-warning div::after {
    content: 'Вставить информационный блок';
}

.template-item__new-button div::after {
    content: 'Вставить кнопку';
}

.template-item__new-btn div span {
    --s: 16px;

    width: var(--s);
    height: calc(var(--s) / 14 * 9);
    background-color: #95AEE2;
    transition: all .2s;
}

body._dark .template-item__new-btn div span {
    background-color: var(--text);
}

.template-item__new-audio div span {
    --s: 14px;
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: url('/img/editor/icon-audio-answer.svg');
    mask-image: url('/img/editor/icon-audio-answer.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__new-file div span {
    --s: 14px;
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: url('/img/editor/icon-file-answer.svg');
    mask-image: url('/img/editor/icon-file-answer.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__new-etext div span {
    --s: 14px;
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: url('/img/editor/icon-media-text.svg');
    mask-image: url('/img/editor/icon-media-text.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__new-image div span {
    --s: 14px;
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: url('/img/editor/icon-media-img.svg');
    mask-image: url('/img/editor/icon-media-img.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__new-video div span {
    --s: 14px;
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: url('/img/editor/icon-media-video.svg');
    mask-image: url('/img/editor/icon-media-video.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__new-warning div span {
    --s: 14px;
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: url('/img/editor/icon-plus-warning5.svg');
    mask-image: url('/img/editor/icon-plus-warning5.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__new-button div span {
    --s: 14px;
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: url('/img/editor/icon-media-btn.svg');
    mask-image: url('/img/editor/icon-media-btn.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__new-plus {
    --s: 28px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background-color: #295CC9;
    cursor: pointer;
}

.template-item__new-plus span {
    --s: 16px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
    -webkit-mask-image: url('/img/editor/plus.svg?1');
    mask-image: url('/img/editor/plus.svg?1');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__header {
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.template-item__title-inner {
    display: flex;
    align-items: center;
}

.template-item__title-text {
    font-weight: 600;
    font-size: 22px;
    line-height: 125%;
}

.template-item__actions-inner {
    display: flex;
}

.template-item__actions-item {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    border-radius: 7px;
    cursor: pointer;
}

.template-item__actions-item span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    background-color: var(--text);
    opacity: .5;
    transition: all 0.2s;
}

.template-item__actions-copy span {
    -webkit-mask-image: url("/img/editor/icon-copy.svg");
    mask-image: url("/img/editor/icon-copy.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__actions-remove span {
    background-color: #E54047;
    -webkit-mask-image: url("/img/editor/icon-remove.svg");
    mask-image: url("/img/editor/icon-remove.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__actions-up span,
.template-item__actions-down span {
    -webkit-mask-image: url("/img/editor/icon-arrow.svg");
    mask-image: url("/img/editor/icon-arrow.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__actions-down span {
    transform: rotate(180deg);
}

.template-item__actions-grab {
    cursor: grab;
}

.template-item__actions-grab:active {
    cursor: grabbing;
}

.template-item__actions-grab span {
    -webkit-mask-image: url("/img/editor/grab.svg");
    mask-image: url("/img/editor/grab.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__question {
    margin-bottom: 40px;
}

.template-item__question-title {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.15;
}

.template-item__question-footer {
    margin-top: 15px;
    font-size: 14px;
    line-height: 16px;
    color: var(--textOpacity);
    display: flex;
    align-items: center;
}

.template-item__question-footer div {
    --s: 25px;
    width: var(--s);
    height: var(--s);
    margin-right: 6px;
    border-radius: 50%;
    background-color: rgba(41, 92, 201, 0.5);
    flex-shrink: 0;
}

body._dark .template-item__question-footer div {
    background-color: var(--textOpacity);
}

.template-item__question-footer div span {
    --s: 15px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item[data-type="text"] .template-item__question-footer div span {
    -webkit-mask-image: url("/img/editor/icon-text-answer.svg");
    mask-image: url("/img/editor/icon-text-answer.svg");
}

.template-item[data-type="audio"] .template-item__question-footer div span {
    -webkit-mask-image: url("/img/editor/icon-audio-answer.svg");
    mask-image: url("/img/editor/icon-audio-answer.svg");
}

.template-item[data-type="video"] .template-item__question-footer div span {
    -webkit-mask-image: url("/img/editor/icon-media-video.svg");
    mask-image: url("/img/editor/icon-media-video.svg");
}

.template-item[data-type="file"] .template-item__question-footer div span {
    -webkit-mask-image: url("/img/editor/icon-file-answer.svg");
    mask-image: url("/img/editor/icon-file-answer.svg");
}

.template-item__content-title {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.15;
}

.template-item__content-subtitle {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 16px;
    color: var(--textOpacity);
}

.template-item__add {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    opacity: .5;
    transition: all 0.2s;
    cursor: pointer;
}

.template-item__add-icon {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    margin-right: 8px;
    flex-shrink: 0;
    background-color: var(--text);
    transition: all 0.2s;
    -webkit-mask-image: url("/img/editor/icon-plus.svg");
    mask-image: url("/img/editor/icon-plus.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template-item__add-text {
    font-size: 16px;
    line-height: 1;
    color: var(--text);
}

.template-answer {
    cursor: grab;
    position: relative;
}

.template-answer:only-child .template-answer__remove {
    opacity: 0;
    visibility: hidden;
}

.template-answer:active {
    cursor: grabbing;
}

.template-answer:not(:last-child) {
    margin-bottom: 15px;
}

.template-answer__remove,
.template-answer__drag {
    --s: 22px;

    flex-shrink: 0;
    align-self: center;
    width: var(--s);
    height: var(--s);
    margin-left: 16px;
    background-color: var(--textOpacity);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transition: all 0.2s;
    cursor: pointer;
}

.template-answer__remove {
    -webkit-mask-image: url("/img/editor/icon-remove.svg");
    mask-image: url("/img/editor/icon-remove.svg");
}

.template-answer__drag {
    -webkit-mask-image: url("/img/editor/grab.svg");
    mask-image: url("/img/editor/grab.svg");
    cursor: grab;
}

.template-contenteditable {
    padding: 18px 24px;
    font-size: 16px;
    line-height: 1.25;
    border-radius: 8px;
    border: 1px solid #E9E9EE;
    flex: 1;
    outline: none;
    word-break: break-word;
    cursor: auto;
}

body._dark .template-contenteditable {
    border-color: var(--textOpacity);
}

.template-contenteditable:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: var(--textOpacity);
    pointer-events: none;
}

.template_test[data-mode=multi] .template_test-answer__label-icon {
    border-radius: 7px;
}

.template_test__title-icon span {
    -webkit-mask-image: url("/img/editor/icon-test-answer.svg");
    mask-image: url("/img/editor/icon-test-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_test__switcher {
    margin-bottom: 24px;
}

.template_test__switcher-title {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.15;
}

.template_test-answer__inner {
    display: flex;
}

.template_test-answer__label {
    min-height: 54px;
    margin-left: 15px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid #E9E9EE;
    color: var(--textOpacity);
    transition: all 0.2s;
    cursor: pointer;
}

.template_test-answer__label._active {
    color: var(--text);
}

.template_test-answer__label._active .template_test-answer__label-icon {
    border-color: #295CC9;
    background-color: #295CC9;
}

body._dark .template_test-answer__label._active .template_test-answer__label-icon {
    border-color: var(--text);
    background-color: var(--text);
}

.template_test-answer__label-inner {
    height: 100%;
    display: flex;
    align-items: center;
}

.template_test-answer__label-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 15px;
    border-radius: 50%;
    border: 1px solid rgba(51, 51, 51, 0.15);
    transition: all 0.2s;
}

body._dark .template_test-answer__label-icon {
    border-color: var(--courseBg);
}

.template_test-answer__label-icon span {
    --s: 16px;
    width: var(--s);
    height: var(--s);
    background-color: var(--mainBg);
    -webkit-mask-image: url("/img/editor/icon-checkmark.svg");
    mask-image: url("/img/editor/icon-checkmark.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_sort__title-icon span {
    -webkit-mask-image: url("/img/editor/icon-sort-answer.svg");
    mask-image: url("/img/editor/icon-sort-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_sort-answer__inner {
    display: flex;
}

.template_sort-answer__angle {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin: 0 12px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/editor/icon-angle.svg");
    mask-image: url("/img/editor/icon-angle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    align-self: center;
}

.template_queue {
    counter-reset: queue-counter;
}

.template_queue__title-icon span {
    -webkit-mask-image: url("/img/editor/icon-queue-answer.svg");
    mask-image: url("/img/editor/icon-queue-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_queue-answer {
    counter-increment: queue-counter;
}

.template_queue-answer__inner {
    display: flex;
}

.template_queue-answer__input {
    padding-left: 54px;
    position: relative;
}

.template_queue-answer__input::after {
    width: 54px;
    top: 18px;
    left: 0;
    color: rgba(51, 51, 51, 0.5);
    text-align: center;
    position: absolute;
    content: counter(queue-counter);
}

.template_text__title-icon span {
    --s: 22px;
    height: var(--s);
    -webkit-mask-image: url("/img/editor/icon-text-answer.svg");
    mask-image: url("/img/editor/icon-text-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_text__question {
    margin-bottom: 0;
}

.template_audio__title-icon span {
    --s: 22px;
    height: var(--s);
    -webkit-mask-image: url("/img/editor/icon-audio-answer.svg");
    mask-image: url("/img/editor/icon-audio-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_audio__question {
    margin-bottom: 0;
}

.template_file__title-icon span {
    --s: 22px;
    height: var(--s);
    -webkit-mask-image: url("/img/editor/icon-file-answer.svg");
    mask-image: url("/img/editor/icon-file-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_file__question {
    margin-bottom: 0;
}

.template_etext__title-icon span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: url("/img/editor/icon-media-text.svg");
    mask-image: url("/img/editor/icon-media-text.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_media__header-actions {
    display: flex;
    align-items: center;
}

.template_media__header-tabs {
    display: flex;
}

.template_media__header-tab {
    --s: 36px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    transition: all 0.2s;
    cursor: pointer;
}

.template_media__header-tab._active {
    background-color: #295CC9;
}

body._dark .template_media__header-tab._active {
    background-color: var(--textOpacity);
}

.template_media__header-tab:not(:last-child) {
    margin-right: 15px;
}

.template_media__header-tab span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
    transition: all 0.2s;
}

body._dark .template_media__header-tab span {
    background-color: var(--textOpacity);
}

.template_media__header-tab._active span,
body._dark .template_media__header-tab._active span {
    background-color: #fff;
}

.template_media__header-tab[data-tab="1"] span {
    -webkit-mask-image: url("/img/editor/icon-media-text.svg");
    mask-image: url("/img/editor/icon-media-text.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_media__header-tab[data-tab="2"] span {
    -webkit-mask-image: url("/img/editor/icon-media-img.svg");
    mask-image: url("/img/editor/icon-media-img.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_media__header-tab[data-tab="3"] span {
    -webkit-mask-image: url("/img/editor/icon-media-audio.svg");
    mask-image: url("/img/editor/icon-media-audio.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_media__header-tab[data-tab="4"] span {
    -webkit-mask-image: url("/img/editor/icon-media-video.svg");
    mask-image: url("/img/editor/icon-media-video.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_media__header-border {
    width: 2px;
    height: 80%;
    margin: 0 16px;
    border-radius: 2px;
    background-color: rgba(51, 51, 51, 0.25);
}

.template_media__body {
    display: none;
}

.template_media__body[data-tab="2"] .template_media-box__inner {
    grid-template-columns: repeat(3, 1fr);
}

.template_media__body._active {
    display: block;
}

.template_media__body[data-tab="3"] .template_media-box__item {
    min-height: 190px;
}

.template_editor[data-type="e-audio"] .template_media-box__item-icon,
.template_media__body[data-tab="3"] .template_media-box__item-icon {
    height: 22px;
    padding: 0 6px;
    justify-content: flex-start;
}

.template_editor[data-type="e-audio"] .template_media-box__item-icon span,
.template_media__body[data-tab="3"] .template_media-box__item-icon span {
    --s: 14px;
    -webkit-mask-image: url("/img/editor/icon-media-audio.svg");
    mask-image: url("/img/editor/icon-media-audio.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_media__body[data-tab="4"] .template_media-box__item-icon span {
    -webkit-mask-image: url("/img/editor/icon-media-video.svg");
    mask-image: url("/img/editor/icon-media-video.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_media__text-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.template_media__text {
    font-size: 16px;
    line-height: 1.25;
    outline: none;
    word-break: break-word;
}

.template_media__text:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: rgba(51, 51, 51, 0.5);
    pointer-events: none;
}

.template_media-box:not(:last-child) {
    margin-bottom: 32px;
}

.template_media-box:nth-child(2) .template_media-box__item-icon,
.template_editor .template_media-box:nth-child(3) .template_media-box__item-icon {
    flex: 0 0 36px;
}

.template_editor .template_media-box:nth-child(2) .template_media-box__item-icon {
    flex: 1;
}

.template_media-box__title {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.template_editor[data-type="e-image"] .template_media-box__inner {
    grid-template-columns: repeat(3, 1fr);
}

.template_media-box__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 24px;
}

.template_media-box__item {
    min-height: 215px;
    padding: 24px;
    border-radius: 10px;
    transition: all 0.2s;
    cursor: pointer;
}

.template_media-box__item-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.template_media-box__item-header {
    margin-bottom: 12px;
}

.template_media-box__item-img {
    max-width: 146px;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid rgba(41, 92, 201, 0.25);
}

body._dark .template_media-box__item-img {
    border-color: var(--textOpacity);
}

.template_media-box__item-grid {
    display: flex;
    justify-content: center;
    grid-gap: 10px;
}

.template_media-box__item-icon {
    height: 46px;
    border-radius: 5px;
    background-color: #295CC9;
    flex: 1;
}

body._dark .template_media-box__item-icon {
    background-color: var(--textOpacity);
}

.template_media-box__item-icon span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
    -webkit-mask-image: url("/img/editor/icon-media-img.svg");
    mask-image: url("/img/editor/icon-media-img.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_media-box__item-lines {
    flex: 1;
    position: relative;
}

.template_media-box__item-lines::before,
.template_media-box__item-lines::after {
    height: 7px;
    left: 0;
    border-radius: 5px;
    background-color: rgba(41, 92, 201, 0.15);
    position: absolute;
    content: "";
}

body._dark .template_media-box__item-lines::before,
body._dark .template_media-box__item-lines::after {
    background-color: var(--textOpacity);
}

.template_media-box__item-lines::before {
    width: 100%;
    top: 0;
}

.template_media-box__item-lines::after {
    width: 80%;
    top: 11px;
}

.template_media-box__item-title {
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.15;
    flex: 1;
}

.template_media-box__item-text {
    font-size: 14px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.template_media-item__header {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.15;
    display: flex;
    justify-content: space-between;
}

.template_media-item__header-inner {
    /*color: rgba(51, 51, 51, 0.5);*/
    display: inline-flex;
    align-items: center;
    opacity: .5;
    transition: all 0.2s;
    cursor: pointer;
}

.template_media-item__header-icon {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    margin-right: 7px;
    background-color: var(--text);
    transition: all 0.2s;
    transform: rotate(180deg);
    -webkit-mask-image: url("/img/editor/icon-angle.svg");
    mask-image: url("/img/editor/icon-angle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_media-item__remove {
    display: none;
}

.template_media-item__body {
    display: flex;
    grid-gap: 44px;
}

.template_media-item__text {
    font-size: 18px;
    line-height: 1.5;
    flex: 1;
    outline: none;
    word-break: break-word;
    position: relative;
}

.template_media-item__text:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: rgba(51, 51, 51, 0.5);
    pointer-events: none;
}

.template_media-item__descr {
    margin-top: 12px;
}

.template_media-item__descr._active .template_media-item__descr-btn span {
    transform: rotate(-45deg);
}

.template_media-item__descr-text {
    padding-bottom: 10px;
    display: none;
}

.template_media-item__descr-inner {
    display: flex;
}

.template_media-item__descr-content {
    font-size: 18px;
    line-height: 1.5;
    outline: none;
    word-break: break-word;
    flex: 1;
    position: relative;
}

.template_media-item__descr-content:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: var(--textOpacity);
    pointer-events: none;
    position: absolute;
}

.template_media-item__descr-btn {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1.15;
    color: var(--text);
    background-color: transparent;
    border: none;
    transition: all 0.2s;
    opacity: 0.5;
    cursor: pointer;
}

.template_media-item__descr-btn span {
    --s: 22px;

    width: var(--s);
    height: var(--s);
    margin-right: 7px;
    background-color: var(--text);
    -webkit-mask-image: url('/img/editor/icon-plus.svg');
    mask-image: url('/img/editor/icon-plus.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transition: all 0.2s;
    /*background-image: url("/img/editor/icon-plus.svg");*/
    /*background-position: center center;*/
    /*background-repeat: no-repeat;*/
    /*background-size: contain;*/
}

.template_editor .template_media-box__inner {
    grid-gap: 0;
}

.template_editor[data-type="e-image"] .template-item__header,
.template_editor[data-type="e-audio"] .template-item__header,
.template_editor[data-type="e-video"] .template-item__header {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.template_editor .template_media-box__item-title {
    font-size: 16px;
    line-height: 1.15;
}

.template_editor .template_media-box__item-text {
    font-size: 12px;
    line-height: 1.15;
}

.ef__list .ef__wrapper {
    margin-bottom: 15px;
}

.ef__content {
    display: grid;
    grid-gap: 15px;
}

.lcr .ef__wrapper {
    cursor: pointer;
}

.ef__wrapper {
    min-height: 144px;
    border-radius: 10px;
    border: 1px solid rgba(41, 92, 201, 0.15);
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    position: relative;
}

body._dark .ef__wrapper {
    border-color: var(--textOpacity);
}

.ef-file.ef {
    position: relative;
}

.lcr .ef {
    padding-bottom: 10px;
}

.ef {
    width: 100%;
    height: 100%;
    padding: 24px 16px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    position: absolute;
}

.lcr .ef,
.ef._active {
    opacity: 1;
    visibility: visible;
}

.ef__remove {
    --s: 22px;

    position: absolute;
    width: var(--s);
    height: var(--s);
    right: 16px;
    top: 24px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/common/remove.svg");
    mask-image: url("/img/common/remove.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transition: all 0.2s;
    z-index: 5;
    cursor: pointer;
}

.ef__inner {
    height: 100%;
    display: flex;
    align-items: center;
}

.ef__img {
    width: 116px;
    height: 74px;
    margin-right: 20px;
    flex-shrink: 0;
    position: relative;
}

.ef-file .ef__img {
    height: 83px;
    display: flex;
    justify-content: center;
}

/*.ef-file .ef__img img {*/
.ef-file .ef__img-uploaded {
    width: 70px;
    height: 100%;
    background-image: url('/img/editor/file-uploaded.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body._dark .ef-file .ef__img-uploaded {
    background-image: url('/img/editor/file-uploaded-dark.svg');
}

.ef__ext {
    width: 66px;
    height: 30px;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    left: 10px;
    bottom: 10px;
    border-radius: 2px;
    background-color: var(--accent);
    color: #fff;
    text-transform: uppercase;
    position: absolute;
}

/*.ef__img img {*/
.ef__img .ef__img-upload {
    width: 100%;
    height: 100%;
    background-image: url('/img/editor/file-upload.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body._dark .ef__img .ef__img-upload {
    background-image: url('/img/editor/file-upload-dark.svg');
}

.ef-file .ef__body {
    height: auto;
}

.ef__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lcr .ef__title-wrapper {
    padding-right: 0;
}

.ef__title-wrapper {
    margin-bottom: 12px;
    padding-right: 64px;
    display: flex;
    align-self: flex-start;
    position: relative;
}

.ef-file .ef__title {
    margin-bottom: 0;
}

.ef__title {
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
    outline: none;
    word-break: break-word;
}

.ef__title-edit {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    right: 32px;
    top: 0;
    background-color: var(--text);
    flex-shrink: 0;
    opacity: 0.5;
    -webkit-mask-image: url("/img/editor/icon-edit.svg");
    mask-image: url("/img/editor/icon-edit.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    position: absolute;
    cursor: pointer;
}

.ef__text {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.15;
}

.ef__link {
    color: var(--accent);
    cursor: pointer;
}

.ef__size {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.15;
}

.ef__button {
    width: 144px;
    height: 40px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 5px;
    border: none;
    background-color: var(--accent);
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.ef__button input {
    width: 100%;
    height: 100%;
    font-size: 0;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    position: absolute;
}

.ef__button input::-webkit-file-upload-button {
    display: none;
}

.ef__descr {
    font-size: 18px;
    line-height: 1.15;
    word-break: break-word;
    outline: none;
}

.ef__descr:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: var(--textOpacity);
    pointer-events: none;
}

.ef__row {
    display: flex;
    align-items: center;
}

.ef__input {
    height: 40px;
    margin-right: 10px;
    padding: 0 14px;
    font-size: 16px;
    line-height: 1.15;
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid #EEEFF1;
    flex: 1;
}

body._dark .ef__input {
    border-color: var(--textOpacity);
}

.ef__footer {
    margin-top: auto;
}

.lcr .ef__line {
    opacity: 0;
}

.ef__line {
    height: 7px;
    border-radius: 7px;
    background-color: #DFE7F7;
    overflow: hidden;
    position: relative;
}

.lcr .ef._active .ef__line {
    opacity: 1;
}

.ef._active .ef__line::before {
    animation: ef 2s linear 0s infinite;
}

.ef__line::before {
    height: 100%;
    width: 50%;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    border-radius: 7px;
    background-color: #295CC9;
    position: absolute;
    content: '';
}

.ef__add {
    font-size: 16px;
    line-height: 19px;
    opacity: .5;
    display: none;
    cursor: pointer;
}

.ef__add-inner {
    display: flex;
    align-items: center;
}

.ef__add-inner span {
    --s: 18px;
    width: var(--s);
    height: var(--s);
    margin-right: 7px;
    background-color: #333;
    -webkit-mask-image: url("/img/common/icon-plus.svg");
    mask-image: url("/img/common/icon-plus.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

@keyframes ef {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(200%);
    }
}

.template_image[data-type="2"] .template_image-item__plug,
.template_image[data-type="3"] .template_image-item__plug,
.template_image[data-type="4"] .template_image-item__plug {
    padding-top: 79.69348659%;
}

.template_image-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid transparent;
    align-self: start;
}

.template_image-item._uploaded .template_image-item__plug {
    display: none;
}

.template_image-item._uploaded .template_image-item__img {
    display: block;
}

.template_image-item._bordered {
    border-radius: 10px;
    border: 1px solid #EEEFF1;
}

body._dark .template_image-item._bordered {
    border-color: var(--textOpacity);
}

.template_image-item._bordered .template_media-item__descr {
    padding: 0 20px 20px;
}

.template_image-item__plug {
    padding-top: 38.1651376147%;
    position: relative;
}

.template_image-item__loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
}

.template_image-item__loading .loader {
    background-color: #f9fafd;
}

.template_image-item__img input,
.template_image-item__plug input {
    width: 100%;
    height: 100%;
    font-size: 0;
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    z-index: 2;
    cursor: pointer;
}

.template_image-item__plug-inner {
    padding: 24px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    background-color: var(--accentGray);
    position: absolute;
}

.template_image-item__plug-icon {
    --s: 100px;
    width: var(--s);
    height: var(--s);
    background-color: #C5D3F0;
    -webkit-mask-image: url("/img/editor/icon-image-upload.svg");
    mask-image: url("/img/editor/icon-image-upload.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .template_image-item__plug-icon {
    background-color: var(--textOpacity);
}

.template_image-item__img {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: none;
}

.template_image-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template_image-item__img-footer {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    bottom: 0;
    left: 0;
    border-radius: 0 0 10px 10px;
    background-color: rgba(51, 51, 51, 0.75);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 3;
}

.template_image-item__img-btns {
    margin-left: 14px;
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.template_image-item__img-btn {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.template_image-item__img-btn span {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
}

.template_image-item__img-border span {
    margin-right: 8px;
    -webkit-mask-image: url("/img/editor/icon-border-img.svg");
    mask-image: url("/img/editor/icon-border-img.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student-rec__wrapper {
    --color: #295CC9;
    --color-15: #EEF2FA;
    --color-25: rgba(41, 92, 201, 0.25);
}

body._dark .student-rec__wrapper {
    --color: #FFFFFF;
    --color-15: rgba(255, 255, 255, .25);
    --color-25: var(--svg);
}

.student-rec__tab {
    display: none;
}

.student-rec__tab._active {
    display: flex;
}

.student-rec__before,
.student-rec__progress {
    align-items: center;
}

.student-rec__start,
.student-rec__stop {
    --s: 40px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    margin-right: 18px;
    background-color: var(--color-15);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.student-rec__start span {
    --s: 24px;

    width: var(--s);
    height: var(--s);
    background-color: var(--color);
    -webkit-mask-image: url("/img/chk/rec.svg");
    mask-image: url("/img/chk/rec.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student-rec__before-text {
    color: var(--textOpacity);
}

.student-rec__stop {
    background-color: rgba(229, 64, 71, 0.15);
}

body._dark .student-rec__stop {
    background-color: var(--color-15);
}

.student-rec__stop span {
    --s: 16px;

    width: var(--s);
    height: var(--s);
    background-color: #E54047;
    border-radius: 4px;
    animation: blink 1s infinite ease;
}

body._dark .student-rec__stop span {
    background-color: var(--text);
}

@keyframes blink {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.student-rec__timer {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.student-rec__timer-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1;
    color: rgba(41, 92, 201, 0.75);
}

body._dark .student-rec__timer-info {
    color: var(--text);
}

.student-rec__audio {
    position: relative;
}

.student-rec__audio .xpl-audio {
    flex: 1;
}

.js-student-rec-audio-back {
    position: absolute;
    right: 0;
    bottom: 100%;
    font-size: 16px;
    line-height: 1.15;
    background-color: transparent;
    color: var(--textOpacity);
    border: none;
    transition: all .2s;
    cursor: pointer;
}

.js-student-rec-audio-back:hover {
    color: #E54047;
}

/*audio editor*/
.template_audio-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.template_audio-item._recording .template_audio-item__rec,
.template_audio-item._uploaded .template_audio-item__file {
    opacity: 1;
    visibility: visible;
}

.template_audio-item__plug {
    position: relative;
}

.template_audio-item__plug-inner {
    display: flex;
    align-items: center;
}

.template_audio-item__plug-icon {
    --s: 40px;

    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background-color: #edf1fa;
    position: relative;
}

body._dark .template_audio-item__plug-icon {
    background-color: var(--svg);
}

.template_audio-item__plug-icon:not(:last-child) {
    margin-right: 10px;
}

.template_audio-item__plug-icon span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
}

body._dark .template_audio-item__plug-icon span {
    background-color: var(--text);
}

.template_audio-item__plug-icon .hint {
    right: auto;
    left: 0;
}

.template_audio-item__plug-icon .hint::after {
    left: 20px;
    right: auto;
}

.template_audio-item__plug-rec {
    cursor: pointer;
}

.template_audio-item__plug-rec span {
    -webkit-mask-image: url("/img/editor/icon-audio-rec.svg");
    mask-image: url("/img/editor/icon-audio-rec.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_audio-item__plug-upload input {
    width: 100%;
    height: 100%;
    font-size: 0;
    left: 0;
    top: 0;
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    z-index: 2;
}

.template_audio-item__plug-upload span {
    -webkit-mask-image: url("/img/editor/icon-audio-upload.svg");
    mask-image: url("/img/editor/icon-audio-upload.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_audio-item__plug-text {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.template_audio-item__rec {
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--mainBg);
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 2;
}

.template_audio-item__rec-btn {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    margin-right: 18px;
    border-radius: 50%;
    background-color: rgba(229, 64, 71, 0.15);
    cursor: pointer;
    flex-shrink: 0;
}

body._dark .template_audio-item__rec-btn {
    background-color: var(--svg);
}

.template_audio-item__rec-btn span {
    --s: 16px;
    width: var(--s);
    height: var(--s);
    border-radius: 5px;
    background-color: #E54047;
}

body._dark .template_audio-item__rec-btn span {
    background-color: var(--text);
}

.template_audio-item__rec-info {
    flex: 1;
}

.template_audio-item__rec-header {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1;
    color: rgba(41, 92, 201, 0.75);
    display: flex;
    justify-content: space-between;
}

body._dark .template_audio-item__rec-header {
    color: var(--text);
}

.template_audio-item__rec-progress {
    height: 4px;
    border-radius: 4px;
    background-color: rgba(41, 92, 201, 0.15);
}

body._dark .template_audio-item__rec-progress {
    background-color: rgba(255, 255, 255, .25);
}

.template_audio-item__rec .noUi-target {
    height: 4px;
    border-radius: 5px;
    box-shadow: none;
    border: none;
    flex: 1;
}

.template_audio-item__rec .noUi-base {
    border-radius: 10px;
    background-color: #C5D3F0;
}

body._dark .template_audio-item__rec .noUi-base {
    background-color: rgba(255, 255, 255, .25);
}

.template_audio-item__rec .noUi-connect {
    background-color: #2154CF;
}

body._dark .template_audio-item__rec .noUi-connect {
    background-color: var(--text);
}

.template_audio-item__rec .noUi-horizontal .noUi-handle {
    --size: 8px;
    width: var(--size);
    height: var(--size);
    top: -2px;
    right: -5px;
    border-radius: 50%;
    box-shadow: none;
    border: none;
    background-color: #2154CF;
    cursor: pointer;
}

body._dark .template_audio-item__rec .noUi-horizontal .noUi-handle {
    background-color: var(--text);
}

.template_audio-item__rec .noUi-origin,
.template_audio-item__rec .noUi-handle::after,
.template_audio-item__rec .noUi-handle::before {
    display: none;
}

.template_audio-item__file {
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--mainBg);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 3;
}

.template_audio-item__file-remove {
    font-size: 16px;
    line-height: 1;
    right: 0;
    top: 0;
    color: rgba(51, 51, 51, 0.5);
    transition: all 0.2s;
    position: absolute;
    cursor: pointer;
}

.template_audio-item__menu {
    width: 28px;
    margin-left: 12px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.template_audio-item__menu-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.template_audio-item__menu-btn span {
    --s: 6px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background-color: rgba(51, 51, 51, 0.5);
}

.template_audio-item__menu-btn span:not(:last-child) {
    margin-bottom: 3px;
}

.template_audio-item__menu-inner {
    padding: 5px 7px;
    border-radius: 5px;
    top: 50%;
    left: -12px;
    transform: translate(-100%, -50%);
    box-shadow: 0 4px 9px rgba(224, 224, 224, 0.66);
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    position: absolute;
    z-index: 2;
}

.template_audio-item__menu-inner._active {
    opacity: 1;
    visibility: visible;
}

.template_audio-item__menu-item {
    padding: 8px 5px;
    font-size: 14px;
    line-height: 1.15;
    border-radius: 5px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.template_audio-item__menu-item span {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    margin-right: 8px;
    background-color: #333;
    flex-shrink: 0;
}

.template_audio-item__menu-descr span {
    -webkit-mask-image: url('/img/editor/icon-plus-circle.svg');
    mask-image: url('/img/editor/icon-plus-circle.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_audio-item__menu-remove span {
    -webkit-mask-image: url('/img/editor/icon-remove.svg');
    mask-image: url('/img/editor/icon-remove.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_audio-item__menu-item p {
    white-space: nowrap;
}

.template_audio-item__descr {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.5;
    outline: none;
    word-break: break-word;
}

.template_audio-item__descr:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: rgba(51, 51, 51, 0.5);
    pointer-events: none;
}
/*audio editor*/

.template_video[data-type="1"] .template_video-item__plug-link {
    width: 60%;
}

.template_video[data-type="1"] .template_video-item__plug-icon {
    --s: 100px;
}

.template_video-item {
    flex: 1;
    border: 1px solid transparent;
    align-self: start;
}

.template_video-item._uploaded .template_video-item__plug {
    display: none;
}

.template_video-item._uploaded .template_video-item__img {
    display: block;
}

.template_video-item._uploaded iframe {
    opacity: 1;
    visibility: visible;
}

.template_video-item._bordered {
    border-radius: 10px;
    border: 1px solid #EEEFF1;
}

.template_video-item._bordered .template_media-item__descr {
    padding: 0 20px 20px;
}

.template_video-item__plug {
    padding-top: calc(100% / 16 * 9 + 48px);
    position: relative;
}

.template_video-item__plug-inner {
    padding: 24px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    background-color: var(--accentGray);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    flex-direction: column;
}

.template_video-item__plug-icon {
    --s: 75px;
    width: var(--s);
    height: var(--s);
    background-color: #C5D3F0;
    -webkit-mask-image: url("/img/editor/icon-video-upload.svg");
    mask-image: url("/img/editor/icon-video-upload.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .template_video-item__plug-icon {
    background-color: var(--textOpacity);
}

.template_video-item:not(:only-child) .template_video-item__plug-icon {
    display: none;
}

.template_video-item__plug-link {
    width: 100%;
    margin-top: 44px;
    position: relative;
}

.template_video-item__plug-link::before {
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    left: 0;
    top: -30px;
    color: #E54047;
    text-align: center;
    position: absolute;
    content: 'Некорректная ссылка!';
    display: none;
}

.template_video-item__plug-link._error-size::before {
    content: 'Загрузите файл не более 100мб';
}

.template_video-item__plug-link._error::before {
    display: block;
}

.template_video-item__plug-link._error .template_video-item__plug-input {
    border-color: #E54047;
    color: #E54047;
}

.template_video-item__plug-input {
    width: 100%;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1;
    background-color: transparent;
    border-radius: 10px;
    border: 1px solid rgba(51, 51, 51, 0.15);
}

body._dark .template_video-item__plug-input {
    border-color: var(--svg);
}

.template_video-item__plug-btns {
    width: 60%;
    margin-top: 10px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.template_video[data-type="2"] .template_video-item__plug-btns,
.template_video-item:not(:only-child) .template_video-item__plug-btns {
    width: 100%;
    flex-wrap: wrap;
}

.template_video-item__plug-btns > *:not(:last-child) {
    margin-right: 10px;
}

.template_video[data-type="2"] .template_video-item__plug-btns > *:not(:last-child),
.template_video-item:not(:only-child) .template_video-item__plug-btns > *:not(:last-child) {
    margin-right: 0;
    margin-bottom: 10px;
}

.template_video-item__plug-btn {
    padding: 12px;
    font-size: 16px;
    line-height: 1.15;
    text-align: center;
    color: #295CC9;
    background-color: rgba(41, 92, 201, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 100%;
    position: relative;
    cursor: pointer;
}

body._dark .template_video-item__plug-btn {
    background-color: var(--svg);
    color: var(--text);
}

.template_video-item__plug-btn input {
    top: 0;
    left: 0;
    width: 0;
    border: none;
    border-radius: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    overflow: hidden;
}

.template_video-item__plug-btn input::file-selector-button {
    cursor: pointer;
    visibility: hidden;
}

.template_video-item__img {
    padding-top: calc(100% / 16 * 9 + 48px);
    border-radius: 10px;
    position: relative;
    display: none;
}

.template_video-item._video-answer .template_video-item__img {
    max-width: 365px;
    padding-top: calc(min(100%, 365px) + 48px);
}

.template_video-item__img iframe {
    top: 0;
    border-radius: 10px 10px 0 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 5;
}

.template_video-item__img-footer {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    bottom: 0;
    left: 0;
    border-radius: 0 0 10px 10px;
    background-color: #B8B8B8;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    z-index: 6;
}

body._dark .template_video-item__img-footer {
    background-color: rgba(255, 255, 255, .25);
}

.template_video-item__img-btn {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.template_video-item:not(:only-child) .template_video-item__img-btn p,
.template_video-item._video-answer .template_video-item__img-btn p {
    max-width: 0;
    margin-left: 10px;
    overflow: hidden;
    transition: max-width .5s ease;
    white-space: nowrap;
}

.template_video-item:not(:only-child) .template_video-item__img-btn:hover p,
.template_video-item._video-answer .template_video-item__img-btn:hover p {
    max-width: 200px;
}

.template_video-item__img-preview,
.template_video-item__img-download {
    position: relative;
    display: none;
}

.template_video-item__link + .template_video-item__img-footer .template_video-item__img-preview,
.video-item__video:not(._loading) + .template_video-item__img-footer .template_video-item__img-preview,
.video-item__video:not(._loading) + .template_video-item__img-footer .template_video-item__img-download {
    display: flex;
}

.template_video-item__img-btn span {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-color: #fff;
}

.template_video-item:not(:only-child) .template_video-item__img-btn span,
.template_video-item._video-answer .template_video-item__img-btn span {
    margin-right: 0;
}

.template_video-item__img-preview input {
    width: 100%;
    height: 100%;
    font-size: 0;
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    z-index: 2;
    cursor: pointer;
}

.template_video-item__img-back span {
    -webkit-mask-image: url("/img/editor/icon-video-upload.svg");
    mask-image: url("/img/editor/icon-video-upload.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_video-item__img-preview span {
    -webkit-mask-image: url("/img/editor/icon-media-img.svg");
    mask-image: url("/img/editor/icon-media-img.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_video-item__img-download span {
    -webkit-mask-image: url("/img/editor/icon-save.svg");
    mask-image: url("/img/editor/icon-save.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_video-item__img-border span {
    -webkit-mask-image: url("/img/editor/icon-border-video.svg");
    mask-image: url("/img/editor/icon-border-video.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.template_video-item__link {
    top: 0;
    right: 0;
    bottom: 48px;
    left: 0;
    border-radius: 10px 10px 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    cursor: pointer;
}

.template_video-item._uploaded-file .template_video-item__link {
    display: none;
}

.template_video-item__link::after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px 10px 0 0;
    background: radial-gradient(50% 50% at 50% 50%, rgba(51, 51, 51, 0.276) 0%, rgba(51, 51, 51, 0.4) 100%);
    position: absolute;
    content: "";
}

.template_video-item__link-icon {
    --s: 60px;
    width: var(--s);
    height: var(--s);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    transition: all 0.2s;
    position: absolute;
    display: block;
    z-index: 2;
    -webkit-mask-image: url("/img/editor/icon-play-video.svg");
    mask-image: url("/img/editor/icon-play-video.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.video-item__video {
    top: 0;
    right: 0;
    bottom: 48px;
    left: 0;
    border-radius: 10px 10px 0 0;
    position: absolute;
    overflow: hidden;
}

.student_lesson-videobox__preview .video-item__video {
    bottom: 0;
    border-radius: 10px;
}

/* стили загрузки видео здесь */
.video-item__video._loading {
    background-color: var(--accentGray);
}

._load .video-js {
    opacity: 0;
}

.video-item__video._loading:before,
._load .video-item__video:before {
    --s: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: var(--s);
    height: var(--s);
    background-color: #C5D3F0;
    -webkit-mask-image: url("/img/common/audio-loader.svg");
    mask-image: url("/img/common/audio-loader.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    position: absolute;
    content: '';
    z-index: 1;
}

._load .video-item__video:after {
    width: 100%;
    height: 100%;
    background: #f9fafd;
    position: absolute;
    content: '';
}

.video-item__video._loading:after {
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: var(--textOpacity);
    text-align: center;
    position: absolute;
    content: 'Загружаем видеофайл.\AПожалуйста, дождитесь окончания загрузки.';
    white-space: pre;
    z-index: 1;
}

.video-item__video._loading._pending:after {
    content: 'Конвертируем видеофайл...';
}

.video-item__video._loading .video-js {
    opacity: 0;
}

.video-item__video-zoom {
    top: 10px;
    right: 10px;
    width: fit-content;
    min-width: 100px;
    min-height: 60px;
    padding: 14px 22px;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    background-color: rgba(51, 51, 51, 0.75);
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
}

.template_video-item:not(._video-answer) .video-item__video:not(._loading) .video-item__video-zoom {
    display: flex;
}

.template_video-item._custom-poster .video-js:not(.vjs-has-started) + .video-item__video-zoom {
    display: none;
}

.video-item__video-zoom > *:not(:last-child) {
    margin-right: 10px;
}

.video-item__video-zoomer {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    cursor: pointer;
}

.video-item__video-zoom span {
    width: 1px;
    height: 20px;
    background-color: #fff;
    display: block;
}

.video-item__video-zoomer[data-action="zoom-out"] {
    -webkit-mask-image: url('/img/editor/icon-zoom-out.svg');
    mask-image: url('/img/editor/icon-zoom-out.svg');
}

.video-item__video-zoomer[data-action="zoom-in"] {
    -webkit-mask-image: url('/img/editor/icon-zoom-in.svg');
    mask-image: url('/img/editor/icon-zoom-in.svg');
}

/* стили для видеоплеера */
.video-js {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: inherit;
    font-size: 16px;
    position: absolute;
    opacity: 1;
    transition: opacity .2s ease;
}

.video-js._hidden {
    visibility: hidden;
    z-index: -1;
}

.video-js .vjs-control,
.video-js .vjs-button {
    outline: none;
    border: none;
}

.video-js .vjs-big-play-button {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin-top: unset;
    margin-left: unset;
    background: radial-gradient(50% 50% at 50% 50%, rgba(51, 51, 51, 0.276) 0%, rgba(51, 51, 51, 0.4) 100%);
    border: none;
    border-radius: 0;
    position: absolute;
    transition: transform .2s ease !important;
}

.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus {
    background-color: unset;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "";
    --s: 60px;
    width: var(--s);
    height: var(--s);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    transition: all 0.2s;
    position: absolute;
    display: block;
    z-index: 2;
    -webkit-mask-image: url('/img/editor/icon-play-video.svg');
    mask-image: url('/img/editor/icon-play-video.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.video-js:hover .vjs-big-play-button .vjs-icon-placeholder:before {
    transform: translate(-50%, -50%) scale(1.5);
}

.vjs-big-play-button .vjs-icon-placeholder:before {
    font-size: 0.8em;
    line-height: 1.4em;
}

.video-js .vjs-control-bar,
.video-popup__track {
    height: 6em;
    padding: 0 20px;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0.00) 0%, rgba(51, 51, 51, 0.75) 100%);
}

.video-js .vjs-control-bar {
    align-items: center;
}

.video-js .vjs-control {
    height: 3em;
}

.video-js .vjs-progress-holder {
    height: 0.2em;
}

.video-js .vjs-play-progress,
.video-js .vjs-load-progress div,
.video-js .vjs-progress-control .vjs-progress-holder,
.video-js .vjs-play-progress,
.video-js .vjs-load-progress {
    border-radius: 10px;
}

.video-js .vjs-load-progress div {
    background-color: rgba(255, 255, 255, 0.25);
}

.video-js.vjs-layout-x-small .vjs-progress-control,
.video-js.vjs-layout-x-small .vjs-playback-rate {
    display: flex;
}

.video-js.vjs-layout-x-small .vjs-picture-in-picture-control,
.video-js.vjs-layout-x-small .vjs-custom-control-spacer,
.video-js.vjs-layout-x-small .vjs-volume-panel {
    display: none;
}

.video-js.vjs-layout-x-small .vjs-control-bar {
    height: 4em;
}

.vjs-menu-item {
    outline: none;
}

div.vjs-poster {
    right: unset;
    bottom: unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
}

.student_template-task__video .vjs-poster {
    width: 100%;
    height: 100%;
}

.student_lesson-videobox__preview._horizontal div.vjs-poster,
.template_video-item._horizontal div.vjs-poster {
    /*width: var(--z);*/
    width: 100%;
    height: var(--z);
}

.student_lesson-videobox__preview._vertical div.vjs-poster,
.template_video-item._vertical div.vjs-poster {
    top: 0;
    left: 0;
    transform: unset;
    right: 0;
    bottom: 0;
    width: unset;
    height: unset;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.student_lesson-videobox__preview._vertical picture.vjs-poster,
.template_video-item._vertical picture.vjs-poster {
    backdrop-filter: blur(10px) brightness(40%);
    -webkit-backdrop-filter: blur(10px) brightness(40%);
    border-radius: 10px 10px 1px 1px;
}

.student_lesson-videobox__preview .vjs-poster img,
.student_lesson-videobox__preview .video-js .vjs-tech,
.template_video__item .vjs-poster img,
.student_template-task__video .vjs-poster img,
.template_video-item._video-answer .vjs-poster img {
    /*width: var(--z);*/
    /*height: var(--z);*/
    object-fit: cover;
}

.student_lesson-videobox__preview._vertical .vjs-poster img,
.template_video-item._vertical .vjs-poster img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: unset;
    height: var(--z);
    position: absolute;
}

.vjs-menu-content {
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.25);
}

.vjs-playback-rate .vjs-playback-rate-value {
    font-size: 16px;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vjs-menu li {
    font-size: 16px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.vjs-menu li.vjs-menu-item:not(.vjs-selected):focus,
.vjs-menu li.vjs-menu-item:not(.vjs-selected):hover,
.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
    background: rgba(255, 255, 255, 0.25);
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    padding: 2px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: rgba(51, 51, 51, 0.25);
}

.vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover, .js-focus-visible .vjs-menu li.vjs-selected:hover {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.vjs-playback-rate > .vjs-menu-button {
    top: -41%;
}

.video-js.vjs-layout-large .vjs-button > .vjs-icon-placeholder:before {
    font-size: 1.7em;
    line-height: 2;
}

.vjs-button > .vjs-icon-placeholder:before {
    font-size: 1.8em;
    line-height: 1.8;
}

.video-js.vjs-layout-small .vjs-control-bar, .video-popup__track {
    height: 4em;
    padding: 0 10px;
}

.video-js.vjs-layout-small .vjs-playback-rate {
    display: block;
}

.video-js.vjs-layout-small .vjs-picture-in-picture-control {
    display: none;
}

.video-js .vjs-tech {
    right: unset;
    bottom: unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.student_lesson-videobox__preview._horizontal .video-js .vjs-tech,
.template_video-item._horizontal .video-js .vjs-tech {
    width: var(--z);
    height: var(--z);
    width: 100%;
}

.template_video-item._horizontal .video-js .vjs-tech {
    object-fit: cover;
}

.student_lesson-videobox__preview._vertical .video-js .vjs-tech,
.template_video-item._vertical .video-js .vjs-tech {
    width: var(--z);
    height: var(--z);
}

.student_lesson-videobox__preview._vertical .video-js .vjs-tech {
    width: unset;
}

.template_video-item._video-content .video-js .vjs-tech,
.student_template-task__video .video-js .vjs-tech,
.template_video-item._video-answer .video-js .vjs-tech,
.template_video-item._video-answer .vjs-poster img,
.student_lesson-videobox__preview._video-answer .video-js .vjs-tech,
.student_lesson-videobox__preview._video-answer .vjs-poster img {
    object-fit: cover;
}

.video-popup__wrapper {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(51, 51, 51, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    position: fixed;
    z-index: 220;
}

.video-popup__wrapper._active {
    opacity: 1;
    visibility: visible;
}

.video-popup,
.student-video-popup,
.video_poster-popup {
    top: 20px;
    right: 20px;
    bottom: 20px;
    max-width: 730px;
    height: calc(100vh - 40px);
    width: calc(100vw - 40px);
    padding: 30px 40px;
    line-height: 1.15;
    border-radius: 10px;
    background-color: var(--mainBg);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, opacity 0.2s, visibility 0.2s;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateX(200%);
}

.video-popup,
.student-video-popup {
    bottom: unset;
    height: unset;
    padding: 60px 40px 30px;
    box-shadow: 0 0 40px rgba(192, 192, 192, 0.35);
    position: fixed;
    z-index: 100;
}

body._dark .video-popup,
body._dark .student-video-popup {
    box-shadow: 0px 4px 24px 0px #08090A;
}

.student-video-popup {
    max-width: 460px;
}

.video-popup._active,
.student-video-popup._active,
.video_poster-popup._active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.video-popup__drag {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    position: absolute;
    cursor: grab;
}

.video-popup__inner,
.video_poster-popup__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
}

.video-popup__inner {
    overflow-y: unset;
}

.video-popup__inner::-webkit-scrollbar,
.video_poster-popup__inner::-webkit-scrollbar {
    display: none;
}

.video-popup__title,
.video_poster-popup__title {
    margin-bottom: 30px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.15;
}

.video-popup__title {
    bottom: 100%;
    margin-bottom: 10px;
    position: absolute;
    user-select: none;
}

.video-popup__video {
    width: 100%;
    padding-top: calc(100% / 16 * 9);
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: black;
    position: relative;
    overflow: hidden;
}

._video-answer .video-popup__video {
    padding-top: 100%;
}

.stream-container {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.video-popup__timer,
.video-popup__camera {
    top: 10px;
    width: fit-content;
    min-width: 100px;
    min-height: 60px;
    padding: 14px 22px;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    background-color: rgba(51, 51, 51, 0.75);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.student-video-popup._rec .video-popup__camera,
.video-popup__camera {
    left: 10px;
    display: none;
}

.video-popup__camera._disabled {
    opacity: .3;
}

.video-popup__camera span {
    --s: 32px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
    -webkit-mask-image: url("/img/common/icon-switch-camera.svg");
    mask-image: url("/img/common/icon-switch-camera.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.video-popup__timer {
    right: 10px;
}

.video-popup__track {
    height: 6em;
    padding: 0 20px;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0.00) 0%, rgba(51, 51, 51, 0.75) 100%);
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.video-popup__track ._progress {
    --color: #fff;
    --color-15: rgba(255, 255, 255, .15);
    --color-25: rgba(255, 255, 255, .25);
}

.video-popup__track-timer {
    width: 100%;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.video-popup__track-progress {
    width: 100%;
    height: 0.26em;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.video-popup__track-progress::-webkit-slider-thumb {
    --s: 12px;
    width: var(--s);
    height: var(--s);
    border: none;
    border-radius: 50%;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}

.video-popup__track-progress::-moz-range-thumb {
    --s: 12px;
    width: var(--s);
    height: var(--s);
    margin-top: -12px;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    box-sizing: border-box;
}

.video-popup__btns,
.video_poster-popup__btns {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.video-popup__btns {
    margin-top: 10px;
}

.video-popup__btn,
.video_poster-popup__btn {
    min-width: 176px;
    padding: 16px;
    height: 50px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
    color: rgba(51, 51, 51, 0.50);
    background-color: #F7F8FA;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}

body._dark :where(
    .video-popup__btn,
    .video_poster-popup__btn
) {
    background-color: var(--svg);
    color: var(--text);
}

.video-popup__btn {
    width: 100%;
    flex-grow: 1;
    border: none;
}

.video-popup__btn:active:not(:disabled),
.video_poster-popup__btn:active:not(:disabled) {
    filter: brightness(0.95);
}

.video-popup__btn._active,
.video_poster-popup__btn._active {
    color: #fff;
    background-color: var(--accent);
}

.video-popup__btn:disabled {
    opacity: .3;
}

.video-popup__btn span {
    --s: 32px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: var(--s);
    height: var(--s);
    background-color: rgba(51, 51, 51, 0.5);
    -webkit-mask-image: url("/img/common/audio-loader.svg");
    mask-image: url("/img/common/audio-loader.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    position: absolute;
    z-index: 1;
    visibility: hidden;
}

.video-popup__btn._pending span {
    visibility: visible;
}

.video-popup__btn._ready {
    background: rgba(41, 92, 201, 0.15);
    color: #295CC9;
}

body._dark .video-popup__btn._ready {
    background-color: var(--svg);
    color: var(--text);
}

.video-popup__btn._active:active:not(:disabled) {
    filter: brightness(0.9);
}

.video-popup__btn._hidden {
    display: none;
}

.video-popup__btns > *:not(:last-child) {
    margin-right: 10px;
}

.video-popup__btn[onclick="videoRecStop()"] {
    position: relative;
    z-index: 1;
}

.video-popup__btn[onclick="videoRecStop()"] + .video-popup__veil {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

._stream-video,
._recorded-video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    object-fit: cover;
}

._recorded-video video {
    object-fit: cover;
}

.video-wrapper {
    flex-grow: 1;
}

.video_poster-popup__poster {
    width: 100%;
    margin-bottom: 20px;
    padding-top: 61%;
    background-color: rgba(51, 51, 51, 0.5);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.video_poster-popup__poster img {
    height: 100%;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
    position: absolute;
}

.video_poster-popup__poster-loading {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: absolute;
    visibility: hidden;
    opacity: 0;
}

.video_poster-popup__poster._loading .video_poster-popup__poster-loading {
    visibility: visible;
    opacity: 1;
}

.video_poster-popup__poster-loading div {
    --s: 54px;
    width: var(--s);
    height: var(--s);
    background-color: #295cc9;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/audio-loader.svg");
    mask-image: url("/img/common/audio-loader.svg");
}

.video_poster-popup__upload {
    width: 100%;
    max-width: 300px;
    height: 256px;
    margin-bottom: 30px;
    background: #F9FAFD;
    border: 1px solid #F7F8FA;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.video_poster-popup__upload-input {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: none;
    border-radius: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    overflow: hidden;
}

.video_poster-popup__upload-input::file-selector-button {
    cursor: pointer;
    display: none;
}

.video_poster-popup__upload-icon {
    --s: 60px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 8px;
    background-color: #C5D3F0;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/editor/icon-image-upload.svg");
    mask-image: url("/img/editor/icon-image-upload.svg");
}

.video_poster-popup__upload-text {
    padding: 0 42px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    color: #C5D3F0;
}

.profile-error {
    padding: 22px 44px 60px;
}

.profile-error__inner {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.profile-error__img img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

.profile-error__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
}

.profile-error__text {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
}

.profile-error__button {
    width: 175px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    background: #295CC9;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.profile-error__img {
    --s: 280px;
    width: var(--s);
    height: calc(var(--s) / 280 * 150);
    margin-bottom: 44px;
    position: relative;
}

.student_template__box {
    padding: 24px 32px;
    border: 2px solid transparent;
    border-radius: 10px;
    background-color: var(--mainBg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

.faq__info .student_template__box {
    padding: 0;
}

.lcr[data-type="theory"] .student_template__box {
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.lcr[data-type="theory"] .student_template__box:not(:last-child) {
    margin-bottom: 50px;
}

.student_template__box[data-type="file"] .student_template-task__new-title {
    margin-bottom: 4px;
}

.student_template__box._fail,
.student_template__box._error {
    border-color: #E54047;
}

.student_template__box._success {
    border-color: #54B268;
}

.student_template__box._fail,
.student_template__box._error {
    border-color: #E54047;
}

.student_template__box._fail .student_task-task__title,
.student_template__box._error .student_task-task__title {
    color: #E54047;
}

.student_template__box._oncheck .student_template-task__header-status {
    color: #295CC9;
}

.student_template__box._fail .student_template-task__header-status,
.student_template__box._error .student_template-task__header-status {
    color: #E54047;
}

.student_template__box:not(:last-of-type) {
    margin-bottom: 20px;
}

.student_template__box[data-type=queue] .student_test-question__answer {
    padding: 18px 18px 18px 60px;
    border-radius: 10px;
    background-color: rgba(41, 92, 201, 0.15);
    counter-increment: answer-count;
    position: relative;
}

body._dark .student_template__box[data-type=queue] .student_test-question__answer {
    background-color: var(--hover);
}

.student_template__box[data-type=queue] .student_test-question__answer::before {
    left: -24px;
    color: var(--textOpacity);
    content: counter(answer-count);
    position: relative;
}

.student_template__box[data-type=sort] .student_test-question__body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.student_template__box[data-type=sort] .student_test-question__answer {
    padding: 18px 24px;
    border-radius: 10px;
    background-color: #F7F8FA;
    position: relative;
    cursor: auto;
}

body._dark .student_template__box[data-type=sort] .student_test-question__answer {
    background-color: rgba(255, 255, 255, .25);
}

.student_template__box[data-type=sort] .student_test-question__primary .student_test-question__answer::after {
    top: 50%;
    right: -38px;
    transform: translateY(-50%);
    position: absolute;
    content: url("/img/editor/icon-angle.svg");
}

body._dark .student_template__box[data-type=sort] .student_test-question__primary .student_test-question__answer::after {
    content: url("/img/editor/icon-angle-dark.svg");
}

:where(.student_template__box[data-type=test], .student_template__box[data-type=test_m]) .student_test-question__answer {
    align-self: flex-start;
}

.student_template__box[data-type=sort] .student_test-question__secondary .student_test-question__answer {
    background-color: rgba(41, 92, 201, 0.15);
    cursor: pointer;
}

body._dark .student_template__box[data-type=sort] .student_test-question__secondary .student_test-question__answer {
    background-color: var(--hover);
}

.student_template__box-textbox {
    width: 100%;
    font-size: 18px;
    line-height: 1.5;
    word-break: break-word;
}

.student_template__box-textbox p:not(:last-child) {
    margin-bottom: 16px;
}

.student_template__box-textbox ul li,
.student_template__box-textbox ol li {
    margin-left: 1.1em;
}

.student_template__box-textbox ol li:nth-child(n + 10) {
    margin-left: 1.56em;
}

.student_template__box-textbox ol li:nth-child(n + 100) {
    margin-left: 2.02em;
}

.student_template-task {
    width: 100%;
    counter-increment: box-count;
}

.student_template-task__header {
    margin-bottom: 30px;
}

.student_template-task__header-top {
    margin-bottom: 28px;
    display: flex;
}

.student_template-task__title {
    margin-right: 24px;
    font-weight: 600;
    font-size: 22px;
    line-height: 125%;
    position: relative;
}

.student_template-task__title::after {
    content: counter(box-count);
}

.student_template-task__header-info {
    display: flex;
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
}

.student_template-task__header-attempts {
    color: var(--textOpacity);
}

.student_template-task__header-status {
    margin-left: 20px;
    color: #54B268;
}

.student_template-task__question {
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
}

.student_template-task__question a {
    word-break: break-word;
}

.student_template-task__answer+.student_template-task__comment,
.student_template-task__comment+.student_template-task__new,
.student_template-task__answer+.student_template-task__new,
.student_template-task__answer+.student_template-task__retake,
.student_template-task__comment+.student_template-task__retake {
    margin-top: 36px;
}

.student_template-task__answer-date {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.student_template-task__answer-text {
    font-size: 18px;
    line-height: 1.15;
    word-break: break-word;
}

.student_template-task__comment {
    padding: 10px 10px 15px;
    border-radius: 10px;
    background-color: var(--hover);
}

.student_template-task__comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.student_template-task__comment-user {
    --s: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.student_template-task__comment-user .user_avatar-box {
    margin-right: 14px;
}

.student_template-task__comment-name {
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.student_template-task__comment-date {
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.student_template-task__comment-text {
    font-size: 16px;
    line-height: 19px;
}

.student_template-task__retake-title {
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.student_template-task__new-title {
    margin-bottom: 24px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.student_template-task__textarea {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 8px;
    border: none;
    background-color: var(--hover);
    outline: none;
    transition: all 0.1s;
    word-break: break-word;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}

.student_template-task__textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.student_template-task__textarea:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: var(--textOpacity);
    pointer-events: none;
}

.student_template-task__audio {
    padding: 10px;
    font-size: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    align-self: stretch;
    outline: none;
}

.student_template-task__audio-icon {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background-color: rgba(41, 92, 201, 0.06);
    margin-right: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

.student_template-task__audio-icon span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
    -webkit-mask-image: url("/img/editor/icon-audio-rec.svg");
    mask-image: url("/img/editor/icon-audio-rec.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_template-task__audio-body {
    -webkit-box-flex: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.student_template-task__audio-title {
    font-size: 16px;
    color: rgba(51, 51, 51, 0.25);
}

.student_template-task__video._uploaded {
    max-width: 365px;
}

.student_template-task__video-inner {
    padding-top: 413px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.student_template-task__video._uploaded .student_template-task__video-inner {
    padding-top: calc(100% + 48px);
}

.student_template-task__video._read_only .student_template-task__video-inner {
    padding-top: 100%;
}

.student_template-task__video-plug {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #F9FAFD;
    position: absolute;
    z-index: 1;
}

body._dark .student_template-task__video-plug {
    background-color: #212223;
}

.student_template-task__video._uploaded .student_template-task__video-plug {
    z-index: -1;
}

.student_template-task__video-icon {
    --s: 75px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 20px;
    background-color: #C5D3F0;
    -webkit-mask-image: url('/img/editor/icon-video-upload.svg');
    mask-image: url('/img/editor/icon-video-upload.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .student_template-task__video-icon {
    background-color: var(--textOpacity);
}

.student_template-task__video-rec {
    padding: 10px 24px;
    font-size: 16px;
    line-height: 1.15;
    text-align: center;
    color: #295CC9;
    background-color: rgba(41, 92, 201, 0.15);
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

body._dark .student_template-task__video-rec {
    background-color: var(--svg);
    color: var(--text);
}

.student_template-task__video:not(._uploaded) .video-item__video {
    opacity: 0;
    z-index: -1;
}

.student_template-task__video .video-item__video {
    opacity: 0;
}

.student_template-task__video._uploaded .video-item__video {
    opacity: 1;
}

.student_template-task__video-footer {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    bottom: 0;
    left: 0;
    border-radius: 0 0 10px 10px;
    background-color: #B8B8B8;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
}

.student_template-task__video-btn {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.student_template-task__video-btn span {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-color: #fff;
}

.student_template-task__video-back span {
    -webkit-mask-image: url("/img/editor/icon-video-upload.svg");
    mask-image: url("/img/editor/icon-video-upload.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_template-task__video-preview span {
    -webkit-mask-image: url("/img/editor/icon-media-img.svg");
    mask-image: url("/img/editor/icon-media-img.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_template-task__video-download span {
    -webkit-mask-image: url("/img/editor/icon-save.svg");
    mask-image: url("/img/editor/icon-save.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_template-task__video-preview,
.student_template-task__video-download {
    display: none;
}

.video-item__video:not(._loading) + .student_template-task__video-footer .student_template-task__video-preview,
.video-item__video:not(._loading) + .student_template-task__video-footer .student_template-task__video-download {
    display: flex;
}

.student_template-task__files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-gap: 20px;
}

.student_test-question {
    width: 100%;
    counter-increment: box-count;
}

.student_test-question__header {
    margin-bottom: 30px;
}

.student_test-question__header-top {
    display: flex;
    margin-bottom: 24px;
}

.student_test-question__title {
    position: relative;
    margin-right: 24px;
    font-weight: 600;
    font-size: 22px;
    line-height: 125%;
}

.student_test-question__title::after {
    content: counter(box-count);
}

.student_test-question__header-info {
    display: flex;
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
}

.student_test-question__header-attempts {
    color: var(--textOpacity);
}

.student_test-question__header-status {
    margin-left: 20px;
    color: #54B268;
}

.student_template__box._fail .student_test-question__header-status,
.student_template__box._error .student_test-question__header-status {
    color: #E54047;
}

.student_test-question__body {
    display: flex;
    flex-direction: column;
}

.student_test-question__question {
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    word-break: break-word;
}

.student_test-question__info {
    font-size: 16px;
    line-height: 150%;
    color: var(--textOpacity);
}

:where(.student_template__box[data-type=queue], .student_test-question__secondary) .student_test-question__answer {
    cursor: grab !important;
}

:where(.student_template__box[data-type=queue], .student_test-question__secondary) .student_test-question__answer:active {
    cursor: grabbing !important;
}

.student_test-question__answer {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.student_test-question__answer._error input:checked {
    background-color: #E54047;
    border-color: #E54047;
}

.student_test-question__answer:not(:last-of-type) {
    margin-bottom: 20px;
}

.student_test-question__answer input {
    --s: 33px;
    width: var(--s);
    height: var(--s);
    margin-right: 18px;
    border: 1px solid #EEEFF1;
    background-color: var(--mainBg);
    background-size: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: all 0.2s;
    cursor: pointer;
}

body._dark .student_test-question__answer input {
    border-color: var(--textOpacity);
}

.student_test-question__answer input[type=checkbox] {
    border-radius: 8px;
}

.student_test-question__answer input[type=radio] {
    border-radius: 50%;
}

.student_test-question__answer input:checked {
    background-image: url("/img/common/checkmark.svg");
    background-color: #54B268;
    border-color: #54B268;
}

body._dark .student_test-question__answer input:checked {
    background-image: url("/img/common/checkmark-dark.svg");
    background-color: var(--text);
    border-color: var(--text);
}

.student-lesson__body {
    margin-bottom: 20px;
    padding: 40px;
    border-radius: 10px;
    background-color: #fff;
}

.student-lesson__next {
    margin-bottom: 20px;
    padding: 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 150%;
    text-align: center;
    border-radius: 10px;
    color: rgba(41, 92, 201, 0.5);
    background-color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.student-lesson__next:active {
    background-color: rgba(41, 92, 201, 0.1);
}

.student_lesson-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 32px;
    align-items: start;
}

.student_lesson-box__item .file {
    padding-top: 0;
}

.student_lesson-box:not(:last-of-type) {
    margin-bottom: 36px;
}

.student_lesson-box[data-type=files] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px 32px;
    justify-content: space-between;
}

.student_lesson-file {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 50px;
}

.student_lesson-box__textbox {
    width: 100%;
}

.student_lesson-box__descr {
    padding-top: 10px;
}

.student_lesson-box__textbox p:not(:last-child) {
    margin-bottom: 16px;
}

.student_lesson-box__attention {
    width: 100%;
    padding: 32px 16px 32px 24px;
    border: 2px solid;
    border-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.student_lesson-box__attention._attention-1 {
    border-color: #54B268;
}

.student_lesson-box__attention._attention-1 .student_lesson-box__attention-icon span {
    background-color: #54B268;
    -webkit-mask-image: url("/img/editor/icon-plus-warning1.svg");
    mask-image: url("/img/editor/icon-plus-warning1.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_lesson-box__attention._attention-2 {
    border-color: #02A4FF;
}

.student_lesson-box__attention._attention-2 .student_lesson-box__attention-icon span {
    background-color: #02A4FF;
    -webkit-mask-image: url("/img/editor/icon-plus-warning2.svg?1");
    mask-image: url("/img/editor/icon-plus-warning2.svg?1");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_lesson-box__attention._attention-3 {
    border-color: #E54047;
}

.student_lesson-box__attention._attention-3 .student_lesson-box__attention-icon span {
    background-color: #E54047;
    -webkit-mask-image: url("/img/editor/icon-plus-warning3.svg");
    mask-image: url("/img/editor/icon-plus-warning3.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_lesson-box__attention._attention-4 {
    border-color: #FF8C05;
}

.student_lesson-box__attention._attention-4 .student_lesson-box__attention-icon span {
    background-color: #FF8C05;
    -webkit-mask-image: url("/img/editor/icon-plus-warning4.svg");
    mask-image: url("/img/editor/icon-plus-warning4.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_lesson-box__attention._attention-5 {
    border-color: #7000FF;
}

.student_lesson-box__attention._attention-5 .student_lesson-box__attention-icon span {
    background-color: #7000FF;
    -webkit-mask-image: url("/img/editor/icon-plus-warning5.svg");
    mask-image: url("/img/editor/icon-plus-warning5.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_lesson-box__attention-icon {
    border-radius: 50%;
    margin-right: 20px;
    flex-shrink: 0;
}

.student_lesson-box__attention-icon span {
    --s: 57px;
    width: var(--s);
    height: var(--s);
}

.student_lesson-imgbox {
    border-radius: 10px;
    align-self: start;
}

.student_lesson-imgbox._bordered {
    border: 1px solid #EEEFF1;
}

.student_lesson-imgbox__wrapper {
    position: relative;
}

.student_lesson-imgbox__img {
    width: 100%;
    /*height: 100%;*/
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
}

/*.student_lesson-imgbox__descr,*/
/*.student_lesson-audio__descr {*/
/*    padding: 10px 0 0 0;*/
/*    word-break: break-word;*/
/*}*/

.student_lesson-videobox {
    border-radius: 10px;
    align-self: start;
}

.student_lesson-videobox._bordered {
    border: 1px solid #EEEFF1;
}

body._dark .student_lesson-videobox._bordered {
    border-color: var(--textOpacity);
}

.student_lesson-videobox__preview {
    padding-top: calc(100% / 16 * 9);
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    cursor: pointer;
}

.student_lesson-videobox__preview::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    background-image: radial-gradient(50% 50% at 50% 50%, rgba(51, 51, 51, 0.276) 0%, rgba(51, 51, 51, 0.4) 100%);
    opacity: 1;
    transition: opacity 0.5s;
    position: absolute;
    content: "";
}

.student_lesson-videobox__preview._uploaded-video {
    position: relative;
}

.student_lesson-videobox__preview._video-answer {
    max-width: 365px;
    padding-top: min(100%, 365px);
}

.student_lesson-videobox__preview._uploaded-video::before {
    display: none;
}

.student_lesson-videobox__preview iframe {
    left: 0;
    top: 0;
    border-radius: 10px;
    position: absolute;
    z-index: 2;
}

.student_lesson-videobox__icon {
    --s: 60px;
    width: var(--s);
    height: var(--s);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease 0s;
    position: absolute;
    background-color: #fff;
    -webkit-mask-image: url("/img/editor/icon-play-video.svg");
    mask-image: url("/img/editor/icon-play-video.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    cursor: pointer;
}

.student_lesson-imgbox__descr,
.student_lesson-audio__descr,
.student_lesson-videobox__descr {
    position: relative;
    padding: 10px 0 0 15px;
    font-size: 16px;
    line-height: 1.25;
    color: var(--textOpacity);
    word-break: break-word;
}

.student_lesson-imgbox__descr::before,
.student_lesson-audio__descr::before,
.student_lesson-videobox__descr::before {
    position: absolute;
    content: '';
    width: 5px;
    height: calc(100% - 10px);
    left: 0;
    top: 10px;
    background-color: var(--textOpacity);
}

.student_lesson-videobox._bordered .student_lesson-videobox__descr,
.student_lesson-imgbox._bordered .student_lesson-imgbox__descr {
    padding: 10px 20px;
}

.student_lesson-videobox._bordered .student_lesson-videobox__descr::before,
.student_lesson-imgbox._bordered .student_lesson-imgbox__descr::before {
    /*height: calc(100% - 20px);*/
    /*left: 10px;*/
    display: none;
}


/*.student_lesson-videobox._bordered .student_lesson-videobox__descr {*/
/*    padding: 10px 20px 20px;*/
/*}*/

/*.student_lesson-imgbox._bordered .student_lesson-imgbox__descr {*/
/*    padding: 10px 20px 20px;*/
/*}*/

.student_lesson-filebox {
    width: 100%;
    text-decoration: none;
    border-radius: 10px;
    color: inherit;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease 0s;
}

.student_lesson-filebox__icon {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    border-radius: 50%;
    background-color: rgba(41, 92, 201, 0.03);
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease 0s;
}

.student_lesson-filebox__icon span {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
    -webkit-mask-image: url("/img/editor/icon-file-answer.svg");
    mask-image: url("/img/editor/icon-file-answer.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.student_lesson-filebox__inner {
    flex-grow: 1;
}

.student_lesson-filebox__title {
    font-weight: 600;
    font-size: 16px;
}

.student_lesson-filebox__size {
    margin-top: -8px;
    font-size: 12px;
    color: rgba(51, 51, 51, 0.5);
}

.admin-tariff {
    min-width: 728px;
    padding: 24px;
    line-height: 115%;
}

.admin-tariff__inner {
    display: flex;
    flex-direction: column;
}

.admin-tariff__title {
    margin-bottom: 100px;
    font-weight: 600;
    font-size: 25px;
}

.admin-tariff__tariffs {
    margin-bottom: 60px;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: 20px;
}

.admin-tariff__tariff {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.admin-tariff__radio {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    border: 1px solid #EEEFF1;
    border-radius: 50%;
    background-color: #fff;
    background-image: url("/img/common/checkmark-small.svg");
    flex-shrink: 0;
    appearance: none;
    outline: none;
    transition: all 0.2s;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.admin-tariff__radio:checked {
    background-color: #54B268;
    border: 1px solid #54B268;
}

.admin-tariff__name {
    font-size: 16px;
}

.admin-tariff__stats {
    margin-bottom: 60px;
    display: flex;
    align-items: center;
}

.admin-tariff__stat {
    flex-grow: 1;
}

/* TEMPORARY */
.admin-tariff__stat:nth-child(1) {
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
}

.admin-tariff__stat:not(:last-of-type) {
    margin-right: 28px;
}

.admin-tariff__stat-name {
    margin-bottom: 16px;
    font-size: 18px;
}

.admin-tariff__stat-input {
    padding: 16px 20px;
    font-size: 16px;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.admin-tariff__stat-input input {
    flex-grow: 1;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.admin-tariff__stat-input input:disabled {
    background-color: transparent;
}

.admin-tariff__stat-input span {
    margin-left: 16px;
    color: rgba(51, 51, 51, 0.5);
}

.admin-tariff__btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-tariff__btn {
    min-width: 176px;
    padding: 16px;
    border-radius: 10px;
    text-align: center;
    color: rgba(51, 51, 51, 0.5);
    background-color: #F7F8FA;
    cursor: pointer;
}

.admin-tariff__btn._active {
    color: #fff;
    background-color: #295CC9;
    transition: all 0.2s ease;
}

.admin-tariff__btn._active:active {
    filter: brightness(0.9);
}

.admin-expand {
    min-width: 728px;
    padding: 24px;
    line-height: 115%;
}

.admin-expand__inner {
    display: flex;
    flex-direction: column;
}

.admin-expand__title {
    font-weight: 600;
    font-size: 25px;
}

.admin-expand__subtitle {
    margin-bottom: 74px;
    font-size: 16px;
}

.admin-expand__text {
    margin-bottom: 18px;
    font-size: 18px;
}

.admin-expand__input {
    margin-bottom: 180px;
    padding: 16px;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.admin-expand__input input {
    flex-grow: 1;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.admin-expand__input span {
    margin-left: 16px;
    color: rgba(51, 51, 51, 0.5);
}

.admin-expand__btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-expand__btn {
    min-width: 176px;
    padding: 16px;
    border-radius: 10px;
    text-align: center;
    color: rgba(51, 51, 51, 0.5);
    background-color: #F7F8FA;
    cursor: pointer;
}

.admin-expand__btn._active {
    color: #fff;
    background-color: #295CC9;
    transition: all 0.2s ease;
}

.admin-expand__btn._active:active {
    filter: brightness(0.9);
}

.admin-cancel {
    min-width: 728px;
    padding: 24px;
    line-height: 115%;
}

.admin-cancel[data-request=prolong] .admin-cancel__text span::after {
    content: "продление тарифа";
}

.admin-cancel[data-request=change_tariff] .admin-cancel__text span::after {
    content: "подключение нового тарифа";
}

.admin-cancel[data-request=expand_space] .admin-cancel__text span::after {
    content: "увеличение места в хранилище";
}

.admin-cancel__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.admin-cancel__img {
    width: 100%;
    max-width: 534px;
    margin-bottom: 30px;
}

.admin-cancel__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 25px;
}

.admin-cancel__text {
    margin-bottom: 36px;
    font-size: 18px;
}

.admin-cancel__btns {
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-cancel__btn {
    min-width: 176px;
    padding: 16px;
    font-size: 16px;
    border-radius: 10px;
    color: rgba(51, 51, 51, 0.5);
    background-color: #F7F8FA;
    cursor: pointer;
}

.admin-cancel__btn:not(:last-child) {
    margin-right: 20px;
}

.admin-cancel__btn._active {
    color: #fff;
    background-color: #295CC9;
    transition: all 0.2s ease;
}

.admin-cancel__btn._active:active {
    filter: brightness(0.9);
}

.admin {
    padding: 0 0 20px 90px;
}

.admin__header {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.admin__header-item {
    padding: 18px;
    border-radius: 10px;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.admin__header-item[data-type=all-users] {
    color: #fff;
    background-color: #295CC9;
}

.admin__header-item[data-type=all-users] .admin__header-icon {
    background-color: rgba(255, 255, 255, 0.25);
}

.admin__header-item[data-type=all-users] .admin__header-icon span {
    background-color: #fff;
    -webkit-mask-image: url("/img/admin/icon-all-users.svg");
    mask-image: url("/img/admin/icon-all-users.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin__header-item[data-type=all-users] .admin__header-text {
    color: #fff;
}

.admin__header-item[data-type=active-users] .admin__header-icon span {
    -webkit-mask-image: url("/img/admin/icon-active-users.svg");
    mask-image: url("/img/admin/icon-active-users.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin__header-item[data-type=ltv] .admin__header-icon span {
    -webkit-mask-image: url("/img/admin/icon-ltv.svg");
    mask-image: url("/img/admin/icon-ltv.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin__header-item[data-type=potential] {
    color: #fff;
    background-color: #0B1C35;
}

.admin__header-item[data-type=potential] .admin__header-icon {
    background-color: rgba(255, 255, 255, 0.25);
}

.admin__header-item[data-type=potential] .admin__header-icon span {
    background-color: #fff;
    -webkit-mask-image: url("/img/admin/icon-potential.svg");
    mask-image: url("/img/admin/icon-potential.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin__header-item[data-type=potential] .admin__header-text {
    color: #fff;
}

.admin__header-icon {
    --s: 68px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    border-radius: 10px;
    background-color: rgba(41, 92, 201, 0.06);
}

.admin__header-icon span {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
}

.admin__header-count {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 24px;
}

.admin__header-text {
    font-size: 16px;
    color: rgba(51, 51, 51, 0.5);
}

.admin__sortbox {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.admin__search {
    height: 60px;
    padding: 0 18px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    grid-column: span 5;
}

.admin__search-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 18px;
    background-color: #333;
    -webkit-mask-image: url("/img/common/search-black.svg");
    mask-image: url("/img/common/search-black.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.admin__search-input {
    width: 100%;
    border: none;
}

.admin__select {
    grid-column: span 2;
    position: relative;
}

/* TEMPORARY */
.admin__select[style="display: none;"] ~ .admin__select {
    grid-column: span 3;
}
/* TEMPORARY */

.admin__select._period .calendar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.admin__select._active .admin__select-body {
    opacity: 1;
    visibility: visible;
}

.admin__select-header {
    height: 60px;
    padding: 0 18px;
    border-radius: 10px;
    filter: drop-shadow(0px 4px 10px rgba(224, 224, 224, 0.26));
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.admin__select-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 18px;
    background-color: #333;
    -webkit-mask-image: url("/img/admin/icon-sort.svg");
    mask-image: url("/img/admin/icon-sort.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.admin__select-body {
    width: 100%;
    padding: 18px;
    top: 70px;
    border-radius: 10px;
    filter: drop-shadow(0px 4px 10px rgba(158, 158, 158, 0.3));
    background-color: #fff;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
}

.admin__select-item {
    height: 40px;
    padding: 0 10px;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.admin__select-item+.admin__select-item {
    margin-top: 10px;
}

.admin__select-item._active {
    background-color: #f7f8fa;
}

.admin__sortbox-search::-webkit-input-placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin__sortbox-search::-moz-placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin__sortbox-search:-ms-input-placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin__sortbox-search::-ms-input-placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin__sortbox-search::placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin__invite {
    font-size: 18px;
    line-height: 1.15;
    color: #fff;
    background-color: #2558CC;
    border-radius: 10px;
    cursor: pointer;
}

.admin__table-wrapper {
    padding: 20px 20px 0;
    border-radius: 10px;
    background-color: #fff;
}

.admin__table {
    height: fit-content;
    min-height: calc(100vh - 340px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.admin__table::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.admin__table-inner {
    min-width: 1340px;
}

.admin__table-header {
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 14px;
    line-height: 115%;
    text-align: left;
    display: grid;
    grid-template-columns: 1.4fr 3fr 1.1fr 1.2fr 1.1fr 1fr 2fr 24px;
    grid-gap: 40px;
}

.admin__table-header :where(p:nth-child(1)) {
    margin-left: 8px;
}

.admin__table-body._hidden {
    opacity: 0;
    visibility: hidden;
}

.admin_sortbox-hidden {
    width: 100%;
    left: 0;
    top: 100%;
    padding: 18px;
    border-radius: 10px;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    box-shadow: 0 4px 10px rgba(158, 158, 158, 0.3);
    transition: all 0.2s ease;
    z-index: 2;
    cursor: auto;
}

.admin_sortbox-hidden__item {
    padding: 10px;
    border-radius: 5px;
    color: rgba(51, 51, 51, 0.5);
    transition: all 0.2s ease;
    cursor: pointer;
}

.admin_sortbox-hidden__item:not(:first-of-type) {
    margin-top: 6px;
}

.admin_sortbox-hidden__item._active {
    color: #333;
    background-color: rgba(41, 92, 201, 0.06);
    transition: all 0.2s ease;
}

.admin_sortbox-hidden__calendar {
    max-height: 0;
    border-top: 1px solid transparent;
    overflow-x: hidden;
    transition: all 0.2s ease;
    cursor: auto;
}

.admin_sortbox-hidden__calendar._active {
    max-height: 500px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #EEEFF1;
}

.admin_sortbox-hidden__datebox {
    padding: 10px;
    margin-bottom: 26px;
}

.admin_sortbox-hidden__title {
    margin-bottom: 16px;
    color: rgba(51, 51, 51, 0.5);
}

.admin_sortbox-hidden__date {
    width: 100%;
    min-height: 50px;
    padding: 12px;
    text-align: center;
    border: 1px solid #E9E9EE;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    outline: none;
}

.admin_sortbox-hidden__date::-webkit-input-placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin_sortbox-hidden__date::-moz-placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin_sortbox-hidden__date:-ms-input-placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin_sortbox-hidden__date::-ms-input-placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin_sortbox-hidden__date::placeholder {
    color: rgba(51, 51, 51, 0.5);
}

.admin_sortbox-hidden__button {
    margin: 0 10px 10px;
    padding: 18px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    background-color: #295CC9;
    cursor: pointer;
}

.admin_table-row {
    padding: 30px 0;
    font-size: 14px;
    line-height: 150%;
    border-top: 1px solid transparent;
    display: grid;
    grid-template-columns: 1.4fr 3fr 1.1fr 1.2fr 1.1fr 1fr 2fr 24px;
    grid-gap: 40px;
}

.admin_table-row._hidden {
    display: none;
}

.admin_table-row[data-status="inactive"] > *:not(:nth-child(1), :nth-child(7), :nth-child(8)) {
    opacity: 0.5;
}

.admin_table-row[data-status=active] .admin_table-row__user-status::after {
    color: #54B268;
    position: relative;
    content: "Активен";
}

.admin_table-row[data-status=paused] .admin_table-row__user-status::after {
    color: #E54047;
    position: relative;
    content: "На паузе";
}

.admin_table-row[data-status=ended] .admin_table-row__user-status::after {
    color: #E54047;
    position: relative;
    content: "Закончился тариф";
}

.admin_table-row[data-status="inactive"] .admin_table-row__user-status::after {
    color: rgba(51, 51, 51, 0.5);
    position: relative;
    content: "Не подтвержден";
}

.admin_table-row:not(:first-child) {
    border-top: 1px solid #EAEAEA;
}

.admin_table-row>div:not(:last-child) {
    overflow: hidden;
}

.admin_table-row__register-id,
.admin_table-row__register-date,
.admin_table-row__user-status {
    margin-left: 8px;
}

.admin_table-row__partner {
    width: fit-content;
    margin-bottom: 4px;
    padding: 4px 8px;
    border-radius: 22px;
    color: #fff;
    background-color: #0B1C35;
    align-items: center;
    display: none;
}

.admin_table-row._partner .admin_table-row__partner {
    display: flex;
}

.admin_table-row__partner-icon {
    --s: 16px;
    width: var(--s);
    height: var(--s);
    margin-right: 6px;
    flex-shrink: 0;
    background-color: #fff;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/study/icon-task.svg");
    mask-image: url("/img/study/icon-task.svg");
}

.admin_table-row__partner-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 113.5%;
}

.admin_table-row__link {
    margin: 8px 0 8px 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

@keyframes copy-anim {
    from {transform: scale(0); opacity: 1;}
    to {transform: scale(2); opacity: 0;}
}

.admin_table-row__link-icon {
    --s: 18px;
    width: var(--s);
    height: var(--s);
    margin-right: 6px;
    flex-shrink: 0;
    background-image: url("/img/editor/icon-copy.svg");
    background-size: var(--s);
    background-position: center;
    filter: grayscale(1);
    opacity: 0.5;
    position: relative;
}

.admin_table-row__link-icon::before {
    --s: 18px;
    top: 0;
    left: 0;
    width: var(--s);
    height: var(--s);
    background-image: url("/img/editor/icon-copy.svg");
    background-size: var(--s);
    background-position: center;
    filter: grayscale(1);
    opacity: 0.5;
    position: absolute;
    content: '';
}

.admin_table-row__link._copied .admin_table-row__link-icon::before {
    animation: copy-anim .5s ease forwards;
}

.admin_table-row__link-text {
    font-size: 12px;
    line-height: 1.15;
    color: #9F9F9F;
    text-decoration: underline;
}

.admin_table-row__link-hidden {
    font-size: 0;
}

.admin_table-row__register-request {
    width: fit-content;
    height: fit-content;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 15px;
    color: #54B268;
    background-color: rgba(84, 178, 104, 0.15);
    display: flex;
    align-items: center;
}

.admin_table-row__register-request:not(:last-child) {
    margin-bottom: 4px;
}

.admin_table-row__register-request[data-request=prolong] span::after {
    content: "Продлить";
}

.admin_table-row__register-request[data-request=change_tariff] span::after {
    content: "Новый тариф";
}

.admin_table-row__register-request[data-request=expand_space] span::after {
    content: "Расширить";
}

.admin_table-row__register-request div {
    --s: 12px;
    max-width: 0;
    width: var(--s);
    height: var(--s);
    flex-shrink: 0;
    background-color: rgba(51, 51, 51, 0.25);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/crosshair.svg");
    mask-image: url("/img/common/crosshair.svg");
    cursor: pointer;
    transition: all .2s ease;
}

.admin_table-row__register-request:hover div {
    max-width: 20px;
    margin-left: 8px;
}

.admin_table-row__register-request div:hover {
    background-color: #E54047;
}

.admin_table-row__user {
    display: flex;
}

.admin_table-row__firstline {
    min-height: 80px;
}

.admin_table-row__user-avatarbox {
    --s: 44px;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    border-radius: 50%;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.admin_table-row__user-info {
    overflow: hidden;
    white-space: nowrap;
}

.admin_table-row__user-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin_table-row__user-email {
    line-height: 115%;
    color: rgba(51, 51, 51, 0.5);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin_table-row__user-tel {
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin_table-row__company {
    overflow: hidden;
    white-space: nowrap;
}

.admin_table-row__company-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin_table-row__company-info {
    margin-bottom: 14px;
    color: rgba(51, 51, 51, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin_table-row__company-site {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}

.admin_table-row__company-icon {
    --s: 18px;
    width: var(--s);
    height: var(--s);
    margin-right: 6px;
    background-color: rgba(51, 51, 51, 0.5);
    -webkit-mask-image: url("/img/admin/icon-site.svg");
    mask-image: url("/img/admin/icon-site.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.admin_table-row__company-link {
    color: rgba(51, 51, 51, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin_table-row__company-domain {
    margin-top: 10px;
    font-weight: 500;
    word-break: break-word;
}

.admin_table-row__tariff {
    overflow: hidden;
}

.admin_table-row__tariff-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin_table-row__tariff-remaining {
    margin-bottom: 10px;
}

.admin_table-row__tariff-request {
    color: #54B268;
}

.admin_table-row__tariff-request._error {
    color: #E54047;
}

.admin_table-row__tariff-request._error .admin_table-row__tariff-btn._accept {
    display: none;
}

.admin_table-row__tariff-request._error>span {
    background-color: #E54047;
}

.admin_table-row__tariff-request>span {
    --s: 16px;
    width: var(--s);
    height: var(--s);
    background-color: #54B268;
    flex-shrink: 0;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/info-circle.svg");
    mask-image: url("/img/common/info-circle.svg");
    display: block;
}

.admin_table-row__tariff-request>p {
    margin-bottom: 8px;
}

.admin_table-row__tariff-request ul {
    margin-left: 14px;
    hyphens: auto;
}

.admin_table-row__tariff-request:not(:last-child) {
    margin-bottom: 18px;
}

.admin_table-row__tariff-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin_table-row__tariff-btn {
    min-height: 30px;
    border-radius: 5px;
    flex-grow: 1;
    cursor: pointer;
}

.admin_table-row__tariff-btn:not(:last-of-type) {
    margin-right: 10px;
}

.admin_table-row__tariff-btn._accept {
    background-color: #54B268;
}

.admin_table-row__tariff-btn._accept>span {
    background-color: #fff;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/icon-success.svg");
    mask-image: url("/img/common/icon-success.svg");
}

.admin_table-row__tariff-btn._reject {
    background-color: #F7F8FA;
}

.admin_table-row__tariff-btn._reject>span {
    background-color: rgba(51, 51, 51, 0.5);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/icon-close.svg");
    mask-image: url("/img/common/icon-close.svg");
}

.admin_table-row__tariff-btn>span {
    --s: 16px;
    width: var(--s);
    height: var(--s);
    flex-shrink: 0;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/info-circle.svg");
    mask-image: url("/img/common/info-circle.svg");
    display: block;
}

.admin_table-row__limits-cloud:not(:last-child) {
    margin-bottom: 10px;
}

.admin_table-row__ltv-value {
    text-align: center;
}

.admin_table-row__prolongation-value {
    margin-bottom: 10px;
}

.admin_table-row__programs-title,
.admin_table-row__prolongation-title {
    font-weight: 600;
}

.admin_table-row__managerbox {
    display: flex;
}

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

.admin_table-row__manager-title {
    margin-bottom: 10px;
    font-size: 12px;
    color: rgba(51, 51, 51, 0.5);
}

.admin_table-row__managerbox._empty .admin_table-row__manager-avatarbox {
    background-color: #F7F8FA;
    background-image: none;
    position: relative;
}

.admin_table-row__managerbox._empty .admin_table-row__manager-avatarbox::after {
    --s: 24px;
    top: 50%;
    left: 50%;
    width: var(--s);
    height: var(--s);
    background-color: rgba(51, 51, 51, 0.5);
    transform: translate(-50%, -50%);
    flex-shrink: 0;
    position: absolute;
    content: "";
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/icon-user.svg");
    mask-image: url("/img/common/icon-user.svg");
}

.admin_table-row__managerbox._empty .admin_table-row__manager-name {
    width: 100%;
    position: relative;
}

.admin_table-row__managerbox._empty .admin_table-row__manager-name::before,
.admin_table-row__managerbox._empty .admin_table-row__manager-name::after {
    height: 12px;
    border-radius: 6px;
    position: absolute;
    content: "";
}

.admin_table-row__managerbox._empty .admin_table-row__manager-name::before {
    width: 100%;
    background-color: rgba(51, 51, 51, 0.15);
    transform: translateY(50%);
}

.admin_table-row__managerbox._empty .admin_table-row__manager-name::after {
    width: 70%;
    background-color: rgba(51, 51, 51, 0.06);
    transform: translateY(200%);
}

.admin_table-row__manager-avatarbox {
    --s: 44px;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    border-radius: 50%;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.admin_table-row__manager-name,
.admin_table-row__partner-company {
    font-weight: 500;
}

.admin_table-row__manager-pos {
    color: rgba(51, 51, 51, 0.5);
}

.admin_table-row__action {
    cursor: pointer;
    height: fit-content;
    position: relative;
}

.admin_table-row__action._active .admin_table-row__action-box {
    right: 20px;
    visibility: visible;
    opacity: 1;
    z-index: 2;
}

.admin_table-row__action-btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

.admin_table-row__action-icon {
    --s: 6px;
    width: var(--s);
    height: calc(var(--s) / 6 * 24);
    background-color: rgba(51, 51, 51, 0.5);
    -webkit-mask-image: url("/img/admin/icon-dots.svg");
    mask-image: url("/img/admin/icon-dots.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin_table-row__action-box {
    top: 0;
    right: 20px;
    min-width: 160px;
    padding: 8px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(158, 158, 158, 0.3);
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: absolute;
    cursor: auto;
    z-index: -1;
}

.admin_table-row__action-box._bottom {
    top: unset;
    bottom: 0;
}

.admin_table-row__action .admin_table-row__action-pause,
.admin_table-row__action .admin_table-row__action-prolongate,
.admin_table-row__action .admin_table-row__action-tariff,
.admin_table-row__action .admin_table-row__action-enlarge,
.admin_table-row__action .admin_table-row__action-log,
.admin_table-row__action .admin_table-row__action-manager,
.admin_table-row__action .admin_table-row__action-partner {
    margin-bottom: 4px;
    padding: 6px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.admin_table-row__action .admin_table-row__action-pause:hover,
.admin_table-row__action .admin_table-row__action-prolongate:hover,
.admin_table-row__action .admin_table-row__action-tariff:hover,
.admin_table-row__action .admin_table-row__action-enlarge:hover,
.admin_table-row__action .admin_table-row__action-log:hover,
.admin_table-row__action .admin_table-row__action-manager:hover,
.admin_table-row__action .admin_table-row__action-partner:hover {
    background-color: rgba(41, 92, 201, 0.06);
}

.admin_table-row__action .admin_table-row__action-pause>div,
.admin_table-row__action .admin_table-row__action-prolongate>div,
.admin_table-row__action .admin_table-row__action-tariff>div,
.admin_table-row__action .admin_table-row__action-enlarge>div,
.admin_table-row__action .admin_table-row__action-log>div,
.admin_table-row__action .admin_table-row__action-manager>div,
.admin_table-row__action .admin_table-row__action-partner>div {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    margin-right: 8px;
    background-color: #333;
    flex-shrink: 0;
}


.admin_table-row[data-status=active] .admin_table-row__action-pause div {
    -webkit-mask-image: url("/img/admin/icon-pause.svg");
    mask-image: url("/img/admin/icon-pause.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin_table-row[data-status=active] .admin_table-row__action-pause span::after {
    position: relative;
    content: "На паузу";
}

.admin_table-row[data-status=paused] .admin_table-row__action-pause div {
    -webkit-mask-image: url("/img/admin/icon-continue.svg");
    mask-image: url("/img/admin/icon-continue.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin_table-row[data-status=paused] .admin_table-row__action-pause span::after {
    position: relative;
    content: "Снять с паузы";
}

.admin_table-row[data-status=ended] .admin_table-row__action-pause {
    display: none;
}

.admin_table-row__action-prolongate div:nth-child(1) {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    margin-right: 8px;
    background-color: #333;
    -webkit-mask-image: url("/img/admin/icon-prolongate.svg");
    mask-image: url("/img/admin/icon-prolongate.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin_table-row__action-tariff div {
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/icon-diamond.svg");
    mask-image: url("/img/common/icon-diamond.svg");
}

.admin_table-row__action-enlarge div {
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/icon-add.svg");
    mask-image: url("/img/common/icon-add.svg");
}

.admin_table-row__action-log[data-log] span::after {
    position: relative;
    content: "Закрыть логи";
}

.admin_table-row__action-log span::after {
    position: relative;
    content: "Открыть логи";
}

.admin_table-row__action-log div {
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/icon-more.svg");
    mask-image: url("/img/common/icon-more.svg");
}

.admin_table-row__action-manager div {
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/icon-user.svg");
    mask-image: url("/img/common/icon-user.svg");
}

.admin_table-row__action-partner div {
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/study/icon-task.svg");
    mask-image: url("/img/study/icon-task.svg");
}

.admin_table-row__action-partner span::after {
    position: relative;
    content: "Сделать партнером";
}

.admin_table-row._partner .admin_table-row__action-partner span::after {
    content: "Сделать клиентом";
}

.admin_table-row__action-hidden {
    min-width: 250px;
    top: 100%;
    right: 0;
    padding: 14px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 4px 9px rgba(224, 224, 224, 0.66);
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    cursor: auto;
}

.admin_table-row__action-hidden._active {
    top: calc(100% + 10px);
    opacity: 1;
    visibility: visible;
}

.admin_table-row__action-hidden._bottom {
    top: auto;
    bottom: 100%;
}

.admin_table-row__action-hidden._bottom._active {
    top: auto;
    bottom: calc(100% + 10px);
}

.admin_table-row__action-hidden label {
    margin-bottom: 24px;
    display: block;
}

.admin_table-row__action-hidden input {
    width: 100%;
    margin-top: 10px;
    padding: 16px 24px;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
}

.admin_table-row__action-accept {
    width: 100%;
    padding: 16px;
    text-align: center;
    color: #fff;
    background-color: #295CC9;
    border-radius: 10px;
    cursor: pointer;
}

.admin_table-row__action-accept:not(:last-child) {
    margin-bottom: 10px;
}

.admin_table-row__action-cancel {
    width: 100%;
    padding: 16px;
    text-align: center;
    color: rgba(51, 51, 51, 0.5);
    background-color: #F7F8FA;
    border-radius: 10px;
    cursor: pointer;
    display: none;
}

.admin_table-row__action-cancel._active {
    display: block;
}

.admin_table-hidden {
    margin-bottom: 20px;
    padding: 15px 21px;
    background-color: rgba(247, 248, 250, 0.5);
    border-radius: 10px;
    display: none;
}

.admin_table-hidden._active {
    display: grid;
}

.admin_table-hidden__header {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 115%;
    text-align: left;
    display: grid;
    grid-template-columns: 0.5fr 1fr 3fr 3fr 2fr;
    gap: 10px;
}

.admin_table-hidden__row {
    padding: 20px 0;
    font-size: 14px;
    line-height: 115%;
    text-align: left;
    border-top: 1px solid #EAEAEA;
    display: grid;
    grid-template-columns: 0.5fr 1fr 3fr 3fr 2fr;
    gap: 10px;
}

.admin_table-hidden__status[data-status=completed] span {
    color: #54B268;
    background-color: rgba(84, 178, 104, 0.15);
}

.admin_table-hidden__status[data-status=completed] span::after {
    content: "Выполнена";
}

.admin_table-hidden__status[data-status=replaced] span {
    color: rgba(51, 51, 51, 0.5);
    background-color: rgba(51, 51, 51, 0.1);
}

.admin_table-hidden__status[data-status=replaced] span::after {
    content: "Заменена";
}

.admin_table-hidden__status[data-status=canceled] span {
    color: #E54047;
    background-color: rgba(229, 64, 71, 0.15);
}

.admin_table-hidden__status[data-status=canceled] span::after {
    content: "Отклонена";
}

.admin_table-hidden__status span {
    width: fit-content;
    height: fit-content;
    margin-top: -6px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 15px;
    display: block;
}

.admin_table-hidden__date {
    margin-bottom: 6px;
    color: rgba(51, 51, 51, 0.5);
}

.admin_table-hidden__initiator {
    display: flex;
}

.admin_table-hidden__initiator-avatarbox {
    --s: 44px;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("/img/assign_users/student2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.admin_table-hidden__initiator-name {
    font-weight: 500;
}

.tariff-new {
    margin-bottom: 20px;
    background-image: url('/img/tariff/tariff-new-bg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #FFFFFF;
    border-radius: 10px;
}

.tariff-new__inner {
    display: flex;
    align-items: center;
    padding: 24px 32px;
}

.tariff-new__left {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.tariff-new__icon {
    --s: 60px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    margin-right: 28px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.tariff-new__icon span {
    --s: 44px;

    width: var(--s);
    height: var(--s);
    background-image: url('/img/tariff/tariff-new-icon.svg?1');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.tariff-new__title {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.15;
}

.tariff-new__text {
    font-size: 16px;
    line-height: 1.15;
}

.tariff-new__link {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 267px;
    width: 100%;
    height: 50px;
    padding: 8px 12px;
    margin-left: auto;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.15;
    background-color: #FFFFFF;
    color: #3C96FF;
    border-radius: 5px;
    text-decoration: none;
}

.tariff {
    padding: 0 0 20px 110px;
}

.tariff__listbox {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}

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

.tariff-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
}

.tariff-list._active {
    grid-template-columns: repeat(9, 1fr);
}

.tariff[expired="1"] .tariff_options-list__item-included {
    color: #E54047;
}

.tariff[expired="1"] .tariff_options-list__item-btn {
    display: none;
}

.tariff-list__item {
    border-radius: 10px;
    background-color: #fff;
    grid-column: span 2;
}

.tariff-list__item._active {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
}

.tariff-list__item._active .tariff-list__item-info {
    border-radius: 10px 30px 30px 10px;
}

.tariff-list__item._error .tariff-list__item-warning {
    display: flex;
}

.tariff-list__item[data-tariff=class] .tariff-list__item-info {
    background-image: url("/img/tariff/tariff-class.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tariff-list__item[data-tariff=academy] .tariff-list__item-info {
    background-image: url("/img/tariff/tariff-academy.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tariff-list__item[data-tariff=university] .tariff-list__item-info {
    background-image: url("/img/tariff/tariff-university.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tariff-list__item[data-tariff=vip] .tariff-list__item-info {
    background-image: url("/img/tariff/tariff-vip.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tariff-list__item-info {
    height: 100%;
    min-height: 320px;
    padding: 26px;
    border-radius: 10px;
    background-color: #295CC9;
    color: #fff;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tariff-list__item-current {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 115%;
    opacity: 0.75;
}

.tariff-list__item-title {
    font-size: 16px;
    line-height: 115%;
    margin-bottom: 16px;
}

.tariff-list__item-title span {
    font-weight: 600;
}

.tariff-list__item-users {
    font-size: 16px;
    line-height: 115%;
}

.tariff-list__item-users span {
    font-weight: 600;
    font-size: 40px;
    line-height: 115%;
}

.tariff-list__item-bonus {
    font-size: 16px;
    line-height: 115%;
    font-weight: 600;
}

.tariff-list__item-pricelist {
    margin-top: auto;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 20px;
    line-height: 115%;
}

.tariff-list__item-price span {
    font-size: 30px;
    font-weight: 600;
    line-height: 115%;
}

.tariff-list__item-btn,
.tariff-list__item-warning {
    padding: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 115%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.tariff-list__item-warning {
    justify-content: start;
    display: none;
}

.tariff-list__item-warning>div {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-color: #fff;
    flex-shrink: 0;
    -webkit-mask-image: url("/img/common/info-circle.svg");
    mask-image: url("/img/common/info-circle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.tariff-list__item-warning p:not(:last-child) {
    margin-bottom: 12px;
}

.tariff-list__item-warning>span {
    font-weight: 400;
}

.tariff_item-stats {
    padding: 26px 26px 26px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: rgba(51, 51, 51, 0.25);
}

.tariff_item-stats__usage {
    position: relative;
}

.tariff_item-stats__usage:not(:last-child) {
    margin-bottom: 30px;
}

.tariff_item-stats__usage:not(:last-child)::after {
    width: 120px;
    height: 1px;
    bottom: -20px;
    background-color: rgba(51, 51, 51, 0.25);
    position: absolute;
    content: "";
}

.tariff_item-stats__usage._error .tariff_item-stats__info span {
    color: #E54047;
}

.tariff_item-stats__title {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 115%;
}

.tariff_item-stats__info {
    font-weight: 600;
    font-size: 22px;
    line-height: 115%;
}

.tariff_item-stats__info span {
    color: #333;
}

.tariff_options__header {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    color: rgba(51, 51, 51, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tariff_options__header-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: url("/img/common/info-circle.svg");
    mask-image: url("/img/common/info-circle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    background-color: rgba(51, 51, 51, 0.5);
    transform: rotate(180deg);
}

.tariff_options-list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}

.tariff_options-list__item {
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
}

.tariff_options-list__item[data-option=whitelabel] .tariff_options-list__item-decor {
    background-image: url("/img/tariff/white-label-decor.svg");
    background-position: bottom right;
}

.tariff_options-list__item[data-option=analytics] .tariff_options-list__item-decor {
    background-image: url("/img/tariff/analytics-decor.svg");
}

.tariff_options-list__item[data-option=edlerpro] .tariff_options-list__item-decor {
    background-image: url("/img/tariff/elder-pro-decor.svg");
}

.tariff_options-list__item[data-option=hr] .tariff_options-list__item-decor {
    background-image: url("/img/tariff/hr-decor.svg");
}

.tariff_options-list__item[data-option=courses] .tariff_options-list__item-decor {
    background-image: url("/img/tariff/courses-decor.svg");
}

.tariff_options-list__item-info {
    min-height: 230px;
    padding: 22px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
}

.tariff_options-list__item-included {
    margin-bottom: 22px;
    color: #54B268;
}

.tariff_options-list__item-title {
    margin-bottom: 8px;
    font-weight: 600;
}

.tariff_options-list__item-text:not(:last-child) {
    margin-bottom: 10px;
}

.tariff_options-list__item-btn {
    width: fit-content;
    margin-top: auto;
    padding: 10px 40px;
    font-weight: 600;
    border-radius: 10px;
    background-color: rgba(140, 102, 243, 0.168627451);
    color: #8B66F3;
    text-decoration: none;
    cursor: pointer;
}

.tariff_options-list__item-decor {
    min-width: 144px;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom 20px right 20px;
    flex-shrink: 0;
}

.tariff-enlarge {
    min-width: 728px;
    padding: 24px;
    line-height: 115%;
}

.tariff-enlarge__inner {
    display: flex;
    flex-direction: column;
}

.tariff-enlarge__tariff {
    min-height: 180px;
    margin-bottom: 28px;
    padding: 20px 14px;
    border-radius: 10px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.tariff-enlarge__tariff[data-tariff=class] {
    background-image: url("/img/tariff/tariff-enlarge-class.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tariff-enlarge__tariff[data-tariff=academy] {
    background-image: url("/img/tariff/tariff-enlarge-academy.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tariff-enlarge__tariff[data-tariff=university] {
    background-image: url("/img/tariff/tariff-enlarge-university.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tariff-enlarge__tariff[data-tariff=vip] {
    background-image: url("/img/tariff/tariff-enlarge-vip.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tariff-enlarge__tariff-name {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 30px;
}

.tariff-enlarge__tariff-template {
    margin-bottom: 8px;
    font-size: 16px;
}

.tariff-enlarge__tariff-template:nth-child(2) {
    margin-bottom: auto;
}

.tariff-enlarge__tariff-storage {
    font-weight: 600;
}

.tariff-enlarge__tariff-storage span {
    color: rgba(255, 255, 255, 0.5);
}

.tariff-enlarge__title {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 25px;
    line-height: 115%;
}

.tariff-enlarge__text {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 115%;
}

.tariff-enlarge__select {
    margin-bottom: 48px;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.tariff-enlarge__counter {
    margin-right: 16px;
    padding: 0 12px;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tariff-enlarge__counter div {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: #333;
    flex-shrink: 0;
    cursor: pointer;
}

.tariff-enlarge__counter div:nth-of-type(1) {
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/icon-minus.svg");
    mask-image: url("/img/common/icon-minus.svg");
}

.tariff-enlarge__counter div:nth-of-type(2) {
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/common/icon-plus.svg");
    mask-image: url("/img/common/icon-plus.svg");
}

.tariff-enlarge__counter input {
    min-height: 50px;
    text-align: center;
    border: none;
    background-image: none;
    background-color: transparent;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.tariff-enlarge__counter input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* TEMPORARY */
.tariff-enlarge__price {
    color: #fff;
}

.tariff-enlarge__price span {
    font-weight: 500;
}

.tariff-enlarge__price::after {
    font-weight: 500;
    content: " ₽";
}

.tariff-enlarge__btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tariff-enlarge__btn {
    padding: 16px;
    min-width: 176px;
    border-radius: 10px;
    font-weight: 500;
    text-align: center;
    color: rgba(51, 51, 51, 0.5);
    background-color: #F7F8FA;
    cursor: pointer;
}

.tariff-enlarge__btn._active {
    color: #fff;
    background-color: #295CC9;
    transition: all 0.2s ease;
}

.tariff-enlarge__btn._active:active {
    filter: brightness(0.9);
}

.tariff-confirm {
    padding: 60px 40px;
    text-align: center;
}

.tariff-confirm__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tariff-confirm__img {
    margin-bottom: 36px;
}

.tariff-confirm__title {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 25px;
    line-height: 115%;
}

.tariff-confirm__text {
    margin-bottom: 34px;
    font-size: 18px;
    line-height: 115%;
}

.tariff-confirm__text span {
    font-weight: 600;
}

.tariff-confirm__btns {
    display: flex;
    align-items: center;
}

.tariff-confirm__btn {
    min-width: 176px;
    padding: 16px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(51, 51, 51, 0.5);
    background-color: #F7F8FA;
    cursor: pointer;
}

.tariff-confirm__btn._active {
    color: #fff;
    background-color: #295CC9;
    transition: all 0.2s ease;
}

.tariff-confirm__btn._active:active {
    filter: brightness(0.9);
}

.tariff-confirm__btn:not(:last-child) {
    margin-right: 20px;
}

.options_item-radial {
    margin-right: 20px;
    --s: 124px;
    width: var(--s);
    min-width: unset;
    height: var(--s);
    border: 1px solid #F7F8FA;
    border-radius: 50%;
    background: linear-gradient(176.25deg, #5D37F4 3.29%, #8B67F3 101.18%);
    transform: rotate(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.options_item-radial__wrapper {
    --s: 124px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: conic-gradient(transparent calc(var(--progress) * 3.6deg), #F7F8FA 0deg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.options_item-radial__inner {
    --s: 100px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background-color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-180deg);
}

.options_item-radial__inner-bold {
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
}

.options_item-radial__inner-text {
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: rgba(51, 51, 51, 0.25);
}

.tariff_sett {
    padding-left: 90px;
}

.tariff_sett__inner {
    display: flex;
    gap: 20px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

.tariff_sett-item {
    min-width: 275px;
    max-width: 350px;
    flex: 1;
}

.tariff_sett-item[data-tariff="1"] .tariff_sett-item__header {
    background-image: url("/img/tariff/bg-tariff1.png");
}

.tariff_sett-item[data-tariff="2"] .tariff_sett-item__header {
    background-image: url("/img/tariff/bg-tariff2.png");
}

.tariff_sett-item[data-tariff="3"] .tariff_sett-item__header {
    background-image: url("/img/tariff/bg-tariff3.png");
}

.tariff_sett-item[data-tariff="4"] .tariff_sett-item__header {
    background-image: url("/img/tariff/bg-tariff4.png");
}

.tariff_sett-item[data-tariff="5"] .tariff_sett-item__header {
    background-image: url("/img/tariff/bg-tariff5.png");
}

.tariff_sett-item__inner {
    min-height: calc(100vh - 122px);
    display: flex;
    flex-direction: column;
}

.tariff_sett-item__header {
    border-radius: 10px;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
}

.tariff_sett-item__header-inner {
    min-height: 150px;
    padding: 24px;
    border-radius: 10px;
}

.tariff_sett-item__header-text {
    font-size: 16px;
    line-height: 1.15;
}

.tariff_sett-item__header-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
}

.tariff_sett-item__body {
    margin-top: -10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tariff_sett-item__body-inner {
    flex: 1;
    padding: 58px 24px 30px;
    border-radius: 0 0 10px 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.tariff_sett-item__body-main {
    flex: 1;
}

.tariff_sett-item__label {
    display: block;
}

.tariff_sett-item__label:not(:last-child) {
    margin-bottom: 30px;
}

.tariff_sett-item__label-name {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, 0.5);
}

.tariff_sett-item__input {
    display: flex;
}

.tariff_sett-item__input-field {
    width: 100%;
    height: 50px;
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    border: 1px solid #EAEAEA;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.tariff_sett-item__input-field:not(:last-child) {
    border-radius: 10px 0 0 10px;
    border-right: none;
}

.tariff_sett-item__input-text {
    width: 70px;
    height: 50px;
    padding-right: 18px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 0 10px 10px 0;
    border: 1px solid #EAEAEA;
    border-left: none;
    color: rgba(51, 51, 51, 0.5);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tariff_sett-item__button {
    width: 100%;
    height: 50px;
    margin-top: 32px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    border: none;
    background-color: #DFE7F7;
    color: #295CC9;
    cursor: pointer;
}

.tariff_end__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tariff_end__img {
    width: 480px;
    height: 230px;
    margin-bottom: 36px;
}

.tariff_end__img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.tariff_end__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
}

.tariff_end__text {
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
}

.tariff_end__button {
    width: 190px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    background-color: #295CC9;
    color: #fff;
    cursor: pointer;
}

.lesson-remove__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lesson-remove__img {
    --s: 205px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 44px;
}

.lesson-remove__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lesson-remove__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
}

.lesson-remove__text {
    margin-bottom: 44px;
    font-size: 18px;
    line-height: 1.15;
}

.lesson-remove__text span {
    font-weight: 500;
}

.lesson-remove__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.lesson-remove__button {
    width: 175px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    border-radius: 10px;
    cursor: pointer;
}

.lesson-remove__cancel {
    margin-right: 20px;
    background-color: #f7f8fa;
    color: rgba(51, 51, 51, .5);
}

.lesson-remove__confirm {
    background-color: #295CC9;
    color: #fff;
}

.admin-profile {
    padding: 0;
}

.admin-profile__inner {
    height: 100%;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 380px auto;
    background-color: rgba(41, 92, 201, 0.03);
    overflow: hidden;
}

.admin-profile__body {
    padding: 20px;
}

.admin-profile__header {
    min-height: 74px;
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.admin-profile__header-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-left: 10px;
    margin-right: 20px;
    background-color: #333;
    flex-shrink: 0;
}

.admin-profile__header-text {
    margin-right: auto;
    font-weight: 500;
    font-size: 18px;
    line-height: 115%;
}

.admin-profile__header-button {
    margin-left: 10px;
    padding: 14px 38px;
    font-weight: 500;
    font-size: 15px;
    line-height: 115%;
    border-radius: 10px;
    color: #295CC9;
    background-color: rgba(41, 92, 201, 0.15);
    transition: all 0.2s ease;
    cursor: pointer;
}

.admin-profile__main {
    border-radius: 10px;
    height: calc(100vh - 174px);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}

.admin-profile__main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.admin-profile__notifications {
    display: none;
    height: 100%;
}

.admin-profile__notifications._active {
    display: block;
}

.admin-profile__notifications .admin-profile__header-icon {
    -webkit-mask-image: url("/img/profile/history-icon.svg");
    mask-image: url("/img/profile/history-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin-profile__notification-box:not(:last-child) {
    margin-bottom: 20px;
}

.admin-profile__notification-date {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 115%;
    text-align: center;
    color: rgba(51, 51, 51, 0.5);
}

.admin-profile__notification-item {
    padding: 12px;
    border-radius: 10px;
    background-color: #fff;
}

.admin-profile__notification-item:not(:last-child) {
    margin-bottom: 10px;
}

.admin-profile__notification-header {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.admin-profile__notification-avatarbox {
    --s: 38px;
    margin-right: 12px;
}

.admin-profile__notification-author {
    margin-right: auto;
    line-height: 1;
    flex-grow: 1;
}

.admin-profile__notification-name {
    font-weight: 500;
    font-size: 16px;
}

.admin-profile__notification-position {
    font-size: 14px;
    color: rgba(51, 51, 51, 0.5);
}

.admin-profile__notification-text {
    padding-left: 50px;
    font-size: 16px;
    line-height: 115%;
}

.admin-profile__notification-new {
    margin-left: 14px;
    font-weight: 15;
    font-size: 14px;
    line-height: 115%;
    color: #E54047;
}

.admin-profile__settings {
    display: none;
}

.admin-profile__settings._active {
    display: block;
}

.admin-profile__settings .admin-profile__header-icon {
    -webkit-mask-image: url("/img/profile/settings-icon.svg");
    mask-image: url("/img/profile/settings-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin-profile__settings-item {
    padding: 24px;
    font-size: 16px;
    line-height: 115%;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
}

.admin-profile__settings-item:not(:last-of-type) {
    margin-bottom: 20px;
}

.admin-profile__settings-item._error {
    border: 1px solid #E54047;
}

.admin-profile__settings-item._error .admin-profile__settings-title {
    color: #E54047;
}

.admin-profile__settings-item._success {
    border: 1px solid #54B268;
}

.admin-profile__settings-item._success .admin-profile__settings-success {
    display: flex;
}

.admin-profile__settings-userinfo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 20px
}

.admin-profile__settings-title {
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 115%;
}

.admin-profile__settings-success {
    top: 20px;
    right: 24px;
    color: #54B268;
    align-items: center;
    position: absolute;
    display: none;
}

.admin-profile__settings-success div {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    background-color: #54B268;
    flex-shrink: 0;
    -webkit-mask-image: url("/img/common/icon-success.svg");
    mask-image: url("/img/common/icon-success.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin-profile__settings-body {
    display: flex;
    align-items: center;
}

.admin-profile__settings-input {
    padding: 16px 24px;
    font-size: 16px;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    flex-grow: 1;
}

.admin-profile__settings-gender {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.admin-profile__settings-checkbox {
    font-size: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.admin-profile__settings-checkbox:not(:last-of-type) {
    margin-right: 32px;
}

.admin-profile__settings-checkbox>input {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    border: 1px solid #EEEFF1;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("/img/common/checkmark.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: all 0.2s;
    cursor: pointer;
}

.admin-profile__settings-checkbox>input:checked {
    background-color: #54B268;
    border-color: #54B268;
}

.admin-profile__settings-button {
    margin-left: 16px;
    padding: 16px 48px;
    font-weight: 500;
    font-size: 16px;
    line-height: 115%;
    color: #fff;
    border-radius: 10px;
    background-color: #295CC9;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
    display: none;
    /* YO 09.03.2023 */
}

.admin_profile-aside {
    padding: 24px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.admin_profile-aside__header {
    margin-top: 46px;
    margin-bottom: 100px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin_profile-aside__header-avatarbox {
    --s: 120px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 30px;
    font-size: 46px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.admin_profile-aside__header-avatarbox[style*=image] p {
    display: block;
}

.admin_profile-aside__header-avatarbox[style*=image]:hover p {
    opacity: 1;
}

.admin_profile-aside__header-avatarbox:hover div {
    background-color: rgba(51, 51, 51, 0.3);
    opacity: 1;
}

.admin_profile-aside__header-avatarbox .upload_wrapper {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-size: 0;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
}

.admin_profile-aside__header-avatarbox div {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.2s ease;
    position: absolute;
    z-index: 1;
    content: "";
}

.admin_profile-aside__header-avatarbox div span {
    --s: 34px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
    -webkit-mask-image: url("/img/common/icon-gallery.svg");
    mask-image: url("/img/common/icon-gallery.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin_profile-aside__header-avatarbox p {
    top: 100%;
    left: 0;
    width: 100%;
    padding-top: 4px;
    font-weight: 500;
    font-size: 16px;
    color: rgba(51, 51, 51, 0.5);
    text-align: center;
    text-transform: none;
    opacity: 0;
    transition: all 0.2s ease;
    position: absolute;
    cursor: pointer;
    display: none;
}

.admin_profile-aside__header-avatarbox p:hover {
    color: #E54047;
}

.admin_profile-aside__header-avatarbox img~p {
    display: block;
}

.admin_profile-aside__header-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 115%;
}

.admin_profile-aside__header-status {
    font-size: 16px;
    line-height: 115%;
    color: rgba(51, 51, 51, 0.5);
}

.admin_profile-aside__links {
    margin-bottom: auto;
}

.admin_profile-aside__link {
    padding: 8px 20px;
    font-weight: 500;
    font-size: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.admin_profile-aside__link:not(:last-of-type) {
    margin-bottom: 12px;
}

.admin_profile-aside__link[data-type=history] .admin_profile-aside__link-icon {
    -webkit-mask-image: url("/img/profile/history-icon.svg");
    mask-image: url("/img/profile/history-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin_profile-aside__link[data-type=settings] .admin_profile-aside__link-icon {
    -webkit-mask-image: url("/img/profile/settings-icon.svg");
    mask-image: url("/img/profile/settings-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.admin_profile-aside__link._active .admin_profile-aside__link-arrow,
.admin_profile-aside__link._unread .admin_profile-aside__link-notice {
    display: block;
}

.admin_profile-aside__link-notice {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #E54047;
    position: absolute;
    content: "";
    display: none;
}

.admin_profile-aside__link-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    background-color: #333;
}

.admin_profile-aside__link-text {
    margin-right: auto;
}

.admin_profile-aside__link-arrow {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-left: 10px;
    background-color: #333;
    -webkit-mask-image: url("/img/profile/arrow-black-icon.svg");
    mask-image: url("/img/profile/arrow-black-icon.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    display: none;
}

.admin_profile-aside__buttons {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.admin_profile-aside__btn {
    padding: 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 115%;
    text-align: center;
    border-radius: 10px;
    transition: background-color 0.2s ease;
    flex-grow: 1;
    cursor: pointer;
}

.admin_profile-aside__btn:not(:last-child) {
    margin-right: 10px;
}

.admin_profile-aside__btn._blue {
    color: #295CC9;
    background-color: rgba(41, 92, 201, 0.15);
}

.admin_profile-aside__btn._red {
    color: #E54047;
    background-color: rgba(229, 64, 71, 0.15);
}

.admin-profile_notification-plug {
    height: 100%;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
}

.admin-profile_notification-plug__inner {
    max-width: 678px;
    text-align: center;
    flex-direction: column;
}

.admin-profile_notification-plug__img {
    width: 100%;
    max-width: 260px;
    margin-bottom: 50px;
    flex-shrink: 1;
}

.admin-profile_notification-plug__title {
    margin-bottom: 18px;
    font-weight: 500;
    font-size: 20px;
    line-height: 115%;
}

.admin-profile_notification-plug__info {
    font-size: 16px;
    line-height: 115%;
}

trix-editor {
    min-height: 20px;
}

trix-editor * {
    word-break: break-word;
}

trix-editor:focus-visible {
    outline: none;
}

.student_lesson-theory h1,
trix-editor h1 {
    font-weight: 600;
    font-size: 26px;
    line-height: 1.5;
}

.student_lesson-theory h2,
trix-editor h2 {
    font-weight: 600;
    font-size: 23px;
    line-height: 1.5;
}

.student_lesson-theory h3,
trix-editor h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
}

trix-editor ul li,
trix-editor ol li,
.student_lesson-theory ul li,
.student_lesson-theory ol li,
.warning__main-text ul li,
.warning__main-text ol li {
    margin-left: 1.1em;
}

trix-editor ol li:nth-child(n + 10),
.student_lesson-theory ol li:nth-child(n + 10),
.warning__main-text ol li:nth-child(n + 10) {
    margin-left: 1.56em;
}

trix-editor ol li:nth-child(n + 100),
.student_lesson-theory ol li:nth-child(n + 100),
.warning__main-text ol li:nth-child(n + 100) {
    margin-left: 2.02em;
}

trix-editor ol li::marker,
.student_lesson-theory ol li::marker,
.warning__main-text ol li::marker {
    font-weight: 600;
}

trix-editor a,
.student_lesson-theory a,
.warning__main-text a {
    color: #295CC9;
    word-break: break-word;
}


trix-toolbar {
    padding: 8px;
    left: 0;
    border-radius: 14px;
    border: 1px solid rgba(41, 92, 201, 0.15);
    background-color: var(--mainBg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    position: absolute;
    z-index: 100;
}

body._dark trix-toolbar {
    border-color: var(--textOpacity);
}

.template_media-item[data-type="3"] trix-toolbar {
    left: auto;
    right: 0;
}

trix-toolbar._active,
trix-toolbar._color .editor__color,
trix-toolbar._bgc .editor__bgc,
.trix-button__color.trix-active span,
.trix-button__bgc.trix-active span {
    opacity: 1;
    visibility: visible;
}

align-center {
    text-align: center;
    display: block;
}

.trix-button {
    --s: 36px;
    width: var(--s);
    height: var(--s);
    font-size: 0;
    border-radius: 10px;
    border: none;
    background-color: transparent;
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
}

.trix-button.trix-active {
    background-color: rgba(41, 92, 201, 0.25);
}

body._dark .trix-button.trix-active {
    background-color: var(--hover);
}

.trix-button::after {
    --s: 24px;

    width: var(--s);
    height: var(--s);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(51, 51, 51, .75);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    position: absolute;
    content: "";
}

.trix-button.trix-active::after,
body._dark .trix-button.trix-active::after {
    background-color: var(--text);
}

.trix-button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.trix-button:not(:last-child) {
    margin-right: 16px;
}

.trix-button-row,
.trix-button-group {
    display: flex;
}

.trix-button-group:not(:last-child) {
    margin-right: 10px;
}

.trix-button__color,
.trix-button__bgc {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.trix-button__color:not(:last-child),
.trix-button__bgc:not(:last-child) {
    margin-right: 10px;
}

.trix-button__color span,
.trix-button__bgc span {
    --s: 16px;
    width: var(--s);
    height: var(--s);
    opacity: 0;
    visibility: hidden;
    background-image: url("/img/common/checkmark.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.trix-button__color[color="#999999"] {
    background-color: #999999;
}

.trix-button__color[color="#940EF2"] {
    background-color: #940EF2;
}

.trix-button__color[color="#295CC9"] {
    background-color: #295CC9;
}

.trix-button__color[color="#54B268"] {
    background-color: #54B268;
}

.trix-button__color[color="#FCBF47"] {
    background-color: #FCBF47;
}

.trix-button__color[color="#E54047"] {
    background-color: #E54047;
}

.trix-button__bgc[bgc="#D3D6DD"] {
    background-color: #D3D6DD;
}

.trix-button__bgc[bgc="#E1D1FA"] {
    background-color: #E1D1FA;
}

.trix-button__bgc[bgc="#D1DCF3"] {
    background-color: #D1DCF3;
}

.trix-button__bgc[bgc="#D8E9E5"] {
    background-color: #D8E9E5;
}

.trix-button__bgc[bgc="#F1EBE0"] {
    background-color: #F1EBE0;
}

.trix-button__bgc[bgc="#EDD8E0"] {
    background-color: #EDD8E0;
}

.trix-button--icon-bold::after {
    -webkit-mask-image: url('/img/editor/hint-bold.svg?1');
    mask-image: url('/img/editor/hint-bold.svg?1');
    /*background-image: url("/img/editor/hint-bold.svg");*/
}

.trix-button--icon-italic::after {
    -webkit-mask-image: url('/img/editor/hint-italic.svg?1');
    mask-image: url('/img/editor/hint-italic.svg?1');
    /*background-image: url("/img/editor/hint-italic.svg");*/
}

.trix-button--icon-underline::after {
    -webkit-mask-image: url('/img/editor/hint-underline.svg?1');
    mask-image: url('/img/editor/hint-underline.svg?1');
    /*background-image: url("/img/editor/hint-underline.svg");*/
}

.trix-button--icon-strike::after {
    -webkit-mask-image: url('/img/editor/hint-strikethrough.svg?1');
    mask-image: url('/img/editor/hint-strikethrough.svg?1');
    /*background-image: url("/img/editor/hint-strikethrough.svg");*/
}

.trix-button--icon-color::after {
    -webkit-mask-image: url('/img/editor/hint-color.svg');
    mask-image: url('/img/editor/hint-color.svg');
    /* opacity: .75; */
    /*background-image: url("/img/editor/hint-color.svg?1");*/
}

.trix-button--icon-bgc::after {
    -webkit-mask-image: url('/img/editor/hint-bgc.svg?1');
    mask-image: url('/img/editor/hint-bgc.svg?1');
    /*background-image: url("/img/editor/hint-bgc.svg");*/
}

.trix-button--icon-link::after {
    -webkit-mask-image: url('/img/editor/hint-link.svg?1');
    mask-image: url('/img/editor/hint-link.svg?1');
    /*background-image: url("/img/editor/hint-link.svg");*/
}

.trix-button--icon-heading-1::after {
    -webkit-mask-image: url('/img/editor/hint-h1.svg?1');
    mask-image: url('/img/editor/hint-h1.svg?1');
    /*background-image: url("/img/editor/hint-h1.svg");*/
}

.trix-button--icon-heading-2::after {
    -webkit-mask-image: url('/img/editor/hint-h2.svg?1');
    mask-image: url('/img/editor/hint-h2.svg?1');
    /*background-image: url("/img/editor/hint-h2.svg");*/
}

.trix-button--icon-heading-3::after {
    -webkit-mask-image: url('/img/editor/hint-h3.svg?1');
    mask-image: url('/img/editor/hint-h3.svg?1');
    /*background-image: url("/img/editor/hint-h3.svg");*/
}

.trix-button--icon-bullet-list::after {
    -webkit-mask-image: url('/img/editor/hint-list-point.svg?1');
    mask-image: url('/img/editor/hint-list-point.svg?1');
    /*background-image: url("/img/editor/hint-list-point.svg");*/
}

.trix-button--icon-number-list::after {
    -webkit-mask-image: url('/img/editor/hint-list-numbers.svg?1');
    mask-image: url('/img/editor/hint-list-numbers.svg?1');
    /*background-image: url("/img/editor/hint-list-numbers.svg");*/
}

.trix-button--icon-tac::after {
    -webkit-mask-image: url('/img/editor/hint-textalign-center.svg?1');
    mask-image: url('/img/editor/hint-textalign-center.svg?1');
    /*background-image: url("/img/editor/hint-textalign-center.svg");*/
}

.trix-button--dialog {
    --s: 24px;

    background-color: var(--text);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    opacity: .5;
    transition: all .2s;
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    /*background-size: 24px;*/
}

.trix-button--dialog[value=Link] {
    -webkit-mask-image: url('/img/editor/hint-link.svg?1');
    mask-image: url('/img/editor/hint-link.svg?1');
    /*background-image: url("/img/editor/hint-link.svg");*/
}

.trix-button--dialog[value=Unlink] {
    -webkit-mask-image: url('/img/editor/hint-unlink.svg?1');
    mask-image: url('/img/editor/hint-unlink.svg?1');
    /*background-image: url("/img/editor/hint-unlink.svg");*/
}

.trix-dialogs {
    left: 0;
    top: -60px;
    border-radius: 5px;
    background-color: #eff3fb;
    position: absolute;
}

body._dark .trix-dialogs {
    background-color: var(--mainBg);
    border: 1px solid var(--textOpacity);
}

.trix-dialog--link {
    padding: 6px 9px;
}

.trix-dialog__link-fields {
    display: flex;
    align-items: center;
}

.trix-input {
    height: 36px;
    padding-left: 10px;
    border: none;
    background-color: transparent;
}

.editor__color,
.editor__bgc {
    position: absolute;
    left: 0;
    top: -60px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 2;
    cursor: auto;
}

.editor__color::before,
.editor__bgc::before {
    --s: 14px;
    width: var(--s);
    height: var(--s);
    left: 13px;
    bottom: -5px;
    border-radius: 4px;
    background-color: #eff3fb;
    transform: rotateZ(45deg);
    z-index: -1;
    position: absolute;
    content: "";
}

body._dark .editor__color::before,
body._dark .editor__bgc::before {
    background-color: var(--mainBg);
    border: 1px solid var(--textOpacity);
}

.editor__color-inner,
.editor__bgc-inner {
    padding: 6px 9px;
    border-radius: 5px;
    background-color: #eff3fb;
    display: flex;
}

body._dark .editor__color,
body._dark .editor__bgc {
    border: 1px solid var(--textOpacity);
}

body._dark .editor__color-inner,
body._dark .editor__bgc-inner {
    background-color: var(--mainBg);
}

.button {
    position: relative;
}

.button[data-type="left"] {
    display: flex;
    justify-content: flex-start;
}

.button[data-type="center"] {
    display: flex;
    justify-content: center;
}

.button[data-type="right"] {
    display: flex;
    justify-content: flex-end;
}

.button-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 50px;
    width: var(--w);
    height: var(--h);
    max-width: 760px;
    max-height: 200px;
    padding: 12px 32px 12px 12px;
    font-size: 18px;
    line-height: 1.5;
    color: #FFFFFF;
    border-radius: 8px;
    border: none;
    text-decoration: none;
}

a.button-main {
    padding: 12px;
}

.button-main__text {
    outline: none;
    overflow: hidden;
}

.button-main__dots {
    width: 6.25px;
    height: 24.75px;
    right: 13.38px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('/img/editor/btn-dots.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    cursor: pointer;
}

.button-settings {
    display: none;
    max-width: 355px;
    padding: 15px 18px 11px;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 4px 9px 0 var(--hintShadow);
    background-color: var(--hint);
    border-radius: 5px;
    position: absolute;
    z-index: 5;
}

.button-settings._active {
    display: block;
}

.button[data-type="left"] .button-settings {
    left: 0;
    right: auto;
}

.button[data-type="center"] .button-settings {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.button[data-type="right"] .button-settings {
    left: auto;
    right: 0;
}

.button-settings__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.button-settings__header-text {
    margin-right: 20px;
}

.button-settings__positions {
    display: flex;
    flex-shrink: 0;
}

.button-settings__position {
    --s: 38px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    background-color: transparent;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.button-settings__position._active {
    background-color: rgba(41, 92, 201, 0.15);
}

body._dark .button-settings__position._active {
    background-color: var(--hover);
}

.button-settings__position:not(:last-child) {
    margin-right: 1px;
}

.button-settings__position span {
    --s: 25px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    background-color: var(--text);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.button-settings__position[data-type="left"] span {
    -webkit-mask-image: url("/img/editor/btn-tal.svg");
    mask-image: url("/img/editor/btn-tal.svg");
}

.button-settings__position[data-type="center"] span {
    -webkit-mask-image: url("/img/editor/btn-tac.svg");
    mask-image: url("/img/editor/btn-tac.svg");
}

.button-settings__position[data-type="right"] span {
    -webkit-mask-image: url("/img/editor/btn-tar.svg");
    mask-image: url("/img/editor/btn-tar.svg");
}

.button-settings__main {
    margin-bottom: 42px;
}

.button-settings__link-label {
    display: block;
    margin-bottom: 10px;
}

.button-settings__link {
    height: 50px;
    width: 100%;
    padding: 0 12px;
    background-color: transparent;
    border-radius: 10px;
    border: 1px solid #EEEFF1;
}

body._dark .button-settings__link {
    border-color: var(--textOpacity);
}

.button-settings__size {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
    margin-bottom: 15px;
}

.button-settings__height-label,
.button-settings__width-label {
    display: flex;
    align-items: center;
    position: relative;
}

.button-settings__height-icon,
.button-settings__width-icon {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 15px;
    background-color: var(--text);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.button-settings__height-icon {
    -webkit-mask-image: url("/img/editor/btn-h.svg");
    mask-image: url("/img/editor/btn-h.svg");
}

.button-settings__width-icon {
    -webkit-mask-image: url("/img/editor/btn-w.svg");
    mask-image: url("/img/editor/btn-w.svg");
}

.button-settings__height,
.button-settings__width {
    height: 50px;
    width: 100%;
    padding: 0 40px 0 12px;
    border-radius: 10px;
    border: 1px solid #EEEFF1;
}

body._dark .button-settings__height,
body._dark .button-settings__width {
    border-color: var(--textOpacity);
}

.button-settings__height-px,
.button-settings__width-px {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.button-settings__checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.button-settings__checkbox {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 15px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    border: 1px solid var(--textOpacity);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.button-settings__checkbox:checked {
    background-image: url('/img/common/checkmark.svg');
    background-color: #295CC9;
    border-color: #295CC9;
}

body._dark .button-settings__checkbox:checked {
    background-image: url('/img/common/checkmark-dark.svg');
    background-color: var(--text);
    border-color: var(--text);
}

.warning {
    position: relative;
}

.warning[data-type="1"] .warning__main-icon {
    -webkit-mask-image: url("/img/editor/icon-plus-warning1.svg");
    mask-image: url("/img/editor/icon-plus-warning1.svg");
}

.warning[data-type="2"] .warning__main-icon {
    -webkit-mask-image: url("/img/editor/icon-plus-warning2.svg?1");
    mask-image: url("/img/editor/icon-plus-warning2.svg");
}

.warning[data-type="3"] .warning__main-icon {
    -webkit-mask-image: url("/img/editor/icon-plus-warning3.svg");
    mask-image: url("/img/editor/icon-plus-warning3.svg");
}

.warning[data-type="4"] .warning__main-icon {
    -webkit-mask-image: url("/img/editor/icon-plus-warning4.svg");
    mask-image: url("/img/editor/icon-plus-warning4.svg");
}

.warning[data-type="5"] .warning__main-icon {
    -webkit-mask-image: url("/img/editor/icon-plus-warning5.svg");
    mask-image: url("/img/editor/icon-plus-warning5.svg");
}

.warning__menu {
    max-width: 270px;
    padding: 10px 15px;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    box-shadow: 0 4px 9px var(--hintShadow);
    background-color: var(--hint);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    position: absolute;
    z-index: 15;
}

.warning__menu._active {
    opacity: 1;
    visibility: visible;
}

.warning__header {
    margin-bottom: 16px;
}

.warning__header-title {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.15;
}

.warning__header-icons {
    display: flex;
}

.warning__header-icon {
    --s: 36px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.warning__header-icon._active {
    background-color: #295CC9;
}

.warning__header-icon._active span {
    background-color: #fff;
}

.warning__header-icon:not(:last-child) {
    margin-right: 6px;
}

.warning__header-icon span {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
}

.warning__header-icon1 span {
    -webkit-mask-image: url("/img/editor/icon-plus-warning1.svg");
    mask-image: url("/img/editor/icon-plus-warning1.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.warning__header-icon2 span {
    -webkit-mask-image: url("/img/editor/icon-plus-warning2.svg?1");
    mask-image: url("/img/editor/icon-plus-warning2.svg?1");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.warning__header-icon3 span {
    -webkit-mask-image: url("/img/editor/icon-plus-warning3.svg");
    mask-image: url("/img/editor/icon-plus-warning3.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.warning__header-icon4 span {
    -webkit-mask-image: url("/img/editor/icon-plus-warning4.svg");
    mask-image: url("/img/editor/icon-plus-warning4.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.warning__header-icon5 span {
    -webkit-mask-image: url("/img/editor/icon-plus-warning5.svg");
    mask-image: url("/img/editor/icon-plus-warning5.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.button-settings__colors,
.warning__colors {
    margin-bottom: 16px;
}

.button-settings__colors-title,
.warning__colors-title {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.15;
}

.button-settings__colors-buttons,
.warning__colors-btns {
    display: flex;
}

.button-settings__colors-btn,
.warning__colors-btn {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
}

.button-settings__colors-btn:not(:last-child),
.warning__colors-btn:not(:last-child) {
    margin-right: 8px;
}

.button-settings__colors-btn span,
.warning__colors-btn span {
    --s: 16px;
    width: var(--s);
    height: var(--s);
    background-image: url("/img/common/checkmark.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    visibility: hidden;
}

.button-settings__colors-btn._active span,
.warning__colors-btn._active span {
    opacity: 1;
    visibility: visible;
}

.button-settings__colors-btn[data-type="#E54047"],
.warning__colors-btn[data-type="#E54047"] {
    background-color: #E54047;
}

.button-settings__colors-btn[data-type="#FD8C26"],
.warning__colors-btn[data-type="#FD8C26"] {
    background-color: #FD8C26;
}

.button-settings__colors-btn[data-type="#54B268"],
.warning__colors-btn[data-type="#54B268"] {
    background-color: #54B268;
}

.button-settings__colors-btn[data-type="#295CC9"],
.warning__colors-btn[data-type="#295CC9"] {
    background-color: #295CC9;
}

.button-settings__colors-btn[data-type="#8E0EF2"],
.warning__colors-btn[data-type="#8E0EF2"] {
    background-color: #8E0EF2;
}

.button-settings__picker-title,
.warning__picker-title {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.15;
}

.button-settings__colors-title,
.button-settings__picker-title {
    font-size: 16px;
    line-height: 1;
}

.warning__button {
    height: 36px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    border-radius: 7px;
    background-color: #295CC9;
    color: #fff;
    cursor: pointer;
}

.warning__main {
    padding: 24px 48px 24px 24px;
    border-radius: 10px;
    border: 2px solid var(--default-color);
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    position: relative;
}

.warning__main-btn {
    width: 12px;
    right: 12px;
    top: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    cursor: pointer;
}

.warning__main-btn span {
    --s: 6px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background-color: var(--default-color);
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.warning__main-btn span+span {
    margin-top: 3px;
}

.warning__main-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.warning__main-icon {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-right: 24px;
    background-color: var(--default-color);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.warning__main-text {
    font-size: 18px;
    line-height: 1.5;
    flex: 1;
}

.warning__main-text * {
    word-break: break-word;
}

.student_lesson-theory {
    font-size: 18px;
    line-height: 1.5;
}

.student_lesson-theory * {
    word-break: break-word;
}

.student_lesson-theory h1,
.warning__main-text h1 {
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
}

.student_lesson-theory h2,
.warning__main-text h2 {
    font-weight: 600;
    font-size: 23px;
    line-height: 1;
}

.student_lesson-theory h3,
.warning__main-text h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
}

.portal-destroy__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.portal-destroy__inner._error .portal-destroy__error {
    opacity: 1;
    visibility: visible;
}

.portal-destroy__img {
    max-width: 350px;
    height: 260px;
    margin-bottom: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.portal-destroy__text {
    margin-bottom: 18px;
    font-size: 18px;
    line-height: 1.15;
}

.portal-destroy__label {
    max-width: 380px;
    width: 100%;
    margin-bottom: 20px;
}

.portal-destroy__pass {
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
    padding: 0 24px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    border: 1px solid #EAEAEA;
}

.portal-destroy__error {
    height: 16px;
    font-size: 16px;
    line-height: 1;
    color: #E54047;
    opacity: 0;
    visibility: hidden;
}

.portal-destroy__buttons {
    display: flex;
}

.portal-destroy__button {
    width: 176px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.portal-destroy__button[disabled] {
    opacity: .5;
    cursor: auto;
}

.portal-destroy__cancel {
    margin-right: 22px;
    background-color: #F7F8FA;
    color: #999999;
}

.portal-destroy__confirm {
    background-color: #295CC9;
    color: #FFFFFF;
}

.p-socket__wrapper {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(51, 51, 51, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    position: fixed;
    z-index: 700;
}

.p-socket {
    max-width: 730px;
    width: 100%;
    padding: 27px 27px 47px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    position: absolute;
}

.p-socket__net {
    padding: 0 35px 62px;
}

.p-socket__wrapper._active,
.p-socket._active {
    opacity: 1;
    visibility: visible;
}

.p-socket__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-socket__net .p-socket__img {
    transform: translateY(-60px);
}

.p-socket__net .p-socket__img img {
    --s: 180px;
    width: var(--s);
    height: var(--s);
    transform: scale(1.3);
    object-fit: contain;
    display: block;
}

.p-socket__empty .p-socket__img {
    width: 100%;
    margin-bottom: 92px;
    padding-bottom: calc((233 / 674) * 100%);
    flex-shrink: 0;
    position: relative;
}

.p-socket__empty .p-socket__img img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    position: absolute;
}

.p-socket__title {
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    text-align: center;
}

.p-socket__text {
    margin-bottom: 142px;
    font-size: 18px;
    line-height: 1.25;
    text-align: center;
}

.p-socket__net .p-socket__text {
    margin-bottom: 0;
}

.p-socket__buttons {
    display: flex;
}

.p-socket__button {
    width: 176px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    background-color: #295CC9;
    color: #FFFFFF;
    text-decoration: none;
}

.p-socket__button-back {
    margin-right: 22px;
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
    display: none;
}

.p-socket__button-back._active {
    display: flex;
}

.hint {
    padding: 10px 14px;
    font-size: 16px;
    line-height: 19px;
    top: -55px;
    right: 0;
    border-radius: 5px;
    box-shadow: 0 4px 20px var(--hintShadow);
    background-color: var(--mainBg);
    color: var(--textOpacity);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    white-space: nowrap;
    pointer-events: none;
    display: flex;
    align-items: center;
    position: absolute;
}

body._dark .hint {
    background-color: var(--hint);
}

.hint::after {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    right: 15px;
    bottom: -5px;
    border-radius: 2px;
    background-color: var(--mainBg);
    transform: rotate(45deg);
    position: absolute;
    content: "";
}

body._dark .hint::after {
    background-color: var(--hint);
}

.hint__icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/editor/icon-warning.svg");
    mask-image: url("/img/editor/icon-warning.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.audio {
    width: 100%;
    display: flex;
    align-items: center;
}

.audio._loading .audio__action {
    cursor: not-allowed;
}

.audio._loading .audio__action::after {
    opacity: 1;
    visibility: visible;
}

.audio._play .audio__action span {
    -webkit-mask-image: url("/img/common/pause.svg");
    mask-image: url("/img/common/pause.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.audio__inner {
    display: flex;
    align-items: center;
    flex: 1;
}

.audio audio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    top: 0;
    left: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.audio__icon {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    border-radius: 10px;
    background-color: rgba(41, 92, 201, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audio__icon span {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
    -webkit-mask-image: url("/img/common/musicnote.svg");
    mask-image: url("/img/common/musicnote.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.audio__action {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    border-radius: 50%;
    background-color: rgba(41, 92, 201, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

body._dark .audio__action {
    background-color: var(--svg);
}

.audio__action::after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: var(--accent);
    -webkit-mask-image: url('/img/common/audio-loader.svg?1');
    mask-image: url('/img/common/audio-loader.svg?1');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);

    /*background-image: url('/img/common/audio-loader.svg?1');*/
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center center;*/
    /*background-color: #DAE2F5;*/
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    position: absolute;
    content: '';
}

body._dark .audio__action::after {
    background-color: var(--text);
}

.audio__action span {
    --s: 26px;
    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
    -webkit-mask-image: url("/img/common/play.svg");
    mask-image: url("/img/common/play.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .audio__action span {
    background-color: var(--text);
}

.audio__body {
    flex: 1;
}

.audio__body-title {
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}

.audio__body-top {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.15;
    color: var(--textOpacity);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.audio__body-speed {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.15;
    color: #295CC9;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body._dark .audio__body-speed {
    color: var(--text);
}

.audio__progress {
    min-height: 4px;
    border-radius: 10px;
    background-color: #DAE2F5;
}

body._dark .audio__progress {
    background-color: rgba(255, 255, 255, .25);
}

.audio__remove-wrapper {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-left: 10px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio__remove {
    --s: 20px;

    width: var(--s);
    height: var(--s);
    background-color: #E54047;
    opacity: .5;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-mask-image: url("/img/common/remove.svg");
    mask-image: url("/img/common/remove.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    border: none;
}

.audio__save {
    --s: 20px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-left: 9px;
    background-color: #295CC9;
    opacity: .5;
    transition: all .2s;
    -webkit-mask-image: url("/img/editor/icon-save.svg");
    mask-image: url("/img/editor/icon-save.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .audio__save {
    background-color: var(--text);
}

.audio .noUi-target {
    height: 4px;
    border-radius: 5px;
    box-shadow: none;
    border: none;
    flex: 1;
}

.audio .noUi-base {
    border-radius: 10px;
    background-color: #DAE2F5;
}

body._dark .audio .noUi-base {
    background-color: rgba(255, 255, 255, .25);
}

.audio .noUi-connect {
    background-color: #2154CF;
}

body._dark .audio .noUi-connect {
    background-color: var(--text);
}

.audio .noUi-horizontal .noUi-handle {
    --size: 8px;
    width: var(--size);
    height: var(--size);
    top: -2px;
    right: -5px;
    border-radius: 50%;
    box-shadow: none;
    border: none;
    background-color: #2154CF;
    cursor: pointer;
}

body._dark .audio .noUi-horizontal .noUi-handle {
    background-color: var(--text);
}

.audio .noUi-origin,
.audio .noUi-handle::after,
.audio .noUi-handle::before {
    display: none;
}

@media not all and (hover: none) {
    .lce-content__start:hover,
    .lce-content__list-item:hover {
        color: var(--text);
    }

    .calendar__month-days li._active:hover span {
        background-color: #295CC9;
    }

    .calendar__month-days li:hover span {
        background-color: #EEEFF1;
    }

    .aside__item:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .aside__item._unchecked:hover .aside__item-icon::before {
        border-color: #303e53;
    }

    .access_folders-table__row-inner:hover,
    .access_folders-table__subrow-inner:hover,
    .user:hover {
        background-color: var(--hover);
    }

    .access_users-table__row:hover {
        background-color: #f2f5fc;
    }

    .calendar__month-days li._active:hover span {
        background-color: #295CC9;
    }

    .add_user-select__item:hover {
        background-color: #EEEFF1;
    }

    .add_user__remove:hover {
        color: #E54047;
        cursor: pointer;
    }

    .add_user__remove:hover span {
        background-color: #E54047;
    }

    .add_user__grid:hover .add_user__remove {
        opacity: 1;
        visibility: visible;
    }

    .lesson__start-options--item:hover {
        background-color: var(--hover);
    }

    .sidebar__back:hover {
        opacity: 1;
    }

    /*.sidebar__back:hover .sidebar__back-icon {*/
    /*    background-color: #333;*/
    /*}*/

    /*.sidebar__back:hover .sidebar__back-text {*/
    /*    color: #333;*/
    /*}*/

    .lesson-content-item__inner:hover {
        background-color: #F7F8FA;
    }

    .sidebar-item__inner:hover {
        background-color: var(--hover);
    }

    .sidebar-item__inner[data-type=create]:hover {
        background-color: transparent;
        opacity: 1;
    }

    .lce__header-inner:hover .lce__header-rename {
        opacity: 1;
        visibility: visible;
    }

    .lce__header-rename:hover span {
        opacity: 1;
    }

    .lce__header-remove:hover span {
        opacity: 1;
    }

    .template-item__new-btn:hover div,
    body._dark .template-item__new-btn:hover div {
        background-color: var(--accent);
    }

    .template-item__new-btn:hover div span {
        background-color: #fff;
    }

    .template-item__new-btn:hover div::after {
        opacity: 1;
        visibility: visible;
    }

    .template-actions__button:hover {
        background-color: var(--hover);
    }

    .template-item__new-inner:hover {
        opacity: 1;
    }

    .template-item__actions-item:hover span {
        opacity: 1;
    }

    .template-item:first-child .template-item__actions-up:hover,
    .lce[data-type="theory"] .template-item:nth-child(2) .template-item__actions-up:hover,
    .template-item:last-child .template-item__actions-down:hover {
        cursor: not-allowed;
    }

    .template-item:first-child .template-item__actions-up:hover span,
    .lce[data-type="theory"] .template-item:nth-child(2) .template-item__actions-up:hover span,
    .template-item:last-child .template-item__actions-down:hover span {
        opacity: .5;
    }

    .template-item:hover .template-item__new {
        opacity: 1;
        visibility: visible;
    }

    .template_editor:not(._locked):hover .template-item__actions {
        opacity: 1;
        visibility: visible;
    }

    .template-item__new._start:hover {
        opacity: 1;
        visibility: visible;
    }

    .template-item__emoji-btn:hover {
        background-color: var(--text);
    }

    .ef__remove:hover {
        background-color: #E54047;
    }

    .template-item__add:hover {
        opacity: 1;
    }

    /*.template-item__add:hover .template_test__add-icon {*/
    /*    background-color: #333;*/
    /*}*/

    /*.template-item__add:hover .template_test__add-text {*/
    /*    color: #333;*/
    /*}*/

    .template-answer:hover::before {
        opacity: .5;
        visibility: visible;
    }

    .template-answer__remove:hover {
        background-color: #E54047;
    }

    .template_media__header-tab:hover {
        background-color: #DFE7F7;
    }

    body._dark .template_media__header-tab:hover {
        background-color: var(--textOpacity);
    }

    body._dark .template_media__header-tab:hover span {
        background-color: var(--text);
    }

    .template_media__header-tab._active:hover {
        background-color: #295CC9;
    }

    .template_media-box__item:hover {
        background-color: var(--hover);
    }

    .template_media-item__header-inner:hover {
        /*color: #333;*/
        opacity: 1;
    }

    /*.template_media-item__header-inner:hover .template_media-item__header-icon {*/
    /*    background-color: #333;*/
    /*}*/

    .template_media-item__descr-btn:hover {
        opacity: 1;
    }

    .template_image-item._uploaded:hover .template_image-item__img-footer {
        opacity: 1;
        visibility: visible;
    }

    .template_image-item__img-btn:hover .hint {
        opacity: 1;
        visibility: visible;
        -webkit-transition-delay: 0.5s;
        -o-transition-delay: 0.5s;
        transition-delay: 0.5s;
    }

    .template_audio-item__plug-icon:hover .hint {
        opacity: 1;
        visibility: visible;
        -webkit-transition-delay: 0.5s;
        -o-transition-delay: 0.5s;
        transition-delay: 0.5s;
    }

    .template_audio-item__file-remove:hover {
        color: #E54047;
    }

    .template_audio-item__menu-item:hover {
        background-color: rgba(41, 92, 201, 0.06);
    }

    .student_lesson-videobox__preview:hover .student_lesson-videobox__icon,
    .template_video-item__link:hover .template_video-item__link-icon {
        transform: translate(-50%, -50%) scale(1.5);
    }

    .template_media-item__remove:hover,
    .editor__warning-remove:hover,
    .editor__media-remove:hover {
        color: #E54047;
    }

    .template_media-item__remove:hover span,
    .editor__warning-remove:hover span,
    .editor__media-remove:hover span {
        background-color: #E54047;
    }

    .file:hover .file__remove {
        opacity: 1;
        visibility: visible;
    }

    .file__remove:hover {
        color: #E54047;
    }

    .admin__select-item:hover {
        background-color: #f7f8fa;
    }

    .student_aside__backwards:hover,
    .lcr__button:hover .lcr__button-inner {
        opacity: 1;
    }

    .emoji-button:hover {
        background-color: var(--hover);
    }

    .trix-button:not(.trix-active):not(:disabled):not([value=Link]):not([value=Unlink]):hover {
        background-color: rgba(41, 92, 201, 0.1);
    }

    .trix-button--dialog[value=Link]:hover,
    .trix-button--dialog[value=Unink]:hover {
        opacity: 1;
    }

    /* .trix-button:not(.trix-active):not(:disabled):hover::after {
        background-color: var(--text);
    } */

    .admin-profile__header-button:hover,
    .admin-profile__settings-button:hover,
    .admin_profile-aside__btn._blue:hover,
    .warning__header-icon:hover {
        background-color: rgba(41, 92, 201, 0.15);
    }

    .admin_profile-aside__btn._red:hover {
        background-color: rgba(229, 64, 71, 0.25);
    }

    .warning__header-icon._active:hover {
        background-color: #295CC9;
    }

    .faq-aside__ask:hover {
        background-color: rgba(41, 92, 201, 0.9);
    }

    .template-rules__label-icon span:hover + .xpl-hint {
        opacity: 1;
        visibility: visible;
    }

    .context__item:hover,
    .context__item-paste._active:hover {
        background-color: #f2f5fc;
    }

    .context__item-paste:hover {
        background-color: #fff;
    }

    .context__item-remove:hover {
        background-color: rgba(229, 64, 71, 0.05)
    }

    .audio__remove-wrapper:hover .audio__remove,
    .audio__save:hover {
        opacity: 1;
    }
}

@media (max-width: 1920px) {
    .calendar__inner {
        max-width: calc(100vw - 170px);
    }
}

@media (max-width: 1024px) {
    body,
    html {
        scrollbar-width: none;
    }
    body::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .tariff {
        padding-left: 0;
    }
}

@media (max-width: 900px) {
    .tariff-new__inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .tariff-new__left {
        align-items: flex-start;
        margin-bottom: 14px;
        margin-right: 0;
    }
    .tariff-new__link {
        margin-left: 0;
    }
}

@media (max-width: 780px) {
    .header__menu {
        flex: 1;
        justify-content: space-between;
    }
}

@media (max-width: 560px) {
    .header__menu-open {
        display: block;
    }

    .calendar {
        font-size: 16px;
        line-height: 1;
        right: auto;
        left: 0;
        border-radius: 0 20px 20px 20px;
    }

    .calendar__title {
        margin-bottom: 24px;
        font-size: 20px;
        line-height: 1;
    }

    .calendar__inner {
        max-width: calc(100vw - 25px);
        margin: 0 -16px;
        padding: 0 16px;
    }

    .calendar__month {
        flex: 0 0 300px;
    }

    .calendar__month+.calendar__month {
        margin-left: 32px;
    }

    .calendar__month-name {
        font-size: 18px;
        line-height: 1;
    }

    .calendar__month-weekdays {
        margin-bottom: 16px;
    }

    .calendar__month-days li {
        margin: 4px 0;
    }

    .calendar__month-days li span {
        --s: 30px;
    }
}
@media (max-width: 480px) {
    .tariff {
        padding-bottom: 0;
    }
    .tariff__listbox {
        margin-bottom: 10px;
        border-radius: 0;
    }
    .tariff-list,
    .tariff-list._active {
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
    .tariff-list {
        min-width: auto;
    }
    .tariff-list__item._active {
        grid-column: span 2;
        grid-template-columns: 1fr;
        grid-gap: 0;
    }
    .tariff-list__item._active .tariff-list__item-info {
        border-radius: 10px 10px 30px 30px;
    }
    .tariff_item-stats {
        padding: 28px 14px 14px;
    }
    .tariff_item-stats__usage {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tariff_item-stats__title {
        margin-right: 20px;
        margin-bottom: 0;
    }
    .tariff_item-stats__info {
        font-size: 18px;
        line-height: normal;
    }
    .tariff_item-stats__usage:not(:last-child)::after {
        width: 100%;
    }
    .tariff-new {
        margin-bottom: 10px;
    }
    .tariff-new__inner {
        padding: 10px 14px 14px;
    }
    .tariff-new__icon {
        --s: 50px;
    }
    .tariff-new__icon span {
        --s: 40px;
    }
    .tariff-new__title {
        font-size: 20px;
        line-height: 1;
    }
    .tariff-new__text {
        font-size: 14px;
        line-height: 1.15;
    }
    .tariff-new__link {
        max-width: none;
        border-radius: 8px;
    }
    .tariff_options__header {
        margin-bottom: 10px;
    }
    .tariff_options-list {
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
}
@media (max-width: 375px) {
    .tariff_options-list__item-info {
        min-height: auto;
    }
    .tariff_options-list__item-decor {
        display: none;
    }
}html, body {
    touch-action: manipulation;
    /*touch-action: pan-x pan-y;*/
}

@keyframes bell-shake {
    0% {
        transform: rotate(0deg);
    }
    0.5% {
        transform: rotate(10deg);
    }
    1% {
        transform: rotate(0deg);
    }
    1.5% {
        transform: rotate(-10deg);
    }
    2% {
        transform: rotate(0deg);
    }
    2.5% {
        transform: rotate(10deg);
    }
    3% {
        transform: rotate(0deg);
    }
    3.5% {
        transform: rotate(-10deg);
    }
    4% {
        transform: rotate(0deg);
    }
    4.5% {
        transform: rotate(10deg);
    }
    5% {
        transform: rotate(0deg);
    }
    5.5% {
        transform: rotate(-10deg);
    }
    6% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.header-notes._new .header-notes__button span {
    animation: bell-shake 10s infinite ease-in-out;
    transform-origin: top center;
}



.lcr .warning__main {
    padding: 24px;
}

.lcr .student_lesson-theory h2,
.lcr .warning__main-text h2 {
    line-height: 1.15;
}

div.vjs-poster {
    transition: all .2s ease;
}

.student_lesson-videobox__preview._horizontal:is(._wide, ._standard) div.vjs-poster,
.template_video-item._horizontal:is(._wide, ._standard) div.vjs-poster {
    transform: translate(-50%, -50%) scale(var(--z));
}

.student_lesson-videobox__preview .vjs-poster img,
.student_lesson-videobox__preview .video-js .vjs-tech,
.template_video__item .vjs-poster img,
.student_template-task__video .vjs-poster img,
.template_video-item._video-answer .vjs-poster img {
    overflow: visible;
}

.student_lesson-videobox__preview._horizontal:is(._wide, ._standard) div.vjs-poster,
.template_video-item._horizontal:is(._wide, ._standard) div.vjs-poster,
.student_lesson-videobox__preview._horizontal:is(._wide, ._standard) .video-js .vjs-tech,
.template_video-item._horizontal:is(._wide, ._standard) .video-js .vjs-tech {
    width: 100%;
    height: max(100%, calc(100% - (var(--z) - 105%)));
}

.student_lesson-videobox__preview._horizontal:is(._wide, ._standard) .video-js .vjs-tech,
.template_video-item._horizontal:is(._wide, ._standard) .video-js .vjs-tech {
    /*transform: scale(var(--z));*/
    transform: translate(-50%, -50%) scale(var(--z));
    overflow: visible;
}

.student_lesson-videobox__preview._horizontal._wide div.vjs-poster,
.template_video-item._horizontal._wide div.vjs-poster,
.student_lesson-videobox__preview._horizontal._wide .video-js .vjs-tech,
.template_video-item._horizontal._wide .video-js .vjs-tech {
    height: var(--z);
    width: unset;
    transform: translate(-50%, -50%);
}

.student_lesson-videobox__preview._horizontal._wide:not(._custom-poster) div.vjs-poster,
.template_video-item._horizontal._wide:not(._custom-poster) div.vjs-poster {
    width: 100%;
}

.student_lesson-videobox__preview._horizontal:is(._wide, ._standard) .video-js.vjs-fullscreen .vjs-tech,
.template_video-item._horizontal:is(._wide, ._standard) .video-js.vjs-fullscreen .vjs-tech {
    height: calc(100vw / 16 * 9);
}

.student_lesson-videobox__preview._horizontal._standard .video-js.vjs-fullscreen .vjs-tech,
.template_video-item._horizontal._standard .video-js.vjs-fullscreen .vjs-tech {
    width: var(--z);
    overflow: hidden;
    transform: translate(-50%, -50%);
}

.student_lesson-videobox__preview._horizontal._wide .video-js.vjs-fullscreen .vjs-tech,
.template_video-item._horizontal._wide .video-js.vjs-fullscreen .vjs-tech {
    width: unset;
    transform: translate(-50%, -50%) scale(var(--z));
}

.student_lesson-videobox__preview._vertical .video-js.vjs-fullscreen .vjs-tech {
    width: unset;
}

.template_video-item._vertical .video-js.vjs-fullscreen .vjs-tech {
    width: min(100%, var(--z));
}

.student_lesson-videobox__preview._horizontal._custom-poster div.vjs-poster,
.template_video-item._horizontal._custom-poster div.vjs-poster {
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

.student_lesson-videobox__preview._vertical._custom-poster .vjs-poster img,
.template_video-item._vertical._custom-poster .vjs-poster img {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 1px 1px;
}

.check-answer__video .video-js .vjs-tech {
    /*width: unset;*/

    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-alert {
    padding: 22px 40px;
    background-color: rgba(41, 92, 201, 15%);
    border-radius: 10px;
    grid-column: span 2;
}

.template-alert__inner {
    display: flex;
}

.template-alert__icon {
    --s: 24px;
    margin-right: 10px;
    width: var(--s);
    height: var(--s);
    background-color: #333333;
    -webkit-mask-image: url(/img/common/info-circle.svg);
    mask-image: url(/img/common/info-circle.svg);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.template-alert__info {
    font-size: 18px;
}

.template-alert__title {
    margin-bottom: 4px;
    font-weight: 600;
}

.tariff-banner {
    max-height: 200px;
    transition: max-height .2s ease;
    position: relative;
    overflow: hidden;
}

.tariff-banner._closed {
    max-height: 0;
}

.tariff-banner__stat {
    width: 210px;
    padding: 0 14px;
    position: relative;
    overflow: hidden;
}

.tariff-banner__stat-inner {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.tariff-banner__stat-inner._active {
    transform: translateX(0);
}

.tariff-banner__stat-inner._inactive {
    transform: translateX(calc(-100%));
}

.tariff-banner__stat-inner:not(._inactive):not(._active) {
    transform: translateX(100%);
}

.tariff-banner__stat-inner[data-type="users"] .tariff-banner__stat-icon {
    mask-image: url(/img/common/role1.svg);
    webkit-mask-image: url(/img/common/role1.svg);
    mask-size: var(--s);
    webkit-mask-size: var(--s);
    background-color: #fff;
}

.tariff-banner__stat-days {
    font-size: 18px;
    line-height: 1.15;
}

.tariff-banner__close {
    --s: 30px;
    top: 10px;
    right: 10px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
    -webkit-mask-image: url(/img/common/close.svg);
    mask-image: url(/img/common/close.svg);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-position: center;
    mask-position: center;
    position: absolute;
    transition: all .2s ease;
    cursor: pointer;
}

.tariff-banner__close:hover {
    background-color: #E54047;
    -webkit-mask-size: calc(var(--s) * 1.2);
    mask-size: calc(var(--s) * 1.2);
}@media screen and (max-width: 1024px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    ._mob {
        display: initial;
    }

    ._container {
        padding: 0 10px 10px;
        overflow: hidden;
    }

    body>._container {
        padding-top: 70px;
    }

    .header ~ ._container {
        transition: padding-top .2s ease;
    }

    .header._expiring ~ ._container {
        padding-top: 158px;
    }

    .mobile-popup__wrapper,
    .mobile-popup {
        display: initial;
    }

    .mobile-popup {
        top: 100px;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #fff;
        -webkit-border-radius: 20px 20px 0 0;
        -moz-border-radius: 20px 20px 0 0;
        border-radius: 20px 20px 0 0;
        position: fixed;
        overflow: hidden;
        transform: translateY(100%);
        transition: transform .2s ease;
    }

    .mobile-popup._active {
        transform: translateY(0);
    }

    .mobile-popup__inner {
        padding: 0px 24px 24px;
    }

    .mobile-popup__close {
        width: 100%;
        height: 40px;
        position: relative;
        flex-shrink: 0;
    }

    .mobile-popup__close::before {
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 8px;
        background-color: #f7f8fa;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        content: '';
    }
    
    .xpl-header__mode {
        margin-left: 10px;
    }

    .xpl-header__mode-text {
        display: none;
    }

    .xpl-header__mode-item {
        padding: 16px 24px;
        font-size: 0;
        position: relative;
    }

    .xpl-header__mode-item span {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(51, 51, 51, 0.5);
        -webkit-mask-size: var(--s);
        mask-size: var(--s);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        display: block;
        position: absolute;
    }

    .xpl-header__mode-item[data-mode="work"] span {
        -webkit-mask-image: url(/img/common/content-task.svg);
        mask-image: url(/img/common/content-task.svg);
    }

    .xpl-header__mode-item[data-mode="study"] span {
        -webkit-mask-image: url(/img/common/library.svg);
        mask-image: url(/img/common/library.svg);
    }

    .tariff-banner {
        display: none;
    }

    .tariff-banner._mobile {
        display: block;
        margin: -14px -14px 14px;
    }

    .tariff-banner__inner {
        height: 90px;
        padding: 14px;
    }

    .tariff-banner__text {
        margin-right: 10px;
        font-size: 12px;
        line-height: 1.15;
    }

    .tariff-banner__button {
        width: unset;
        height: unset;
        margin-right: 0;
        padding: 14px 24px;
        font-size: 14px;
    }

    .tariff-banner__hide {
        bottom: 6px;
        position: absolute;
    }

    .header ._container {
        overflow: visible;
    }

    .header__user {
        padding-top: 90px;
        padding-bottom: 46px;
        flex-direction: column-reverse;
        align-items: start;
    }

    .aside .header__user {
        /*display: none;*/
        margin-right: 30px;
        padding: 0;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        align-self: start;
    }

    .aside .header__user .user_avatar-box {
        margin-bottom: 0;
        margin-right: 20px;
    }

    .aside .header__user-info {
        text-align: left;
    }

    .aside .header__user-position {
        color: rgba(255, 255, 255, 0.5);
    }

    .header__user-name {
        margin-bottom: 0;
        color: #fff;
    }

    .header__user .user_avatar-box {
        --s: 80px;
        margin-bottom: 10px;
        font-size: 26px;
        border: 3px solid #fff;
    }

    .header-notes {
        margin-right: 14px;
    }

    .header-notes__header {
        margin-bottom: 20px;
        padding: 18px;
        border-bottom: unset;
        -webkit-border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        border-radius: 0 0 10px 10px;
        filter: drop-shadow(0px 4px 4px rgba(221, 221, 221, 0.19));
    }

    .header-notes__body {
        top: 0;
        right: -100%;
        bottom: 0;
        left: 100%;
        min-width: unset;
        height: unset;
        position: fixed;
        z-index: 1;
        transition: all .2s ease;
        display: flex;
    }

    .header-notes._active .header-notes__body {
        left: 0;
        right: 0;
    }

    .header-notes__body-inner {
        background: rgb(249,250,253);
        background: linear-gradient(180deg, rgba(249,250,253,1) 0%, rgba(249,250,253,1) 50%, rgba(255,255,255,1) 100%);
    }

    .header-notes__content {
        background-color: #fff;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }

    .header-notes__button span {
        --s: 24px;
    }

    .header-notes__title {
        display: none;
    }

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

    .header-notes__backwards span {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        margin-right: 16px;
        background-color: rgba(51, 51, 51, 0.5);
        -webkit-mask-image: url(/img/editor/icon-angle.svg);
        mask-image: url(/img/editor/icon-angle.svg);
        -webkit-mask-size: var(--s);
        mask-size: var(--s);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        transform: rotate(180deg);
        flex-shrink: 0;
        display: block;
    }

    .header-notes__backwards p,
    .header-notes__back {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.15;
        color: rgba(51, 51, 51, 0.5);
    }

    .header-notes__back span {
        background-color: rgba(51, 51, 51, 0.5);
        -webkit-mask-image: url(/img/editor/icon-angle.svg);
        mask-image: url(/img/editor/icon-angle.svg);
        transform: rotate(180deg);
    }

    .header-notes__box {
        padding: 24px;
    }

    .header-notes__hidden__body {
        padding: 24px;
    }

    .aside__wrapper {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(51, 51, 51, 0.5);
        position: fixed;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s;
        z-index: 4;
    }

    .aside__wrapper._active {
        opacity: 1;
        visibility: visible;
    }

    .aside {
        /* right: -40px; */
        left: unset;
        max-width: 350px;
        width: 100%;
        padding: 0 20px;
        border-radius: 0;
        transform: translateX(-250%);
        overflow-x: hidden;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    .aside._active {
        transform: translateX(0%);
        /* right: 0; */
        max-width: 350px;
        width: 100%;
    }

    .logo {
        display: none;
    }

    .aside__inner {
        height: 100%;
        padding: 20px 0;
        /*border-radius: 30px 0 0 30px;*/
        display: flex;
        flex-direction: column;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overflow-y: scroll;
    }

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

    .aside__links {
        min-height: unset;
        height: unset;
        margin-top: 50px;
        margin-bottom: auto;
        overflow: initial;
        /* min-height: calc(100vh - 390px); */
    }

    .aside._active .aside__item {
        width: 100%;
    }

    .aside__item:not(:last-child) {
        margin-bottom: 1px;
    }

    .aside__login {
        margin: 50px 10px 10px;
    }

    .aside__login label {
        display: flex;
        align-items: center;
    }

    .aside__login-text {
        color: #fff;
    }

    .header__quit {
        margin-right: 30px;
    }

    .default-popup,
    .deep-popup {
        width: unset;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0;
    }

    .mini-popup {
        width: 90%;
    }

    .popup-crop__row {
        display: block;
    }

    .popup-crop._profile .popup-crop__preview {
        display: none;
    }

    .popup-crop__new {
        margin-top: 10px;
        font-size: 16px;
    }

    .popup-crop__img {
        /*max-height: 100%;*/
        max-height: 50vh;
        max-width: 100%;
        margin-right: 0;
    }

    .popup-crop__buttons .popup-crop__button {
        width: 45%;
        height: 40px;
        font-size: 16px;
    }

    .cropper-point.point-se {
        height: 5px;
        width: 5px;
    }

    .profile,
    .faq {
        width: 185vw;
        border-radius: 30px 0 0 30px;
    }

    .profile._active,
    .faq._active {
        transform: translateX(15vw);
    }

    .profile._selected,
    .faq._selected {
        transform: translateX(-85vw);
    }

    .profile._notifications {
        width: 100vw;
        border-radius: 0;
    }

    .profile._notifications._selected {
        transform: translateX(0);
    }

    .profile__inner,
    .faq__inner {
        /*border-radius: 30px 0 0 30px;*/
        border-radius: 20px 0 0 20px;
        grid-template-columns: 85vw 100vw;
    }

    .profile._notifications .profile__inner {
        border-radius: 0;
        grid-template-columns: 0vw 100vw;
    }

    .profile__header {
        min-height: unset;
        margin-bottom: 10px;
    }

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

    .profile__header-button {
        margin-left: 0;
        text-align: center;
    }

    .profile__body {
        padding: 70px 10px 0;
        position: relative;
    }

    .profile__backwards,
    .faq__backwards {
        top: 10px;
        right: 10px;
        left: 10px;
        padding: 12px 14px;
        border-radius: 10px;
        background-color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: absolute;
    }

    .profile__backwards-btn,
    .faq__backwards-btn {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        margin-right: 16px;
        background-color: rgba(51, 51, 51, 0.5);
        flex-shrink: 0;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url(/img/editor/icon-angle.svg);
        mask-image: url(/img/editor/icon-angle.svg);
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        transform: rotate(180deg);
        display: block;
    }

    .profile__backwards-text,
    .faq__backwards-text {
        font-size: 16px;
        line-height: 1.15;
        color: rgba(51, 51, 51, 0.5);
    }

    .faq-aside {
        padding: 26px;
    }

    .faq-aside__links {
        max-height: calc(100vh - 360px);
        max-height: calc(100dvh - 360px);
    }

    .faq-aside__link {
        padding: 8px;
    }

    .profile__main {
        height: calc(100vh - 130px);
        padding-bottom: 80px;
    }

    .profile__notifications {
        height: calc(100% - 10px);
    }

    .profile_notification-plug {
        height: calc(100% - 30px);
    }

    .profile-aside {
        padding: 10px;
        position: relative;
    }

    .profile._notifications .profile-aside {
        opacity: 0;
    }

    .profile-aside__link._active .profile-aside__link-arrow {
        display: none;
    }

    .profile-aside__header-img .profile-aside__header-plug {
        opacity: 1;
    }

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

    .profile_tariff-info {
        margin-bottom: 10px;
    }

    .profile_tariff-options {
        display: block;
    }

    .profile_tariff-options__item {
        width: 100%;
    }

    .profile_tariff-options__item:not(:last-child) {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .profile_finance-hitory {
        padding: 12px 24px;
    }

    .profile__settings-item:not(:last-of-type) {
        margin-bottom: 10px;
    }

    .profile__settings-footer {
        flex-direction: column-reverse;
        align-items: start;
    }

    .profile__settings-accept {
        width: 100%;
        margin-right: 0;
        margin-top: 10px;
        text-align: center;
    }

    .faq__body {
        height: 100vh;
        height: 100dvh;
        max-height: unset;
        padding: 70px 10px 10px;
        overflow: scroll;
    }

    .faq__content {
        height: unset;
    }

    .faq__buttons {
        flex-direction: column;
    }

    .faq__button {
        width: 100%;
    }

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

    .help {
        right: unset;
        left: 24px;
        z-index: 10;
    }

    .help__item {
        --s: 36px;
    }

    .help__item span {
        --s: 18px;
    }

    .help__faq {
        display: none;
    }

    .nav-item__name,
    .nav-item__hidden-name,
    .file_system-table__folder-name,
    .file_system-columns__item-name,
    .file__name {
        word-break: break-all;
    }

    .study-ready__buttons {
        display: block;
    }

    .study-ready__button._inactive {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .assign_users-item {
        margin-bottom: 10px;
    }

    .assign_users-item::after {
        left: -40px;
    }

    .assign_users-item:not(:last-child)::before {
        left: -33px;
    }

    .assign_users-item:last-child {
        margin-bottom: 0;
    }

    .assign_users-item__inner {
        padding: 14px;
    }

    .assign_users-item__img {
        --s: 34px;
        align-self: start;
        background: rgba(41, 92, 201, 0.15);
    }

    .assign_users-lesson._green .assign_users-lesson__icon,
    .assign_users-item__inner._green .assign_users-item__img {
        background: rgba(84, 178, 104, 0.15);
    }

    .assign_users-item__img span {
        --s: 20px;
        background-color: #295CC9;;
    }

    .assign_users-item__inner._yellow .assign_users-item__img span {
        background-color: #fff;
    }

    .assign_users-lesson._green .assign_users-lesson__icon span,
    .assign_users-item__inner._green .assign_users-item__img span {
        background-color: #54B268;
    }

    .assign_users-lesson._green .assign_users-lesson__button-lesson {
        background-color: transparent;
        color: #54B268;
        border: 1px solid #54B268;
    }

    .assign_users-item__title {
        font-weight: 500;
        font-size: 16px;
        line-height: 1.15;
    }

    .assign_users-item__hidden {
        /* padding: 10px 0 0 45px; */
        padding: 10px 0 0;
    }

    .assign_users-lesson__inner {
        flex-wrap: wrap;
    }

    .assign_users-lesson:not(:last-child)::before {
        left: -33px;
        opacity: 0;
    }

    .assign_users-lesson__inner::after {
        left: -40px;
        opacity: 0;
    }

    .assign_users-lesson__main {
        margin-bottom: 10px;
    }

    .assign_users-lesson__icon {
        align-self: start;
        background-color: rgba(41, 92, 201, 0.15);
    }

    .assign_users-lesson__icon span {
        background-color: #295CC9;
    }

    .assign_users-lesson__name {
        margin-right: 0;
        font-size: 16px;
        line-height: 1.15;
    }

    .assign_users-lesson__date {
        line-height: 1.15;
    }
    
    .study .assign_users-lesson__date {
        display: none;
    }

    .assign_users-lesson__buttons {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .assign_users-lesson__button {
        flex-basis: 100%;
    }

    .study {
        /* margin-bottom: 10px; */
        margin-bottom: 0;
    }

    .study_program {
        padding: 0 10px 10px;
    }

    .study_program__header {
        height: 50px;
        position: relative;
    }

    .study_program__title {
        margin-right: 30px;
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .study_program__progress {
        display: none;
    }

    .study_program__close {
        --s: 20px;
        width: var(--s);
        height: var(--s);
        right: 26px;
        top: 50%;
        transform: translateY(-50%);
        flex-shrink: 0;
        background-color: rgba(51, 51, 51, 0.25);
        position: absolute;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url("/img/common/crosshair.svg");
        mask-image: url("/img/common/crosshair.svg");
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    .study_program__body {
        height: unset;
        padding: unset;
    }

    .context__wrapper,
    .mob_info-wrapper {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(51, 51, 51, 0.5);
        position: fixed;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        z-index: 15;
    }

    .context__wrapper._active,
    .mob_info-wrapper._active {
        opacity: 1;
        visibility: visible;
    }

    .study-context,
    .mob_info-popup {
        width: 100vw;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
        padding: 24px;
        font-size: 18px;
        line-height: 115%;
        border-radius: 30px 30px 0 0;
        background-color: #fff;
        visibility: hidden;
        transition: all 0.2s ease;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overflow-y: scroll;
        position: fixed;
        z-index: 20;
    }

    .mob_info-popup {
        top: 100px;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .study-context::-webkit-scrollbar,
    .mob_info-popup::-webkit-scrollbar {
        display: none;
        background-color: transparent;
    }

    .study-context::-webkit-scrollbar-track,
    .mob_info-popup::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: transparent;
    }

    .study-context::-webkit-scrollbar-thumb,
    .mob_info-popup::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: transparent;
    }

    .study-context._active,
    .mob_info-popup._active {
        transform: translate(0);
        visibility: visible;
    }

    .mob_info-popup__inner {
        padding: 0 20px 60px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .mob_info-popup__inner::-webkit-scrollbar {
        display: none;
    }

    .mob_info-popup__header:not(:empty) {
        margin-bottom: 40px;
    }

    .mob_info-popup__header-bg {
        padding: 20px;
        background: radial-gradient(50% 50% at 50% 50%, rgba(41, 92, 201, 0.00) 0%, rgba(41, 92, 201, 0.03) 100%);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mob_info-popup__header-icons {
        padding: 6px;
        background-color: #f7f8fa;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        position: relative;
    }

    @keyframes xplSwitcherAnimation {
        from {transform: translateX(0)}
        25% {transform: translateX(0)}
        50% {transform: translateX(calc(100% + 16px))}
        75% {transform: translateX(calc(100% + 16px))}
        to {transform: translateX(0)}
    }

    .mob_info-popup__header-icons:before {
        top: 6px;
        bottom: 6px;
        left: 6px;
        width: calc(50% - 14px);
        background-color: #fff;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        content: '';
        position: absolute;
        animation: xplSwitcherAnimation 3s ease infinite;
    }

    .mob_info-popup__header-icon {
        padding: 10px 18px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mob_info-popup__header-icon:not(:last-child) {
        margin-right: 16px;
    }

    .mob_info-popup__header-icon span {
        --s: 36px;
        width: var(--s);
        height: var(--s);
        background-color: rgba(51, 51, 51, 0.5);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        flex-shrink: 0;
    }

    .mob_info-popup__header-icon[data-type="work"] span {
        -webkit-mask-image: url(/img/common/content-task.svg);
        mask-image: url(/img/common/content-task.svg);
    }

    .mob_info-popup__header-icon[data-type="study"] span {
        -webkit-mask-image: url(/img/common/library.svg);
        mask-image: url(/img/common/library.svg);
    }

    .mob_info-popup__title {
        margin-bottom: 24px;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
    }

    .mob_info-popup__text {
        margin-bottom: 24px;
        font-size: 16px;
        line-height: 1.15;
        text-align: center;
    }

    .mob_info-popup__btns {
        margin-top: auto;
        display: flex;
        flex-direction: column;
    }

    .mob_info-popup__btn {
        height: 60px;
        padding: 12px 27px;
        font-size: 18px;
        font-weight: 400;
        color: #fff;
        background-color: #295CC9;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
    }

    .mob_info-popup__btn:not(:last-child) {
        margin-bottom: 12px;
    }

    .mob-construction {
        min-height: calc(100vh - 80px);
        margin: 0 -10px;
        padding: 24px 24px 14px;
        background-color: #fff;
        -webkit-border-radius: 20px 20px 0 0;
        -moz-border-radius: 20px 20px 0 0;
        border-radius: 20px 20px 0 0;
        display: flex;
    }

    .mob-construction__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mob-construction__img {
        --s: 300px;
        min-width: var(--s);
        height: var(--s);
        margin-top: auto;
        margin-bottom: 18px;
        background-image: url("/img/common/icon-mob-construction.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .mob-construction__title {
        margin-bottom: 24px;
        font-size: 20px;
        font-weight: 600;
    }

    .mob-construction__text {
        margin-bottom: 24px;
        font-size: 16px;
    }

    .mob-construction__btns {
        width: 100%;
        margin-top: auto;
        display: flex;
        flex-direction: column;
    }

    .mob-construction__btn {
        height: 60px;
        max-width: unset;
        right: 10px;
        bottom: 10px;
        left: 10px;
        font-size: 18px;
        font-weight: 400;
        color: #fff;
        text-decoration: none;
        background-color: #295CC9;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
    }

    .header._expiring ~ ._container .mob-construction {
        min-height: calc(100vh - 170px);
    }

    .study-context__header {
        margin-bottom: 50px;
    }

    .study-context__close,
    .aside__close,
    .profile__close {
        --s: 20px;
        width: var(--s);
        height: var(--s);
        right: 24px;
        top: 24px;
        flex-shrink: 0;
        background-color: rgba(51, 51, 51, 0.25);
        position: absolute;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url("/img/common/crosshair.svg");
        mask-image: url("/img/common/crosshair.svg");
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        z-index: 2;
    }

    .aside__close {
        background-color: #fff;
    }

    .profile__close {
        background-color: #333;
    }

    .study-context__title {
        color: rgba(51, 51, 51, 0.5);
    }

    .study-context__body>*:not(:last-of-type) {
        margin-bottom: 10px;
    }

    .study-context__info {
        margin-bottom: 28px;
        font-weight: 600;
    }

    .study-context__item {
        margin: 0 -10px;
        padding: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
    }

    .study-context__item._active {
        background-color: rgba(41, 92, 201, 0.15);
    }

    .study-context__icon {
        --s: 26px;
        width: var(--s);
        height: var(--s);
        margin-right: 16px;
        background-color: #333;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url("/img/common/min-folder-icon.svg");
        mask-image: url("/img/common/min-folder-icon.svg");
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    .study {
        padding-left: 0;
    }

    .study__inner {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 110px);
    }

    .study__bodies {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .study__body {
        flex-direction: column;
        flex-grow: 1;
    }

    .study__body._active {
        display: flex;
    }

    .study__plug {
        height: unset;
        flex-grow: 1;
    }

    .study__plug-inner {
        width: unset;
        height: unset;
    }

    .study__plug-img {
        max-width: 80%;
    }

    .study__wrapper {
        z-index: 5;
    }

    .study__header {
        min-height: 52px;
        margin-bottom: 10px;
        padding: 12px 14px;
    }

    .study__header-title {
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
        color: #fff;
        transition: color .2s ease;
    }

    .study-nav._hidden {
        width: 0;
        height: 0;
        position: absolute;
        overflow: hidden;
    }

    .study-nav {
        display: none;
    }

    .study__header-menu {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        margin-left: 15px;
        background-color: rgba(51, 51, 51, 0.5);
        flex-shrink: 0;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url("/img/editor/icon-angle.svg");
        mask-image: url("/img/editor/icon-angle.svg");
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        transform: rotate(90deg);
        display: block;
    }

    .study__header-menu._hidden {
        width: 0;
        height: 0;
        position: absolute;
        overflow: hidden;
    }

    .study__search {
        min-height: 52px;
        margin-bottom: 10px;
        padding: 14px;
    }

    .study-item {
        padding: 16px;
    }

    .study-item:not(:last-of-type) {
        margin-bottom: 10px;
    }

    .study-item__inner {
        flex-direction: column;
    }

    .study-item__img-wrapper {
        width: 100%;
        height: unset;
        margin-right: unset;
        margin-bottom: 36px;
    }

    .study-item__img {
        min-height: 200px;
    }

    .study-item__img-mob {
        width: 100%;
        bottom: 0;
        padding: 8px 10px;
        border-radius: 0 0 10px 10px;
        background-color: rgba(51, 51, 51, 0.75);
        font-weight: 500;
        font-size: 14px;
        line-height: 1;
        display: flex;
        align-items: center;
        position: absolute;
    }

    /* .study-item__img-mob>*:not(:last-child) {
        margin-right: 10px;
    } */

    .study-item__descr._empty {
        width: 100%;
        height: 36px;
        position: relative;
    }

    .study-item__descr._empty::before,
    .study-item__descr._empty::after {
        position: absolute;
        content: "";
        height: 10px;
        border-radius: 10px;
        background-color: #eeeff1;
    }

    .study-item__descr._empty::before {
        top: 0;
        width: 100%;
    }

    .study-item__descr._empty::after {
        top: 22px;
        width: 70%;
    }

    .study-item__stats {
        margin-left: 0;
        margin-right: auto;
        font-size: 14px;
        line-height: 1;
    }

    .study-item__stats-progress,
    .study-item__stats-deadline {
        min-width: 56px;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        color: #fff;
        background-color: rgba(255, 255, 255, 0.25);
        position: relative;
    }

    .study-item__stats-progress::before,
    .study-item__stats-deadline::before,
    .study-item__button-status::before {
        --s: 10px;
        width: var(--s);
        height: var(--s);
        top: -6px;
        left: 50%;
        border-radius: 2px;
        -webkit-transform: translateX(-50%) rotate(45deg);
        -ms-transform: translateX(-50%) rotate(45deg);
        transform: translateX(-50%) rotate(45deg);
        border: 5px solid;
        border-top-color: transparent;
        border-right-color: #fff;
        border-bottom-color: #fff;
        border-left-color: transparent;
        z-index: 10;
        content: "";
        position: absolute;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all .2s ease;
        box-sizing: border-box;
    }

    .study-item__stats-progress._active::before,
    .study-item__stats-deadline._active::before,
    .study-item__button-status._active::before {
        top: -18px;
        opacity: 1;
        visibility: visible;
    }

    .study-item[data-type=done] .study-item__stats-progress,
    .study-item[data-type=done] .study-item__stats-deadline,
    .study-item[data-type=await] .study-item__stats-progress,
    .study-item[data-type=await] .study-item__stats-deadline,
    .study-item[data-type=fail] .study-item__stats-progress,
    .study-item[data-type=fail] .study-item__stats-deadline {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.25);
    }

    .study-item__button-status {
        --s: 34px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .study-item__button-status>span {
        --s: 16px;
    }

    .study-item__button-status[data-type=await],
    .study-item__button-status[data-type=done],
    .study-item__button-status[data-type=fail] {
        background-color: rgba(255, 255, 255, 0.25);
    }

    .study-item__button-status[data-type=await]>span,
    .study-item__button-status[data-type=done]>span,
    .study-item__button-status[data-type=fail]>span {
        background-color: #fff;
    }

    .study-item__button-status:not(:last-child) {
        margin-right: 10px;
    }

    .study-item__buttons {
        flex-direction: column;
    }

    .study-item__buttons>*:not(:last-child) {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .study-item__button-proceed,
    .study-item__button-program {
        width: 100%;
        -webkit-tap-highlight-color: transparent;
        transition: all .2s ease;
    }

    .study-item__button-program._active {
        color: rgba(51, 51, 51, 0.5);
        background-color: #F7F8FA;
    }

    .study-hint {
        width: 320px;
        right: unset;
        left: 0;
        font-weight: 500;
        white-space: normal;
    }

    .study-hint:after {
        display: none;
    }

    .study-item__stats-progress._active>.study-hint,
    .study-item__button-status._active>.study-hint,
    .study-item__stats-deadline._active>.study-hint,
    .study-item__item._active>.study-hint {
        bottom: calc(100% + 12px);
        opacity: 1;
        visibility: visible;
    }

    .study-item__item::before {
        --s: 10px;
        width: var(--s);
        height: var(--s);
        top: -6px;
        right: 2px;
        border-radius: 2px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        border: 5px solid;
        border-top-color: transparent;
        border-right-color: #fff;
        border-bottom-color: #fff;
        border-left-color: transparent;
        z-index: 10;
        content: "";
        position: absolute;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }

    .study-item__item._active::before {
        top: -18px;
        opacity: 1;
        visibility: visible;
    }

    .study-item__item:not(:last-child) {
        margin-right: auto;
    }

    .study-item__title {
        font-weight: 500;
        font-size: 18px;
        line-height: 1.15;
    }

    .study-item__item-count {
        font-size: 20px;
    }

    .study-item__item-icon span {
        --s: 16px;
    }

    .study-item__button-content {
        display: none;
    }

    /* временно, пока не определились с описанием к модулям и курсам */
    .study-item__button-content .assign_users-item__descr {
        display: none;
    }

    .header {
        min-height: 60px;
        margin-bottom: 10px;
        padding: 10px 14px;
        top: 0;
        left: 0;
        right: 0;
        border-radius: 0 0 20px 20px;
        border-bottom: unset;
        box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.25);
        background-color: #fff;
        position: fixed;
        z-index: 4;
    }

    .breadcrumbs,
    .header__menu,
    .header form {
        display: none;
    }

    .header ._container {
        padding: 0;
    }

    .header__inner {
        padding-left: 0;
    }

    .header__icon {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        background-color: rgba(51, 51, 51, 0.5);
        -webkit-mask-image: url("/img/common/icon-menu-mob.svg");
        mask-image: url("/img/common/icon-menu-mob.svg");
        -webkit-mask-size: var(--s);
    }

    .header__nav {
        display: flex;
        align-items: center;
        order: 1;
    }

    .header__nav-notifications {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        margin-right: 20px;
        background-color: rgba(51, 51, 51, 0.5);
        -webkit-mask-image: url("/img/profile/notification-icon.svg");
        mask-image: url("/img/profile/notification-icon.svg");
        -webkit-mask-size: var(--s);
    }

    .header__nav-logo {
        --s: 38px;
        width: var(--s);
        height: var(--s);
        background-color: #0B1C35;
        -webkit-mask-image: url("/img/common/icon-logo-mob.svg");
        mask-image: url("/img/common/icon-logo-mob.svg");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }








    body {
        overflow: unset;
    }

    .news {
        padding: 0 0 10px;
    }

    .news-body {
        display: initial;
    }

    .news-aside {
        display: none;
    }

    .news-main__wrapper {
        height: unset;
    }

    .news-main {
        margin-bottom: 0;
        padding: 0;
        background-color: unset;
        border-radius: unset;
    }

    .news-main__inner {
        height: unset;
    }

    .news-lesson {
        min-height: unset;
        /*padding: 28px 14px 0 14px;*/
        padding: 0;
        background-color: #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        overflow: hidden;
    }

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

    .news-main__header {
        margin-bottom: 0;
        padding: 28px 14px;
        background: #0B1C35;
        color: #fff;
    }

    .news-lesson__content {
        padding: 0 14px;
    }

    .news .student_template__box {
        padding: 12px 0;
    }

    








    .lesson {
        padding: 0 0 60px;
    }

    .header .student_aside__header {
        top: 0;
        right: 20px;
        bottom: 0;
        left: 20px;
        border-radius: 0 0 30px 30px;
        background-color: #fff;
        display: flex;
        align-items: center;
        position: absolute;
        z-index: 1;
    }

    .sidebar .student_aside__header {
        /* margin: 0 0 10px 0;
        padding: 14px;
        background-color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; */
        display: none;
    }

    .sidebar .student_aside__backwards-icon span,
    .sidebar .lesson-mob__backwards-icon span {
        margin-left: 18px;
    }

    .lesson > .student_aside__header,
    .lesson > .lesson-mob__header {
        top: 0;
        right: 0;
        left: 0;
        height: 60px;
        margin: 0 0 10px 0;
        padding: 14px;
        background-color: #fff;
        border-radius: 0 0 20px 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: fixed;
        z-index: 5;
    }

    .header._expiring ~ ._container .lesson > .lesson-mob__header {
        top: 88px;
    }

    .lesson .student_aside {
        margin-top: -10px;
        padding: 0 0 60px;
    }

    .lesson .student_aside__backwards,
    .lesson .lesson-mob__backwards {
       margin: -10px;
       padding: 10px;
    }

    .student_aside__backwards-icon,
    .lesson-mob__backwards-icon {
        margin-right: 0;
    }

    .student_aside__info,
    .lesson-mob__info {
        margin: 0 10px;
        flex-grow: 1;
        overflow: hidden;
        display: block;
    }

    .student_aside__program,
    .lesson-mob__program {
        font-weight: 500;
        font-size: 18px;
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        white-space: nowrap;
    }

    .student_aside__progress,
    .lesson-mob__progress {
        font-size: 14px;
        color: rgba(41, 92, 201, 0.75);
        text-align: center;
    }

    .student_aside__menu,
    .lesson-mob__menu {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        background-color: #333;
        -webkit-mask-image: url(/img/common/icon-menu.svg);
        mask-image: url(/img/common/icon-menu.svg);
        -webkit-mask-size: var(--s);
        mask-size: var(--s);
        flex-shrink: 0;
        display: block;
    }

    .student_aside__navitem {
        margin: unset;
    }

    .student_aside__modules {
        margin: unset;
        padding: unset;
    }

    .student_aside__lesson-item {
        margin: unset;
    }

    .lesson__inner {
        display: block;
    }

    .sidebar {
        width: 100vw;
        top: unset;
        left: 0;
        bottom: 0;
        padding: 30px 20px 20px;
        border-radius: 30px 30px 0 0;
        background-color: #fff;
        transform: translateY(100%);
        visibility: hidden;
        transition: all 0.2s;
        z-index: 20;
        position: fixed;
    }

    .sidebar._active {
        top: 95px;
        visibility: visible;
        transform: translate(0);
    }

    .lcr__inner,
    .lce__inner {
        min-height: unset;
    }

    .lcr__inner {
        margin-bottom: 0;
    }

    .lcr__header {
        margin-bottom: 10px;
    }

    .lcr__header-inner {
        min-height: unset;
        padding: 14px;
    }

    .lcr__header-name {
        min-height: unset;
    }

    .lcr[data-type="theory"] .lcr__header {
        padding: 10px 0 30px;
    }

    .lcr[data-type="theory"] .student_template__box:not(:last-child) {
        margin-bottom: 30px;
    }

    .lcr[data-type="theory"] .lcr__header-inner {
        padding: 0 14px 14px;
    }

    .lcr[data-type="theory"] .lcr__body-inner {
        padding: 0 14px 14px;
    }

    .lcr__header-title {
        font-size: 24px;
    }

    .lcr__status {
        min-height: unset;
        margin-bottom: 10px;
        padding: 16px;
        align-items: start;
        font-size: 16px;
    }

    .lcr__status-text {
        display: block;
        margin-right: 0;
    }

    .lcr__status-text p {
        display: inline-block;
    }

    .lcr__buttons,
    .lce__buttons {
        margin-top: 10px;
    }

    .lcr__buttons-inner {
        display: block;
    }

    .lcr__button {
        height: 60px;
    }

    .lcr__button:active {
        filter: brightness(0.9);
        box-shadow: inset 0 0 10px rgba(51,51,51,0.5);
    }

    .lcr__button._loading .lcr__button-inner::after {
        -webkit-mask-image: url(/img/common/audio-loader.svg);
        mask-image: url(/img/common/audio-loader.svg);
    }

    .lcr__button:not(:last-child) {
        margin-right: unset;
        margin-bottom: 10px;
    }

    .warning__main::before {
        --s: 50px;
        top: -25px;
        left: 15px;
        width: calc(var(--s) * 1.2);
        height: var(--s);
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        content: '';
    }

    .warning__main-inner {
        display: block;
    }

    .warning__main-icon {
        position: absolute;
        top: -25px;
        left: 20px;
        margin: 0;
        padding: 10px;
    }

    .student_test-question__answer input {
        --s: 24px;
    }

    .student_template__box {
        padding: 14px;
        display: block;
        word-break: break-word;
    }

    .student_template__box:not(:last-of-type) {
        margin-bottom: 10px;
    }

    .student_template__box>*:not(:last-child) {
        margin-bottom: 10px;
    }

    .student_template__box[data-type=sort] .student_test-question__body {
        display: block;
    }

    .student_template__box[data-type=sort] .student_test-question__answer {
        margin-bottom: 10px;
        padding: 14px;
        border-radius: 10px;
        color: rgba(51, 51, 51, 0.5);
        background-color: #F7F8FA;
    }

    .student_test-question__answerbox:not(:last-child) {
        margin-bottom: 30px;
    }

    .student_test-question__sortitem {
        margin-bottom: 10px;
        display: flex;
        padding: 14px;
        border-radius: 10px;
        background-color: rgba(41, 92, 201, 0.15);
        -webkit-tap-highlight-color: transparent;
    }

    .student_template__box[data-type=sort] .student_test-question__sortitem span {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        margin-right: 18px;
        border: 1px solid #EEEFF1;
        border-radius: 50%;
        background-color: #fff;
        flex-shrink: 0;
        transition: all 0.2s ease;
        background-image: url("/img/common/checkmark.svg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .student_template__box[data-type=sort] .student_test-question__sortitem._active span {
        border: 1px solid #54B268;
        background-color: #54B268;
    }

    .student_template__box[data-type=sort] .student_test-question__sortitem._disabled {
        color: rgba(51, 51, 51, 0.5);
        background-color: rgba(41, 92, 201, 0.06);
    }

    .student_template__box[data-type=sort] .student_test-question__sortitem._disabled span {
        background-image: url("/img/common/icon-disabled.svg");
        border: none;
    }

    .student_template__box-textbox {
        line-height: 1.5;
    }

    .file__remove {
        opacity: 1;
        visibility: visible;
    }

    .student_template-task__header-top {
        margin-bottom: 8px;
    }

    .student_template-task__header {
        margin-bottom: 10px;
    }

    .student_template-task__comment-content {
        padding-left: 0;
    }

    .student_lesson-file {
        grid-gap: 10px;
    }

    .ef-file.ef {
        height: fit-content;
        padding: 10px;
    }

    .ef__descr {
        margin-top: 4px;
    }

    .video-js .vjs-control {
        /*height: 2em;*/
        width: 3em;
    }

    /*.video-js .vjs-control-bar, .video-popup__track {*/
    /*    height: 3em;*/
    /*    padding: 0;*/
    /*}*/

    /*.video-js.vjs-layout-small .vjs-playback-rate {*/
    /*    display: block;*/
    /*}*/

    /*.video-js.vjs-layout-small .vjs-picture-in-picture-control {*/
    /*    display: none;*/
    /*}*/

    .vjs-playback-rate .vjs-menu {
        left: -0.5em;
    }

    .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
        width: 3em;
    }

    .video-item__video._loading:before {
        top: 40%;
    }

    .video-item__video._loading:after {
        bottom: 15%;
        content: 'Загружаем видеофайл.\AПожалуйста, дождитесь\Aокончания загрузки.';
    }

    .video-popup,
    .student-video-popup {
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        padding: 50px 20px 20px;
    }

    .video-popup__video {
        padding-top: 100%;
    }

    .video-popup__camera {
        display: flex;
    }

    .video-popup__btns {
        margin-top: auto;
        flex-wrap: wrap;
    }

    .video-popup__btns > *:not(:last-child) {
        margin-right: 0;
        margin-bottom: 10px;
    }



    /*  ПРОГРАММЫ  */

    .xpl {
        padding-left: 0;
    }

    .xpl__grid {
        padding-bottom: 0;
        display: block;
    }

    .xpl-side {
        top: unset;
        /*height: calc(100vh - 150px);*/
        /*height: calc(100dvh - 150px);*/
        height: unset;
        padding: 0;
        background-color: unset;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .xpl-side__header {
        margin-bottom: 10px;
        padding: 8px;
        background-color: #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
    }

    .xpl-side__header > * {
        flex: 1 1 100%;
    }

    .xpl-side__header-btn {
        padding: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        font-size: 18px;
        color: rgba(51, 51, 51, 0.5);
        text-align: center;
    }

    .xpl-side__header-btn:not(:last-child) {
        margin-right: 10px;
    }

    .xpl-side__header-btn._active {
        background-color: #EEEFF1;
    }

    .xpl-side__content {
        width: 200%;

        display: flex;
        position: relative;
        transition: transform .2s ease;
    }

    .xpl-side__content._completed {
        transform: translateX(-50%);
    }

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

    a.xpl-side__item {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .xpl-side__item-link {
        background-color: #fff;
        pointer-events: none;
        /*background: var(--bg);*/
        /*background-size: 100%;*/
        /*background-position: 0 0;*/
        /*background-repeat: no-repeat;*/
        position: relative;
    }

    .xpl-side__item-link:not(:last-child) {
        margin-bottom: 10px;
    }

    .xpl-side__item-link::before,
    .xpl-side__item-link:not([onclick])::after {
        width: 100%;
        height: 210px;
        top: 0;
        left: 0;
        content: '';
        position: absolute;
    }

    .xpl-side__item-link::before {
        background: var(--bg);
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .xpl-side__item-link:not([onclick])::after {
        background: linear-gradient(0deg, #61A9FE 1.52%, rgba(97, 169, 254, 0.00) 90%);
    }

    .xpl-side__item-link:not([onclick]) {
        padding: 222px 12px 12px;
    }

    .xpl-side__item._active[data-type="section"]>.xpl-side__item-link,
    .xpl-side__item._active[data-type="program"]>.xpl-side__item-link {
        background-color: #fff;
    }

    .xpl-side__item-content {
        padding: unset;
        display: block;
    }

    .xpl-side__item-info {
        display: none;
    }

    .xpl-user__list .xpl-side__item-content {
        padding-top: unset;
        padding-bottom: unset;
    }

    .xpl-side__item-name>span,
    .xpl-side__item-name>div>span,
    .xpl-side__item._closed .xpl-side__item-name>div>x {
        display: none;
    }

    .xpl-side__item-link:not([onclick]) .xpl-side__item-name {
        font-size: 20px;
        font-weight: 600;
    }

    .xpl-side__item-button {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .xpl-side__item-button p {
        margin-right: 28px;
        font-size: 16px;
        line-height: 1.16;
        color: rgba(51, 51, 51, 0.5);
    }

    .xpl-side__item-button span {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        background-color: rgba(51, 51, 51, 0.5);
        -webkit-mask-image: url(/img/editor/icon-arrow.svg);
        mask-image: url(/img/editor/icon-arrow.svg);
        -webkit-mask-size: var(--s);
        mask-size: var(--s);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        transform: rotate(90deg);
        flex-shrink: 0;
        display: block;
    }

    .xpl-side__item-action {
        top: 130px;
        left: 14px;
        min-width: 215px;
        padding: 18px;
        font-size: 16px;
        color: inherit;
        text-decoration: none;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 1;
    }

    .xpl-side__item-action:active {
        filter: brightness(0.9);
    }

    .xpl-side__item._closed .xpl-side__item-action {
        color: #FFFFFF;
        background-color: rgba(255, 255, 255, 0.25);
        pointer-events: none;
    }

    .xpl-side__item._closed .xpl-side__item-action span {
        --s: 14px;
        width: var(--s);
        height: var(--s);
        margin-right: 10px;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url(/img/xpl/lock.svg);
        mask-image: url(/img/xpl/lock.svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        background-color: #FFFFFF;
    }

    .xpl-user__list {
        /*flex-grow: 1;*/
        /*flex-shrink: 0;*/
        /*flex-basis: 100%;*/
        width: calc(100vw - 20px);
        min-height: calc(100vh - 150px);
        min-height: calc(100dvh - 150px);
        transition: transform 0.2s ease;
        /*position: absolute;*/
    }

    /*.xpl-user__list._hidden {*/
    /*    transform: translateX(100%);*/
    /*}*/

    .xpl-user__list._active {
        /*transform: translateX(0);*/
    }

    .xpl-user__list._inactive {
        height: calc(100vh - 150px);
        overflow: hidden;
        transition: transform 0.2s ease, height 0s ease 0.2s;
    }

    .xpl-user__list-title {
        display: none;
    }

    .xpl-user__list:nth-child(1)._inactive {
        /*transform: translateX(-100%);*/
    }

    .xpl-user__list:nth-child(2)._inactive {
        /*transform: translateX(100%);*/
    }

    .xpl-user__list:not(:last-child) {
        margin-bottom: 0;
    }

    .xpl-main {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-top: 76px;
        /*padding-bottom: 70px;*/
        background: #F9FAFD;
        transform: translateX(100%);
        transition: transform .2s ease;
        position: fixed;
        z-index: 10;
        overflow: auto;
    }

    .xpl-main._active {
        transform: unset;
    }

    .xpl-main__backwards {
        top: 0;
        right: 0;
        left: 0;
        padding: 20px;
        -webkit-border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        border-radius: 0 0 10px 10px;
        background-color: #fff;
        font-size: 16px;
        line-height: 1.15;
        color: rgba(51, 51, 51, 0.5);
        box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.25);
        display: flex;
        align-items: center;
        position: fixed;
        z-index: 5;
    }

    .xpl-main__backwards span {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        margin-right: 24px;
        background-color: rgba(51, 51, 51, 0.5);
        -webkit-mask-image: url(/img/faq/arrow-black.svg);
        mask-image: url(/img/faq/arrow-black.svg);
        -webkit-mask-size: var(--s);
        mask-size: var(--s);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        transform: rotate(90deg);
        flex-shrink: 0;
        display: block;
    }

    .program {
        min-height: unset;
        padding: 0;
        background: linear-gradient(0deg, #61A9FE 32.37%, rgba(97, 169, 254, 0.00) 98.48%);
    }

    .program__img {
        position: relative;
        width: 100%;
        height: 210px;
    }

    .program__img img {
        -webkit-border-radius: 10px 10px 0 0;
        -moz-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0;
        position: relative;
        object-fit: cover;
        height: unset;
    }

    .program__inner {
        margin-top: -40px;
        padding: 0 24px 32px;
    }

    .program__name {
        margin-bottom: 10px;
    }

    .program__name h2 {
        margin-right: 0;
        font-size: 20px;
    }

    .program__descr {
        margin-bottom: 0;
    }

    .program__descr p {
        margin-bottom: unset;
        min-height: unset;
        margin-right: unset;
        font-size: 14px;
    }

    .program__descr p:not(:empty) {
        margin-bottom: 14px;
    }

    .program__content {
        font-size: 14px;
    }

    .program__btn-link {
        height: 60px;
        max-width: unset;
        right: 10px;
        bottom: 10px;
        left: 10px;
        font-size: 18px;
        font-weight: 400;
        color: #fff;
        background-color: #295CC9;
        position: fixed;
        z-index: 2;
    }
    
    .program__btn-link:after {
        top: 100%;
        left: 0;
        width: 100%;
        height: 10px;
        background-color: #fff;
        position: absolute;
        content: '';
    }

    .program__nav {
        display: none;
    }

    .xpl-body {
        padding: 0;
        padding-bottom: 70px;
    }

    .xpl-body._closed {
        padding-bottom: 0;
    }

    .xpl-user__plug-inner {
        width: 100%;
        justify-content: unset;
    }

    .xpl-user__plug-img {
        width: 100%;
    }

    .xpl-user__plug-title {
        font-size: 20px;
    }

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

    .xpl-user__stats {
        margin: 0 -20px 30px;
        padding: 0 20px;
        background-color: transparent;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        display: flex;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .xpl-user__stats::-webkit-scrollbar {
        display: none;
    }

    .xpl-user__stat {
        margin: unset;
        padding: 8px 12px;
        background-color: #62AAFE;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        min-width: 130px;
    }

    .xpl-user__stat:not(:last-child) {
        margin-right: 10px;
    }

    .xpl-user__stat>span {
        font-size: 26px;
    }

    .xpl-user__navbar {
        margin-bottom: 30px;
        font-size: 16px;
        color: rgba(51, 51, 51, 0.5);
        display: flex;
        align-items: center;
    }

    .xpl-user__navbar > *:not(:last-child) {
        margin-right: 20px;
    }

    .xpl-user__navbar-text {
        flex-grow: 1;
    }

    .xpl-user__navbar-icon {
        --s: 24px;
        width: var(--s);
        height: var(--s);
        background-color: rgba(51, 51, 51, 0.5);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        flex-shrink: 0;
    }

    .xpl-user__navbar-icon[data-type="curators"] {
        -webkit-mask-image: url(/img/common/icon-curator.svg);
        mask-image: url(/img/common/icon-curator.svg);
    }

    .xpl-user__navbar-icon[data-type="students"] {
        -webkit-mask-image: url(/img/common/icon-student.svg);
        mask-image: url(/img/common/icon-student.svg);
    }

    .xpl-user-item {
        background-color: #fff;
    }

    .xpl-user-item__inner {
        padding: 14px;
    }

    .xpl-user-item__main {
        position: relative;
    }

    /*.xpl-user-item[data-type="course"] > .xpl-user-item__inner .xpl-user-item__main:after {*/
    /*    --s: 20px;*/
    /*    top: 50%;*/
    /*    left: calc(100% + 10px);*/
    /*    transform: translateY(-50%) rotate(-90deg);*/
    /*    width: var(--s);*/
    /*    height: var(--s);*/
    /*    background-image: url(/img/xpl/angle.svg);*/
    /*    background-size: contain;*/
    /*    background-repeat: no-repeat;*/
    /*    background-position: center;*/
    /*    transition: transform 0.2s ease;*/
    /*    position: absolute;*/
    /*    content: "";*/
    /*    opacity: .5;*/
    /*}*/

    .xpl-user-item[data-type="course"] > .xpl-user-item__inner .xpl-user-item__main:after
    /*, :where(*/
    /*    .xpl-user-item[data-type="lesson"][lesson-type="test"][data-status="complete"],*/
    /*    .xpl-user-item[data-type="lesson"][lesson-type="test"][data-status="fail"],*/
    /*    .xpl-user-item[data-type="lesson"][lesson-type="test"][data-status="oncheck"],*/
    /*    .xpl-user-item[data-type="lesson"][lesson-type="task"][data-status="complete"],*/
    /*    .xpl-user-item[data-type="lesson"][lesson-type="task"][data-status="fail"],*/
    /*    .xpl-user-item[data-type="lesson"][lesson-type="task"][data-status="oncheck"]*/
    /*) .xpl-user-item__inner .xpl-user-item__main:after*/
    {
        --s: 20px;
        top: 50%;
        left: calc(100% + 10px);
        transform: translateY(-50%) rotate(-90deg);
        width: var(--s);
        height: var(--s);
        background-image: url(/img/xpl/angle.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.2s ease;
        position: absolute;
        content: "";
        opacity: .5;
    }

    .xpl-user-item._opened[data-type="lesson"] > .xpl-user-item__inner .xpl-user-item__main:after,
    .xpl-user-item._opened[data-type="course"] > .xpl-user-item__inner .xpl-user-item__main:after {
        transform: translateY(-50%) rotate(0deg);
    }

    .xpl-user-item__icon {
        --s: 34px;
    }

    .xpl-user-item__icon span {
        --s: 20px;
    }

    .xpl-user-item__status {
        margin-bottom: 0;
        font-size: 14px;
        order: 1;
    }

    .xpl-user-item__name {
        font-size: 16px;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
    }

    .xpl-user-item__show {
        margin-top: 0;
        font-size: 14px;
    }

    /*.xpl-user-item__show span {*/
    /*    display: none;*/
    /*}*/

    .xpl-user-item[data-type="course"]>.xpl-user-item__inner .xpl-user-item__name {
        margin-bottom: 0;
    }

    .xpl-user-item__lessons {
        font-size: 14px;
        pointer-events: none;
    }

    .xpl-user-item__lessons span {
        display: none;
    }

    .xpl-user-item[data-type="course"]>.xpl-user-item__hidden {
        /*margin-left: 32px;*/
        margin-left: 0;
        padding-top: 10px;
        border-left: unset;
        position: relative;
    }

    .xpl-user-item[data-type="course"]>.xpl-user-item__hidden:before {
        width: 2px;
        height: 100%;
        top: -40px;
        left: 32px;
        background-color: #DFE7F7;
        content: '';
        position: absolute;
    }

    .xpl-user-item[data-type="course"]:not(:last-child)::after {
        display: none;
    }

    .xpl-user-item[data-type="lesson"] .xpl-user-item__inner::before {
        display: none;
    }

    .xpl-user-item[data-type="lesson"] {
        /*margin-left: -32px;*/
        padding-left: 0;
    }

    .xpl-user-item[data-type="lesson"]:not(:last-child) {
        margin-bottom: 10px;
    }

    .xpl-user-item__inner {
        position: relative;
        z-index: 1;
    }

    /*.xpl-user-item__status + .xpl-user-item__name {*/
    /*    padding-top: 8px;*/
    /*}*/

    .xpl-user-item__link {
        font-size: 0;
        padding: 20px;
    }

    .xpl-user-item__link::after {
        right: -6px;
    }

    .xpl-user-question__content {
        padding-left: 0;
    }

    .xpl-user-item[data-type="lesson"] .xpl-user-item__hidden {
        padding-top: 10px;
    }

    /*.xpl-user-question__title {*/
    /*    margin-bottom: 10px;*/
    /*}*/

    .xpl-user-question__user {
        margin-bottom: 20px;
    }

    .xpl-users-aside__user-name {
        font-size: 16px;
    }

    .xpl-user-question__user .xpl-users-aside__user-pos {
        font-size: 14px;
    }

    .xpl-users-main__table-header {
        font-weight: 400;
        font-size: 16px;
        color: rgba(51, 51, 51, 0.5);
    }

    .xpl-users-main__table-header,
    .xpl-users-main__row {
        grid-template-columns: unset;
    }

    .xpl-users-main__table-header > p:not(:first-child),
    .xpl-users-main__row > div:not(:first-child) {
        display: none;
    }

    .xpl-users-main__table-body {
        height: calc(100vh - 178px);
        height: calc(100dvh - 178px);
        padding-bottom: 60px;
        scrollbar-width: none;
        overflow-y: scroll;
    }

    .xpl-users-main__table-body::-webkit-scrollbar {
        display: none;
    }

    .xpl-user-question__status {
        font-size: 16px;
    }

    /*.xpl-user-question__header + .xpl-user-question__footer {*/
    /*    margin-top: 24px;*/
    /*}*/

    .m-xpl {
        top: 100%;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 20px;
        -webkit-border-radius: 10px 10px 0 0;
        -moz-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0;
        transition: all .2s ease;
    }

    .m-xpl._active {
        top: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .m-xpl__inner {
        height: 100%;
        overflow-y: scroll;
        scrollbar-width: none;
    }

    .m-xpl__inner::-webkit-scrollbar {
        display: none;
    }

    .m-xpl__main {
        flex-grow: 1;
    }

    .m-xpl__title {
        margin-bottom: 18px;
        font-size: 20px;
    }

    .m-xpl__text,
    .study-ready .m-xpl__warning {
        font-size: 16px;
    }

    .m-xpl__buttons {
        padding-bottom: 60px;
    }

    .m-xpl__buttons,
    .study-ready .m-xpl__btn {
        width: 100%;
    }

    .chkm-modal__content {
        padding: 0 10px 80px;
    }

    .chk-block {
        word-break: break-word;
    }

    .check-answer__video {
        width: 100%;
        max-width: 365px;
        max-height: 365px;
    }
}

@media (max-width: 560px) {
    .aside._active {
        max-width: none;
    }
}._checkbox {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    border-radius: 5px;
    border: 1px solid var(--textOpacity);
    background-image: none;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex-shrink: 0;
}

._checkbox:checked {
    border-color: #54B268;
    background-color: #54B268;
    background-image: url("/img/xpl/checkmark.svg");
}

body._dark ._checkbox:checked {
    border-color: var(--text);
    background-color: var(--text);
    background-image: url('/img/common/checkmark-dark.svg');
}

._button {
    min-height: 50px;
    padding: 12px 27px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    border-radius: 10px;
    border: none;
    background-color: var(--accent);
    color: #FFFFFF;
    flex-shrink: 0;
    cursor: pointer;
}

._button:active {
    background-color: #183f94;
}

._button:disabled:active {
    background-color: #295CC9;
}

.item[data-access="read"] .item-edit {
    display: none;
}

.item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.item-info._rename {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.xpl-name {
    flex: 1;
    word-break: break-word;
}

.xpl-hint {
    margin: 0 auto;
    font-size: 16px;
    line-height: 19px;
    right: 0;
    bottom: calc(100% + 18px);
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    text-align: left;
    pointer-events: none;
    position: absolute;
    z-index: 10;
}

.xpl-hint__inner {
    width: 320px;
    padding: 12px 10px;
    border-radius: 5px;
    background-color: var(--hint);
    display: flex;
    z-index: 2;
}

.xpl-hint__shadow {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
    box-shadow: 0 4px 15px var(--hintShadow);
    position: absolute;
    z-index: -1;
}

.xpl-hint__inner::after,
.xpl-hint__shadow::after {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    right: 32px;
    bottom: -5px;
    transform: rotateZ(45deg);
    border-radius: 0 0 2px 0;
    background-color: var(--hint);
    position: absolute;
    content: '';
    z-index: -1;
}

.xpl-hint__shadow::after {
    border-radius: 0 0 2px 0;
    box-shadow: 0 4px 15px var(--hintShadow);
}

.xpl-hint__icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    background-color: #999;
    -webkit-mask-image: url("/img/xpl/info.svg");
    mask-image: url("/img/xpl/info.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

body._dark .xpl-hint__icon {
    background-color: #FFFFFF;
}

.xpl-hint__content {
    display: flex;
    flex-direction: column;
}

.xpl-hint__title {
    font-weight: 500;
    color: var(--text);
}

.xpl-hint__text {
    margin-top: 12px;
    color: #999999;
}

body._dark .xpl-hint__text {
    color: #FFFFFF;
}

.xpl-header__mode {
    display: flex;
    align-items: center;
    margin-right: auto;
    color: rgba(51, 51, 51, .5);
}

body._dark .xpl-header__mode {
    color: #FFFFFF;
}

.xpl-header__mode-text {
    margin-right: 12px;
    font-size: 16px;
    line-height: 1.15;
}

.xpl-header__mode-switch {
    display: flex;
    position: relative;
    padding: 4px;
    background-color: #F7F8FA;
    border-radius: 5px;
}

body._dark .xpl-header__mode-switch {
    background-color: rgba(255, 255, 255, 0.15);
}

.xpl-header__mode-item {
    padding: 7px 32px;
    font-size: 14px;
    line-height: 1.15;
    background-color: transparent;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.xpl-header__mode-item._active {
    background-color: #FFFFFF;
    cursor: auto;
}

body._dark .xpl-header__mode-item._active {
    background-color: #151617;
}

.xpl {
    padding-left: 90px;
}

.xpl-context,
.xpl-os-context {
    width: max-content;
    padding: 10px 7px;
    left: 0;
    top: 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--hintShadow);
    background-color: var(--hint);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 200;
}

.xpl-context._active,
.xpl-os-context._active {
    opacity: 1;
    visibility: visible;
}

.xpl-context__btn,
.xpl-os-context__button {
    width: 100%;
    height: 35px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 1;
    border-radius: 5px;
    background-color: var(--hint);
    transition: background-color .2s;
    border: none;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-context__create,
.xpl-context__unshare,
.xpl-context._shared .xpl-context__share,
.xpl-context._in-program .xpl-context__share {
    display: none;
}

.xpl-context__paste,
.xpl-context._multi .xpl-context__share,
.xpl-context._multi .xpl-context__rename,
.xpl-context._empty .xpl-context__share,
.xpl-context._promo .xpl-context__remove,
.xpl-os-context__paste {
    opacity: .5;
    cursor: auto;
}

.xpl-context._create .xpl-context__create,
.xpl-context._shared .xpl-context__unshare {
    display: flex;
}

.xpl-context._paste:not(._readonly) .xpl-context__paste {
    opacity: 1;
}

.xpl-context._create .xpl-context__share,
.xpl-context._create .xpl-context__unshare,
.xpl-context._sidebar .xpl-context__share,
.xpl-context._sidebar .xpl-context__unshare {
    display: none;
}

.xpl-context._create .xpl-context__rename,
.xpl-context._create .xpl-context__copy,
.xpl-context._create .xpl-context__remove,
.xpl-context._readonly .xpl-context__share,
.xpl-context._readonly .xpl-context__unshare,
.xpl-context._readonly .xpl-context__rename,
.xpl-context._readonly .xpl-context__remove {
    opacity: .5;
    cursor: auto;
}

.xpl-context__remove,
.xpl-os-context__remove {
    color: #E54047;
    cursor: pointer;
}

.xpl-context__btn:not(:last-child) {
    margin-bottom: 4px;
}

.xpl__grid {
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: 340px auto;
    grid-gap: 20px;
}

.xpl-side {
    height: calc(100vh - 124px);
    top: 102px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    scrollbar-width: none;
    -webkit-position: sticky;
    position: sticky;
}

.xpl-side__structure {
    display: flex;
    padding: 4px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.xpl-side__structure-link {
    flex: 1;
    height: 42px;
    font-size: 14px;
    line-height: 1.15;
    color: var(--textOpacity);
    border-radius: 5px;
    text-decoration: none;
}

.xpl-side__structure-link._active {
    background-color: #F7F8FA;
}

.xpl-side__structure-link:not(:last-child) {
    margin-right: 2px;
}

.xpl-side__content {
    padding: 12px;
    background-color: var(--mainBg);
    border-radius: 10px;
}

.xpl-side::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.xpl-side__banner {
    padding: 10px 13px 14px;
    margin-bottom: 24px;
    background-image: url('/img/xpl/side-banner-bg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #FFFFFF;
    border-radius: 10px;
}

.xpl-side__banner-title {
    margin-bottom: 17px;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
}

.xpl-side__banner-text {
    margin-bottom: 17px;
    font-size: 16px;
    line-height: 1.15;
}

.xpl-side__banner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    background-color: #FFFFFF;
    color: #61A9FE;
    border-radius: 8px;
    text-decoration: none;
}

.xpl-side__header {
    display: none;
}

/*.xpl-side__faq {*/
/*    color: #295CC9;*/
/*}*/

/*.xpl-side__faq._active .xpl-side__item-link {*/
/*    background-color: rgba(41, 92, 201, 0.03);*/
/*}*/

.xpl-side__add + .xpl-side__list,
.xpl-side__list + .xpl-side__list {
    margin-top: 40px;
}

.xpl-side__list-empty {
    padding-left: 12px;
    font-size: 18px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.xpl-side__list-title {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 12px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.xpl-side__list-title>p {
    text-transform: uppercase;
}

.xpl-side__list-hint {
    flex-shrink: 0;
    margin-left: 10px;
}

.xpl-side__list-hint>span {
    --s: 20px;

    display: block;
    width: var(--s);
    height: var(--s);
    background-color: var(--textOpacity);
    -webkit-mask-image: url('/img/common/info-circle.svg');
    mask-image: url('/img/common/info-circle.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xpl-side__list-hint._top .xpl-hint {
    bottom: auto;
    top: calc(100% + 18px);
}

.xpl-side__list-hint._top .xpl-hint__inner::after,
.xpl-side__list-hint._top .xpl-hint__shadow::after {
    bottom: auto;
    top: -5px;
}

.xpl-side__list-title[data-type="promo"] .xpl-hint__inner::after,
.xpl-side__list-title[data-type="promo"] .xpl-hint__shadow::after {
    right: 172px;
}

.xpl-side__list-title[data-type="tpl"] .xpl-hint__inner::after,
.xpl-side__list-title[data-type="tpl"] .xpl-hint__shadow::after {
    right: 196px;
}

.xpl-side__item {
    color: inherit;
    text-decoration: none;
}

a.xpl-side__item {
    display: block;
}

.xpl-side__item._closed .xpl-side__item-name>div>span {
    background-color: var(--textOpacity);
}

.xpl-side__item._closed .xpl-side__item-name>p {
    color: var(--textOpacity);
}

.xpl-side__item._closed .xpl-side__item-name>div>x {
    width: 14px;
    height: 17px;
    left: 11px;
    top: -3px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/lock.svg");
    mask-image: url("/img/xpl/lock.svg");
    -webkit-mask-size: 14px 17px;
    mask-size: 14px 17px;
    position: absolute;
    content: '';
}

.xpl-side__item:not(:last-child) {
    margin-bottom: 6px;
}

.xpl-side__item-link {
    padding: 12px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    display: block;
}

.xpl-side__item-link._rename {
    cursor: auto;
}

.xpl-side__item[data-type="section"]>.xpl-side__item-link {
    cursor: auto;
}

.xpl-side__item-name {
    font-size: 18px;
    line-height: 1.15;
    display: flex;
    align-items: center;
}

.xpl-side__item-name a {
    color: inherit;
    text-decoration: none;
}

.xpl-side__item-name>div {
    position: relative;
}

.xpl-side__item-name>div>span {
    display: block;
}

.xpl-side__item-name>span,
.xpl-side__item-name>div>span,
.xpl-side__add-icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-color: var(--text);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
    transition: all .2s;
}

.xpl-side__item[data-type="section"]>.xpl-side__item-link>.xpl-side__item-name>span {
    cursor: pointer;
}

.xpl-side__item._active[data-type="section"]>.xpl-side__item-link,
.xpl-side__item._current[data-type="section"]>.xpl-side__item-link,
.xpl-side__item._active[data-type="program"]>.xpl-side__item-link {
    background-color: var(--hover);
}

.xpl-side__item._active._program[data-type="section"]>.xpl-side__item-link {
    background-color: transparent;
}

.xpl-side__item._active._program[data-type="section"]>.xpl-side__item-link>.xpl-side__item-name>span,
.xpl-side__item._active[data-type="section"]>.xpl-side__item-link>.xpl-side__item-name>span {
    transform: rotate(90deg);
}

.lib__aside .xpl-side__item._active[data-type="section"]>.xpl-side__item-link,
.xpl-user__list .xpl-side__item._active[data-type="section"]>.xpl-side__item-link {
    background-color: var(--mainBg);
}

.xpl-side .xpl-side__item._active[data-type="section"] .xpl-side__item-content {
    display: block;
}

.xpl-side__item[data-type="section"] .xpl-side__item-name>span {
    -webkit-mask-image: url("/img/xpl/section.svg");
    mask-image: url("/img/xpl/section.svg");
}

.xpl-side__item[data-type="program"] .xpl-side__item-name>span,
.xpl-side__item[data-type="program"] .xpl-side__item-name>div>span {
    -webkit-mask-image: url("/img/xpl/folder.svg");
    mask-image: url("/img/xpl/folder.svg");
}

.xpl-side__item[data-type="program"][data-access="none"] .xpl-side__item-name>span {
    -webkit-mask-image: url("/img/xpl/program-locked.svg");
    mask-image: url("/img/xpl/program-locked.svg");
    opacity: .5;
}

.xpl-side__item-link[data-type="program"][data-access="none"] {
    opacity: .5;
    cursor: auto;
}

/*.xpl-side__faq .xpl-side__item-name>span {*/
/*    background-color: #295CC9;*/
/*    -webkit-mask-image: url("/img/xpl/question.svg");*/
/*    mask-image: url("/img/xpl/question.svg");*/
/*}*/

.xpl-side__item-content {
    padding: 6px 0 0 16px;
    display: none;
}

.xpl-side__item-list {
    padding-bottom: 6px;
}

.xpl-side__item-action,
.xpl-side__item-button {
    display: none;
}

.xpl-side__add {
    padding: 12px;
    border: none;
    background-color: transparent;
    opacity: .5;
    transition: all .2s;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-side__add[data-type="section"] .xpl-side__add-icon {
    -webkit-mask-image: url("/img/xpl/add-section.svg");
    mask-image: url("/img/xpl/add-section.svg");
}

.xpl-side__add[data-type="program"] .xpl-side__add-icon {
    -webkit-mask-image: url("/img/xpl/add-folder.svg");
    mask-image: url("/img/xpl/add-folder.svg");
}

.xpl-side__item-info {
    margin-top: 4px;
    padding-left: 34px;
}

.xpl-side__item-header {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
    display: flex;
    justify-content: space-between;
}

.xpl-side__item-date {
    margin-right: 24px;
}

.xpl-side__item-progress {
    height: 10px;
    border-radius: 20px;
    background-color: var(--accentOpacity);
    position: relative;
}

body._dark .xpl-side__item-progress {
    background-color: var(--svg);
}

/*.banner-store__wrapper {*/
/*    margin: auto -12px 0;*/
/*    padding: 36px 12px 12px;*/
/*    bottom: 0;*/
/*    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, transparent 100%);*/
/*    -webkit-position: sticky;*/
/*    position: sticky;*/
/*}*/

/*.banner-store {*/
/*    padding: 24px 14px 14px;*/
/*    border-radius: 10px;*/
/*    background-image: url('/img/xpl/banner-bg.png?1');*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    background-size: cover;*/
/*    color: #fff;*/
/*}*/

/*.banner-store__top {*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/*.banner-store__header {*/
/*    margin: 0 40px 40px 0;*/
/*    position: relative;*/
/*}*/

/*.banner-store__header .folder:nth-child(1) {*/
/*    transform: translateX(25%);*/
/*}*/

/*.banner-store__header .folder:nth-child(2) {*/
/*    left: 0;*/
/*    top: 0;*/
/*    transform: translateY(33%);*/
/*    position: absolute;*/
/*}*/

/*.banner-store__title {*/
/*    margin-bottom: 18px;*/
/*    font-weight: 700;*/
/*    font-size: 26px;*/
/*    line-height: 30px;*/
/*    text-transform: uppercase;*/
/*}*/

/*.banner-store__text {*/
/*    margin-bottom: 20px;*/
/*    font-size: 16px;*/
/*    line-height: 19px;*/
/*}*/

/*.banner-store__btn {*/
/*    width: 100%;*/
/*    font-size: 18px;*/
/*    line-height: 21px;*/
/*    background-color: #fff;*/
/*    color: #61A9FE;*/
/*    text-decoration: none;*/
/*}*/

/*.banner-store__btn:active {*/
/*    background-color: #fff;*/
/*}*/

/*.am {*/
/*    border-radius: 10px;*/
/*    background-color: #FFFFFF;*/
/*}*/

/*.am-header {*/
/*    margin-bottom: 24px;*/
/*    padding: 40px 28px 18px;*/
/*    position: relative;*/
/*}*/

/*.am-header__inner {*/
/*    max-width: 570px;*/
/*}*/

/*.am-header__title {*/
/*    margin-bottom: 25px;*/
/*    font-weight: 700;*/
/*    font-size: 26px;*/
/*    line-height: 1.15;*/
/*}*/

/*.am-header__title span {*/
/*    display: block;*/
/*}*/

/*.am-header__text {*/
/*    margin-bottom: 44px;*/
/*    font-size: 16px;*/
/*    line-height: 1.15;*/
/*    color: rgba(51, 51, 51, .75);*/
/*}*/

/*.am-header__text span {*/
/*    margin-top: 16px;*/
/*    color: rgba(51, 51, 51, .5);*/
/*    display: block;*/
/*}*/

/*.am-header__action {*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/*.am-header__button {*/
/*    margin-right: 18px;*/
/*}*/

/*.am-header__button span {*/
/*    --s: 14px;*/
/*    width: var(--s);*/
/*    height: calc(var(--s) / 14 * 16);*/
/*    margin-right: 14px;*/
/*    background-color: #FFFFFF;*/
/*    -webkit-mask-image: url("/img/xpl/premium-lock.svg");*/
/*    mask-image: url("/img/xpl/premium-lock.svg");*/
/*    -webkit-mask-size: var(--s) calc(var(--s) / 14 * 16);*/
/*}*/

/*.am-header__action-text {*/
/*    font-size: 16px;*/
/*    line-height: 1.15;*/
/*    color: rgba(51, 51, 51, .5);*/
/*}*/

/*.am-header__img {*/
/*    max-width: 50%;*/
/*    height: 100%;*/
/*    right: 0;*/
/*    top: 0;*/
/*    border-radius: 0 10px 0 0;*/
/*    object-fit: cover;*/
/*    position: absolute;*/
/*}*/

/*.am-body {*/
/*    padding: 20px 28px;*/
/*}*/

/*.am-body__title {*/
/*    margin-bottom: 25px;*/
/*    font-size: 18px;*/
/*    line-height: 1;*/
/*    color: rgba(51, 51, 51, .5);*/
/*}*/

/*.am-body__grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));*/
/*    grid-gap: 20px;*/
/*}*/

/*.am-item {*/
/*    min-height: 230px;*/
/*    padding: 18px;*/
/*    font-weight: 500;*/
/*    font-size: 16px;*/
/*    line-height: 1.15;*/
/*    border-radius: 10px;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: space-between;*/
/*}*/

/*.am-item:not([data-status="dev"]) {*/
/*    background-image: url('/img/xpl/premium-item.svg');*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    background-position: center center;*/
/*}*/

/*.am-item[data-color="#F68CF9"] {*/
/*    background-color: #F68CF9;*/
/*}*/

/*.am-item[data-color="#8CA7EF"] {*/
/*    background-color: #8CA7EF;*/
/*}*/

/*.am-item[data-color="#9ADA99"] {*/
/*    background-color: #9ADA99;*/
/*}*/

/*.am-item[data-color="#EEA2C3"] {*/
/*    background-color: #EEA2C3;*/
/*}*/

/*.am-item[data-color="#99D2DA"] {*/
/*    background-color: #99D2DA;*/
/*}*/

/*.am-item[data-color="#FF9777"] {*/
/*    background-color: #FF9777;*/
/*}*/

/*.am-item[data-color="#FECF75"] {*/
/*    background-color: #FECF75;*/
/*}*/

/*.am-item[data-status="dev"] {*/
/*    font-weight: 400;*/
/*    background-color: #F7F8FA;*/
/*}*/

/*.am-item[data-status="dev"] .am-item__name {*/
/*    color: rgba(51, 51, 51, .75);*/
/*}*/

/*.am-item[data-status="dev"] .am-item__content {*/
/*    color: rgba(51, 51, 51, .5);*/
/*}*/

/*.am-item[data-status="locked"] .am-item__icon {*/
/*    background-image: url('/img/xpl/premium-folder-lock.svg');*/
/*}*/

/*.am-item[data-status="opened"] .am-item__icon {*/
/*    background-image: url('/img/xpl/premium-folder-open.svg');*/
/*}*/

/*.am-item[data-status="dev"] .am-item__icon {*/
/*    background-image: url('/img/xpl/premium-folder-plus.svg');*/
/*}*/

/*.am-item__header {*/
/*    color: rgba(255, 255, 255, .5);*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*}*/

/*.am-item__icon {*/
/*    --s: 60px;*/
/*    width: var(--s);*/
/*    height: calc(var(--s) / 60 * 51);*/
/*    margin-right: 12px;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    background-position: center center;*/
/*}*/

/*.am-item__name {*/
/*    margin-bottom: 2px;*/
/*    font-weight: inherit;*/
/*    color: #FFFFFF;*/
/*}*/

/*.am-item__content {*/
/*    color: rgba(255, 255, 255, .5);*/
/*}*/

/*.folder {*/
/*    --s: 57px;*/
/*    width: var(--s);*/
/*    height: calc(var(--s) / 57 * 50);*/
/*    position: relative;*/
/*}*/

/*.folder__icon {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-image: url('/img/xpl/shop-folder.svg?1');*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    background-size: contain;*/
/*}*/

/*.folder__lock {*/
/*    --s: 14px;*/
/*    width: var(--s);*/
/*    height: calc(var(--s) / 16 * 17);*/
/*    right: 12.5%;*/
/*    bottom: 12.5%;*/
/*    background-color: #fff;*/
/*    -webkit-mask-size: var(--s);*/
/*    mask-size: var(--s);*/
/*    -webkit-mask-image: url("/img/xpl/shop-folder-lock.svg");*/
/*    mask-image: url("/img/xpl/shop-folder-lock.svg");*/
/*    position: absolute;*/
/*}*/

.xpl-main {
    display: flex;
    flex-direction: column;
}

.xpl-main__backwards {
    display: none;
}

.section {
    padding: 24px;
    border-radius: 10px 10px 0 0;
    background-color: #61A9FE;
    background-image: url('/img/xpl/section-bg.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    color: #fff;
}

body._dark .section {
    background-color: #1C1D1E;
}

.section._student .section__name {
    margin-bottom: 44px;
}

.section__header {
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-end;
}

.section__remove,
.section__name button,
.program__header-remove,
.program__name span,
.program__descr span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    border: none;
    background-color: #fff;
    -webkit-mask-image: url("/img/xpl/remove.svg");
    mask-image: url("/img/xpl/remove.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
    cursor: pointer;
}

.section__name {
    margin-bottom: 4px;
    display: flex;
}

.section__name._rename button {
    opacity: 0!important;
    visibility: hidden!important;
}

.section__name h2,
.program__name h2 {
    margin-right: 16px;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    outline: none;
    word-break: break-word;
}

.section__name button,
.program__name span,
.program__descr span {
    -webkit-mask-image: url("/img/xpl/pencil.svg");
    mask-image: url("/img/xpl/pencil.svg");
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
}

.section__dates {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(255, 255, 255, .75);
}

.section__footer {
    font-size: 16px;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section__count {
    margin-right: 24px;
    display: flex;
}

.section__count span {
    margin-right: 6px;
}

.section__author {
    color: rgba(255, 255, 255, .75);
}

.xpl-main__header._closed .program__btn-link {
    display: none;
}

.program {
    min-height: 250px;
    padding: 24px 24px 68px 0;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px 10px 0 0;
    color: #fff;
    background: url('/img/xpl/program-bg.png') no-repeat right, linear-gradient(269.92deg, #61A9FE 60.65%, rgba(97, 169, 254, 0) 99.93%);
    background-size: contain;
    position: relative;
}

.xpl-os-main .program {
    background: url("/img/xpl/xpl-os-program-bg.png");
}

body._dark .program {
    background: url('/img/xpl/program-bg.png') no-repeat right, linear-gradient(270deg, #1C1D1E 60.65%, rgba(28, 29, 30, 0.00) 99.93%);
}

.program._template {
    padding-bottom: 24px;
}

.program._shared .program__shared span {
    background-color: #54B268;
}

.program._student .program__nav-item {
    max-width: 200px;
}

.program._student .program__nav-item.program__nav-tasks {
    max-width: 280px;
}

.program._student .program__nav-item:last-child {
    border-radius: 10px 10px 0 0;
}

.program[data-access="read"] .program__header-remove,
.program[data-access="read"] .program__name>span,
.program[data-access="read"] .program__descr>span {
    display: none;
}

.program__img {
    width: calc(460 / 1120 * 100%);
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

.program__img img {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 10px 0 0 0;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}

.program__img input {
    width: 89%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    z-index: 2;
}

.program__img input::-webkit-file-upload-button {
    display: none;
}

.program__img-plug {
    height: 100%;
    width: 89%;
    padding: 24px;
    font-size: 18px;
    line-height: 1;
    left: 0;
    top: 0;
    border-radius: 10px 10px 10px 0;
    background: linear-gradient(89deg, rgba(3, 3, 3, 0.3) 0%, rgba(234, 234, 234, 0.00) 100%);
    opacity: 0;
    transition: all .2s;
    flex-direction: column;
    position: absolute;
}

.program__img-plug span {
    --s: 58px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 18px;
    background-color: rgba(255, 255, 255, .5);
    -webkit-mask-image: url("/img/xpl/folder.svg");
    mask-image: url("/img/xpl/folder.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.program__inner {
    padding-left: calc(460 / 1120 * 100% - 20px);
}

.program__header {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}

.program__header-info {
    margin-right: 24px;
    flex: 1;
}

.program__shared {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.program__shared span {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
    background-color: #fff;
    flex-shrink: 0;
}

.program__unit {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    color: #fff;
}

.program__unit > span {
    --s: 16px;
    
    margin-right: 6px;
    background-color: #fff;
    -webkit-mask-image: url("/img/explorer/icon-structure.svg?1");
    mask-image: url("/img/explorer/icon-structure.svg?1");
}

.program__name {
    margin-bottom: 12px;
    display: flex;
}

.program__name._rename,
.program__descr._rename {
    position: relative;
    z-index: 4;
}

.program__name._rename span,
.program__descr._rename span {
    opacity: 0!important;
    visibility: hidden!important;
}

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

.program__descr p {
    min-height: 20px;
    margin-right: 16px;
    outline: none;
    word-break: break-word;
}

.program__content {
    font-weight: 500;
    display: flex;
}

.program__content>div {
    display: flex;
}

.program__content>div:not(:last-child),
.program__content>div>span {
    margin-right: 5px;
}

.program__content>div:not(:first-child) {
    margin-left: 5px;
}

.program__nav {
    width: 100%;
    bottom: 0;
    display: flex;
    position: absolute;
    z-index: 4;
}

.program__nav-item {
    height: 50px;
    border-radius: 10px 10px 0 0;
    border: none;
    background-color: transparent;
    flex: 1;
    transition: all .2s;
    cursor: pointer;
    position: relative;
}

.program__nav-item:not(._active):before {
    width: 1px;
    height: 24px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, .25);
    transition: all .2s;
    position: absolute;
    content: '';
}

.program__nav-item._closed {
    cursor: auto;
}

.program__nav-item._closed>span {
    --s: 18px;
    width: var(--s);
    height: calc(var(--s) / 16 * 17);
    background-color: rgba(255, 255, 255, .5);
    -webkit-mask-image: url('/img/xpl/shop-folder-lock.svg');
    mask-image: url('/img/xpl/shop-folder-lock.svg');
    -webkit-mask-size: var(--s) calc(var(--s) / 16 * 17);
    mask-size: var(--s) calc(var(--s) / 16 * 17);
}

.program__nav-item._closed>p {
    color: rgba(255, 255, 255, .5);
}

.program__nav-item._active {
    background-color: var(--mainBg);
    color: var(--text);
}

.program__nav-item._active>span {
    background-color: var(--text);
}

.program__nav-item._active + .program__nav-item:before {
    opacity: 0;
}

.program__nav-item:first-child {
    border-radius: 0 10px 0 0;
}

.program__nav-item:last-child {
    border-radius: 10px 0 0 0;
}

.program__nav-item>span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-color: #fff;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.program__nav-content>span {
    -webkit-mask-image: url("/img/xpl/folder.svg");
    mask-image: url("/img/xpl/folder.svg");
}

.program__nav-curator>span {
    -webkit-mask-image: url("/img/xpl/user.svg");
    mask-image: url("/img/xpl/user.svg");
}

.program__nav-editornew>span {
    -webkit-mask-image: url("/img/xpl/editor.svg");
    mask-image: url("/img/xpl/editor.svg");
}

.program__nav-student>span {
    -webkit-mask-image: url("/img/xpl/student.svg");
    mask-image: url("/img/xpl/student.svg");
}

.program__nav-hr>span,
.program__nav-security>span {
    -webkit-mask-image: url("/img/xpl/security.svg");
    mask-image: url("/img/xpl/security.svg");
}

.program__nav-settings>span {
    -webkit-mask-image: url("/img/xpl/settings.svg");
    mask-image: url("/img/xpl/settings.svg");
}

.program__nav-share>span {
    -webkit-mask-image: url("/img/xpl/share.svg");
    mask-image: url("/img/xpl/share.svg");
}

.program__nav-tasks>span {
    -webkit-mask-image: url('/img/xpl/lesson-task.svg');
    mask-image: url('/img/xpl/lesson-task.svg');
}

.program__btn-link {
    max-width: 225px;
    margin-top: 18px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    background-color: #fff;
    color: #62AAFE;
    text-decoration: none;
}

body._dark .program__btn-link {
    color: var(--accentGray);
}

.program__btn-link:active {
    background-color: #fff;
}

.xpl-content__plug {
    width: 100%;
    height: 100%;
    padding: 24px 24px 44px;
    left: 0;
    top: 0;
    border-radius: 0 0 10px 10px;
    background-color: var(--mainBg);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    z-index: 9;
    overflow: auto;
    scrollbar-width: none;
}

.xpl-content__plug::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.xpl-content__plug-img {
    max-width: 350px;
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
}

.xpl-content__plug-img svg {
    width: 100%;
    height: calc(359 / 396 * 100%);
}

.xpl-content__plug-title {
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
}

.xpl-content__plug-text {
    margin-bottom: 44px;
    font-size: 20px;
    line-height: 1.15;
}

.xpl-content__plug-buttons {
    margin-bottom: auto;
    display: flex;
}

.xpl-content__plug-btn {
    width: 270px;
    min-height: 56px;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    border-radius: 10px;
    border: none;
    background-color: var(--accent);
    color: #fff;
    cursor: pointer;
}

.xpl-content__plug-btn {
    margin-right: 10px;
}

.xpl-content-plug__lib,
.xpl-content-plug__paste {
    position: relative;
}

.xpl-content-plug__lib {
    margin-right: 10px;
}

.xpl-content-plug__paste {
    display: none;
}

.xpl-content-plug__lib .xpl-content-plug__btn span {
    -webkit-mask-image: url("/img/xpl/student.svg");
    mask-image: url("/img/xpl/student.svg");
}

.xpl-content-plug__paste .xpl-content-plug__btn span {
    --s: 28px;
    -webkit-mask-image: url("/img/editor/icon-copy.svg");
    mask-image: url("/img/editor/icon-copy.svg");
}

.xpl-content-plug__btn {
    --s: 56px;
    width: var(--s);
    height: var(--s);
    border-radius: 10px;
    border: none;
    background-color: #F7F8FA;
    cursor: pointer;
}

body._dark .xpl-content-plug__btn {
    background-color: rgba(255, 255, 255, .15);
}

.xpl-content-plug__btn span {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    background-color: #999999;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .xpl-content-plug__btn span {
    background-color: #FFFFFF;
}

.xpl-body {
    padding: 20px 24px;
    border-radius: 0 0 10px 10px;
    background-color: var(--mainBg);
    flex: 1;
    position: relative;
}

.xpl-body._paste .xpl-content-plug__paste {
    display: block;
}

.xpl-body._loading .xpl-loader__wrapper,
.xpl-body._empty .xpl-content__plug {
    opacity: 1;
    visibility: visible;
}

.xpl-body[data-access="read"] .xpl-content__plug-buttons {
    display: none;
}

.xpl-body[data-type="content"] {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

.xpl-users-main__switch {
    margin-bottom: 30px;
    padding: 3px 5px;
    font-size: 18px;
    line-height: 1.15;
    border-radius: 40px;
    background-color: var(--hover);
    display: inline-flex;
    position: relative;
    cursor: pointer;
}

.xpl-users-main__switch._disabled {
    cursor: auto;
}

.xpl-users-main__switch[data-mode="active"] .xpl-users-main__switch-item:nth-child(1),
.xpl-users-main__switch[data-mode="complete"] .xpl-users-main__switch-item:nth-child(2) {
    color: #FFFFFF;
}

.xpl-users-main__switch[data-mode="active"] .xpl-users-main__switch-glider {
    transform: translateX(0);
}

.xpl-users-main__switch._disabled[data-mode="active"] .xpl-users-main__switch-item:nth-child(2) {
    opacity: .5;
}

.xpl-users-main__switch[data-mode="complete"] .xpl-users-main__switch-glider {
    width: 285px;
    transform: translateX(195px);
}

.xpl-users-main__switch._disabled[data-mode="complete"] .xpl-users-main__switch-item:nth-child(1) {
    opacity: .5;
}

.xpl-users-main__switch-item {
    padding: 7px 15px;
    border-radius: 40px;
    position: relative;
    z-index: 2;
}

.xpl-users-main__switch-item:nth-child(1) {
    width: 180px;
    text-align: center;
}

.xpl-users-main__switch-item:nth-child(2) {
    width: 285px;
    text-align: center;
}

.xpl-users-main__switch-item + .xpl-users-main__switch-item {
    margin-left: 15px;
}

.xpl-users-main__switch-glider {
    height: calc(100% - 6px);
    width: 180px;
    top: 3px;
    left: 5px;
    border-radius: 40px;
    transition: all .2s;
    background-color: #0B1C35;
    position: absolute;
}

body._dark .xpl-users-main__switch-glider {
    background-color: var(--mainBg);
}

.xpl-body._student .xpl-users-main__table-header,
.xpl-body._student .xpl-users-main__row {
    display: grid;
    grid-template-columns: 1fr 200px;
    grid-gap: 44px;
}

.xpl-body._student .xpl-users-main__table-header>p:nth-child(3),
.xpl-body._student .xpl-users-main__action {
    display: none;
}

.xpl-body[data-access="read"] .tree-item + .tree-item:not(._hidden)::after {
    left: calc(var(--px) + var(--s) / 2 - 1px);
}

.xpl-body[data-access="read"] .tree-item__lessons:not([onclick="toggleLessons(this)"]) {
    cursor: auto;
}

.xpl-body[data-access="read"] .tree-lessons {
    margin-left: calc(var(--px) + var(--s) / 2 - 1px);
}

.xpl-body[data-access="read"] .tree-item:last-child .tree-lesson:last-child::after {
    width: 2px;
    height: 50%;
    left: 44px;
    top: calc(50% + 1px);
    background-color: #FFFFFF;
    position: absolute;
    content: '';
}

.xpl-warning {
    display: flex;
    padding: 10px 17px 13px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.15;
    background-color: rgba(41, 92, 201, 0.075);
    border-radius: 10px;
}

.xpl-warning__icon {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 17px;
    background-color: #333333;
    -webkit-mask-image: url("/img/xpl/warning.svg");
    mask-image: url("/img/xpl/warning.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transform: rotateZ(180deg);
}

.xpl-warning__info {
    padding-top: 3px;
}

.xpl-warning__title {
    margin-bottom: 11px;
    font-weight: 500;
}

.xpl-actions {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.xpl-search {
    margin-right: 20px;
    flex: 1;
    display: flex;
    align-items: center;
}

.xpl-search span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 18px;
    background-color: #999999;
    -webkit-mask-image: url("/img/xpl/search.svg");
    mask-image: url("/img/xpl/search.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.xpl-search input {
    font-size: 18px;
    line-height: 1;
    background-color: transparent;
    border: none;
    flex: 1;
}

.xpl-actions__button {
    min-height: 40px;
    margin-right: 20px;
}

.xpl-switch {
    --s: 55px;
    --g: 8px;
    padding: 6px;
    border-radius: 40px;
    background-color: var(--hover);
    flex-shrink: 0;
}

.xpl-switch[data-status="list"] .xpl-switch__mode[data-type="list"]>span,
.xpl-switch[data-status="grid"] .xpl-switch__mode[data-type="grid"]>span {
    background-color: #fff;
}

.xpl-switch[data-status="grid"] .xpl-switch__circle {
    transform: translateX(calc(var(--s) + var(--g)));
}

.xpl-switch__inner {
    display: flex;
    position: relative;
}

.xpl-switch__circle {
    left: 0;
    top: 0;
    background-color: var(--accent);
    transition: all .2s;
    position: absolute;
    z-index: 1;
}

.xpl-switch__circle,
.xpl-switch__mode {
    width: var(--s);
    height: calc(var(--s) / 55 * 40);
    border-radius: 40px;
}

.xpl-switch__mode {
    z-index: 2;
    cursor: pointer;
}

.xpl-switch__mode:not(:last-child) {
    margin-right: var(--g);
}

.xpl-switch__mode>span {
    --s: 26px;
    width: var(--s);
    height: var(--s);
    background-color: var(--accent);
    transition: all .2s;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .xpl-switch__mode>span {
    background-color: var(--text);
}

.xpl-switch__mode[data-type="list"]>span {
    -webkit-mask-image: url("/img/xpl/mode-list.svg");
    mask-image: url("/img/xpl/mode-list.svg");
}

.xpl-switch__mode[data-type="grid"]>span {
    -webkit-mask-image: url("/img/xpl/mode-grid.svg");
    mask-image: url("/img/xpl/mode-grid.svg");
}

.xpl-mode {
    display: none;
}

.xpl-mode._active {
    display: block;
}

.xpl-search__action,
.lib__search {
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 1;
    display: none;
}

.xpl-search__action._active,
.lib__search._active {
    display: block;
}

.xpl-search__action-inner,
.lib__search-inner {
    display: flex;
    justify-content: space-between;
}

.xpl-search__action-inner>button,
.lib__search-clear {
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    border: none;
    background-color: transparent;
    color: #295CC9;
    text-decoration: underline;
    cursor: pointer;
}

.lib-search__result {
    margin-bottom: 24px;
    padding-left: 12px;
    font-size: 16px;
    line-height: 1.15;
    display: flex;
    justify-content: space-between;
}

.lib-search__result-text {
    margin-right: 24px;
    color: rgba(51, 51, 51, .5);
}

.lib-search__result-button {
    padding: 0;
    border: none;
    background-color: transparent;
    color: #295DC9;
    cursor: pointer;
    text-decoration: underline;
}

.xpl-list__header {
    margin-bottom: 20px;
    padding: 0 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    background-color: var(--hover);
    border-radius: 42px;
}


.xpl-list__header-inner,
.list-add__inner,
.list-item__inner {
    min-height: 50px;
    display: grid;
    align-items: center;
    grid-template-columns: 24px 2.5fr 2fr 1fr 2fr;
    grid-gap: 24px;
}

.xpl-list__header-item {
    display: flex;
}

.xpl-list__header-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-list__header-btn:not(:last-child) {
    margin-right: 10px;
}

.xpl-list__header-btn._high>div>span:nth-child(3) {
    bottom: unset;
    top: 4px;
}

.xpl-list__header-btn._high>div>span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%);
}

.xpl-list__header-btn._high>div>span:nth-child(2) {
    top: unset;
    bottom: 4px;
    transform: translateY(0);
}

.xpl-list__header-btn._low>div>span:nth-child(2) {
    top: 4px;
    transform: translateY(0);
}

.xpl-list__header-btn._low>div>span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%);
}

.xpl-list__header-btn>div {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    margin-left: 4px;
    position: relative;
}

.xpl-list__header-btn>div>span {
    height: 2px;
    left: 3px;
    border-radius: 2px;
    background-color: var(--text);
    transition: all .2s;
    display: block;
    position: absolute;
}

.xpl-list__header-btn>div>span:nth-child(1) {
    width: 11px;
    top: 4px;
}

.xpl-list__header-btn>div>span:nth-child(2) {
    width: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.xpl-list__header-btn>div>span:nth-child(3) {
    width: 15px;
    bottom: 4px;
}

.list-add {
    width: 100%;
    margin-top: 20px;
    padding: 0 20px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.list-add__lines {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.list-add__lines div {
    height: 16px;
    border-radius: 10px;
    background-color: var(--hover);
}

.list-add__lines div:nth-child(1) {
    width: 100%;
    margin-bottom: 7px;
}

.list-add__lines div:nth-child(2) {
    width: calc(136 / 180 * 100%);
}

.list-add__item {
    margin-top: 6px;
    align-self: flex-start;
}

.list-add__item-line {
    width: 100%;
    height: 16px;
    border-radius: 10px;
    background-color: var(--hover);
}

.list-add__prg,
.list-add__author {
    display: flex;
    align-items: center;
}

.list-add__prg-icon,
.list-add__author-icon {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-right: 20px;
    border-radius: 10px;
    background-color: var(--hover);
    flex-shrink: 0;
}

.list-add__prg-icon span {
    --s: 30px;
    width: var(--s);
    height: var(--s);
    background-color: #CCD8F2;
    -webkit-mask-image: url("/img/xpl/add-folder.svg");
    mask-image: url("/img/xpl/add-folder.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark .list-add__prg-icon span {
    background-color: rgba(255, 255, 255, .5);
}

.list-add__author-icon {
    border-radius: 50%;
}

.xpl-list__body {
    font-size: 16px;
    line-height: 1.15;
}

.list-item {
    padding: 8px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    position: relative;
}

.list-item[data-access="none"] .list-item__inner {
    opacity: .5;
    filter: grayscale(1);
}

.list-item[data-access="none"] .list-item__name-img::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(51, 51, 51, 0.56), transparent);
    transition: all .2s;
    position: absolute;
    z-index: 1;
    content: '';
}

.list-item[data-access="none"] .list-item__name-img::after {
    --s: 26px;
    width: var(--s);
    height: var(--s);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    -webkit-mask-image: url("/img/xpl/program-locked.svg");
    mask-image: url("/img/xpl/program-locked.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    z-index: 2;
    position: absolute;
    content: '';
}

.list-item .xpl-hint {
    bottom: calc(100% + 4px);
    left: 68px;
    right: auto;
}

.list-item .xpl-hint__inner::after,
.list-item .xpl-hint__shadow::after {
    right: auto;
    left: 20px;
}

.list-item:not(:last-child) {
    margin-bottom: 15px;
}

.list-item._selected,
.grid-item._selected,
.tree-item__inner._selected,
.tree-lesson__inner._selected {
    border-color: rgba(41, 105, 241, 0.5);
}

body._dark :is(
    .list-item._selected,
    .grid-item._selected,
    .tree-item__inner._selected,
    .tree-lesson__inner._selected
) {
    border-color: var(--textOpacity);
}

.list-item._hidden {
    display: none;
}

.list-item._shared .list-item__name-info::before {
    background-color: #54B268;
}

.list-item__name-text {
    outline: none;
    word-break: break-word;
}

.list-item__drag span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: #999;
    -webkit-mask-image: url("/img/xpl/grab.svg");
    mask-image: url("/img/xpl/grab.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    cursor: grab;
}

.list-item__drag span:active {
    cursor: grabbing;
}

.list-item__name,
.list-item__author {
    display: flex;
    align-items: center;
}

.list-item__name-img,
.list-item__author-img {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-right: 20px;
    border-radius: 10px;
    flex-shrink: 0;
    position: relative;
    text-transform: uppercase;
}

.list-item__name-img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.list-item__name-info {
    font-weight: 500;
}

.list-item__name-info._rename,
.grid-item__title._rename,
.tree-item__name-text._rename,
.tree-lesson__name._rename .item-name {
    -webkit-line-clamp: 50;
}

.list-item__name-info::before {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    margin-right: 4px;
    border-radius: 50%;
    background-color: var(--textOpacity);
    display: inline-block;
    content: '';
}

.list-item__author-img {
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    border-radius: 50%;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.list-item__author-name {
    font-weight: 500;
}

.list-item__author-date {
    color: var(--textOpacity);
}

.xpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-gap: 8px;
}

.grid-add {
    padding: 6px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    border: transparent;
    background-color: transparent;
    color: #CCD8F2;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

body._dark .grid-add {
    color: var(--textOpacity);
}

.grid-add__top {
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: calc(143 / 250 * 100%);
    border-radius: 10px;
    background-color: var(--hover);
    position: relative;
}

.grid-add__top-content {
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
}

.grid-add__top-icon {
    --s: 48px;
    width: var(--s);
    height: var(--s);
    background-color: #CCD8F2;
    -webkit-mask-image: url("/img/xpl/add-folder.svg");
    mask-image: url("/img/xpl/add-folder.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    margin-bottom: 6px;
}

body._dark .grid-add__top-icon {
    background-color: rgba(255, 255, 255, .5);
}

.grid-add__lines {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.grid-add__lines div {
    height: 16px;
    border-radius: 10px;
    background-color: var(--hover);
}

.grid-add__lines div:nth-child(1) {
    width: calc(196 / 250 * 100%);
    margin-bottom: 7px;
}

.grid-add__lines div:nth-child(2) {
    width: calc(148 / 250 * 100%);
}

.grid-item {
    padding: 6px;
    border-radius: 10px;
    border: 1px solid transparent;
    position: relative;
}

.grid-item .xpl-hint {
    bottom: calc(100% + 4px);
}

.grid-item .xpl-hint__inner {
    width: 100%;
}

.grid-item .xpl-hint__inner::after,
.grid-item .xpl-hint__shadow::after {
    right: auto;
    left: 32px;
}

.grid-item._hidden {
    display: none;
}

.grid-item[data-type="program"][data-access="none"] .grid-item__inner {
    opacity: .5;
    filter: grayscale(1);
}

.grid-item[data-type="program"][data-access="none"] .grid-item__img::after {
    --s: 32px;
    width: var(--s);
    height: var(--s);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    -webkit-mask-image: url("/img/xpl/program-locked.svg");
    mask-image: url("/img/xpl/program-locked.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    position: absolute;
    content: '';
    z-index: 2;
}

.grid-item[data-type="program"][data-access="none"] .grid-item__img::before {
    opacity: 1;
}

.grid-item._link::before,
.tree-item__inner._link::before {
    --s: 26px;
    width: var(--s);
    height: var(--s);
    top: -3px;
    left: -3px;
    border-radius: 50%;
    border: 3px solid var(--mainBg);
    background-color: #F9FAFD;
    background-image: url('/img/xpl/link.svg');
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
    position: absolute;
    content: '';
}

body._dark .grid-item._link::before,
body._dark .tree-item__inner._link::before {
    background-color: var(--accentGray);
    background-image: url('/img/xpl/link-dark.svg');
}

.grid-item__status {
    font-size: 16px;
    line-height: 1.15;
    top: 14px;
    right: 20px;
    color: var(--textOpacity);
    position: absolute;
    z-index: 5;
}

.grid-item__button {
    border: none;
    background-color: transparent;
    display: block;
    cursor: pointer;
}

.grid-item[data-type="course"] .grid-item__img {
    background-color: var(--accentGray);
}

.grid-item._shared .grid-item__title::before {
    background-color: #54B268;
}

.grid-item__title-text {
    outline: none;
    word-break: break-word;
}

.grid-item__img {
    margin-bottom: 10px;
    padding-bottom: calc(143 / 250 * 100%);
    border-radius: 10px;
    position: relative;
}

.grid-item__img::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(51, 51, 51, 0.56), transparent);
    opacity: 0;
    transition: all .2s;
    position: absolute;
    z-index: 1;
    content: '';
}

.grid-item__img img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
    object-fit: cover;
    position: absolute;
}

.grid-item__icon {
    --s: 48px;
    width: var(--s);
    height: var(--s);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #CCD8F2;
    -webkit-mask-image: url("/img/xpl/course.svg");
    mask-image: url("/img/xpl/course.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    position: absolute;
}

body._dark .grid-item__icon {
    background-color: rgba(255, 255, 255, .5);
}

.grid-item__img-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.15;
    left: 10%;
    bottom: 10%;
    color: #fff;
    opacity: 0;
    transition: all .2s;
    z-index: 2;
    position: absolute;
}

.grid-item__title {
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
}

.grid-item__title::before {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    margin-right: 4px;
    border-radius: 50%;
    background-color: var(--textOpacity);
    display: inline-block;
    content: '';
}

.grid-item__content {
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.xpl-tree__body + .tree-add::after {
    display: block;
}

.tree-item {
    --s: 50px;
    --px: 16px;
}

.tree-item + .tree-item:not(._hidden) {
    padding-top: 20px;
    position: relative;
}

.tree-item._hidden + .tree-item:not(._hidden) {
    padding-top: 0;
}

.tree-item + .tree-item:not(._hidden):not(.sortable-drag)::after {
    width: 2px;
    height: 20px;
    left: calc(44px + var(--px) + var(--s) / 2 - 1px);
    top: 0;
    background-color: rgba(41, 92, 201, 0.15);
    position: absolute;
    content: '';
}

body._dark .tree-item + .tree-item:not(._hidden)::after {
    background-color: rgba(255, 255, 255, .15);
}

.tree-item._hidden + .tree-item:not(._hidden)::after {
    display: none;
}

.tree-item._hidden,
.tree-lesson._hidden {
    display: none;
}

.tree-item__head {
    display: flex;
    align-items: center;
}

.tree-item__grab,
.tree-lesson__grab {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 20px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/grab.svg");
    mask-image: url("/img/xpl/grab.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
    cursor: grab;
}

.tree-item__grab:active {
    cursor: grabbing;
}

.tree-item__inner {
    padding: 22px 16px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    border: 1px solid transparent;
    background-color: var(--accentGray);
    color: var(--textOpacity);
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
}

.tree-item__inner._link::before {
    top: -7px;
    left: -7px;
}

.tree-item__main {
    margin-right: 24px;
    display: flex;
    align-items: center;
    flex: 1;
}

.tree-item__icon,
.tree-add__icon,
.tree-lesson__icon,
.tree-lesson__add-icon,
.xpl-user-item__icon {
    --s: 50px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    border-radius: 50%;
    background-color: var(--hover);
    flex-shrink: 0;
}

.tree-item__icon span,
.tree-add__icon span,
.tree-lesson__icon span,
.tree-lesson__add-icon span,
.xpl-user-item__icon span {
    --s: 32px;
    width: var(--s);
    height: var(--s);
    background-color: #95AEE2;
    -webkit-mask-image: url("/img/xpl/add-course.svg");
    mask-image: url("/img/xpl/add-course.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

body._dark :where(
    .tree-item__icon span,
    .tree-add__icon span,
    .tree-lesson__icon span,
    .tree-lesson__add-icon span,
    .xpl-user-item__icon span
) {
    background-color: rgba(255, 255, 255, .5);
}

.tree-item__icon,
.xpl-user-item__icon {
    background-color: var(--courseBg);
}

.tree-item__icon span,
.xpl-user-item[data-type="course"]>.xpl-user-item__inner>.xpl-user-item__main>.xpl-user-item__icon span {
    background-color: #fff;
    -webkit-mask-image: url("/img/xpl/course.svg");
    mask-image: url("/img/xpl/course.svg");
}

.tree-item__info {
    display: flex;
    flex-direction: column;
}

.tree-item__name {
    margin-bottom: 8px;
    display: flex;
}

.tree-item__name._rename .tree-item__name-edit {
    opacity: 0;
    visibility: hidden;
}

.tree-item__name-text {
    min-height: 22px;
    margin-right: 22px;
    font-size: 18px;
    line-height: 1.15;
    color: var(--text);
}

.tree-item__name-text._rename + .tree-item__name-edit,
.tree-lesson__name._rename>div {
    display: none;
}

.tree-item__name-edit,
.tree-lesson__name>div {
    --s: 22px;
    width: var(--s);
    height: var(--s);
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/pencil.svg");
    mask-image: url("/img/xpl/pencil.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    flex-shrink: 0;
    cursor: pointer;
}

.tree-item__lessons {
    align-self: flex-start;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.tree-item._opened .tree-item__lessons-angle,
.xpl-user-item._opened .xpl-user-item__lessons span,
.xpl-user-item[data-type="lesson"]._opened .xpl-user-item__show span {
    transform: rotateZ(180deg);
}

.tree-item__lessons-angle,
.xpl-user-item__lessons span,
.xpl-user-item__show span {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    margin-left: 4px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/angle.svg");
    mask-image: url("/img/xpl/angle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transition: all .2s;
    flex-shrink: 0;
}

.tree-item__status {
    min-width: 110px;
    display: flex;
    justify-content: flex-end;
}

.tree-item__btn {
    padding: 0 16px;
    border: none;
    background-color: transparent;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    text-align: left;
}

.grid-item__hint,
.tree-item__hint,
.program-hint {
    margin: 0 auto;
    right: 0;
    bottom: calc(100% + 18px);
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    text-align: left;
    pointer-events: none;
    position: absolute;
    z-index: 10;
}

.program-hint {
    right: auto;
    left: 0;
}

.program__nav-settings .program-hint,
.program__nav-share .program-hint {
    right: 0;
    left: auto;
}

.program__nav-settings .program-hint::after,
.program__nav-share .program-hint::after,
.program__nav-settings .program-hint__shadow::after,
.program__nav-share .program-hint__shadow::after {
    right: 32px;
    left: auto;
}

.grid-item__hint-inner,
.tree-item__hint-inner,
.program-hint__inner {
    width: 320px;
    padding: 12px 10px;
    border-radius: 5px;
    background-color: var(--hint);
    display: flex;
    z-index: 2;
}

.grid-item__hint-shadow,
.tree-item__hint-shadow,
.program-hint__shadow {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
    box-shadow: 0 4px 15px var(--hintShadow);
    position: absolute;
    z-index: -1;
}

.grid-item__hint::after,
.tree-item__hint::after,
.tree-item__hint-shadow::after,
.tree-item__hint-shadow::after,
.program-hint::after,
.program-hint__shadow::after {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    right: 32px;
    bottom: -5px;
    transform: rotateZ(45deg);
    border-radius: 0 0 2px 0;
    background-color: var(--hint);
    position: absolute;
    content: '';
    z-index: -1;
}

.grid-item__hint-shadow::after,
.tree-item__hint-shadow::after,
.program-hint__shadow::after {
    border-radius: 0 0 2px 0;
    box-shadow: 0 4px 15px var(--hintShadow);
}

.program-hint::after,
.program-hint__shadow::after {
    right: auto;
    left: 32px;
}

.grid-item__hint-icon,
.tree-item__hint-icon,
.program-hint__icon {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 16px;
    background-color: #999;
    -webkit-mask-image: url("/img/xpl/info.svg");
    mask-image: url("/img/xpl/info.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

body._dark :where(
    .grid-item__hint-icon,
    .tree-item__hint-icon,
    .program-hint__icon
) {
    background-color: var(--text);
}

.grid-item__hint-title,
.tree-item__hint-title,
.program-hint__title {
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--text);
}

.program-hint__text {
    color: #999999;
}

body._dark .grid-item__hint-text,
body._dark .tree-item__hint-text,
body._dark .program-hint__text {
    color: var(--text);
}

.grid-item__hint-text span,
.tree-item__hint-text span {
    font-weight: 700;
}

.grid-item[data-status="shown"] .grid-item__button span:nth-child(1),
.grid-item[data-status="shown"] .grid-item__hint-title p:nth-child(1),
.grid-item[data-status="shown"] .grid-item__hint-text p:nth-child(1),
.tree-item[data-status="shown"] .tree-item__btn-text p:nth-child(1),
.tree-item[data-status="shown"] .tree-item__hint-title p:nth-child(1),
.tree-item[data-status="shown"] .tree-item__hint-text p:nth-child(1),
.grid-item[data-status="hidden"] .grid-item__button span:nth-child(2),
.grid-item[data-status="hidden"] .grid-item__hint-title p:nth-child(2),
.grid-item[data-status="hidden"] .grid-item__hint-text p:nth-child(2),
.tree-item[data-status="hidden"] .tree-item__btn-text p:nth-child(2),
.tree-item[data-status="hidden"] .tree-item__hint-title p:nth-child(2),
.tree-item[data-status="hidden"] .tree-item__hint-text p:nth-child(2) {
    display: block;
}

.grid-item__button span,
.grid-item__hint-title p,
.grid-item__hint-text p,
.tree-item__btn-text p,
.tree-item__hint-title p,
.tree-item__hint-text p {
    display: none;
}

.tree-add {
    --s: 50px;
    --px: 16px;
    width: 100%;
    padding: 20px 0 0 44px;
    border: none;
    background-color: transparent;
    position: relative;
}

.tree-add._one {
    padding-top: 0;
}

.tree-add::after {
    width: 2px;
    height: 20px;
    left: calc(44px + var(--px) + var(--s) / 2 - 1px);
    top: 0;
    background-color: rgba(41, 92, 201, 0.15);
    display: none;
    position: absolute;
    content: '';
}

.tree-add._one::after {
    display: none;
}

.tree-add__inner {
    padding: 22px var(--px);
    border-radius: 10px;
    background-color: var(--accentGray);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.tree-add__lines,
.tree-lesson__add-lines {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tree-add__lines>div,
.tree-lesson__add-lines>div {
    height: 16px;
    border-radius: 10px;
    background-color: var(--hover);
}

.tree-add__lines>div:nth-child(1),
.tree-lesson__add-lines>div:nth-child(1) {
    width: calc(460 / 1030 * 100%);
    margin-bottom: 7px;
}

.tree-add__lines>div:nth-child(2),
.tree-lesson__add-lines>div:nth-child(2) {
    width: calc(350 / 1030 * 100%);
}

.tree-lessons {
    margin-left: calc(44px + var(--px) + var(--s) / 2 - 1px);
    padding-top: 20px;
    border-left: 2px solid rgba(41, 92, 201, 0.15);
    display: none;
}

.tree-lessons__body:empty + .tree-lesson__add {
    margin-top: 0;
}

.tree-lesson {
    margin-left: -46px;
    padding-left: 66px;
    position: relative;
}

.tree-lesson:not(:last-child) {
    margin-bottom: 20px;
}

.tree-lesson[lesson-type="test"] .tree-lesson__icon span,
.xpl-user-item[lesson-type="test"] .xpl-user-item__icon span {
    -webkit-mask-image: url("/img/xpl/lesson-test.svg");
    mask-image: url("/img/xpl/lesson-test.svg");
}

.tree-lesson[lesson-type="task"] .tree-lesson__icon span,
.xpl-user-item[lesson-type="task"] .xpl-user-item__icon span {
    -webkit-mask-image: url("/img/xpl/lesson-task.svg");
    mask-image: url("/img/xpl/lesson-task.svg");
}

.tree-lesson[lesson-type="theory"] .tree-lesson__icon span,
.xpl-user-item[lesson-type="theory"] .xpl-user-item__icon span {
    -webkit-mask-image: url("/img/xpl/lesson-theory.svg");
    mask-image: url("/img/xpl/lesson-theory.svg");
}

.tree-lesson[lesson-type="unknown"] .tree-lesson__icon span,
.xpl-user-item[lesson-type="unknown"] .xpl-user-item__icon span {
    -webkit-mask-image: url("/img/xpl/lesson-unknown.svg");
    mask-image: url("/img/xpl/lesson-unknown.svg");
}

.tree-lesson__grab {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.tree-lesson__inner,
.tree-lesson__add-inner {
    padding: 14px 16px;
    border-radius: 10px;
    background-color: var(--accentGray);
    display: flex;
    align-items: center;
    position: relative;
}

.tree-lesson__inner {
    border: 1px solid transparent;
}

.tree-lesson:not(.sortable-drag) .tree-lesson__inner::before {
    width: 20px;
    height: 2px;
    left: -21px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(41, 92, 201, 0.15);
    position: absolute;
    content: '';
}

.tree-lesson__icon {
    background-color: var(--accent);
}

.tree-lesson__icon span {
    --s: 28px;
    background-color: #fff;
}

.tree-lesson__name {
    margin-right: 24px;
    padding-right: 44px;
    font-size: 18px;
    line-height: 1.15;
    position: relative;
}

.tree-lesson__name>div {
    right: 0;
    top: 0;
    position: absolute;
}

.tree-lesson__add {
    width: 100%;
    margin-top: 20px;
    padding-left: 20px;
    border: none;
    background-color: transparent;
    position: relative;
    cursor: pointer;
}

.tree-lesson__add::before {
    height: 2px;
    width: 20px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(41, 92, 201, 0.15);
    position: absolute;
    content: '';
}

.tree-lesson__add-icon span {
    --s: 28px;
    -webkit-mask-image: url("/img/xpl/add-section.svg");
    mask-image: url("/img/xpl/add-section.svg");
}

.xpl-body__context {
    min-height: 20px;
    margin: 0 -24px;
    flex: 1;
}

.xpl-users._empty .xpl-users__plug {
    opacity: 1;
    visibility: visible;
}

.xpl-users,
.xpl-table {
    height: 100%;
}

.xpl-users._searching .xpl-search__list,
.xpl-users._searching .xpl-search__action {
    display: block;
}

.xpl-users .xpl-search {
    margin: 0 0 36px;
}

.xpl-users__grid {
    height: 100%;
    display: grid;
    grid-template-columns: 325px auto;
}

.xpl-users-aside {
    padding: 0 24px 24px 0;
    border-right: 1px solid #EEEFF1;
}

.xpl-users__title {
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.15;
}

.xpl-sharing {
    display: flex;
    margin-bottom: 15px;
}

.xpl-gen {
    position: relative;
    flex: 1;
    min-height: 42px;
}

.xpl-gen._active::after {
    --s: 16px;

    box-sizing: border-box;
    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    right: -6px;
    top: -5px;
    background-color: #54B268;
    border-radius: 50%;
    border: 3px solid var(--mainBg);
}

.xpl-gen._locked .xpl-gen__inner[data-step="1"]::before {
    width: 18px;
    height: 21px;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/lock.svg");
    mask-image: url("/img/xpl/lock.svg");
    -webkit-mask-size: 18px 21px;
    mask-size: 18px 21px;
    position: absolute;
    content: '';
}

.xpl-gen__inner {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    position: absolute;
}

.xpl-gen__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    line-height: 1;
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

body._dark .xpl-gen__button {
    background-color: var(--svg);
    color: var(--text);
}

.xpl-gen._locked .xpl-gen__button {
    color: rgba(51, 51, 51, .25);
    cursor: auto;
}

body._dark .xpl-gen._locked .xpl-gen__button {
    color: var(--textOpacity);
}

.xpl-gen__inner._active {
    opacity: 1;
    visibility: visible;
}

.xpl-gen__copy {
    --s: 24px;

    width: var(--s);
    height: var(--s);
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    background-color: rgba(51, 51, 51, .5);
    -webkit-mask-image: url("/img/xpl/copy.svg");
    mask-image: url("/img/xpl/copy.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    position: absolute;
    cursor: pointer;
}

body._dark .xpl-gen__copy {
    background-color: var(--text);
}

.xpl-gen__success {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #54B268;
}

.xpl-gen__success span {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    background-color: #54B268;
    -webkit-mask-image: url("/img/xpl/check-circle.svg");
    mask-image: url("/img/xpl/check-circle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xpl-gen .xpl-hint {
    left: 0;
    right: auto;
}

.xpl-gen .xpl-hint__inner::after,
.xpl-gen .xpl-hint__shadow::after {
    left: 32px;
    right: auto;
}

.xpl-bitrix {
    --s: 42px;

    position: relative;
    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-left: 20px;
}

.xpl-bitrix._active::before {
    --s: 16px;

    box-sizing: border-box;
    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    right: -4px;
    top: -5px;
    background-color: #54B268;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
}

.xpl-bitrix._disabled {
    cursor: auto;
}

.xpl-bitrix._disabled::after {
    position: absolute;
    content: '';
    width: 18px;
    height: 21px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #959697;
    -webkit-mask-image: url("/img/xpl/lock.svg");
    mask-image: url("/img/xpl/lock.svg");
    -webkit-mask-size: 18px 21px;
    mask-size: 18px 21px;
}

body._dark .xpl-bitrix._disabled::after {
    background-color: rgba(51, 51, 51, .75);
}

.xpl-bitrix__btn {
    width: var(--s);
    height: var(--s);
    border-radius: 10px;
    background-image: url('/img/xpl/bitrix.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
}

.xpl-bitrix._disabled .xpl-bitrix__btn {
    opacity: .5;
}

.xpl-bitrix .xpl-hint__inner::after,
.xpl-bitrix .xpl-hint__shadow::after {
    right: 15px;
}

.m-xpl__bitrix {
    display: flex;
    flex-direction: column;
    min-height: 685px;
    width: 100%;
}

.xpl-bitrix__inner {
    position: relative;
}

.xpl-bitrix__inner._remove {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.xpl-bitrix__inner._loading::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    background-color: var(--mainBg);
    opacity: .8;
    z-index: 7;
}

.xpl-bitrix__inner._loading::after {
    --s: 150px;

    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/chk/loader.svg");
    mask-image: url("/img/chk/loader.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    z-index: 8;
}

.xpl-bitrix__header {
    margin-bottom: 32px;
}

.xpl-bitrix__inner._remove .xpl-bitrix__header {
    margin-bottom: 90px;
}

.xpl-bitrix__inner._error .m-xpl__img {
    --accent: #E54047;
}

.xpl-bitrix__inner._remove .m-xpl__img-hidden {
    opacity: 1;
    visibility: visible;
}

.xpl-bitrix__step {
    display: none;
}

.xpl-bitrix__step._active {
    display: block;
}

.xpl-bitrix__inner._remove .xpl-bitrix__step {
    display: none;
}

.xpl-bitrix__title {
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    text-align: center;
}

.xpl-bitrix__description {
    min-height: 65px;
    margin-bottom: 32px;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
}

.xpl-bitrix__description a {
    color: var(--accent);
}

.xpl-bitrix__form {
    margin-bottom: 24px;
}

.xpl-bitrix__form-label {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.xpl-bitrix__step[data-tab="3"] .xpl-bitrix__form-label {
    visibility: hidden;
}

.xpl-bitrix__form-label a {
    color: inherit;
}

.xpl-bitrix__row {
    display: flex;
    margin-bottom: 12px;
}

.xpl-bitrix__row .xgl-select {
    flex: 1;
    font-size: 16px;
    line-height: 1;
}

.xpl-bitrix__row .xgl-select + .xgl-select {
    margin-left: 10px;
}

.xpl-bitrix__step[data-tab="3"] .xgl-select__header {
    cursor: auto;
}

.xpl-bitrix__input {
    flex: 1;
    height: 50px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 1;
    background-color: var(--mainBg);
    border-radius: 10px;
    border: 1px solid #EEEFF1;
}

body._dark .xpl-bitrix__input {
    border-color: rgba(255, 255, 255, 0.50);
}

.xpl-bitrix__inner._error .xpl-bitrix__input {
    color: #E54047;
    border-color: rgba(229, 64, 71, 0.5);
}

.xpl-bitrix__continue {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 50px;
    min-width: 186px;
    margin-left: 10px;
    font-size: 18px;
    line-height: 1;
    background-color: var(--accent);
    color: #FFFFFF;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.xpl-bitrix__continue:disabled {
    opacity: .5;
    cursor: auto;
}

.xpl-bitrix__continue._back {
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
}

.xpl-bitrix__inner._error .xpl-bitrix__continue {
    opacity: .5;
    cursor: auto;
}

.xpl-bitrix__error {
    font-size: 16px;
    line-height: 1.15;
    color: #E54047;
    visibility: hidden;
}

.xpl-bitrix__inner._error .xpl-bitrix__error {
    visibility: visible;
}

.xpl-bitrix__hint {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    font-size: 16px;
    line-height: 1.15;
    background-color: #f9fafd;
    border-radius: 10px;
}

body._dark .xpl-bitrix__hint {
    background-color: var(--hint);
}

.xpl-bitrix__hint span {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 22px;
    background-color: var(--text);
    -webkit-mask-image: url("/img/xpl/warning.svg");
    mask-image: url("/img/xpl/warning.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xpl-bitrix__hint a {
    color: var(--accent);
}

.xpl-bitrix__hint button {
    background-color: transparent;
    color: #E54047;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

.xpl-bitrix__remove {
    display: none;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--mainBg);
    border-radius: 10px;
    z-index: 5;
}

.xpl-bitrix__inner._remove .xpl-bitrix__remove {
    display: flex;
}

.xpl-bitrix__remove-title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    text-align: center;
}

.xpl-bitrix__remove__description {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
}

.xpl-bitrix__remove-buttons {
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.xpl-bitrix__remove-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 176px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.xpl-bitrix__remove-button:not(:last-child) {
    margin-right: 20px;
}

.xpl-bitrix__remove-cancel {
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
}

body._dark .xpl-bitrix__remove-cancel {
    background-color: rgba(255, 255, 255, .15);
    color: #FFFFFF;
}

.xpl-bitrix__remove-confirm {
    background-color: var(--accent);
    color: #FFFFFF;
}

.m-xpl__tpl {
    display: flex;
    flex-direction: column;
    min-height: 673px;
}

.xtpl__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.xtpl__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 32px 0;
    text-align: center;
}

.xtpl__main-icon {
    --s: 43px;

    width: var(--s);
    height: var(--s);
    margin-bottom: 6px;
    background-color: #54B268;
    -webkit-mask-image: url("/img/xpl/check-circle.svg");
    mask-image: url("/img/xpl/check-circle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xtpl__main-title {
    margin-bottom: 18px;
}

.xtpl__select {
    max-width: 374px;
    width: 100%;
    margin-top: 44px;
}

.xpl-users-aside__all {
    margin-bottom: 30px;
}

.xpl-users-aside__body {
    position: relative;
}

.xpl-search__list {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--mainBg);
    position: absolute;
    z-index: 2;
    display: none;
}

.xpl-users-aside__label {
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-users-aside__label input {
    margin-right: 24px;
    cursor: pointer;
}

.xpl-users-aside__dep:not(:last-child) {
    margin-bottom: 32px;
}

.xpl-users-aside__dep-all {
    margin-bottom: 24px;
}

.xpl-users-aside__user._hidden {
    display: none;
}

.xpl-users-aside__user:not(:last-child) {
    margin-bottom: 20px;
}

.xpl-users-aside__user-inner {
    display: flex;
    align-items: center;
}

.xpl-users-aside__user-img {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    border-radius: 50%;
    color: #fff;
    text-transform: uppercase;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    flex-shrink: 0;
}

.xpl-users-aside__user-info {
    display: flex;
    flex-direction: column;
}

.xpl-users-aside__user-name {
    color: var(--text);
    word-break: break-word;
}

.xpl-users-aside__user-pos {
    margin-top: 5px;
}

.xpl-users-main {
    padding: 0 0 24px 24px;
    position: relative;
}

.xpl-users__plug {
    width: 100%;
    height: 100%;
    padding: 64px 0 20px;
    top: 0;
    left: 0;
    background-color: var(--mainBg);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 10;
    overflow: auto;
    scrollbar-width: none;
}

.xpl-users__plug::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.xpl-users__plug-img {
    --s: 300px;
    width: var(--s);
    height: calc(var(--s) / 300 * 250);
    margin-bottom: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.xpl-users__plug-title {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.15;
}

.xpl-users__plug-text {
    font-size: 18px;
    line-height: 1.15;
}

.xpl-users-main__subtitle {
    margin-bottom: 36px;
    font-size: 18px;
    line-height: 1.15;
    color: #999999;
}

.xpl-users-main__table-header {
    margin-bottom: 18px;
    font-weight: 600;
}

.xpl-users-main__table-header,
.xpl-users-main__row {
    font-size: 16px;
    line-height: 1.15;
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr;
    align-items: center;
    grid-gap: 20px;
}


.xpl-users-main__table-header>p:not(:first-child),
.xpl-users-main__row>div:not(:first-child) {
    text-align: center;
}

.xpl-users[data-type="editors"] .xpl-users-main__header {
    position: relative;
    z-index: 11;
}

.xpl-users[data-type="editors"] .xpl-users-main__table-header>p:nth-child(2) {
    text-align: left;
}

.xpl-users-main__row {
    color: var(--textOpacity);
}

.xpl-users-main__row:not(:last-child) {
    margin-bottom: 20px;
}

.xpl-users-main__user {
    cursor: pointer;
}

.xpl-users-main__btn {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    border: none;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/close-circle.svg");
    mask-image: url("/img/xpl/close-circle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    cursor: pointer;
}

.xpl-users-main__header {
    margin-bottom: 24px;
}

.xpl-users-main__header-inner {
    display: flex;
    align-items: center;
}

.xpl-users-main__header-title {
    margin-right: 24px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.xpl-table {
    font-size: 18px;
    line-height: 1.15;
}

.xpl-table__header,
.xpl-table__row {
    display: grid;
    grid-template-columns: auto 200px 80px;
    align-items: center;
    grid-gap: 20px;
}

.xpl-table__header>div:not(:first-child),
.xpl-table__row>div:not(:first-child) {
    text-align: center;
}

.xpl-table__header {
    margin-bottom: 18px;
    font-weight: 600;
}

.xpl-table__row:not(:last-child) {
    margin-bottom: 20px;
}

.xpl-table__row>div:not(:first-child) {
    color: #999999;
}

.xpl-table__user .xpl-users-aside__user-pos {
    font-size: 16px;
    line-height: 1.15;
    color: #999999;
}

.access-select {
    font-size: 16px;
    line-height: 1;
    position: relative;
}

.access-select._active .access-select__body {
    display: block;
}

.access-select._top .access-select__body {
    bottom: calc(100% + 12px);
    top: unset;
}

.access-select__header {
    padding: 0 10px;
}

.xpl-users-main__table-wrapper {
    display: none;
}

.xpl-users-main__table-wrapper._active {
    display: block;
}

.xpl-users-main__table .access-select__header {
    padding: 0;
}

.access-select__header .access-select__item {
    padding: 0;
    color: var(--textOpacity);
}

.xpl-users-main__table .access-select__header .access-select__item {
    min-width: auto;
}

.access-select__header .access-select__item>span {
    background-color: var(--textOpacity);
}

.access-select__item {
    min-width: 220px;
    padding: 12px;
    border-radius: 10px;
    transition: all .2s;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-users-main__table .access-select__item {
    min-width: 190px;
}

.access-select__item:not(:last-child) {
    margin-bottom: 8px;
}

.access-select__item._active {
    background: var(--hover);
}

.access-select__item>span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-color: var(--text);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.access-select__item[data-access="write"]>span {
    -webkit-mask-image: url("/img/xpl/access-write.svg");
    mask-image: url("/img/xpl/access-write.svg");
}

.access-select__item[data-access="read"]>span {
    -webkit-mask-image: url("/img/xpl/access-read.svg");
    mask-image: url("/img/xpl/access-read.svg");
}

.access-select__item[data-access="lock"]>span {
    -webkit-mask-image: url("/img/xpl/access-lock.svg");
    mask-image: url("/img/xpl/access-lock.svg");
}

.access-select__body {
    padding: 16px 12px;
    left: -12px;
    top: calc(100% + 12px);
    bottom: unset;
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--hintShadow);
    background-color: #FFFFFF;
    display: none;
    position: absolute;
    z-index: 15;
}

body._dark .access-select__body {
    background-color: var(--hint);
}

.xpl-users-main__table .access-select__body {
    left: -22px;
}

.access-select__body-title {
    margin-bottom: 24px;
    color: var(--textOpacity);
}

.xpl-settings__header {
    margin-bottom: 18px;
}

.xpl-settings__title {
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.xpl-settings__subtitle {
    font-size: 17px;
    line-height: 1;
    color: #999999;
}

.xpl-settings__form {
    padding-bottom: 24px;
}

.xpl-settings__form-header {
    margin-bottom: 24px;
}

.xpl-settings__label {
    font-size: 16px;
    line-height: 1.15;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-settings__label:not(:last-child) {
    margin-bottom: 12px;
}

.xpl-settings__label input:checked + .xpl-settings__label-checkbox {
    border-color: rgba(41, 105, 241, 0.5);
}

body._dark .xpl-settings__label input:checked + .xpl-settings__label-checkbox {
    border-color: var(--textOpacity);
}

.xpl-settings__label-checkbox {
    --settings-color: #CCD8F2;

    margin-right: 18px;
    padding: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: all .2s;
    flex-shrink: 0;
}

body._dark .xpl-settings__label-checkbox {
    --settings-color: #8D8E8E;
}

.xpl-settings__label-img {
    --s: 130px;
    width: var(--s);
    height: var(--s);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.xpl-settings__label-info,
.xpl-settings__label-text {
    display: flex;
    flex-direction: column;
}

.xpl-settings__label-title {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
}

.xpl-settings__label-text {
    color: rgba(51, 51, 51, .75);
}

body._dark .xpl-settings__label-text {
    color: var(--textOpacity);
}

.xpl-settings__label-text>span:not(:last-child) {
    margin-bottom: 18px;
}

.xpl-settings__form-box {
    margin-bottom: 24px;
}

.xpl-settings__form-title {
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.xpl-settings__form-subtitle {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1;
    color: #999999;
}

.xpl-settings__input {
    display: flex;
    align-items: center;
}

.xpl-settings__input input {
    height: 50px;
    padding-left: 20px;
    font-size: 18px;
    line-height: 1;
    background-color: var(--mainBg);
    border-radius: 10px 0 0 10px;
    border: 1px solid #EEEFF1;
    border-right: none;
    flex: 1;
}

.xpl-settings__input-end {
    height: 50px;
    padding: 0 15px;
    color: rgba(51, 51, 51, .75);
    border-radius: 0 10px 10px 0;
    border: 1px solid #EEEFF1;
    border-left: none;
}

body._dark .xpl-settings__input input,
body._dark .xpl-settings__input-end {
    border-color: var(--textOpacity);
}

body._dark .xpl-settings__input-end {
    color: var(--textOpacity);
}

.xpl-settings__check {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-settings__check-input {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid rgba(51, 51, 51, 0.5);
    background-image: url('/img/xpl/checkmark.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

body._dark .xpl-settings__check-input {
    border-color: var(--textOpacity);
    background-image: url('/img/common/checkmark-dark.svg');
}

.xpl-settings__check-input:checked {
    border-color: #54B268;
    background-color: #54B268;
}

body._dark .xpl-settings__check-input:checked {
    border-color: var(--text);
    background-color: var(--text);
}

.xpl-settings__check-text {
    font-size: 18px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.xpl-settings__check-input:checked+.xpl-settings__check-text {
    color: var(--text);
}

.xpl-settings__form-buttons {
    display: flex;
}

.xpl-settings__form-btn:not(:last-child) {
    margin-right: 15px;
}

.xpl-settings__form-cancel {
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
}

body._dark .xpl-settings__form-cancel {
    background-color: var(--svg);
    color: var(--text);
}

.xpl-share {
    height: 100%;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    scrollbar-width: none;
}

.xpl-share::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.xpl-share._info .xpl-share-info {
    display: block;
}

.xpl-share__header {
    margin-bottom: 44px;
}

.xpl-share__title {
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.xpl-share__subtitle {
    font-size: 17px;
    line-height: 1;
    color: var(--textOpacity);
}

.xpl-share__body {
    margin-bottom: 44px;
}

.xpl-share__box {
    padding: 18px 32px;
    background-color: #F0F2F9;
    border-radius: 10px;
}

body._dark .xpl-share__box {
    background-color: var(--hint);
}

.xpl-share__box-title {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.xpl-share__box-text {
    font-size: 16px;
    line-height: 1.25;
}

.xpl-share__box-text span {
    font-weight: 500;
}

.xpl-share__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
}

.xpl-share__button {
    min-width: 250px;
    margin: auto 0 8px;
    background-color: #54B268;
}

body._dark .xpl-share__button {
    background-color: var(--accent);
}

.xpl-share__button:disabled {
    opacity: .5;
    cursor: auto;
}

.xpl-share__button:disabled:active {
    background-color: #54B268;
}

.xpl-share__button:active {
    background-color: #347943;
}

.xpl-share__button._unshare {
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
}

body._dark .xpl-share__button._unshare {
    background-color: var(--svg);
    color: var(--text);
}

.xpl-share__link {
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
    cursor: pointer;
}

.xpl-share-info {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--mainBg);
    z-index: 2;
    display: none;
}

.xpl-share-info__back {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.15;
    opacity: .5;
    transition: all .2s;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-share-info__back span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    transform: rotate(90deg);
    background-color: var(--text);
    -webkit-mask-image: url("/img/xpl/angle.svg");
    mask-image: url("/img/xpl/angle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.xpl-share-info__header {
    margin-bottom: 24px;
}

.xpl-share-info__title {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.xpl-share-info__text,
.xpl-share__box,
.xpl-share-info__list {
    font-size: 16px;
    line-height: 1.25;
}

.xpl-share__box:not(:last-child),
.xpl-share-info__list:not(:last-child) {
    margin-bottom: 24px;
}

.xpl-share-info__list ul {
    list-style: none;
}

.xpl-study-plug {
    height: 100%;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--mainBg);
    text-align: center;
}

.xpl-study-plug__inner {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xpl-study-plug__img {
    max-width: 600px;
    width: 100%;
    margin-bottom: 60px;
    object-fit: cover;
}

.xpl-study-plug__img svg {
    width: 100%;
    height: calc(359 / 396 * 100%);
}

.xpl-study-plug__title {
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
}

.xpl-study-plug__text {
    font-size: 20px;
    line-height: 1.15;
}

.lib .xpl-loader__wrapper {
    align-items: center;
}

.lib._loading .xpl-loader__wrapper {
    opacity: 1;
    visibility: visible;
}

.lib._light-loading .xpl-loader__wrapper {
    background-color: rgba(255, 255, 255, .8);
    opacity: 1;
    visibility: visible;
}

.lib__inner {
    height: 100%;
    display: grid;
    grid-template-columns: 350px auto;
}

.lib__aside {
    height: calc(100vh - 40px);
    margin: -32px 0 -32px -12px;
    padding: 0 20px 0 12px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    scrollbar-width: none;
}

.lib__aside::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.lib__aside .xpl-side__item-content {
    padding-top: 6px;
    padding-bottom: 6px;
}

.lib__aside-header {
    padding: 32px 12px 24px;
    margin: 0 -12px;
    /*margin-bottom: 24px;*/
    top: 0;
    background: linear-gradient(180deg, var(--mainBg) 0%, var(--mainBg) 85%, transparent 100%);
    -webkit-position: sticky;
    position: sticky;
    z-index: 2;
}

.lib__aside-title {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
}

.lib__aside-text {
    font-size: 16px;
    line-height: 1.15;
    color: #999999;
}

.lib-switcher {
    position: relative;
    display: flex;
    padding: 4px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1;
    background-color: var(--bodyBg);
    color: var(--textOpacity);
    border-radius: 10px;
}

.lib-switcher__button {
    position: relative;
    flex: 1;
    height: 30px;
    background-color: transparent;
    border: 0;
    z-index: 2;
}

.lib-switcher__glider {
    position: absolute;
    height: 30px;
    width: calc(50% - 4px);
    left: 4px;
    top: 4px;
    background-color: var(--mainBg);
    border-radius: 5px;
    transition: all .2s;
}

.lib-switcher[data-type="1"] .lib-switcher__glider {
    transform: translateX(100%);
}

.lib__aside .xpl-side__list {
    /*margin: 0 0 32px -12px;*/
    margin-left: -12px;
    flex: 1;
}

.lib__aside-footer {
    margin: auto 0 0 -12px;
    padding: 42px 0 32px 12px;
    font-size: 18px;
    line-height: 21px;
    bottom: 0;
    background: linear-gradient(0deg, var(--mainBg) 0%, var(--mainBg) 85%, transparent 100%);
    -webkit-position: sticky;
    position: sticky;
}

.lib__aside-selected {
    margin-bottom: 15px;
}

.lib__aside-btn {
    width: 100%;
}

.lib__main {
    margin: -32px -32px -32px 0;
    padding: 20px;
    border-radius: 0 10px 10px 0;
    background-color: var(--accentGray);
}

.lib__main-inner {
    height: calc(100vh - 80px);
    padding: 0 12px 24px;
    border-radius: 10px;
    background-color: var(--mainBg);
    overflow: auto;
    scrollbar-width: none;
}

.lib__main-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.lib .xpl-search {
    margin: 0 -12px;
    padding: 24px;
    top: 0;
    background: linear-gradient(180deg, var(--mainBg) 0%, var(--mainBg) 80%, transparent 100%);
    -webkit-position: sticky;
    position: sticky;
    z-index: 2;
}

.lib__body {
    position: relative;
}

.lib__list-box:not(:last-child) {
    margin-bottom: 64px;
}

.lib__list-header {
    margin-bottom: 30px;
    padding-left: 12px;
    font-size: 18px;
    line-height: 1.15;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.lib__list-header span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-color: #333;
    -webkit-mask-image: url("/img/xpl/folder.svg");
    mask-image: url("/img/xpl/folder.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.lib-item {
    font-size: 16px;
    line-height: 1.15;
}

.lib-item:not(:last-child) {
    margin-bottom: 20px;
}

.lib-item._active .lib-item__main,
.lib-item._active .lib-item__content {
    border-color: rgba(41, 105, 241, 0.5);
}

.lib-item._active .lib-item__lessons {
    color: #333333;
}

.lib-item._active .lib-item__content {
    display: block;
}

.lib-item__main {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.lib-item__header {
    margin-bottom: 10px;
    display: flex;
}

.lib-item__icon {
    --s: 70px;
    width: var(--s);
    height: var(--s);
    border-radius: 10px;
    background-color: var(--courseBg);
    flex-shrink: 0;
}

.lib-item__icon span {
    --s: 32px;
    width: var(--s);
    height: var(--s);
    background-color: #fff;
    -webkit-mask-image: url("/img/xpl/course.svg");
    mask-image: url("/img/xpl/course.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.lib-item__info {
    margin: 0 18px;
    flex: 1;
}

.lib-item__title {
    margin-bottom: 6px;
    font-weight: 500;
}

.lib-item__author {
    margin-bottom: 3px;
    color: var(--textOpacity);
}

.lib-item__lessons {
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--textOpacity);
    text-decoration: underline;
    cursor: pointer;
}

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

.lib-item__label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.lib-item__label:not(:last-child) {
    margin-bottom: 12px;
}

.lib-item__footer-title {
    margin-bottom: 2px;
}

.lib-item__footer-list {
    color: var(--textOpacity);
}

.lib-item__content {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    display: none;
}

.lib-item__content-title {
    margin-bottom: 18px;
}

.lib-item__content-item {
    color: var(--textOpacity);
}

.lib-item__content-item:not(:last-child) {
    margin-bottom: 12px;
}

.xpl-user {
    padding: 0;
}

.xpl-user .xpl-loader {
    top: 50%;
}

.xpl-user__inner {
    height: 100%;
    display: grid;
    grid-template-columns: 350px auto;
}

.xpl-user__aside {
    height: calc(100vh - 40px);
    padding: 0 30px 20px;
    overflow: auto;
    scrollbar-width: none;
}

.xpl-user__aside::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.xpl-user__aside-top {
    padding: 44px 0;
    top: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 93%, transparent 100%);
    -webkit-position: sticky;
    position: sticky;
    z-index: 3;
}

.xpl-user__burger {
    left: 0;
    top: 30px;
    position: absolute;
}

.xpl-user__burger._active .xpl-user__burger-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.xpl-user__burger-icon {
    width: 25px;
    top: 0;
    left: -9px;
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: absolute;
}

.xpl-user__burger-icon span {
    --s: 7px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background-color: #999999;
}

.xpl-user__burger-icon span:not(:last-child) {
    margin-bottom: 2px;
}

.xpl-user__burger-menu {
    padding: 7px;
    left: -1px;
    top: -1px;
    transform: translateY(30%);
    transition: all .2s;
    border-radius: 5px;
    box-shadow: 0 4px 9px rgba(224, 224, 224, 0.66);
    background-color: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.xpl-user__burger-item {
    min-width: 216px;
    padding: 6px 7px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-user__burger-item:not(:last-child) {
    margin-bottom: 4px;
}

.xpl-user__burger-remove {
    color: #E54047;
}

.xpl-user__burger-item span {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    margin-right: 8px;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
    
}

.xpl-user__burger-block span {
    background-color: #333333;
    -webkit-mask-image: url("/img/xpl/user-lock.svg");
    mask-image: url("/img/xpl/user-lock.svg");
}

.xpl-user__burger-remove span {
    background-color: #E54047;
    -webkit-mask-image: url("/img/xpl/remove.svg");
    mask-image: url("/img/xpl/remove.svg");
}

.xpl-user__list .xpl-side__item-link {
    cursor: pointer!important;
}

.xpl-user__info {
    margin-bottom: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.xpl-user__img {
    --s: 120px;
    width: var(--s);
    height: var(--s);
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
    border-radius: 50%;
    color: #FFFFFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    text-transform: uppercase;
}

.xpl-user__name {
    margin-bottom: 3px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
}

.xpl-user__pos {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.xpl-user__progress {
    width: 100%;
    display: flex;
    align-items: center;
}

.xpl-user__progress-line {
    height: 10px;
    margin-right: 10px;
    border-radius: 20px;
    background-color: #DFE7F7;
    flex: 1;
    position: relative;
}

.xpl-user__progress-line>div,
.xpl-side__item-progress>div {
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 20px;
    background-color: #97B8FF;
    position: absolute;
}

body._dark .xpl-side__item-progress>div {
    background-color: var(--accent);
}

.xpl-user__progress-percent {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.xpl-user__menu-item {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-user__menu-item:not(:last-child) {
    margin-bottom: 24px;
}

.xpl-user__menu-item._active {
    position: relative;
}

.xpl-user__menu-item._active::after {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotateZ(-90deg);
    background-color: #333;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/xpl/angle.svg");
    mask-image: url("/img/xpl/angle.svg");
    position: absolute;
    content: '';
}

.xpl-user__menu-item>span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    margin-right: 15px;
    background-color: #333;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    flex-shrink: 0;
}

.xpl-user__menu-history>span {
    -webkit-mask-image: url("/img/xpl/user-history.svg");
    mask-image: url("/img/xpl/user-history.svg");
}

.xpl-user__menu-profile>span {
    -webkit-mask-image: url("/img/xpl/user-settings.svg");
    mask-image: url("/img/xpl/user-settings.svg");
}

.xpl-user__list .xpl-side__item-content {
    padding-top: 6px;
    padding-bottom: 6px;
}

.xpl-user__list + .xpl-user__list {
    margin-top: 44px;
}

.xpl-user__list._hidden {
    display: none;
}

.xpl-user__list-title {
    margin-bottom: 12px;
    padding: 12px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
    text-transform: uppercase;
}

.xpl-user__main {
    padding: 20px;
    border-radius: 0 10px 10px 0;
    background-color: #F9FAFD;
}

.xpl-user__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.xpl-user__main-inner {
    height: calc(100vh - 80px);
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    scrollbar-width: none;
}

.xpl-user__main-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.xpl-user__plug {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--mainBg);
    position: absolute;
    z-index: 2;
    overflow: auto;
    scrollbar-width: none;
}

.xpl-user__plug::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.xpl-user__plug-inner {
    height: 100%;
    max-width: 600px;
    text-align: center;
}

.user-profile .xpl-user__plug-inner {
    height: auto;
}

.xpl-user__plug-img {
    max-width: 400px;
    width: 100%;
    margin: 0 auto 12px;
}

.xpl-user__plug-img > svg {
    width: 100%;
    height: calc(3 / 4 * 100%);
}

.xpl-user__body[data-type="activity"] .xpl-user__plug-img {
    --s: 400px;
    width: var(--s);
    height: calc(var(--s) / 8 * 7);
}

.xpl-user__plug-title {
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
}

.xpl-user__plug-text {
    font-size: 20px;
    line-height: 1.15;
}

.xpl-user__main-header {
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
    overflow: hidden;
}

.xpl-user__program {
    min-height: 220px;
    padding: 16px 24px 16px 0;
    color: #FFFFFF;
    display: flex;
    position: relative;
}

.xpl-user__program::after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('/img/xpl/program-bg.png') no-repeat right, linear-gradient(269.92deg, #61A9FE 60.65%, rgba(97, 169, 254, 0) 99.93%);
    background-size: contain;
    position: absolute;
    content: '';
}

.xpl-user__program-img {
    width: calc(460 / 1120 * 100%);
    margin: -16px 24px -16px 0;
    object-fit: cover;
    flex-shrink: 0;
}

.xpl-user__program-inner {
    align-self: center;
    position: relative;
    z-index: 2;
}

.xpl-user__program-name {
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    word-break: break-word;
}

.xpl-user__program-descr {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    word-break: break-word;
}

.xpl-user__program-complete {
    position: relative;
    height: 50px;
    padding: 0 30px;
    font-size: 16px;
    line-height: 1;
    background-color: #fff;
    color: #61A9FE;
    border-radius: 8px;
    border: 0;
}

.xpl-user__program-complete:disabled {
    background-color: rgba(255, 255, 255, .5);
    color: rgba(97, 169, 254, 0.5);
    cursor: auto;
}

.xpl-user__program-descr + .xpl-user__program-complete {
    margin-top: 16px;
}

.xpl-user__program-complete .hint {
    width: 320px;
    top: auto;
    bottom: calc(100% + 10px);
    white-space: unset;
}

.xpl-user__program-complete .hint__icon {
    flex-shrink: 0;
}

.xpl-user__main-body {
    height: 100%;
    padding: 20px;
    flex: 1;
    position: relative;
}

.xpl-user__main-body .xpl-user__plug {
    padding: 20px;
    display: none;
}

.xpl-user__main-body._closed .xpl-user__plug {
    display: flex;
}

.xpl-user__stats {
    margin-bottom: 20px;
    padding: 28px 20px;
    border-radius: 10px;
    background-color: #62AAFE;
    color: #FFFFFF;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

body._dark .xpl-user__stats {
    background-color: var(--accentGray);
}

.xpl-user__stat {
    margin: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xpl-user__stat>span {
    margin-right: 10px;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.15;
}

.xpl-user__stat>div {
    font-size: 14px;
    line-height: 1.15;
}

.xpl-user__stat>div>span {
    color: rgba(255, 255, 255, .75);
}

.xpl-user__navbar {
    display: none;
}

.xpl-user-item__hidden {
    display: none;
}

.xpl-user-item {
    --main: var(--accent);
    --opacity: var(--accentGray);
}

.xpl-user-item[data-type="course"] {
    --icon: var(--courseBg);
}

.xpl-user-item[data-status="complete"] {
    --main: #54B268;
    --opacity: #F9FDF9;
    --icon: #54B268;
}

.xpl-user-item[data-status="fail"] {
    --main: #E54047;
    --opacity: #FDF9F9;
    --icon: #E54047;
}

body._dark .xpl-user-item[data-status="complete"],
body._dark .xpl-user-item[data-status="fail"] {
    --opacity: var(--accentGray);
}

body._dark :where(
    .xpl-user-item[data-status="complete"],
    .xpl-user-item[data-status="fail"]
) {
    --opacity: var(--accentGray);
}

.xpl-user-item[data-type="course"]>.xpl-user-item__inner {
    cursor: pointer;
}

.xpl-user-item[data-type="course"]>.xpl-user-item__inner>.xpl-user-item__main>.xpl-user-item__icon {
    background-color: var(--icon);
}

.xpl-user-item[data-type="course"]:last-child .xpl-user-item[data-type="lesson"]:last-child::after {
    width: 2px;
    height: calc(50% - 1px);
    top: calc(50% + 1px);
    left: -2px;
    background-color: var(--mainBg);
    position: absolute;
    content: '';
}

.xpl-user-item[data-type="course"]:last-child .xpl-user-item._opened[data-type="lesson"]:last-child::after {
    display: none;
}

.xpl-user-item[data-type="course"]:not(:last-child) {
    margin-bottom: 20px;
    position: relative;
}

.xpl-user-item[data-type="course"]:not(:last-child)::after {
    width: 2px;
    height: 20px;
    top: 100%;
    left: 42px;
    background-color: #DFE7F7;
    position: absolute;
    content: '';
}

body._dark .xpl-user-item[data-type="course"]:not(:last-child)::after {
    background-color: var(--svg);
}

.xpl-user-item._deleted>.xpl-user-item__inner {
    filter: grayscale(100%);
}

.xpl-user-item._deleted>.xpl-user-item__inner .xpl-user-item__icon {
    background-color: #999999;
}

.xpl-user-item__inner {
    padding: 16px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    background-color: var(--opacity);
    display: flex;
    align-items: center;
    position: relative;
}

.xpl-user-item__inner._opacity {
    cursor: auto!important;
}

.xpl-user-item__refresh {
    --s: 35px;
    width: var(--s);
    height: var(--s);
    right: 0;
    top: -8px;
    border-radius: 50%;
    border: 4px solid #FFFFFF;
    background-color: var(--opacity);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;
}

.xpl-user-item__refresh span {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    background-color: var(--main);
    -webkit-mask-image: url("/img/xpl/refresh.svg");
    mask-image: url("/img/xpl/refresh.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xpl-user-item__main {
    margin-right: 24px;
    display: flex;
    align-items: center;
    flex: 1;
}

.xpl-user-item__inner._opacity .xpl-user-item__main {
    opacity: .5;
}

.xpl-user-item__info {
    display: flex;
    flex-direction: column;
}

.xpl-user-item__name {
    font-size: 18px;
    line-height: 1;
    word-break: break-word;
}

.xpl-user-item[data-type="course"]>.xpl-user-item__inner .xpl-user-item__name {
    margin-bottom: 8px;
}

.xpl-user-item__show {
    margin-top: 8px;
    color: #999999;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-user-item__lessons {
    color: #999999;
    align-self: flex-start;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-user-item__status {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--main);
}

.xpl-user-item__link {
    padding-right: 34px;
    color: var(--main);
    text-decoration: none;
    position: relative;
}

.xpl-user-item__link::after {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    background-color: var(--main);
    -webkit-mask-image: url("/img/xpl/angle.svg");
    mask-image: url("/img/xpl/angle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    right: 0;
    position: absolute;
    content: '';
}

.xpl-user-item__close {
    flex-shrink: 0;
    position: relative;
}

.xpl-user-item__close .xpl-hint {
    right: -16px;
}

.xpl-user-item__close>span {
    --s: 20px;

    display: block;
    width: var(--s);
    height: var(--s);
    background-color: var(--main);
    -webkit-mask-image: url("/img/study/lock.svg");
    mask-image: url("/img/study/lock.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xpl-user-item__inner._opacity .xpl-user-item__close>span {
    opacity: .5;
}

.xpl-user-item[data-type="course"]>.xpl-user-item__hidden {
    margin-left: 42px;
    padding-top: 20px;
    border-left: 2px solid #DFE7F7;
}

body._dark .xpl-user-item[data-type="course"]>.xpl-user-item__hidden {
    border-color: var(--svg);
}

.xpl-user-item[data-type="lesson"] {
    padding-left: 20px;
    position: relative;
    counter-reset: question-counter;
}

:where(
    .xpl-user-item[data-type="lesson"][lesson-type="test"][data-status="complete"],
    .xpl-user-item[data-type="lesson"][lesson-type="test"][data-status="fail"],
    .xpl-user-item[data-type="lesson"][lesson-type="test"][data-status="oncheck"],
    .xpl-user-item[data-type="lesson"][lesson-type="task"][data-status="complete"],
    .xpl-user-item[data-type="lesson"][lesson-type="task"][data-status="fail"],
    .xpl-user-item[data-type="lesson"][lesson-type="task"][data-status="oncheck"]
) .xpl-user-item__inner {
    cursor: pointer;
}

.xpl-user-item[data-type="lesson"]:not(:last-child) {
    margin-bottom: 20px;
}

.xpl-user-item[data-type="lesson"] .xpl-user-item__icon {
    background-color: var(--main);
}

.xpl-user-item[data-type="lesson"] .xpl-user-item__icon span {
    background-color: #fff;
}

.xpl-user-item[data-type="lesson"] .xpl-user-item__inner {
    position: relative;
}

.xpl-user-item[data-type="lesson"] .xpl-user-item__inner::before {
    height: 2px;
    width: 20px;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #DFE7F7;
    position: absolute;
    content: '';
}

body._dark .xpl-user-item[data-type="lesson"] .xpl-user-item__inner::before {
    background-color: var(--svg);
}

.xpl-user-item[data-type="lesson"] .xpl-user-item__hidden {
    padding-top: 20px;
}

.xpl-user-question {
    --opacity: rgba(41, 92, 201, 0.25);
    --main: var(--accent);
    background-color: var(--mainBg);
    border-radius: 10px;
    border: 1px solid var(--opacity);
    counter-increment: question-counter;
}

body._dark .xpl-user-question {

}

.xpl-user-question:not(:last-child) {
    margin-bottom: 20px;
}

.xpl-user-question[data-status="complete"] {
    --opacity: rgba(84, 178, 104, 0.25);
    --main: #54B268;
}

.xpl-user-question[data-status="fail"] {
    --opacity: rgba(229, 64, 71, 0.25);
    --main: #E54047;
}

.xpl-user-question__start {
    display: flex;
    justify-content: space-between;
    margin: 24px 24px 20px;
}

.xpl-user-question__start-count {
    position: relative;
    margin-right: 20px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
}

.xpl-user-question__start-count::after {
    content: counter(question-counter);
}

.xpl-user-question__start-info {
    display: flex;
    font-size: 16px;
    line-height: 1;
}

.xpl-user-question__start-info p {
    margin-right: 20px;
    color: var(--textOpacity);
}

.xpl-user-question__start-info span {
    color: var(--main);
}

.xpl-user-question__title {
    margin: 0 24px 20px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.15;
}

.xpl-user-question__header {
    margin: 0 24px 20px;
}

.xpl-user-question__header,
.xpl-user-question__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.xpl-user-question__user .xpl-users-aside__user-name {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.xpl-user-question__user .xpl-users-aside__user-pos,
.xpl-users-aside__user-date {
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.xpl-users-aside__user-date {
    text-align: right;
}

.xpl-user-question__content {
    grid-column: span 2;
    font-size: 18px;
    line-height: 1.5;
}

.xpl-user-question__text a {
    color: var(--accent);
    text-decoration: none;
}

.xpl-user-question .chk-block__curator {
    margin: 20px 10px 10px;
}

.xpl-user-question .chk-block__curator + .xpl-user-question__footer {
    margin-top: 10px;
}

.xpl-user-question__footer {
    padding: 10px;
    margin: 20px 10px 10px;
    background-color: var(--hover);
    border-radius: 10px;
}

.check-answer__video {
    /*padding-top: calc(100% / 16 * 9);*/
    /*padding-top: 100%;*/
    width: 365px;
    height: 365px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.check-answer__video .video-js {
    background-color: transparent;
}

.check-answer__video .video-item__video {
    bottom: 0;
}

.chk-block__comment {
    display: flex;
    padding: 5px 9px;
    margin-bottom: 10px;
    background-color: #F9FAFD;
    border-radius: 10px;
}

.chk-block__user,
.chk-block-prev__user-img {
    --s: 40px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #FFFFFF;
    border-radius: 50%;
    text-transform: uppercase;
}

.chk-block__comment-content {
    display: none;
    width: 100%;
}

.chk-block__comment-content._active {
    display: flex;
}

.chk-block__text {
    flex: 1;
}

.chk-block__text-content {
    flex: 1;
    align-self: flex-start;
    padding: 11px 0;
    margin-right: 14px;
    font-size: 16px;
    line-height: 1.15;
    outline: none;
    word-break: break-word;
}

.chk-block__text-content:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: rgba(51, 51, 51, 0.5);
    pointer-events: none;
}

.chk-block__switch {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-top: 8px;
    background-color: #333;
    border: none;
    opacity: .5;
    transition: all .2s;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    cursor: pointer;
}

.chk-block__switch:disabled {
    cursor: auto;
}

.chk-block__text-switch {
    -webkit-mask-image: url("/img/chk/voice.svg");
    mask-image: url("/img/chk/voice.svg");
}

.chk-block__before,
.chk-block__rec,
.chk-block__audio {
    align-items: center;
}

.chk-block__before-button,
.chk-block__rec-button {
    --s: 40px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    margin-right: 14px;
    background-color: #EEF2FA;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.chk-block__before-button span {
    --s: 24px;

    width: var(--s);
    height: var(--s);
    background-color: #295CC9;
    -webkit-mask-image: url("/img/chk/rec.svg");
    mask-image: url("/img/chk/rec.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.chk-block__before-text {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.chk-block__rec-button {
    background-color: rgba(229, 64, 71, 0.15);
}

.chk-block__rec-button span {
    --s: 16px;

    width: var(--s);
    height: var(--s);
    background-color: #E54047;
    border-radius: 4px;
    animation: blink 1s infinite ease;
}

.chk-block__audio-switch {
    margin-top: 0;
    margin-left: auto;
    -webkit-mask-image: url("/img/chk/keyboard.svg");
    mask-image: url("/img/chk/keyboard.svg");
}

.chk-block__rec-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-right: 14px;
}

.chk-block__rec-data {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1;
    color: rgba(41, 92, 201, 0.75);
}

.chk-block__audio .xpl-audio {
    flex: 1;
    margin-right: 14px;
}

.chk-block__answer-video {
    max-width: 365px;
    width: 100%;
}

.chk-block__answer-video .check-answer__video {
    width: 100%;
    height: auto;
    padding-top: 100%;
}

.chk-block__actions {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.chk-block__action {
    display: flex;
    align-items: center;
    margin-right: 40px;
    font-size: 16px;
    line-height: 1.15;
    background-color: transparent;
    border: none;
    opacity: .5;
    transition: all .2s;
    cursor: pointer;
}

.chk-block__action:disabled {
    cursor: auto;
}

.chk-block__action span {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-color: #333333;
    transition: all .2s;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xpl-user-question[data-result="accept"] .chk-block__accept,
.chk-block[data-result="accept"] .chk-block__accept {
    color: #54B268;
    opacity: 1;
}

.xpl-user-question[data-result="accept"] .chk-block__accept span,
.chk-block[data-result="accept"] .chk-block__accept span {
    background-color: #54B268;
}

.xpl-user-question[data-result="refuse"] .chk-block__refuse,
.chk-block[data-result="refuse"] .chk-block__refuse {
    color: #E54047;
    opacity: 1;
}

.xpl-user-question[data-result="refuse"] .chk-block__refuse span,
.chk-block[data-result="refuse"] .chk-block__refuse span {
    background-color: #E54047;
}

.chk-block__accept span {
    -webkit-mask-image: url("/img/chk/accept.svg");
    mask-image: url("/img/chk/accept.svg");
}

.chk-block__refuse span {
    -webkit-mask-image: url("/img/chk/refuse.svg");
    mask-image: url("/img/chk/refuse.svg");
}

.chk-block__confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 130px;
    min-height: 50px;
    padding: 8px 16px;
    margin-left: auto;
    font-size: 16px;
    line-height: 1.15;
    background-color: rgba(41, 92, 201, 0.15);
    color: #295CC9;
    transition: all .2s;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.chk-block__confirm._accept {
    background-color: rgba(84, 178, 104, 0.15);
    color: #54B268;
}

.chk-block__confirm._refuse {
    background-color: rgba(229, 64, 71, 0.15);
    color: #E54047;
}

.chk-block__confirm:not(._accept):not(._refuse):disabled {
    background-color: rgba(41, 92, 201, 0.075);
    color: rgba(41, 92, 201, 0.5);
}

.chk-block__confirm:disabled {
    cursor: auto;
}

/* audio */
.xpl-audio {
    --accent: #295CC9;
    --opacity: #C9D6F1;
    --play: #eff1fa;
    display: flex;
    align-items: center;
}

body._dark .xpl-audio {
    --accent: #FFFFFF;
    --opacity: rgba(255, 255, 255, .25);
    --play: var(--svg);
}

.xpl-audio__play {
    --s: 40px;
    width: var(--s);
    height: var(--s);
    margin-right: 18px;
    border-radius: 50%;
    background-color: var(--play);
    flex-shrink: 0;
    cursor: pointer;
}

.xpl-audio__play span {
    --s: 14px;
    width: var(--s);
    height: calc(var(--s) / 8 * 9);
    background-color: var(--accent);
    -webkit-mask-image: url("/img/xpl/play.svg");
    mask-image: url("/img/xpl/play.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s) calc(var(--s) / 8 * 9);
}

.xpl-audio._play .xpl-audio__play span {
    --s: 14px;
    width: var(--s);
    height: calc(var(--s) / 7 * 9);
    -webkit-mask-image: url("/img/xpl/pause.svg");
    mask-image: url("/img/xpl/pause.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s) calc(var(--s) / 7 * 9);
}

.xpl-audio._loading .xpl-audio__play span {
    --s: 32px;

    width: var(--s);
    height: var(--s);
    background-color: var(--accent);
    -webkit-mask-image: url('/img/common/audio-loader.svg');
    mask-image: url('/img/common/audio-loader.svg');
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xpl-audio__content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 8px;
}

.xpl-audio__name {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}

.xpl-audio__duration {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(41, 92, 201, .75);
}

body._dark .xpl-audio__duration {
    color: #FFFFFF;
}

.xpl-audio__button {
    justify-self: flex-end;
    font-size: 16px;
    line-height: 1;
    color: var(--accent);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.stat-block .xpl-audio__duration {
    color: var(--accent);
}

.xpl-audio__progress {
    grid-column: span 2;
    height: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.xpl-audio__progress {
    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--value) - var(--min)) / var(--range));
    --sx: calc(0.5 * 8px + var(--ratio) * (100% - 8px));
}

.xpl-audio__progress:focus {
    outline: none;
}

.xpl-audio__progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 16px;
    background: var(--accent);
    border: none;
    box-shadow: none;
    margin-top: -2px;
}

.xpl-audio__progress::-webkit-slider-runnable-track {
    height: 4px;
    border: none;
    border-radius: 0.5em;
    background: var(--opacity);
    box-shadow: none;
}

.xpl-audio__progress::-webkit-slider-runnable-track {
    background: linear-gradient(var(--accent), var(--accent)) 0/var(--sx) 100% no-repeat, var(--opacity);
}

.xpl-audio__progress::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border-radius: 16px;
    background: var(--accent);
    border: none;
    box-shadow: none;
}

.xpl-audio__progress::-moz-range-track {
    height: 4px;
    border: none;
    border-radius: 0.5em;
    background: #C9D6F1;
    box-shadow: none;
}

.xpl-audio__progress::-moz-range-track {
    background: linear-gradient(var(--accent), var(--accent)) 0/var(--sx) 100% no-repeat, var(--opacity);
}

.xpl-audio__progress::-ms-fill-upper {
    background: transparent;
    border-color: transparent;
}

.xpl-audio__progress::-ms-fill-lower {
    background: transparent;
    border-color: transparent;
}

.xpl-audio__progress::-ms-thumb {
    width: 8px;
    height: 8px;
    border-radius: 16px;
    background: var(--accent);
    border: none;
    box-shadow: none;
    margin-top: 0;
    box-sizing: border-box;
}

.xpl-audio__progress::-ms-track {
    height: 4px;
    border-radius: 0.5em;
    background: var(--opacity);
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}

.xpl-audio__progress::-ms-fill-lower {
    height: 4px;
    border-radius: 0.5em 0 0 0.5em;
    margin: 0;
    background: var(--accent);
    border: none;
    border-right-width: 0;
}
/* audio */

/* file */
.xpl-user-question__files {
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));*/
    grid-gap: 10px;
}

.xpl-user-question .xpl-user-question__file {
    --bg: #f3f7fc;
    --opacity: #E1E9F8;
    --main: #295CC9;
}

.xpl-user-question__file {
    padding: 24px;
    border-radius: 10px;
    background-color: var(--bg);
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xpl-user-question__file-img {
    --s: 100px;
    width: var(--s);
    height: var(--s);
    background-color: var(--opacity);
    margin-bottom: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

.xpl-user-question__file-img span {
    --s: 44px;
    width: var(--s);
    height: calc(var(--s) / 44 * 48);
    background-color: var(--main);
    -webkit-mask-image: url("/img/xpl/file.svg");
    mask-image: url("/img/xpl/file.svg");
    -webkit-mask-size: var(--s) calc(var(--s) / 44 * 48);
    mask-size: var(--s) calc(var(--s) / 44 * 48);
}

.xpl-user-question__file-title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    word-break: break-word;
}

.xpl-user-question__file-size {
    font-size: 12px;
    line-height: 1.15;
    color: #999999;
}
/* file */

.xpl-user-question__list,
.xpl-user-question__tuple,
.xpl-user-question__queue {
    font-size: 16px;
    line-height: 1.15;
}

.xpl-user-question__list li {
    position: relative;
    padding-left: 24px;
}

.xpl-user-question__list li::before {
    --s: 3px;

    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    left: 10.5px;
    top: 7px;
    background-color: var(--text);
    border-radius: 50%;
}

.xpl-user-question__list li:not(:last-child),
.xpl-user-question__queue li:not(:last-child),
.xpl-user-question__tuple li:not(:last-child) {
    margin-bottom: 20px;
}

.xpl-user-question__tuple-title {
    margin-bottom: 10px;
    color: var(--textOpacity);
}

.xpl-user-question__tuple-item:not(:last-child) {
    margin-bottom: 10px;
}

.xpl-user-question__queue {
    counter-reset: queue-counter;
}

.xpl-user-question__queue li {
    counter-increment: queue-counter;
}

.xpl-user-question__queue li::before {
    content: counter(queue-counter) '. ';
}

.xpl-user-history {
    height: calc(100vh - 80px);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    scrollbar-width: none;
}

.xpl-user-history::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.xpl-user-history__list {
    flex: 1;
}

.xpl-user-history__item {
    margin: 0 24px 27px;
    padding-bottom: 27px;
    font-size: 18px;
    line-height: 1.2;
    display: flex;
}

.xpl-user-history__item._new {
    position: relative;
}

.xpl-user-history__item._new::before {
    --s: 10px;
    width: var(--s);
    height: var(--s);
    top: -10px;
    left: -10px;
    border-radius: 50%;
    background-color: #295CC9;
    position: absolute;
    content: '';
}

.xpl-user-history__item:not(:last-child) {
    border-bottom: 1px solid #EAEAEA;
}

.xpl-user-history__item-user {
    margin-right: 14px;
    flex-shrink: 0;
}

.xpl-user-history__item-user .xpl-users-aside__user-img {
    --s: 55px;
}

.xpl-user-history__item-text {
    margin-bottom: 5px;
}

.xpl-user-history__item-text span {
    font-weight: 500;
}

.xpl-user-history__item-date {
    font-size: 16px;
    line-height: 1.15;
    color: #999999;
}

.xpl-user-history__footer {
    padding: 24px;
    bottom: 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 85%, transparent 100%);
    -webkit-position: sticky;
    position: sticky;
}

.xpl-user-history__btn {
    align-self: flex-start;
}

.xpl-user-settings {
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.xpl-user-form {
    margin-bottom: 32px;
}

.xpl-user-form__box:not(:last-child) {
    margin-bottom: 32px;
}

.xpl-user-form__name {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 10px;
}

.xpl-user-form__input {
    font-size: 16px;
    line-height: 1.15;
    display: flex;
    flex-direction: column;
    position: relative;
}

.xpl-user-form__box-error {
    top: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

.xpl-user-form__input._error span {
    color: #E54047;
}

.xpl-user-form__input._error input {
    color: #E54047;
    border-color: #E54047;
}

.xpl-user-form__input._error .xpl-user-form__box-error {
    opacity: 1;
    visibility: visible;
}

.xpl-user-form__input span {
    margin-bottom: 6px;
    color: #999999;
}

.xpl-user-form__input input {
    height: 50px;
    padding: 0 24px;
    border-radius: 10px;
    border: 1px solid #EAEAEA;
}

.xpl-user-form__gender {
    font-size: 16px;
    line-height: 19px;
    display: flex;
}

.xpl-user-form__radio {
    margin-right: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.xpl-user-form__radio:not(:last-child) {
    margin-right: 64px;
}

.xpl-user-form__radio input {
    border-color: #eaeaea;
}

.xpl-user-settings__footer {
    margin-top: auto;
}

.xpl-user-settings__save {
    display: flex;
    align-items: center;
}

.xpl-user-settings__save._saved .xpl-user-settings__footer-save {
    opacity: 1;
    visibility: visible;
}

.xpl-user-form__button {
    margin-right: 28px;
}

.xpl-user-settings__footer-save {
    font-size: 18px;
    line-height: 1.15;
    color: #54B268;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
}



/*.xpl-user-settings__footer-title {*/
/*    margin-bottom: 10px;*/
/*    font-weight: 500;*/
/*    font-size: 18px;*/
/*    line-height: 1.15;*/
/*}*/

/*.xpl-user-settings__footer-text {*/
/*    margin-bottom: 18px;*/
/*    font-size: 18px;*/
/*    line-height: 1.15;*/
/*    color: #999999;*/
/*}*/

/*.xpl-user-settings__footer-buttons {*/
/*    display: flex;*/
/*}*/

/*.xpl-user-settings__footer-btn:not(:last-child) {*/
/*    margin-right: 15px;*/
/*}*/

/*.xpl-user-settings__remove {*/
/*    background-color: #E54047;*/
/*}*/

/*.xpl-user-settings__remove:active {*/
/*    background-color: #ab1d22;*/
/*}*/

.xpl-crop__wrapper {
    height: 100%;
}

.xpl-crop__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.xpl-crop__header {
    margin-bottom: 24px;
}

.xpl-crop__header-title {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
}

.xpl-crop__header-text {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.xpl-crop__body {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.xpl-crop__main {
    display: flex;
    flex: 1;
}

.xpl-crop__img-wrapper {
    margin-right: 44px;
    flex: 1;
}

.xpl-crop__img {
    max-height: calc(100vh - 348px);
    margin-bottom: 30px;
}

.xpl-crop__img img {
    width: 100%;
    height: 100%;
}

.xpl-crop__preview {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.xpl-crop__preview-img {
    max-width: 260px;
    max-height: 200px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.xpl-crop__reload {
    min-width: 260px;
    margin-top: 20px;
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
    position: relative;
}

.xpl-crop__reload:active {
    background-color: #EEEEF1;
}

.xpl-crop__reload input {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    z-index: 2;
}

.xpl-crop__reload input::-webkit-file-upload-button {
    display: none;
}

.xpl-crop__zoom-button {
    padding: 12px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.xpl-crop__zoom-button:not(:last-child) {
    margin-right: 32px;
}

.xpl-crop__zoom-button span {
    --s: 24px;
    width: var(--s);
    height: var(--s);
    background-color: #333;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    -webkit-mask-image: url("/img/xpl/icon-zoom-in.svg");
    mask-image: url("/img/xpl/icon-zoom-in.svg");
    transition: all .2s;
}

.xpl-crop__zoom-minus span {
    -webkit-mask-image: url("/img/xpl/icon-zoom-out.svg");
    mask-image: url("/img/xpl/icon-zoom-out.svg");
}

.xpl-crop__footer {
    display: flex;
    justify-content: space-between;
}

.xpl-crop__btn {
    min-width: 176px;
}

.xpl-crop__btn-cancel {
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
}

.xpl-crop__btn-cancel:active {
    background-color: #EEEFF1;
}

.xpl-loader__wrapper {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, var(--mainBg) 100%);
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 15;
}

body._dark .xpl-loader__wrapper {
    background: linear-gradient(180deg, rgba(21, 22, 23, .6) 0%, var(--mainBg) 100%);
}

.xpl-loader {
    width: 80px;
    height: 80px;
    left: 50%;
    transform: scale(1.4) translate(-50%, -50%);
    display: inline-block;
    position: absolute;
}
.xpl-loader div {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #61A9FE;
    border-radius: 50%;
    animation: xpl-loader 1.2s linear infinite;
}
body._dark .xpl-loader div {
    background: var(--accent);
}
.xpl-loader div:nth-child(1) {
    animation-delay: 0s;
    top: 37px;
    left: 66px;
}
.xpl-loader div:nth-child(2) {
    animation-delay: -0.1s;
    top: 22px;
    left: 62px;
}
.xpl-loader div:nth-child(3) {
    animation-delay: -0.2s;
    top: 11px;
    left: 52px;
}
.xpl-loader div:nth-child(4) {
    animation-delay: -0.3s;
    top: 7px;
    left: 37px;
}
.xpl-loader div:nth-child(5) {
    animation-delay: -0.4s;
    top: 11px;
    left: 22px;
}
.xpl-loader div:nth-child(6) {
    animation-delay: -0.5s;
    top: 22px;
    left: 11px;
}
.xpl-loader div:nth-child(7) {
    animation-delay: -0.6s;
    top: 37px;
    left: 7px;
}
.xpl-loader div:nth-child(8) {
    animation-delay: -0.7s;
    top: 52px;
    left: 11px;
}
.xpl-loader div:nth-child(9) {
    animation-delay: -0.8s;
    top: 62px;
    left: 22px;
}
.xpl-loader div:nth-child(10) {
    animation-delay: -0.9s;
    top: 66px;
    left: 37px;
}
.xpl-loader div:nth-child(11) {
    animation-delay: -1s;
    top: 62px;
    left: 52px;
}
.xpl-loader div:nth-child(12) {
    animation-delay: -1.1s;
    top: 52px;
    left: 62px;
}
@keyframes xpl-loader {
    0%, 20%, 80%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.m-xpl {
    max-width: 730px;
    padding: 28px 28px 44px;
    border-radius: 10px;
    background-color: var(--mainBg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
}

.m-xpl._active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.m-xpl._loading::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .8);
    z-index: 10;
}

.m-xpl._loading::after {
    --s: 100px;

    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(51, 51, 51, .75);
    -webkit-mask-image: url("/img/chk/loader.svg");
    mask-image: url("/img/chk/loader.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    z-index: 11;
}

.m-xpl__user-remove .m-xpl__img div,
.m-xpl__user-delete .m-xpl__img div,
.m-xpl__user-block .m-xpl__img div {
    --s: 176px;
    width: var(--s);
    height: var(--s);
    font-weight: 600;
    font-size: 60px;
    line-height: 72px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.m-xpl__user-remove .m-xpl__img,
.m-xpl__user-delete .m-xpl__img,
.m-xpl__user-block .m-xpl__img {
    position: relative;
}

.m-xpl__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.study-ready .m-xpl__inner {
    min-height: 570px;
}

.m-xpl__header {
    margin-bottom: 64px;
    flex-shrink: 0;
}

.m-xpl__img {
    position: relative;
    max-height: 233px;
}

.m-xpl__img-hidden {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--mainBg);
    opacity: 0;
    visibility: hidden;
    z-index: 2;
}

.m-xpl__img svg {
    width: 100%;
    height: 100%;
}

.m-xpl__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m-xpl__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
}

.m-xpl__text {
    font-size: 18px;
    line-height: 1.15;
}

.study-ready .m-xpl__warning {
    max-width: 315px;
    width: 100%;
    margin-top: 30px;
    padding: 12px;
    font-size: 18px;
    line-height: 1.15;
    background-color: rgba(229, 64, 71, 0.15);
    color: #E54047;
    border-radius: 5px;
    text-align: center;
}

.study-ready .m-xpl__warning[data-status="success"] {
    background-color: rgba(84, 178, 104, 0.15);
    color: #54B268;
}

body._dark .study-ready .m-xpl__warning {
    background-color: rgba(255, 255, 255, .15);
}

.m-xpl__warning._hidden {
    display: none;
}

.m-xpl__main {
    margin-bottom: 80px;
}

.study-ready .m-xpl__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
}

.m-xpl__buttons {
    display: flex;
}

.study-ready .m-xpl__buttons {
    margin-top: 24px;
}

.m-xpl__btn {
    min-width: 176px;
    text-decoration: none;
}

.m-xpl__btn._hidden {
    display: none;
}

.study-ready .m-xpl__btn {
    min-width: 260px;
}

.m-xpl__btn:not(:last-child) {
    margin-right: 22px;
}

.m-xpl__btn-cancel {
    background-color: #F7F8FA;
    color: #999999;
}

body._dark .m-xpl__btn-cancel {
    background-color: rgba(255, 255, 255, .15);
    color: #FFFFFF;
}

.m-xpl__btn-cancel:active {
    background-color: #EEEFF1;
}

.xpl-plug {
    height: 100%;
    padding: 24px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
}

.xpl-plug__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xpl-plug__title {
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
}

.xpl-plug__text {
    margin-bottom: 40px;
    font-size: 20px;
    line-height: 1.15;
}

.xgl__header {
    margin-bottom: 32px;
}

.xgl__title {
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    text-align: center;
}

.xgl__text {
    margin-bottom: 32px;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
}

.xgl-form {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 1;
}

.xgl-form__text {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.xgl-form__inner {
    display: grid;
    grid-template-columns: 25fr 22fr 18fr;
    grid-gap: 10px;
}

.xgl-select {
    position: relative;
}

.xgl-select._disabled .xgl-select__header-icon {
    display: none;
}

.xgl-select._active .xgl-select__header {
    border-radius: 10px 10px 0 0;
    border-bottom-color: transparent;
}

.xgl-select._active .xgl-select__header-icon {
    transform: rotateX(180deg);
}

.xgl-select._active .xgl-select__body {
    display: block;
}

.xgl-select__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid #EEEFF1;
    cursor: pointer;
}

body._dark .xgl-select__header {
    border-color: var(--textOpacity);
}

.xgl-select__header-text {
    outline: none;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
}

.xgl-select__header-icon {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-left: 10px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/angle.svg");
    mask-image: url("/img/xpl/angle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transition: all .2s;
}

.xgl-select__body {
    display: none;
    width: 100%;
    max-height: 150px;
    padding: 0 10px 10px;
    top: 50px;
    background-color: var(--mainBg);
    border-radius: 0 0 10px 10px;
    border: 1px solid #EEEFF1;
    border-top: none;
    position: absolute;
    z-index: 2;
    overflow: auto;
    scrollbar-width: none;
}

.xgl-select__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body._dark .xgl-select__body {
    border-color: var(--textOpacity);
}

.xgl-select__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.xgl-select__title {
    padding: 10px;
    color: rgba(51, 51, 51, .5);
    text-transform: uppercase;
}

.xgl-select__item {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.xgl-select__item:disabled {
    cursor: auto;
    opacity: .5;
}

.xgl-select__item span {
    position: relative;
    color: #E54047;
}

.xgl-select__item span::before {
    position: relative;
    display: inline-block;
    content: '';
    width: 12px;
    height: 14px;
    margin-right: 7px;
    top: 1px;
    background-color: #E54047;
    -webkit-mask-image: url("/img/xpl/lock.svg");
    mask-image: url("/img/xpl/lock.svg");
    -webkit-mask-size: 12px 14px;
    mask-size: 12px 14px;
}

.xgl-link {
    position: relative;
}

.xgl-link__inner {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    left: 0;
    top: 0;
    border-radius: 10px;
    border: 1px solid #EEEFF1;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    position: absolute;
}

body._dark .xgl-link__inner {
    border-color: var(--textOpacity);
}

.xgl-link__inner._active {
    opacity: 1;
    visibility: visible;
}

.xgl-link__text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    color: var(--textOpacity);
}

.xgl-link__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: var(--textOpacity);
    border: none;
    cursor: pointer;
}

.xgl-link__button span {
    --s: 24px;

    width: var(--s);
    height: var(--s);
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/copy.svg");
    mask-image: url("/img/xpl/copy.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xgl-link__success {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #54B268;
}

.xgl-link__success span {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 12px;
    background-color: #54B268;
    -webkit-mask-image: url("/img/xpl/check-circle.svg");
    mask-image: url("/img/xpl/check-circle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xgl-form__button {
    height: 50px;
    border-radius: 10px;
    background-color: var(--accent);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
}

.xgl-form__button._off {
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
}

body._dark .xgl-form__button._off {
    background-color: var(--svg);
    color: var(--text);
}

.xgl-form__button:disabled {
    opacity: .5;
    cursor: auto;
}

.xgl-warning {
    display: flex;
    padding: 16px 32px 22px 20px;
    font-size: 16px;
    line-height: 1.15;
    background-color: #F9FAFD;
    border-radius: 10px;
}

body._dark .xgl-warning {
    background-color: var(--hint);
}

.xgl-warning__icon {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 22px;
    background-color: var(--text);
    -webkit-mask-image: url("/img/xpl/warning.svg");
    mask-image: url("/img/xpl/warning.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.xgl-warning__text span {
    font-weight: 600;
}

.xpl-os-help,
.xpl-os-copy,
.xpl-os-progress,
.xpl-os-drop {
    display: flex;
    flex-direction: column;
    max-width: 583px;
    min-height: 539px;
    padding: 20px 20px 38px;
}

.xpl-os-help__inner,
.xpl-os-copy__inner,
.xpl-os-progress__inner,
.xpl-os-drop__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

.xpl-os-help__banner,
.xpl-os-copy__banner,
.xpl-os-progress__banner,
.xpl-os-drop__banner {
    width: 100%;
    height: 186px;
    margin-bottom: 75px;
    border-radius: 10px;
}

.xpl-os-help__banner > img,
.xpl-os-copy__banner > img,
.xpl-os-progress__banner > img,
.xpl-os-drop__banner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.xpl-os-help__title,
.xpl-os-copy__title,
.xpl-os-progress__title,
.xpl-os-drop__title {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 22px;
    line-height: 119.3%;
    text-align: center;
}

.xpl-os-help__text,
.xpl-os-copy__text,
.xpl-os-progress__text,
.xpl-os-drop__text {
    max-width: 503px;
    margin-bottom: 31px;
    font-size: 14px;
    line-height: 1.15;
    text-align: center;
}

.xpl-os-help__text > span {
    font-weight: 600;
}

.xpl-os-help__label {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    cursor: pointer;
}

.xpl-os-help__label-checkbox {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    border: 1px solid rgba(51, 51, 51, .25);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.xpl-os-help__label-checkbox:checked {
    background-image: url("/img/common/checkmark.svg");
    background-color: #295CC9;
    border-color: #295CC9;
}

.xpl-os-help__label-text {
    font-size: 14px;
    line-height: 16px;
    opacity: .5;
}

.xpl-os-help__label-checkbox:checked + .xpl-os-help__label-text {
    opacity: 1;
}

.xpl-os-help__button,
.xpl-os-copy__button {
    width: 168px;
    height: 50px;
    margin-top: auto;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    background-color: #295CC9;
    color: #fff;
    border-radius: 8px;
    border: 0;
}

.xpl-os-copy__banner {
    margin-bottom: 31px;
}

.xpl-os-copy__icon {
    --s: 34px;

    margin-bottom: 10px;
    background-color: #54B268;
    -webkit-mask-image: url("/img/editor/icon-plus-warning1.svg");
    mask-image: url("/img/editor/icon-plus-warning1.svg");
}

.xpl-os-progress__text {
    margin-bottom: 51px;
}

.xpl-os-progress__line {
    position: relative;
    max-width: 448px;
    width: 100%;
    height: 8px;
    background-color: rgba(41, 92, 201, 0.15);
    border-radius: 30px;
    overflow: hidden;
}

.xpl-os-progress__line > div {
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(-110%);
    background-color: #295CC9;
    border-radius: 30px;
    animation: xplosprogressline 2s infinite linear;
}

@keyframes xplosprogressline {
    to {
        transform: translateX(470px);
    }
}

.xpl-os-drop__footer {
    display: flex;
    margin-top: auto;
}

.xpl-os-drop__button {
    width: 140px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    background-color: #F7F8FA;
    color: var(--textOpacity);
    border-radius: 8px;
    border: 0;
}

.xpl-os-drop__button:not(:last-child) {
    margin-right: 20px;
}

.xpl-os-drop__replace,
.xpl-os-drop__complete {
    background-color: #295CC9;
    color: #FFFFFF;
}

.os-side-list__wrapper {
    font-size: 18px;
    line-height: 1.15;
}

.os-side-list__wrapper + .os-side-list__wrapper {
    margin-top: 40px;
}

.os-side-list__name {
    padding-left: 14px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
    text-transform: uppercase;
}

.os-side-item__wrapper:not(:last-child) {
    margin-bottom: 6px;
}

.os-side-item {
    display: flex;
    align-items: center;
    padding: 12px;
    color: inherit;
    border-radius: 10px;
    text-decoration: none;
}

.os-side-item[data-type="section"] {
    cursor: pointer;
}

.os-side-item[data-type="program"] {
    padding-left: 30px;
}

.os-side-item._active {
    background-color: #F9FAFD;
}

.os-side-item__icon {
    --s: 24px;

    margin-right: 10px;
    background-color: var(--text);
    transition: transform .2s;
}

.os-side-item[data-type="section"] .os-side-item__icon {
    -webkit-mask-image: url("/img/xpl/section.svg");
    mask-image: url("/img/xpl/section.svg");
}

.os-side-item[data-type="program"] .os-side-item__icon {
    -webkit-mask-image: url("/img/xpl/folder.svg");
    mask-image: url("/img/xpl/folder.svg");
}

.os-side-item._active .os-side-item__icon {
    transform: rotateZ(90deg);
}

.os-side-item__hidden {
    display: none;
    padding-top: 3px;
}

.xpl-os {
    min-height: calc(100vh - 124px);
    padding: 0 24px 34px;
    background-color: #fff;
    border-radius: 10px;
}

.xpl-os__header {
    min-height: 164px;
    padding: 37px 30px 31px;
    margin: 0 -24px 30px;
    background-image: url("/img/xpl/structure.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #FFFFFF;
    border-radius: 10px 10px 0 0;
}

.xpl-os__header-title {
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
}

.xpl-os__header-subtitle {
    margin-bottom: 27px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.15;
}

.xpl-os__header-row {
    display: flex;
}

.xpl-os__header-content {
    margin-right: 20px;
}

.xpl-os__header-content > span {
    white-space: nowrap;
}

.xpl-os__header-button {
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.15;
    color: #FFFFFF;
    border: 0;
    text-decoration: none;
    white-space: nowrap;
}

.xpl-os__header-button > span {
    --s: 20px;

    margin-left: 10px;
    background-color: #fff;
    -webkit-mask-image: url("/img/common/angle-black.svg");
    mask-image: url("/img/common/angle-black.svg");
}

.xpl-os__header-content {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.15;
}

.xpl-os__search {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.xpl-os__search > span {
    --s: 24px;

    margin-right: 18px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/common/search-black.svg");
    mask-image: url("/img/common/search-black.svg");
}

.xpl-os__search > input {
    flex: 1;
    font-size: 18px;
    border: 0;
}

.xpl-os-item__wrapper {
    position: relative;
}

.xpl-os-item__wrapper::before {
    position: absolute;
    width: 2px;
    height: 100%;
    left: 40px;
    top: 0;
    background-color: rgba(41, 92, 201, 0.15);
    content: "";
}

.xpl-os-item__wrapper:not(:last-child) {
    margin-bottom: 20px;
}

.xpl-os-item__wrapper:not([data-type="general"]):last-child::after {
    position: absolute;
    width: 2px;
    height: calc(100% - 42px);
    left: -24px;
    bottom: 0;
    background-color: #FFFFFF;
    z-index: 2;
    content: "";
}

.xpl-os-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 82px;
    padding: 16px;
    background-color: #F9FAFD;
    border-radius: 10px;
    /*filter: brightness(0.5);*/
    transition: all .2s;
}

body._drag .xpl-os-item * {
    pointer-events: none;
}

.xpl-os-item::before,
.xpl-os-post__wrapper::before {
    position: absolute;
    width: 22px;
    height: 2px;
    left: -22px;
    top: 40px;
    background-color: rgba(41, 92, 201, 0.15);
    content: "";
}

.xpl-os-item__wrapper[data-type="general"] > .xpl-os-item::before {
    display: none;
}

.xpl-os-item__inner {
    display: flex;
    flex: 1;
    align-items: center;
}

.xpl-os-item__image {
    --s: 50px;

    position: relative;
    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 20px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(41, 92, 201, 0.05);
    color: #FFFFFF;
    border-radius: 10px;
    text-transform: uppercase;
}

.xpl-os-item__wrapper._blocked > .xpl-os-item .xpl-os-item__image._hothe {
    background-image: none!important;
}

.xpl-os-item__wrapper._blocked > .xpl-os-item .xpl-os-item__image,
.xpl-os-item__wrapper._blocked > .xpl-os-item .xpl-os-item__info {
    opacity: .5;
}

.xpl-os-item__wrapper._blocked > .xpl-os-item .xpl-os-item__image {
    font-size: 0;
}

.xpl-os-item__image-lock {
    --s: 18px;

    position: absolute;
    display: none;
    width: var(--s);
    height: calc(var(--s) / 14 * 17);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--mainBg);
    -webkit-mask-image: url("/img/xpl/lock.svg");
    mask-image: url("/img/xpl/lock.svg");
    -webkit-mask-size: var(--s) calc(var(--s) / 14 * 17);
    mask-size: var(--s) calc(var(--s) / 14 * 17);
}

.xpl-os-item__wrapper._blocked > .xpl-os-item .xpl-os-item__image-lock {
    display: block;
}

.xpl-os-item__wrapper._blocked > .xpl-os-item .xpl-os-item__image._hothe .xpl-os-item__image-lock {
    background-color: rgba(51, 51, 51, .25);
}

.xpl-os-item__info {
    flex: 1;
}

.xpl-os-item__name {
    width: 100%;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.15;
    background-color: transparent;
    border: 0;
}

.xpl-os-item__pos,
.xpl-os-post__button {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1.15;
    background-color: transparent;
    color: var(--textOpacity);
    border: 0;
}

.xpl-os-item__pos-type {
    margin-right: 5px;
}

.xpl-os-item__pos-type::first-letter {
    text-transform: uppercase;
}

.xpl-os-item__pos-icon,
.xpl-os-post__button > span {
    --s: 20px;

    margin-left: 3px;
    background-color: var(--textOpacity);
    transform: rotateZ(90deg);
    -webkit-mask-image: url("/img/common/angle-black.svg");
    mask-image: url("/img/common/angle-black.svg");
    transition: all .2s;
}

.xpl-os-item__pos._active > .xpl-os-item__pos-icon,
.xpl-os-post__button._active > span {
    transform: rotateZ(90deg) rotateY(180deg);
}

.xpl-os-item__grab,
.xpl-os-post__grab {
    --s: 24px;

    margin-left: 20px;
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/grab.svg");
    mask-image: url("/img/xpl/grab.svg");
    opacity: .5;
    visibility: hidden;
    transition: all .2s;
    cursor: grab;
}

.xpl-os-item__grab:active,
.xpl-os-post__grab:active {
    cursor: grabbing;
}

.xpl-os-item__add {
    position: absolute;
    left: 25px;
    bottom: 0;
    transform: translateY(50%);
    z-index: 5;
}

.xpl-os-item__wrapper[data-type="department"] > .xpl-os-item .xpl-os-item__add {
    z-index: 6;
}

.xpl-os-item__wrapper[data-type="director"] > .xpl-os-item .xpl-os-item__add {
    z-index: 7;
}

.xpl-os-item__wrapper[data-type="general"] > .xpl-os-item .xpl-os-item__add {
    z-index: 8;
}

.xpl-os-item__add-button {
    --s: 34px;

    width: var(--s);
    height: var(--s);
    background-color: #F9FAFD;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
}

.xpl-os-item__add._active .xpl-os-item__add-button,
.xpl-os-item__add._active .xpl-os-item__add-list {
    opacity: 1;
    visibility: visible;
}

.xpl-os-item__add-button > span {
    --s: 20px;

    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/xpl/add-section.svg");
    mask-image: url("/img/xpl/add-section.svg");
}

.xpl-os-item__add-list {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 7px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(204, 216, 242, 0.4);
    background-color: #fff;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    z-index: 5;
}

.xpl-os-item__add._top .xpl-os-item__add-list {
    top: auto;
    bottom: 50%;
}

.xpl-os-item__add-item {
    display: flex;
    align-items: center;
    width: 150px;
    height: 35px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 1.15;
    background-color: transparent;
    border: 0;
    border-radius: 5px;
}

.xpl-os-item__add-item:not(:last-child) {
    margin-bottom: 4px;
}

.xpl-os-item__add-item > span {
    --s: 20px;

    margin-right: 7px;
    background-color: var(--text);
}

.xpl-os-item__add-item[data-type="director"] > span {
    -webkit-mask-image: url("/img/xpl/os-director.svg");
    mask-image: url("/img/xpl/os-director.svg");
}

.xpl-os-item__add-item[data-type="department"] > span {
    -webkit-mask-image: url("/img/xpl/os-department.svg");
    mask-image: url("/img/xpl/os-department.svg");
}

.xpl-os-item__add-item[data-type="section"] > span {
    -webkit-mask-image: url("/img/xpl/os-section.svg");
    mask-image: url("/img/xpl/os-section.svg");
}

.xpl-os-item__hidden,
.xpl-os-item__positions {
    padding-top: 20px;
    padding-left: 64px;
}

.xpl-os-item__hidden._empty {
    padding-top: 0;
}

.xpl-os-item__positions {
    display: none;
}

.xpl-os-post__wrapper {
    position: relative;
    /*padding: 16px;*/
    background-color: #F9FAFD;
    border-radius: 10px;
}

.xpl-os-post__wrapper._blocked .xpl-os-post {
    opacity: .5;
}

.xpl-os-post__wrapper:not(:last-child) {
    margin-bottom: 20px;
}

.xpl-os__posts._ex .xpl-os-post__wrapper:last-child::after {
    position: absolute;
    width: 2px;
    height: calc(100% - 42px);
    left: -24px;
    bottom: 0;
    background-color: #FFFFFF;
    z-index: 2;
    content: "";
}

.xpl-os-post {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #F9FAFD;
    border-radius: 10px;
    transition: all .2s;
}

.xpl-os-post__inner {
    display: flex;
    flex: 1;
    align-items: center;
    margin-right: auto;
}

.xpl-os-post__image {
    --s: 50px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 20px;
    background-color: rgba(41, 92, 201, 0.05);
    border-radius: 10px;
}

.xpl-os-post__image > span {
    --s: 24px;

    background-color: var(--text);
    -webkit-mask-image: url("/img/study/icon-task.svg");
    mask-image: url("/img/study/icon-task.svg");
}

.xpl-os-post__wrapper._blocked .xpl-os-post__image > span {
    --s: 18px;
    
    width: var(--s);
    height: calc(var(--s) / 14 * 17);
    background-color: rgba(51, 51, 51, .25);
    -webkit-mask-image: url("/img/xpl/lock.svg");
    mask-image: url("/img/xpl/lock.svg");
    -webkit-mask-size: var(--s) calc(var(--s) / 14 * 17);
    mask-size: var(--s) calc(var(--s) / 14 * 17);
}

.xpl-os-post__info {
    flex: 1;
}

.xpl-os-post__info-label {
    display: flex;
    margin-bottom: 8px;
}

.xpl-os-post__name {
    flex: 1;
    font-size: 18px;
    line-height: 1.15;
    background-color: transparent;
    border: 0;
}

.xpl-os-post__hidden {
    display: none;
    padding: 4px 16px 16px;
}

.xpl-os-program {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 13px;
    background-color: #EFF2FA;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
}

.xpl-os-program._dragover {
    transform: scale(1.02);
    box-shadow: inset 0 0 36px rgba(67, 102, 227, 0.09);
}

.xpl-os-program._blocked {
    opacity: .5;
    cursor: auto;
}

body._drag .xpl-os-program._editable {
    background-image: url("data:image/svg+xml, %3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23CCCCCC' stroke-width='4' stroke-dasharray='8' stroke-dashoffset='20' stroke-linecap='butt'/%3e%3c/svg%3e");
}

.xpl-os-program:not(:last-child) {
    margin-bottom: 20px;
}

.xpl-os-program__icon {
    --s: 24px;

    margin-right: 31px;
    background-color: var(--text);
    -webkit-mask-image: url("/img/xpl/folder.svg");
    mask-image: url("/img/xpl/folder.svg");
}

.xpl-os-program._blocked .xpl-os-program__icon {
    --s: 18px;
    
    width: var(--s);
    height: calc(var(--s) / 14 * 17);
    background-color: rgba(51, 51, 51, .25);
    -webkit-mask-image: url("/img/xpl/lock.svg");
    mask-image: url("/img/xpl/lock.svg");
    -webkit-mask-size: var(--s) calc(var(--s) / 14 * 17);
    mask-size: var(--s) calc(var(--s) / 14 * 17);
}

.xpl-os-program__name {
    margin-right: 20px;
    font-size: 18px;
    line-height: 1.15;
}

.xpl-os-program__content,
.xpl-os-program__students {
    margin-left: auto;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
    white-space: nowrap;
}

.xpl-os-program__students {
    margin-left: 20px;
}

.xpl-os-item__positions-add {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.15;
    background-color: #F9FAFD;
    color: var(--textOpacity);
    transition: color .2s;
    border-radius: 10px;
    border: 0;
}

.xpl-os-item__positions-add::before {
    position: absolute;
    width: 22px;
    height: 2px;
    left: -22px;
    top: 27px;
    background-color: rgba(41, 92, 201, 0.15);
    content: "";
}

.xpl-os-item__positions:last-child .xpl-os-item__positions-add::after {
    position: absolute;
    width: 2px;
    height: calc(100% - 29px);
    left: -24px;
    bottom: 0;
    background-color: #fff;
    z-index: 2;
    content: "";
}

.xpl-os-item__positions-add > span {
    --s: 24px;

    margin-right: 16px;
    background-color: var(--textOpacity);
    transition: background-color .2s;
    -webkit-mask-image: url("/img/xpl/add-section.svg");
    mask-image: url("/img/xpl/add-section.svg");
}

.xpl-os__posts + .xpl-os-item__positions-add {
    margin-top: 20px;
}

.xpl-os-remove__header {
    height: 233px;
    background: none;
}

.xpl-os-remove__header > img {
    height: 233px;
}

.xpl-os-context._sidebar .xpl-os-context__rename,
.xpl-os-context._sidebar .xpl-os-context__remove,
.xpl-os-context._program .xpl-os-context__rename,
.xpl-os-context._program .xpl-os-context__remove,
.xpl-os-context._general .xpl-os-context__copy,
.xpl-os-context._general .xpl-os-context__remove {
    opacity: .5;
    cursor: auto;
}

.xpl-os-context._paste .xpl-os-context__paste {
    opacity: 1;
    cursor: pointer;
}

@media not all and (hover: none) {
    .xpl-context__btn:hover,
    .xpl-context._paste:not(._readonly) .xpl-context__paste:hover {
        background: var(--hover);
    }

    .xpl-context__remove:hover {
        background-color: rgba(229, 64, 71, 0.03);
    }

    body._dark .xpl-context__remove:hover {
        background-color: var(--hover);
    }

    .xpl-context__paste:hover,
    .xpl-context._create .xpl-context__rename:hover,
    .xpl-context._create .xpl-context__copy:hover,
    .xpl-context._create .xpl-context__remove:hover,
    .xpl-context._multi .xpl-context__share:hover,
    .xpl-context._multi .xpl-context__rename:hover,
    .xpl-context._empty .xpl-context__share:hover,
    .xpl-context._readonly .xpl-context__share:hover,
    .xpl-context._readonly .xpl-context__unshare:hover,
    .xpl-context._readonly .xpl-context__rename:hover,
    .xpl-context._readonly .xpl-context__remove:hover,
    .xpl-context._promo .xpl-context__remove:hover {
        background-color: var(--hint);
    }

    .xpl-context._paste:not(._readonly) .xpl-context__paste:hover {
        cursor: pointer;
    }

    .xpl-side__item-link:not([data-access="none"]):hover {
        background: var(--hover);
    }

    .xpl-side__add:hover {
        opacity: 1;
    }

    .section__name:hover button,
    .program__name:hover span,
    .program__descr:hover span,
    .xpl-os-item:hover .xpl-os-item__grab,
    .xpl-os-post__wrapper:hover .xpl-os-post__grab,
    .xpl-os-item:hover .xpl-os-item__add-button {
        opacity: 1;
        visibility: visible;
    }

    .program__img input:hover+.program__img-plug {
        opacity: 1;
    }

    .program__nav-item:not(._active):hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .program__nav-item._closed:hover {
        background-color: transparent;
    }

    .program__nav-item._closed:hover .program-hint {
        opacity: 1;
        visibility: visible;
    }

    .program__nav-item:not(._closed):hover+.program__nav-item:before,
    .program__nav-item:not(._closed):hover:before {
        opacity: 0;
    }

    .xpl-list__header-btn:hover::after {
        opacity: 1;
    }

    .grid-item[data-type="program"]:not([data-access="none"]):hover .grid-item__img::before,
    .grid-item[data-type="program"]:not([data-access="none"]):hover .grid-item__img-text {
        opacity: 1;
        transition: all .2s .5s;
    }

    .grid-item[data-type="program"][data-access="none"]:hover .xpl-hint,
    .list-item[data-type="program"][data-access="none"]:hover .xpl-hint {
        opacity: 1;
        visibility: visible;
    }

    .tree-item__name:hover .tree-item__name-edit {
        opacity: 1;
        visibility: visible;
    }

    .grid-item__status:hover .grid-item__hint,
    .tree-item__btn:hover .tree-item__hint,
    .tree-lesson__name:hover>div {
        opacity: 1;
        visibility: visible;
    }

    .access-select__body .access-select__item:hover {
        background: var(--hover);
    }

    .xpl-share-info__back:hover {
        opacity: 1;
    }

    .xpl-crop__zoom-button:hover span {
        transform: scale(1.4);
    }

    .xpl-user__burger-item:hover {
        background-color: rgba(41, 92, 201, 0.06);
    }

    .xpl-content-plug__btn:hover + .xpl-hint {
        opacity: 1;
        visibility: visible;
    }
    .xpl-user-item__close>span:hover+.xpl-hint {
        opacity: 1;
        visibility: visible;
    }
    .xpl-bitrix._disabled:hover .xpl-hint {
        opacity: 1;
        visibility: visible;
    }
    .chk-block__switch:not(:disabled):hover,
    .chk-block__action:not(:disabled):hover,
    .chk-aside__back:hover {
        opacity: 1;
    }

    .chk-block__confirm:not(._accept):not(._refuse):disabled:hover .xpl-hint {
        opacity: 1;
        visibility: visible;
    }

    .xpl-side__list-hint>span:hover + .xpl-hint {
        opacity: 1;
        visibility: visible;
    }

    .xpl-gen._locked:hover .xpl-hint {
        opacity: 1;
        visibility: visible;
    }

    .xgl-select__item:not(:disabled):hover {
        background-color: var(--hover);
    }

    .xpl-user__program-complete:disabled:hover .hint {
        opacity: 1;
        visibility: visible;
    }

    .os-side-item:hover,
    .xpl-os-item__add-item:hover,
    .xpl-os-context__rename:hover,
    .xpl-os-context__copy:hover,
    .xpl-os-context._paste .xpl-os-context__paste:hover {
        background-color: #F9FAFD;
    }

    .xpl-os-context__remove:hover {
        background-color: #FDF9F9;
    }

    .xpl-os-context._sidebar .xpl-os-context__rename:hover,
    .xpl-os-context._sidebar .xpl-os-context__remove:hover,
    .xpl-os-context._program .xpl-os-context__rename:hover,
    .xpl-os-context._program .xpl-os-context__remove:hover,
    .xpl-os-context._general .xpl-os-context__copy:hover,
    .xpl-os-context._general .xpl-os-context__remove:hover {
        background-color: transparent;
    }

    .xpl-os-item__positions-add:hover {
        color: var(--text);
    }

    .xpl-os-item__positions-add:hover > span {
        background-color: var(--text);
    }
}

@media (max-width: 1366px) {
    .chk-block__action {
        margin-right: 24px;
    }
}

@media (max-width: 1280px) {
    .chk-block__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
    .chk-block__action {
        margin-right: 0;
    }
    .chk-block__refuse {
        margin-left: auto;
    }
    .chk-block__confirm {
        grid-column: span 2;
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .chk-block:not(:last-child) {
        margin-bottom: 10px;
    }
    .xpl-user-question__start {
        flex-direction: column;
    }
    .xpl-user-question__start-count {
        order: 2;
    }
    .xpl-user-question__start-info {
        margin-bottom: 20px;
    }
    .xpl-user-question__start-info span {
        margin-left: auto;
    }
    .xpl-user__list._hidden {
        display: initial;
    }
    .xpl-user__list + .xpl-user__list {
        margin-top: 0;
    }
}

@media (max-width: 560px) {
    .xpl-header__mode-switch[onclick]:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
}

@media (max-width: 480px) {
    .xpl-user-question__header,
    .xpl-user-question__footer {
        grid-gap: 10px;
    }
    .xpl-user-question__user {
        order: 1;
        grid-column: span 2;
    }
    .xpl-users-aside__user-date {
        order: 0;
        grid-column: span 2;
        text-align: left;
    }
    .xpl-user-question__content {
        order: 2;
    }
    .chk-block__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
    .chk-block__action {
        margin-right: 0;
    }
    .chk-block__refuse {
        margin-left: auto;
    }
    .chk-block__confirm {
        grid-column: span 2;
        width: 100%;
    }
}@font-face {
    font-family: Gilroy;
    font-display: swap;
    src: url("/fonts/Gilroy-Bold.woff2") format("woff2"), url("/fonts/Gilroy-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

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

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

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

@font-face {
    font-family: "icons";
    src: url("/fonts/icons.eot?jzoaq112");
    src: url("/fonts/icons.eot?jzoaq112#iefix") format("embedded-opentype"), url("/fonts/icons.woff?jzoaq112") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

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

:root {
    --color-primary: #295CC9;
}

input,
button,
a {
    font: inherit;
    color: inherit;
    outline: none;
}

button {
    cursor: pointer;
    border: none;
}

body {
    font-family: "Gilroy", sans-serif;
    font-size: 18px;
    line-height: 1.15;
    overflow-x: hidden;
}

._ns {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

._container {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

._404-header {
    margin-bottom: 72px;
    padding: 22px 0;
}

._404-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

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

._404-header__logo-icon {
    --s: 42px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    background-color: #0B1C35;
    -webkit-mask-image: url("/img/error/logo.svg");
    mask-image: url("/img/error/logo.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

._404-header__logo-text {
    font-weight: 600;
    font-size: 30px;
    line-height: 1.15;
}


._404-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
}

._404-main__img {
    --s: 750px;

    width: var(--s);
    height: calc(var(--s) / 3 * 2);
    margin-bottom: 30px;
}

._404-main__img svg {
    display: block;
    width: 100%;
    height: 100%;
}

._404-main__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._404-main__title {
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.15;
    text-align: center;
}

._404-main__text {
    max-width: 950px;
    width: 100%;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 1.15;
    text-align: center;
}

._404-main__btn,
._404-main__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 70px;
    width: 260px;
    background-color: #295CC9;
    color: #FFFFFF;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

._404-main__btn span,
._404-main__link span {
    --s: 24px;

    width: var(--s);
    height: var(--s);
    background-color: #FFFFFF;
    -webkit-mask-image: url("/img/error/arrow.svg");
    mask-image: url("/img/error/arrow.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

._404-main__link {
    text-decoration: none;
}

._404-main__link span {
    -webkit-mask-image: url("/img/error/login.svg");
    mask-image: url("/img/error/login.svg");
}

@media (max-width: 1380px) {
    ._404-header__logo-icon {
        --s: 38px;
    }

    ._404-header__logo-text {
        font-size: 26px;
        line-height: 1;
    }

    ._404-header__user-name {
        font-size: 18px;
        line-height: 1;
    }

    ._404-header__quit {
        --s: 30px;
    }
}

@media (max-width: 1024px) {
    ._404-main__img {
        --s: 650px;
    }

    ._404-main__title {
        font-size: 28px;
        line-height: 1.15;
    }

    ._404-main__text {
        font-size: 16px;
        line-height: 1.25;
    }

    ._404-main__btn {
        height: 60px;
        min-height: auto;
        font-size: 18px;
        line-height: 1;
    }
}

@media (max-width: 560px) {
    ._404-main__img {
        --s: 455px;
    }
}

@media (max-width: 480px) {
    ._404-main__img {
        width: auto;
    }
}

@media (max-width: 428px) {
    ._404-main__btn {
        width: 100%;
    }
}input::placeholder,
textarea::placeholder {
    font: inherit;
    color: inherit;
    opacity: .5;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font: inherit;
    color: inherit;
    opacity: .5;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    font: inherit;
    color: inherit;
    opacity: .5;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    font: inherit;
    color: inherit;
    opacity: .5;
}

button {
    cursor: pointer;
}

._sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

._ns {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

._one-line,
._two-lines,
._three-lines {
    outline: none;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
}

._one-line *,
._two-lines *,
._three-lines * {
    outline: none;
}

._two-lines {
    -webkit-line-clamp: 2;
}

._three-lines {
    -webkit-line-clamp: 3;
}

._icon {
    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

._avatar {
    --s: 36px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #FFFFFF;
    border-radius: 50%;
    text-transform: uppercase;
}

._avatar[style^="background-image"] {
    color: transparent;
}

._scroll {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accentOpacity) var(--mainBg);
}

._scroll::-webkit-scrollbar {
    width: 8px;
}

._scroll::-webkit-scrollbar-track {
    background-color: var(--mainBg);
    border-radius: 8px;
}

._scroll::-webkit-scrollbar-thumb {
    background-color: var(--accentOpacity);
    border-radius: 8px;
}

.select {
    position: relative;
    font-size: 18px;
    line-height: 1.15;
}

.select-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid #EEEFF1;
}

.select._active .select-header {
    border-radius: 10px 10px 0 0;
}

.select._top._active .select-header {
    border-radius: 0 0 10px 10px;
}

.select-header__text {
    flex: 1;
    text-align: left;
}

.select-header__search {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    left: 0;
    top: 0;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    border: none;
    z-index: 2;
    visibility: hidden;
}

.select._search .select-header__search {
    visibility: visible;
}

.select-header__icon {
    --s: 20px;

    flex-shrink: 0;
    background-color: #333333;
    -webkit-mask-image: url("/img/common/angle-black.svg");
    mask-image: url("/img/common/angle-black.svg");
    transform: rotateZ(90deg);
    transition: all .2s;
}

.select._active .select-header__icon {
    transform: rotateZ(270deg);
}

.select-body {
    position: absolute;
    display: none;
    width: 100%;
    max-height: 134px;
    padding: 10px;
    left: 0;
    top: 51px;
    background-color: #FFFFFF;
    border-radius: 0 0 10px 10px;
    border: 1px solid #EEEFF1;
    border-top: none;
    overflow: auto;
    scrollbar-width: none;
    z-index: 2;
}

.select._top .select-body {
    bottom: 51px;
    top: auto;
    border-radius: 10px 10px 0 0;
    border-top: 1px solid #EEEFF1;
    border-bottom: none;
}

.select-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.select._active .select-body {
    display: block;
}

.select-item,
.select-empty {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 35px;
    padding: 4px 10px;
    background-color: transparent;
    border-radius: 5px;
    border: none;
}

.select-item:not(:last-child) {
    margin-bottom: 4px;
}

.select-item._hidden {
    display: none;
}

.select-empty {
    display: none;
}

.select-body._empty .select-empty {
    display: flex;
}

.user-profile__wrapper,
.modal-common__wrapper,
.modal-mini__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(51, 51, 51, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 150;
}

.user-profile__wrapper {
    z-index: 125;
}

.modal-mini__wrapper {
    z-index: 200;
}

.user-profile__wrapper._active,
.modal-common__wrapper._active,
.modal-mini__wrapper._active {
    opacity: 1;
    visibility: visible;
}

.modal-common {
    position: absolute;
    width: min(75vw, 1440px);
    padding: 20px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    background-color: #F7F8FA;
    border-radius: 20px;
    transform: translateX(200%);
    transition: all 0.2s;
}

.modal-common._loading::before,
.crp._cropping::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    border-radius: 20px;
    z-index: 10;
}

.crp._cropping::before {
    background-color: rgba(255, 255, 255, .8);
}

.modal-common._loading::after,
.crp._cropping::after {
    --s: 150px;

    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(51, 51, 51, .75);
    -webkit-mask-image: url("/img/chk/loader.svg?3");
    mask-image: url("/img/chk/loader.svg?3");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    z-index: 11;
}

.modal-common._active {
    transform: translate(0);
}

.modal-common__back {
    position: sticky;
    display: none;
    align-items: center;
    height: 60px;
    padding: 0 18px;
    margin: 0 -10px 10px;
    top: 0;
    box-shadow: 0 4px 4px rgba(221, 221, 221, 0.19);
    background-color: #FFFFFF;
    border-radius: 0 0 20px 20px;
    z-index: 2;
}

.modal-common__back-button {
    display: flex;
    align-items: center;
    height: 30px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    background-color: transparent;
    color: rgba(51, 51, 51, .5);
    border: none;
}

.modal-common__back-button>span {
    --s: 24px;

    margin-right: 24px;
    background-color: rgba(51, 51, 51, .5);
    -webkit-mask-image: url('/img/common/angle-black.svg');
    mask-image: url('/img/common/angle-black.svg');
    transform: rotateZ(180deg);
}

.modal-mini {
    position: absolute;
    display: flex;
    flex-direction: column;
    max-width: 728px;
    min-height: 580px;
    width: 100%;
    padding: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.modal-mini._active {
    opacity: 1;
    visibility: visible;
}

.modal-mini__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.modal-mini__head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(41, 92, 201, 0.00) 0%, rgba(41, 92, 201, 0.03) 100%);
    border-radius: 10px;
}

.xpl-os-show__head.modal-mini__head {
    height: 250px;
}

.modal-mini__image {
    --s: 176px;

    font-weight: 600;
    font-size: 60px;
    line-height: 1.15;
}

.modal-mini__picture {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover;
}

.modal-mini__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-mini__main {
    position: relative;
    padding: 24px 0;
    text-align: center;
}

.modal-mini__complete {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 24px 0;
    top: 0;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    z-index: 2;
}

.modal-mini__main._complete .modal-mini__complete {
    visibility: visible;
}

.modal-mini__complete-icon {
    --s: 43px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-bottom: 6px;
    background-color: #54B268;
    -webkit-mask-image: url("/img/xpl/check-circle.svg");
    mask-image: url("/img/xpl/check-circle.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.modal-mini__complete-title {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 28px;
    line-height: normal;
}

.modal-mini__complete-text {
    margin-bottom: auto;
    font-size: 18px;
    line-height: 1.15;
}

.modal-mini__complete-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 176px;
    min-height: 50px;
    padding: 8px 12px;
    margin-top: 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    background-color: #295CC9;
    color: #FFFFFF;
    border-radius: 10px;
    border: none;
    text-decoration: none;
}

.modal-mini__main-title {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
}

.modal-mini__main-text {
    font-size: 18px;
    line-height: 1.15;
}

.xpl-os-show .modal-mini__main-text span {
    font-weight: 600;
}

.modal-mini__label {
    display: block;
    width: 100%;
    margin-top: 36px;
}

.modal-mini__label input {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 10px;
    border: 1px solid #EAEAEA;
}

.modal-mini__checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.modal-mini__checkbox > input {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 10px;
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    border: 1px solid rgba(51, 51, 51, .25);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.modal-mini__checkbox > input:checked {
    background-image: url("/img/common/checkmark.svg");
    background-color: #295CC9;
    border-color: #295CC9;
}

.modal-mini__checkbox-text {
    font-size: 14px;
    line-height: 16px;
    opacity: .5;
}

.modal-mini__checkbox > input:checked + .modal-mini__checkbox-text {
    opacity: 1;
}

.modal-mini__form {
    margin-top: 15px;
}

.modal-mini__form._error .modal-mini__form-error {
    visibility: visible;
}

.modal-mini__form-label {
    position: relative;
    display: block;
    margin-bottom: 10px;
}

.modal-mini__input {
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid #EEEFF1;
}

.modal-mini__form-eye {
    --s: 24px;

    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
}

.modal-mini__form-eye span {
    --s: 20px;

    background-color: #333333;
    -webkit-mask-image: url("/img/adm/adm-eye.svg");
    mask-image: url("/img/adm/adm-eye.svg");
}

.modal-mini__form-label._active .modal-mini__form-eye span {
    -webkit-mask-image: url("/img/adm/adm-eye-crossed.svg");
    mask-image: url("/img/adm/adm-eye-crossed.svg");
}

.modal-mini__form-error {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1;
    color: #E54047;
    visibility: hidden;
}

.modal-mini__form-error > span:nth-child(1) {
    --s: 24px;

    margin-right: 10px;
    background-color: #E54047;
    -webkit-mask-image: url("/img/adm/adm-info.svg");
    mask-image: url("/img/adm/adm-info.svg");
}

.modal-mini__footer {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.modal-mini__footer-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 176px;
    min-height: 50px;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    background-color: #295CC9;
    color: #FFFFFF;
    border-radius: 10px;
    border: none;
    text-decoration: none;
}

.modal-mini__footer-button:not(:last-child) {
    margin-right: 22px;
}

.modal-mini__footer-button.modal-mini__footer-cancel {
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
}

.crp {
    background-color: #FFFFFF;
}

.crp__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.crp__title {
    margin-bottom: 57px;
    font-weight: 600;
    line-height: 1.15;
}

.crp__grid {
    display: flex;
    flex: 1;
    margin-bottom: 85px;
}

.crp__main {
    flex: 1;
    margin-right: 24px;
}

.crp__sidebar {
    flex-shrink: 0;
}

.crp__image {
    height: calc(100vh - 315px);
    overflow: hidden;
}

.crp__image-inner {
    padding-bottom: calc(734 / 927 * 100%);
}

.crp__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crp__sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.crp__preview {
    --s: 200px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-bottom: 20px;
    border-radius: 50%;
    border: 1px solid #f7f8fa;
    overflow: hidden;
}

.crp__restart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 50px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    background-color: #f7f8fa;
    color: rgba(51, 51, 51, .5);
    border-radius: 10px;
    border: none;
}

.crp__restart input {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 0;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.crp__sidebar-opacity {
    width: 380px;
}

.crp__footer {
    display: flex;
    align-self: flex-end;
    flex-shrink: 0;
}

.crp__button {
    width: 176px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    background-color: #295CC9;
    color: #FFFFFF;
    border-radius: 10px;
    border: none;
}

.crp__button:not(:last-child) {
    margin-right: 22px;
}

.crp__cancel {
    background-color: #f7f8fa;
    color: rgba(51, 51, 51, .5);
}

.user-profile {
    padding: 20px;
}

.user-profile,
.user-profile._loading::before {
    border-radius: 0 20px 20px 20px;
}

.user-profile:only-child,
.user-profile:only-child._loading::before {
    border-radius: 20px;
}

.user-profile:only-child .up-close {
    display: none;
}

.up-close {
    background-color: #F7F8FA;
    border-radius: 4px 0 0 4px;
    transition: all .2s;
    cursor: pointer;
}

.up-close._hidden {
    display: none;
}

.user-profile:not(:last-child) .up-close {
    background-color: #AEAFB0;
}

.up-close span {
    --s: 24px;

    background-color: rgba(51, 51, 51, .5);
    -webkit-mask-image: url("/img/adm/adm-close.svg");
    mask-image: url("/img/adm/adm-close.svg");
}

.up-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 40px;
    top: 0;
    left: -35px;
}

.adm-modal__grid {
    display: grid;
    grid-template-columns: 400px auto;
    grid-gap: 20px;
    height: 100%;
}

.adm-modal__aside {
    position: relative;
    display: flex;
    flex-direction: column;
}

.adm-modal__aside,
.adm-modal__main {
    height: calc(100vh - 80px);
}

.adm-modal__aside-header {
    position: sticky;
    margin-bottom: 20px;
    top: 20px;
}

.adm-modal__aside-header,
.adm-modal__aside-main {
    display: grid;
    grid-gap: 20px;
}

.adm-modal__aside-footer {
    margin-top: 20px;
}

.adm-modal__box {
    background-color: #FFFFFF;
    border-radius: 10px;
}

.adm-modal__aside-footer .adm-modal__box {
    padding: 20px 24px;
}

.adm-modal__main .adm-modal__box {
    height: 100%;
}

.cp-main .adm-modal__box {
    height: auto;
}

.up-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px 32px;
}

.up-head__start {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
}

.up-head__status {
    padding: 4px 12px;
    font-size: 14px;
    line-height: 1.15;
    background-color: rgba(51, 51, 51, .25);
    color: #FFFFFF;
    border-radius: 4px;
}

.up-head__status._active {
    background-color: #54B268;
}

.up-head__options {
    position: relative;
    display: flex;
}

.up-head__options-btn,
.admp-options__button {
    --s: 24px;

    background-color: #333333;
    -webkit-mask-image: url("/img/adm/adm-dots.svg");
    mask-image: url("/img/adm/adm-dots.svg");
    border: none;
}

.up-head__options-body,
.admp-options__body {
    position: absolute;
    width: 230px;
    padding: 8px;
    font-size: 16px;
    line-height: 1.15;
    top: 0;
    right: 0;
    transform: translateX(-20%);
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    box-shadow: 0 4px 9px 0 rgba(51, 51, 51, 0.09);
    background-color: #FFFFFF;
    border-radius: 5px;
    z-index: 3;
}

.up-head__options._active .up-head__options-body,
.admp-options._active .admp-options__body {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.up-head__options-body button,
.admp-options__body-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px;
    background-color: transparent;
    border-radius: 5px;
    border: none;
}

.up-head__options-body button:not(:last-child),
.admp-options__body-btn:not(:last-child) {
    margin-bottom: 4px;
}

.up-head__options-body button span,
.admp-options__body-btn span {
    --s: 20px;

    margin-right: 8px;
    background-color: #333333;
}

.up-head__options-body button[data-type="remove"] {
    color: #E54047;
}

.up-head__options-body button[data-type="login"] span {
    -webkit-mask-image: url("/img/adm/adm-user.svg");
    mask-image: url("/img/adm/adm-user.svg");
}

.up-head__options-body button[data-type="pass"] span {
    -webkit-mask-image: url("/img/adm/adm-pass.svg");
    mask-image: url("/img/adm/adm-pass.svg");
}

.up-head__options-body button[data-type="block"] span {
    -webkit-mask-image: url("/img/adm/adm-lock.svg");
    mask-image: url("/img/adm/adm-lock.svg");
}

.up-head__options-body button[data-type="unblock"] span {
    -webkit-mask-image: url("/img/adm/adm-unlock.svg");
    mask-image: url("/img/adm/adm-unlock.svg");
}

.up-head__options-body button[data-type="remove"] span {
    background-color: #E54047;
    -webkit-mask-image: url("/img/adm/adm-remove.svg");
    mask-image: url("/img/adm/adm-remove.svg");
}

.up-head__img {
    --s: 130px;

    position: relative;
    margin-bottom: 12px;
    font-size: 36px;
    line-height: 1.15;
}

.up-head__img[style*="background-image"] {
    font-size: 0;
}

.up-head__img input {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 0;
    left: 0;
    top: 0;
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.up-head__img input::-webkit-file-upload-button {
    display: none;
}

.up-head__img input:disabled {
    cursor: auto;
}

.up-head__name {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.15;
    text-align: center;
}

.up-head__login {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: var(--textOpacity);
}

.up-head__row {
    display: flex;
    margin: -6px;
}

.up-head__button {
    padding: 4px 8px;
    margin: 6px;
    font-size: 14px;
    line-height: 1.15;
    background-color: #295CC9;
    color: #FFFFFF;
    border-radius: 4px;
    border: none;
}

.up-head__button[data-type="c"] {
    background-color: #4174E2;
}

.up-head__button[data-type="e"] {
    background-color: #61A9FE;
}

.up-head__button._disabled {
    background-color: var(--bodyBg);
    color: var(--textOpacity);
}

.up-head__button:disabled {
    cursor: auto;
}

.up-switcher {
    padding: 8px;
}

.up-switcher__inner {
    position: relative;
    display: flex;
    margin: 0 -2px;
}

.up-switcher__btn {
    flex: 1;
    padding: 10px;
    margin: 0 2px;
    font-size: 16px;
    line-height: 1.15;
    background-color: transparent;
    color: rgba(51, 51, 51, .5);
    border: none;
    z-index: 2;
}

.up-switcher__glider {
    position: absolute;
    width: calc(50% - 2px);
    height: 100%;
    left: 0;
    top: 0;
    background-color: #EEEFF1;
    border-radius: 10px;
    transition: all .2s;
    z-index: 1;
}

.up-switcher[data-tab="2"] .up-switcher__glider {
    transform: translateX(calc(100% + 4px));
}

.up-menu {
    display: none;
}

.adm-modal__aside-content {
    flex: 1;
    border-radius: 10px;
    overflow: auto;
    scrollbar-width: none;
}

.adm-modal__aside-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.up-data {
    padding: 16px 20px;
}

.adm-modal__label {
    display: flex;
    flex-direction: column;
}

.adm-modal__label-caption {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1;
    color: rgba(51, 51, 51, .5);
}

.adm-modal__label-data {
    display: block;
    flex: 1;
    font-size: 18px;
    line-height: 1.15;
}

input.adm-modal__label-data {
    height: 50px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid #EEEFF1;
}

input:disabled.adm-modal__label-data {
    display: block;
    flex: 1;
    padding: 0;
    font-size: 18px;
    line-height: 1.15;
    background-color: transparent;
    border-radius: 0;
    border: 0;
}

.cp-subdomain._error input.adm-modal__label-data {
    border-color: rgba(229, 64, 71, 0.50);
}

.adm-modal__select-header:disabled {
    height: auto;
    padding: 0;
    border: none;
    cursor: auto;
}

.adm-modal__label:not(:last-child) span.adm-modal__label-data,
.adm-modal__label:not(:last-child) .adm-modal__select-header:disabled {
    margin-bottom: 24px;
}

.adm-modal__label:not(:last-child) input.adm-modal__label-data,
.adm-modal__label:not(:last-child) .adm-modal__select-header {
    margin-bottom: 16px;
}

.adm-modal__select-header:disabled .adm-modal__select-icon {
    display: none;
}

.adm-modal__main {
    display: flex;
    flex-direction: column;
}

/*.adm-modal__main .xpl-user__main-body {*/
/*    background-color: #FFFFFF;*/
/*    border-radius: 0 0 10px 10px;*/
/*}*/

.timeline {
    padding: 16px 24px 24px;
    overflow: auto;
    scrollbar-width: none;
}

.timeline::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.timeline-plug {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #fff;
}

.timeline-plug__img {
    max-width: 500px;
    width: 100%;
    margin-bottom: 32px;
}

.timeline-plug__img-inner {
    position: relative;
    padding-bottom: calc(373 / 500 * 100%);
}

.timeline-plug__img-inner > img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline-plug__title {
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
}

.timeline-plug__text {
    max-width: 586px;
    font-size: 20px;
    line-height: 1.15;
    text-align: center;
}

.timeline-day__title {
    padding: 8px 0;
    font-size: 18px;
    line-height: 1.15;
    background-color: #FFFFFF;
    color: rgba(51, 51, 51, .5);
}

.timeline-day__list {
    position: relative;
    padding: 24px 0;
}

.timeline-day__list::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    left: 18px;
    top: 0;
    background-color: #EEEFF1;
}

.timeline-day:last-child .timeline-day__list {
    padding-bottom: 0;
}

.timeline-item {
    --c: #EEEEF1;

    display: flex;
}

.timeline-item:not(:last-child) {
    margin-bottom: 30px;
}

.timeline-item[data-status="complete"] {
    --c: rgba(84, 178, 104, 0.5);
}

.timeline-item[data-status="fail"] {
    --c: rgba(229, 64, 71, 0.5);
}

.timeline-item__icon {
    --s: 36px;

    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    margin-right: 24px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: 1px solid var(--c);
}

.timeline-item__icon span {
    background-color: var(--c);
}

.timeline-item[data-type="tariff"] .timeline-item__icon span {
    --s: 22px;

    -webkit-mask-image: url("/img/adm/adm-diamond.svg");
    mask-image: url("/img/adm/adm-diamond.svg");
}

.timeline-item[data-type="program"] .timeline-item__icon span {
    --s: 20px;

    -webkit-mask-image: url("/img/adm/adm-folder.svg");
    mask-image: url("/img/adm/adm-folder.svg");
}

.timeline-item[data-type="user"] .timeline-item__icon span {
    --s: 20px;

    -webkit-mask-image: url("/img/adm/adm-clients.svg");
    mask-image: url("/img/adm/adm-clients.svg");
}

.timeline-item[data-type="message"] .timeline-item__icon span {
    --s: 20px;

    -webkit-mask-image: url("/img/adm/adm-message.svg");
    mask-image: url("/img/adm/adm-message.svg");
}

.timeline-item[data-type="study"] .timeline-item__icon span {
    --s: 20px;

    -webkit-mask-image: url("/img/adm/adm-study.svg");
    mask-image: url("/img/adm/adm-study.svg");
}

.timeline-item[data-type="comment"] .timeline-item__icon span {
    --s: 22px;

    -webkit-mask-image: url("/img/adm/adm-comment.svg");
    mask-image: url("/img/adm/adm-comment.svg");
}

.timeline-item[data-type="warning"] .timeline-item__icon span {
    --s: 22px;

    -webkit-mask-image: url("/img/adm/adm-warning.svg");
    mask-image: url("/img/adm/adm-warning.svg");
}

.timeline-item__content {
    flex: 1;
}

.timeline-item__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.timeline-item__header-main {
    display: flex;
    flex: 1;
    align-items: center;
}

.timeline-item__user {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.timeline-item__user-image {
    margin-right: 10px;
}

.timeline-item__user-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.15;
}

.timeline-item__user-pos,
.timeline-item__time {
    font-size: 14px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.timeline-item__header-angle {
    --s: 24px;

    margin: 0 14px;
    background-color: #333333;
    -webkit-mask-image: url("/img/common/angle-black.svg");
    mask-image: url("/img/common/angle-black.svg");
}

.timeline-item__time {
    margin-left: 24px;
    white-space: nowrap;
}

.timeline-item__title {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.15;
}

.timeline-item__text {
    font-size: 16px;
    line-height: 1.15;
}

.timeline-item__change-text,
.timeline-item__tasks-text,
.timeline-item__profile-text,
.timeline-item__link-text {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.15;
}

.timeline-item__change-row {
    display: flex;
    align-items: center;
}

.timeline-item__change-item {
    padding: 10px 12px;
    font-size: 18px;
    line-height: 1.15;
    background-color: #F7F8FA;
    color: rgba(51, 51, 51, .5);
    border-radius: 10px;
}

.timeline-item__change-arrow {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin: 0 8px;
    background-image: url('/img/adm/adm-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.timeline-item__tasks-button {
    padding: 0;
    font-size: 16px;
    line-height: 1;
    background-color: transparent;
    color: rgba(51, 51, 51, .5);
    border: none;
    text-decoration: underline;
}

.timeline-item__table {
    display: none;
    padding: 18px 20px;
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.15;
    background-color: #F7F8FA;
    border-radius: 10px;
}

.timeline-item__table-head,
.timeline-item__table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 70px;
    grid-gap: 10px;
    font-size: 16px;
    line-height: 1.15;
}

.timeline-item__table-head p:nth-child(3),
.timeline-item__table-row p:nth-child(3) {
    text-align: center;
}

.timeline-item__table-head {
    margin-bottom: 20px;
    font-weight: 600;
}

.timeline-item__table-row:not(:last-child) {
    margin-bottom: 20px;
}

.timeline-item__table-row .timeline-item__user {
    align-items: flex-start;
}

.timeline-item__profile-btn,
.timeline-item__link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 36px;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    background-color: #DFE7F7;
    color: #295CC9;
    border-radius: 8px;
    border: none;
    text-decoration: none;
}

.timeline-item__comment {
    padding: 20px;
    font-size: 18px;
    line-height: 1.15;
    border-radius: 6.5px;
    background-color: #F7F8FA;
}

.cp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 24px 35px;
}

.cp-head__image {
    --s: 130px;

    margin-bottom: 10px;
}

.cp-head__title {
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
}

.cp-head__link {
    font-size: 16px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.cp-data {
    padding: 14px 20px;
}

.cp-subdomain._error {
    color: #E54047;
}

.cp-subdomain__row {
    display: flex;
    align-items: center;
}

.cp-subdomain__caption {
    margin-left: 10px;
    font-size: 18px;
    line-height: 1.15;
    color: rgba(51, 51, 51, .5);
}

.cp-subdomain__error,
.cp-subdomain__saved {
    display: none;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.15;
    color: #E54047;
}

.cp-subdomain__saved {
    color: #54B268;
}

.cp-subdomain._saved .cp-subdomain__saved,
.cp-subdomain._error .cp-subdomain__error {
    display: block;
}

.cp-subdomain__button {
    display: none;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    background-color: rgba(41, 92, 201, 0.15);
    color: #295CC9;
    border-radius: 10px;
    border: none;
}

.cp-subdomain._ready .cp-subdomain__button {
    display: block;
}

.cp-subdomain__button:disabled {
    opacity: .5;
    cursor: auto;
}

.cp-aside-manager__user {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.cp-aside-manager__user-image {
    --s: 42px;

    margin-right: 14px;
    font-size: 16px;
    line-height: 1.15;
}

.cp-aside-manager__user-name {
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.15;
}

.cp-aside-manager__user-pos {
    font-size: 16px;
    line-height: 1.15;
    color: #999999;
}

.cp-aside-manager__phone,
.cp-aside-manager__email {
    position: relative;
    display: block;
    padding-left: 50px;
    font-size: 18px;
    line-height: 1.15;
    color: inherit;
    text-decoration: none;
    word-break: break-word;
}

.cp-aside-manager__phone {
    margin-bottom: 15px;
}

.cp-aside-manager__phone::before,
.cp-aside-manager__email::before {
    --s: 24px;

    position: absolute;
    content: '';
    width: var(--s);
    height: var(--s);
    left: 0;
    top: -2px;
    background-color: #333333;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.cp-aside-manager__phone::before {
    -webkit-mask-image: url("/img/adm/adm-call.svg");
    mask-image: url("/img/adm/adm-call.svg");
}

.cp-aside-manager__email::before {
    -webkit-mask-image: url("/img/adm/adm-mail.svg");
    mask-image: url("/img/adm/adm-mail.svg");
}

.cp-main {
    overflow: auto;
    scrollbar-width: none;
}

.cp-main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.cp-main-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.cp-main-header__tariff {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.cp-main-header__tariff-icon {
    --s: 60px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    margin-right: 20px;
    border-radius: 50%;
}

.cp-main-header__tariff[data-tariff="1"] .cp-main-header__tariff-icon {
    background-color: rgba(154, 113, 246, 0.15);
}

.cp-main-header__tariff[data-tariff="2"] .cp-main-header__tariff-icon {
    background-color: rgba(103, 167, 248, 0.15);
}

.cp-main-header__tariff[data-tariff="3"] .cp-main-header__tariff-icon {
    background-color: rgba(41, 92, 201, 0.15);
}

.cp-main-header__tariff[data-tariff="4"] .cp-main-header__tariff-icon {
    background-color: rgba(27, 58, 104, 0.15);
}

.cp-main-header__tariff-icon > img {
    --s: 44px;

    width: var(--s);
    height: var(--s);
}

.cp-main-header__tariff-name {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
}

.cp-main-header__tariff-date,
.cp-main-header__days-footer,
.cp-main-header__stat-footer {
    font-size: 14px;
    line-height: 1;
    color: var(--textOpacity);
}

.cp-main-header__days,
.cp-main-header__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 40px;
}

.cp-main-header__days._error .cp-main-header__days-header,
.cp-main-header__stat._error .cp-main-header__stat-header {
    color: #E54047;
}

.cp-main-header__days-header,
.cp-main-header__stat-header {
    margin-bottom: 4px;
    font-size: 20px;
    line-height: 1;
}

.cp-main-header__days-header span,
.cp-main-header__stat-header span {
    font-weight: 600;
}

.cp-main__body {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.cp-main-plug {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cp-main-plug__image {
    max-width: 385px;
    width: 100%;
    margin-bottom: 25px;
}

.cp-main-plug__image-inner {
    position: relative;
    padding-bottom: calc(222 / 385 * 100%);
}

.cp-main-plug__image-inner > img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.cp-main-plug__title {
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
}

.cp-main-plug__text {
    max-width: 440px;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.15;
}

.cp-main-plug__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 176px;
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    background-color: var(--accent);
    color: #FFFFFF;
    border-radius: 10px;
    text-decoration: none;
}

/*.cp-staff {*/
/*    padding: 12px 24px 24px;*/
/*    margin-bottom: 20px;*/
/*}*/

/*.cp-staff__title {*/
/*    margin-bottom: 46px;*/
/*    font-size: 18px;*/
/*    line-height: 1.15;*/
/*    color: rgba(51, 51, 51, .5);*/
/*}*/

/*.cp-staff__count {*/
/*    display: flex;*/
/*    align-items: flex-end;*/
/*    margin-bottom: 20px;*/
/*}*/

/*.cp-staff__count span {*/
/*    margin-right: 10px;*/
/*    font-weight: 600;*/
/*    font-size: 30px;*/
/*    line-height: 0.835;*/
/*}*/

/*.cp-staff__count p {*/
/*    font-size: 16px;*/
/*    line-height: 0.835;*/
/*    color: rgba(51, 51, 51, .5);*/
/*}*/

/*.cp-staff__row {*/
/*    display: grid;*/
/*    align-items: center;*/
/*    grid-template-columns: 120px auto 100px;*/
/*    grid-gap: 20px;*/
/*    font-size: 16px;*/
/*    line-height: 1.15;*/
/*}*/

/*.cp-staff__row:not(:last-child) {*/
/*    margin-bottom: 18px;*/
/*}*/

/*.cp-staff__row-line {*/
/*    height: 10px;*/
/*    border-radius: 10px;*/
/*}*/

/*.cp-staff__row-count {*/
/*    text-align: right;*/
/*}*/

/*.cp-staff__row-count span {*/
/*    color: rgba(51, 51, 51, .5);*/
/*}*/

/*.cp-finance {*/
/*    padding: 13px 24px 24px;*/
/*}*/

/*.cp-finance__title {*/
/*    margin-bottom: 30px;*/
/*    font-size: 18px;*/
/*    line-height: 1.15;*/
/*    color: rgba(51, 51, 51, .5);*/
/*}*/

/*.cp-finance__row {*/
/*    display: grid;*/
/*    grid-template-columns: 2fr 1.5fr 1fr 1fr 1.5fr;*/
/*    align-items: center;*/
/*    grid-gap: 20px;*/
/*    font-size: 16px;*/
/*    line-height: 1.15;*/
/*}*/

/*.cp-finance__row:not(:last-child) {*/
/*    margin-bottom: 20px;*/
/*}*/

/*.cp-finance__column._green {*/
/*    color: #54B268;*/
/*}*/

/*.cp-finance__user {*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/*.cp-finance__user-img {*/
/*    --s: 36px;*/

/*    margin-right: 10px;*/
/*}*/

/*.cp-finance__user-name {*/
/*    font-weight: 600;*/
/*    font-size: 18px;*/
/*    line-height: 1.15;*/
/*}*/

/*.cp-finance__user-link {*/
/*    font-size: 14px;*/
/*    line-height: 1.15;*/
/*    color: rgba(51, 51, 51, .5);*/
/*}*/

.chat__inner {
    display: grid;
    grid-template-columns: 300px auto;
    grid-gap: 20px;
    height: 100%;
    font-size: 16px;
    line-height: 1.15;
}

.chat-aside {
    padding: 15px 20px 0;
    background-color: #fff;
    border-radius: 10px;
}

.chat-aside__header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.chat-aside__title {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.15;
}

.chat-aside__search {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-left: auto;
    background-color: rgba(51, 51, 51, .5);
    -webkit-mask-image: url("/img/xpl/search.svg");
    mask-image: url("/img/xpl/search.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.chat-aside__list {
    margin: 0 -10px;
}

.chat-aside__item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
}

.chat-aside__item._active {
    background-color: #F7F8FA;
}

.chat-aside__item:not(:last-child) {
    margin-bottom: 4px;
}

.chat-aside__user {
    margin-right: auto;
}

.chat-user {
    display: flex;
    align-items: center;
}

.chat-user__image {
    --s: 40px;

    margin-right: 14px;
    font-size: 16px;
    line-height: 1;
}

.chat-user__name {
    margin-bottom: 4px;
    font-weight: 500;
}

.chat-user__pos {
    font-size: 14px;
    line-height: 1;
    color: rgba(51, 51, 51, .5);
}

.chat-aside__item-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 16px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    background-color: #EAEAEA;
    color: rgba(51, 51, 51, .5);
    border-radius: 8px;
}

.chat-aside__item-count._new {
    background-color: #E54047;
    color: #fff;
}

.chat-main {
    display: flex;
    flex-direction: column;
}

.chat-main__header {
    display: flex;
    padding: 10px 24px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.chat-main__header-user {
    margin-right: 14px;
}

.chat-main__header-mute {
    --s: 24px;

    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    background-color: var(--textOpacity);
    -webkit-mask-image: url("/img/chat/chat-mute.svg");
    mask-image: url("/img/chat/chat-mute.svg");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
}

.chat-main__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 10px;
}

.chat-main__body-days {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
}

.chat-day__title {
    margin-bottom: 20px;
    color: rgba(51, 51, 51, .5);
    text-align: center;
}

.chat-item {
    display: flex;
    padding-right: calc(134 / 756 * 100%);
    padding-left: 0;
}

.chat-item[data-type="self"] {
    padding-left: calc(134 / 756 * 100%);
    padding-right: 0;
}

.chat-item__main {
    display: flex;
    flex-direction: column;
    order: 2;
}

.chat-item[data-type="self"] .chat-item__main {
    order: 0;
}

.chat-item__message {
    padding: 16px;
    margin-bottom: 4px;
    background-color: rgba(41, 92, 201, 0.15);
    border-radius: 0 30px 30px 30px;
}

.chat-item[data-type="self"] .chat-item__message {
    background-color: #F9FAFD;
    border-radius: 30px 0 30px 30px;
}

.chat-item__time {
    font-size: 14px;
    line-height: normal;
    color: rgba(51, 51, 51, .5);
}

.chat-item[data-type="self"] .chat-item__time {
    align-self: flex-end;
}

.chat-item__user {
    --s: 40px;

    margin-right: 14px;
    margin-left: 0;
    font-size: 16px;
    line-height: 1;
}

.chat-item[data-type="self"] .chat-item__user {
    margin-left: 14px;
    margin-right: 0;
}

.chat-main__new {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.chat-main__new::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(51, 51, 51, .15);
}

.chat-main__new-item {
    position: relative;
    padding: 0 20px;
    background-color: #fff;
    color: rgba(51, 51, 51, .5);
    z-index: 2;
}

.chat-text {
    padding: 17px;
    margin-top: 40px;
    background-color: #F9FAFD;
    border-radius: 10px;
}

.chat-text__inner {
    display: flex;
}

.chat-text__attach {
    --s: 24px;

    position: relative;
    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
    margin-right: 20px;
    background-color: #333;
    -webkit-mask-image: url("/img/chat/chat-attach.svg?1");
    mask-image: url("/img/chat/chat-attach.svg?1");
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    opacity: .5;
    transition: all .2s;
}

.chat-text__attach > input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-size: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.chat-text__attach > input::-webkit-file-upload-button {
    display: none;
}

.chat-text__main {
    flex: 1;
    align-self: center;
}

.chat-text__input {
    outline: none;
}

.chat-text__input:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: rgba(51, 51, 51, 0.5);
    pointer-events: none;
}

.chat-text__extra,
.chat-text__finish {
    --s: 24px;

    position: relative;
    flex-shrink: 0;
    width: var(--s);
    height: var(--s);
}

.chat-text__extra {
    margin-left: 20px;
}

.chat-text__finish {
    margin-left: 14px;
}

.chat-text__extra-back,
.chat-text__emoji-btn,
.chat-text__finish-rec,
.chat-text__finish-send {
    --s: 24px;

    position: absolute;
    width: var(--s);
    height: var(--s);
    top: 0;
    left: 0;
    background-color: #333;
    -webkit-mask-size: var(--s);
    mask-size: var(--s);
    transform: scale(0);
    opacity: .5;
    transition: all .2s;
}

.chat-text__extra-back {
    -webkit-mask-image: url("/img/chat/chat-back.svg");
    mask-image: url("/img/chat/chat-back.svg");
}

.chat-text__emoji-btn {
    -webkit-mask-image: url("/img/chat/chat-emoji.svg?1");
    mask-image: url("/img/chat/chat-emoji.svg?1");
    transform: scale(1);
}

.chat-text__finish-send {
    background-color: #295CC9;
    -webkit-mask-image: url("/img/chat/chat-send.svg");
    mask-image: url("/img/chat/chat-send.svg");
}

.chat-text__finish-rec {
    -webkit-mask-image: url("/img/chat/chat-voice.svg");
    mask-image: url("/img/chat/chat-voice.svg");
    transform: scale(1);
}

.chat-text__emoji-btn + emoji-box {
    display: none;
}

@media not all and (hover: none) {
    .select-item:hover {
        background-color: #F2F5FC;
    }
    .up-head__options-body button:hover,
    .admp-options__body-btn:hover {
        background-color: #F2F5FC;
    }
    .up-head__options-body button[data-type="remove"]:hover {
        background-color: #FDF4F4;
    }
    .chat-aside__item:not(._active):hover {
        background-color: #F7F8FA;
    }
    .chat-text__attach:hover,
    .chat-text__extra-back:hover,
    .chat-text__emoji-btn:hover,
    .chat-text__finish-rec:hover,
    .chat-text__finish-send:hover {
        opacity: 1;
    }
}

@media (max-width: 1366px) {
    .modal-common {
        width: calc(100vw - 130px);
    }
}

@media (max-width: 768px) {
    .modal-common {
        width: 100vw;
        padding: 0 10px 10px;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
    }
    .modal-common._loading::before {
        border-radius: 0;
    }
    .modal-common__back {
        display: flex;
    }
}

@media (max-width: 480px) {
    .modal-mini {
        width: 100vw;
        height: 80vh;
        height: 80svh;
        top: auto;
        left: auto;
        bottom: 0;
        transform: translate(0, 0);
        border-radius: 20px 20px 0 0;
    }
    .modal-mini__footer {
        justify-content: space-between;
        width: 100%;
    }
}