/* Pibbitt on phones and small tablets.
 * Loaded on every member and public page (not the admin panel, which has its own).
 * Desktop is untouched: everything is inside the media query below. */

#bf-mnav, #bf-mbtn { display: none; }

@media (max-width: 760px) {
	html, body { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden; }
	body { margin: 0 !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-size: 100% 46px !important; }
	*, *::before, *::after { box-sizing: border-box; }
	img, video, iframe, embed, object, canvas { max-width: 100% !important; }
	input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], select, textarea { max-width: 100% !important; font-size: 16px !important; } /* 16px stops phones zooming in on tap */
	table { max-width: 100% !important; }
	td, th { word-break: break-word; }
	pre, code { white-space: pre-wrap; word-break: break-word; }

	/* ---------- header (logged-in pages) ---------- */
	.main, .main1 { width: auto !important; margin: 0 !important; padding: 0 !important; }
	.lefttop, .lefttop1 { float: none !important; display: flex !important; align-items: center; width: auto !important; height: 46px !important; margin: 0 !important; padding: 0 6px 0 10px !important; border: 0 !important; background: #3b5998; }
	.lefttopleft { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; line-height: 0; }
	.lefttopleft img { width: 104px !important; height: 23px !important; }
	.lefttoright { float: none !important; display: flex !important; align-items: center; gap: 2px; width: auto !important; height: auto !important; margin: 0 0 0 auto !important; white-space: nowrap; }
	.lefttoright > a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 40px; }
	.lefttoright > a img { width: 20px !important; height: 20px !important; }
	.lefttoright font { font-size: 13px !important; margin-right: 4px; }
	.lefttoright font b { color: #ffd2cc; }
	#nw-bell { margin-left: 2px !important; min-width: 30px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; }
	#nw-bell svg { width: 20px !important; height: 20px !important; fill: #fff !important; }
	#nw-popup { width: auto !important; left: 6px !important; right: 6px; max-height: 70vh; overflow-y: auto; }
	.righttop, .righttop1 { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 6px 8px !important; border: 0 !important; border-bottom: 1px solid #d3d8e2 !important; background: #e9ebee !important; }
	.righttop .search, .righttop1 .search { float: none !important; width: auto !important; margin: 0 !important; position: static !important; }
	.righttop .search form, .righttop1 .search form { margin: 0; }
	.righttop .textfield, .righttop1 .textfield { display: block; width: 100% !important; height: 36px !important; padding: 0 34px 0 10px !important; border-radius: 18px; border: 1px solid #ccd0d8 !important; background-color: #fff !important; background-position: right 8px center !important; }
	.righttop .nav, .righttop1 .nav { display: none !important; }

	/* menu button and slide-out menu */
	#bf-mbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 2px; padding: 0; border: 0; border-radius: 4px; background: none; color: #fff; cursor: pointer; }
	#bf-mbtn:active, #bf-mbtn[aria-expanded="true"] { background: rgba(255,255,255,.18); }
	#bf-mbtn svg { width: 24px; height: 24px; fill: #fff; }
	#bf-mnav { display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 100000; width: 82%; max-width: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; box-shadow: -4px 0 18px rgba(0,0,0,.3); transform: translateX(105%); transition: transform .2s ease; font: 15px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
	#bf-mnav.open { transform: none; }
	#bf-mshade { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.35); }
	#bf-mshade.open { display: block; }
	#bf-mnav .mh { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #3b5998; color: #fff; font-weight: bold; }
	#bf-mnav .mh button { border: 0; background: none; color: #fff; font-size: 24px; line-height: 1; padding: 0 4px; cursor: pointer; }
	#bf-mnav .ms { padding: 10px 14px 4px; color: #90949c; font-size: 12px; font-weight: bold; text-transform: uppercase; }
	#bf-mnav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: #1d2129 !important; text-decoration: none !important; border-bottom: 1px solid #f0f1f4; }
	#bf-mnav a:active { background: #eceff5; }
	#bf-mnav a span { width: 22px; text-align: center; font-size: 18px; }
	#bf-mnav a.out { color: #c0392b !important; }
	body.bf-mnav-open { overflow: hidden; }

	/* ---------- page containers: fill the screen ---------- */
	.pf, .hm-welcome, .ip, .ip-guest, .ad-page, .cm, .fm, .gm, .md, .mu, .mu-tabs, .nb, .nt, .sf, .pv, .pk, .ep, .pc, .pc-friends, .ps, .rl, .rm, .wp-post, .wp-empty, .shoutout {
		width: auto !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
	}
	.pf, .hm-welcome, .ip, .ad-page, .cm, .fm, .gm, .md, .mu, .mu-tabs, .nb, .nt, .sf, .pv, .pk { padding-left: 10px !important; padding-right: 10px !important; }
	.pf { flex-direction: column; gap: 0 !important; font-size: 13px !important; align-items: stretch !important; }
	.pf-left, .pf-main, .pf-right { flex: none !important; width: 100% !important; }
	.pf a, .pf-nav a, .pf-side-link, .pf-btn, .pf-linkbtn { font-size: 13px !important; }
	.pf-box-h { font-size: 13px; padding: 6px 8px !important; }
	.pf-box-b { font-size: 13px; }
	.pf-btn { padding: 7px 14px !important; }
	.pf-poke-form select { font-size: 16px !important; height: 34px; }

	/* Home page */
	.hm-welcome { font-size: 12px !important; }
	.hm-welcome b { display: block; font-size: 18px !important; }
	[data-bfpage="lol"] .pf-left { order: 3; }
	[data-bfpage="lol"] .pf-main { order: 1; }
	[data-bfpage="lol"] .pf-right { order: 2; margin-top: 10px; }
	[data-bfpage="lol"] .pf-nav, [data-bfpage="lol"] .hm-me { display: none !important; } /* the menu button has these links */
	.hm-composer > img { width: 40px !important; height: 40px !important; }
	.pf-composer textarea { font-size: 16px !important; height: 60px; }
	.pf-composer .pf-btn { padding: 8px 18px !important; font-size: 14px !important; }

	/* profile */
	.pf-picwrap { width: 120px !important; margin: 0 auto 8px; }
	.pf-pic { width: 120px !important; max-height: 160px !important; }
	.pf-tabs { display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; flex-wrap: nowrap !important; }
	.pf-tabs a { flex: 0 0 auto; font-size: 13px !important; padding: 8px 11px !important; }
	.pf-infotable th { width: 38% !important; }
	.pf-head h1, .pf-head h2 { font-size: 20px !important; }
	/* profile: picture, then name/tabs/wall, then the side boxes */
	[data-bfpage="profile"] .pf-left { display: contents; }
	[data-bfpage="profile"] .pf-left > * { order: 3; }
	[data-bfpage="profile"] .pf-left > .pf-picwrap, [data-bfpage="profile"] .pf-left > .pf-pic, [data-bfpage="profile"] .pf-left > form, [data-bfpage="profile"] .pf-left > .pf-picmsg { order: 0; }
	[data-bfpage="profile"] .pf-left > img.pf-pic { margin: 0 auto 8px; }
	[data-bfpage="profile"] .pf-body, [data-bfpage="profile"] .pf-cols { display: contents; }
	[data-bfpage="profile"] .pf-head { order: 1; }
	[data-bfpage="profile"] .pf-main { order: 2; }
	[data-bfpage="profile"] .pf-right { order: 4; margin-top: 10px; }
	[data-bfpage="profile"] .pf-left > .pf-links { margin-top: 14px; }
	.pf-cols { flex-direction: column; gap: 0 !important; }
	.pf-body { flex: none !important; width: 100%; }

	/* posts and comments */
	.wp-post { padding: 10px 0 !important; font-size: 14px; }
	.wp-post img { max-width: 100% !important; }
	.pf-ad img { height: 140px !important; }

	/* forms laid out as label | field rows: stack them */
	.ep-head { flex-wrap: wrap; gap: 8px; padding: 12px !important; }
	.ep-body { padding: 4px 12px 16px !important; }
	.ep-row { display: block !important; }
	.ep-row label { display: block; text-align: left !important; padding: 0 0 4px !important; }
	.ep-row input[type=text], .ep-row textarea { width: 100% !important; }
	.ep-btn { padding: 7px 12px !important; font-size: 13px !important; }

	/* forums */
	.fm-top { flex-wrap: wrap; }
	.fm-search { display: flex; width: 100%; gap: 6px; } .fm-search input[type=text] { flex: 1; min-width: 0; }
	.fm-row { flex-wrap: wrap; gap: 8px !important; padding: 10px !important; }
	.fm-stat { flex: 0 0 auto !important; width: auto !important; text-align: left !important; font-size: 12px; }
	.fm-stat b { display: inline !important; margin-right: 3px; }
	.fm-last { flex: 1 1 100% !important; width: auto !important; padding-left: 42px; }
	.fm-main { flex: 1 1 calc(100% - 50px) !important; }

	/* ---------- old two-column pages (friends, info, account, search...) ---------- */
	.left, .right, .left1, .right1, .content, .content1, .leftside, .rightside { float: none !important; width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; height: auto !important; min-height: 0 !important; }
	.right, .right1 { border-left: 0 !important; border-right: 0 !important; }
	.main .left *, .main .right * { max-width: 100% !important; }
	.main .right div, .main .left div { height: auto !important; min-height: 0; margin-left: 0 !important; }
	.rightleft, .rightright, .rightright1, .rightright2 { float: none !important; width: auto !important; }
	.main .right { padding: 0 10px 12px !important; font-size: 14px; }
	.main .right .name { white-space: normal !important; height: auto !important; }
	.main .right .buttonback1 { float: none !important; width: auto !important; margin: 6px 0 !important; }
	.main .right .educinfo, .main .right .educinfo1 { padding-bottom: 8px; }
	.main .left { padding: 8px 10px 0 !important; }

	/* advertise page */
	.ad-wrap { flex-direction: column; gap: 16px !important; padding: 14px 12px 18px !important; }
	.ad-form { flex: none !important; width: 100% !important; }
	.ad-preview { width: 100% !important; }
	.ad-btn { padding: 8px 16px !important; font-size: 14px !important; }

	/* ---------- public pages (log-in / sign-up) ---------- */
	.hp-header-inner, .hp-main, .hp-login-msg, .mx-header-inner { width: auto !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; }
	.hp-main { display: block !important; }
	.hp-picture, .hp-signup { float: none !important; width: auto !important; max-width: 100% !important; }
	.hp-picture img, .picture img { width: 100% !important; height: auto !important; }
	.picture, .signup, .signup1 { float: none !important; width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 12px; padding-right: 12px; }
	/* older sign-up pages (after a sign-up error, step 2) */
	[data-bfpage="regestration"] :is(.mainr, .downleft, .topleft, .topright, .qwerty, .field, .text, .textleft, .textright, .textleft1, .textright1, .email, .password, .emailtext, .passwordtext, .label, .label1, .label2, .text1),
	[data-bfpage="stage2"] :is(.mainr, .downleft, .topleft, .topright, .qwerty, .field, .text, .textleft, .textright, .textleft1, .textright1, .email, .password, .emailtext, .passwordtext, .label, .label1, .label2, .text1) {
		float: none !important; width: auto !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important;
	}
	[data-bfpage="regestration"] .downleft, [data-bfpage="stage2"] .downleft, [data-bfpage="regestration"] .mainr, [data-bfpage="stage2"] .mainr { padding: 0 12px; }
	[data-bfpage="regestration"] .field, [data-bfpage="stage2"] .field { margin-top: 16px; }
	[data-bfpage="regestration"] .textfield, [data-bfpage="stage2"] .textfield { width: 100% !important; height: 40px !important; }
	.hp-headline { font-size: 19px !important; }
	.hp-header-inner { display: block !important; padding-top: 12px !important; padding-bottom: 14px !important; }
	.hp-header-inner > img { width: 120px !important; height: auto !important; margin-bottom: 10px; }
	.hp-login { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
	.hp-login-field { min-width: 0; }
	.hp-login input[type=text], .hp-login input[type=password] { width: 100% !important; height: 40px !important; font-size: 16px !important; border-radius: 4px; }
	.hp-login label { font-size: 13px !important; }
	.hp-login .hp-login-btn { grid-column: 1 / -1; margin-top: 4px !important; height: 42px !important; font-size: 16px; border-radius: 4px; }
	.hp-main { padding-top: 18px !important; }
	.hp-signup { margin-top: 22px; }
	.hp-signup h1 { font-size: 28px !important; }
	.hp-signup h2 { font-size: 17px !important; }
	.hp-row { display: block !important; }
	.hp-row > label { display: block; width: auto !important; text-align: left !important; padding: 0 0 4px !important; }
	.hp-row input[type=text], .hp-row input[type=password] { width: 100% !important; height: 42px !important; }
	.hp-row select { height: 40px !important; }
	.hp-actions { margin-left: 0 !important; }
	.hp-actions .greenButton1 { width: 100%; height: 44px !important; font-size: 16px !important; }

	/* footer */
	#site-footer { padding-top: 14px !important; }
	.bf-footer-links a { display: inline-block; padding: 4px 2px; }
}

/* very small phones */
@media (max-width: 360px) {
	.lefttopleft img { width: 86px !important; height: 19px !important; }
	.lefttoright > a { min-width: 26px; }
}