html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#app {
	display: flex;
	flex-direction: row;
	height: calc(100vh - 58px);
}

#sidebar {
	position: relative;
	float: left;
	min-width: 320px;
	max-width: 520px;
	width: 320px;
	height: 100%;
	flex-grow: 0;
	flex-shrink: 0;
}

#sidebar-resizer {
	position: absolute;
	top: 0;
	right: -6px;
	width: 12px;
	height: 100%;
	cursor: col-resize;
	/* Bring it in front of the map, overriding the pan behaviour. */
	z-index: 10;
}

#clear-search-query {
	position: absolute;
	z-index: 10;
	height: 100%;
	right: 46px;
	background-color: transparent;
	border: none;
}

.search-results-match {
	background-color: yellow;
}

main {
	flex-grow: 1;
	flex-shrink: 1;
	position: relative;
}

#map {
	flex-grow: 1;
	flex-shrink: 1;
}

#map.grayscale .leaflet-tile-pane {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#console-container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	z-index: 1005;
}

#console-resizer {
	position: absolute;
	top: -6px;
	width: 100%;
	height: 12px;
	cursor: row-resize;
	/* Bring it in front of the map, overriding the pan behaviour. */
	z-index: 10;
}

#console-tab {
	background-color: rgb(248, 249, 250, 0.5);
	border: 1px solid var(--bs-border-color);
	border-bottom: none;
  	border-top-left-radius: 4px;
  	border-top-right-radius: 4px;
	padding: 2px 8px;
}

.console-tab-left {
	position: absolute;
	top: 0px;
	left: 0px;
}

#console-toggle {
	width: 28px;
	height: 28px;
	border: none;
	border-right: 1px solid var(--bs-border-color);
	border-top-left-radius: 4px;
}

.console-tab-right {
	position: absolute;
	top: 0;
	right: 0;
}

.console-tab-right > button {
	width: 28px;
	height: 28px;
	border: none;
	border-left: 1px solid var(--bs-border-color);
	border-top-right-radius: 4px;
}

#console-body {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 0px;
	border-left: 1px solid var(--bs-border-color);
	border-right: 1px solid var(--bs-border-color);
	background-color: white;
}

#console-messages-container {
	flex-grow: 1;
	height: 0;
}

#console-input-container {
	display: flex;
	flex-direction: row;
	flex-grow: 0;
	border-top: 1px solid var(--bs-border-color);
	align-items: center;
}

#console-input {
	width: 100%;
	border: none;
	outline: none;
	font-family: monospace;
	font-size: 12px;
	padding-top: .25rem;
	padding-bottom: .25rem;
}

table.bordered td, table.bordered th {
	padding: 2px 4px;
	border: 1px solid black;
}

table.align-right td, table.align-right th {
	text-align: right;
}

.command-suggestion-row:hover {
	background-color: #e7f4f9;
}

ul.jstree-contextmenu {
	/* Display above Leaflet and the console. */
	z-index: 1010;
}

ul.jstree-contextmenu li {
	font-size: small;
}

.vakata-context .vakata-contextmenu-shortcut {
	display: inline !important;
	position: absolute;
	right: 8px;
}

.vakata-context-hover .vakata-contextmenu-shortcut {
	right: 6px;
}

button:disabled {
	pointer-events: auto !important;
}