#mainHeader { max-height : 9.0rem;}#searchControls { display : flex; width : 100%;}.searchBox { background-color : #885533; color : #EEDDAA; border-bottom : 3px solid #385; border-left : 3px solid #263; border-radius : 0.5rem; border-right : none; border-top : 3px solid #263; font-weight : bold; height : 2.75rem; width : 82%;}#searchButton { align-items : center; border-left : none; border-radius : 0 0.5rem 0.5rem 0; border-right : 3px solid #385; border-bottom : 3px solid #385; border-top : 3px solid #263; color : #FFFFBB; display : flex; font-weight : bold; height : 2.75rem; margin : 0.0rem 0.171rem; margin-left : -0.3rem; text-align : left; width : 2.75rem;}.clearSearch { align-content : center; background-color : #E08030 !important; border-color : #263 #385 #385 #FA5 !important; border-radius : 0.5rem !important; border-width : 3px !important; height : 2.75rem !important; justify-content : center; min-width : 10.5rem !important; position : fixed; right : 1.2rem; top : 47.7%; z-index : 200 !important;}.clearSearch::before { content : "Clear Search"; font-size : 1.2rem; margin-bottom : 0.25rem;}.clearSearch::after { background : #EDA url("../images/x-square.svg") no-repeat center right !important; content : url("../images/x-square.svg") !important; display : inline-block; height : 16px; margin-left : -1.5rem !important; width : 16px;}.closeSearch { display : inline-block; height : 16px; margin-left : 0.75rem !important; width : 16px;}#searchButton:hover { cursor : pointer;}.searchIcon { background : #853 url("../images/search.svg") no-repeat center; border-radius : 0 0.35rem 0.35rem 0; display : inline-block; height : 100.0%; margin : 0.5rem 0.0rem 0.5rem 0.0rem; width : 100.0%;}.searchError { border : 3px solid #F9A; padding : 0.25rem; position : absolute; top : 4.2rem; top : 5.0rem; width : 92.0% !important; z-index : 25;}.closeErrMsg { padding : 0.2rem !important;}.searchMatch { background-color : #FFFF00; background-color : #CC5533; border-radius : 0.35rem;}@media screen and (min-width : 320px) { #searchButton { margin-left : -0.4rem; } .clearSearch { background-color : #885533 !important; margin-left : 0.8rem !important; margin-top : 0.0rem !important; max-height : 2.75rem !important; max-width : 2.75rem !important; min-width : unset !important; position : relative; } .clearSearch::before { content : none; } .closeSearch { margin : 0 0 0.75rem 0.25rem !important; } .searchIcon { margin : 0.0rem; } @media screen and (min-height : 568px) { .clearSearch { border-bottom-left-radius : 0.0 !important; border-left : none !important; border-top-left-radius : 0.0 !important; } }} @media screen and (min-width : 411px) { #searchControls { grid-column : 1 / 3; } .searchBox { width : 100.0% !important; } .searchError { top : 2.2rem; width : 120.0% !important; } .clearSearch { margin-left : -2.0% !important; right : unset !important; }} @media screen and (min-width : 568px) { #searchControls { align-content : center; display : flex; grid-column : 1 / 3; justify-content : space-between; margin-left : 0.0%; margin-top : 0.0%; white-space : nowrap; width : 100.0%; } .searchBox { align-self : center; height : 2.011rem; width : 60.0%; width : 20.0rem; width : 100.0%; } #searchButton { max-height : 2.011rem !important; max-width : 2.011rem !important; } .searchIcon { margin : 0.0rem 0.0rem 0.75rem 0.0rem; margin : 0.0rem; } #searchButton span.Text { margin-left : 0.75rem; } #searchButton .Text { margin-left : 0.5rem; } .closeSearch { margin-left : 0.5rem !important; } .searchError { padding-left : 0.75rem; padding-top : 0.15rem; top : 2.25rem; width : 100.0% !important; } .closeErrMsg { padding : 0.1rem 0.8rem 0.6rem 0.75rem !important; } @media screen and (min-height : 960px) { .clearSearch::after { display : none; } .closeSearch { background : #EDA url("../images/x-square.svg") no-repeat center right !important; margin : 0.0rem !important; } }} @media screen and (min-width : 768px) { #searchControls { grid-column : 3 / 5; grid-row : 1; margin-bottom : 0.7%; } .searchBox { align-self : center; height : 2.237rem; } #searchButton { margin-right : 0.0rem; max-height : 2.237rem !important; } .searchError { grid-column : 3 / 5; grid-row : 1; top : unset; } @media screen and (min-width : 960px) { .clearSearch::after { display : none; } .closeSearch { background : #EDA url("../images/x-square.svg") no-repeat center right !important; margin : 0.0rem !important; } }} @media screen and (min-width : 1024px) { #searchControls { align-self : end; grid-column : 3; white-space : nowrap; z-index : 100; } #searchButton { display : inline-block; } .searchIcon { margin : 0.75rem -0.5rem 0.5rem 0.25rem; margin : 0.0rem; } .clearSearch { text-align : center !important; } .closeSearch { margin-top : 0.5rem !important; } .searchError { grid-column : 3 / 4; }} @media screen and (min-width : 1280px) { #searchControls { grid-column : 3 / 5; grid-row : 1; margin-left : -4.5rem; margin-bottom : 1.25%; } .searchBox { height : 2.011rem; width : 14.8rem; } #searchButton { max-height : 2.011rem !important; position : relative; } .clearSearch { background-color : #885533 !important; min-width : unset !important; } .clearSearch::after { display : none; } .closeSearch { background : #EDA url("../images/x-square.svg") no-repeat center right !important; margin-top : 8px !important; } #searchButton > span.Text { font-size : 1.0rem; } .searchIcon { margin : 0.0rem; } .searchError { left : -3.0rem; top : 0.0rem; }} @media screen and (min-width : 1500px) { #searchControls { grid-column : 3; margin-left : -3.0rem; }} @media screen and (min-width : 320px) and (max-height : 414px) { .searchBox { border-right : 3px solid #263 !important; } #searchButton { background-color : #885533; } .searchIcon { margin : 0.0rem; } .clearSearch { background-color : #E08030 !important; border-left : 3px solid #263 !important; float : right !important; min-width : 10.5rem !important; position : fixed !important; right : 0.75rem !important; top : 10.1rem !important; z-index : 200 !important; } .clearSearch::before { content : "Clear Search"; } .clearSearch::after { display : none; } .closeSearch { background : #EDA url("../images/x-square.svg") no-repeat center right !important; content : url("../images/x-square.svg") !important; display : inline-block; height : 16px; margin : 0 0 0 1.0rem !important; width : 16px; } @media screen and (min-width : 812px) { .clearSearch { right : 5.5rem !important; top : 8.1rem !important; } }}