@charset "utf-8";

html {
	font-size: 20px;
	touch-action: none;
}
body {
	display: block !important;
	background: black;
	color: rgba(255, 255, 255, 0.9);
	font-family: Calibri, Carlito, sans-serif;
	margin: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	--mobile-chat-height: 66vh;
	--sidebar-width: 19rem;
}
button, input, textarea {
	font-family: Calibri, Carlito, sans-serif;
	font-size: 1em;
	box-sizing: border-box;
}
::-webkit-scrollbar {
	width: 0.2em;
	height: 0.2em;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.5);
}
* {
	scrollbar-width: thin;
	scrollbar-color: #bbb transparent;
}
*[contenteditable="true"] {
	cursor: text;
}
*[contenteditable="true"][placeholder]:empty:not(:focus)::after {
	content: attr(placeholder);
	display: inline;
	opacity: 0.5;
	pointer-events: none;
}
*[placeholder]::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
*[placeholder]:focus::placeholder {
	opacity: 0;
}
@font-face {
	font-family: freeserif;
	src: url("FreeSerif.woff?asset_version=28722475");
}
@font-face {
	font-family: Montserrat;
	font-weight: normal;
	font-style: normal;
	src: url("Montserrat-Regular.ttf?asset_version=28722475");
}
@font-face {
	font-family: Montserrat;
	font-weight: bold;
	font-style: normal;
	src: url("Montserrat-Bold.ttf?asset_version=28722475");
}
@font-face {
	font-family: Montserrat;
	font-weight: normal;
	font-style: italic;
	src: url("Montserrat-Italic.ttf?asset_version=28722475");
}
@font-face {
	font-family: Montserrat;
	font-weight: bold;
	font-style: italic;
	src: url("Montserrat-BoldItalic.ttf?asset_version=28722475");
}
@font-face {
	font-family: Carlito;
	font-weight: normal;
	font-style: normal;
	src: url("Carlito-Regular.ttf?asset_version=28722475");
}
@font-face {
	font-family: Carlito;
	font-weight: bold;
	font-style: normal;
	src: url("Carlito-Bold.ttf?asset_version=28722475");
}
@font-face {
	font-family: Carlito;
	font-weight: normal;
	font-style: italic;
	src: url("Carlito-Italic.ttf?asset_version=28722475");
}
@font-face {
	font-family: Carlito;
	font-weight: bold;
	font-style: italic;
	src: url("Carlito-BoldItalic.ttf?asset_version=28722475");
}
@font-face {
	font-family: 'Material Icons Main';
	font-style: normal;
	font-weight: 400;
	src: url(MaterialIconsOutlined-Regular.otf?asset_version=28722475);
}
@font-face {
	font-family: 'Material Icons Flat';
	font-style: normal;
	font-weight: 400;
	src: url(MaterialIcons-Regular.ttf?asset_version=28722475);
}
@font-face {
	font-family: 'glyphs';
	font-style: normal;
	font-weight: 400;
	src: url(glyphs.otf?asset_version=625354);
}
@keyframes appear {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}
body.wait, body.wait *,
body.wait-slides, body.wait-slides * {
	cursor: progress;
}
body.background * {
	transition: none !important;
	display: none !important;
}
button {
	background: #ccc;
	color: #222;
	border: 0px #666 solid;
	outline: none;
	cursor: pointer;
	margin: 1px;
}
button:disabled, button:disabled * {
	color: #777;
	cursor: inherit;
}
button:disabled {
	background: #222;
}
label {
	display: inline-block;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
}
label .help > * {
	display: none;
}
label .help::before {
	content: "help";
	display: inline-block;
	font-size: 0.5em;
	color: rgba(255, 255, 255, 0.5);
	font: normal normal normal 1em/1 'Material Icons Main';
	font-family: 'Material Icons Main';
	user-select: none;
	text-overflow: clip !important;
	text-rendering: auto;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: -0.2em;
}
@media (pointer: coarse) {
	label .help {
		padding: 1em;
		margin: -1em;
		z-index: 100;
		position: relative;
	}
}
/*@media (hover: hover) {*/
	body.mouse label:hover {
		color: white;
	}
	body.mouse label .help:hover::before {
		color: white;
	}
/*}*/
label span {
	width: 9em;
	display: inline-block;
}
form:invalid *[type="submit"] {
	background: rgba(255, 255, 255, 0.27);
	/*filter: grayscale(100%) !important;*/
	cursor: not-allowed;
	opacity: 0.5;
}
#mini-iframe:target ~ #media #media-control,
#mini-iframe:target ~ #chat,
#mini-iframe:target ~ #icons,
#mini-iframe:target ~ #control {
	display: none;
}
#mini-iframe#mini-iframe:target ~ #media,
#mini-iframe#mini-iframe:target ~ #descr {
	margin: 0;
	--top: 0px;
	--bottom: 0px;
	--right: 0px;
	--left: 0px;
}
#login-forbidden {
	display: none;
}
#mini-iframe:target ~ * #login-allowed,
#full-iframe:target ~ * #login-allowed {
	display: none;
}
#mini-iframe:target ~ * #login-forbidden,
#full-iframe:target ~ * #login-forbidden {
	display: block;
}
body.blur > *:not(.popup):not(.central):not(.fakepip) {
	filter: blur(4px);
}
body > .visible {
	display: block;
}
.popup form label,
.popup form label select {
	cursor: pointer;
	display: inline-block;
	width: 100%;
	max-width: 100%;
	text-align: left;
	box-sizing: border-box;
	white-space: nowrap;
	padding: 0 0.5rem;
}
.popup form label select {
	padding: 0.75rem 0 0.75rem 9rem;
	margin-left: -9rem;
	background: transparent;
	border: none;
	outline: none;
	color: rgba(255, 255, 255, 0.7);
}
.popup form label button.unset {
	margin-left: -6rem;
}
.popup form label select option {
	background: black;
}
.popup summary {
	cursor: pointer;
}
.popup pre {
	max-height: 50vh;
	max-width: 65vw;
	overflow: auto;
	padding: 0.5em;
	border: rgba(0, 0, 0, 0.8) 1px solid;
	background: rgba(0, 0, 0, 0.7);
	box-sizing: border-box;
	user-select: contain;
	text-align: justify;
}
.popup pre .hidden {
	display: none;
}
.popup pre a.button {
	float: right;
	background: rgba(32, 32, 32);
}
.popup input[name="showall"]:checked ~ pre .hidden {
	display: block;
}
.popup input[name="showall"]:checked ~ pre .antihidden {
	display: none;
}
.adaptive-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
@media (max-width: 600px) {
	.adaptive-row {
		flex-direction: column;
		align-items: stretch;
	}
}
.ma, .slider .col::after {
	display: inline-block;
	font: normal normal normal 1em/1 'Material Icons Main';
	font-family: 'Material Icons Main';
	user-select: none;
	text-overflow: clip !important;
	text-rendering: auto;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: -0.2em;
}
.g {
	display: inline-block;
	font: normal normal normal 1em/1 glyphs;
	font-family: glyphs;
	user-select: none;
	text-overflow: clip !important;
	text-rendering: auto;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: -0.2em;
	font-size: clamp(16px, 48px, 1em);
}
.mont {
	font-family: Montserrat;
}
.fser {
	font-family: freeserif;
}
*[data-glyph]::before {
	display: inline-block;
	content: attr(data-glyph);
	max-width: 1em;
}
*[id^="template-"] {
	display: none;
}
#central-wrapper {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 60;
	pointer-events: none;
}
.central {
	display: none;
	min-width: 40vw;
	max-width: 80vw;
	width: -moz-min-content;
	width: min-content;
	margin: auto;
	max-height: 80vh;
	overflow: auto;
	padding: 1em;
	pointer-events: auto;
}
.central .navback {
	float: left;
	margin: 0.7em 0;
}
.central h1 {
	text-align: center;
}
.central .button {
	display: block;
	width: 100%;
	background: #191919;
	border: none;
	margin-bottom: 0.5rem;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.7);
	box-sizing: border-box;
	font-size: 1rem;
	outline: none;
}
.central .nobutton {
	display: block;
	width: 100%;
	background: none;
	border: none;
	margin-bottom: 0.5rem;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.7);
	box-sizing: border-box;
	font-size: 1rem;
	outline: none;
}
@media (max-width: 640px) {
	.central .button:not(.square):not(.square2x):not(.square15x) {
		min-width: 80vw;
	}
	.central .form-group .button:not(.square):not(.square2x):not(.square15x) {
		min-width: 70vw;
	}
}
.central .footer {
	position: sticky;
	bottom: -1.1em;
	padding: 0.1em 0;
	background: black;
	margin: 0;
	margin-bottom: -1em;
}
.webinar-open {
	transition: max-height 0.1s ease-in-out, min-height 0.1s ease-in-out;
	min-height: 2rem;
	max-height: 3rem;
}
.webinar-open[open] {
	min-height: 10rem;
	max-height: 20rem;
}
#join-webinar-list > details > summary::before,
#join-webinar-list > details > summary::after,
#join-webinar-list > details .your-status::before,
#join-webinar-list > details .webinar-status::before,
#join-webinar-list > details .webinar-size::before {
	display: inline-block;
	font: normal normal normal 1em/1 'Material Icons Main';
	font-family: 'Material Icons Main';
	user-select: none;
	text-overflow: clip !important;
	text-rendering: auto;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: -0.2em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	content: "voicemail";
}
body:not(.admin) #join-webinar-list > details:not([data-status="owner"]) button.delete {
	display: none;
}
#join-webinar-list > details > summary::after,
#join-webinar-list > details .your-status::before {
	content: '';
}
#join-webinar-list > details .webinar-size::before {
	content: 'save';
}
#join-webinar-list > details[data-status="owner"] > summary::after,
#join-webinar-list > details[data-status="owner"] .your-status::before {
	content: 'edit';
}
#join-webinar-list > details[data-status="presenter"] > summary::after,
#join-webinar-list > details[data-status="presenter"] .your-status::before {
	content: 'videocam';
}
#join-webinar-list > details[data-status="moderator"] > summary::after,
#join-webinar-list > details[data-status="moderator"] .your-status::before {
	content: 'gavel';
}
#join-webinar-list > details[data-status="visitor"] > summary::after,
#join-webinar-list > details[data-status="visitor"] .your-status::before {
	content: 'visibility';
}
#join-webinar-list > details[data-ended="null"] > summary::before,
#join-webinar-list > details[data-ended="null"] .webinar-status::before {
	content: "play_arrow";
}
#join-webinar-list > details[data-started="null"] > summary::before,
#join-webinar-list > details[data-started="null"] .webinar-status::before {
	content: "schedule";
}
#join-webinar-list details > div {
	width: 80%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
#join-webinar-list details div .button {
	min-width: 100%;
}
#join-webinar-list:empty[data-loaded]::after {
	content: 'Нет доступных вебинаров';
}
#join-webinar-list:empty::after {
	content: 'Список вебинаров не загружен';
	display: block;
	text-align: center;
}
#popup-add-playlist-list:empty::after {
	content: 'Список пуст';
	display: block;
	text-align: center;
}
.popup:not(.container), .popup.container > div:not(.slide) {
	max-width: 60vw;
	min-width: 30vw;
	min-width: max(30vw, 20em);
	max-height: 80vh;
	width: 20em;
	width: min-content;
	overflow: auto;
	padding: 1em;
	/*background: rgba(128, 128, 128, 0.9);*/
	margin: 0 !important;
}
.popup.container > div {
	z-index: 50;
}
/*.popup.container {
	box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 max(100vw, 100vh);
}*/
.popup.container::before {
	content: " ";
	display: block;
	position: fixed;
	left: -100vw;
	right: -100vw;
	top: -100vh;
	bottom: -100vh;
	z-index: -100;
	background: rgba(0, 0, 0, 0.5);
}
body:not(.blur) .popup.container::before {
	backdrop-filter: blur(4px);
}
.popup {
	z-index: 200;
	position: fixed;
	left: 50vw;
	top: 50vh;
	transform: translate(-50%, -50%);
	display: none;
	text-align: center;
	word-break: break-word;
	margin-right: -50vw;
	margin-bottom: -50vh;
}
.popup form {
	text-align: justify !important;
	display: inline-block;
	margin: 0;
	width: 100%;
}
.popup form label input,
.popup form label button {
	max-width: calc(100% - 9rem);
	width: auto;
	display: inline-block;
}
.chatmsg.nousername .for-user,
#tab-mod.nousername .for-user,
.visitor-listitem > .usercolor.nousername ~ .popbuttons .for-user {
	display: none;
}
.chatmsg.banned .not-for-banned,
#tab-mod.banned .not-for-banned,
.visitor-listitem > .usercolor.banned ~ .popbuttons .not-for-banned {
	display: none;
}
.chatmsg:not(.banned) .for-banned,
#tab-mod:not(.banned) .for-banned,
.visitor-listitem > .usercolor:not(.banned) ~ .popbuttons .for-banned {
	display: none;
}
.chatmsg.dead .not-for-dead,
#tab-mod.dead .not-for-dead,
.visitor-listitem > .usercolor.dead ~ .popbuttons .not-for-dead {
	display: none;
}
.chatmsg:not(.dead) .for-dead,
#tab-mod:not(.dead) .for-dead,
.visitor-listitem > .usercolor:not(.dead) ~ .popbuttons .for-dead {
	display: none;
}
.chatmsg:not(.chat) .for-chat,
#tab-mod:not(.chat) .for-chat,
.visitor-listitem > .usercolor:not(.chat) ~ .popbuttons .for-chat {
	display: none;
}
.chatmsg:not(.confirmed) .for-confirmed,
#tab-mod:not(.confirmed) .for-confirmed,
.visitor-listitem > .usercolor:not(.confirmed) ~ .popbuttons .for-confirmed {
	display: none;
}
.chatmsg:not(.moderator) .for-moderator,
#tab-mod:not(.moderator) .for-moderator,
.visitor-listitem > .usercolor:not(.moderator) ~ .popbuttons .for-moderator {
	display: none;
}
.chatmsg:not(.presenter) .for-presenter,
#tab-mod:not(.presenter) .for-presenter,
.visitor-listitem > .usercolor:not(.presenter) ~ .popbuttons .for-presenter {
	display: none;
}
.chatmsg:not(.copresenter) .for-copresenter,
#tab-mod:not(.copresenter) .for-copresenter,
.visitor-listitem > .usercolor:not(.copresenter) ~ .popbuttons .for-copresenter {
	display: none;
}
.chatmsg:not(.owner) .for-owner,
#tab-mod:not(.owner) .for-owner,
.visitor-listitem > .usercolor:not(.owner) ~ .popbuttons .for-owner {
	display: none;
}
.chatmsg:not(.guest) .for-guest,
#tab-mod:not(.guest) .for-guest,
.visitor-listitem > .usercolor:not(.guest) ~ .popbuttons .for-guest {
	display: none;
}
.chatmsg:not(.unmoderated) .for-unmoderated,
#tab-mod:not(.unmoderated) .for-unmoderated,
.visitor-listitem > .usercolor:not(.unmoderated) ~ .popbuttons .for-unmoderated {
	display: none;
}
.chatmsg:not(.presenter):not(.owner):not(.moderator) .for-presenter,
#tab-mod:not(.presenter):not(.owner):not(.moderator) .for-presenter,
.visitor-listitem > .usercolor:not(.presenter):not(.owner):not(.moderator) ~ .popbuttons .for-presenter {
	display: none;
}
.chatmsg.confirmed .not-for-confirmed,
#tab-mod.confirmed .not-for-confirmed,
.visitor-listitem > .usercolor.confirmed ~ .popbuttons .not-for-confirmed {
	display: none;
}
.chatmsg.moderator .not-for-moderator,
#tab-mod.moderator .not-for-moderator,
.visitor-listitem > .usercolor.moderator ~ .popbuttons .not-for-moderator {
	display: none;
}
.chatmsg.presenter .not-for-presenter,
#tab-mod.presenter .not-for-presenter,
.visitor-listitem > .usercolor.presenter ~ .popbuttons .not-for-presenter {
	display: none;
}
.chatmsg.copresenter .not-for-copresenter,
#tab-mod.copresenter .not-for-copresenter,
.visitor-listitem > .usercolor.copresenter ~ .popbuttons .not-for-copresenter {
	display: none;
}
.chatmsg.owner .not-for-owner,
#tab-mod.owner .not-for-owner,
.visitor-listitem > .usercolor.owner ~ .popbuttons .not-for-owner {
	display: none;
}
.chatmsg.guest .not-for-guest,
#tab-mod.guest .not-for-guest,
.visitor-listitem > .usercolor.guest ~ .popbuttons .not-for-guest {
	display: none;
}
.chatmsg.unmoderated .not-for-unmoderated,
#tab-mod.unmoderated .not-for-unmoderated,
.visitor-listitem > .usercolor.unmoderated ~ .popbuttons .not-for-unmoderated {
	display: none;
}
.chatmsg.presenter .not-for-staff,
#tab-mod.presenter .not-for-staff,
.visitor-listitem > .usercolor.presenter ~ .popbuttons .not-for-staff,
.chatmsg.owner .not-for-staff,
#tab-mod.owner .not-for-staff,
.visitor-listitem > .usercolor.owner ~ .popbuttons .not-for-staff,
.chatmsg.moderator .not-for-staff,
#tab-mod.moderator .not-for-staff,
.visitor-listitem > .usercolor.moderator ~ .popbuttons .not-for-staff {
	display: none;
}
/*#tab-mod.chat label[for="radio-users"],
#tab-mod.chat ~ #tab-priv label[for="radio-users"] {
	display: none;
}
#tab-mod:not(.chat) label[for="radio-chat"],
#tab-mod:not(.chat) ~ #tab-priv label[for="radio-chat"] {
	display: none;
}*/
#chat:not([open]) > summary {
	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
	background-color: rgba(0, 0, 0, 0);
}
#chat.ping:not([open]) > summary {
	transform: scale(3);
	background-color: rgba(0, 0, 0, 0.8);
}
#chat-down.ping {
	transform: scale(2);
}
#chat #tab-mod .chatmsg {
	cursor: default;
}
.chatmsg .text {
	outline: none;
	white-space: pre-wrap;
}
#chathist .deleteme {
	display: none;
}
#chathist .chatmsg .save,
#chathist .chatmsg .premod-indicator {
	flex-shrink: 0;
	flex-grow: 0;
	border: none;
	order: 200;
	background: rgba(255, 255, 255, 0.1);
	width: 4rem;
	border-radius: 0.75rem;
	box-sizing: border-box;
}
#chathist .chatmsg .save {
	height: 2.75rem;
}
.premod-indicator {
	text-align: center;
	color: #ffb800;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
/*@media (hover: hover) {*/
	body.mouse #chathist .chatmsg .save:hover {
		color: #86c500;
		filter: none !important;
	}
/*}*/
.chatmsg:not(.self) .save,
.chatmsg:not(.self) .premod-indicator {
	margin-left: 0.5rem;
}
.chatmsg.self .save,
.chatmsg.self .premod-indicator {
	margin-right: 0.5rem;
}
.chatmsg:not(.editing) .save,
.chatmsg.editing .premod-indicator,
.chatmsg.confirmed .premod-indicator,
.chatmsg .popbuttons.visible ~ .premod-indicator {
	display: none;
}
/*@media (hover: hover) {*/
	body.mouse .chatmsg .popbuttons .quote:hover {
		color: cyan;
		filter: none !important;
	}
	body.mouse .chatmsg .popbuttons .confirm:hover {
		color: #86c500;
		filter: none !important;
	}
	body.mouse .chatmsg .popbuttons .edit:hover {
		color: #ffb800;
		filter: none !important;
	}
	body.mouse .chatmsg .popbuttons .delete:hover {
		color: #d10505;
		filter: none !important;
	}
/*}*/
#moderation-post {
	width: 100%;
	height: 5em;
	outline: none;
	resize: none;
	font-size: 1em;
	/*text-shadow: 1px 1px 4px black;*/
	color: rgba(255, 255, 255, 0.9);
}
#moderation-ip::before {
	content: 'Текущий IP: ';
	display: inline;
}
#moderation-ip:empty::before {
	content: 'Текущий IP: неизвестен';
}
#moderation-ip.offline::after {
	/*display: inline-block;
	font-family: 'Material Icons Main';
	user-select: none;
	font: normal normal normal 1em/1 'Material Icons Main';
	text-overflow: clip !important;
	text-rendering: auto;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "person_off";
	position: relative;
	top: 0.2em;
	margin-left: 0.5em;*/
	display: block;
	content: 'Сейчас не на вебинаре';
}
#camsel-form label.invalid {
	background: rgba(128, 64, 64, 0.9);
}
#camsel-error {
	background: rgba(128, 64, 64, 0.9);
	padding: 1em;
	white-space: pre-line;
	width: max-content;
	max-width: 100%;
	margin: auto;
}
#camsel-error:not(.visible) {
	display: none;
}
#camsel-cam-shot {
	max-width: 60vw;
	height: 40vh;
	margin: auto;
}
html.nojs #error .close,
html.noasync #error .close,
body.fatal #error .close {
	display: none;
}
#error > div {
	background: rgba(128, 64, 64, 0.9);
}
#error {
	z-index: 10000;
}
#errlog {
	white-space: pre;
}
html.nojs #error, html.noasync #error {
	display: block;
}
html.nojs #errlog::before {
	display: block;
	content: "JavaScript не поддерживается вашим браузером или отключён. Включите его или обновите браузер.";
}
html.noasync #errlog::before {
	display: block;
	content: "Ваш браузер не поддерживает асинхронные функции. Пожалуйста, обновите браузер.";
}
#connecting, #slowlink {
	display: block;
	z-index: 900;
	position: absolute;
	left: 0;
	right: 0;
	top: -6em;
	background: rgba(128, 128, 128, 0.9);
	text-align: center;
	line-height: 1;
	height: 1em;
	padding: 1em;
	transition: transform 0.4s ease-in-out;
	pointer-events: none;
	opacity: 0.9;
}
#slowlink {
	background: rgba(128, 64, 64, 0.9);
	transition: transform 0.4s 3s ease-in-out;
}
body.connecting:not(.fatal) #connecting {
	transform: translate(0, 6em);
}
body.slowlink:not(.fatal) #slowlink {
	transform: translate(0, 6em);
	transition: transform 0.4s ease-in-out;
}
body[data-mode="started"] #copresenter-control,
body[data-mode="testing"] #copresenter-control {
	position: absolute;
	z-index: 100;
	left: 0;
	top: 0;
	border: none;
	background: rgba(128,128,128,0.8);
	font-size: 4em;
	padding: 0.1em;
}
body[data-mode="started"]:not(.blur) #copresenter-control,
body[data-mode="testing"]:not(.blur) #copresenter-control {
	backdrop-filter: blur(2px);
}
#control video {
	display: block;
	width: 100%;
	max-height: 4rem;
	box-sizing: border-box;
	border: gray 1px solid;
	background: gray;
	cursor: pointer;
}
#control .video-container {
	margin: 2px 2rem;
	position: relative;
	transition: margin 0.3s ease-in-out;
}
#control .video-container > .overlay {
	display: none;
	position: absolute;
	background: gray;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 100;
}
#control .video-container.show-volume .overlay.volume {
	display: block;
}
#control .video-container.show-volume .close,
#control .video-container.show-volume .pin {
	display: none;
}
#control .video-container .overlay.volume .slider {
	font-size: 1.5em;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 1em;
	right: 1em;
}
#control .video-container .overlay.volume .slider .col::after {
	content: "volume_down";
	color: black;
}
body[data-mode="started"] #control .video-container.playpub,
body[data-mode="testing"] #control .video-container.playpub {
	margin-bottom: 3.5em;
}
#control .out-left {
	position: absolute;
	left: -2rem;
	top: 0;
	bottom: 0;
}
#control .out-right {
	position: absolute;
	right: -2rem;
	top: 0;
	bottom: 0;
}
#control .out-left .minibtn,
#control .out-right .minibtn {
	margin: 0;
	margin-bottom: -0.2em;
}
body:not([data-mode="started"]):not([data-mode="testing"]) #control .video-container .playpubonly,
#control .video-container:not(.playpub) .playpubonly {
	display: none;
}
#control .video-container .playpubonly {
	position: absolute;
	margin-top: -0.9em;
	width: 100%;
}
#control .video-container .playpubonly .slider {
	z-index: 15;
}
#control .video-container .playpubonly .slider .lbl-left {
	font-size: 1.5em;
	margin-top: 1em;
	margin-left: -2em;
	pointer-events: none;
}
#control .video-container .playpubonly .buttons {
	display: flex;
	width: 100%;
	justify-content: space-around;
}
#control .video-container .playpubonly .buttons .square2x {
	border: none;
	background: none;
}
#vup-progress {
	display: none;
}
#control.vupload #vup-progress {
	display: block;
}
#control.vupload #control-addvid, #control.vupload #control-addmusic {
	pointer-events: none;
	filter: brightness(0.5);
}
#vup-progress-text {
	white-space: pre-wrap;
	min-height: 4rem;
	background: gray;
	color: black;
	padding: 0.5em;
	box-sizing: border-box;
}
.button, .nobutton, .popup form button {
	padding: 0.5em;
	border: rgba(128, 128, 128, 0.5) 1px solid;
	border-radius: 0.2em;
	text-align: center;
	cursor: pointer;
	background: transparent;
	color: inherit;
	line-height: 1;
	box-sizing: border-box;
	display: inline-block;
	margin: 1px;
	text-decoration: none;
	/*font-size: inherit;*/
}
.nobutton {
	border: none;
	background: none;
}
a.nobutton {
	text-decoration: underline;
}
.popup form button,
#descr .central button,
form.central:not(:invalid) label ~ .button,
.form-group .button {
	background: #1865a7;
	width: 100%;
	display: inline-block;
}
.popup form button:disabled, #descr .central button:disabled {
	background: #656565;
}
.popup form input, #descr .central input {
	width: 100%;
	display: block;
}
.popup form input, .central input, .popup form textarea {
	background: transparent;
	border: none;
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	outline: none;
	color: rgba(255, 255, 255, 0.9);
}
.popup form input:focus, .central input:focus {
	border-bottom: 2px solid rgba(255, 255, 255, 0.7);
}
.popup form input.button {
	background: rgba(32, 105, 165, 0.5)
		linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%)
		no-repeat;
	background-size: calc(100% - 6px) 2px;
	background-position: center 1.75em;
	border: none;
	display: block;
	margin-bottom: 0.1em;
}
.popup form input.button:focus {
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
}
/*@media (hover: hover) {*/
	/* .button may be a div or a span, so don't replace :not(:disabled) with :enabled */
	body.mouse .button:hover:not(:disabled):not([type="text"]), body.mouse .popup form button:hover:enabled {
		background-color: #1865a7;
	}
/*}*/
.minibtn.close::before, .minibtn.up::before, .minibtn.down::before, .minibtn.chat::before, .minibtn.mute::before, .minibtn.pin::before, .minibtn.extra::before {
	display: inline-block;
	font-family: 'Material Icons Main';
	user-select: none;
	text-overflow: clip !important;
	/*font-weight: bold;*/
	text-rendering: auto;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.minibtn.close::before {
	font-family: 'Glyphs';
	content: "clear";
}
.minibtn.chat::before {
	font-family: 'Glyphs';
	content: "chat";
}
.popup > .minibtn.close::before, .container > .minibtn.close::before, #descr .minibtn.close::before {
	background: transparent;
	border-radius: 0.3em;
}
.minibtn.up::before {
	content: "arrow_upward";
}
/*@media (hover: hover) {*/
	body.mouse .popup > .minibtn.close:hover::before, body.mouse .container > .minibtn.close:hover::before, body.mouse #descr .minibtn.close:hover::before {
		content: "clear_test";
		/*background: red;
		color: gray;
		border-radius: 0.3em;*/
	}
/*}*/
.minibtn.down::before {
	content: "arrow_downward";
}
.video-container:not(.mute) .minibtn.mute::before {
	content: "volume_up";
	color: white;
	font-family: glyphs;
}
.video-container.mute .minibtn.mute::before {
	content: "volume_off";
	font-family: glyphs;
}
.video-container.mic-dead .minibtn.mute {
	filter: none;
	pointer-events: none;
}
.video-container.mic-dead .minibtn.mute::before {
	content: "volume_off";
	color: red;
	font-family: glyphs;
}
.minibtn.pin::before {
	content: "push_pin";
	font-family: glyphs;
}
.video-container.pinned .minibtn.pin::before {
	color: white;
}
/*.video-container:not(.playpub) .minibtn.extra {
	display: none;
}
body:not([data-mode="started"]):not([data-mode="testing"]) .minibtn.extra {
	display: none;
}
.minibtn.extra {
	right: -0.4rem;
	bottom: -0.3rem;
}
.minibtn.extra::before {
	content: "more_horiz";
}*/
.minibtn.close {
	right: -0.3em;
	top: -0.3em;
	color: red;
	font-family: freeserif;
	z-index: 4000;
}
.minibtn.close, .minibtn.down, .minibtn.up, .minibtn.mute, .minibtn.pin, .minibtn.extra, .minibtn.chat {
	background: transparent;
	padding: 0.2em;
	box-sizing: content-box;
	filter: grayscale(100%) brightness(200%);
}
/*#descr .minibtn.close {
	filter: grayscale(100%) brightness(200%);
}*/
.popup > .minibtn.close, .container > .minibtn.close, #descr .minibtn.close {
	font-size: 1.3em;
	filter: none;
	padding: 1.2em;
	right: -1.3em;
	top: -1.3em;
}
.minibtn.pin {
	bottom: 0;
}
.minibtn.down {
	bottom: 0;
}
.minibtn.chat {
	bottom: 0;
	right: -0.3em;
}
.minibtn.prev, .minibtn.turnleft {
	left: 0.4em;
}
.minibtn.next, .minibtn.turnright {
	right: 0.4em;
}
.minibtn.prev, .minibtn.next, .minibtn.turnleft, .minibtn.turnright {
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	font-size: 1.5em;
	line-height: 1.3;
}
#control .video-container:not(.have-next) .minibtn.next {
	display: none;
}
#control .video-container:not(.have-prev) .minibtn.prev {
	display: none;
}
#control .video-container:not(.camera):not(.playpub) .minibtn.turnright {
	display: none;
}
#control .video-container:not(.camera):not(.playpub) .minibtn.turnleft {
	display: none;
}
#control .video-container.nosound .minibtn.mute {
	visibility: hidden;
	pointer-events: none;
}
.minibtn {
	display: block;
	position: absolute;
	width: 1.2em;
	height: 1.2em;
	padding: 0;
	line-height: 1;
	border-radius: 100%;
	border-width: 0;
	z-index: 100;
	color: #444;
	font-size: 1.3rem;
}
#control .video-container.selected::before {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	content: " ";
	display: block;
	opacity: 0.8;
	box-shadow: inset 0 0 0 2px currentColor;
}
#control .tab-body {
	bottom: 4rem;
	padding: 1rem 1rem 0;
}
#control .tab-body .hdr, #chat .tab-body > .wrap > .hdr, .bgwrap > .hdr.btnwrap {
	position: sticky;
	top: 0;
	z-index: 6000;
	border-bottom: solid 2px currentColor;
	justify-content: center;
	padding-bottom: 0.5rem;
}
#control .tab-body .hdr, #chat .tab-body > .wrap > .hdr {
	background: #191919;
}
#chat .tab-body > .wrap > .ftr {
	position: sticky;
	bottom: 0.5em;
	height: 3em;
	margin-top: -4em;
	z-index: 200;
	justify-content: right;
	padding-bottom: 0.5rem;
	text-align: right;
	overflow: visible;
	float: right;
	pointer-events: none;
}
#chat .tab-body > .wrap > .ftr .button {
	pointer-events: auto;
	border: none;
	transition: opacity 0.3s ease-in-out 0s, transform 0.15s ease-in-out 0s;
}
#control-wrap {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
}
#control-wrap hr {
	margin-left: 0;
	margin-right: 0;
}
#control-streams {
	flex-grow: 1;
	overflow: hidden auto;
	padding: 0.5em 0.5em 0;
	margin: -0.5em -0.5em 0;
}
body.wait-slides #control-streams::after,
body.wait-slides #control-slides::after {
	display: block;
	content: '...';
	text-align: center;
	font-weight: bold;
	font-size: 3em;
}
#control:not([open]) {
	width: 2.5rem;
}
#control-slides {
	overflow: hidden auto;
	max-height: 100%;
}
#control-slides .slide {
	text-align: center;
	margin: 1rem 2rem;
	position: relative;
	border: 2px transparent solid;
	cursor: pointer;
}
#control-slides .slide.active {
	border-color: rgba(255, 255, 255, 0.5);
}
#control-slides img {
	max-width: 100%;
	min-height: 6rem;
	display: block;
}
#control-slides,
#control-polls {
	/*margin: 1rem;*/
}
#control-polls .slide,
.container .bgwrap,
.popup .slide.wrap {
	/*margin: 1rem;*/
	background: rgba(255, 255, 255, 0.1);
	padding: 1rem 0.2rem;
	border-radius: 0.5rem;
	cursor: default;
}
#control-polls .slide .edit {
	background: none;
	color: #aaa;
	margin-top: -0.25em;
	margin-left: -1.3em;
}
#descr .container .bgwrap {
	padding-left: 1rem;
}
form .form-group {
	padding: 1rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	cursor: default;
}
#control-polls .slide {
	cursor: pointer;
	margin-left: 1.5rem;
	padding: 0.2rem;
}
#control-polls .slide.hidden {
	display: none;
}
.popup .slide.wrap {
	font-size: 1.5em;
	max-width: 80vw;
	width: 30rem;
	background: #222;
	padding-left: 3rem;
	overflow: auto;
	max-height: 90vh;
}
.popup .slide.wrap .answer {
	font-size: 1rem;
	line-height: 1em;
	padding: 0.25em;
	margin: 1rem;
	height: 2rem;
	box-sizing: content-box;
	margin: 1rem;
	border-radius: 0.25rem;
}
.popup .slide.wrap .text {
	margin: 0.5rem;
}
.slide .answer {
	position: relative;
	background: rgba(255, 255, 255, 0.2);
	margin: 0.2em;
}
.slide .answer[data-percentage]::before {
	display: block;
	position: absolute;
	content: attr(data-percentage) '%';
	left: -3em;
	top: 0.8em;
	width: 2.5em;
	text-align: right;
}
.sidebar .slide .answer::before {
	top: auto;
}
.slide .text {
	position: relative;
}
/*.slide .text::after {
	content: ' (' attr(data-count) ')';
	font-size: 0.8em;
}*/
.slide .gauge {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: #1865a7;
}
.popup .slide .gauge {
	background: linear-gradient(90deg, #1865a7 calc(100% - 1em), rgba(24, 101, 67, 0) 100%);
	border-radius: 0.25rem;
}
#popup-add-playlist-list .audiofile {
	position: relative;
	border: gray 1px solid;
	background: gray;
	margin: 0.2rem;
	text-align: left;
	padding: 0.2rem;
	cursor: move;
}
#popup-add-playlist-list .audiofile .filename {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#popup-add-playlist-list .audiofile .duration {
	line-height: 1;
	height: 1em;
	text-align: right;
}
#control-addimg, #control-addpoll {
	font-family: glyphs;
}
#control-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.5rem;
	box-sizing: border-box;
	height: 4rem;
}
#control-bottom button {
	width: -moz-fit-content;
	width: fit-content;
	min-width: 4rem;
}
body.presenter[data-mode="started"] #control,
body.presenter[data-mode="testing"] #control,
body.presenter[data-mode="scheduled"] #control,
body.presenter[data-mode="ended"] #control {
	display: block;
}
body.recorded.recorded #control {
	display: none;
}
#replay-close-btn {
	z-index: 6000;
	position: absolute;
	left: 0.2em;
	top: 0.2em;
	border: none;
	background: none;
	width: min-content;
	height: min-content;
}
body:not(.recorded) #replay-close-btn,
body[data-mode="ended"] #replay-close-btn {
	display: none;
}
/*@media (hover: hover) {*/
	body.mouse #replay-close-btn:hover {
		color: red;
	}
/*}*/
.sidebar {
	display: none;
	box-sizing: border-box;
	word-break: break-word;
	padding: 0.75em;
	position: fixed;
	top: 0;
	width: var(--sidebar-width);
	opacity: 0.8;
	/*text-shadow: -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px -1px 0 rgba(0, 0, 0, 0.7);*/
	z-index: 50;
	bottom: calc(100vh - 2.5em);
	overflow: hidden;
}
.sidebar[open] {
	bottom: 0;
}
.sidebar .btnwrap {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	white-space: nowrap;
}
.btnwrap .square2x {
	border: none;
}
.sidebar input, .sidebar button:not(.minibtn), .buttons button {
	position: relative;
	/*display: block;*/
	z-index: 100;
	width: 100%;
}
.sidebar summary {
	cursor: pointer;
	padding: 0.75em;
	margin: -0.75em;
	border: 0px;
	outline: 0px;
	height: 1em;
}
.sidebar[open] summary {
	margin-bottom: 0;
}
.sidebar[open] > *:not(summary) {
	animation: appear 0.1s ease-in-out;
}
.sidebar[open] {
	opacity: 1;
	background: black;
}
#guest-link[href=""], #guest-link:not([href]) {
	display: none;
}
#icons-action-buttons button {
	transition: transform 0.1s ease-in-out;
}
body[data-icons-action] #icons {
	height: 4em;
	transform: scale(1.05);
	z-index: 1;
}
body[data-mode="ended"] #icons-add-btn,
body[data-mode="ended"] #icons-del-btn,
body[data-mode="ended"] #icons-clr-btn,
body:not([data-mode="ended"]) #icons-his-btn {
	display: none;
}
body[data-icons-action] > *:not(#icons),
body[data-icons-action="delete"] #icons-add-btn,
body[data-icons-action="clear"] #icons-add-btn {
	pointer-events: none;
	filter: blur(4px) brightness(50%);
}
body[data-icons-action="delete"] #icons-del-btn,
body[data-icons-action="clear"] #icons-clr-btn,
body[data-icons-action="history"] #icons-his-btn {
	transform: scale(130%);
}
body[data-icons-action="delete"] #icons-del-btn b,
body[data-icons-action="delete"] #icons-list > .ma {
	color: #f66;
}
body[data-icons-action="clear"] #icons-clr-btn b,
body[data-icons-action="clear"] #icons-list > .ma {
	color: #66f;
}
body[data-icons-action="history"] #icons-his-btn b,
body[data-icons-action="history"] #icons-list > .ma {
	color: #66f;
}
#icons {
	display: none;
	position: fixed;
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	opacity: 1;
	height: 4em;
	padding: 0;
	text-align: center;
	transition: margin 0.1s ease-in-out, transform 0.1s ease-in-out;
	z-index: 45;
}
@media (orientation: landscape) {
	body.wide-status #icons#icons#icons {
		margin-left: auto;
		margin-right: 0;
		width: -moz-fit-content;
		width: fit-content;
		max-width: 100vw;
	}
	body.wide-status #control[open],
	body.wide-status #chat[open] {
		margin-bottom: 4rem;
	}
}
#icons.visible {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	overflow: visible;
	transform-origin: right;
}
#icons.visible ~ #descr,
#icons.visible ~ #media {
	margin-bottom: 4rem;
	--bottom: 4rem;
}
#icons-wrap {
	white-space: nowrap;
}
#icons-wrap > div {
	display: inline-block;
	padding: 0;
	vertical-align: bottom;
	white-space: nowrap;
	flex-shrink: 1;
}
#icons-list {
	line-height: 1;
}
#icons-list:not(:empty) {
	margin-right: 1rem;
}
#icons-list > b.ma {
	font-size: 2em;
	width: 1em;
	height: 1em;
	text-align: center;
	opacity: 0.3;
}
#icons-list > b.ma > span {
	display: inline-block;
	transition: transform 0.1s ease-in-out;
}
#floaters {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 99999;
}
body.presenter #icons-list > b.ma.enabled,
body.presenter #icons-list > b.ma:not([data-counter='0']) {
	width: auto;
	margin-left: 0.7rem;
}
body.presenter #icons-list > b.ma.enabled::after,
body.presenter #icons-list > b.ma:not([data-counter='0'])::after {
	font-family: 'FreeSans';
	content: " ";
	content: attr(data-counter);
	vertical-align: 0.2em;
	font-size: 0.8em;
	display: inline-block;
	margin: 0 0.7rem 0 0.2rem;
}
/*@media (hover: hover) {*/
	body.mouse.presenter #icons-list > b.ma:hover > span,
	body.mouse #icons-list > b.ma.enabled:hover > span {
		transform: scale(150%);
	}
	body.mouse.presenter #icons-list > b.ma,
	body.mouse #icons-list > b.ma.enabled {
		cursor: pointer;
	}
/*}*/
#icons-list > b.ma.enabled {
	opacity: 1;
}
#icons-list > button {
	margin-left: 1rem;
}
#icons .button {
	border: none;
}
#popup-add-icon-list {
	max-height: 40vh;
	/*max-width: 40vw;*/
	overflow: auto;
}
#popup-add-icon-list button.square2x {
	background: none;
}
.tab {
	background: black;
	display: block;
}
.tab-tips {
	display: flex;
	justify-content: stretch;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/*overflow: hidden;*/
	/*padding: 0 0.5rem;*/
}
#chat .tab-tips {
	right: 2.5rem;
}
@media (orientation: landscape) {
	#control .tab-tips {
		left: 2.5rem;
	}
}
@media (orientation: portrait) {
	#control .tab-tips {
		right: 2.5rem;
	}
}
.tab-tips label {
	flex-grow: 1;
	flex-basis: 2.5em;
	text-align: center;
	padding: 0.22em 0;
	height: 1.2em;
	border-radius: 0.5rem 0.5rem 0 0;
	font-size: 1.5em;
	line-height: 1;
}
/*@media (hover: hover) {*/
	body.mouse .tab-tips label:hover {
		background: #101010;
		color: #50b0ff;
	}
/*}*/
.tab-tips label.active {
	background: #191919;
	cursor: default;
	position: relative;
	color: #50b0ff;
}
.tab-tips label.active::before,
.tab-tips label.active::after {
	content: " ";
	display: block;
	position: absolute;
	bottom: 0;
	width: 0.5rem;
	height: 0.5rem;
	pointer-events: none;
}
.tab-tips label.active::before {
	left: -0.5rem;
	background: radial-gradient(at 0 0, transparent, transparent 70%, #191919 70%);
}
.tab-tips label.active::after {
	right: -0.5rem;
	background: radial-gradient(at 100% 0, transparent, transparent 70%, #191919 70%);
}
#tab-priv.from-chat .tab-tips label[for="radio-users"] {
	display: none;
}
#tab-priv:not(.from-chat) .tab-tips label[for="radio-chat"] {
	display: none;
}
#tab-priv .tab-tips label[for="radio-users"],
#tab-priv .tab-tips label[for="radio-chat"] {
	flex-grow: 0;
}
.versep {
	width: 0;
	height: 1.7em;
	opacity: 0.3;
	border-left: 1px solid currentColor;
	margin: 0.4em 1px;
}
.visitors-num {
	font-family: Montserrat;
	display: inline-block;
	position: relative;
	line-height: 1;
	font-size: 0.5em;
	margin-left: 0.2em;
	margin-top: 0.2em;
	text-align: right;
}
.visitors-num-now, .visitors-num-total {
	display: block;
	height: 0;
	position: relative;
	padding-left: 0.1em;
	padding-right: 0.1em;
}
body.moderator .visitors-num-now {
	top: -0.5em;
}
.visitors-num-total {
	top: 0.5em;
	opacity: 0.42;
	border-top: 1px solid currentColor;
	padding-top: 0.2em;
}
body:not(.moderator) .visitors-num {
	font-size: 0.75em;
}
body:not(.moderator) .visitors-num-total {
	display: none;
}
.tab-body {
	background: #191919;
	position: absolute;
	top: 2.45rem;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 0.8rem;
}
#tab-slides .tab-body,
#tab-polls .tab-body {
	text-align: center;
}
.tab-radio {
	display: none;
}
.tab-radio:not(:checked) + .tab {
	opacity: 0;
	pointer-events: none;
}
#tab-users .tab-body {
	padding: 1rem;
}
#chat .tab-body {
	padding-top: 1rem;
}
#chat .tab-body,
#tab-users .tab-body .wrap {
	display: flex;
	flex-direction: column;
	overflow: auto;
}
#chat:not([open]) {
	width: 2.5rem;
}
/*@media (hover: hover) {*/
	body.mouse #chat[open] summary:hover,
	body.mouse #control[open] summary:hover {
		width: 1rem;
		border-radius: 0.5rem 0.5rem 0 0;
		cursor: pointer;
		background: #101010;
		position: absolute;
		top: 0;
		margin: 0;
	}
	body.mouse #chat[open] summary:hover {
		right: 0;
	}
	body.mouse #control[open] summary:hover {
		left: 0;
	}
/*}*/
.sidebar summary::-webkit-details-marker,
.sidebar summary::marker {
	content: "";
	display: none;
	color: transparent;
}
.sidebar > summary::before {
	/* previosly fallback for old Edge, identical to the above but must be separate block;
	 * now main implementation since some other browsers fail to support ::marker too */
	content: "expand_less";
	display: inline-block;
	font: normal normal normal 1em/1 'glyphs';
	font-family: 'glyphs';
	user-select: none;
	text-overflow: clip !important;
	text-rendering: auto;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: transform 0.1s ease-in-out;
}
.sidebar:not([open]) > summary::before {
	/* previosly fallback for old Edge, identical to the above but must be separate block;
	 * now main implementation since some other browsers fail to support ::marker too */
	transform: rotate(180deg);
	/*content: "expand_more";*/
}
#chat .tabs {
	width: 75%;
}
#chat > input {
	height: 1.6em;
}
#chathist,
#privhist {
	overflow: auto;
	padding: 0 1rem;
	position: relative;
	flex-grow: 1;
}
#chathist-inner > * {
	margin-bottom: 0.5em;
}
#privhist > * {
	margin-bottom: 1.5em;
}
#chathist-inner > *::after,
#privhist > *::after {
	clear: both;
	display: block;
	content: "";
}
.btnwrap input[type="checkbox"]:checked + label[for] {
	background: #1865a7;
}
.btnwrap input[type="checkbox"]:indeterminate + label[for] {
	background: repeating-linear-gradient(45deg, transparent 0px, #1865a7 1px, transparent 2px);
}
/*body.moderator #chat-moderated {
	display: inline;
	width: auto;
	outline: none;
}
body.moderator #chat-moderated-label {
	display: block;
	position: relative;
	vertical-align: middle;
	padding: 1em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}*/
#chat summary {
	text-align: right;
	position: absolute;
	width: 1rem;
	margin: 0;
	top: 0;
	right: 0;
}
a.attach:not(.img)[title]::before {
	display: inline-block;
	font: normal normal normal 1em/1 'Material Icons Main';
	font-family: 'Material Icons Main';
	user-select: none;
	text-overflow: clip !important;
	text-rendering: auto;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: -0.2em;
	display: inline-block;
	content: "attach_file";
}
a.attach:not(.img)[title]::after {
	display: inline-block;
	content: attr(title);
	text-decoration: underline;
}
a.attach span.acode {
	overflow: hidden;
	display: inline-block;
	width: 0;
	height: 0;
}
a.attach.img span.acode {
	display: block;
}
a.attach {
	display: inline-block;
}
a.attach.img {
	display: block;
	width: 100%;
}
a.attach img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
	margin-bottom: 0.2em;
}
#popup-img-view .bgwrap {
	max-width: none;
	max-height: none;
	position: relative;
	overflow: hidden;
}
#img-view {
	width: 85vw;
	height: 85vh;
	height: calc(100vh - 3em);
	display: block;
	margin: auto;
	object-fit: contain;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
#img-view-prev, #img-view-next, #img-view-down {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 30%;
	height: 80%;
	opacity: 0;
	margin: auto;
	/*background: rgba(128, 128, 128, 0.3);*/
}
#img-view-prev::before, #img-view-next::before, #img-view-down::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 1em;
	height: 1em;
	margin: auto;
	content: attr(data-glyph);
	font-size: 4rem;
	color: white;
	background: rgba(16, 16, 16, 0.5);
	padding: 0.5em;
	border-radius: 0.5em;
}
#img-view-prev:not(.visible), #img-view-next:not(.visible), #img-view-down:not(.visible) {
	display: none;
}
/*@media (hover: hover) {*/
	body.mouse #img-view-prev:hover, body.mouse #img-view-next:hover, body.mouse #img-view-down:hover {
		opacity: 1;
	}
/*}*/
#img-view-prev {
	right: auto;
}
#img-view-next {
	left: auto;
}
/*#chathist .usercolor {
	display: block;
}*/
.usercolor {
	color: rgba(255, 255, 255, 0.5);
}
.usercolor.moderator, .usercolor.presenter {
	color: blue;
}
.usercolor.banned, .usercolor.offline {
	text-decoration: line-through;
	opacity: 0.6;
}
.userbg.userbg.moderator, .userbg.userbg.presenter {
	background: #014f7b;
}
.userbg.userbg.system {
	background: #7b4f01;
}
#visitors {
	padding: 1rem;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
#visitors .visitor-subhdr {
	text-align: center;
	display: none;
	margin: 1em 0 0.5em;
}
body:not(.moderator) #visitors .visitor-listitem.guest.offline {
	display: none;
}
#visitors .visitor-listitem, #visitors .visitor {
	order: 20;
}
#visitors .moderator, #visitors .presenter, #visitors .owner {
	order: 10;
}
#visitors .guest {
	order: 30;
}
#visitors .dead {
	order: 40;
}
#visitors .banned {
	order: 50;
}
.visitor {
	font-weight: bold;
}
#visitors .not-for-usermenu {
	display: none;
}
#visitors .popbuttons {
	position: static;
	margin: 0;
	background: rgba(255, 255, 255, 0.1);
	width: 100%;
}
.chatmsg .time {
	margin-left: 1em;
	opacity: 0.7;
}
.chatmsg .hdr {
	font-size: 0.85em;
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
}
.chatmsg .hdr .usercolor {
	flex-shrink: 0;
}
.chatmsg .text {
	margin-top: 0.5em;
}
.chatmsg .text:not([contenteditable="true"]) {
	/*width: max-content;*/
	max-width: 13rem;
}
/*b.guest {
	color: cyan;
}*/
/*#chathist .chatmsg:not(.confirmed) {
	background: rgba(255, 255, 255, 0.1);
	margin: 0 -0.5rem -0.5rem -0.5rem;
	padding: 0 0.5rem 0.5rem 0.5rem;
}*/
#chat [id^="chatmsg_"] .chatmsg .text-wrap {
	cursor: pointer;
}
#privhist .privmsg {
	background: rgba(255, 255, 255, 0.1);
	padding: 0.5rem;
	border-radius: 0.2rem;
	margin: 1rem;
	position: relative;
}
#privhist .privmsg .time {
	position: absolute;
	right: 0;
	top: -1rem;
	opacity: 0.7;
	font-size: 0.8em;
}
#privhist .privmsg .read {
	position: absolute;
	left: 0;
	top: -1rem;
	opacity: 0.7;
	font-size: 0.8em;
}
#privhist .privmsg-btn {
	font-size: 0.8rem;
	width: 95%;
	margin: auto;
	display: none;
}
#privhist .text {
	text-align: center;
}
#chatmsg a,
#chathist a,
#privhist a {
	color: cyan;
}
#chathist,
#privhist {
	/*text-shadow: 1px 1px 4px black;*/
	/*color: black;*/
	min-height: 10px;
	min-width: 10px;
}
.chatmsg.self {
	text-align: right;
}
.chatmsg .text-wrap,
.chatmsg textarea.text {
	display: inline-block;
	text-align: left;
	max-width: 80%;
	max-width: calc(100% - 4rem);
	border-radius: 1em;
	background: rgba(255, 255, 255, 0.1);
	padding: 0.5em 0.7em;
	line-height: 1;
}
/*
.chatmsg:not(.self) .text-wrap,
.chatmsg:not(.self) textarea.text {
	border-top-left-radius: 0;
}
.chatmsg.self .text-wrap,
.chatmsg.self textarea.text {
	border-top-right-radius: 0;
}
*/
#chathist *,
#privhist * {
	overflow-anchor: none;
}
#chathist * {
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: keep-all;
}
#chathist-anchor,
#privhist-anchor {
	overflow-anchor: auto; /* */
	height: 0.5em;
	margin: 0;
	padding: 0;
}
.chatmsg {
	display: flex;
	align-items: self-start;
	justify-content: space-between;
}
.chatmsg > .popbuttons {
	order: 100;
}
.chatmsg.self {
	flex-direction: row-reverse;
}
.chatmsg:not(.self) > .popbuttons.visible ~ .text-wrap {
	margin-right: 0.5em;
	flex-shrink: 1;
}
.chatmsg.self > .popbuttons.visible ~ .text-wrap {
	margin-left: 0.5em;
	flex-shrink: 1;
}
.chatmsg > .popbuttons.visible {
	border-radius: 1em;
	max-width: 70%;
	width: 70%;
	margin: 0;
	position: static;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}
.chatmsg > .popbuttons.visible > button:not(.menu) {
	font-size: 1.4em;
	padding: 0.5em;
	box-sizing: content-box;
}
.popbuttons {
	background: black;
	width: -moz-fit-content;
	width: fit-content;
	padding: 0.1em;
	border-radius: 0.5em;
	position: absolute;
	left: 0;
	right: 0;
	margin: -0.75em auto 0;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.popbuttons.popbuttons .menu {
	width: 100%;
	white-space: nowrap;
}
/*@media (hover: hover) {*/
	body.mouse .popbuttons.popbuttons .menu:hover {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 0.5em;
	}
/*}*/
.popbuttons:not(.visible) {
	display: none;
}
.popbuttons.popbuttons button {
	/*display: inline-block;*/
	width: 1em;
	height: 1em;
	line-height: 1;
	font-size: 1rem;
	padding: 0;
	background: transparent;
	color: rgba(255,255,255,0.5);
}
/*@media (hover: hover) {*/
	body.mouse .popbuttons button:hover {
		color: #fff;
	}
/*}*/
@media (pointer: coarse) {
	.popbuttons.popbuttons button:not(.menu) {
		font-size: 2em;
	}
	.popbuttons.popbuttons button.menu {
		padding: 0.5em;
		box-sizing: content-box;
	}
}
#privname {
	margin: 0.5rem;
	text-align: center;
	font-weight: bold;
}
/*@media (hover: hover) {*/
	body.mouse #privpost-wrap:not(:focus-within) .msgbuttons,
	body.mouse #chatpost-wrap:not(:focus-within) .msgbuttons {
		display: none;
	}
/*}*/
#privpost-wrap .msgbuttons,
#chatpost-wrap .msgbuttons {
	margin-left: 0.3rem;
}
#privpost-wrap,
#chatpost-wrap {
	background: black;
	padding: 0.5em;
	position: relative;
	box-sizing: border-box;
	min-height: 4rem;
	flex-shrink: 0;
	flex-grow: 0;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}
#chatpost,
#privpost-wrap {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}
#chatpost {
	flex-grow: 1;
}
#privpost {
	background: rgba(255, 255, 255, 0.1);
	padding: 0.5rem;
	border-radius: 0.2rem;
	flex-grow: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}
#privmsg-edit {
	/*width: 90%;*/
	min-height: 2rem;
}
#privmsg-btn-edit {
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}
#chathist-warn {
	display: none;
}
body[data-delay][data-mode="started"]:not(.recorded) #chathist-warn,
body[data-delay][data-mode="testing"]:not(.recorded) #chathist-warn {
	display: block;
}
body[data-delay] #chathist-warn-text::before,
body[data-delay] #chathist-warn-text::before {
	display: block;
	content: "Вы смотрите видео с задержкой (" var(--data-delay) "сек). Эта задержка распространяется и на чат. Чтобы догнать эфир, используйте слайдер прокрутки видео.";
}
.quote-text {
	font-size: 0.8rem;
	opacity: 0.8;
	margin: 1em;
	border-left: 2px solid rgba(255, 255, 255, 0.5);
	padding-left: 1em;
	width: max-content;
	max-width: 10.5rem;
}
.quote-text:not(.visible),
.quote-text:not(.visible) + .close {
	display: none;
}
#chatmsg {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 1em;
}
#chatmsg, #privmsg-edit {
	resize: none;
	background: transparent;
	padding: 0.1em 0.5em;
	margin-right: 0.2em;
	color: rgba(255, 255, 255, 0.8);
	outline: none;
	align-self: stretch;
	flex-grow: 1;
	overflow: auto;
	max-height: 40vh;
}
#chatsend, #privsend, #chatattach {
	border: none;
	padding: 0.1em 0.4em;
	font-size: 1.5em;
}
#privmsg-btn-edit {
	background: rgba(255, 255, 255, 0.1);
	cursor: text;
}
.button.square.button.square, .nobutton.square {
	width: 1em;
	height: 1em;
	box-sizing: content-box;
}
.button.square2x.button.square2x, .nobutton.square2x {
	width: 1em;
	height: 1em;
	padding: 0;
	font-size: 2rem;
	box-sizing: content-box;
}
#descr .button.square2x.button.square2x, #descr .nobutton.square2x {
	font-size: 2em;
}
.button.square15x.button.square15x, .nobutton.square15x {
	width: 1em;
	height: 1em;
	padding: 0.1666em;
	font-size: 1.5em;
	box-sizing: content-box;
}
.button {
	position: relative;
}
.btn-overlay {
	filter: drop-shadow(0 0 0.1em white) drop-shadow(0 0 0.1em white);
	display: block;
	position: absolute;
	/*right: 0;*/
	top: 0;
	left: 0;
	/*bottom: 0;*/
	margin: auto;
	height: -moz-fit-content;
	height: fit-content;
	font-size: 0.7em;
	font-size: max(0.7em, 1.1rem);
	color: red;
}
/*@media (hover: hover) {*/
	body.mouse .button:hover .btn-overlay {
		opacity: 0;
	}
/*}*/
.msgbuttons {
	float: right;
	max-width: 2.2rem;
}
body:not([data-mode="scheduled"]) #start-webinar {
	display: none;
}
body:not([data-mode="started"]) #end-webinar {
	display: none;
}
body:not([data-mode="ended"]) #unend-webinar {
	display: none;
}
body:not([data-mode="scheduled"]) #test-webinar {
	display: none;
}
body[data-mode="testing"] #test-webinar {
	display: none;
}
body:not([data-mode="testing"]) #test-webinar-stop {
	display: none;
}
body:not([data-mode="scheduled"]):not([data-mode="started"]):not([data-mode="ended"]):not([data-mode="testing"]) #chat {
	display: none;
}
#media {
	position: fixed;
	display: none;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	--top: 0px;
	--right: 0px;
	--bottom: 0px;
	--left: 0px;
	/*width: 100vw;
	height: 100vh;*/
	z-index: 25;
	justify-content: left;
	flex-direction: row;
	align-items: flex-end;
	background: black;
	--width: calc(100vw - var(--right) - var(--left));
	--height: calc(100vh - var(--top) - var(--bottom));
	transition: margin 0.1s ease-in-out,
		width 0.1s ease-in-out, height 0.1s ease-in-out,
		max-width 0.1s ease-in-out, max-height 0.1s ease-in-out;
}
#media:empty::after {
	content: "Нет видео";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 1em;
	line-height: 1;
	text-align: center;
}
body[data-mode="scheduled"] #media::before {
	content: " ";
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82 18" version="1.1"><text x="0" y="14" fill="rgba(0, 64, 255, 0.5)" textLength="82">Проверка</text><rect x="0" y="0" width="100%" height="100%" stroke="rgba(0, 64, 255, 0.5)" fill="transparent"/></svg>') center no-repeat;
	max-width: 160vh;
	transform: rotate(-30deg);
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 100;
	pointer-events: none;
}
#media-control {
	visibility: hidden;
}
#media-control {
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 3000;
	align-items: stretch;
	padding: 1em;
	flex-direction: column;
	max-width: none;
	width: auto;
}
#media-control .buttons {
	display: flex;
	align-items: center;
}
#media-control > * {
	margin: 0.2em;
}
body.presenter:not(.recorded) #media-control {
	pointer-events: none;
}
body.presenter:not(.recorded) #media-control > * {
	pointer-events: auto;
}
/*@media (hover: hover) {*/
	body.mouse.presenter:not(.recorded) #media video:not(:first-of-type):hover {
		z-index: 3500;
		cursor: move;
	}
	body.mouse.presenter:not(.recorded) #media.interview video:not(:first-of-type):hover {
		z-index: 0;
	}
/*}*/
#media-control-volume-wrap {
	position: relative;
	order: 0;
	margin-right: 1em;
}
#media-control-volume {
	width: 5em;
}
#media-control #media-control-allsound.off {
	opacity: 0.3;
}
#media-control #media-control-allscreen.off {
	opacity: 0.3;
}
#media-control-progress {
	font-weight: bold;
	opacity: 1;
	padding-top: 1.2em;
	padding-bottom: 1.2em;
}
.slider {
	height: 0.4em;
	padding: 0.5em 0;
	/*opacity: 0.5;*/
	cursor: pointer;
	position: relative;
}
.slider .bg {
	background: rgba(255, 255, 255, 0.2);
	position: absolute;
	height: inherit;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	pointer-events: none;
}
.slider .lbl-left {
	left: 0.2em;
	margin-top: -1em;
}
.slider .lbl-right {
	right: 0.2em;
	margin-top: -1em;
}
.slider .lbl-left, .slider .lbl-right {
	display: block;
	position: absolute;
	z-index: 10;
	color: white;
	mix-blend-mode: difference;
}
/*@media (hover: hover) {
	.slider:hover .lbl-left, .slider:hover .lbl-right, .slider:hover .lbl-slider {
		display: none;
	}
}*/
.slider .col {
	background: #2290ea;
	position: absolute;
	height: inherit;
	left: 0;
	width: 90%;
	pointer-events: none;
}
.slider .col::after {
	background: inherit;
	content: " ";
	display: block;
	position: absolute;
	right: -0.5em;
	top: -0.35em;
	bottom: -0.35em;
	margin: auto;
	height: 1em;
	width: 1em;
	border-radius: 0.5em;
}
.slider .lbl-slider {
	display: block;
	position: absolute;
	right: 0;
	top: -1.3em;
	transform: translate(50%, 0);
}
.slider .tick {
	position: absolute;
	height: 4em;
	width: 3em;
	top: -1.35em;
	bottom: -1.35em;
	margin: auto;
	display: none;
	/*border-left: 1px solid white;*/
	color: white;
	/*mix-blend-mode: difference;*/
	background-image: radial-gradient(circle at center, #2290ea 0%, #2290ea 0.5em, transparent 0.5em);
	background-image: radial-gradient(circle at center, #2290ea 0%, #2290ea 0.5em, transparent calc(0.5em + 1px));
	margin-left: -1.5em;
	text-align: center;
	line-height: 2.3em;
	pointer-events: none;
}
#media-control-volume .col::after {
	content: "volume_down";
	color: black;
}
/*.slider .tick.right {
	border-left: none;
	border-right: 1px solid white;
	transform: translate(-100%, 0);
}*/
/*@media (hover: hover) {*/
	body.mouse .slider:hover .tick {
		display: block;
	}
/*}*/
#media-control-bottom .buttons button, #playpub-control-bottom .buttons button {
	position: static;
	font-size: 1.5em;
	padding: 0;
	margin: 0.1em;
	line-height: 1;
	border-width: 0;
	color: white;
	vertical-align: middle;
	background: none;
	width: 2em;
	height: 1.2em;
	max-height: 1.2em;
	opacity: 1;
	line-height: 1;
	transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out;
	overflow: hidden;
}
#media-control-quality button:not(:hover):not(.active),
#media-control-buttons button:not(:hover):not(.active),
#playpub-control-buttons button:not(:hover):not(.active) {
	opacity: 0.5;
}
/*@media (hover: hover) {*/
	body.mouse #media-control-quality:not(:hover) button:not(.active),
	body.mouse #media-control-buttons:not(:hover) button:not(.active),
	body.mouse #playpub-control-buttons:not(:hover) button:not(.active){
		width: 0;
		height: 0;
		opacity: 0;
		margin: 0;
		transition: opacity 0.3s 0.5s ease-in-out, width 0.3s 0.5s ease-in-out, height 0.3s 0.5s ease-in-out, margin 0.3s 0.5s ease-in-out;
	}
/*}*/
/*@media (hover: none) {*/
	body.touch #media-control-quality:not(.visible-touch) button:not(.active),
	body.touch #media-control-buttons:not(.visible-touch) button:not(.active),
	body.touch #playpub-control-buttons:not(.visible-touch) button:not(.active) {
		width: 0;
		height: 0;
		opacity: 0;
		margin: 0;
		transition: opacity 0.3s 0.5s ease-in-out, width 0.3s 0.5s ease-in-out, height 0.3s 0.5s ease-in-out, margin 0.3s 0.5s ease-in-out;
	}
	body.touch #media-control-quality:not(.visible-touch) button,
	body.touch #media-control-buttons:not(.visible-touch) button,
	body.touch #playpub-control-buttons:not(.visible-touch) button {
		pointer-events: none;
	}
/*}*/
#media-control-quality#media-control-quality button div,
#media-control-buttons button div {
	font-size: 0.8em;
	margin-top: 0.2em;
	font-weight: bold;
	mix-blend-mode: difference;
	display: block;
}
#media-control-quality, #media-control-buttons {
	display: flex;
	position: relative;
	order: 1;
}
@media (orientation: portrait) {
	#media-control-quality, #media-control-buttons {
		flex-direction: column-reverse;
		height: 2em;
		overflow: visible;
	}
	#media-control-quality > button, #media-control-buttons > button {
		flex-shrink: 0;
	}
}
#media-control-main {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 0.5em;
	left: 1em;
	right: 1em;
	z-index: 4000;
	background: rgba(16, 16, 16, 0.5);
	padding: 1em;
	border-radius: 1em;
}
#media-control > button::before {
	background: rgba(16, 16, 16, 0.5);
	border-radius: 0.5em;
	padding: 0.5em;
}
#media-control-bottom {
	display: flex;
	align-items: center;
}
#media-control-bottom-stretch {
	flex-grow: 100;
	order: 10;
}
#media-control-quality {
	order: 15;
}
#media-control-pause,
#media-control-play,
#media-control-minus10,
#media-control-plus10 {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 33.33%;
	background: transparent;
	border: none;
	outline: none;
	color: white;
	padding: 0;
	margin: auto;
	font-size: 4em;
	z-index: 4000;
}
#media-control-minus10 {
	left: 0;
}
#media-control-plus10 {
	right: 0;
}
#media-control-pause,
#media-control-play {
	left: 0;
	right: 0;
}
/*@media (hover: hover) {
	#media-control-pause::after,
	#media-control-play::after,
	#media-control-minus10::after,
	#media-control-plus10::after {
		transition: all 0.3s ease-in-out;
		display: block;
		content: " ";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 0;
		height: 0;
		padding: 200%;
		margin: auto;
		pointer-events: none;
		background: rgba(127, 127, 127, 0.1);
		opacity: 0;
	}
	#media-control-pause:hover::after,
	#media-control-play:hover::after,
	#media-control-minus10:hover::after,
	#media-control-plus10:hover::after {
		opacity: 1;
	}
	#media-control-minus10:hover::after {
		right: -33.33%;
		border-radius: 0 100% 100% 0;
	}
	#media-control-plus10:hover::after {
		left: -33.33%;
		border-radius: 100% 0 0 100%;
	}
	#media-control-play:hover::after,
	#media-control-pause:hover::after {
		left: -100vw;
		right: -100vw;
		border-radius: 100%;
		padding: 100%;
	}
}*/
#media-control-buttons-right {
	order: 20;
}
/*body.nopip #media-control-pip {
	display: none;
}*/
#media-control-fullscreen::before {
	content: "fullscreen";
}
@media (display-mode: fullscreen) {
	#media-control-fullscreen::before {
		content: "fullscreen_exit";
	}
}
body[data-mode="started"] #media,
body[data-mode="testing"] #media {
	display: flex;
}
body.pip #media {
	display: none;
}
body:not([data-mode="started"]):not([data-mode="testing"]) #pip-video {
	display: none;
}
#media:not(.interview)[data-corner="sw"] {
	align-items: flex-end;
	justify-content: flex-start;
}
#media:not(.interview)[data-corner="nw"] {
	align-items: flex-start;
	justify-content: flex-start;
}
#media:not(.interview)[data-corner="se"] {
	align-items: flex-end;
	justify-content: flex-end;
}
#media:not(.interview)[data-corner="ne"] {
	align-items: flex-start;
	justify-content: flex-end;
}
#media video {
	max-width: var(--ewidth);
	max-height: var(--eheight);
	width: var(--ewidth);
	height: var(--eheight);
	--margin: 0px;
	margin: var(--margin);
	min-width: 0;
	transition: margin 0.1s ease-in-out,
		width 0.1s ease-in-out, height 0.1s ease-in-out,
		max-width 0.1s ease-in-out, max-height 0.1s ease-in-out;
}
#media video[data-turn="90"], #media video[data-turn="270"] {
	max-width: var(--eheight);
	max-height: var(--ewidth);
	width: var(--eheight);
	height: var(--ewidth);
	margin-top: calc(var(--eheight) / 2 - var(--ewidth) / 2 + var(--margin));
	margin-bottom: calc(var(--eheight) / 2 - var(--ewidth) / 2 + var(--margin));
	margin-left: calc(var(--ewidth) / 2 - var(--eheight) / 2 + var(--margin));
	margin-right: calc(var(--ewidth) / 2 - var(--eheight) / 2 + var(--margin));
}
#media video[data-turn="90"] {
	transform: rotate(90deg);
}
#media video[data-turn="180"] {
	transform: rotate(180deg);
}
#media video[data-turn="270"] {
	transform: rotate(270deg);
}
#media:not(.interview) video {
	display: inline-block;
	--ewidth: calc(var(--width) / 5);
	--eheight: calc(var(--height) / 5);
	--margin: 2vmin;
	position: relative;
	border: 0px;
	/*box-shadow: black 0 0 0 1px, black 0 0 0 1px inset;
	background: black;*/
}
#media:not(.interview) video:first-of-type {
	display: block;
	--ewidth: var(--width);
	--eheight: var(--height);
	--margin: 0px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	box-shadow: none;
}
#media.interview, #media[data-corner="interview"] {
	flex-direction: row;
	align-items: center;
}
#media.interview video, #media[data-corner="interview"] video {
	flex-shrink: 1;
	flex-grow: 1;
	--ewidth: calc(var(--width) / 2);
	--eheight: var(--height);
}
@media (orientation: portrait) {
	#media.interview, #media[data-corner="interview"] {
		flex-direction: column;
	}
	#media.interview video, #media[data-corner="interview"] video {
		--ewidth: var(--width);
		--eheight: calc(var(--height) / 2);
	}
	#chat[open] ~ #media.interview,
	#chat[open] ~ #media[data-corner="interview"],
	body.presenter #control[open] ~ #media.interview,
	body.presenter #control[open] ~ #media[data-corner="interview"] {
		flex-direction: row;
	}
	#chat[open] ~ #media.interview video,
	#chat[open] ~ #media[data-corner="interview"] video,
	body.presenter #control[open] ~ #media.interview,
	body.presenter #control[open] ~ #media[data-corner="interview"] {
		--ewidth: calc(var(--width) / 2);
		--eheight: var(--height);
	}
}
#media video:not(:first-child):not(:nth-child(2)) {
	display: none;
}
#playpub-extra-video {
	max-width: 80vw;
	max-height: 80vh;
}
#hover-preview {
	display: none;
	z-index: 40;
	pointer-events: none;
	max-width: 69vw;
	max-height: 80vh;
	border: 2px gray solid;
	box-sizing: border-box;
	box-shadow: 0px 0px 0px 200vh rgba(128, 128, 128, 0.5);
}
#play-button {
	z-index: 10000;
	overflow: visible;
	text-align: center;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
#play-button-main {
	z-index: 10000;
	overflow: visible;
	text-align: center;
	min-width: auto;
	font-size: 5em;
	color: rgba(255, 255, 255, 0.5);
	border: 0.2em currentColor solid;
	width: 1.2em;
	height: 1.2em;
	padding: 0.1em;
	border-radius: 100%;
	filter: drop-shadow(0 0 1em black);
	text-decoration: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
#play-button .error {
	font-size: min(4vw, 4vh);
	color: rgba(255, 255, 255, 0.8);
	background: rgba(128, 64, 64, 0.9);
	padding: 0.5em;
	border-radius: 0.5em;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 70vh;
	width: 40em;
	max-width: 80vw;
	height: 4em;
	height: min-content;
	margin: auto;
}
body #play-button::before {
	content: " ";
	position: fixed;
	display: block;
	left: -100vw;
	right: -100vw;
	top: -100vh;
	bottom: -100vh;
	background: rgba(0, 0, 0, 0.9);
}
body:not(.blur) #play-button::before {
	backdrop-filter: blur(4px);
}
#play-button-main::after {
	content: " ";
	box-sizing: border-box;
	display: block;
	width: 1em;
	height: 1em;
	border-style: solid;
	border-width: 0.5em 0 0.5em 1em;
	border-color: transparent transparent transparent currentColor;
	position: absolute;
	left: 0.23em;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
#descr {
	display: none;
	text-align: center;
	background: #1f1f1f;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 1rem;
	transition: margin 0.1s ease-in-out;
}
#descr h1 {
	margin: auto;
	margin-bottom: 0.2rem;
	min-width: 20%;
	width: -moz-fit-content;
	width: fit-content;
	backdrop-filter: blur(4px);
	background: rgba(0, 0, 0, 0.5);
	border-radius: 0.3em;
	padding: 0 0.2em;
}
body.owner #descr h1,
body.admin #descr h1 {
	cursor: pointer;
}
body.owner #descr h1:empty::after,
body.admin #descr h1:empty::after {
	content: 'Подзаголовок не указан - нажмите, чтобы указать';
	display: block;
}
body[data-mode="guest-login"] #descr,
body[data-mode="scheduled"] #descr,
body[data-mode="ended"] #descr,
body.pip #descr {
	display: flex;
}
body[data-mode="guest-login"] #descr-center {
	display: none;
}
#descr > div {
	position: relative;
}
#descr .container {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 100;
	backdrop-filter: blur(4px) brightness(50%);
}
#descr .central {
	border-radius: 1em;
	backdrop-filter: blur(4px);
}
#descr .central h1 {
	margin: 0 auto;
	background: none;
	backdrop-filter: none;
	padding: 0;
	font-size: 1.8em;
}
#descr-bottom .button,
#descr-dl-recording-info {
	backdrop-filter: blur(4px);
	border: none;
}
body:not(.registered) #webinar-exit,
body:not(.registered) #fatal-exit,
body:not(.fatal) #fatal-exit {
	display: none;
}
#fatal-exit {
	margin-top: 2em;
}
#descr-timer .timer {
	font-family: 'FreeSans';
	font-size: 2em;
}
#descr-timer[data-style="short"] {
	/*font-size: 2em;*/
}
#descr-timer[data-style="short"] .timer {
	display: none;
}
#descr-timer.hms .timer > .dh {
	display: none;
}
#descr-timer:not(.hms) .timer > .hms {
	display: none;
}
.pretimer {
	font-size: 1.25em;
	font-weight: bold;
	margin-bottom: 0.2em;
}
.timer .num {
	display: inline-block;
	width: 1.5em;
	align: center;
	position: relative;
	padding-bottom: 0.2em;
}
.timer .num .lbl {
	font-size: 40%;
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0.7;
}
body:not([data-mode="ended"]) #descr-view-recording,
body:not(.recorded) #descr-view-recording {
	display: none;
}
body:not(.owner):not(.moderator):not(.presenter):not(.downloadable) #descr-dl-recording,
body:not([data-mode="ended"]) #descr-dl-recording,
body:not(.recorded) #descr-dl-recording {
	display: none;
}
#descr-dl-recording-btn .btn-overlay.wait {
	display: none;
	animation: 3s rotate linear infinite;
	font-size: inherit;
	color: #0c3253;
}
#descr-dl-recording-btn.wait .btn-overlay {
	display: none;
}
#descr-dl-recording-btn.wait .btn-overlay.wait {
	display: block;
}
#descr .container.visible {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#descr .container.visible ~ * {
	display: none;
}
#descr-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 11em;
	height: 11em;
	flex-shrink: 0;
	margin: auto;
	padding: 1.5em;
	border-radius: 50%;
	backdrop-filter: blur(4px);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
	line-height: 1;
}
#descr-text {
	text-align: left;
	text-align: justify;
	min-width: 2em;
	min-height: 1em;
	word-break: break-word;
}
#descr-text-set-text, #descr-edit-chat-text {
	width: 60vw;
	height: 60vh;
	font-family: monospace;
}
/*#descr #descr-text-popup .close {
	position: static;
	float: right;
}*/
#descr #descr-text-popup > div {
	max-width: 50rem;
	width: 80%;
	max-height: 60vh;
	margin: 0 auto;
	position: relative;
}
#descr #descr-text-popup .bgrwap {
	overflow: auto;
}
body[data-mode="ended"] #descr-edit-cover-btn {
	display: none;
}
body.owner .owner-editable,
body.admin .owner-editable {
	border: transparent 1px solid;
	cursor: pointer;
}
body.nodetails details:not([open]) > *:not(summary) {
	display: none !important;
}
body.nodetails details > summary {
	display: block !important;
}
body:not(.copresenter) .copresenter-only {
	display: none !important;
}
body:not(.presenter) .presenter-only {
	display: none !important;
}
body.presenter .no-presenter {
	display: none !important;
}
body:not(.moderator) .moderator-only {
	display: none !important;
}
body:not(.owner):not(.admin) .owner-only {
	display: none !important;
}
body:not(.admin) .admin-only {
	display: none !important;
}
body:not(.owner):not(.presenter):not(.moderator) .staff-only {
	display: none !important;
}
body:not(.premoderation) .if-premoderated {
	display: none !important;
}
body.premoderation .if-not-premoderated {
	display: none !important;
}
#descr table {
	border-collapse: collapse;
	max-width: none;
}
#descr td, #descr tr {
	border: 1px solid rgba(128,128,128,0.3);
	padding: 0 0.5em;
}
#descr table form {
	margin: 0;
}
input.link {
	width: 25em;
	display: block;
}
#control-add-toggle {
	display: none;
}
#control-add-toggle + label {
	color: #222;
	display: none;
	margin: 1px;
	padding: 0.5em;
	filter: none;
	background: #ccc;
	text-align: center;
	line-height: 1;
	width: 100%;
	height: auto;
	box-sizing: border-box;
}
#pip-video {
	/*display: none;*/
	position: fixed;
	pointer-events: none;
	top: -200vh;
}
#pip-video.fakepip {
	top: initial;
	display: block;
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	max-width: 20vw;
	max-height: 20vh;
	cursor: pointer;
	z-index: 10000;
	border: 1px solid gray;
	pointer-events: inherit;
}
body[data-mode="testing"] #media::after {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
	width: -moz-fit-content;
	width: fit-content;
	height: 0.85em;
	content: "ТЕСТ";
	display: block;
	font-size: min(60vh, 30vw);
	font-size: min(0.6 * var(--height), 0.4 * var(--width));
	margin: auto;
	z-index: 1000;
	line-height: 1;
	color: blue;
	border: 0.06em solid blue;
	padding: 0;
	pointer-events: none;
	transform: rotate(-30deg);
	transition: all 0.1s ease-in-out;
	opacity: 0.5;
}
@media (max-width: 600px) {
	.popup form label input, .popup form label button {
		max-width: 100%;
		width: 100%;
	}
	label span {
		display: block;
	}
	.popup form label select {
		padding-left: 0;
		margin-left: 0;
	}
}
/* */
@media (max-width: 1366px) {
	html {
		font-size: 16px;
	}
}
@media (max-height: 1024px) {
	html {
		font-size: 16px;
	}
}
@media (max-width: 900px) and (orientation: landscape) {
	html {
		font-size: 12px;
	}
}
@media (max-width: 260px) and (orientation: portrait) {
	html {
		font-size: 12px;
	}
}
/* */
@media (pointer: coarse) {
	form.central input, form.central button {
		padding: 0.5em;
	}
	#control-add-toggle:not(:checked) + label {
		display: block;
	}
	#control-add-toggle:not(:checked) ~ button, #control-add-toggle:not(:checked) ~ * button {
		display: none;
	}
	/*#control button:not(.minibtn) {
		font-size: 1rem;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		line-height: 1
	}*/
	.visitor {
		padding: 0.5em 0;
	}
	/*.button.square2x.button.square2x {
		font-size: 3em;
	}*/
}
/*@media (hover: hover) {*/
	body.mouse button:enabled:hover, body.mouse .button:not(:disabled):hover {
		filter: brightness(1.5) !important;
	}
	body.mouse form:invalid button:enabled:hover, body.mouse form:invalid .button:not(:disabled):hover {
		filter: grayscale(100%) !important;
	}
	body.mouse #control video:hover {
		filter: brightness(1.2);
	}
	body.mouse details.sidebar:not([open]):hover {
		backdrop-filter: blur(4px);
		background: rgba(0, 0, 0, 0.7);
	}
	/*body.mouse.moderator #chat .chatmsg:hover {
		background: rgba(255,255,255,0.3);
		opacity: 1;
	}*/
	body.mouse #play-button:hover {
		color: white;
	}
	body.mouse.owner .owner-editable:hover,
	body.mouse.admin .owner-editable:hover {
		background: rgba(0,0,0,0.5);
		backdrop-filter: blur(4px);
		opacity: 1;
	}
	body.mouse.moderator #visitors .visitor:hover {
		cursor: pointer;
		background: rgba(255,255,255,0.3);
		color: white;
		filter: brightness(1.5);
		opacity: 1;
		padding-left: 1em;
		padding-right: 1em;
		margin-left: -1em;
		margin-right: -1em;
		border-radius: 1em;
	}
	body.mouse[data-mode="started"] #media-control.visible-mouse,
	body.mouse[data-mode="testing"] #media-control.visible-mouse {
		visibility: visible;
	}
/*}*/
/*@media (hover: none) {*/
	body.touch[data-mode="started"] #media-control.visible-touch,
	body.touch[data-mode="testing"] #media-control.visible-touch {
		visibility: visible;
	}
	body.touch *[title]:active {
		position: relative;
	}
	body.touch *[title]:after {
		content: attr(title);
		display: block;
		position: fixed;
		font-size: 1rem;
		margin-left: 1em;
		margin-top: -2em;
		transform: translate(-50%, 0) scale(0%);
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s ease-in-out 0.3s;
		color: rgba(255, 255, 255, 0.9);
		background: rgba(0, 0, 0, 0.5);
		padding: 0.5em;
		backdrop-filter: blur(2px);
		max-width: 80vw;
		white-space: normal !important;
		width: max-content;
		font-family: Calibri, Carlito, sans-serif;
		z-index: 10000;
	}
	body.touch *[title]:active::after {
		opacity: 1;
		transform: translate(-50%, -100%);
	}
/*}*/
#chat {
	display: block;
}
body.recorded #chatpost-wrap {
	display: none;
}
@media (orientation: landscape) {
	.tab-body {
		box-sizing: border-box;
		width: var(--sidebar-width);
	}
	#chat {
		right: 0;
		z-index: 60;
	}
	.sidebar {
		transition: bottom 0.1s ease-in-out, width 0.1s ease-in-out, margin 0.1s ease-in-out;
	}
	body.presenter:not(.recorded) #control[open] ~ #descr,
	body.presenter:not(.recorded) #control[open] ~ #icons,
	body.presenter:not(.recorded) #control[open] ~ #media {
		margin-left: var(--sidebar-width);
		--left: var(--sidebar-width);
	}
	#chat[open] ~ #descr,
	#chat[open] ~ #icons,
	#chat[open] ~ #media {
		margin-right: var(--sidebar-width);
		--right: var(--sidebar-width);
	}
	.tab-tips .ifmerged {
		display: none;
	}
	#control {
		left: 0;
		width: var(--sidebar-width);
		max-width: 80vw;
	}
}
@media (orientation: portrait) {
	form.central {
		width: min-content;
	}
	#chat[open], #control[open] {
		height: var(--mobile-chat-height);
		left: 0;
	}
	body.presenter[data-mode="started"] #descr,
	body.presenter[data-mode="testing"] #descr,
	body.presenter[data-mode="scheduled"] #descr,
	body.presenter[data-mode="started"] #media,
	body.presenter[data-mode="testing"] #media,
	body.presenter[data-mode="scheduled"] #media {
		margin-bottom: 4rem;
		--bottom: 4rem;
	}
	#chat[open] ~ #media, #chat[open] ~ #descr,
	body.presenter #control[open] ~ #media, body.presenter #control[open] ~ #descr {
		margin-bottom: var(--mobile-chat-height);
		--bottom: var(--mobile-chat-height);
	}
	#chat[open] ~ #icons,
	body.presenter #control[open] ~ #icons {
		bottom: var(--mobile-chat-height);
		font-size: 50%;
	}
	#icons.visible {
		justify-content: center;
	}
	#chat[open] ~ #icons.visible,
	body.presenter #control[open] ~ #icons.visible {
		justify-content: flex-end;
	}
	.sidebar > summary:before {
		content: 'expand_more';
	}
	#chat, #control {
		top: auto;
		bottom: 0;
		right: 0;
		width: auto;
	}
	#chat:not([open]) > summary,
	#control:not([open]) > summary {
		position: fixed;
		bottom: 0;
		right: 0;
		top: calc(100% - 4rem);
		width: 1rem;
		margin: auto;
	}
	#control summary {
		text-align: right;
	}
	/*#descr {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		overflow: hidden;
		margin: 0;
	}*/
}