#search {

    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    border-top: 59px solid transparent;


    pointer-events: none;

   visibility: hidden;  /* display: none;display: block; */

}

body:has(#alert_banner:not(.notshown)) #search,
body:has(#promo_bar:not(.notshown)) #search { border-top: none;
    background-color: var(--light-blue);
    padding: var(--unit) 0;    z-index: 99;
 }


body.searchshown #search {
     visibility: visible;
    opacity: 1;
}
#search> div {
    padding-left: 220px;
    /*padding-right: 70px;*/
}
#search> .wrapper > div { display: flex; justify-content: flex-end; pointer-events: auto;
}
#search form {
    opacity: 0;
     font-family: inherit;
    display: flex; justify-content: flex-end; align-items: center;
    position: relative;
    z-index: 9999; pointer-events: auto;
      transition: all 0.3s ease ; transform: translateX(48px);
}


body.searchshown #search form {
    opacity: 1; transform: none;  transition: all 0.3s ease   ;  }

#search form div{
    background:white;
    border: 2px solid var(--black); border-radius: 300px; padding:4px 12px 4px 16px;height: 56px;
}
#search form label::after{ content: attr(data-text); }
#search form label { color: var(--black); margin-right: 1em; }
#search form label,
#search form div input {font-size: 17px;
}

#search form div input { height: 44px; outline: none; background:none; padding: 0;
    border: none;

    font-weight: 600 !important; font-family: inherit;

}
#search form div input:focus-visible {box-shadow: 0 0 0 2px white , 0 0 0 4px var(--orange); border-radius: 2px;}

#search form div input[type="text"]{  min-width: 400px; padding:0 4px; }
#search form div input[type="submit"]{   }

#search form div input[type="submit"] {
    cursor: pointer;
    text-indent: -999px; width:40px; min-width:40px;
    background-size: 24px 24px; background-repeat: no-repeat; background-position: center;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="%23111B29" d="M14,0.1c-5.5,0-9.9,4.5-9.9,9.9c0,2.4,0.8,4.6,2.2,6.3l-6.3,6.3l1.4,1.4l6.3-6.3c1.7,1.4,3.9,2.2,6.3,2.2 c5.5,0,9.9-4.5,9.9-9.9C23.9,4.5,19.5,0.1,14,0.1z M14,16.9c-3.8,0-6.9-3.1-6.9-6.9s3.1-6.9,6.9-6.9c3.8,0,6.9,3.1,6.9,6.9 S17.8,16.9,14,16.9z"/></svg>');

}
#search form div input[type="submit"]:hover {
    opacity: 0.7;}

#closesearch {   max-width: 56px; margin-left: var(--unit);pointer-events: auto;   }


@media all and (max-width: 1199px) {
#search form div input[type="text"]{  min-width: 360px;   }
}
@media all and (max-width: 1099px) {
    #search form div input[type="text"]{  min-width: 320px;   }
}
@media all and (max-width: 999px) {
    #search form div input[type="text"]{  min-width: 280px;   }
}
@media all and (max-width: 899px) {
    body.searchshown #search {
        z-index: 99;}
    #search {

        border-top: none; padding: 16px 0; height: 82px;  background-color: white;
        display: flex; align-content: center; align-items: center;


        background: var(--search-blue); color: white;
    }
    #search>div { padding-left: 0; }

    #search .wrapper { display: flex;}
    #search .wrapper>div ,
    #search .wrapper>div>form,
    #search .wrapper>div>form>div { flex: 1; display: flex;}

    #search form div{
        /*background:white;border: 2px solid var(--black);*/ background: var(--search-blue); color: white; border: 2px solid white;
         border-radius: 300px; padding:2px 8px 2px 16px; height: 46px;
    }
    #search form label::after{ content: attr(data-mobile); }
    #search form label,
    #search form div input {font-size: 16px;  color: white;   }

    #search form div input { height: 34px; height: 38px; }



    #search form div input[type="text"]{  min-width:10px; flex: 1; padding:0 4px; font-weight: 400 !important}
    #search form div input[type="submit"]{


        background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="%23FFFFFF" d="M14,0.1c-5.5,0-9.9,4.5-9.9,9.9c0,2.4,0.8,4.6,2.2,6.3l-6.3,6.3l1.4,1.4l6.3-6.3c1.7,1.4,3.9,2.2,6.3,2.2 c5.5,0,9.9-4.5,9.9-9.9C23.9,4.5,19.5,0.1,14,0.1z M14,16.9c-3.8,0-6.9-3.1-6.9-6.9s3.1-6.9,6.9-6.9c3.8,0,6.9,3.1,6.9,6.9 S17.8,16.9,14,16.9z"/></svg>');

    }


    body.searchshown a#closesearch { border: 2px solid white;  }
    body.searchshown a#closesearch:hover { background:var(--black); }

    body.searchshown a#closesearch::before  {
        background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="%23FFFFFF" d="M10.4,12l-9.6,9.6l1.6,1.6l9.6-9.6l9.6,9.6l1.6-1.6L13.6,12l9.6-9.6l-1.6-1.6L12,10.4L2.4,0.8L0.8,2.4 L10.4,12z"/></svg>'); }



    body.searchshown #search form div input:focus-visible {box-shadow: 0 0 0 2px var(--search-blue) , 0 0 0 4px var(--orange);  }
    body.searchshown a#closesearch:focus-visible { box-shadow: 0 0 0 3px var(--search-blue) ,0 0 0 5px var(--orange); }


    #searchpageform ::placeholder,
    #search form ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: white;
        opacity: 1; /* Firefox */
    }

    #searchpageform:-ms-input-placeholder,
    #search form:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: white;
    }

    #searchpageform ::-ms-input-placeholder ,
    #search form ::-ms-input-placeholder { /* Microsoft Edge */
        color: white;
    }


}

@media all and (max-width: 449px) {
    #search form ::placeholder { color: transparent; }
    #search form:-ms-input-placeholder { color: transparent;}
    #search form ::-ms-input-placeholder { color: transparent; }
}