.sidebar {
	grid-area: sidebar;
	display: flex;
	flex-direction: column;
	font-size: 9pt;
}

.sidebar > div {
	margin-bottom: 1em;
	background-color: var(--main-background-color);
	border: 1px solid var(--main-border-color);
}

.sidebar > div:last-child {
	margin-bottom: 0;  /* Last sidebar item has no margin-bottom. */
}

/* A div within .sidebar that contains INPUT elements. */
.sidebarInput {
	padding: 4px 6px;
}


#map {
	width: 300px;
	height: 180px;
}

/* Provides layout and style for the mouse position text that appears in the bottom-right of the OpenLayers map. */
.olControlMousePosition {
    bottom: 0;
    right: 3px;
    display: block;
    position: absolute;
    font-family: Arial;
    font-size: smaller;
    background-color: rgba(255, 255, 255, 0.5);
}


.tabContainer {
	display: flex;
	flex-direction: row;
	background-color: var(--main-border-color);
}

/* These override styles for "button" in main.css. */

.tabContainer button {
	font-weight: bold;
}

.tabContainer button.active {
	border: 1px solid transparent;
}

.tabContainer button.active:hover {
	background-color: var(--main-background-color);
}


.boundingBoxGrid {
	display: grid;
	grid-template-areas:
			'. . topLabel . .'
			'. . topBox . .'
			'leftLabel leftBox . rightBox rightLabel'
			'. . bottomBox . .'
			'. . bottomLabel . .';
	grid-template-columns: min-content 1fr 1fr 1fr min-content;
	grid-gap: 2px;
	align-items: center;
}

.boundingBoxGrid input[type=text] {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

.topBox { grid-area: topBox; }

.leftBox { grid-area: leftBox; }

.rightBox { grid-area: rightBox; }

.bottomBox { grid-area: bottomBox; }

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

.leftLabel {
	grid-area: leftLabel;
	text-align: right;
	padding-right: 2px;
}

.rightLabel {
	grid-area: rightLabel;
	text-align: left;
	padding-left: 2px;
}

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


.resetButtonContainer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 6px 0 2px 0;
}


.verticalInputBoxesGrid {
	display: grid;
	grid-template-columns: min-content min-content;
	grid-gap: 4px;
	justify-items: start;
	align-items: center;
}

/* Meant to be use together with verticalInputBoxesGrid. */
.vibg_2boxes {
	grid-template-areas:
			'vibg_label1 vibg_box1'
			'vibg_label2 vibg_box2';
}

/* Meant to be use together with verticalInputBoxesGrid. */
.vibg_3boxes {
	grid-template-areas:
			'vibg_label1 vibg_box1'
			'vibg_label2 vibg_box2'
			'vibg_label3 vibg_box3';
}

.vibg_label1 { grid-area: vibg_label1; }

.vibg_label2 { grid-area: vibg_label2; }

.vibg_label3 { grid-area: vibg_label3; }

.vibg_box1 { grid-area: vibg_box1; }

.vibg_box2 { grid-area: vibg_box2; }

.vibg_box3 { grid-area: vibg_box3; }