body {
	width: 95% !important;
}

#editor-before, #editor-after {
	width: 500px;
	height: 250px;
}

#diff-message {
	font-style: italic;
	font-color: #696969;
}

.mathml-pre {
	max-width: 475px;
	max-height: 175px;
	padding: 0 !important;
	overflow-y: scroll !important;
	word-break: break-all !important;
	word-wrap: break-word !important;
}

.mathml-pre-big {
	max-width: 750px;
	max-height: none;
}

.mathml-container {
	font-size: 0.8em;
	word-wrap: break-word !important;
	word-break: break-all !important;
	white-space: pre-wrap !important;
}

.box {
	padding: 0.75em;
	border-color: #bbb;
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	min-width: 450px;
}

.box::before {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.2em;
	color: #696969;
}

.box-before::before {
	content: "Before";
}

.box-after::before {
	content: "After";
}

.box-diff::before {
	content: "Diff";
}

.app-container {
	width: 100%;
}

.flex {
	margin: 1em 2.5em;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-around;
	align-content: space-around;
}

.flex-horizontal {
	flex-direction: row;
}

.flex-vertical {
	flex-direction: column;
}

.flex > * {
	margin: 1.5em;
}

.symbol-control {
	font-size: 1.75em;
	font-weight: bold;
	padding: 0.25em;
	margin: 0.25em;
	display: block;
}