.room-status {
	font-size: x-large;
	margin: 10px;
	display: flex;
	flex-direction: row;
}

.room-status label {
	display: block;
	flex: 1;
}
.room-status select {
	display: block;
	font-size: large;
	min-width: 50%;
}

.card > div {
	text-transform: capitalize;
	font-weight: bold;
}

.container {
	display: grid;
}
.container > div {
	padding-left: 10px;
	padding-right: 10px;
}

.video-control-grid, .video-monitoring-grid {
	display: grid;
}

.video-control-grid {
	grid-template-columns: repeat(2, 1fr);
}

.video-monitoring img {
	width: 80%;
	max-width: 100%;
}

.video-control input[type=submit] {
	display: block;
	width: 100%;
	min-height: 50px;
	font-size: large;
	white-space: normal;
}

@media screen and (min-width: 576px) {
	.container {
		grid-template-columns: repeat(2, 1fr);
	}
	.video-control-grid, .video-monitoring-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.monitoring-large {
		grid-column: span 2;
	}
	.video-control input[type=submit] {
		font-size: x-large;
	}
}

.video-control form {
	display: flex;
	width: 100%;
	height: 100%;
}

.video-monitoring canvas {
	width: 100%;
}
