#middle {
	flex-shrink: 0;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

#input {
	flex-grow: 1;
}

#schematic {
	border-top: 1px solid #aaa;
	background: #222;
	flex-grow: 1;
}
#schematic.compiling {
	opacity: 0.7;
}

#output {
	display: flex;
	flex-direction: column;
	background: #111;
	position:relative;
	overflow: hidden;
}

#terminal-box {
	flex-shrink: 0;
}
#schematic.d-none + #terminal-box {
	flex-grow: 1;
}

@media screen and (min-width: 800px) {
	#schematic {
		border-top: none;
		width: 50vw;
	}
	#terminal-box,
	#properties {
		width: 50vw;
	}
}

/* header */

header h1 {
	margin: 8px;
	font-size: 1.3rem;
}

header > *:not(h1) {
	margin: 4px 4px 4px 0;
}

#target .project-name {
	display: flex;
	justify-content: space-between;
}
#target .project-name .buttons {
	margin-left: 16px;
}
.edit-symbol {
	transform: scaleX(-1);
}

/* textarea */

#input {
	font-family: monospace;
	font-size: 14px;
	-moz-tab-size: 4;
	tab-size: 4;
	border: none;
	padding: 7px;
	resize: none;
}

.btn {
	padding: 0px !important;
}