html, body, div, span, object, h1, h2, h3, p, blockquote, pre,
em, img, strong, b, i, ol, ul, li, fieldset, article, section, form, label {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

html{overflow-y:scroll;width:100%;height:100%;}

a{color:blue;text-decoration:none;}
a:hover{color:#4169e1;}
    
body{
	font-family:'Segoe UI','Roboto',arial,sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	width:100%;
	text-align:center;
	color:#000;
	background-color:#fafafa;
}

.tippy-tooltip.x-theme{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff;border-radius:16px;padding:16px;}
.tippy-tooltip.x-theme[x-placement^=top] .tippy-arrow{border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}
.tippy-tooltip.x-theme[x-placement^=bottom] .tippy-arrow{border-bottom:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}
.tippy-tooltip.x-theme[x-placement^=left] .tippy-arrow{border-left:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tippy-tooltip.x-theme[x-placement^=right] .tippy-arrow{border-right:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tippy-tooltip.x-theme .tippy-backdrop{background-color:#fff}
.tippy-tooltip.x-theme .tippy-roundarrow{fill:#fff}
.tippy-tooltip.x-theme[data-animatefill]{background-color:initial}

.help{text-align:left;font-size:15px;}
.help div{margin:5px 0;}

h1,h2{font-size:16px;float:left;line-height:20px;margin:20px 0px;}
h2{font-weight:normal;margin-left:5px;}

header{
    position:fixed;
    top:0;
    width:100%;
    background:#fff;
	padding:5px 10px;
	font-size:26px;
    height:60px;
    border-bottom:1px solid #ccc;
    z-index:1;
}

#navright{display:flex;align-items:center;float:right;margin-right:30px;font-size:80%}

#navlogo{float:left;height:60px;width:60px;margin:0;}
#btnProfile img{border-radius:50%;margin:6px;}
#togbtn{float:left;}
#togbtn a{display:block;color:#fff;background:#000;width:48px;height:48px;line-height:48px;border-radius:16px;padding:10px;}

#logo{
    display:block;
    margin:5px;
    background:url(/assets/extendhunt.png) no-repeat top left;
    background-size:contain;
    width:50px;
    height:50px;
    color:transparent !important;
    vertical-align:middle;
}

main{
    min-height:calc(100vh - 145px);
}

#page{
    display:flex;
    margin:100px auto 50px auto;
    max-width:1080px;
    font-size:11px;
    flex-wrap:wrap;
    justify-content:center;
}

/*img {
    aspect-ratio: attr(width) / attr(height);
}*/

#msg{width:100%;margin-bottom:20px;font-size:16px;padding:0 10px;}

.ubox{width:102px;height:136px;clear:none;float:left;margin:15px 15px;padding:0}
.ubox img{width:100px;height:100px;border-radius:8px;}
.ubox span{cursor:pointer;}
.ubox div{font-weight:bold;max-height:30px;overflow:hidden;}
.tooltip{color:#000;text-align:left;padding-bottom:3px;min-width:320px;}
.tooltip img{width:64px;height:64px;border-radius:50%;}
.tooltip p{margin:2px 5px;font-size:16px;}
.tooltip p.pname{font-size:20px;font-weight:700;}
.tooltip p.phandle{color:#888;}
.tooltip p.pdesc{margin:10px 5px;}
.tooltip .pfooter{display:flex;justify-content:space-between;float:right;}

.blinking{color:red;animation:blink 1s infinite;}
@keyframes blink{50% {opacity:0;}}

.blackBtn{display:flex;align-items:center;color:#fff;background:#000;padding:4px 12px 6px 12px;font-size:16px;border-radius:8px;border:1px solid #000;}
.blankBtn{display:flex;align-items:center;color:#000;background:#fff;padding:4px 12px 6px 12px;font-size:16px;border-radius:8px;border:1px solid #000;}
.blackBtn:hover, .blankBtn:hover, .blackSmallBtn:hover{color:#fff;background:#222;}
.pickBtn{background:#0097BD;margin:10px auto;justify-content:center;width:100px;}
.pickBtn:hover{color:#fff;background:#0088AA;}
.pfooter a{display:inline-flex;align-items:center;color:#fff;padding:4px 12px 6px 12px;font-size:16px;border-radius:8px;}
.tealBtn{background:#0097BD;}
.tealBtn:hover{color:#fff;background:#0088AA;}
.redBtn{background:#ff0000;}
.redBtn:hover{color:#fff;background:#dd0000;}
#btnHelp{color:#000;background:#eee;margin-right:15px}

.hide{display:none;}

footer{clear:both;position:relative;/*margin-top:-48px;*/border-top:1px solid #ccc;font-size:15px;background:#fff;height:40px;padding:0 10px;}
footer div{margin:10px 0;}
footer span{display:block;float:left;margin:0 10px;}

#bpage{display:flex;margin:20px auto;max-width:1080px;text-align:left;justify-content:space-evenly;flex-direction:row;flex-wrap:wrap;padding:0 20px 40px 20px}
h3{text-transform:uppercase;margin:15px;font-size:18px;}
.lb{width:30%;}
.lb a{color:#000;display:flex;align-items:center;margin:10px 0;border:1px solid #ddd;border-radius:8px;padding:8px 20px 8px 12px;background:#fff;}
.lb a:hover{color:#000;border:1px solid #000;} 
.lbn{flex:1;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lbn p:first-child{font-weight:600;}
.lbn p:nth-child(2){color:#888;font-size:12px;margin:2px 0 4px 0;}
.lbn p:nth-child(3){font-size:12px;}
.lbs{}
.lb img{border-radius:50%;width:56px;height:56px;}
.lbp img{border-radius:8px;}

.sel img{border-radius:8px;width:56px;height:56px;margin:5px;}

.btnSF{font-size:14px;}

#notif{margin-top:10px;}
#notif p{margin:4px 0 0 0;padding:5px 0;border-top:1px solid #CCC;text-align:left;}

@media (max-width:1200px){
    #bpage{max-width:800px;}
    .lb{width:48%;}
}
@media (max-width:900px){
    .not-mobile{display:none}
    h2{display:none;}
}
@media (max-width:600px){
    .ubox{width:74px;height:118px;margin:5px 10px;}
    .ubox img{width:72px;height:72px;}
    #bpage{padding:20px 50px 30px 50px}
    .lb{width:100%;}
}
@media (max-width:400px){
    h1{display:none;}
    #bpage{padding:20px 20px 30px 20px}
}