/* ! import */

@font-face
	{
		font-family: 'Ultima Pro';
		src: local('Ultima Pro'), local('UltimaPro'),
			url('https://altera.center/lib/fonts/UltimaPro.woff2') format('woff2'),
			url('https://altera.center/lib/fonts/UltimaPro.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}

/* ! reset */

*:where(:not(html, iframe, img, svg, audio, video):not(svg *, symbol *)) {all: unset; display: revert; cursor: revert;}
*, *::before, *::after {box-sizing: border-box;}

body
	{
		background: #000;
		-webkit-user-select: none;
		user-select: none;
		cursor: default;
		font-family: 'Ultima Pro';
		font-size: 16px;
		line-height: 1.3;
	}

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

.wrap
	{
		position: absolute;
		right: 1.5vw;
		top: 1.5vw;
		width: 25vw;
		min-width: 64px;
		max-width: calc(95.5vw - 48px);
		z-index: 16;
	}

.container::after, .wrap::after
	{
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 15;
	}

.wrap>span
	{
		position: absolute;
		left: 2px;
		bottom: 2px;
		width: 20px;
		height: 20px;
		z-index: 20;
		cursor: nesw-resize;
		overflow: hidden;
		display: none;
	}

.show .wrap>span
	{
		display: block;
	}

.wrap>span::after
	{
		content: '';
		border: 1px solid rgba(255, 255, 255, .5);
		position: absolute;
		left: -20px;
		top: 14px;
		width: 50px;
		height: 5px;
		transform: rotate(45deg);
		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, .25));
	}

#localVideo
	{
		width: 100%;
		border-radius: .5vw;
		background: #000;
		transform: scaleX(-1);
		display: block;
	}

.show #localVideo
	{
		box-shadow: 0 0 0 .5px rgba(255, 255, 255, .15), 0 0 1vw rgba(0, 0, 0, .5);
	}

#remoteVideo
	{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 5;
/* 		object-fit: cover; */
		background: #000;
	}

#info
	{
		width: 460px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -230px;
		margin-top: -140px;
		z-index: 10;
		color: #fff;
		text-align: center;
	}

#info.hide
	{
		display: none;
	}

#close, #mute, #hidden
	{
		position: absolute;
		left: 50%;
		margin-left: -24px;
		bottom: 3vw;
		width: 48px;
		height: 48px;
		border-radius: 100px;
		z-index: 20;
		cursor: pointer;
		background: #da3b26 url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTI2LjgzIDI0IDYuODgtNi44OGMuMzktLjM5LjM5LTEuMDIgMC0xLjQxbC0xLjQxLTEuNDFjLS4zOS0uMzktMS4wMi0uMzktMS40MSAwbC02Ljg5IDYuODctNi44OC02Ljg4Yy0uMzktLjM5LTEuMDItLjM5LTEuNDEgMGwtMS40MSAxLjQxYy0uMzkuMzktLjM5IDEuMDIgMCAxLjQxbDYuODcgNi44OS02Ljg4IDYuODhjLS4zOS4zOS0uMzkgMS4wMiAwIDEuNDFsMS40MSAxLjQxYy4zOS4zOSAxLjAyLjM5IDEuNDEgMGw2Ljg5LTYuODcgNi44OCA2Ljg4Yy4zOS4zOSAxLjAyLjM5IDEuNDEgMGwxLjQxLTEuNDFjLjM5LS4zOS4zOS0xLjAyIDAtMS40MXoiLz48L3N2Zz4=) center center no-repeat;
		box-shadow: 0 0 10px rgba(0, 0, 0, .15);
		transition: background-color .25s, box-shadow .25s;
		display: none;
	}

#mute, #hidden
	{
		margin-left: -88px;
		background: #007bb6 url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTE5IDI0LjA4di03LjQ3YzAtMi43NiAyLjI0LTUgNS01czUgMi4yNCA1IDV2Ny40N2MwIDIuNzYtMi4yNCA1LTUgNXMtNS0yLjI0LTUtNXptMTMuNTItLjA4di0xLjQyYzAtLjU1LS40NS0xLTEtMXMtMSAuNDUtMSAxdjEuNDJjMCAzLjU5LTIuOTIgNi41Mi02LjUyIDYuNTJzLTYuNTItMi45Mi02LjUyLTYuNTJ2LTEuNDJjMC0uNTUtLjQ1LTEtMS0xcy0xIC40NS0xIDF2MS40MmMwIDQuMzYgMy4yOSA3Ljk1IDcuNTIgOC40NXYyLjU1aC00LjU5Yy0uNTUgMC0xIC40NS0xIDFzLjQ1IDEgMSAxaDExLjE3Yy41NSAwIDEtLjQ1IDEtMXMtLjQ1LTEtMS0xaC00LjU4di0yLjU1YzQuMjMtLjUgNy41Mi00LjA5IDcuNTItOC40NXoiLz48L3N2Zz4=) center center no-repeat;
	}

#hidden
	{
		margin-left: 40px;
		background: #007bb6 url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTI5IDE5djEwYzAgMS42Ni0xLjM0IDMtMyAzaC0xMWMtMS42NiAwLTMtMS4zNC0zLTN2LTEwYzAtMS42NiAxLjM0LTMgMy0zaDExYzEuNjYgMCAzIDEuMzQgMyAzem01LjgyLTIuMTctNC44MiAzLjM3djcuNmw0LjgyIDMuMzdjLjUuMzUgMS4xOC0uMDEgMS4xOC0uNjF2LTEzLjEyYzAtLjYxLS42OC0uOTYtMS4xOC0uNjF6Ii8+PC9zdmc+) center center no-repeat;
	}

#mute:hover, #hidden:hover
	{
		background-color: #4886b9;
/* 		box-shadow: 0 0 20px rgba(0, 0, 0, .25); */
	}

#close:hover, #mute.muted:hover, #hidden.hidden:hover
	{
		background-color: #de4e3b;
	}

.show #close, .show #mute, .show #hidden
	{
		display: block;
	}

#mute.muted, .remote-muted .container::after, .local-muted .wrap::after
	{
		background: #da3b26 url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTMwLjU5IDM2YzAgLjU1LS40NSAxLTEgMWgtMTEuMThjLS41NSAwLTEtLjQ1LTEtMXMuNDUtMSAxLTFoNC41OXYtMi41NWMtNC4yMy0uNS03LjUyLTQuMS03LjUyLTguNDV2LTEuNDJjMC0uNTUuNDUtMSAxLTFzMSAuNDUgMSAxdjEuNDJjMCAzLjU5IDIuOTIgNi41MiA2LjUyIDYuNTIgMS4yNiAwIDIuNDMtLjM3IDMuNDMtLjk5bDEuNDQgMS40NGMtMS4xMi43OS0yLjQ0IDEuMzItMy44NyAxLjQ4djIuNTVoNC41OWMuNTUgMCAxIC40NSAxIDF6bS0xLjU5LTE5LjM5YzAtMi43Ni0yLjI0LTUtNS01LTIuMDEgMC0zLjczIDEuMTktNC41MiAyLjlsOS41MiA5LjUyem0zLjUyIDcuMzl2LTEuNDJjMC0uNTUtLjQ1LTEtMS0xcy0xIC40NS0xIDF2MS40MmMwIC40OC0uMDUuOTQtLjE1IDEuMzlsMS42IDEuNmMuMzUtLjkzLjU1LTEuOTQuNTUtMi45OXptLTguNTIgNS4wOGMuODYgMCAxLjY2LS4yNCAyLjM2LS42MmwtNy4zNi03LjM2djIuOThjMCAyLjc2IDIuMjQgNSA1IDV6bTExLjA1IDMuMTItMjAuMjgtMjAuMjhjLS4zOS0uMzktMS4wMi0uMzktMS40MSAwcy0uMzkgMS4wMiAwIDEuNDFsMjAuMjggMjAuMjhjLjIuMi40NS4yOS43MS4yOXMuNTEtLjEuNzEtLjI5Yy4zOC0uMzkuMzgtMS4wMi0uMDEtMS40MXoiLz48L3N2Zz4=) center center no-repeat;
	}

#hidden.hidden, .remote-hidden .container::after, .local-hidden .wrap::after
	{
		background: #da3b26 url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTI5IDI0LjAzLTguMDMtOC4wM2g1LjAzYzEuNjYgMCAzIDEuMzQgMyAzem01LjgyLTcuMi00LjgyIDMuMzd2NC44M2w1LjkgNS45Yy4wNi0uMTEuMS0uMjMuMS0uMzd2LTEzLjEyYzAtLjYxLS42OC0uOTYtMS4xOC0uNjF6bS0yMi44MiAyLjE3djEwYzAgMS42NiAxLjM0IDMgMyAzaDExYzEuMDYgMCAxLjk5LS41NSAyLjUyLTEuMzhsLTE0LjQ1LTE0LjQ2Yy0xLjIuNC0yLjA3IDEuNTEtMi4wNyAyLjg0em0yLjc3LTcuMDhjLS4zOS0uMzktMS4wMi0uMzktMS40MSAwcy0uMzkgMS4wMiAwIDEuNDFsMjAuMjggMjAuMjhjLjIuMi40NS4yOS43MS4yOXMuNTEtLjEuNzEtLjI5Yy4zOS0uMzkuMzktMS4wMiAwLTEuNDF6Ii8+PC9zdmc+) center center no-repeat;
	}

.remote-hidden .container::after, .remote-muted .container::after
	{
		background-color: transparent !important;
		background-size: 192px 192px;
		opacity: .5;
	}

.local-hidden .wrap::after, .local-muted .wrap::after
	{
		background-color: transparent !important;
		background-size: 96px 96px;
		opacity: .5;
	}

#settings
	{
		background: white;
		position: absolute;
		right: calc(1.5vw + 44px);
		top: calc(1.5vw + 10px);
		padding: 8px 0;
		border-radius: 8px;
		box-shadow: 0 0 1vw rgba(0, 0, 0, .5);
		font-size: 14px;
		overflow: hidden;
		display: none;
		z-index: 200;
	}

#settings.open
	{
		display: block;
	}

#settings div, #settings span
	{
		display: block;
		white-space: nowrap;
		padding: 8px 30px 4px 10px;
		cursor: pointer;
	}

#settings h3
	{
		display: block;
		white-space: nowrap;
		padding: 8px 30px 4px 10px;
		color: #aaa;
	}

#settings div:hover, #settings span:hover
	{
		background: #ebebeb;
	}

#settings div.active, #settings span.active
	{
		background: #007bb6;
		color: #fff;
		cursor: default;
	}

#options
	{
		position: absolute;
		width: 24px;
		height: 24px;
		right: calc(1.5vw + 10px);
		top: calc(1.5vw + 10px);
		background: url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIxLjQ4IDEyYzAtLjI2LS4wMi0uNTEtLjA0LS43NmwyLjM4LTEuMjZjLS4zMS0xLjgxLTEuMDEtMy40OC0yLjAzLTQuOTFsLTIuNTguNzljLS4zMy0uMzktLjY5LS43NC0xLjA3LTEuMDdsLjc5LTIuNThjLTEuNDQtMS4wMi0zLjEtMS43Mi00LjkxLTIuMDNsLTEuMjYgMi4zOGMtLjI1LS4wMi0uNS0uMDQtLjc2LS4wNHMtLjUxLjAyLS43Ni4wNGwtMS4yNi0yLjM4Yy0xLjgxLjMxLTMuNDcgMS4wMi00LjkxIDIuMDNsLjc5IDIuNThjLS4zOC4zMy0uNzQuNjktMS4wNyAxLjA3bC0yLjU4LS43OWMtMS4wMSAxLjQ0LTEuNzIgMy4xLTIuMDMgNC45MWwyLjM4IDEuMjZjLS4wMi4yNS0uMDQuNS0uMDQuNzZzLjAyLjUxLjA0Ljc2bC0yLjM4IDEuMjZjLjMxIDEuODEgMS4wMSAzLjQ4IDIuMDMgNC45MWwyLjU4LS43OWMuMzMuMzkuNjkuNzQgMS4wNyAxLjA3bC0uNzkgMi41OGMxLjQ0IDEuMDIgMy4xIDEuNzIgNC45MSAyLjAzbDEuMjYtMi4zOGMuMjUuMDIuNS4wNC43Ni4wNHMuNTEtLjAyLjc2LS4wNGwxLjI2IDIuMzhjMS44MS0uMzEgMy40OC0xLjAxIDQuOTEtMi4wM2wtLjc5LTIuNThjLjM5LS4zMy43NC0uNjkgMS4wNy0xLjA3bDIuNTguNzljMS4wMi0xLjQ0IDEuNzItMy4xIDIuMDMtNC45MWwtMi4zOC0xLjI2Yy4wMi0uMjUuMDQtLjUuMDQtLjc2em0tNC4yOCAwYzAgMi44Ny0yLjMzIDUuMi01LjIgNS4ycy01LjItMi4zMy01LjItNS4yIDIuMzMtNS4yIDUuMi01LjIgNS4yIDIuMzMgNS4yIDUuMnoiLz48L3N2Zz4=) center center no-repeat;
		z-index: 25;
		cursor: pointer;
		display: none;
		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, .25));
	}

#options.show
	{
		display: block;
	}

#note
	{
		position: absolute;
		left: 1.5vw;
		top: 1.5vw;
		width: 48px;
		height: 48px;
		border-radius: 100px;
		z-index: 25;
		cursor: pointer;
		background: #777 url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTMzIDE2aC0xOGMtMS42NiAwLTMgMS4zNC0zIDN2MTBjMCAxLjY2IDEuMzQgMyAzIDNoMXY1bDUtNWgxMmMxLjY2IDAgMy0xLjM0IDMtM3YtMTBjMC0xLjY2LTEuMzQtMy0zLTN6bS0xNCA5Ljc1Yy0uOTcgMC0xLjc1LS43OC0xLjc1LTEuNzVzLjc4LTEuNzUgMS43NS0xLjc1IDEuNzUuNzggMS43NSAxLjc1LS43OCAxLjc1LTEuNzUgMS43NXptNSAwYy0uOTcgMC0xLjc1LS43OC0xLjc1LTEuNzVzLjc4LTEuNzUgMS43NS0xLjc1IDEuNzUuNzggMS43NSAxLjc1LS43OCAxLjc1LTEuNzUgMS43NXptNSAwYy0uOTcgMC0xLjc1LS43OC0xLjc1LTEuNzVzLjc4LTEuNzUgMS43NS0xLjc1IDEuNzUuNzggMS43NSAxLjc1LS43OCAxLjc1LTEuNzUgMS43NXoiLz48L3N2Zz4=) center center no-repeat;
		box-shadow: 0 0 10px rgba(0, 0, 0, .15);
		display: none;
	}

.show #note
	{
		display: block;
	}

#note div
	{
		background: white;
		position: absolute;
		left: 58px;
		top: 0;
		padding: 8px 0;
		border-radius: 8px;
		box-shadow: 0 0 1vw rgba(0, 0, 0, .5);
		font-size: 14px;
		overflow: hidden;
		display: none;
		z-index: 200;
	}

#note.open div
	{
		display: block;
	}

#note div span
	{
		display: block;
		white-space: nowrap;
		padding: 8px 30px 4px 10px;
		cursor: pointer;
	}

#note div span:hover
	{
		background: #ebebeb;
	}

#over
	{
		color: #da3b26;
	}

@media (max-width: 640px)
	{
		.wrap
			{
				right: 3vw;
				top: 3vw;
				width: 35%;
				max-width: calc(91vw - 48px);
			}
		#localVideo
			{
				border-radius: 1vw;
			}
		#close, #mute, #hidden
			{
				bottom: 6vw;
			}
		.show #localVideo
			{
				box-shadow: 0 0 0 .5px rgba(255, 255, 255, .15), 0 0 2vw rgba(0, 0, 0, .5);
			}
		#options
			{
				right: calc(3vw + 5px);
				top: calc(3vw + 5px);
				width: 18px;
				height: 18px;
				background-size: cover;
			}
		#settings
			{
				right: calc(3vw + 28px);
				top: calc(3vw + 5px);
			}
		#note
			{
				left: 3vw;
				top: 3vw;
			}
		#info
			{
				width: auto;
				position: absolute;
				left: 30px;
				right: 30px;
				margin-left: 0;
			}
	}

/* ! stop */

.stop-sign
	{
		--size: 200px;
		--color-red: #da3b26;
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: calc(-1 * var(--size) / 2.5 / 2);
		margin-left: calc(-1 * var(--size) / 2);
		width: var(--size);
		height: calc(var(--size) / 2.5);
		color: #fff;
		background-color: var(--color-red);
		box-shadow: inset 0 calc(var(--size) / 2.5) var(--color-red);
		font-family: Verdana, sans-serif;
		font-size: calc(var(--size) / 2.5);
		line-height: calc(var(--size) / 2.5);
		text-align: center;
		-webkit-user-select: none;
		user-select: none;
		cursor: default;
	}

.stop-sign::before
	{
		content: '';
		position: absolute;
		left: 0;
		top: calc(-1 * (var(--size) / 3.333333));
		width: var(--size);
		height: 0;
		border-bottom: calc(var(--size) / 3.333333) solid var(--color-red);
		border-left: calc(var(--size) / 3.333333) solid transparent;
		border-right: calc(var(--size) / 3.333333) solid transparent;
	}

.stop-sign::after
	{
		content: '';
		position: absolute;
		left: 0;
		bottom: calc(-1 * (var(--size) / 3.333333));
		width: var(--size);
		height: 0;
		border-top: calc(var(--size) / 3.333333) solid var(--color-red);
		border-right: calc(var(--size) / 3.333333) solid transparent;
		border-left: calc(var(--size) / 3.333333) solid transparent;
	}