plate-tool/assets/css/global.css

:root {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
h1, h2, h3 {
	padding: 0;
	margin: 0;
	margin-bottom: 0.4em;
	margin-top: 0.4em;
}

div.main_container {
	height: 95vh;
	width: 98vw;
	display: grid;
	grid-template-columns: [left] 1fr [right] 1fr;
	grid-template-rows: [upper] 2fr [lower] 1fr;

	column-gap: 1vw;
	row-gap: 1vh;
}

div.tree {
	grid-column: left / left;
	grid-row: upper / upper;
	width: 100%;
	height: 100%;
	border: 2px solid green;
}
div.tree li {
	user-select: none;
}
div.tree li.selected {
	background: rgba(0,0,150,0.2);
}

div.transfer_menu {
	grid-column: left / left;
	grid-row: lower / lower;
	width: 100%;
	height: 100%;
	border: 2px solid orange;
}
div.transfer_menu input:invalid {
	background-color: #faa;
}

div.plate_container {
	border: 2px dashed purple;
	grid-column: right / right;
	grid-row: upper / 3;
}

.dialog {
	padding: 1em;
}
.dialog::backdrop {
	background: rgba(0,125,255,0.3);
}