#browseform {
	display: flex;
	column-gap: 1em;
	align-items: center; 
}

#browseform div {
	display: flex;
	flex-basis: max-content;
	column-gap: 0.25em;
	align-items: center;
}


#browseform div:has(input[name=terms]) {
	flex-grow: 1;
}

#browseform input[name=terms] {
	flex-grow: 1;
}

#browseform .input-clear {
	position: relative;
	left: -2em;
	z-index: 3;
	width: 0;
}

#browseform .select-clear {
	/* TODO: Javascript to handle the click event, then maybe actually display 
	 * it. This could then likely become a global style in forms.css.
	 */
	display: none;
}

#browseform .search-button-icon {
	color: var(--light);
	background: var(--accent);
	border-style: solid;
	border-width: 1px;
	border-color: gray;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	height: calc(var(--input-height) + 4px);
	width: 2em;
	position: relative;
	left: calc(-0.75em - 4px);
	z-index: 2;
}

#results-container {
	display: flex;
}

#results {
	float: left;
	height: calc(100vh - var(--header-height) - 15em);
	overflow-y: auto;
	margin-right: 2em;
}

#results table {
	border-collapse: collapse;
}

#results tr {
	cursor: pointer;
}

#results td {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

#results td:nth-child(1) {
	padding-right: 1em;
}

#tree {
	float: left;
	height: calc(100vh - var(--header-height) - 15em);
	overflow-y: auto;
	margin-right: 2em;
}

#tree li {
	list-style-type: none;
	cursor: pointer;
}

#tree .icon {
	color: var(--accent);
	margin-left: 0.4em;
	font-size: 125%;
	vertical-align: middle;
}

#tree span:has(a.selected) {
	display: flex;
	flex-direction: row;
	background-color: var(--raised);
}

#tree a.selected {
	flex-grow: 1;
}

#details {
	flex-grow: 1;
	display: flex;
}

#details-iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.selected {
	background-color: var(--raised);
}