body {
	display: flex;
	margin: 0;
	font: 87.5%/1.5 "Helvetica Neue", Helvetica, sans-serif;
	color: #333;
	background-color: white;
}

@media (max-width: 920px) {
	body {
		flex-flow: column;
	}
}

h3 {
	margin: 10px 0;
	line-height: 1;
	font-size: 150%;
}

button,
input[type=text],
textarea {
	margin: 0;
    padding: .2em .3em;
	font: inherit;
	border-radius: 4px;
}

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

textarea {
    height: auto;
}

textarea,
input[type=text] {
	color: #555555;
	background: white;
	border: 1px solid #cccccc;
	transition: border linear 0.2s;
}

textarea:focus,
input:focus {
	border-color: rgba(82, 168, 236, 0.8);
	outline: 0;
}

textarea[readonly] {
	background: #eeeeee;
}

button {
	padding: 4px 12px;
	margin-bottom: 0;
	color: #333333;
	cursor: pointer;
	background: rgba(0,0,0,.05);
	border: none;
}

button:hover,
button:focus,
button:active {
	background-color: rgba(0,0,0,.1);
	outline: 0;
}

button:active {
	background-color: rgba(0,0,0,.15);
}

button:focus {
	outline: none;
	box-shadow: 0 0 5px #f60;
}

button.primary {
	color: white;
	background: #006dcc;
}

button.primary:hover,
button.primary:focus,
button.primary:active {
	background: #04c;
}


textarea {
	resize: none;
	width: 100%;
	box-sizing: border-box;
	display: block;
}

video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: black;
}

#videos {
	flex: 1;
	position: relative;
	height: 100vh;
}

	#localVideo {
		position: absolute;
		bottom: 1em;
		right: 1em;
		width: auto;
		height: auto;
		max-width: 25%;
		max-height: 25%;
	}

progress:indeterminate {
	width: calc(50% - 15px);
	box-sizing: border-box;
	transform: scale(2);
	transform-origin: 0 0;
	filter: contrast(3) saturate(.3) hue-rotate(110deg);
	margin: 0 0 15px 15px;
}

#chat {
	flex-basis: 35%;
	display: flex;
	flex-flow: column;
	height: 100vh;
}

	#chatlog {
		flex: 1;
		display: flex;
		flex-flow: column;
		padding: 1em;
		max-height: 100%;
		overflow: auto;
	}

	.message {
		position: relative;
		overflow-wrap: break-word;
	}

	.status.message {
		text-align: center;
		color: rgba(0,0,0,.5);
	}

		.message time {
			opacity: .4;
			color: black;
		}

	.message:not(.status) {
		max-width: 70%;
		padding: .5em 1em;
		border-radius: .6em;
		margin: 1em 0 0;
	}

	.own.message {
		background: #3a87ad;
		color: white;
		margin-left: auto;
	}

	.own.message + .own.message,
	.other.message + .other.message {
		margin-top: .3em;
	}

	.other.message {
		margin-right: auto;
		background: rgba(0,0,0,.1);
		color: rgba(0,0,0,.8)
	}

		.message:not(.status) time {
			position: absolute;
			top: 100%;
			left: .6em;
		}

		.message:not(.status):not(:hover):not(:focus):not(:active) time {
			display: none;
		}

#chat footer {
	padding: 1em;
	background: #f5f5f5;
}

#send-message {
	display: flex;
	margin-bottom: 1em;
}

	#send-message input {
		flex: 1;
		margin-right: .5em;
	}

dialog {
	max-width: 600px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0;
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
}

	@media (max-width: 600px) {
		dialog {
			max-width: calc(100% - 2em);
		}
	}

.modal-body {
  padding: 15px;
}

	dialog > h3 {
		margin: 0;
		padding: .5em 1em;
		border-bottom: 1px solid #eee;
	}

dialog footer  {
	display: flex;
	justify-content: flex-end;
	padding: 14px 15px 15px;
	margin-bottom: 0;
	text-align: right;
	background-color: #f5f5f5;
	border-top: 1px solid #ddd;
	border-radius: 0 0 6px 6px;
	box-shadow: inset 0 1px 0 #ffffff;
}

	dialog footer button {
		margin: 0 .2em;
	}

	dialog footer button.back {
		margin-left: 0;
		order: 0;
		margin-right: auto;
	}

	dialog footer button:last-child {
		margin-right: 0;
	}

.to-copy {
	cursor: copy;
}