#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 transparent; background-color:transparent;
    text-align:center;
    border-radius: 50%;
}
button#closesearch { background: white;}
button#closesearch:is(:hover,:focus-visible),
button#showsearch:is(:hover,:focus-visible) { border-color: var(--ttl_white); background:var(--ttl_white); }

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{
        display: block;
    font-family: "ttl_icons";
    content:"\E80d"; font-size: 32px;

}

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


button#closesearch:is(:hover,:focus-visible) .icon,
button#showsearch:is(:hover,:focus-visible) .icon {
    color:black
}



#secondary button {
    position: relative; }

 @media all and (max-width: 1023.98px) {
     #secondary button { margin-left: 8px;}
 }
 @media all and (max-width: 899.98px) {
     button#closesearch,
     button#showsearch {
         height: 48px;
         line-height: 48px;
         min-width: 48px;
     }
     button#closesearch .icon,
     button#showsearch .icon {  width: 28px; height: 28px; line-height: 28px;  }

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