:root {
    --modsearch-primary-color: var(--app-primary);
    --modsearch-text-color: var(--app-text-default);
    --modsearch-spacing: 12px;
    --modsearch-icon-stroke-width: 1.4;
    --modsearch-highlight-color: var(--modsearch-primary-color);
    --modsearch-muted-color: var(--app-text-secondary);
    --modsearch-container-background: rgba(101,108,133,0.8);
    --modsearch-logo-color: #5468ff;
    --modsearch-modal-width: 560px;
    --modsearch-modal-height: 600px;
    --modsearch-modal-background: var(--app-bg-default);
    --modsearch-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;
    --modsearch-searchbox-height: 46px;
    --modsearch-searchbox-background: #ebedf0;
    --modsearch-searchbox-focus-background: #fff;
    --modsearch-searchbox-shadow: inset 0 0 0 2px rgb(var(--app-border-field-rgb));
    --modsearch-hit-height: 46px;
    --modsearch-hit-color: var(--app-text-default);
    --modsearch-hit-active-color: #fff;
    --modsearch-hit-background: var(--app-bg-card);
    --modsearch-hit-shadow: none;
    --modsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
    --modsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);
    --modsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,0.4);
    --modsearch-footer-height: 44px;
    --modsearch-footer-background: #fff;
    --modsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12)
}
[data-theme="dark"]{
	--modsearch-primary-color: var(--app-primary-600);
	--modsearch-searchbox-focus-background: rgb(0, 0, 0, .08);
    --modsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
}
.modal.modsearch{
	--bs-modal-width: 700px;
}

.modsearch-Search-Icon{
	stroke-width: 1.6;
}
.modsearch-Modal.modal-content{
	background-color: var(--app-bg-default);
	border: 0;
}
.modsearch-SearchBar {
    display: flex;
    padding: var(--modsearch-spacing) var(--modsearch-spacing) 0;
}
.modsearch-Form {
    align-items: center;
    background: var(--modsearch-searchbox-focus-background);
    border-radius: 0.625rem;
    box-shadow: var(--modsearch-searchbox-shadow);
    display: flex;
    height: var(--modsearch-searchbox-height);
    margin: 0;
    padding: 0 var(--modsearch-spacing);
    position: relative;
    width: 100%;
}
.modsearch-Form.modsearch-Form-focus{
	--modsearch-searchbox-shadow: inset 0 0 0 2px var(--modsearch-primary-color);
}
.modsearch-Input {
	--app-field-padding-x: 0 8px;
	--app-field-padding-y: 0 0;
    appearance: none;
    font-family: var(--app-field-font-family);
    background: transparent!important;
    border: 0;
    color: var(--modsearch-text-color);
    flex: 1;
    font-size: 14px;
    height: 100%;
    outline: none;
    width: 80%;
}
.modsearch-MagnifierLabel, .modsearch-Reset {
    align-items: center;
    color: var(--app-mate-icon);
    display: flex;
    justify-content: center;
}
.modsearch-Cancel {
    display: none;
}
.modsearch-Form.modsearch-Form-focus .modsearch-MagnifierLabel{
	color: var(--modsearch-highlight-color);
}
.modsearch-VisuallyHiddenForAccessibility {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.modsearch-Dropdown {
    max-height: calc(var(--modsearch-modal-height) - var(--modsearch-searchbox-height) - var(--modsearch-spacing) - var(--modsearch-footer-height));
    min-height: var(--modsearch-spacing);
    overflow-y: auto;
    overflow-y: overlay;
    padding: 0 var(--modsearch-spacing) var(--modsearch-spacing);
    scrollbar-color: var(--modsearch-muted-color) var(--modsearch-modal-background);
    scrollbar-width: thin;
}
.modsearch-Container {
    --modsearch-hit-shadow: none;
    z-index: 2000;
    cursor: auto;
}
.modsearch-Hit-source {
    background: var(--modsearch-modal-background);
    color: var(--modsearch-highlight-color);
    font-family: 'OpenSans-SemiBold';
    font-size: 14px;
    line-height: 32px;
    margin: 0 -4px;
    padding: 8px 4px 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.modsearch-Footer {
    align-items: center;
    background: var(--app-bg-card);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--modsearch-footer-shadow);
    display: flex;
    flex-shrink: 0;
    height: var(--modsearch-footer-height);
    justify-content: space-between;
    padding: 0 var(--modsearch-spacing);
    position: relative;
    user-select: none;
    width: 100%;
    z-index: 300;
}
.modsearch-Commands {
    color: var(--modsearch-muted-color);
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.modsearch-Commands li {
    align-items: center;
    display: flex;
}
.modsearch-Commands li:not(:last-of-type) {
    margin-right: .8em;
}
.modsearch-Commands-Key {
    align-items: center;
    background: var(--modsearch-key-gradient);
    border-radius: 2px;
    box-shadow: var(--modsearch-key-shadow);
    display: flex;
    height: 18px;
    justify-content: center;
    margin-right: .4em;
    padding: 0 0 1px;
    color: var(--modsearch-muted-color);
    border: 0;
    width: 20px;
}
.modsearch-Commands-Key {
    padding-left: 1px;
    font-size: .875rem;
    background-color: rgba(0, 0, 0, 0.1);
    background-image: none;
    box-shadow: none;
}
.modsearch-Hit-content-wrapper {
/*     display: flex; */
/*     flex: 1 1 auto; */
/*     flex-direction: column; */
    font-weight: 500;
/*     justify-content: center; */
    line-height: 1.2em;
    margin: 0 8px;
    overflow-x: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.modsearch-Hit {
    border-radius: 4px;
    display: flex;
    padding-bottom: 4px;
    position: relative;
}
.modsearch-Hit {
    padding-bottom: 0;
    border-radius: 0;
}
.modsearch-Hit a {
	font-family: 'OpenSans-Medium';
    background: var(--modsearch-hit-background);
    border-radius: 4px;
    box-shadow: var(--modsearch-hit-shadow);
    display: block;
    padding-left: var(--modsearch-spacing);
    width: 100%;
}
.modsearch-Hit a {
    border-radius: 0;
    border: solid var(--app-border);
    border-width: 0 1px 1px;
}
.modsearch-Hit:first-child a {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    border-top-width: 1px;
}
.modsearch-Hit:last-child a {
    border-bottom-right-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}
.modsearch-Hit-Container {
    align-items: center;
    color: var(--modsearch-hit-color);
    display: flex;
    flex-direction: row;
    height: 36px;
    padding: 0 var(--modsearch-spacing) 0 0;
}

.modsearch-Hit-action {
    align-items: center;
    display: flex;
    height: 22px;
    width: 22px;
}
.modsearch-Hit[aria-selected=true] .modsearch-Hit-action, .modsearch-Hit[aria-selected=true] .modsearch-Hit-icon, .modsearch-Hit[aria-selected=true] .modsearch-Hit-path, .modsearch-Hit[aria-selected=true] .modsearch-Hit-text, .modsearch-Hit[aria-selected=true] .modsearch-Hit-title, .modsearch-Hit[aria-selected=true] .modsearch-Hit-Tree, .modsearch-Hit[aria-selected=true] mark {
    color: var(--modsearch-hit-active-color) !important;
}
.modsearch-Hit-action svg {
    display: block;
    height: 18px;
    width: 18px;
}
svg.modsearch-Hit-Select-Icon {
    display: none;
}
.modsearch-Hit[aria-selected=true] .modsearch-Hit-Select-Icon {
    display: block;
}

.modsearch-Hit[aria-selected="true"] a{
	background: var(--app-primary)
}
.modsearch-Hit[aria-selected="true"] .modsearch-Hit-content-wrapper{
	color: white
}
.modsearch-ErrorScreen, .modsearch-NoResults, .modsearch-StartScreen {
    font-size: .9em;
    margin: 0 auto;
    padding: 36px 0;
    text-align: center;
    width: 80%;
}
.modsearch-Screen-Icon {
    color: var(--modsearch-muted-color);
    padding-bottom: 12px;
}
.modsearch-Title {
    font-size: 1.2em;
}
@media (max-width: 768px) {
    .modsearch-Dropdown {
        max-height: calc(var(--modsearch-vh, 1vh)* 100 - var(--modsearch-searchbox-height) - var(--modsearch-spacing));
    }
    .modsearch-Footer{
        display: none;
    }
    .modsearch-Cancel {
        appearance: none;
        background: none;
        border: 0;
        color: var(--modsearch-highlight-color);
        cursor: pointer;
        display: inline-block;
        flex: none;
        font-family: 'OpenSans-Medium';
        font-size: 1em;
        margin-left: var(--modsearch-spacing);
        outline: none;
        overflow: hidden;
        padding: 0;
        user-select: none;
        white-space: nowrap;
    }
}