#secondary { display: flex; justify-content: flex-end; align-items: center; }

body.searchshown #secondary *
{ pointer-events: none;
    opacity: 0;
    visibility:hidden; }


button#showsearch {  cursor: pointer;}
button#closesearch,
button#showsearch { height:64px; line-height:64px; min-width: 64px;  display: block; cursor: pointer;
    border: 2px solid white; background-color:transparent;
    text-align:center;
    border-radius: 50%;
}
button#closesearch { background: white;
    /*margin-right: 16px;*/
}
button#closesearch:is(:hover,:focus-visible),
button#showsearch:is(:hover,:focus-visible) { border-color: var(--hover_blue); background:var(--hover_blue); color: black }

button#closesearch:focus-visible,
button#showsearch:focus-visible { /* outline:2px solid var(--ttl_error); outline-offset: 2px; */ outline: 3px solid black; box-shadow: 0 0 0 6px white;  }



button#closesearch .icon,
button#showsearch .icon {font-style: normal !important; display: block; margin:auto; width: 32px; height: 32px; line-height: 32px;  }

    button#closesearch .icon::after,
    button#showsearch .icon::after{

        content: "\e80d";
        display: block;
        font-family: "esero";
        font-size: 32px;

    }

button#closesearch .icon::after {
    content: "\e803";
}


button#closesearch:is(:hover,:focus-visible) .icon::after,
button#showsearch:is(:hover,:focus-visible) .icon::after {
    /*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 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve"><path fill="black" d="M26.4,24.1l6.9,6.9L31,33.3l-6.9-6.9c-2.5,2-5.7,3.2-9,3.2c-7.9,0-14.4-6.5-14.4-14.4S7.2,0.7,15.1,0.7 s14.4,6.5,14.4,14.4C29.6,18.4,28.4,21.6,26.4,24.1z M23.2,22.9c2-2.1,3.2-4.9,3.2-7.8c0-6.2-5-11.2-11.2-11.2S3.9,9,3.9,15.1 s5,11.2,11.2,11.2c2.9,0,5.7-1.1,7.8-3.2L23.2,22.9z"/></svg>');
*/

}



#secondary button {
    position: relative; }

/*
@media all and (max-width: 1023.98px) {
*/
@media all and (max-width: 1099.98px) {
     #secondary   { margin-left: auto;}
     #secondary button { margin-left: 12px;}
 }
 @media all and (max-width: 899.98px) {
     button#closesearch,
     button#showsearch {
         height: 60px;
         line-height: 60px;
         min-width: 60px;
     }
     button#closesearch{
          margin-right: 15px;
     }
     button#closesearch .icon,
     button#showsearch .icon {  width: 28px; height: 28px; line-height: 28px;   }

     button#closesearch .icon::after,
     button#showsearch .icon::after{
       /*  width: 28px; height: 28px;*/font-size: 28px;
     }
 }