:root {
	--text-color: #505050;
	--input-text-color: #f7f7f7;
	--background-color: white;
}

*, *:after, *:before {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: Helvetica, sans-serif;
	font-size: 15px;
	background: var(--background-color);
	color: var(--text-color);
}

a {
	color: inherit;
}

input, textarea, select {
	font: inherit;
	vertical-align: middle;
}

textarea {
	width: 100%;
	tab-size: 4;
	min-height: 10em;
	background: transparent;
	color: white;
	border: none;
	display: block;
	margin: 0;
	padding: 0.5em;
	outline: none;
	resize: vertical;
}

select {
	padding: 0.5em 2.4em 0.5em 1em;
	background-image: url("data:image/svg+xml,%3Csvg viewBox=%22-15 -15 30 30%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath fill=%22white%22 d=%22M13,-10 L-13,-10 L0,12.5 Z%22%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8em center;
	background-size: 0.8em 0.8em;
}

html.playing .hide-on-play {
	display: none;
}

html:not(.playing) .show-on-play {
	display: none;
}

.flex-grow {
	display: flex;
	flex: 1 1 auto;
}

.flex-none {
	display: flex;
	flex: 0 0 auto;
}

.button {
	border: 0;
	cursor: pointer;
	font: inherit;
	background-color: #2b303b;
	color: var(--input-text-color);
	border-radius: 0.25em;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
}

.button {
	border: 0;
	padding: 0.5em 1em;
	margin: 0;
	display: inline-block;
}

.button-green {
	background-color: #20a000;
}

.button-red {
	background-color: #d04000;
}

.button-icon {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.controls-wrapper {
	padding: 0.8em 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	background: var(--background-color);
}

.controls-wrapper .control {
	padding: 0 0.4em;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.controls-wrapper .control .label-text {
	padding-right: 0.5em;
}