html { height:100%; }
body { font:14px comfortaa; text-align:center; letter-spacing:1px; width:520px; overflow:hidden; margin:auto; text-align:center;  opacity:0; -webkit-transition:opacity 0.5s; }

h1 { display:block; position:relative; width:360px; height:60px; margin:120px 0 22px 55px; background:url("img/logo_hdb.png"); background-size:contain; }
#glass { background-size:cover; background-repeat:no-repeat; -webkit-transition:all 0.5s; position:absolute; width:33px; height:33px; border-radius:20px; margin-top:-67px; margin-left:-139px; z-index:-1; }


#search_input { font:11px system-ui, sans-serif; letter-spacing:1px; height:30px; border:2px solid lightgrey; border-radius:4px; border-right:none; text-indent:10px; width:514px; background-color:rgba(255,255,255,0.8);}
#search_input:focus { outline:none; border:2px solid #3e82f8; border-right:none; }
#search_input::-webkit-input-placeholder { color:black; }
#go { float:right; top:0; right:0; height:28px; margin-top:-36px;  padding:8px 22px 0 22px; color:white; background-color:#3e82f8; border-top-right-radius:4px; position:relative; z-index:2; cursor:pointer; }
#go::after { content:''; height:32px; width:61px; background-color:#3e82f8; position:absolute; top:36px; right:0; z-index:0; } 

#suggest_top { color:grey; position:relative; font-weight:bold; visibility:hidden; padding-left:16px; padding-bottom:4px; text-decoration:none; display:block; font:11px system-ui, sans-serif; height:16px; text-align:left; }
#suggest_top::before { content:''; width:10px; height:14px; border-left:2px solid #3e82f8;border-top:2px solid #3e82f8; border-top-left-radius:4px; position:absolute; top:5px; left:-2px; }
#suggest_bottom { color:grey; position:relative; font-weight:bold; visibility:hidden; padding-left:16px; padding-top:6px; padding-bottom:3px; text-decoration:none; display:block; font:11px system-ui, sans-serif; height:20px; text-align:left; }
#suggest_bottom::before { content:''; width:10px; height:12px; border-left:2px solid #3e82f8;border-bottom:2px solid #3e82f8; border-bottom-left-radius:4px; position:absolute; top:0; left:-2px; }
#suggest_top:hover { color:#3e82f8; } #suggest_bottom:hover{ color:#3e82f8; }		


ul { background-color:#3e82f8; padding:10px; margin:0; border-radius:4px; border-top-right-radius: 0;}
li { display:inline-block; }
li img { width:34px; height:34px; margin:8px; border-radius:4px; }
li img:hover { border:2px solid white; margin:6px; }
.searchonly { opacity:0.4; }
.searchonly:hover { border:none; margin:8px; }


#rss {  background-color:rgba(255,255,255,0.8);  -webkit-transition:opacity 0.5s; opacity:0; overflow-x:hidden; overflow-y:scroll; white-space:nowrap;  position:absolute; width:0; height:230px; top:202px; left:50%; margin-left:275px; font-weight:bold; text-align:left; border:2px solid #3e82f8; border-radius: 4px; padding:5px 0 5px 10px; margin-top:20px; line-height:23px; }
#rss a { color:grey; text-decoration:none; }
#rss a:hover { border-bottom: 1px solid; }
iframe { border:none; height:30px; margin:-20px 0 4px -8px; }


#settings { -webkit-transition:left 0.5s, padding 0.5s; width:24px; height:24px;cursor:pointer; left:-44px; bottom:0; position:absolute; padding:10px; -webkit-filter:drop-shadow(0 0 4px white);  border-top-left-radius:4px; }
#settings:zhover { padding:15px; left:-54px; }

#otherbuttons { z-index:4; -webkit-transition:right 0.5s; margin-bottom:170px; width:264px; height:100%; position:fixed; top:0; right:-274px; background-color:lightgrey; overflow:auto; text-align:left; border-radius:0; padding-top:0; padding-right:0; }
#otherbuttons h4 { margin:10px 0 5px 0; color:white; }
#trashbin { width:274px; height:100%; position:fixed; top:0; right:0; display:none; background:url("img/trashbin.png") center center no-repeat; background-color:lightgrey; border-left:2px dashed white; border-bottom:2px dashed white; z-index:10; }

#save {  -webkit-transition:right 0.5s; width:254px; position:fixed; bottom:0; right:-274px; background-color:lightgrey; color:white; padding:20px 0 20px 20px; border-top:2px solid grey; text-align:left; }
#save input[type=text], #save input[type=password]{ width:210px; height:30px; margin:5px; font:11px "Lucida Grande", Arial; text-indent:10px; border:2px solid grey; border-radius:4px; }
#save select { width:80px; height:36px; margin:0 5px 5px 5px; font:11px "Lucida Grande"; border:2px solid grey; outline:none; }
#save select:focus { border-color:#3e82f8; }
#save input:focus { outline:none; border:2px solid #3e82f8; }
#save a { color:white; font-size:14px; text-decoration: none; margin:5px; font-weight:bold; }
#save a:hover { color:black; }
#save div { margin-top:10px; }
#save input[type=checkbox] { margin-right:10px; cursor:pointer; }
label { display:inline-block; cursor:pointer; margin:4px 0 8px 0; } 

#bg_info { position:fixed; left:12px; bottom:12px; display:none; }
#bg_info img { vertical-align:middle; margin-top:-4px; cursor:pointer; -webkit-filter:drop-shadow(0 0 4px white); }
#bg_info a { text-decoration:none; color:white; text-shadow:0 0 5px black; }


::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-thumb { height:100px; border:4px solid rgba(0, 0, 0, 0); background-clip: padding-box; -webkit-border-radius: 8px; background-color:grey; }

.preloader { background-size:cover; background-position:center center; position:fixed; top:0; left:0; opacity:0; width:100%; height:100%; z-index:-100; transition:opacity 0.5s; }

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { body { padding-top:40px; height:102%; } #bg_info { bottom:20px; left:20px; } }