* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}
html {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
li > ul {
	padding-left: 1em;
}
pre {
	margin: 0;
}
#main {
	padding: 1em 1.5em;
	height: 100%;
	width: 100%;
	font-family: monospace;
}
#user-input {
	display: flex;
	margin: 1em;
	padding: 0;
	height: 20em;
	width: 20em;
	text-align: center;
	justify-content: center;
	border: 1px solid gray;
	outline: .5em dashed #d0d0d0;
	outline-offset: -1em;
	background: white;
	overflow: hidden;
	align-items: center;
}
#user-input > div {
	cursor: pointer;
}
#info {
	height: 10%;
	margin: 1em;
}
#results {
	display: none;
	height: 100%;
}
#results-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 8em 3fr 1fr 1fr 3em;
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	height: 100%;
}
button {
	height: 3em;
	padding: .75em 1.25em;
	border: none;
	color: white;
	background-color: green;
}
button:disabled {
	opacity: 50%;
}
#start-conversion {
	float: left;
}
#transcript-download {
	float: right;
	background-color: #39e;
}
#toggle-links {
	display: block;
	position: absolute;
	height: auto;
	right: 0;
	margin: 1.5em 1em;
	padding: .4em;
	background-color: gray;
	z-index: 10;
}
#toggle-links.toggle-on {
	background-color: darkred;
}
#clear-selection {
	display: block;
	position: absolute;
	height: auto;
	right: 0;
	margin: 1.5em 1em;
	padding: .4em;
	background-color: orange;
	z-index: 10;
}
input:checked + label {
  font-weight: bold;
}
#loading {
	display: none;
	margin-left: 1em;
	font-style: italic;
	color: #555;
	line-height: 3em;
}
#loading > img {
	display: inline;
	height: 1.25em;
	width: 1.25em;
	vertical-align: text-bottom;
}
#preview-tiers-box {
	grid-area: 1 / 1 / 2 / 2;
	overflow: scroll;
}
#preview-box-container {
	grid-area: 2 / 1 / 4 / 2;
	position: relative;
	overflow: hidden;
}
#preview-box {
	overflow: scroll;
	height: 100%;
}
#preview-overlay {
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 100;
	background: center no-repeat url("loading.gif") #fff7;
}
#export-tiers-box {
	grid-area: 4 / 1 / 6 / 2;
	overflow: scroll;
}
#output-box-container {
	grid-area: 1 / 2 / 3 / 3;
	position: relative;
	overflow: hidden;
}
#output-box {
	overflow: scroll;
	height: 100%;
}
#export-box {
	grid-area: 3 / 2 / 4 / 3;
	overflow: scroll;
}
#progress-box {
	grid-area: 4 / 2 / 5 / 3;
	overflow: scroll;
}
#buttons {
	grid-area: 5 / 2 / 6 / 3;
}
.input-initials {
	width: 5.5em;
	height: 1.5em;
	margin: 0 0.7em;
	font-family: monospace;
	font-size: .75em;
}
.transcript-line {
	padding-left: 3em;
	text-indent: -3em;
	cursor: pointer;
}
.selected-line {
	background: yellow;
	font-weight: bold;
}