/* triplefaucet.com: what used to be inline style="" attributes. The Content-Security-Policy (.htaccess) allows no
   inline styles, so pages use these classes. Loaded after dashboard.css by tpl/beta.inc.php, tpl/authbeta.inc.php and
   tpl/migration.inc.php. The utilities are !important because the inline styles they replace beat theme rules such as
   .form-inline .form-control{width:auto}. */

/* widths of small inputs (admin forms) */
.tf-w-45r{width:4.5rem!important}
.tf-w-5r{width:5rem!important}
.tf-w-7r{width:7rem!important}
.tf-w-9r{width:9rem!important}
.tf-w-12r{width:12rem!important}
.tf-w-100{width:100px!important}
.tf-w-120{width:120px!important}
.tf-w-130{width:130px!important}
.tf-w-140{width:140px!important}
.tf-w-180{width:180px!important}
.tf-w-200{width:200px!important}
.tf-minw-280{min-width:280px!important}
.tf-minw-32r{min-width:3.2rem!important}
.tf-mw-300{max-width:300px!important}
.tf-maxh-24r{max-height:24rem!important}
.tf-ls-2{letter-spacing:2px!important}

/* progress bars: width in steps of 5% (tf-pct-0 ... tf-pct-100) */
.tf-pct-0{width:0!important}.tf-pct-5{width:5%!important}.tf-pct-10{width:10%!important}.tf-pct-15{width:15%!important}
.tf-pct-20{width:20%!important}.tf-pct-25{width:25%!important}.tf-pct-30{width:30%!important}.tf-pct-35{width:35%!important}
.tf-pct-40{width:40%!important}.tf-pct-45{width:45%!important}.tf-pct-50{width:50%!important}.tf-pct-55{width:55%!important}
.tf-pct-60{width:60%!important}.tf-pct-65{width:65%!important}.tf-pct-70{width:70%!important}.tf-pct-75{width:75%!important}
.tf-pct-80{width:80%!important}.tf-pct-85{width:85%!important}.tf-pct-90{width:90%!important}.tf-pct-95{width:95%!important}
.tf-pct-100{width:100%!important}

/* header: notification count on the bell, the round menu button on phones, the default avatar */
.tf-notif-badge{position:absolute!important;top:.2rem;right:0;font-size:.6rem!important}
.tf-notif-badge-side{top:.4rem}
/* two classes, no !important: beats the theme's .header-toggler (and :hover), while Bootstrap's ml-auto / ml-3
   (!important) still set the left margin, as they did over the inline style */
.header-toggler.tf-header-toggler{width:2.5rem;height:2.5rem;position:relative;background:#7b41d8;border-radius:50%;margin:3px;color:#fff}
.tf-avatar-user{background-color:transparent!important;background-image:url(../images/user.png)!important}

/* settings: the 2FA QR code */
.tf-qr{width:200px!important;height:200px!important}

/* /offers: the network's wall */
.tf-wall{width:100%;height:1400px;border:0}

/* ads (inc/ads.inc.php): slot heights as in AD_SLOTS, A-Ads iframe, banner images, the anti-adblock bait */
.tf-slot-faucet_top{min-height:90px}
.tf-slot-faucet_side{min-height:250px}
.tf-slot-faucet_bottom{min-height:60px}
.tf-ad-frame{max-width:100%;border:0;padding:0;overflow:hidden;background-color:transparent}
.tf-ad-img{max-width:100%;height:auto}
.tf-ad-thumb{max-width:240px!important;max-height:60px!important}
#aabBait{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important}

/* price history chart on /token (inc/market.inc.php mkt_chart_svg): drawn on the server, single series */
.tf-chart{display:block;width:100%;height:auto}
.tf-chart text{font-size:11px;fill:#6e7687;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
@media (max-width:575px){.tf-chart text{font-size:17px}}
.tf-chart .tf-chart-xlab{text-anchor:middle}
.tf-chart .tf-chart-last{text-anchor:end;font-weight:600;fill:#3d4451}
.tf-chart-grid{stroke:#e9ecf2;stroke-width:1}
.tf-chart-axis,.tf-chart-tick{stroke:#c3c9d4;stroke-width:1}
.tf-chart-line{fill:none;stroke:#d35f00;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tf-chart-dot{fill:#d35f00;stroke:#fff;stroke-width:2}
.tf-chart-line,.tf-chart-dot,.tf-chart text{pointer-events:none}
.tf-chart-hit{fill:transparent}
.tf-chart-hit:hover{fill:rgba(211,95,0,.1)}

/* ---- layout pass (2026-11): rules over the theme (dashboard.css), all pages ---- */
/* the footer sits at the bottom of short pages (the theme's min-height:100% had no parent height to refer to) */
.page{min-height:100vh;justify-content:flex-start}
.page-main{display:flex;flex-direction:column}
.page-main>.footer{margin-top:auto}
/* readable grey text: the theme's #bdcce5 was 1.6:1 on white */
.text-muted{color:#8796b0!important}
.breadcrumb-item.active{color:#7f93b8}
/* one line of explanation under a page title */
.tf-lead{margin:-.5rem 0 1.25rem;max-width:60rem}
/* phones: the logo keeps to its line next to the bell and the menu button; breadcrumbs make room for the title */
@media (max-width:480px){.header-brand-img{height:2rem;max-width:62vw}}
@media (max-width:575px){
	.page-header{margin:1rem 0}
	.page-header .breadcrumb{display:none}
	.page-header .btn-group .btn{padding:.3rem .7rem}
}
/* home: the hero is the brand gradient of the sign-in pages (no picture; the old site's home-b.jpg was 1.3 MB) with a
   few soft light circles; the number cards stay small on phones */
.home-img{background:#4a6fe0;background-image:radial-gradient(circle at 8% 20%,rgba(255,255,255,.13) 0,rgba(255,255,255,.13) 7rem,transparent 7.05rem),radial-gradient(circle at 92% 88%,rgba(255,255,255,.10) 0,rgba(255,255,255,.10) 12rem,transparent 12.05rem),radial-gradient(circle at 78% 12%,rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 3.5rem,transparent 3.55rem),radial-gradient(circle at 25% 105%,rgba(255,255,255,.07) 0,rgba(255,255,255,.07) 9rem,transparent 9.05rem),linear-gradient(110deg,#04A8FB 1%,#871faf 100%);background-size:auto}
.home-img h1,.home-img .lead{text-shadow:0 1px 3px rgba(20,10,60,.35)}
.home-img .lead{max-width:52rem;margin-left:auto;margin-right:auto}
@media (max-width:575px){
	.tf-stats .hero-widget{padding:12px 6px}
	.tf-stats .hero-widget i{font-size:1.6rem;margin-bottom:.4rem!important}
	.tf-stats .hero-widget var{font-size:26px;height:40px;line-height:40px}
	.tf-stats .hero-widget label{font-size:13px}
}
/* sign-in / sign-up / reset: the blue logo on a white plate, readable on the blue background */
.tf-auth-logo{background:#fff;padding:.45rem .9rem;border-radius:.6rem;box-shadow:0 2px 10px rgba(20,30,90,.18);height:3.1rem!important;box-sizing:content-box}
/* dashboard: the Earn shortcuts wrap as small buttons; long usernames break */
.tf-earn-links .btn{margin:0 .25rem .4rem 0}
.tf-break{overflow-wrap:anywhere}
/* tabs (dashboard, /token): the theme stacks them as full-width rows on phones; keep them side by side */
@media (max-width:480px){.tabs-menu ul li{width:auto;margin:0 .25rem .5rem 0}.tabs-menu ul li a{padding:6px 14px}}
/* small print lists: bullets and a little space, so the lines don't run together */
.tf-list{list-style:disc;padding-left:1.1rem}
.tf-list li{margin-bottom:.35rem}
/* long admin lists scroll inside their card (with .tf-maxh-24r) */
.tf-scroll{overflow-y:auto}
/* a note that belongs to the card above it */
.tf-card-note{margin:-.9rem .5rem 1.5rem}
/* admin: the tabs on one scrolling line on small screens; number tiles (dashboard) */
.tf-admin-tabs .nav-link{padding:.35rem .6rem}
@media (max-width:991px){.tf-admin-tabs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding-bottom:.25rem;-webkit-overflow-scrolling:touch}.tf-admin-tabs .nav-item{flex:0 0 auto}}
.tf-tile{display:block;margin-bottom:1rem;height:calc(100% - 1rem)}
.tf-tile .card-body{padding:.9rem 1rem}
.tf-tile-n{font-size:1.6rem;line-height:1.2;color:#3d4451}
.tf-tile-l{font-size:.8rem;color:#7f8fab;line-height:1.3}
a.tf-tile:hover{text-decoration:none;box-shadow:0 4px 16px rgba(123,65,216,.18)}
.tf-tile-due{border-left:4px solid #f7b731}
.tf-tile-due .tf-tile-n{color:#d35f00}
/* mood map (/moods, inc/moods.inc.php): countries by mood balance on a diverging blue - grey - red scale (blue =
   positive), outline only = not enough data; worldwide split as bars in one hue. No inline styles (CSP). */
.tf-moodmap{display:block;width:100%;min-width:600px;height:auto}
.tf-moodmap path{stroke:#fff;stroke-width:.5;stroke-linejoin:round}
.tf-moodmap path:hover{stroke:#3d4451;stroke-width:1.2}
.tf-mm-p2{fill:#1c5cab}.tf-mm-p1{fill:#86b6ef}.tf-mm-z{fill:#c9c7c0}.tf-mm-n1{fill:#f0a19c}.tf-mm-n2{fill:#c23b3b}
.tf-moodmap .tf-mm-none{fill:#f4f5f8;stroke:#c9cdd8}
.tf-mm-legend>span{display:inline-block;margin:0 1rem .25rem 0;white-space:nowrap}
.tf-mm-key{display:inline-block;width:.9rem;height:.9rem;border-radius:3px;vertical-align:-2px;margin-right:.35rem}
span.tf-mm-p2{background:#1c5cab}span.tf-mm-p1{background:#86b6ef}span.tf-mm-z{background:#c9c7c0}span.tf-mm-n1{background:#f0a19c}span.tf-mm-n2{background:#c23b3b}span.tf-mm-none{background:#f4f5f8;border:1px solid #c9cdd8}
.tf-moodbars{display:block;width:100%;max-width:34rem;height:auto}
.tf-moodbars text{font-size:12px;fill:#3d4451}
.tf-moodbars .tf-mb-value{fill:#6e7687}
.tf-mb-bar{fill:#2a78d6}
.tf-moods .custom-control-label{cursor:pointer}
/* prediction faucet: the 99 numbers as a grid of small buttons */
.tf-pred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.7rem,1fr));gap:.3rem}
.tf-pred-grid .btn{padding:.3rem 0;min-width:0}
.tf-pred-top{font-size:.9rem;font-weight:600}
/* partner links: clicks per day on /adminum/partners, the cards on /other-faucets */
.tf-pl-bar{width:100%;height:.6rem;vertical-align:middle}
#plClicks .tf-scroll{max-height:28rem}
.tf-pl-card .card-body{display:flex;flex-direction:column}
.tf-pl-card .btn{margin-top:auto;align-self:flex-start}
.tf-pl-featured{border:2px solid #f7b924}
.tf-pl-featured .card-title{font-size:1.35rem}
.tf-pl-badge{align-self:flex-start;margin-bottom:.5rem}
.tf-btn-row{display:flex;flex-wrap:wrap;gap:.5rem}
/* tasks and jobs by country: the admin list of countries */
.tf-geo-list{max-height:20rem}
/* where a task's visits / a job's completions came from (My tasks / My jobs, geo_delivery_html) */
.geoFrom{white-space:normal;margin-top:.25rem}
.geoFrom summary{cursor:pointer}
.tf-geo-from{width:auto;min-width:16rem;max-width:28rem;margin-top:.25rem}
/* partner link clicks per day (pl_chart_svg on /adminum/partners?edit=) */
.tf-chart-bar{fill:#d35f00;pointer-events:none}
.tf-chart .tf-chart-peak{text-anchor:middle}
.tf-pl-days summary{cursor:pointer}
/* admin day charts (inc/barchart.inc.php bar_card_html) */
.tf-days summary{cursor:pointer}
.tf-days .tf-scroll{max-height:28rem}
.tf-day-bar{width:100%;height:.6rem;vertical-align:middle}
.tf-range{margin-left:.5rem}
.tf-chart-filter{margin:.25rem 0 0}
@media (min-width:992px){.tf-chart-box .tf-chart text{font-size:8px}}	/* full-width cards scale the 560-unit chart ~1.7x */
/* the rules of the theme's sidemenu.css (no longer loaded) that applied here: no sideways scrolling on phones, the
   footer's container, square dropdowns placed on the right */
@media (max-width:767px){.app{overflow-x:hidden}}
.footer .container{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}
.dropdown-menu{border-radius:0}
.dropdown-menu.dropdown-menu-right{left:auto}
.dropdown-item .fa,.dropdown-item .fas,.dropdown-item .icon{vertical-align:middle}