/* BUTTON */

#searchBtn{

position:fixed;

left:50%;
bottom:25px;

transform:translateX(-50%);

width:65px;
height:65px;

border-radius:50%;

border:none;

background:#c62828;

color:white;

font-size:25px;

cursor:pointer;

z-index:999999;

box-shadow:
0 8px 25px rgba(0,0,0,.3);

}


/* OVERLAY */

#searchOverlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.55);

backdrop-filter:blur(5px);

display:none;

justify-content:center;

align-items:flex-start;

padding-top:80px;

z-index:999998;

}


/* BOX */

.searchBox{

width:600px;

max-width:90%;

background:white;

border-radius:15px;

padding:25px;

box-shadow:
0 15px 40px rgba(0,0,0,.3);

}


/* CLOSE */

#closeSearch{

float:right;

border:none;

background:none;

font-size:22px;

cursor:pointer;

}


/* INPUT */

#searchInput{

width:100%;

padding:15px;

font-size:18px;

border:1px solid #ddd;

border-radius:10px;

outline:none;

}



/* RESULT */

#searchResult{

margin-top:20px;

max-height:400px;

overflow:auto;

}


.result{

padding:15px;

border-bottom:1px solid #ddd;

cursor:pointer;

}


.result:hover{

background:#f5f5f5;

}


.result small{

color:#666;

}



mark{

background:#ffeb3b;

padding:2px 4px;

border-radius:3px;

color:#000;

}



#searchResult{

margin-top:15px;

background:white;

border-radius:10px;

overflow:hidden;

}


.result{

padding:15px;

border-bottom:1px solid #eee;

cursor:pointer;

}


.result:hover{

background:#f5f5f5;

}


mark{

background:#ffe600;

color:#000;

}