:root {
	--cnvs-header-height: 80px;
}

body {
	user-select: text
}


h1, h2, h3, h4, h5, h6 {
	/*color: #000;*/
	font-family: 'Lato', sans-serif;
}

h1 {
	font-size: 2em
}

label {
	font-family: 'Lato', sans-serif;
}

.table-sm {
	font-size: .85em
}

/*HEADER*/
#header-wrap #logo img {
	height: auto;
}

.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
	height: auto;
}

.account-balance-pill {
	display: none;
	align-items: center;
	gap: 6px;
	margin-left: 1.5rem;
	padding: 5px 12px;
	background: rgba(26, 188, 156, .15);
	border: 1px solid rgba(26, 188, 156, .35);
	border-radius: 6px;
	color: #fff;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	/* font-size: 0 collapses whitespace text nodes between the inner spans —
	   without this, the pill inherits #logo's branding font (~36px) and the
	   indentation whitespace in the cshtml renders as ~80px-wide spaces,
	   inflating the pill from ~125px to ~360px. The label/value spans set
	   their own font-size explicitly so visible text renders correctly. */
	font-size: 0;
}

/* Show pill only at >=1280px. Below that, .header-row's wrap-enabled flex
   layout pushes .header-misc (cart/user/search icons) to a second row because
   logo (~210) + my pill (~150 with margin) + nav (~717) + misc (~108) exceeds
   the container width. Empirically:
     - 1260 viewport (container 1200, total 1216) → wraps
     - 1280 viewport (container 1220, total 1216) → fits with 4px clearance
   Below 1280, the wrap is caused both by the pre-existing nav width AND my
   pill; hiding the pill removes my contribution. Dealers at <1280px still see
   balance on Activate/Refill/Reports pages. */
@media (min-width: 1280px) {
	.account-balance-pill {
		display: inline-flex;
	}
}

a.account-balance-pill:hover {
	background: rgba(26, 188, 156, .25);
	border-color: rgba(26, 188, 156, .55);
	color: #fff;
	text-decoration: none;
}

.account-balance-label {
	color: #a7f3d0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .03em;
}

.account-balance-value {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.submenu a.active {
	font-weight: bold;
}

.dark {
	--cnvs-contrast-bg: #000;
	--cnvs-footer-bg: #000;
}
/*
.dark .section, .section.dark {
	background-color: #000;
}
*/
.dot {
	width: 15px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 50%;
}

/* Brand dots in the dealer navigation. NavigationViewComponent names these as `dot <brand>`
   Icon strings, which the nav renders straight into a class attribute — so the class name
   never appears literally in any markup, and these rules look unused to a search of the views.
   Carrier-record colours drive every data-bound dot; the nav is a static menu with no carrier
   row in scope, so it stays on classes. WebNavigationDotColorTests pins the two lists together. */
.genmobile, .genmobilepink { background-color: #EA0A8E; }
.genmobileblue { background-color: #01A8DF; }
.h2o { background-color: #FFD202; }
.mobilex { background-color: #00EF00; }
.orange { background-color: #FFA500; }
.rose { background-color: #EA0A8E; }
.sky { background-color: #01A8DF; }
.spectrum { background-color: #0073d1; }

:root {
	--cnvs-themecolor: #1ABC9C;
	--cnvs-content-padding: 2rem;
}

#page-title, .page-title {
	--cnvs-page-title-padding: 2rem;
}



/* -------- FEATURE BOX -------- */

	.feature-box {
		--cnvs-featured-box-icon: 6rem;
	}

	.feature-box h3 {
		font-size: 16px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 0;
		color: #333;
	}

	.fbox-center .fbox-icon {
		margin-bottom: .5rem;
	}

	.feature-box.fbox-plain .fbox-icon i {
		color: #fff;
	}

	.feature-box.fbox-center:not(.fbox-bg) h3:after {
		border: 0
	}

	.fancy-title.title-bottom-border h1, .fancy-title.title-bottom-border h2, .fancy-title.title-bottom-border h3, .fancy-title.title-bottom-border h4, .fancy-title.title-bottom-border h5, .fancy-title.title-bottom-border h6 {
		border-bottom: 2px solid #000;
	}

/* -------------------------------- */

.page-menu-item label {
	margin-left: 3px;
	margin-right: 3px;
}

/* The visible Analytics label deliberately shares the neighboring footer-link treatment. */
.copyright-links .ga4-analytics-toggle-label {
	display: inline-block;
	margin: 0 0.25rem;
	color: var(--cnvs-copyrights-link-color);
	border-bottom: 1px dotted var(--cnvs-copyrights-link-color);
}

.ga4-analytics-toggle {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: inherit;
	vertical-align: baseline;
	cursor: pointer;
}

.ga4-analytics-toggle:hover .ga4-analytics-toggle-label {
	opacity: 0.91;
}

.ga4-analytics-toggle-track {
	position: relative;
	display: inline-block;
	width: 1.75rem;
	height: 0.875rem;
	margin-left: 0.125rem;
	border-radius: 999px;
	background-color: #6c757d;
	transition: background-color 150ms ease;
}

.ga4-analytics-toggle-track::after {
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: #fff;
	content: "";
	transition: transform 150ms ease;
}

.ga4-analytics-toggle[aria-checked="true"] .ga4-analytics-toggle-track {
	background-color: var(--cnvs-themecolor);
}

.ga4-analytics-toggle[aria-checked="true"] .ga4-analytics-toggle-track::after {
	transform: translateX(0.875rem);
}

.ga4-analytics-toggle:focus-visible {
	outline: 2px solid var(--cnvs-themecolor);
	outline-offset: 3px;
}

.ga4-analytics-toggle:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}
/* -------- PLAN PRICING TABLES (.mw-plan-table / .term-matrix) -------- */

/* Shared chrome for the plan/term pricing tables (Gen Mobile activation + refill matrices,
   refill plan list). Previously duplicated inline in ActivateCarrier.cshtml and
   RefillCarrier.cshtml <style> blocks. */

.mw-plan-table {
	font-size: .8em;
}

.mw-plan-table > tbody > tr > td {
	vertical-align: middle;
	line-height: 1.5;
	text-align: center;
}

.mw-plan-table > thead > tr > th {
	text-align: center;
	white-space: nowrap;
}

.mw-plan-table .leftborder {
	border-left: solid 1px #f5f5f5;
	width: 60px;
}

/* Term-matrix crosshair: hovering (or keyboard-focusing) a plan+term cell outlines the cell
   in green and tints the row's plan cell and the term's column header, so the dealer reads
   "this plan for this many months" before the click navigates away. Column pairing is by the
   term-col-{N} class the Razor loop emits on BOTH the <th> and its <td>s — class-paired, not
   positional, so a column change can't silently retarget it. Terms are the partner-fixed
   {1, 3, 6, 12} set; a new term needs a matching rule below. Browsers without :has() skip the
   row/column arms; the cell highlight still applies. :active gives touch a momentary flash
   before navigation. The border is an inset box-shadow, not a border, so cell geometry never
   shifts on hover. */

.term-matrix td.term-cell a:is(:hover, :focus-visible, :active) {
	background-color: #f0fdf4;
	box-shadow: inset 0 0 0 2px #22c55e;
}

.term-matrix td.term-cell a:focus-visible {
	outline: 2px solid #16a34a;
	outline-offset: -2px;
}

.term-matrix tr:has(td.term-cell a:is(:hover, :focus-visible)) td.term-plan {
	background-color: #f0fdf4;
}

.term-matrix:has(td.term-col-1 a:is(:hover, :focus-visible)) th.term-col-1,
.term-matrix:has(td.term-col-3 a:is(:hover, :focus-visible)) th.term-col-3,
.term-matrix:has(td.term-col-6 a:is(:hover, :focus-visible)) th.term-col-6,
.term-matrix:has(td.term-col-12 a:is(:hover, :focus-visible)) th.term-col-12 {
	background-color: #f0fdf4;
}

/* Two states for a feature tile the signed-in dealer cannot use right now. Both dim it; they differ
   in whether the tile is still a control.

   .mw-tile-muted — the link still works. The Activate and Refill carrier tiles use this: an
   unauthorized carrier is faded but still clickable, because clicking it is how the dealer starts
   the authorization. Those two pages each declared their own copy of this rule inline until they
   were pointed here.

   .mw-tile-unavailable — the tile is not a control at all. The dashboard strips use this for a
   trade-show signup: the view renders the anchor with no href, so there is nothing to click.
   pointer-events is what makes that legible. Without it the tile still lifts and glows on hover —
   .fbox-effect keys its hover off the tile div, not the anchor — so a retailer at the booth gets a
   control that lights up and then does nothing, which reads as a broken page rather than a locked
   feature. The <a> element itself stays, because .fbox-border .fbox-icon a is what draws the circle
   the icon sits in.

   Named rather than the bare .disabled those inline copies used: unqualified, it applies to
   anything on the page carrying the class, which is the name Bootstrap hands out. */

.mw-tile-muted,
.mw-tile-unavailable {
	opacity: .3;
}

.mw-tile-unavailable {
	pointer-events: none;
}

/* Spectrum Activation History, "Paid to you" (dealer administrators only): the amount right-aligned like any money
   column, the run and date in a small grey line under it, and one small dot for the state. Quiet on purpose: no
   colored text, so a held or charged-back row is found by its dot. */

.spectrum-paid {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.spectrum-paid-detail {
	display: block;
	font-size: 9px;
	line-height: 1.2;
	color: #7b838b;
}

.spectrum-paid-soft {
	color: #9aa1a8;
}

.spectrum-paid-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 5px;
	border-radius: 50%;
	vertical-align: middle;
	position: relative;
	top: -1px;
	background: #c4c9ce;
}

.spectrum-paid-dot--paid { background: #3f9b6e; }
.spectrum-paid-dot--held { background: #d4a017; }
.spectrum-paid-dot--chargedback { background: #c2554d; }
.spectrum-paid-dot--forfeited { background: #9aa0a6; }