:root {
	--search-panel-wrapper-bg: #fffd;
	--search-result-border: none;
	--search-results-bg: linear-gradient(#ddd,#ccc);
	--search-result-link-fg: #000c;
	--selected-search-result-bg: linear-gradient(#a0affbaa,#7183f9aa);
	--hovered-search-result-link-fg: #000;
}

.ddoc-search-panel-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--search-panel-wrapper-bg);
	z-index: 200;
}
.ddoc-search-panel {
	position: fixed;
	z-index: 210;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ddoc-search-controls {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20px;
	border-radius: 10px 10px 0 0;
	background: var(--nav-bg);
}
.ddoc-search-controls input {
	flex: 1 1 auto;
	padding: 5px 5px;
	font-size: 16px;
}
.ddoc-search-close {
	margin-left: 10px;
	padding: 6px 10px;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	color: var(--nav-fg);
}
.ddoc-search-close:hover {
	color: var(--accent);
}
.ddoc-search-results {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--search-results-bg);
	padding: 0 0 20px 0;
	border-radius: 0 0 10px 10px;
}
.ddoc-search-no-result {
	padding: 10px;
}
.ddoc-search-result + .ddoc-search-result {
	border-top: var(--search-result-border);
}
.ddoc-search-result {
	flex: 0 0 auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.ddoc-search-result-selected {
	background: var(--selected-search-result-bg);
}
.ddoc-search-result-path {
	flex: 0 0 auto;
	padding: 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.ddoc-search-result-path a {
	color: var(--search-result-link-fg);
}
.ddoc-search-result-path a:hover {
	color: var(--hovered-search-result-link-fg);
}
.ddoc-search-result-path .ddoc-search-result-sep {
	margin: 0 5px;
	color: var(--text);
}
.ddoc-search-result-extract {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: var(--bg);
	color: var(--text);
	margin-left: 10px;
	padding: 2px;
	font-size: 90%;
	opacity: 0.9;
}
@media (max-width: 880px) { /* mobile */
	.ddoc-search-panel {
		top: 30px;
		left: 10px;
		right: 10px;
	}
	.ddoc-search-results {
		max-height: calc(100vh - 150px);
	}
}
@media (min-width: 880px) { /* wide screens */
	.ddoc-search-panel {
		top: 100px;
		width: 760px;
		left: calc(50% - 380px);
	}
	.ddoc-search-results {
		max-height: calc(100vh - 240px);
	}
}