
/* 
    Menu and Header: 
*/
#menu {
    --header-height: 5rem;
}
#menu.filtered dt:not(.filter-item) {
    height: 0;
    opacity: 0;
    visibility: hidden;
}
#menu > h2 {
    height: var(--header-height);
}
#menu.sticky-header > dl {
    max-height: calc(100vh - var(--header-height));
}
#menu.sticky-header > dl {
    overflow: hidden;
    overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
/* Hide Scrollbar: */
#menu.sticky-header > dl {  /* Firefox */
    scrollbar-width: none;
}
#menu > dl::-webkit-scrollbar {  /* Webkit */
	width: 0px;
	background: transparent;  
}

/* 
    Highlighting: 
*/
#menu.filtered dt mark {
    background-color: rgba(255,255,0,0.7);
}
/* Temporarily hide <mark> highlighting */
#menu:not(.filtered) dt mark {
	background-color: inherit;
	color: inherit;
}

/* 
     Menu Search and Inputs:
*/
#menu_search {
    display: inline-flex;
    align-items: center;
    margin-left: 2.5rem;
    flex-grow: 1;
    font-size: 0.9em;
    transition: opacity ease-in-out .3s , visibility 0s linear .3s;
}
#menu_search.disabled {
    display:none;
}
#menu.expanded #menu_search {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
#menu:not(.expanded) #menu_search {
    visibility: hidden;
    opacity: 0;
}
#menu_search input {
    font-size: 0.8em;
    max-width: 30em;
    margin-right: 0.5em;
    flex-grow: 1;
    font-family: 'Varela Round', 'Lato', sans-serif;
    padding-left: 0.5em;
}
::-webkit-search-cancel-button {
  cursor: pointer;
}
#menu_search.active input {
    transition: max-width .3s linear, opacity .3s, padding .3s, border .3s, margin .1s
    ;
}
#menu_search:not(.active) input {
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    margin-right: 0;
    border-right: none;
    max-width: 0;
    transition: max-width .4s cubic-bezier(0, 1, 0, 1), opacity .6s, padding .3s, border .3s, margin .3s
    ;
}
#menu_search a {
    font-size: 0.85em;
    height: 2em;
	width: 2em;
	background-size: contain;
	overflow: hidden;
	background-position: right;
    background-repeat: no-repeat;
    background-image: url('../Icons/ui/ux2/appbar-filter.png');
    text-decoration: none ;
    padding: 0;
    margin-right: 0.4em;
    box-sizing: content-box;
    border: 2px solid;
    user-select: none;
    box-shadow: 3px 0px 32px 0px rgba(0,0,0,0.05);
    transition-property: all;
}
#menu_search a:hover {
    background-image: url('../Icons/ui/ux2/appbar-filter-dark.png');
    border-color: var(--yellow);
}
#menu_search a div {
    width: 0;
    overflow: hidden;
    margin-top: 0.35em;
    margin-left: 0.5em;
}
#menu_search a:not(.collapsed) div {
    width: 3.5em;
}
#menu_search a:not(.collapsed) {
	width:4.3em;
}
#menu_search:not(.active) a:not(:hover) {
    opacity: 0.9;
}

/* 
    "No Results" banner: 
*/
#filter-no-results-banner {
    padding: 0 0 1em 5em;
    font-style: italic;
    display: none;
}
#menu.filtered.has-no-results #filter-no-results-banner {
    display: block;
}

/* 
    Match Site Theme: 
*/
#menu_search a {
    border-color: var(--green-light);
    background-color: var(--green);
}
.test #menu_search a {
    border-color: #515151;
    background-color: #515151;
}
.test #menu_search:not(.active) a:not(:hover) {
    opacity: 0.7;
}
#menu_search:not(.active) a:not(:hover) {
    opacity: 0.9;
}