/* Copyright (c) 2021 Read Write Tools. Legal use subject to the Site Search DOM Component Software License Agreement. */
:host{--pure-black:#000;--nav-black:#111;--light-black:#171717;--medium-black:#222;--black:#333;--dark-gray:#555;--gray:#777;--white:#ccc;--pure-white:#fff;--js-blue:#76afe8;--title-blue:#42affa;--yellow:#ffffa4;--red:#ff3d3d;--color:var(--white);--accent-color1:var(--pure-white);--accent-color2:var(--yellow);--accent-color3:var(--js-blue);--background:var(--black);--accent-background1:var(--medium-black);--accent-background2:var(--pure-black);--accent-background3:var(--nav-black);--accent-background4:var(--black);--width:70vw;--height:75vh;--bottom:1rem;--right:1rem;--caption-bar-height:1.5rem;--user-area-height:3rem;--match-words-height:3rem}
#search-dialog{position:fixed;bottom:var(--bottom);right:var(--right);width:var(--width);max-width:40rem;height:var(--height);max-height:40rem;box-sizing:border-box;background-color:var(--background);border-width:1px;border-style:solid;border-color:var(--gray) var(--accent-background2) var(--accent-background2) var(--gray);box-shadow:-2px -2px 2px var(--accent-background2),5px 5px 8px var(--accent-background2);z-index:1;cursor:default}
#search-dialog *{font-family:'Source Sans Pro',sans-serif;box-sizing:border-box}
#caption-bar{display:flex;background-color:var(--accent-background1);width:100%;height:var(--caption-bar-height);border-bottom:1px solid var(--accent-background2)}
#caption{font-size:.9rem;font-weight:700;letter-spacing:1px;text-align:center;margin:0;line-height:1.6;color:var(--color);width:calc(100% - var(--caption-bar-height))}
#close-button{font-size:.8rem;font-weight:700;text-align:center;display:inline-block;padding:.15rem .75rem;color:var(--color);background-color:var(--accent-background2);border-style:solid;border-width:1px;border-color:var(--accent-background1);cursor:pointer}
#close-button:hover,#close-button:visited:hover{color:var(--pure-white);background-color:var(--red);border:1px solid var(--accent-background2)}
#user-area{display:flex;width:100%;height:var(--user-area-height);border-bottom:1px solid var(--accent-background2)}
#user-request{font-size:1rem;color:var(--accent-color2);background-color:var(--accent-background3);border:1px solid var(--accent-background2);width:calc(100% - var(--user-area-height));margin:.5rem 0 .5rem .5rem;padding:0 .5rem}
#search-button{font-size:1.3rem;font-weight:700;text-align:center;display:inline-block;margin:.5rem .5rem .5rem 1px;color:var(--color);background-color:var(--accent-background3);border-style:solid;border-width:1px;border-color:var(--accent-background2);cursor:pointer}
#search-button:hover,#search-button:visited:hover{color:var(--accent-color2);background-color:var(--accent-background3);border:1px solid var(--accent-background2)}
#match-words{display:flex;flex-wrap:wrap;width:100%;height:var(--match-words-height);border-bottom:1px solid var(--accent-background2);overflow-y:hidden}
#match-words button.match{font-size:.8rem;font-weight:400;color:var(--accent-color1);text-decoration:none;padding:.15rem 1rem;margin:.5rem .25rem;background-color:var(--accent-background2);border-radius:1rem;border:2px solid var(--dark-gray);min-width:3rem;display:inline-block}
#match-words button.match:hover,#match-words button.match:visited:hover{color:var(--accent-color2);background-color:var(--accent-background3);border:2px solid var(--accent-background2)}
#match-docs{width:100%;height:calc(100% - var(--caption-bar-height) - var(--user-area-height) - var(--match-words-height));overflow-y:auto;border-top:2px solid var(--gray)}
#match-docs a{display:inline-block;font-size:.85rem;width:100%;border-bottom:1px dotted var(--accent-background2);text-decoration:none;padding:.5rem 1rem}
#match-docs a:focus,#match-docs a:hover{background-color:var(--accent-background3)}
#match-docs p{margin:0;line-height:1.4}
#match-docs .title{color:var(--accent-color2);padding-right:1rem}
#match-docs .description{color:var(--color)}
#match-docs .lastmod{color:var(--gray);padding-right:.25rem}
#match-docs .url{color:var(--accent-color3);font-size:.8rem}
#match-docs .search-terms{font-size:1rem;color:var(--accent-color2);background-color:var(--accent-background3);border:1px solid var(--accent-background2);width:calc(100% - var(--user-area-height));margin:.5rem 0 .5rem .5rem;padding:0 .5rem}