#quick-search
{
  	padding: 8px;
  	padding-left: 16px;
  	padding-right: 16px;
  	height: 32px;
  	position: relative;
}

#search-form
{
  	height: 32px;
}

#search-button-clear
{
	position: absolute;
  	padding: 0;
  	top: 50%;
  	transform: translate(0px, -50%);
  	left: auto;
  	right: 8px;
  	width: 32px;
  	height: 32px;
    border: none;
    outline: none;
  	text-decoration: none;
  	background-color: transparent;
    justify-content: center;
  	align-items: center;
  	display: inline-flex;
  	cursor: pointer;
  	opacity: 50%;
  	transition: opacity 0.2s ease-in-out;
}

#search-button-clear:hover
{
  	opacity: 100%;
  	transition: opacity 0.2s ease-in-out;
  	border: 0;
}

#search-icon-clear
{
  	width: 14px;
  	height: 14px;
  	filter: brightness(0) invert(1);
  	border: 0;
}

#search-icon-magnifier
{
	position: absolute;
  	top: 16px;
  	left: 16px;
  	opacity: 50%;
  	filter: brightness(0) invert(1);
  	transition: opacity 0.2s ease-in-out;
  	margin: 0;
  	border: 0;
  	pointer-events: none;
}

#search-form-input:hover ~ #search-icon-magnifier, 
#search-form-input:focus ~ #search-icon-magnifier,
#search-home-input:focus ~ #search-icon-magnifier,
#search-home-input:hover ~ #search-icon-magnifier
{
  	opacity: 100%;
  	transition: opacity 0.2s ease-in-out;
}

#search-form-input
{
  	color: var(--sidebar-search-text);
  	background-color: transparent;
  	border: 0;
  	border-bottom: 1px solid var(--sidebar-search-border);
  	height: 32px;
    box-sizing: border-box;
    width: 100%;
  	text-indent: 24px;
  	transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
  	font-style: normal;
}

#search-form-input::placeholder
{
  	font-style: italic;
}

#search-form-input:hover
{
  	color: var(--sidebar-search-text-hover);
  	border-bottom: 1px solid var(--sidebar-search-border-hover);
  	transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
}

#search-form-input:focus
{
  	outline: none;
  	color: var(--sidebar-search-text-hover);
  	border-bottom: 1px solid var(--sidebar-search-border-focus);
  	transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
}


#home-search
{
  	padding: 8px;
  	padding-left: 16px;
  	padding-right: 16px;
  	margin-left: auto;
  	margin-right: auto;
  	height: 32px;
  	width: 300px;
  	position: relative;
}

#search-home-form
{
  	height: 32px;
}

#search-home-input
{
  	width: 300px;
  	color: var(--sidebar-search-text);
  	background-color: transparent;
  	border: 1px solid var(--sidebar-search-border);
  	border-radius: 4px;
  	height: 32px;
    box-sizing: border-box;
    width: 100%;
  	text-indent: 38px;
  	transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
  	font-style: normal;
}

#search-home-input::placeholder
{
  	font-style: italic;
}

#search-home-input:hover
{
  	color: var(--sidebar-search-text-hover);
  	border: 1px solid var(--sidebar-search-border-hover);
  	transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
}

#search-home-input:focus
{
  	outline: none;
  	color: var(--sidebar-search-text-hover);
  	border: 1px solid var(--sidebar-search-border-focus);
  	transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
}

#search-home-form #search-icon-magnifier
{
  	left: 28px;
}


#search-home-form #search-button-clear
{
  	right: 16px;
}

#page-content-body h1.search-header
{
  	margin-bottom: 30px;
}

.search-result-body h2, #search-results h2
{
  	font-size: 18px;
  	margin: 0;
  	padding: 0;
  	filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.5));
}

#search-results .search-result-link
{
  	color: var(--page-text);
  	font-size: 15px;
  	margin-top: 0;
  	opacity: 0.75;
}

#search-results .search-result-desc
{
  	color: var(--header-link);
  	margin-bottom: 0;
  	border-radius: 4px;
  	padding: 8px;
  	background-color: rgba(0,0,0,0.2);
  	font-style: italic;
}

.sp-search-highlight
{
  	color: var(--header-link-hover);
  	font-weight: bold;
  	filter: drop-shadow( 2px 2px 0px rgba(0, 0, 0, 0.5) );
  	border-bottom: 2px solid rgba(255, 100, 100, 0.75);
}

.search-result-body
{
	margin: 0px;
  	margin-top: 6px;
  	margin-bottom: 16px;
  	padding: 6px;
  	padding-left: 10px;
  	padding-right: 10px;
  	border-radius: 4px;
	background-color: var(--sidebar-background);
  	border: 4px solid transparent;
}

.search-result-body:hover
{
	background-color: var(--sidebar-tree-background);
  	border: 4px solid var(--page-link);
}