@charset "utf-8";
@font-face {
	font-family: 'Roboto';
	src: local('Roboto Black'),
		url('fonts/Roboto-Black.woff2') format('woff2'),
		url('fonts/Roboto-Black.woff') format('woff'),
		url('fonts/Roboto-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Black Italic'),
		url('fonts/Roboto-BlackItalic.woff2') format('woff2'),
		url('fonts/Roboto-BlackItalic.woff') format('woff'),
		url('fonts/Roboto-BlackItalic.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Bold'),
		url('fonts/Roboto-Bold.woff2') format('woff2'),
		url('fonts/Roboto-Bold.woff') format('woff'),
		url('fonts/Roboto-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Bold Italic'),
		url('fonts/Roboto-BoldItalic.woff2') format('woff2'),
		url('fonts/Roboto-BoldItalic.woff') format('woff'),
		url('fonts/Roboto-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Medium'),
		url('fonts/Roboto-Medium.woff2') format('woff2'),
		url('fonts/Roboto-Medium.woff') format('woff'),
		url('fonts/Roboto-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Medium Italic'),
		url('fonts/Roboto-MediumItalic.woff2') format('woff2'),
		url('fonts/Roboto-MediumItalic.woff') format('woff'),
		url('fonts/Roboto-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto'),
		url('fonts/Roboto-Regular.woff2') format('woff2'),
		url('fonts/Roboto-Regular.woff') format('woff'),
		url('fonts/Roboto-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Italic'),
		url('fonts/Roboto-Italic.woff2') format('woff2'),
		url('fonts/Roboto-Italic.woff') format('woff'),
		url('fonts/Roboto-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Light'),
		url('fonts/Roboto-Light.woff2') format('woff2'),
		url('fonts/Roboto-Light.woff') format('woff'),
		url('fonts/Roboto-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Light Italic'),
		url('fonts/Roboto-LightItalic.woff2') format('woff2'),
		url('fonts/Roboto-LightItalic.woff') format('woff'),
		url('fonts/Roboto-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Thin'),
		url('fonts/Roboto-Thin.woff2') format('woff2'),
		url('fonts/Roboto-Thin.woff') format('woff'),
		url('fonts/Roboto-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto Thin Italic'),
		url('fonts/Roboto-ThinItalic.woff2') format('woff2'),
		url('fonts/Roboto-ThinItalic.woff') format('woff'),
		url('fonts/Roboto-ThinItalic.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}
* {
	margin: 0;
	padding: 0;
}
html {
	--toppanel-h: 42px;
	--guard-mw: 1000px;
	--indent: 15px;
	--fs: 14px;
	--scrollbar-h: 17px;
	--padding: 2rem;
	--sidebar-width: 300px;
	--side-padding: calc(var(--sidebar-width) / 10);

	--c-txt: #333;
	--c-minor-txt: #666;
	--c-link: #366AC8;
	--c-check: #1E90FF;

	--c-main-bg: #E8EAF6;
	--c-content-bg: #FFF;

	--c-toppanel: #716CBD;
	--c-toppanel-txt: #FFF;
	--c-panel: #C9C9FF;
	--c-panel-txt: #244266;
	--c-selected-item: #E4E2FF;
	--c-help-bg: #E4E4FF;
	--c-popup-bg: #FCF8FF;

	--c-delimiter: var(--c-panel);
	--c-filter-hover: #DCFFE3;

	--c-success: #249631;
	--c-success-bg: #97F79A;
	--c-warning: #B91F2D;
	--c-warning-hvr: #D02222;
	--c-warning-act: #E6453E;
	--c-warning-bg: #F79696;

	--c-btn-bg:  #716CBD;
	--c-btn-hvr: #9995D3;
	--c-btn-act: #5F5BA0;

	--ico-trash:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' d='M3.5 5.5v12q0 2 2 2h8q2 0 2-2v-12c2 0 2-3 0-3h-12c-2 0-2 3 0 3h12m-4-3c0-3-4-3-4 0m-1 8v6m3-6v6m3-6v6'/%3E%3C/svg%3E");
	--ico-send:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='1.3' d='M19 10h-15l-2-6c-1-2 0-4 3-2l14 7q1 1 0 2l-14 7c-3 2-4 0-3-2l2-6'/%3E%3C/svg%3E");
	--ico-profile:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='1.3' d='m10 10c-4.5 0-5.5-9.5 0-9.5c5.5 0 4.5 9.5 0 9.5m-3 1.5c-1 1.5-6 .5-4.5 6q7.5 4 15 0c1.5-5.5-3.5-4.5-4.5-6'/%3E%3C/svg%3E");
	--ico-start:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Cpath fill='white' fill-rule='evenodd' d='M4 8.5c7 0 7-4 13.5-4l1 3c-7 0-7 4-13.5 4M4 5l3 10l3-1l-3-9M10 3l3 9l3-1l-3-9'/%3E%3Cpath fill='none' stroke='white' stroke-width='1.25' stroke-linejoin='round' stroke-linecap='round' d='M1 4l6 20M3.5 5c6 0 7-4 13-4l3 10c-7 0-8 4-13 4l-3-10'/%3E%3C/svg%3E");
	--ico-paper:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 40 40' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M4 9a4 4 0 1 1 5-3l-3 21a4.2 4.2 0 1 0 6-4h14a4 4 0 1 1 0 8h-16m14-8l2.5-17a4 4 0 0 0-4-4.85h-17'/%3E%3C/svg%3E");
	--ico-fillpaper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 40 40'%3E%3Cpath fill='%23FE9A00' d='M7 1h16q4 0 4 4l-3 18h2c6 0 6 8 0 8h-15q-5 0-5-5l2-16c-9 0-10-10-1-9z'/%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' d='M4 9a4 4 0 1 1 5-3l-3 21a4.2 4.2 0 1 0 6-4h14a4 4 0 1 1 0 8h-16m14-8l2.5-17a4 4 0 0 0-4-4.85h-17'/%3E%3C/svg%3E");
	--ico-heart:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='2.2'%3E%3Cpath d='M4 16C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16Z'/%3E%3C/svg%3E");
	--ico-notheart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 16C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16ZM4 28L31 1'/%3E%3C/svg%3E");
	--ico-redheart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23E6453E' stroke='white' stroke-width='2.2'%3E%3Cpath d='M4 16C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16Z'/%3E%3C/svg%3E");
	--ico-check:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' d='M3 7l3 3l6-6'/%3E%3C/svg%3E");
	--ico-add:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' stroke='white' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M15 3v24M3 15h24'/%3E%3C/svg%3E");
	--ico-addc:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath stroke-width='1.8' d='M10 6v8m-4-4h8'/%3E%3Ccircle stroke-width='1.4' cx='10' cy='10' r='9.2'/%3E%3C/svg%3E");
	--ico-not:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23FF2C5C' stroke-width='2'%3E%3Ccircle cx='16' cy='16' r='14'/%3E %3Cpath d='M6 26L26 6'/%3E%3C/svg%3E");
	--ico-opnsel:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23C9C9FF' stroke-width='2'%3E%3Cpath d='M10 14l6 6 6-6'/%3E%3C/svg%3E");
	--ico-back:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M17 11l-4 4 4 4'/%3E%3C/svg%3E");
	--ico-x:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M11 11l8 8m-8 0l8-8'/%3E%3C/svg%3E");
	--ico-menu:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23666'%3E%3Ccircle cx='15' cy='7' r='2' /%3E%3Ccircle cx='15' cy='15' r='2' /%3E%3Ccircle cx='15' cy='23' r='2' /%3E%3C/svg%3E");
	--ico-new:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Cpath fill='%23E6453E' d='M0 0h250v250z'/%3E%3Cpath fill='%23FFF' d='M129 23l8 8-9 39 24-24 6 6-31 31-8-8 9-39-24 24-6-6zm36 36l17 17-5 5-11-11-7 7 10 10-5 5-10-10-9 9 11 11-5 5-17-17zm21 21l6 6-18 30 30-18 6 6-18 30 30-18 6 6-39 23-7-7 17-29-29 17-7-7z'/%3E%3C/svg%3E");
	--ico-loading:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 30 20'%3E %3Ccircle cx='6' cy='10' r='1' fill='%231E90FF'%3E %3Canimate attributeName='r' attributeType='XML' values='1;2;1;1;1' dur='1s' repeatCount='indefinite'%3E%3C/animate%3E %3C/circle%3E %3Ccircle cx='15' cy='10' r='1' fill='%231E90FF'%3E %3Canimate attributeName='r' attributeType='XML' values='1;1;2;1;1' dur='1s' repeatCount='indefinite'%3E%3C/animate%3E %3C/circle%3E %3Ccircle cx='24' cy='10' r='1' fill='%231E90FF'%3E %3Canimate attributeName='r' attributeType='XML' values='1;1;1;2;1' dur='1s' repeatCount='indefinite'%3E%3C/animate%3E %3C/circle%3E %3C/svg%3E");

	font: normal var(--fs)/1.5 'Roboto', 'Arial', sans-serif;
	height: 100%;
	scrollbar-color: #C9C9FF #F2F3FA;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, ul, ol,
#popup label {
	display: block;
}
#body {
	background-color: var(--c-main-bg);
	overflow-x: hidden;
	max-width: 100vw;
	min-height: 100%;
	min-width: 300px;
	color: var(--c-txt);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

body.dragging, body.dragging * {
	cursor: move !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
h1, h2, h3 {
	margin: var(--padding);
	font-weight: 300;
	line-height: 1;
	text-wrap: balance;
}
h1 {font-size: 2.5em}
h2 {font-size: 2em}
h3 {font-size: 1.5em}
a {
	text-decoration: none;
	color: var(--c-link);
	font-weight: 400;
}
a.link:hover {text-decoration: underline}
button {cursor: pointer;}
svg.i, svg.l, svg.o {
	fill: none;
	width: 1em;
	height: 1em;
	vertical-align: text-top;
}
svg.i, svg.l {
	stroke: currentColor;
	stroke-width: 2px;
}
svg.o {
	fill: currentColor;
}
svg.i {
	stroke-linecap: round;
	stroke-linejoin: round;
}
svg, svg symbol {
	overflow: visible;
	pointer-events: none;
}
input,
select,
textarea,
.pseudoinput {
	color: var(--c-txt);
	background: var(--c-content-bg);
	border: 1px solid var(--c-delimiter);
	border-radius: 3px;
	box-sizing: border-box;
	box-shadow: none;
	padding: 4px 8px;
	font-family: inherit;
	font-size: 13px;
	line-height: 17px;
	outline: none;
	max-width: 100%;
}
input[type=radio],
input[type=checkbox] {
	appearance: none;
	width: 14px;
	height: 14px;
	padding: 0;
}
input[type=checkbox]:checked {
	background: var(--c-check) var(--ico-check);
	border-color: var(--c-check);
}
input[type=checkbox]:focus {
	border-color: var(--c-btn-bg);
}
input[type=radio] {
	border-radius: 50%;
}
input[type=radio]:checked {
	border: 4px solid var(--c-check);
}
input[type=radio]:focus {
	border-color: var(--c-btn-bg);
}
input[type=radio]:checked:focus {
	box-shadow: inset 0 0 0 3px var(--c-check);
	border: 1px solid black;
}

.desktop input[type=number]:not(:hover) {
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}
.desktop input[type="number"]:not(:hover)::-webkit-outer-spin-button,
.desktop input[type="number"]:not(:hover)::-webkit-inner-spin-button {
	display: none;
}
select,
#interactive_search {
	appearance: none;
	padding-right: 24px;
	background: var(--c-content-bg) var(--ico-opnsel) right center no-repeat;
	transition: border-radius .5s;
}
select:focus,
#interactive_search.ex {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.switcher, .radio {
	display: block;
	border: none;
	padding-left: 2.4em;
	position: relative;
	color: inherit;
	font: inherit;
	background-color: transparent;
}
.switcher::before,
.switcher::after,
.radio::after {
	content: "";
	display: block;
	background-color: #EEE;
	height: 1em;
	width: 2em;
	border-radius: 1em;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -.5em;
}

.switcher::after {
	width: 1em;
	transform: scale(.8);
	background-color: var(--c-content-bg);
}
.switcher[href$="?"]::before,
.switcher.on::before {background-color: var(--c-check)}

.switcher[href$="?"]::after,
.switcher.on::after {left: 1em}

.radio::after {
	height: .6em;
	width: .6em;
	left: 1em;
	border: .2em solid #EEE;
}
.radio.on::after {
	border-color: var(--c-check);
	background-color: var(--c-content-bg);
}
#notifications,
#nofotoerror {
	margin-top: 12px;
	margin-bottom: .5rem;
}
.flex #nofotoerror {
	margin-top: 0;
	box-sizing: border-box;
	flex: 0 0 100%;
}
p,
.info {
	text-wrap: pretty;
	hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
}
.error_layout {
	text-align: center;
	flex: auto;
	justify-content: center;
	align-items: center;
}
.error_layout h1 {
	font-size: 10em;
	color: var(--c-main-bg);
	text-shadow: 2px 5px 12px var(--c-txt);
	line-height: .8em;
}
.error_layout h2 {
	margin: .4em auto;
	text-transform: capitalize;
}
.error_layout p>a {
	text-decoration: underline;
}
.success,
.error,
.notice {
	border-left: 5px solid;
	border-color: var(--c-success);
	background-color: var(--c-success-bg);
	padding: .3em 1em .4em calc(var(--padding) - 5px);
	transition: opacity 3s cubic-bezier(.5,0,1,.8) 3s;
	top: 32px; /*не менять*/
	left: 0;
	right: 0;
	flex: 0 1 100%;
}
.error {
	border-color: var(--c-warning);
	background-color: var(--c-warning-bg);
}
.notice {
	border-color: #248B96;
	background-color: #97EDF7;
}
.success a, .error a, .notice a {
	text-decoration: underline;
}
.h_success {
	color: var(--c-success);
	font-size: 2em;
	margin: 3rem var(--padding);
	position: relative;
}
.h_success svg {
	font-size: 3em;
	stroke-width: 4%;
	margin-bottom: 1rem;
}
.attn {background-color: var(--c-warning-bg)}
.explanation {
	margin: var(--padding);
}
.loading {
	background: var(--ico-loading) center/contain no-repeat !important;
	min-height: 1em;
}
.new {
	background: var(--ico-new) right top no-repeat;
	background-size: contain;
}
.guard {
	width: 100%;
	max-width: var(--guard-mw);
	margin: 0 auto;
}
body>.guard {
	padding-top: 30px;
}
body>.guard>.flex {
	flex-wrap: nowrap;
}
#wrapper {
	position: relative;
	flex: auto;
	max-width: calc(100% - var(--sidebar-width));
}
.content {
	position: relative;
	display: flow-root;
	background-color: var(--c-content-bg);
	border-radius: 4px;
	border: 1px solid var(--c-delimiter);
	padding: 0;
	margin-bottom: 1em;
	min-height: 5em;
}
.content:first-of-type {
	padding-top: 11px;
}
#body .content.full_width_content {
	margin-right: 0;
	width: 100%;
}
.content>*:target{
	color: #14B8A6;
}
#view {
	border: 0 solid #F500FF;
	border-left-width: 3px;
	border-right: 0;
	border-radius: 20px 0 0 20px;
	position: absolute;
	top: -100px;
	left: -14px;
	height: 10px;
	width: 10px;
	transition-property: top, height;
	transition-duration: .6s;
	transition-timing-function: ease-out;
}
.backtocabinet {
	background: var(--c-panel) var(--ico-back) -2.3em center no-repeat;
	background-size: 2.3em;
	display: block;
	padding-left: var(--padding);
	text-decoration: none;
	color: #FFF;
	transition: background-position .4s, padding-left .4s;
	font-size: 14px;
	flex: 0 1 100%;
}
.backtocabinet:hover {
	background-position: calc(var(--padding) - 1.15em);
	padding-left: calc(var(--padding) + 1em);
}
.message {
	background-color: pink;
	padding: 1em 2em;
}
.status {
	font-size: .8em;
	font-style: normal !important;
	font-weight: normal !important;
	white-space: nowrap;
}
.progressbar {
	background-color: var(--c-panel);
	min-height: 2px;
}
.progress {
	width: 0;
	height: 4px;
	background-color: #506885;
}
#underpop,
#underhelp {
	color: #444;
	text-align: center;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#underpop {
	background-color: rgba(255,255,255,.8);
	backdrop-filter: blur(7px);
	z-index: 1000;
}
#underhelp {
	z-index: 1111;
}
#popup {
	--popupgap: 2rem;
	font-size: 14px;
	width: 300px;
	max-width: calc(100vw - var(--popupgap) * 4);
	max-height: calc(100vh - var(--popupgap) * 2);
	padding: 0 var(--popupgap);
	background-color: var(--c-popup-bg);
	border-radius: 6px;
	box-shadow: 0 7px 70px 1px rgba(0,0,0,.2);
}
#popup .success,
#popup .error,
#popup .notice {
	margin: 0 calc(0px - var(--popupgap)) 3px;
}
#popup h1,
#popup h2,
#popup h3,
#popup h4 {
	margin: var(--popupgap) 0 1rem;
	font-weight: 400;
}
#popup h4 {
	font-size: 1.25em;
}
#popup .subheader {
	position: relative;
	top: -1em;
	font-weight: 300;
}
#popup .popcolumn {
	flex: 0 0 50%;
}
#popup .button {
	min-width: 120px;
}
#popupform a.button {
	display: block;
}
#popup li {
	list-style-position: inside;
}
#popup p a {
	white-space: nowrap;
}
#popup label {
	margin-top: 1rem;
}
#popup label input[type=text],
#popup label input[type=file],
#popup label input[type=url],
#popup label input[type=number],
#popup label input[type=time],
#popup label input[type=date],
#popup label select,
#popup textarea,
#selectcourse select {
	outline: none;
	width: 100%;
	max-width: 100%;
}
#popup label input[type=number] {
	width: initial;
}
#popup textarea {
	resize: vertical;
	max-height: 300px;
	margin-top: 1em;
}
#popup .flex.around:last-child {margin: var(--popupgap) 0}

#popupart {text-align: left}
#popupart p {margin: .3em 0}
#popupart .newsdate {display: none}

#popupart.private_note #c {
	float: right;
}
#popupart.private_note textarea {
	height: 15em;
	margin-bottom: var(--popupgap);
}

#bubble,
#bubble_arrow {
	position: absolute;
	color: var(--c-txt);
	background-color: var(--c-content-bg);
	z-index: 999;
}
#bubble_arrow {
	display: block;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	pointer-events: none;
}
#bubble {
	overflow: hidden;
	border-radius: 3px;
	text-align: left;
	box-sizing: border-box;
	box-shadow: 0 5px 15px 0 rgba(0,0,0,.4);
}
#bubble nav {
	margin: 7px 0;
}
#bubble nav.hoverscrolled {
	max-height: 87vh;
}
@media (max-height: 668px) {
	#bubble nav.hoverscrolled {
		max-height: calc(100vh - var(--toppanel-h) - 35px);
	}
}
#bubble nav nobr {
	margin: 1em;
}
#bubble nav>a,
#bubble nav>.navItem,
#bubble nav>button {
	display: block;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
	color: var(--c-txt);
	padding: .3em 2em .3em 1em;
	border: 0;
	background-color: inherit;
	transition: background-color .2s;
	font: inherit;
	box-sizing: border-box;
	width: 100%;
	text-align: inherit;
}
#bubble nav>button {
	cursor: pointer;
}
#bubble nav a.axis,
#bubble nav button.axis {
	display: flex;
	position: relative;
}
#bubble nav button.chevron-r::before {
	position: absolute;
	right: 1em;
	top: .75em;
}
#bubble nav button.chevron-l::before {
	margin: 0 1em 0 0.7em;
}
#bubble nav>a:hover,
#bubble nav>button:hover {
	background-color: var(--c-main-bg);
}
#bubble nav button.active {
	color: cornflowerblue;
}
#bubble nav a svg,
#bubble nav button svg {
	stroke-width: 9%;
	margin-right: calc(30px / 2 - 1em / 2 + 6px);
	margin-left: calc(30px / 2 - 1em / 2);
}
#bubble nav hr {
	border: 0;
	width: calc(100% - 2em);
	height: 1px;
	margin: .3em auto;
	background-color: var(--c-delimiter);
}
#bubble .myname {
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
}
#bubble .emptynotifibox {
	width: 260px;
	padding: 2em 0 1em;
	text-align: center;
}
#bubble .emptynotifibox div {
	padding: 1em 2em;
	color: #999;
}
#bubble .notified {
	position: relative;
	font-size: 14px;
	width: 320px;
	max-width: calc(100% - 4em);
	background-color: var(--c-main-bg);
	border-radius: 10px;
	padding: 1em;
	margin: 1em;
}
#bubble .notified:first-child {
	margin-top: 7px;
}
#bubble .notified.new {
	background-size: 32px;
}
#bubble .notified a {color: var(--c-link)}
#bubble .notified a:hover {text-decoration: underline}
#bubble .notified .n-ico svg {
	font-size: 32px;
	opacity: .5;
}
#bubble .notified .n-txt {
	font-weight: normal;
	text-align: left;
	line-height: 1;
	margin-left: 10px;
}
#bubble .notified .n-txt .n-date {
	font-size: 11px;
	margin-top: 5px;
	opacity: .5;
}
#bubble .notifi_hint {
	font-size: min(3vw, 13px);
	line-height: 1;
	color: var(--c-minor-txt);
	margin: 7px 14px;
}

#bubble.hint,
#bubble_arrow.hint {
	background-color: #12ABF1;
}
#bubble.hint {
	width: 270px;
	color: #FFF;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .2px;
	padding: 1em;
}
#bubble.hint h4 {
	line-height: 1;
	font-size: 14px;
	margin-bottom: 8px;
}
#bubble.hint .right_answer {
	font-size: 1rem;
}
#bubble.hint ul {
	list-style: inside square;
}
#bubble.hint .hint_footer {
	justify-content: space-between;
	flex-direction: row-reverse;
	margin-top: 10px;
}
#bubble.hint .hint_footer .button {
	border-radius: 0;
	font-size: inherit;
	padding: 1px 7px;
	background-color: rgba(255,255,255,.2);
}
#bubble.hint .hint_footer .button:hover {
	background-color: transparent;
	outline: 1px solid rgba(255,255,255,.3);
}
#bubble.hint .hint_footer .esc {
	background-color: transparent;
}
#bubble.hint .hint_footer .esc:hover::after {
	content: attr(data-t);
}
#bubble_accent {
	position: absolute;
	border-radius: 5px;
	border: 2px solid var(--c-warning-act);
	box-sizing: border-box;
	pointer-events: none;
	z-index: 1001;
}

#tsklist:empty,
.empty {
	background: url(/pic/empty.svg) center no-repeat;
	background-size: contain;
	padding: 20% 0;
	text-align: center;
}

/* Верхняя панель */
header {
	position: fixed;
	background-color: var(--c-toppanel);
	height: var(--toppanel-h);
	width: 100%;
	top: 0;
	z-index: 100;
}
header,
header a {
	color: var(--c-toppanel-txt);
}
.logo {
	flex: 0 0 auto;
	color: var(--c-toppanel-txt);
	text-decoration: none;
	height: var(--toppanel-h);
	line-height: var(--toppanel-h);
	padding-left: 40px;
	background: url(/favicon.svg) no-repeat, linear-gradient(transparent 0%,transparent 53%,#506885 53%,#506885 100%) no-repeat;
	background-size: 32px 42px;
}
#enter>svg {
	margin-left: .3em;
	stroke-width: 11%;
}
#searchform {
	flex: 1 1 auto;
	justify-content: flex-end;
}
#search {
	flex: 0 1 300px;
	width: 100%;
	background-color: rgba(255,255,255,.65);
	border-radius: 20px;
	margin-left: 3vw;
	padding: 6px 14px;
	border: 0;
	opacity: .5;
	transition: opacity .3s;
}
#search:focus {
	outline: 0;
	opacity: 1;
}
#infoicons {
	flex: 0 1 300px;
	justify-content: flex-end;
}
#infoicons .urb {
	background-color: transparent;
}

.indicator {
	position: relative;
	transition: background-color .2s;
}
.indicator:hover {
	background-color: var(--c-btn-hvr);
}
.indicator>a {
	display: block;
	font: bold 12px/var(--toppanel-h) 'Helvetica', 'Roboto', sans-serif;
	width: var(--toppanel-h);
	height: var(--toppanel-h);
	cursor: pointer;
	color: var(--c-toppanel);
	background-size: auto 24px !important;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}

#bell>a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath stroke='white' stroke-width='3' stroke-linejoin='round' stroke-linecap='round' d='M3.5 17.5h17l-2-3v-5q0-5-6.5-6v-2v2q-6.5 1-6.5 6v5z'/%3E%3Cpath d='M9 21a3 3 0 0 0 6 0z'/%3E%3C/svg%3E");
	color: var(--c-warning-act);
	cursor: help;
}
#help>a {
	border-radius: 50%;
	background: #FFF;
	font-size: 27px;
	transform: scale(.5);
}

#bug>a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M1 14h7m8 0h7M2 5l5 5m9 8l5 5M3 23l5-5m9-8l5-5'/%3E%3Cpath fill='white' d='M7 5a3 3 0 0 1 10 0zm-3 2v7q0 8 7 9v-14h2v14q7-1 7-9v-7z'/%3E%3C/svg%3E");
}

.disp {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' stroke='white' stroke-width='4' stroke-linejoin='round' d='M12 2L21.4 15 6 20 6 4 21.4 9 12 22 2.6 9 18 4 18 20 2.6 15Z'/%3E%3C/svg%3E");
}
.prem {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath fill='white' stroke='white' stroke-width='3' stroke-linejoin='round' stroke-linecap='round' d='M15 1.5l6 6 7-2-4 12h-18l-4-12 7 2zm-9 21h18'/%3E%3C/svg%3E");
}
.prem, .disp {
	background-position: center;
	background-repeat: no-repeat;
}

#usermenu {
	position: relative;
}
.ava {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	vertical-align: bottom;
	margin: 2px 6px 0 0;
}
#usermenu>a>.ava {
	margin: calc((var(--toppanel-h) - 30px) / 2);
}
#menu-btn {
	display: none;
}
#enter + #menu-btn {
	margin-left: 10px;
}

/*	>	>	>	>	>	>	>	>	>	>	>	>	>	>	>	>	Оформление сайтбара */
#right-sidebar {
	flex: none;
	position: relative;
	margin: 0 calc(0px - var(--scrollbar-h)) 0 -1px;
	min-width: var(--sidebar-width);
	padding-top: 7px;
}
#right-sidebar .button:not(.urb) {
	display: block;
	width: 100%;
	max-width: calc(var(--sidebar-width) - var(--indent));
}
#hovering {
	position: -webkit-sticky;
	position: sticky;
	top: 41px;
	padding: 0 calc(var(--scrollbar-h) - var(--indent)) .1px var(--indent);
	max-height: calc(100vh - 40px);
	min-height: 315px;
	width: var(--sidebar-width);
	}
#hovering>*:last-child {
	margin-bottom: 1em;
}
#roomlink {
	width: 100%;
	padding: .3em;
}
.widget:not(:empty) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	flex: 1 0 40%;
	margin: .5em;
	background: var(--c-content-bg);
	border-radius: 4px;
	border: 1px solid var(--c-delimiter);
	box-sizing: border-box;
}
.inwidget {
	position: relative;
	flex: 3 0 auto;
	min-width: 260px;
}
.boxed,
.boxed.contact {
	padding: 0;
	margin: 1rem 1rem 0;
	width: calc(100% - 2rem);
}
.boxed>* {
	margin: 0 0 1rem;
	line-height: 1;
}

#right-sidebar .widget {
	margin: 1em 0;
	width: calc(var(--sidebar-width) - var(--indent));
}
#right-sidebar .widget .i.optional {
	margin-right: .5em;
	vertical-align: top;
}
.widget.flex {
	box-sizing: border-box;
	align-items: center;
	align-content: space-between;
	justify-content: center;
}
.widget h3 {
	position: relative;
	font-size: 1em;
	font-weight: 500;
	background-color: var(--c-panel);
	color: var(--c-panel-txt);
	text-align: center;
	padding: 6px 0;
	margin: 0;
	line-height: calc(30px - .6em);
	min-height: 30px;
	box-sizing: border-box;
}
.widget>.switcher,
.widget>.radio {
	margin: 0 0 0 var(--side-padding);
}

.filter_groupe._its_close>.filter {display:none}
.filter_groupe._its_close::before {
	display: block;
	content: attr(data-y);
	color: var(--c-minor-txt);
	background: linear-gradient(to bottom,#EEE 50%,#FFF 55%) 0px 0px/100% 200% no-repeat;
	line-height: 36px;
	text-align: center;
	padding-right: var(--side-padding);
	padding-left: var(--side-padding);
	font-weight: 500;
	border-top: 1px solid var(--c-delimiter);
	cursor: pointer;
	transition: background-position-y .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.filter_groupe._its_close:hover::before {
	background-position-y: -8px;
}

#advanced_sorting_panel a,
#tsklist a,
#wordlist a,
.filter {
	display: block;
	position: relative;
	height: 36px;
	text-decoration: none;
	text-indent: 1rem;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	white-space: nowrap;
	background-color: var(--c-content-bg);
}
#advanced_sorting_panel a:last-child,
#tsklist a:last-child,
#wordlist a:last-child,
.filter:last-child {
	border-radius: 0 0 3px 3px;
}
#tsklist a.act,
#wordlist a.act,
.filter.act {
	background-color: var(--c-popup-bg);
	border-bottom-left-radius: 0;
}
#tsklist a.act:after,
#wordlist a.act:after,
.filter.act:after,
#sliding_window:after {
	content: '';
	position: absolute;
	left: -14px;
	top: 0;
	width: 0;
	height: 0;
	border-right: 14px solid var(--c-popup-bg);
	border-bottom: 18px solid transparent;
	border-top: 18px solid transparent;
}
#tsklist a.act:before,
#wordlist a.act:before,
.filter.act:before,
#sliding_window:before {
	content: '';
	position: absolute;
	left: -15px;
	top: 0;
	width: 0;
	height: 0;
	margin-top: -2px;
	border-right: 15px solid var(--c-delimiter);
	border-bottom: 20px solid transparent;
	border-top: 20px solid transparent;
}
#tsklist a .progress {height: 2px}
#tsklist a:hover .progress {background-color: var(--c-warning-act)}
.icons {overflow: hidden}
.icons b {color: var(--c-success)}
.icons svg {
	width: 1em;
	height: 1em;
	vertical-align: text-top;
	opacity: .5;
}
#tsklist a.act .icons svg,
#tsklist a:hover .icons svg {
	opacity: 1;
}
._c-prime {
	color: var(--c-success);
	fill: var(--c-success);
	stroke: var(--c-success);
}
._c-minor {
	color: var(--c-minor-txt);
	fill: var(--c-minor-txt);
	stroke: var(--c-minor-txt);
	stroke-width: 0;
}
#advanced_sorting_panel input,
#tsklist input,
.desck {
	display: block;
	position: relative;
	top: -3px;
	border: 0;
	background-color: transparent;
	width: 100%;
	text-indent: 1rem;
	color: var(--c-minor-txt);
	font-size: 12px;
	line-height: 1;
	min-height: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: inherit;
}
#task_saved {
	position: absolute;
	width: 285px;
	margin-top: -2em;
	color: #00D138;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}
.filter {
	padding-left: var(--side-padding);
	text-indent: 0;
	line-height: 36px;
	border-top: 1px solid var(--c-delimiter);
	cursor: pointer;
}
.filter:not(.act):hover {
	background-color: var(--c-filter-hover);
}
.filter>.long {
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: calc(0px - var(--side-padding) + 1em);
}

#helper h4 {
	cursor: pointer;
	position: relative;
	padding: .2em .5em .2em var(--side-padding);
	color: var(--c-minor-txt);
	border: 0;
	margin: 0;
	font-style: italic;
	font-weight: normal;
	hyphens: auto;
}
#helper h4:before {
	position: absolute;
	left: calc(var(--side-padding) / 2 - 6px);
	top: .6em;
	transform: rotate(45deg);
	transform-origin: 70% 70%;
	transition: transform .3s;
}
#helper h4:hover {
	color: var(--c-link);
}
#helper p {
	font-size: .8em;
	padding: 0 1rem 1em var(--side-padding);
	display: none;
}

.help_module p {
	margin-top: .5rem;
	max-height: 300px;
	overflow-y: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
.help_module a {white-space: nowrap}

#helper h4:before,
.chevron-t:before,
.chevron-r:before,
.chevron-b:before,
.chevron-l:before {
	content: "";
	display: block;
	border-right: 2px solid;
	border-bottom: 2px solid;
	border-color: currentColor;
	width: 6px;
	height: 6px;
	transition: transform .3s;
}
.chevron-b:before {transform: rotate(45deg)}
.chevron-l:before {transform: rotate(135deg)}
.chevron-t:before {transform: rotate(225deg)}
.chevron-r:before {transform: rotate(315deg)}

#helper h4.narrow:before,
#multiplechoice .chevron-b.cls:before {
	transform: rotate(-135deg);
}

/* Список курсов */
#list_course {
	margin-top: 1rem;
	margin-bottom: var(--padding);
}
.item_preview {
	display: block;
	position: relative;
	color: var(--c-txt);
	border: solid 1px var(--c-delimiter);
	border-radius: 4px;
	margin: 0 var(--padding) 6px; /*Нельзя верхний margin*/
	padding-top: .5rem;
	text-decoration: none;
	outline: none;
	transition: background-color .2s;
}
.item_preview:hover,
.item_preview.selected_item {
	background-color: var(--c-selected-item);
}
.item_preview .item_columns {
	display: flex;
}
.item_preview .item_content {
	flex-grow: 2;
}
.item_preview .item_controls {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}
.item_preview .menu_wrapper {
	margin-right: .5rem;
}
.item_preview small {
	font-size: .8rem;
	padding-right: .5rem;
	text-align: center;
}
.item_preview h3 {
	margin: 0 1rem;
}
.item_preview .processing,
.item_preview .private,
.item_preview .public {
	font-size: .7rem;
	color: var(--c-minor-txt);
	margin: 0 .5rem .5rem 0;
}
.item_preview .processing .ava,
.item_preview .private .ava,
.item_preview .public .ava {
	margin-left: -1rem;
}
.item_preview .public {color: var(--c-txt)}
.item_preview .lang,
.item_preview .level {
	margin-left: 1rem;
	color: var(--c-minor-txt);
	font-size: .8em;
}
.item_preview p {
	font-size: .8rem;
	line-height: 1;
	margin: .3rem 1rem .5rem 1rem;
	min-height: 1rem;
}
.item_preview .progressbar {
	border-radius: 0 0 3px 3px;
	overflow: hidden;
	clear: both;
}

.dragged {
	position: fixed !important;
	z-index: 200;
	background-color: #FFF;
	box-shadow: 0 7px 24px 1px rgba(0,0,0,.5);
	box-sizing: border-box;
}
.placeholder {
	display: block;
	background-color: #DEA6A6;
	color: #FFF;
	text-align: center;
	border-radius: 4px;
	line-height: 3em;
	margin: 2px 20px;
}
span.placeholder {margin: var(--padding)}
i.placeholder {
	margin: 0;
	border-radius: 0;
	line-height: 38px;
}
#list_course .placeholder {
	margin: 0 var(--padding) 6px !important;
}



/* Оформление урока */
.youtube {
	position: relative;
	padding-bottom: 52.8%;
	padding-bottom: calc((100% - var(--padding) * 2) / 100 * 56.25);
}
.youtube:empty {padding-bottom: 0}
.youtube iframe {
	position: absolute;
	left: var(--padding);
	width: calc(100% - var(--padding) * 2);
	height: 100%;
}

/*Данные пользователей*/
.username, .surname {
	color: var(--c-panel-txt);
	font-size: 1.4em;
	font-weight: bold;
}
.declaration {
	font-weight: bold;
}
.usertype {
	font-size: .8em;
	font-weight: 300;
}
#persons {
	margin-bottom: -5px;
}
#persons h4 {
	padding: .5em .3em 0;
}
#persons i {
	font-size: .75em;
}
.user_card {
	position: relative;
	width: calc(var(--sidebar-width) - var(--indent) - var(--indent) + 4px);
	height: 30px;
	line-height: 30px;
	margin-top: 10px;
	padding: 5px;
	border-radius: 20px;
	border: 1px solid var(--c-panel);
	background-color: var(--c-help-bg);
	cursor: default;
}
.user_card.act {
	background-color: var(--c-content-bg);
	border-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	position: relative;
	padding-left: 20px;
	left: calc(0px - var(--indent));
	margin-right: calc(0px - var(--indent));
}
.participant {
	display: contents;
}
.ava_container {
	position: relative;
}
.participant .ava_container .onlinemark {
	position: absolute;
	left: 11%;
	bottom: 11%;
	width: 12px;
	height: 12px;
}
.smallava {
	border-radius: 50%;
	border: 5px solid transparent;
	width: 6em;
	height: 6em;
	margin-top: 1em;
	align-self: center
}
.smallnames {
	margin-bottom: .5em;
	text-align: center;
	max-width: 100%;
}
.user_card .ava {
	margin: 0 10px 0 0;
	float: left;
	background-color: #FFF;
}
.user_card span {
	display: inline-block;
	width: calc(100% - 70px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


#scrollToTop {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	padding: 50px 10px;
	color: rgba(75,54,168,.4);
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	z-index: 11;
	min-width: 70px;
	text-align: center;
	transition: all .6s;
}
#scrollToTop:hover {
	background-color: rgba(255,255,255,.4);
	color: var(--c-btn-bg);
}

.help {/* Кнопочка вызова местной справки (?) */
	font: bold 10px/18px 'Helvetica', 'Roboto', sans-serif;
	display: inline-block;
	box-sizing: border-box;
	color: var(--c-panel-txt);
	background-color: var(--c-main-bg) !important;
	border: 0;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	text-align: center;
	cursor: help;
	transition: opacity .3s;
}
#help_title {
	position: absolute;
	color: var(--c-panel-txt);
	background-color: var(--c-help-bg);
	max-width: 300px;
	font-size: .8em;
	line-height: 1.3;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,.4);
	border-radius: 4px;
	padding: 1em;
	z-index: 10;
	cursor: default;
}

#body .bead,
#chat[bead]:not(.unfolded)::after,
#chat[bead].in_dialog::after {
	content: attr(bead);
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
	opacity: 1;
	padding: 0 4px;
	border-radius: 12px;
	color: #FFF;
	font-size: 12px;
	font-weight: 500;
	height: 18px;
	min-width: 10px;
	background-color: var(--c-warning-act);
	border: 1px solid var(--c-warning);
	cursor: default;
}
#chat[bead].in_dialog::after {
	top: 24px;
	right: auto;
	left: 4px;
	width: 14px;
	height: 14px;
	border: none;
	padding: 0;
	pointer-events: none;
}

/*	0	0	0	0	0	0	Чат */
#chat {
	background: #FF8C00 var(--ico-send) center no-repeat;
	background-size: 20px;
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	box-sizing: border-box;
	box-shadow: 0 5px 20px 0 rgba(0,0,0,0.3);
	transition: all .2s cubic-bezier(.4,0,.2,1);
	z-index: 101;
}
#chat:not(.unfolded) {cursor: pointer}
#body #chat[bead="0"]::after {display: none}
#chat:hover, #chat.unfolded {background-color: #455A64}
#chat.unfolded {
	width: 300px;
	height: 460px;
	max-height: calc(100vh - 20px);
	background-image: none;
	border-radius: 19px;
	color: #FFF;
	overflow: hidden;
}
#chatclose,
#backward {
	position: absolute;
	top: 4px;
	right: 4px;
	background-color: transparent;
}
#backward {
	right: auto;
	left: 4px;
	background-image: var(--ico-back);
}
#chatclose:hover,
#body .kick:hover,
#close_gallery:hover,
#conspectus_panel .urb:hover {
	background-color: var(--c-warning-act);
}
#backward:hover {background-color: #FF8C00}
#chat h1 {
	font-size: 15px;
	font-weight: normal;
	border-bottom: 1px solid #999;
	padding: 0 20px 0 0;
	line-height: 39px;
	margin: 0 10px;
}
#chat h1.sendername {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 86px;
	height: 39px;
	transition: padding .3s cubic-bezier(.5,1.4,.7,1.1);
	border: 0;
}
#chat>* {
	opacity: 0;
	transition: opacity .2s .2s;
}
#chat.unfolded>* {opacity: 1}
#chatbody {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	bottom: 40px;
	padding: 10px 0;
	align-content: flex-start;
	justify-content: flex-start;
}
#chatbody.flex {bottom: 0}
.sendername + #chatbody {
	top: 34px;
	padding-top: 0;
}
#chatbody .contact.warn {
	text-align: center;
	font-size: 14px;
	padding: 40% 0 0 0;
	flex: 1 0 99%;
}
#chatbody .warn a {
	color: #FFF;
	text-decoration: underline;
}
#chatbody .contact .cont_name {
	padding: 0 5px;
}

#chatbody .date_separator {
	position: sticky;
	top: 0;
	font-size: 12px;
	color: #AAA;
	text-align: center;
	margin: 0 0 10px 10px;
	background: #455A64;
	border-bottom: 1px solid #999;
	height: 8px;
	width: 280px;
	z-index: 1;
}
#chatbody .date_separator div {
	background: #455A64;
	width: 90px;
	border-radius: 10px;
	margin: 0 auto -10px;
}

#chatbody .phrase {
	flex-wrap: nowrap;
	align-items: center;
	width: 290px;
}
.my.phrase {justify-content: flex-end}
.phrase .when {
	font-size: 11px;
	padding: 10px;
	color: #AAA;
}
.cloud {
	position: relative;
	font-size: 14px;
	line-height: 16px;
	border-radius: 10px;
	padding: 10px;
	margin: 10px;
	min-height: 1em;
	max-width: 80%;
	max-width: calc(100% - 60px);
	box-sizing: border-box;
	word-wrap: break-word;
	white-space: pre-line;
}
.he.phrase .cloud {
	border-top-left-radius: 0;
	margin-right: 0;
	background-color: aliceblue;
	color: #333;
}
.my.phrase .cloud {
	border-bottom-right-radius: 0;
	margin-left: 0;
	margin-right: 0;
	background-color: #FF8C00;
	color: #333;
}
.my.unread.phrase .cloud::after {
	content: "";
	position: absolute;
	left: -4px;
	bottom: -4px;
	display: block;
	width: 6px;
	height: 6px;
	background: #E6453E;
	border: 2px solid #455A64;
	border-radius: 99px;
}
#controls {
	background-color: #455A64;
	position: absolute;
	bottom: 0;
	right: 10px;
	left: 10px;
	border-top: 1px solid #999;
	min-height: 40px;
	align-items: center;
	flex-wrap: nowrap;
	z-index: 2;
	max-height: min(300px, calc(100vh - 100px));
}
#controls button {
	flex: 0 0 30px;
	height: 40px;
	outline: none;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23FF8C00' d='M0 1L20 10 0 19 2 12 12 10 2 8z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
#in {
	flex: 8 1 auto;
	border: 0;
	color: #FFF;
	background: transparent;
	margin-right: 10px;
	font-size: 15px;
	line-height: 1.2;
	padding: 5px 0 10px 5px;
	outline: none;
	max-height: inherit;
	box-sizing: border-box;
}


.contact {
	flex: 1 0 60px;
	margin: .12em;
	padding: 0 .6em 42px;
	position: relative;
}
#right-sidebar .contact {
	position: static;
}
.contact.pseudo {
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	order: 1000;
}
.contact .circle {
	position: relative;
	margin: auto;
	width: 60px;
}
.circle.chathead {
	z-index: 101;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 -2px 8px rgba(69,90,100,.5);
	transition: right  .2s cubic-bezier(.4,0,.2,1),
				bottom .2s cubic-bezier(.4,0,.2,1); /*google easing*/
}
.chathead.student img {border: 2px solid #FFF}
.favormark,
.memomark {
	position: absolute;
	width: 20px;
	height: 20px;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: var(--ico-redheart) center no-repeat;
	background-size: cover;
	pointer-events: none;
	transition: right  .5s cubic-bezier(.3,1.3,.3,1.3),
				bottom .5s cubic-bezier(.3,1.3,.3,1.3);
}
.memomark {
	background-image: var(--ico-fillpaper);
	right: calc(50% - 10px);
	bottom: -8px;
}
.avatar .favormark {
	right: 50%;
	bottom: 3px;
	transition: none;
	pointer-events: auto;
	margin-right: -70px;
}
.onlinemark,
.offlinemark {
	border-radius: 100px;
	width: 10px;
	height: 10px;
	background: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
.onlinemark::after,
.offlinemark::after {
	content: "";
	border-radius: 100px;
	width: 8px;
	height: 8px;
	background: #4ADE80;
}
.offlinemark::after {
	background: var(--c-warning-act);
}
.circle .onlinemark,
.circle .offlinemark {
	position: absolute;
	left: 4px;
	bottom: 4px;
	z-index: 5;
}
#chat_add {
	position: absolute;
	cursor: pointer;
	left: 45px;
	bottom: 24px;
	color: #FFF;
	font-size: 14px;
	padding: 0 .5em 0 20px;
	border-radius: 5px;
	background-color: #FF8C00;
	box-shadow: 2px -2px 8px rgba(69,90,100,.5);
}
.circle img,
.circle .tap {
	position: relative;
	display: block;
	z-index: 2;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-clip: border-box;
	border: 4px solid transparent;
	transition: box-shadow .5s;
	box-sizing: border-box;
	left: 0;
	top: 0;
}
.circle .tap {
	background-color: var(--c-toppanel);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 25px;
	position: absolute;
	z-index: 1;
	border: 0;
	transition: left .5s cubic-bezier(.2,1.25,.2,1.26),
				top  .5s cubic-bezier(.2,1.25,.2,1.26),
				box-shadow .5s,
				background-color .2s;
	transform: scale(.8);
}
.circle .extended,
.contact:hover img:first-child {
	box-shadow: 0 2px 6px 2px rgba(0,0,0,.4);
}
.circle.invited::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	background: var(--ico-new) top right no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 2;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
}
.invited img,
.student img {
	background-color: #FFF;
	border-width: 2px;
}
.teacher img {background-color: #A2CDFF}
.author img {background-color: #CAACFF}
.admin img {background-color: #FFC19F}
.anonym img {background-color: #495A64}
.contact .cont_name {
	font-size: 13px;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 2.5em;
	line-height: 1.2;
}
.contact .cont_name.my_student {
	font-style: italic;
	color: cornflowerblue;
}
#chat .now_teach_me {
	flex: 5 1 100%;
	color: #FF8C00;
	border-bottom: 1px solid #999;
	margin: 0 10px 10px 10px;
}
#chat .now_teach_me .cont_name small {
	display: block;
	font-size: 1em;
	font-style: italic;
	color: #999;
}

/* Добавление в личный словарь */
#adding_words {
	--gap: 10px;

	position: fixed;
	left: 0;
	right: 0;
	bottom: -500px;
	min-height: 50px;
	padding: 0 calc(var(--padding) - var(--gap)) var(--gap) var(--padding);
	align-items: center;
	background-color: rgba(39,18,60,.8);
	transition: bottom .3s ease-out;
	z-index: 1001;
}
#adding_words>.flex {
	position: relative;
	flex: 1 1 300px;
	margin: var(--gap) var(--gap) 0 0;
}
#adding_words #trans_variants {
	flex: 40 1 auto;
}
#enter_word {
	color: aliceblue;
	text-transform: uppercase;
	background-color: transparent;
	border: 2px solid aliceblue;
	outline: none;
	font-size: 18px;
	border-radius: 20px;
	padding: 2px 10px;
	width: 100%;
}

#trans_variants button {
	color: aliceblue;
	text-transform: uppercase;
	font-size: 17px;
	white-space: nowrap;
	margin-right: .5em;
	padding: 2px 1.5em 2px .5em;
	border-radius: 1em;
	border: 1px solid aliceblue;
	background: transparent var(--ico-addc) right 4px center no-repeat;
	background-size: 1em;
	cursor: pointer;
	transition: background-color .3s;
}
#trans_variants button:hover {
	background-color: var(--c-btn-bg);
}
#mine_trans {
	width: calc(100% - 15px);
	padding: 6px 10px;
	font-size: 16px;
	line-height: 18px;
	border: 0;
	outline: none;
	border-radius: 1em 0 0 1em;
}
#btn_add_wrd {
	position: absolute;
	background: #DB7B00 var(--ico-add) center / 11px no-repeat;
	font-size: 31px;
	right: 0;
}
#esc_add_wrd {
	position: absolute;
	background-color: transparent;
	font-size: 26px;
	right: 2px;
	top: 2px;
}
#btn_add_wrd:hover,
#esc_add_wrd:hover {
	background-color: var(--c-btn-hvr);
}
#adding_words #whose_voc {
	flex: 0 0  auto;
	color: aliceblue;
	font-size: .9em;
}
#whose_voc .ava {
	margin: 0 .3em;
}

/* Социалка */
.social {
	display: inline-block;
	cursor: pointer;
	color: #FFF;
	font-size: .9em;
	border-radius: 2em;
	text-decoration: none;
	padding: .6em 1em .6em 2.5em;
	margin: 10px 10px 0 0;
	background: var(--c-toppanel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 578 578'%3E%3Cpath d='M208 140c13 24-8 41-8 41l-30 30s-5 6-1 16c22 62 120 161 182 182 12 4 18-3 18-3l33-34s18-18 42-6l119 70c30 23 6 45 6 45l-81 80s-10 17-43 17C256 578 0 304 0 136c-1-32 17-46 17-46L98 9s27-24 44 7l66 124z'/%3E%3C/svg%3E") 1em center / 1em no-repeat;
}

.skype {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 64 64'%3E%3Cpath d='M62 38C65 15 49-1 26 2 10-5-5 10 2 26c-3 23 13 39 36 36 16 7 31-8 24-24zM32.1 50.3c-10.7 0-15.5-5.3-15.5-9.3 0-2 1.5-3.4 3.5-3.4 4.6 0 3.4 6.6 12 6.6 4.4 0 6.8-2.4 6.8-4.8 0-1.4-.8-3.1-3.6-3.8l-9.6-2.3c-7.7-1.9-9.1-6-9.1-10 0-8.1 7.6-11.2 14.8-11.2 6.6 0 14.4 3.6 14.4 8.5 0 2.1-1.8 3.3-3.9 3.3-3.9 0-3.2-5.5-11.1-5.5-3.9 0-6 1.8-6 4.3s3.1 3.4 5.8 3.9l7.1 1.6c7.7 1.8 9.7 6.2 9.7 10.5 0 6.7-5.1 11.6-15.3 11.6z'/%3E%3C/svg%3E")}
.whatsapp {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'%3E%3Cpath d='M256 0A256 256 0 0 0 49 406l-32 95 98-31A256 256 0 1 0 256 0zm149 362c-6 17-31 31-50 36-14 2-31 5-90-20a312 312 0 0 1-127-112c-4-5-31-41-31-77s19-55 26-63c16-17 43-16 51 4l23 55c2 4 4 9 2 14l-20 24c-3 4-7 9-3 16 4 8 20 32 42 52 28 25 51 33 60 37 6 2 13 2 18-3l20-26c5-8 11-9 18-6 7 2 44 21 51 24 8 4 13 6 14 9 2 3 2 18-4 36z'/%3E%3C/svg%3E")}
.telegram {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 300 300'%3E%3Cpath d='M5 145l69 25 27 86c2 6 9 8 13 4l39-31c4-3 9-3 14 0l69 50c5 4 12 1 13-5l51-245c1-6-5-11-11-9L5 129c-7 3-7 13 0 16zm92 12l135-83c2-2 5 1 3 3L123 181c-4 4-6 8-7 14l-4 28c0 4-5 4-6 0l-15-51c-2-6 1-12 6-15z'/%3E%3C/svg%3E")}
.viber {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 274 274'%3E%3Cpath d='M70 7c-20 5-45 29-50 48-8 37-8 75 0 112 5 19 30 43 50 47l1 2v55c0 3 4 3 5 2l50-52h2c26 0 52-2 78-7 20-4 45-28 50-47 8-37 8-75 0-112-5-19-30-43-50-48 0 0-72-13-136 0zm137 163c-4 8-10 15-18 19-3 2-12 2-17 0-28-11-53-26-74-49-11-13-20-28-28-43L60 74c-3-7 2-14 6-20l15-11c5-2 9-1 13 3 7 8 13 17 18 26 4 6 3 14-3 18l-7 6c-2 2-2 5-1 8 6 19 21 36 40 44l10 2c6-1 8-7 12-11s10-4 15-1l26 19c4 4 5 8 3 13zm-41-70-1-6c-1-4-3-7-6-9l-12-4c-2 0-4-2-3-5 0-2 2-3 4-3 14 1 27 10 26 28 0 2-1 3-3 3s-5-1-5-4zm-4-34-20-5c-3 0-4-2-4-4s2-4 4-4c9 1 17 2 24 6 15 8 25 22 27 38v11c-1 4-9 5-8-3 0-16-9-31-23-39zm47 53c-3 0-5-3-5-5l-1-16c-4-27-25-49-53-54l-12-2c-3 0-6 0-7-3 0-3 2-5 5-5 48 2 69 25 75 61l2 19c0 2-1 5-4 5z'/%3E%3C/svg%3E")}
.wechat {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'%3E%3Cpath d='M192 32C86 32 0 104 0 192c0 51 29 96 73 125l-25 51 69-30c15 6 30 10 47 12-3-10-4-20-4-30 0-88 86-160 192-160l29 2C364 88 286 32 192 32zm-64 120a24 24 0 1 1 0-48 24 24 0 0 1 0 48zm128 0a24 24 0 1 1 0-48 24 24 0 0 1 0 48z'/%3E%3Cpath d='M512 320c0-71-72-128-160-128s-160 57-160 128 72 128 160 128c15 0 28-2 42-5l86 37-30-60c38-23 62-59 62-100zm-208-8a24 24 0 1 1 0-48 24 24 0 0 1 0 48zm96 0a24 24 0 1 1 0-48 24 24 0 0 1 0 48z'/%3E%3C/svg%3E")}
.email {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 32 32'%3E%3Cpath d='m0 12v13q0 4 4 4h24q4 0 4-4v-13l-13 9q-3 2-6 0zM3 3q-3 0-3 3 0 3 3 5l10 7q3 2 6 0l10-7q3-2 3-5 0-3-3-3z'/%3E%3C/svg%3E")}
.icq {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath d='M15,12c0,0,3.5-0.7,4.9-0.6c1.4,0.2,3.6,1.8,3.6,3.6c0,1.7-0.9,3.7-3.1,3.4S14,14.3,14,14.3M12,15c0,0,0.5,4.9,0,6c-0.5,1.1-1.6,2.9-3.6,2.5c-2-0.4-2.9-1.4-3-3C5.4,18.8,7.8,16.2,8,16M9.9,9.9c0,0-2.8-3.1-5-3.3C2.8,6.5,0.7,7.2,0.6,9s1,3.3,3.5,3.5M12,9c0,0-0.5-4.4-1.2-5.6c-0.7-1.2-2.4-3-3.7-2.3s-2.5,2.2,0,6.4M14.3,10.1c0,0,2.3-2,3.2-3.1c1.3-1.6,1.3-5.1-0.6-6s-5.1-0.5-5.3,5.3M16.9,7.6c0,0,5.1-3,6.1,0c1,3-4.2,3.8-4.2,3.8M12.2,17.9c0,0,1.2,5.3,3.7,4.1s0.5-5.8,0.5-5.8'/%3E%3Cpath fill='white' d='M9,11.4c0,0-3.9,0.7-5,1.1c-1.1,0.4-2.3,1.7-2,3.3s1.9,1.7,2.9,1.6S7,16.8,8,16c1-0.9,1.9-1.8,1.9-1.8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.facebook {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 90 90'%3E%3Cpath d='M90 15c0-8-7-15-15-15H15C7 0 0 7 0 15v60c0 8 7 15 15 15h30V56H34V41h11v-6c0-10 8-19 17-19h12v15H62c-1 0-3 2-3 4v6h15v15H59v34h16c8 0 15-7 15-15V15z'/%3E%3C/svg%3E")}
.odnoklassniki {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 500 500'%3E%3Ccircle cx='250' cy='164' r='43'/%3E%3Cpath d='M250 0a250 250 0 1 0 0 500 250 250 0 0 0 0-500zm0 76a88 88 0 1 1-1 176 89 89 0 0 1-88-88 90 90 0 0 1 89-88zm99 211a104 104 0 0 1-38 24 179 179 0 0 1-43 10l4 5 60 60a20 20 0 0 1 5 24 24 24 0 0 1-22 14 22 22 0 0 1-15-8l-45-45c-4-5-6-4-10 0a2888 2888 0 0 1-46 46c-7 7-16 9-24 5a24 24 0 0 1-13-22c0-6 3-11 7-15l59-59 5-5c-27-3-52-10-72-26l-8-6c-9-9-10-19-3-29 6-9 17-11 28-6l6 3a118 118 0 0 0 131 1l12-6c10-3 19 1 23 9 6 9 6 18-1 26z'/%3E%3C/svg%3E")}
.vk {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 48 48'%3E%3Cpath d='M3.4 3.4C0 6.7 0 12.2 0 23v2c0 10.8 0 16.3 3.4 19.6C6.7 48 12.2 48 23 48h2c10.8 0 16.3 0 19.6-3.4C48 41.3 48 35.8 48 25v-2c0-10.8 0-16.3-3.4-19.6C41.3 0 35.8 0 25 0h-2C12.2 0 6.7 0 3.4 3.4ZM8 14.6c.3 12.5 6.5 20 17.4 20h.7v-7.2c4 .4 7 3.4 8.2 7.2h5.7a15.8 15.8 0 0 0-8.2-10c2.6-1.5 6.2-5.1 7-10h-5.1c-1.2 4-4.5 7.6-7.6 7.9v-7.9H21v13.8c-3.2-.8-7.2-4.6-7.4-13.8H8Z' fill-rule='evenodd'/%3E%3C/svg%3E")}
.instagram {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 500 500'%3E %3Cpath d='M365 0H135C61 0 0 61 0 135v230c0 74 61 135 135 135h230c74 0 135-61 135-135V135C500 61 439 0 365 0zM250 387a137 137 0 1 1 0-274 137 137 0 0 1 0 274zm140-241a40 40 0 1 1 0-81 40 40 0 0 1 0 81z'/%3E %3Ccircle cx='250' cy='250' r='90'/%3E%3C/svg%3E")}
.ytb {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 510 510'%3E %3Cpath d='M459 61c-15-5-110-10-204-10S66 56 51 61C10 74 0 163 0 255s10 181 51 194c15 5 110 10 204 10s189-5 204-10c41-13 51-102 51-194S500 74 459 61zM204 370V140l153 115-153 115z'/%3E%3C/svg%3E")}
.zoom {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 32 32'%3E%3Cpath d='M0 5h17q7 0 7 7v13h-17q-7 0-7-7zm26 14v-8l6-5v18z'/%3E%3C/svg%3E")}



/* Подвал */
#footer {
	background-color: #3A3F46;
	color: #FFF;
	clear: both;
}
#footer .guard.flex {
	justify-content: space-between;
	align-items: flex-start;
	gap: 1em;
	margin-bottom: 1em;
}
.foo_column {
	min-width: 200px;
	flex: 1 1 20%;
	flex-direction: column;
}
.foo_column h5 {
	font-size: 1.1em;
	font-weight: 400;
	letter-spacing: .04em;
	margin: .9rem 0;
}
.foo_column a,
.foo_column .brief_info {
	color: #A8A8A8;
	font-size: .9em;
}
.foo_column a {
	line-height: 1.5em;
}
.foo_column a:hover {
	text-decoration: underline;
}

#superfooter {
	background-color: #33373E;
	overflow: hidden;
	height: 35px
}
#superfooter .logo {
	line-height: 35px;
	height: 35px;
}
#soclinks a {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 10px 0 0 .2em;
	opacity: .5;
	transition: opacity .3s;
}
#soclinks a:hover {
	opacity: .95;
}

#conspectus_panel {
	position: fixed;
	box-sizing: border-box;
	width: 330px;
	top: var(--toppanel-h);
	right: -330px;
	bottom: 0;
	background-color: var(--c-toppanel);
	transition: right .3s ease;
	padding-left: 10px;
	z-index: 101;
}
#body.conspectus_is_open #conspectus_panel {
	right: 0;
}
#conspectus_panel textarea {
	display: block;
	width: 320px;
	height: calc(100% - 35px);
	border: 0;
	border-radius: 0;
	background: #FFF4BC;
	overflow: auto;
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 14px;
	line-height: 1.2;
	resize: none;
	padding: 9px 10px 25px 9px;
	overscroll-behavior: contain;
}
#conspectus_info {
	margin: 0;
	line-height: 35px;
	padding: 0;
	color: var(--c-toppanel-txt);
	font-size: 14px;
}
#conspectus_info .error {
	padding-top: 0;
	padding-bottom: 0;
}
#conspectus_info a {
	color: inherit;
}
#conspectus_info a .ava {
	vertical-align: middle;
	margin: 0 6px;
}
#conspectus_panel .showconsp {
	position: absolute;
	left: -26px;
	top: calc(50% - 28px);
	width: 16px;
	height: 56px;
	padding: 0 10px;
	color: var(--c-toppanel-txt);
	box-sizing: content-box;
}
#conspectus_panel .showconsp svg {
	width: 16px;
	height: 56px;
	fill: var(--c-toppanel);
}
#body.conspectus_is_open #conspectus_panel .showconsp svg {
	color: transparent;
}
#body.conspectus_is_open #conspectus_panel .showconsp::before {
	display: block;
	position: absolute;
	top: 25px;
	right: 10px;
}
#conspectus_panel .showconsp::before {
	display: none;
}
@media (max-width: 340px) {
	#body.conspectus_is_open #conspectus_panel .showconsp::before {
		right: 4px;
	}
}
@media (max-width: 330px) {
	#body.conspectus_is_open #conspectus_panel .showconsp {
		transform: translateX(23px) scale(-.75, 1);
	}
	#body.conspectus_is_open #conspectus_panel .showconsp::before {
		right: 10px;
		transform: scale(1.25, 1) rotate(135deg);
	}
	#conspectus_info {
		padding-left: 10px;
	}
}

#make_sliding_content {
	display: none;
}
@media (max-width: 1888px) and (min-width: 1560px) {
	#make_sliding_content {
		display: flex;
		position: absolute;
		right: 0;
		top: calc(0px - var(--toppanel-h));
		height: var(--toppanel-h);
		color: var(--c-toppanel-txt);
		font-size: 32px;
		stroke-width: 1px;
	}
	#make_sliding_content .i {
		stroke-width: 1.5px;
		width: 81px;
	}
	#make_sliding_content .i:last-child {
		display: none;
	}
	#make_sliding_content .switcher{
		font-size: 16px;
		margin: 0 10px;
	}
	#body .guard {
		transition: transform .3s ease;
	}
	#body.conspectus_is_open.sliding_content .guard {
		transform: translateX(min(0px, calc((100vw - var(--guard-mw)) / 2 - 350px)));
	}
	#body.sliding_content #make_sliding_content .i:last-child {
		display: block;
	}
	#body.sliding_content #make_sliding_content .i:first-child {
		display: none;
	}
}

/* Кнопки */
button {
	font: inherit;
	color: inherit;
	background-color: transparent;
	padding: 0;
	border: none;
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.button {
	position: relative;
	font: inherit;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: .03em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--c-btn-bg);
	background-position: 1em center;
	background-repeat: no-repeat;
	background-size: 20px;
	color: #FFF;
	border-radius: 4px;
	padding: .5em 1em;
	border: 0;
	box-sizing: border-box;
	outline: none;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: background-color .3s, color .3s, opacity .3s !important;
}
.button:hover {background-color: var(--c-btn-hvr)}
.button:active {background-color: var(--c-btn-act)}

.button.big {
	padding: 1em 2em;
	background-position: 2em center;
	border-radius: 3px;
}

.button#c,
.button.secondary {
	border: 1px solid currentColor;
	color: #8572D7;
	background-color: transparent !important;
}
.button#c:hover,
.button.secondary:hover {
	color: #9A34C9;
}
.button.disabled,
.button[disabled] {
	background-color: var(--c-btn-hvr);
	color: #AAA !important;
	border-color: #AAA;
	cursor: not-allowed;
}

.button>svg {
	float: left;
	font-size: 21px;
	margin: 0 10px 0 0;
}
.button>svg._r {
	float: right;
	margin: 0 0 0 10px;
}
a.button {display: inline-block}

.button.urb { /* Universal Round Button */
	font-size: 30px;
	width: 1em !important;
	height: 1em !important;
	min-width: 1em !important;
	padding: 0 !important;
	border-radius: 1em;
	background-image: var(--ico-x);
	background-position: center;
	background-clip: content-box;
	background-size: 26px;
}
.button.urb>svg {
	margin: 0;
	float: none;
}
.button.menu {
	background-image: var(--ico-menu);
	background-color: transparent;
	background-size: 22px;
	vertical-align: top;
}
.button.menu:hover {
	background-color: var(--c-filter-hover);
}

.button.del {
	padding: 3px;
	border-radius: 50%;
	vertical-align: middle;
}
.del > svg {
	font-size: 18px;
	margin: 0;
}
#right-sidebar .button.del {
	width: auto;
	position: absolute;
	right: 4px;
	top: 50%;
	margin-top: -50%;
	margin-top: -13.5px;
}
.del:hover,
.button.close:hover {background-color: var(--c-warning-hvr)}

/* Общие служебные классы */
#body .color-red {color: var(--c-warning-act)}
.pb-0 {padding-bottom: 0}
.pb-1 {padding-bottom: var(--padding)}
.pt-1 {padding-top: var(--padding)}
.m-0 {margin: 0 !important}
.nowrap {white-space: nowrap}
.enveloping {overflow: hidden}
.centro {text-align: center}
.selfcenter {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
}
.d-none {display: none !important}
.flex {
	display: flex;
	flex-wrap: wrap;
}
.list {
	flex-flow: column nowrap;
}
.axis {
	align-items: center;
	flex-wrap: nowrap;
}
.flex.centro {
	justify-content: center;
}
.flex.around {
	justify-content: space-around;
}
.flex.between {
	justify-content: space-between;
}

@media (min-width: 421px) {
	.desktop a:not(:hover) .del,
	.desktop label:not(:hover) .help,
	.desktop .label:not(:hover) .help,
	.desktop .newsoc:not(:hover) .del,
	.desktop .chosen:not(:hover) .kick,
	.desktop .contact:not(:hover) .kick,
	.desktop #lesson_body>div:not(:hover) .help {
		opacity: 0;
	}
}
.help:focus,
button:focus,
button:focus-visible,
[contenteditable="true"]:focus-visible {
	outline: none;
}


#popup,
.hoverscrolled {
	overflow-y: auto;
	scrollbar-color: transparent transparent;
	scrollbar-width: thin;
	overscroll-behavior: contain;
}
#popup::-webkit-scrollbar,
.hoverscrolled::-webkit-scrollbar {
	background: transparent;
	width: 8px;
}
#popup:hover,
.hoverscrolled:hover {
	scrollbar-color: #CCC transparent;
	scrollbar-width: thin;
}
#popup:hover::-webkit-scrollbar-thumb,
.hoverscrolled:hover::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: #CCC;
}

































@media (min-width: 1400px) {
	html {--fs: 16px;--guard-mw: 1200px}
}
@media (max-width: 1180px) {
	#scrollToTop {
		left: 5px;
		top: auto;
		bottom: 5px;
		right: auto;
		border: 2px solid rgba(75,54,168,.4);
		border-radius: 4px;
		padding: 3px 5px;
		background-color: rgba(255,255,255,.5);
		z-index: 50;
		box-shadow: 0 5px 20px 0 rgba(0,0,0,.3);
	}
	#scrollToTop:hover {
		background-color: #FFF;
		border-color: var(--c-btn-bg);
		box-shadow: 0 5px 20px 0 rgba(0,0,0,.7);
	}
	#body .guard {width: calc(100% - 30px)}
	#soclinks {order: -1; margin-right: 1em}
	#superfooter .guard.flex {justify-content: center}
}
@media (max-width: 1012px) {
	html {--padding: 1rem}
}
@media (min-width: 901px), (max-width: 680px) {
	.button.left {text-align: left;padding-left: calc(21px + 2em)}
	.button.left>svg {margin-left: -34px}
}
@media (max-width: 900px) and (min-width: 681px) {
	html {--sidebar-width: 200px}
	#right-sidebar {font-size: 12px}
	#right-sidebar .button:not(.urb) {font-size: 11px; background-image: none}
	#right-sidebar .button:not(.urb) svg:not(.m-0) {display: none}
	#tsklist {padding-bottom: 1px}
	#tsklist a, .filter {height: 34px; line-height: 34px}
	#advanced_sorting_panel input, #tsklist input, .desck {font-size: 11px}
	#tsklist a.act::after, .filter.act::after {border-top-width: 17px; border-bottom-width: 17px}
	#tsklist a.act::before, .filter.act::before {border-top-width: 18px; border-bottom-width: 18px; margin-top: -1px}
	#tsklist .icons, #wordlist .icons {font-size: 13px; line-height: 24px}
	#tsklist .mark {font-size: 12px; line-height: 2; width: 30px}
	#helper h4 {font-size: 14px}
	#sliding_window .button {padding-left: 2em; text-align: left}
	.avatar {margin-right: 1em}
	#about_me {width: calc(100% - 5em - 150px)}
	.optional {display: none}
}
@media (max-width: 768px) and (min-width: 681px) {
	#wrapper #lesson_body {--padding: .5rem}
}
@media (max-width: 680px) {
	#body {overflow-x: hidden}
	#body .help {opacity: 1}
	#wrapper {max-width: 100%}
	#infoicons {flex: 1 1 auto}
	#right-sidebar {
		position: fixed;
		top: 42px;
		left: 100vw;
		width: 100vw;
		bottom: 0;
		margin: 0;
		height: calc(100vh - 42px);
		background-color: transparent;
		backdrop-filter: blur(0);
		transition: background-color .3s, backdrop-filter .3s, left 0s linear .3s;
		z-index: 95;
	}
	#right-sidebar.putforward {
		left: 0;
		background-color: rgba(0,0,0,.5);
		backdrop-filter: blur(4px);
		transition: background-color .3s, backdrop-filter .3s;
	}
	#right-sidebar.putforward #hovering {right: 0}
	#hovering {
		position: absolute;
		top: 0;
		bottom: 0;
		right: calc(0px - var(--sidebar-width));
		background-color: var(--c-main-bg);
		transition: right ease-in .3s;
		overflow-y: auto;
		scrollbar-width: thin;
	}
	#hovering::after {
		content: '';
		display: block;
		height: 4rem;
	}
	#persons {
		overflow: hidden;
		background-color: var(--c-content-bg);
		padding: 0 1rem;
		width: calc(var(--sidebar-width) - var(--indent));
		box-sizing: border-box;
	}
	#persons #qr {width: 100%;border: 0}
	#persons .widget {width: 100%;border: 0}
	#about_me {width: calc(100% - 5em - 100px); height: 56px}
	#menu-btn {
		display: block;
		background-image: none;
	}
	#menu-btn span,
	#menu-btn span::before,
	#menu-btn span::after {
		position: absolute;
		top: 50%; margin-top: -1px;
		left: 50%; margin-left: -10px;
		width: 20px;
		height: 2px;
		background-color: var(--c-toppanel-txt);
		border-radius: 1px;
	}
	#menu-btn span::before,
	#menu-btn span::after {
		content: '';
		display: block;
		transition: .6s;
	}
	#menu-btn span::before {
		transform: translateY(-5px);
	}
	#menu-btn span::after {
		transform: translateY(5px);
	}

	#menu-btn.active span:before {
		transform: rotate(35deg);
		transform-origin: 120% 600%;
		width: 13px;
	}
	#menu-btn.active span:after {
		transform: rotate(-35deg);
		transform-origin: 120% -500%;
		width: 13px;
	}
}
@media (max-width: 550px) {
	#searchform {display: none}
}
@media (max-width: 500px) {
	h1 {font-size: 2em}
	h2 {font-size: 1.7em}
	h3 {font-size: 1.3em}
	#popup {--popupgap: 1.2rem}
	.onlydesktop {display: none}
	#multiplechoice .prelesson .pretask {padding-left: 1em}
}
@media (max-width: 480px) {
	.notmobile {display: none}
}
@media (max-width: 460px) {
	#superfooter .logo {display: none}
	#about_me {height: 60px}
}
@media (max-width: 400px) {
	.logo {flex: 0 0 0; overflow: hidden}
}