.panel-container {
	position: relative;
	top: 60px;
	left: 100px;
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-template-areas:
		'.              panel-topbar   .               .'
		'panel-sidebar   panel-config   panel-settings   panel-measure';
}

.panel-topbar {
	grid-area: panel-topbar;
	display: flex;
	gap: 10px;
	max-height: 40px;
	padding-bottom: 5px;
	padding-left: 40px;
}

.panel-sidebar {
	grid-area: panel-sidebar;
	display: flex;
	flex-direction: column;
	width: 28px;
	padding-right: 5px;
}

.panel-sidebar img {
	margin: 5px 3px;
}

/* Shared panel styles */
.panel-config,
.panel-settings,
.panel-measure {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 180px);
	max-height: 800px;
	padding: 30px;
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--panel-bg);
	border: solid 1px var(--panel-border);
	border-radius: var(--panel-radius);
	box-shadow: var(--panel-shadow);
	color: var(--panel-text);
}

.panel-config {
	grid-area: panel-config;
	width: 500px;
	margin: 0 10px 0 0;
}

.panel-settings {
	grid-area: panel-settings;
	width: 500px;
	margin: 0 10px;
}

.panel-measure {
	grid-area: panel-measure;
	width: 350px;
	margin: 0 0 0 10px;
}

/* Scrollbar styling */
.panel-config::-webkit-scrollbar,
.panel-settings::-webkit-scrollbar,
.panel-measure::-webkit-scrollbar { width: 8px; }

.panel-config::-webkit-scrollbar-track,
.panel-settings::-webkit-scrollbar-track,
.panel-measure::-webkit-scrollbar-track { background: var(--panel-scrollbar-track); }

.panel-config::-webkit-scrollbar-thumb,
.panel-settings::-webkit-scrollbar-thumb,
.panel-measure::-webkit-scrollbar-thumb { background: var(--panel-scrollbar); border-radius: var(--panel-scrollbar-radius); }

.panel-config::-webkit-scrollbar-thumb:hover,
.panel-settings::-webkit-scrollbar-thumb:hover,
.panel-measure::-webkit-scrollbar-thumb:hover { background: var(--panel-scrollbar-hover); }

/* Dispense head section */
.dh-section {
	display: grid;
	grid-template-columns: 70px 345px;
	align-items: start;
	justify-items: start;
	gap: 15px;
	margin-bottom: 20px;
}

.dh-section .four-column {
	grid-column: 1 / -1;
	gap: 10px;
	justify-self: stretch;
}

.dh-section .dh-summary {
	grid-column: 2;
	width: 345px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-link-on-dark);
	text-align: right;
}

.dh-section .dh-controls {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 70px;
	gap: 15px;
}

.dh-section .dh-controls .btn {
	padding: 6px 0;
	font-size: 11px;
}

.dh-section .dh-column-2 {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.dh-section .dh-column-2 .two-column {
	width: 345px;
}

.dh-section > .two-column {
	grid-column: 2;
	padding-top: 10px;
}

.dh-section .dh-grid-container {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	height: 250px;
	width: 345px;
	background: white;
	border: solid 1px var(--border-muted);
	border-radius: var(--panel-radius);
	box-shadow: var(--panel-shadow);
}

label.prefill {
	display: block;
	font-size: 14px;
	margin-top: 40px;
	padding: 10px 0;
	border-top: solid 1px var(--border-muted);
}