/* CUSTOM STYLES (loaded last, so these win over the theme). */

/* LOBBY GREETING: the "Good morning, name" card on top of the room list */
.lobby_hello { display:flex; align-items:center; gap:16px; }
.lobby_hello_av { flex:none; width:54px; height:54px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px rgba(128,128,128,0.25); }
.lobby_hello_av img { width:100%; height:100%; object-fit:cover; display:block; }
.lobby_hello_text { min-width:0; }
.lobby_hello_title { margin:0; font-size:22px; font-weight:700; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lobby_hello_title .fa { margin-right:6px; opacity:0.85; }
.lobby_hello_name { font-weight:800; }
.lobby_hello_sub { margin:3px 0 0 0; font-size:14px; opacity:0.65; }
@media screen and (max-width:560px){
	.lobby_hello { gap:12px; }
	.lobby_hello_av { width:46px; height:46px; }
	.lobby_hello_title { font-size:18px; white-space:normal; }
	.lobby_hello_sub { font-size:13px; }
}

/* Profile: the user's cover image extends behind the whole profile, not just the top strip */
.pro_has_cover { position:relative; overflow:hidden; border-radius:5px; background-size:cover; background-position:50% 50%; background-repeat:no-repeat; color:#fff; }
.pro_has_cover::before { content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,0.12) 0, rgba(0,0,0,0.35) 250px, rgba(0,0,0,0.62) 100%); }
.pro_has_cover > * { position:relative; z-index:1; }
.pro_has_cover .pro_top { background-color:transparent !important; }
.pro_has_cover .pro_menu_wrap,
.pro_has_cover #mprofilemenu,
.pro_has_cover .modal_zone { background:transparent !important; }
.pro_has_cover .modal_mback { background:rgba(0,0,0,0.3) !important; }
.pro_has_cover .modal_selected { background:rgba(255,255,255,0.2) !important; }
.pro_has_cover .modal_menu_item,
.pro_has_cover .proitem,
.pro_has_cover .proitem .bold,
.pro_has_cover .prodata,
.pro_has_cover .proicon,
.pro_has_cover .sub_text { color:#fff !important; text-shadow:0 1px 3px rgba(0,0,0,0.6); }
.pro_has_cover .blisting,
.pro_has_cover .blist { border-bottom:1px solid rgba(255,255,255,0.18) !important; }
.pro_has_cover .blisting:hover { background:rgba(255,255,255,0.08) !important; }