.grid-container {
	display: grid;
	grid-template-areas:
			'header header'
			'dataset dataset'
			'main sidebar'
			'requestBuilder requestBuilder'
			'buttons buttons'
			'footer footer';
	grid-row-gap: 4px;
	grid-column-gap: 1em;

	/* Constrain the size of sidebar to 302px, which is just large enough to contain the map and border. */
	grid-template-columns: auto 302px;

	padding: 1em;
}

.grid-container > div {
	padding-bottom: 6px;

	/* These ensure that long text strings get wrapped properly, instead of breaking the layout. */
	overflow: auto;
	overflow-wrap: break-word;
}

.grid-container > div:last-child {
	padding-bottom: 0;  /* Last layout item has no margin-bottom. */
}


.header {
	grid-area: header;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1px solid var(--main-border-color);
}

.unidata {
	display: flex;
	flex-direction: row;
}

.appTitle {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-right: 6px;
}


.dataset {
	grid-area: dataset;
	border-bottom: 1px dotted var(--main-border-color);
}


.main {
	grid-area: main;
}


.coverageSet {
	margin-bottom: 1em;
}

.coverage {
	margin-left: 2em;
}

.coverage:first-of-type {
	margin-top: 4px;
}


.accordionIcon {
	padding-left: 3em;
}


.requestBuilder {
	grid-area: requestBuilder;
	text-align: center;
}


.buttons {
	grid-area: buttons;
	justify-self: center;
}

.buttons > button {
	margin: 2px;
}


.footer {
	grid-area: footer;
	text-align: center;
	border-top: 1px solid var(--main-border-color);
}