/* ============================================================
TSC BY THE NUMBERS
============================================================ */

:root {
    --tsc-blue: #005296;
    --tsc-gold: #E5B611;
    --tsc-text: #525a61;
    --tsc-light: #f7f7f7;
    --tsc-blue-light: rgba(0, 82, 150, 0.10);
    --tsc-gold-light: rgba(229, 182, 17, 0.14);
  	--tsc-deep-blue: #002952;
  	--tsc-navy: #036;
    --tsc-bright-blue: #1881d8;
  	--tsc-ink: #444;
  	--tsc-muted: #666a6d;
  	--tsc-line: #d1d3d4;
  	--tsc-soft: #f2f2f2;
  	--tsc-shadow: 0 18px 50px #0033661f;
  	--tsc-teal: #0d5796;
}


/* ============================================================
TYPOGRAPHY WEIGHTS
============================================================ */

/* Bold display text */
.tsc-numbers-section__kicker,
.tsc-numbers-section__heading,
.tsc-numbers-card__kicker,
.tsc-numbers-card__title,
.tsc-numbers-card__number,
.tsc-numbers-card__number-prefix,
.tsc-numbers-card__number-value,
.tsc-numbers-card__number-suffix {
	font-weight: 650;
}

/* Tags */
.tsc-numbers-card__tag {
	font-size: 1rem;
	font-weight: 800;
}

/* Paragraph / supporting text */
.tsc-numbers-section__intro,
.tsc-numbers-card__body,
.tsc-numbers-card__free-html,
.tsc-numbers-card__footnote {
font-weight: 400;
} 

  
/* ============================================================
SECTION
============================================================ */

.tsc-numbers-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.tsc-numbers-section *,
.tsc-numbers-section *::before,
.tsc-numbers-section *::after {
    box-sizing: border-box;
}

.tsc-numbers-section__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 32px;
}

.tsc-numbers-section__header {
    max-width: 900px;
    margin-bottom: 48px;
}

.tsc-numbers-section__kicker {
    margin-bottom: 14px;
    color: var(--tsc-blue);
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    line-height: 1.25;
    text-transform: uppercase;
}

.tsc-numbers-section__heading {
    margin: 0;
    color: var(--tsc-blue);
    font-size: clamp(2.4rem, 4.25vw, 4.08rem); /*was 3.65rem*/
    line-height: 1.06;
    letter-spacing: -0.025em;
}

.tsc-numbers-section__intro {
    max-width: 900px;
    margin-top: 24px;
    color: var(--tsc-text);
    font-size: 1.6rem;
    line-height: 1.65;
}

.tsc-numbers-section__intro > :first-child,
.tsc-numbers-card__body > :first-child,
.tsc-numbers-card__free-html > :first-child,
.tsc-numbers-card__footnote > :first-child {
    margin-top: 0;
}

.tsc-numbers-section__intro > :last-child,
.tsc-numbers-card__body > :last-child,
.tsc-numbers-card__free-html > :last-child,
.tsc-numbers-card__footnote > :last-child {
    margin-bottom: 0;
}

  
/* Dark section background text colors */

.tsc-section-bg--dark .tsc-numbers-section__kicker,
.tsc-section-bg--blue-gradient .tsc-numbers-section__kicker,
.tsc-section-bg--dark-circles .tsc-numbers-section__kicker {
	color: var(--tsc-gold);
}

.tsc-section-bg--dark .tsc-numbers-section__heading,
.tsc-section-bg--blue-gradient .tsc-numbers-section__heading,
.tsc-section-bg--dark-circles .tsc-numbers-section__heading,
.tsc-section-bg--dark .tsc-numbers-section__intro,
.tsc-section-bg--blue-gradient .tsc-numbers-section__intro,
.tsc-section-bg--dark-circles .tsc-numbers-section__intro {
	color: #fff;
}

/* ============================================================
SECTION BACKGROUNDS
============================================================ */

.tsc-section-bg--light {
    background: var(--tsc-light);
    color: var(--tsc-blue);
}
  
.tsc-section-bg--white {
	background: #ffffff;
  	color: var(--tsc-blue);
}

.tsc-section-bg--dark {
    background: var(--tsc-deep-blue);
    color: #fff;
}

/*.tsc-section-bg--blue-gradient {
    background: linear-gradient(
        135deg,
        var(--tsc-blue),
        rgba(0, 82, 150, 0.82)
    );
    color: #fff;
}*/
  
.tsc-section-bg--blue-gradient {
	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(38, 183, 243, 0.28) 0%,
			rgba(0, 120, 210, 0.18) 25%,
			rgba(0, 82, 150, 0.08) 48%,
			transparent 72%
		),
		#005296;

	color: #fff;
}

.tsc-section-bg--dark-circles {
    background:
        radial-gradient(
            circle at 90% 85%,
            rgba(255,255,255,.10) 0 120px,
            transparent 121px
        ),
        radial-gradient(
            circle at 90% 85%,
            transparent 0 165px,
            rgba(229,182,17,.14) 166px 230px,
            transparent 231px
        ),
        var(--tsc-blue);
        color: #fff;
}

.tsc-section-bg--light-circles {
    background:
    radial-gradient(
        circle at 90% 85%,
        rgba(0,82,150,.06) 0 120px,
        transparent 121px
    ),
    var(--tsc-light);
    color: var(--tsc-blue);
}

/* Dark section text */

:is(
    .tsc-section-bg--dark,
    .tsc-section-bg--blue-gradient,
    .tsc-section-bg--dark-circles
) .tsc-numbers-section__kicker {
    color: var(--tsc-gold);
}

:is(
    .tsc-section-bg--dark,
    .tsc-section-bg--blue-gradient,
    .tsc-section-bg--dark-circles
) :is(
    .tsc-numbers-section__heading,
    .tsc-numbers-section__intro
) {
    color: #fff;
}


/* ============================================================
CARD
============================================================ */

.tsc-numbers-card {
    position: relative;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    color: var(--tsc-blue);
    border: 1px solid rgba(0,82,150,.12);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,82,150,.08);
}

.tsc-numbers-card__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 28px;
}

.tsc-numbers-card__kicker {
    margin-bottom: 10px;
    color: var(--tsc-blue);
    font-size: 1rem;
    letter-spacing: 0.11em;
    line-height: 1.25;
    text-transform: uppercase;
}

.tsc-numbers-card__title {
    margin: 0;
    color: inherit;
    font-size: clamp(1.45rem, 2vw, 2.05rem);
    line-height: 1.12;
}

.tsc-numbers-card__body {
    margin-top: 14px;
    color: var(--tsc-text);
    font-size: 1.4rem;
    line-height: 1.55;
}


/* ============================================================
CARD TYPE VISIBILITY
============================================================ */

.tsc-numbers-card__number,
.tsc-numbers-card__free-html,
.tsc-numbers-card__data-source {
    display: none;
}

.tsc-numbers-card[data-card-type="number-callout"]
.tsc-numbers-card__number {
    display: flex;
}

.tsc-numbers-card[data-card-type="free-html"]
.tsc-numbers-card__free-html {
    display: block;
}

.tsc-numbers-card:is(
    [data-card-type="bar-chart"],
    [data-card-type="horizontal-bar"],
    [data-card-type="full-horizontal-bar"],
    [data-card-type="area-chart"],
    [data-card-type="donut-chart"],
    [data-card-type="comparison-horizontal-bar"],
    [data-card-type="results-list"]
) .tsc-numbers-card__data-source {
    display: block;
}

.tsc-numbers-card [hidden] {
    display: none !important;
}


/* ============================================================
BY THE NUMBERS
============================================================ */

.tsc-numbers-card__number {
    align-items: baseline;
    flex-wrap: nowrap;
    color: inherit;
    line-height: .95;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.tsc-numbers-card__number-prefix,
.tsc-numbers-card__number-value,
.tsc-numbers-card__number-suffix {
    color: inherit;
    font-size: clamp(2.9rem, 4vw, 4.25rem);
    line-height: .95;
}

/* Number appears above title */

.tsc-numbers-card[data-card-type="number-callout"]
.tsc-numbers-card__number {
    order: 1;
    margin-bottom: 12px;
}

.tsc-numbers-card[data-card-type="number-callout"]
.tsc-numbers-card__title {
    order: 2;
}

.tsc-numbers-card[data-card-type="number-callout"]
.tsc-numbers-card__body {
    order: 3;
}

.tsc-numbers-card[data-card-type="number-callout"]
.tsc-numbers-card__tag {
    order: 4;
    margin-top: auto;
}

.tsc-numbers-card[data-card-type="number-callout"]
.tsc-numbers-card__footnote {
    order: 5;
}


 /* ============================================================
CUSTOM CONTENT - NON-MILESTONE
============================================================ */

.tsc-numbers-card[data-card-type="free-html"]:not(
	[data-content-style="milestone"]
) {
	grid-column: 1 / -1 !important;
  	grid-row: auto !important;
  	align-self: start;
  	width: 100%;
  	height: auto !important;
  	min-height: 0 !important;
  	background: transparent;
  	border: 0;
  	box-shadow: none;
}
 
.tsc-numbers-card[data-card-type="free-html"]:not(
	[data-content-style="milestone"]
) .tsc-numbers-card__inner{
	height: auto;
  	min-height: 0;
}
  
.tsc-numbers-card[data-card-type="free-html"]:not(
	[data-content-style="milestone"]
) .tsc-numbers-card__free-html{
	margin: 10px 0 10px 0;
}
  
/* Custom Content font size - except Milestone */

.tsc-numbers-card[data-card-type="free-html"]:not(
	[data-content-style="milestone"]
) .tsc-numbers-card__free-html {
	font-size: 1.5rem;
}

/* Make nested HTML inherit the same size */

.tsc-numbers-card[data-card-type="free-html"]:not(
	[data-content-style="milestone"]
) .tsc-numbers-card__free-html * {
	font-size: inherit;
}
  
/* ============================================================
CUSTOM CONTENT TEXT COLORS
============================================================ */

/* Default / lighter section backgrounds */
.tsc-numbers-card[data-card-type="free-html"]
.tsc-numbers-card__free-html {
	color: var(--tsc-text);
}

/* Bold custom-content text on lighter backgrounds */
.tsc-numbers-card[data-card-type="free-html"]
.tsc-numbers-card__free-html :is(strong, b) {
	color: var(--tsc-blue);
}


/* Dark + Dark Circles sections */
:is(
	.tsc-section-bg--dark,
	.tsc-section-bg--dark-circles,
  	.tsc-section-bg--blue-gradient
) .tsc-numbers-card[data-card-type="free-html"]
.tsc-numbers-card__free-html {
	color: #fff;
}

/* Bold text stays white on dark backgrounds */
:is(
	.tsc-section-bg--dark,
	.tsc-section-bg--dark-circles,
  	.tsc-section-bg--blue-gradient
) .tsc-numbers-card[data-card-type="free-html"]
.tsc-numbers-card__free-html :is(strong, b) {
	color: #fff;
}
  
  
/* ============================================================
FREE HTML / DATA / CHARTS
============================================================ */

.tsc-numbers-card__free-html {
    width: 100%;
    /*margin-top: 18px;*/
}
  
/*.tsc-numbers-card[data-content-style="note"] {
	background:transparent;
  	box-shadow: none;
  	border: 1px solid rgba(0,82,150,.15);
  	
}
  
.tsc-numbers-card[data-content-style="note"]
.tsc-numbers-card__inner {
	padding: 14px 18px;
}*/
  
.tsc-numbers-card[data-card-type="free-html"][data-content-style="note"] {
	background: #fff !important;
	border: 1px solid rgba(0,82,150,.10) !important;
  	border-radius: 16px;
    box-shadow: none !important;
}
  
.tsc-numbers-card[data-card-type="free-html"][data-content-style="note"]
.tsc-numbers-card__inner {
	padding: 18px 22px;  
}

/* Note always has dark text because its background is white */
.tsc-numbers-card[data-card-type="free-html"][data-content-style="note"]
.tsc-numbers-card__free-html {
	color: var(--tsc-text) !imoprtant;  
}
  
.tsc-numbers-card[data-card-type="free-html"][data-content-style="note"]
.tsc-numbers-card__freehtml :is(strong, b) {
	color: var(--tsc-blue) !important;  
}
  
.tsc-numbers-card[data-content-style="milestone"] {
	height: 100%
  	background: #fff;
  	box-shadow: none;
}
 
.tsc-numbers-card[data-content-style="source"]
.tsc-numbers-card__inner {
	padding: 0;
}
  
.tsc-numbers-card[data-content-style="default"]
.tsc-numbers-card__inner {
	padding: 0;
}

.tsc-numbers-card__data-source {
    width: 100%;
    margin-top: 20px;
}

.tsc-numbers-card__chart {
    position: relative;
    width: 100%;
    min-height: 280px;
}

.tsc-numbers-card__canvas {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 100% !important;
}

.tsc-numbers-card__results-list {
    width: 100%;
}

  
/* =========================================================
TSC NUMBERS - SEGMENTED BAR
Used by Card Type: segmented-bar
========================================================= */

.tsc-segmented-bar {
	width: 100%;
	box-sizing: border-box;
}

.tsc-segmented-track {
	display: flex;
	width: 100%;
	height: 46px;
	margin: 25px 0 30px;
	overflow: hidden;
	border-radius: 12px;
	background: #e7e7e7;
}

.tsc-segmented-segment {
	display: block;
	height: 100%;
	flex: 0 0 auto;
}

.tsc-segmented-legend {
	width: 100%;
}

.tsc-segmented-item {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	margin-bottom: 18px;
}

.tsc-segmented-key {
	width: 14px;
	height: 14px;
	margin-top: 4px;
	border-radius: 2px;
}

.tsc-segmented-info {
	min-width: 0;
}

.tsc-segmented-label {
	color: #333;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.25;
}

.tsc-segmented-count {
	margin-top: 4px;
	color: #555;
	font-size: 14px;
	line-height: 1.25;
}

.tsc-segmented-percent {
	color: #13233b;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	text-align: right;
}

/* TSC segmented-bar colors */
.tsc-segmented-segment:nth-child(1),
.tsc-segmented-item:nth-child(1) .tsc-segmented-key {
	background: #005296;
}

.tsc-segmented-segment:nth-child(2),
.tsc-segmented-item:nth-child(2) .tsc-segmented-key {
	background: #4f9fc7;
}

.tsc-segmented-segment:nth-child(3),
.tsc-segmented-item:nth-child(3) .tsc-segmented-key {
	background: #e5b611;
}

.tsc-segmented-segment:nth-child(4),
.tsc-segmented-item:nth-child(4) .tsc-segmented-key {
	background: #78909c;
}

@media (max-width: 575.98px) {

	.tsc-segmented-track {
		height: 38px;
		margin: 20px 0 24px;
	}

	.tsc-segmented-label,
	.tsc-segmented-percent {
		font-size: 15px;
	}

	.tsc-segmented-count {
		font-size: 13px;
	}
}

  
/* =========================================================
SOURCE CARD 
========================================================= */

.tsc-numbers-card[data-card-type="source-card"] {
	border-top: 4px solid #005296;
}

.tsc-numbers-card[data-card-type="source-card"]
.tsc-numbers-card__inner {
	justify-content: flex-start;
}

.tsc-numbers-card[data-card-type="source-card"]
.tsc-numbers-card__kicker {
	margin-bottom: 8px;
}

.tsc-numbers-card[data-card-type="source-card"]
.tsc-numbers-card__title {
	margin-bottom: 10px;
}

.tsc-numbers-card[data-card-type="source-card"]
.tsc-numbers-card__body {
	margin-bottom: 20px;
}

.tsc-numbers-card__source-link-wrap {
	margin-top: auto;
	padding-top: 12px;
}

.tsc-numbers-card__source-link {
	color: #005296 !important;
	font-weight: 700;
	text-decoration: none !important;
}

.tsc-numbers-card__source-link:hover,
.tsc-numbers-card__source-link:focus {
	color: #003e7e !important;
	text-decoration: underline !important;
}
  
/* =========================================================
SOURCE CARD - ACCENT COLORS
========================================================= */

.tsc-numbers-card[data-card-type="source-card"].tsc-card-style--default,
.tsc-numbers-card[data-card-type="source-card"].tsc-card-style--blue {
	border-top-color: #005296;
}

.tsc-numbers-card[data-card-type="source-card"].tsc-card-style--gold {
	border-top-color: #E5B611;
}
  
/* ============================================================
TAG
============================================================ */

.tsc-numbers-card__tag {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 7px 12px;
    background: var(--tsc-blue-light);
    color: var(--tsc-blue);
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1.2;
}


/* 6-column and larger cards: tag upper-right */

.tsc-numbers-card:is(
    .tsc-col-span-6,
    .tsc-col-span-7,
    .tsc-col-span-8,
    .tsc-col-span-9,
    .tsc-col-span-10,
    .tsc-col-span-11,
    .tsc-col-span-12
) .tsc-numbers-card__tag {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 3;
    max-width: 42%;
    margin: 0;
}

.tsc-numbers-card:is(
    .tsc-col-span-6,
    .tsc-col-span-7,
    .tsc-col-span-8,
    .tsc-col-span-9,
    .tsc-col-span-10,
    .tsc-col-span-11,
    .tsc-col-span-12
) :is(
    .tsc-numbers-card__kicker,
    .tsc-numbers-card__title
    ) {
        padding-right: 38%;
}


/* ============================================================
FOOTNOTE
============================================================ */

.tsc-numbers-card__footnote {
    margin-top: 18px;
    padding-top: 14px;
    color: var(--tsc-text);
    border-top: 1px solid rgba(0,82,150,.12);
    font-size: 1.3rem;
    line-height: 1.5;
}


/* ============================================================
CARD STYLES
============================================================ */

.tsc-numbers-card[data-card-style="blue"] {
    border-top: 6px solid var(--tsc-blue);
}

.tsc-numbers-card[data-card-style="gold"] {
    border-top: 6px solid var(--tsc-gold);
}

.tsc-numbers-card[data-card-style="gold"]
.tsc-numbers-card__tag {
    background: var(--tsc-blue-light);
}


/* Dark */

.tsc-numbers-card[data-card-style="dark"] {
    background: var(--tsc-blue);
    color: #fff;
    border-color: var(--tsc-blue);
}


/* Transparent */

.tsc-numbers-card[data-card-style="transparent"] {
    background: rgba(255,255,255,.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 12px 30px rgba(0,82,150,.12);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}


/* Blue with Gold Accent */

.tsc-numbers-card[data-card-style="blue-gold"] {
    background: var(--tsc-blue);
    color: #fff;
    border-color: var(--tsc-blue);
    border-top: 6px solid var(--tsc-gold);
}


/* Dark / Transparent / Blue-Gold text */

.tsc-numbers-card:is(
    [data-card-style="dark"],
    [data-card-style="transparent"],
    [data-card-style="blue-gold"]
) :is(
    .tsc-numbers-card__body,
    .tsc-numbers-card__footnote,
    .tsc-numbers-card__free-html
) {
    color: #fff;
}

  
/* SOLID GOLD Gold background / Blue text */

.tsc-numbers-card[data-card-style="solid-gold"] {
	background: var(--tsc-gold);
	color: var(--tsc-blue);
	border-color: var(--tsc-gold);
}

.tsc-numbers-card[data-card-style="solid-gold"] :is(
	.tsc-numbers-card__kicker,
	.tsc-numbers-card__title,
	.tsc-numbers-card__body,
	.tsc-numbers-card__number,
	.tsc-numbers-card__number-prefix,
	.tsc-numbers-card__number-value,
	.tsc-numbers-card__number-suffix,
	.tsc-numbers-card__free-html,
	.tsc-numbers-card__footnote
) {
	color: var(--tsc-blue);
}

/* Keep normal blue-light tag treatment */

.tsc-numbers-card[data-card-style="solid-gold"]
.tsc-numbers-card__tag {
	background: var(--tsc-blue-light);
	color: var(--tsc-blue);
}


/* LEFT GOLD ACCENT */

.tsc-numbers-card[data-card-style="left-gold"] {
	background: #fff;
	color: var(--tsc-blue);
	border-left: 8px solid var(--tsc-gold);
}
  
/* Gold kicker */

.tsc-numbers-card:is(
    [data-card-style="dark"],
    [data-card-style="transparent"],
    [data-card-style="blue-gold"]
) .tsc-numbers-card__kicker {
    color: var(--tsc-gold);
}


/* Tag treatments */

.tsc-numbers-card[data-card-style="dark"]
.tsc-numbers-card__tag {
    background: #fff;
    color: var(--tsc-gold);
}

.tsc-numbers-card[data-card-style="transparent"]
.tsc-numbers-card__tag {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.tsc-numbers-card[data-card-style="blue-gold"]
.tsc-numbers-card__tag {
    background: var(--tsc-gold);
    color: var(--tsc-blue);
}


/* ============================================================
ACCESSIBILITY
============================================================ */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

  
/* ============================================================
TSC NUMBERS - SOURCE DATA TABLES
============================================================ */  

.tsc-numbers-data-tables {
	position: absolute;
  	width: 1px;
  	height: 1px;
  	margin: -1px;
  	padding: 0;
  	overflow: hidden;
  	clip: rect(0, 0, 0, 0);
  	white-space: nowrap;
  	border: 0;
}  
  
  

/* ============================================================
RESPONSIVE GRID
============================================================ */


/* ============================================================
BASE GRID / LARGE DESKTOP
1101px and above

- Column Span 1-12
- Row Span 1-4
============================================================ */

.tsc-numbers-section .tsc-numbers-grid {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	grid-auto-flow: dense !important;
	/*grid-auto-rows: minmax(180px, auto) !important;*/
  	grid-auto-rows: auto !important;
	gap: 24px !important;
	width: 100% !important;
	align-items: stretch !important;
}


/* ------------------------------------------------------------
COLUMN SPANS
------------------------------------------------------------ */

.tsc-col-span-1 { grid-column: span 1; }
.tsc-col-span-2 { grid-column: span 2; }
.tsc-col-span-3 { grid-column: span 3; }
.tsc-col-span-4 { grid-column: span 4; }
.tsc-col-span-5 { grid-column: span 5; }
.tsc-col-span-6 { grid-column: span 6; }
.tsc-col-span-7 { grid-column: span 7; }
.tsc-col-span-8 { grid-column: span 8; }
.tsc-col-span-9 { grid-column: span 9; }
.tsc-col-span-10 { grid-column: span 10; }
.tsc-col-span-11 { grid-column: span 11; }
.tsc-col-span-12 { grid-column: span 12; }


/* ------------------------------------------------------------
ROW SPANS
------------------------------------------------------------ */

.tsc-row-span-1 { grid-row: span 1; }
.tsc-row-span-2 { grid-row: span 2; }
.tsc-row-span-3 { grid-row: span 3; }
.tsc-row-span-4 { grid-row: span 4; }


/* ============================================================
MEDIUM / TABLET
768px - 1100px

Behavior:
- Cards originally 1-6 columns → 6 columns
- Cards originally 7-12 columns → full width
- Row spans become natural height

Example:
8 / 4 / 4
becomes
12
6 / 6
============================================================ */

@media (max-width: 1100px) and (min-width: 768px) {

	.tsc-numbers-section__inner {
		padding: 56px 24px;
	}
	
	.tsc-numbers-section__header {
		margin-bottom: 36px;
	}
	
	.tsc-numbers-section__heading {
		font-size: clamp(2.25rem, 5vw, 3.15rem);
	}
	
	.tsc-numbers-section .tsc-numbers-grid {
		gap: 20px !important;
	}


/* --------------------------------------------------------
SMALL / MEDIUM CARDS
Become half-width
-------------------------------------------------------- */

	.tsc-numbers-card:is(
		.tsc-col-span-1,
		.tsc-col-span-2,
		.tsc-col-span-3,
		.tsc-col-span-4,
		.tsc-col-span-5,
		.tsc-col-span-6
	) {
		grid-column: span 6 !important;
		grid-row: auto !important; 
		}


/* --------------------------------------------------------
LARGE CARDS
Become full-width
-------------------------------------------------------- */

	.tsc-numbers-card:is(
		.tsc-col-span-7,
		.tsc-col-span-8,
		.tsc-col-span-9,
		.tsc-col-span-10,
		.tsc-col-span-11,
		.tsc-col-span-12
	) {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		}
	
	
	.tsc-numbers-card__chart {
		min-height: 260px;
	}
}


/* ============================================================
MOBILE
767px and below

Behavior:
- Every Card becomes full width
- Row spans are removed
- Cards stack vertically
============================================================ */

@media (max-width: 767.98px) {

	.tsc-numbers-section__inner {
		padding: 40px 18px;
	}
	
	.tsc-numbers-section__header {
		margin-bottom: 28px;
	}
	
	.tsc-numbers-section__heading {
		font-size: clamp(2rem, 8vw, 2.65rem);
	}
	
	.tsc-numbers-section__intro {
		margin-top: 18px;
		font-size: 1rem;
	}
	
	.tsc-numbers-section .tsc-numbers-grid {
		gap: 16px !important;
	}


/* --------------------------------------------------------
ALL CARDS FULL WIDTH
-------------------------------------------------------- */

	.tsc-numbers-card {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		border-radius: 14px;
	}
	
	
	.tsc-numbers-card__inner {
		padding: 22px;
	}
	
	
	.tsc-numbers-card__number-prefix,
	.tsc-numbers-card__number-value,
	.tsc-numbers-card__number-suffix {
		font-size: clamp(2.6rem, 12vw, 3.65rem);
	}
	
	
	.tsc-numbers-card__chart {
		min-height: 240px;
	}


/* --------------------------------------------------------
LARGE-CARD TAGS
Return upper-right tags to normal flow on mobile
-------------------------------------------------------- */

	.tsc-numbers-card:is(
		.tsc-col-span-6,
		.tsc-col-span-7,
		.tsc-col-span-8,
		.tsc-col-span-9,
		.tsc-col-span-10,
		.tsc-col-span-11,
		.tsc-col-span-12
	) .tsc-numbers-card__tag {
		position: static;
		max-width: 100%;
		margin-top: auto;
		}
	
	
	/* Remove extra heading space that was reserved for tag */
	
	.tsc-numbers-card:is(
		.tsc-col-span-6,
		.tsc-col-span-7,
		.tsc-col-span-8,
		.tsc-col-span-9,
		.tsc-col-span-10,
		.tsc-col-span-11,
		.tsc-col-span-12
	) :is(
		.tsc-numbers-card__kicker,
		.tsc-numbers-card__title
	) {
		padding-right: 0;
		}
}


/* ============================================================
VERY SMALL MOBILE
Optional final refinement
============================================================ */

@media (max-width: 374.98px) {

	.tsc-numbers-section__inner {
		padding: 32px 14px;
	}
	
	.tsc-numbers-card__inner {
		padding: 18px;
	}
	
	.tsc-numbers-section .tsc-numbers-grid {
		gap: 14px !important;
	}
}



/* ============================================================
TSC BY THE NUMBERS - HERO BANNER
============================================================ */


/* ============================================================
1. HERO BASE
============================================================ */

.tsc-numbers-hero {
	position: relative !important;
	overflow: hidden !important;

	width: 100% !important;
	min-height: 720px !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #ffffff !important;
	background: var(--tsc-blue, #005296);

	box-sizing: border-box !important;
}


/* ============================================================
2. HERO BACKGROUND STYLES
============================================================ */

.tsc-hero-bg--blue {
	background: var(--tsc-blue, #005296) !important;
}

.tsc-hero-bg--blue-gradient {
	background:
		linear-gradient(
			120deg,
			#003f77 0%,
			#005296 46%,
			#0876d1 100%
		) !important;
}

.tsc-hero-bg--dark {
	background: #18212b !important;
}

.tsc-hero-bg--dark-circles {
	background:
		linear-gradient(
			120deg,
			#18212b 0%,
			#243342 100%
		) !important;
}

.tsc-hero-bg--light {
	background: var(--tsc-light, #f7f7f7) !important;
	color: var(--tsc-text, #525a61) !important;
}

.tsc-hero-bg--light-circles {
	background: #f7f7f7 !important;
	color: var(--tsc-text, #525a61) !important;
}


/* ============================================================
3. DECORATIVE HERO CIRCLE
============================================================ */

.tsc-numbers-hero::after {
	content: "" !important;

	position: absolute !important;
	right: -80px !important;
	bottom: -160px !important;

	width: 520px !important;
	height: 520px !important;

	border: 88px solid #e5b61121 !important;
	border-radius: 50% !important;

	pointer-events: none !important;

	z-index: 0 !important;
}


/* ============================================================
4. BACKGROUND OVERLAY ELEMENT
============================================================ */

.tsc-numbers-hero__overlay {
	position: absolute !important;
	inset: 0 !important;

	z-index: 1 !important;

	pointer-events: none !important;
}


/* ============================================================
5. HERO INNER LAYOUT
============================================================ */

.tsc-numbers-hero__inner {
	position: relative !important;

	z-index: 2 !important;

	display: grid !important;

	/*
	LEFT = hero text
	RIGHT = statistic cards
	*/
	grid-template-columns:
		minmax(470px, 0.92fr)
		minmax(0, 1.08fr) !important;

	align-items: center !important;

	gap: clamp(56px, 8vw, 130px) !important;

	width: 100% !important;
	max-width: none !important;

	min-height: 720px !important;

	margin: 0 auto !important;

	padding:
		100px
		clamp(24px, 6vw, 112px)
		84px !important;

	box-sizing: border-box !important;
}


/* ============================================================
6. HERO LEFT CONTENT
============================================================ */

.tsc-numbers-hero__content {
	position: relative !important;

	width: 100% !important;
	max-width: 620px !important;

	margin: 0 !important;
	padding: 0 !important;

	box-sizing: border-box !important;
}


/* ============================================================
7. HERO KICKER
============================================================ */

.tsc-numbers-hero__kicker {
	margin: 0 0 14px 0 !important;
	padding: 0 !important;

	color: var(--tsc-gold, #E5B611) !important;

	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;

	letter-spacing: .15em !important;

	text-transform: uppercase !important;
}


/* ============================================================
8. HERO MAIN HEADING
============================================================ */

.tsc-numbers-hero__heading {
	width: 100% !important;
	max-width: 680px !important;

	margin: 12px 0 24px 0 !important;
	padding: 0 !important;

	color: #ffffff !important;

	font-size: clamp(54px, 4.7vw, 84px) !important;
	font-weight: 700 !important;

	line-height: .98 !important;

	letter-spacing: -.04em !important;

	text-wrap: balance;
}


/* ============================================================
9. HERO INTRO / TEXT
============================================================ */

.tsc-numbers-hero__text,
.tsc-numbers-hero__intro {
	width: 100% !important;
	max-width: 600px !important;

	margin: 24px 0 0 0 !important;
	padding: 0 !important;

	color: #ffffff !important;

	font-size: 19px !important;
	font-weight: 400 !important;

	line-height: 1.55 !important;
}


/* Handle HTML paragraphs inserted by Terminalfour */

.tsc-numbers-hero__text p,
.tsc-numbers-hero__intro p {
	margin-top: 0 !important;

	color: inherit !important;

	font-size: inherit !important;
	line-height: inherit !important;
}

.tsc-numbers-hero__text p:last-child,
.tsc-numbers-hero__intro p:last-child {
	margin-bottom: 0 !important;
}


/* ============================================================
10. HERO BUTTON AREA
============================================================ */

.tsc-numbers-hero__actions {
	display: flex !important;
	align-items: center !important;

	margin: 28px 0 0 0 !important;
	padding: 0 !important;
}


/* ============================================================
11. HERO BUTTON
normal = no underline
hover = underline
============================================================ */

.tsc-numbers-hero__button {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	min-height: 44px !important;

	margin: 0 !important;

	padding: 12px 22px !important;

	border: 0 !important;
	border-bottom: 0 !important;

	border-radius: 3px !important;

	background: var(--tsc-gold, #E5B611) !important;

	color: var(--tsc-blue, #005296) !important;

	font-size: 13px !important;
	font-weight: 800 !important;

	line-height: 1 !important;

	text-decoration: none !important;
	text-transform: uppercase !important;

	transition:
		transform .2s ease,
		box-shadow .2s ease !important;
}


/* Normal + visited */

.tsc-numbers-hero__button:link,
.tsc-numbers-hero__button:visited {
	color: #ffffff !important;

	text-decoration: none !important;

	border-bottom: 0 !important;
}


/* Hover + keyboard focus */

.tsc-numbers-hero__button:hover,
.tsc-numbers-hero__button:focus {
	/*color: #ffffff !important;*/
  	color: var(--tsc-blue, #005296) !important;

	/*text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;*/

	border-bottom: 0 !important;

	transform: translateY(-2px) !important;

	box-shadow:
		0 8px 18px rgba(0, 0, 0, .18) !important;
}


/* Prevent site-wide link effects */

.tsc-numbers-hero__button::before,
.tsc-numbers-hero__button::after {
	display: none !important;

	content: none !important;
}


/* ============================================================
12. OPTIONAL LEFT HTML / REPORTING NOTE
============================================================ */

.tsc-numbers-hero__left-html {
	width: 100% !important;
	max-width: 600px !important;

	margin: 20px 0 0 0 !important;
	padding: 0 !important;

	color: rgba(255, 255, 255, .85) !important;

	font-size: 12px !important;
	line-height: 1.5 !important;
}

.tsc-numbers-hero__left-html p {
	margin: 0 !important;

	color: inherit !important;

	font-size: inherit !important;
	line-height: inherit !important;
}


/* ============================================================
13. HERO RIGHT STAT GRID
============================================================ */

.tsc-numbers-hero__stats {
	position: relative !important;

	display: grid !important;

	grid-template-columns:
		repeat(2, minmax(0, 1fr)) !important;

	gap: 14px !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	align-self: center !important;

	box-sizing: border-box !important;
}


/* First stat spans entire top row */

.tsc-numbers-hero__stat:first-child,
.tsc-numbers-hero__stat--1 {
	grid-column: 1 / -1 !important;
}


/* ============================================================
14. STAT CARDS
============================================================ */

.tsc-numbers-hero__stat {
	position: relative !important;

	width: 100% !important;
	min-width: 0 !important;

	min-height: 174px !important;

	margin: 0 !important;

	padding: 24px !important;

	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;

	border:
		1px solid rgba(255, 255, 255, .20) !important;

	border-radius: 18px !important;

	background:
		linear-gradient(
			135deg,
			rgba(19, 133, 226, .55),
			rgba(0, 82, 150, .38)
		) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .08) !important;

	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);

	box-sizing: border-box !important;

	overflow: hidden !important;
}


/* ============================================================
15. TOP STAT CARD
============================================================ */

.tsc-numbers-hero__stat--1 {
	min-height: 174px !important;
}


/* ============================================================
16. THIRD / GOLD STAT CARD
Supports both nth-child and explicit class
============================================================ */

.tsc-numbers-hero__stat:nth-child(3),
.tsc-numbers-hero__stat--3 {
	background:
		var(--tsc-gold, #E5B611) !important;

	border-color:
		var(--tsc-gold, #E5B611) !important;

	color:
		var(--tsc-blue, #005296) !important;
}


/* ============================================================
17. STAT KICKER
============================================================ */

.tsc-numbers-hero__stat-kicker {
	margin: 0 0 7px 0 !important;
	padding: 0 !important;

	color: var(--tsc-gold, #E5B611) !important;

	font-size: 12px !important;
	font-weight: 800 !important;

	line-height: 1.2 !important;

	letter-spacing: .015em !important;

	text-transform: uppercase !important;
}


/* ============================================================
18. STAT VALUE
============================================================ */

.tsc-numbers-hero__stat-value {
	margin: 8px 0 6px 0 !important;
	padding: 0 !important;

	color: #ffffff !important;

	font-size:
		clamp(36px, 4vw, 60px) !important;

	font-weight: 600 !important;

	line-height: 1 !important;

	letter-spacing: -.025em !important;
}


/* ============================================================
19. STAT DESCRIPTION
============================================================ */

.tsc-numbers-hero__stat-text {
	margin: 10px 0 0 0 !important;
	padding: 0 !important;

	color:
		rgba(255, 255, 255, .92) !important;

	font-size: 12px !important;

	line-height: 1.45 !important;
}

.tsc-numbers-hero__stat-text p {
	margin: 0 !important;

	color: inherit !important;

	font-size: inherit !important;
	line-height: inherit !important;
}


/* ============================================================
20. GOLD THIRD STAT TYPOGRAPHY
============================================================ */

.tsc-numbers-hero__stat:nth-child(3)
.tsc-numbers-hero__stat-kicker,

.tsc-numbers-hero__stat:nth-child(3)
.tsc-numbers-hero__stat-value,

.tsc-numbers-hero__stat:nth-child(3)
.tsc-numbers-hero__stat-text,

.tsc-numbers-hero__stat--3
.tsc-numbers-hero__stat-kicker,

.tsc-numbers-hero__stat--3
.tsc-numbers-hero__stat-value,

.tsc-numbers-hero__stat--3
.tsc-numbers-hero__stat-text {
	color:
		var(--tsc-blue, #005296) !important;
}


/* ============================================================
21. LIGHT BACKGROUND TEXT COLORS
============================================================ */

:is(
	.tsc-hero-bg--light,
	.tsc-hero-bg--light-circles
)
.tsc-numbers-hero__heading {
	color:
		var(--tsc-blue, #005296) !important;
}


:is(
	.tsc-hero-bg--light,
	.tsc-hero-bg--light-circles
)
.tsc-numbers-hero__text,

:is(
	.tsc-hero-bg--light,
	.tsc-hero-bg--light-circles
)
.tsc-numbers-hero__intro {
	color:
		var(--tsc-text, #525a61) !important;
}


:is(
	.tsc-hero-bg--light,
	.tsc-hero-bg--light-circles
)
.tsc-numbers-hero__left-html {
	color:
		var(--tsc-text, #525a61) !important;
}


/* ============================================================
22. CUSTOM BACKGROUND IMAGE
============================================================ */

.tsc-hero-bg--custom-image {
	background-position: center center !important;

	background-repeat: no-repeat !important;

	background-size: cover !important;
}


/* ============================================================
23. CUSTOM IMAGE OVERLAYS
============================================================ */

.tsc-numbers-hero[
	data-background-style="custom-image"
][
	data-background-overlay="dark"
]::before,

.tsc-numbers-hero[
	data-background-style="custom-image"
][
	data-background-overlay="blue"
]::before,

.tsc-numbers-hero[
	data-background-style="custom-image"
][
	data-background-overlay="blue-gradient"
]::before {

	content: "" !important;

	position: absolute !important;

	inset: 0 !important;

	z-index: 1 !important;

	pointer-events: none !important;
}


/* No overlay */

.tsc-numbers-hero[
	data-background-style="custom-image"
][
	data-background-overlay="none"
]::before {
	content: none !important;
}


/* Dark overlay */

.tsc-numbers-hero[
	data-background-style="custom-image"
][
	data-background-overlay="dark"
]::before {
	background:
		rgba(0, 0, 0, .55) !important;
}


/* Blue overlay */

.tsc-numbers-hero[
	data-background-style="custom-image"
][
	data-background-overlay="blue"
]::before {
	background:
		rgba(0, 82, 150, .72) !important;
}


/* Blue gradient overlay */

.tsc-numbers-hero[
	data-background-style="custom-image"
][
	data-background-overlay="blue-gradient"
]::before {

	background:
		linear-gradient(
			110deg,
			rgba(0, 55, 105, .90),
			rgba(0, 82, 150, .70),
			rgba(0, 118, 209, .55)
		) !important;
}


/* ============================================================
24. LARGE DESKTOP / 4K
1920px+
============================================================ */

@media (min-width: 1920px) {

	.tsc-numbers-hero__inner {
		padding-left:
			clamp(112px, 7vw, 170px) !important;

		padding-right:
			clamp(112px, 7vw, 170px) !important;
	}


	.tsc-numbers-hero__content {
		max-width: 680px !important;
	}


	.tsc-numbers-hero__stats {
		max-width: 900px !important;

		justify-self: end !important;
	}
}


/* ============================================================
25. TABLET / SMALL DESKTOP
768px - 1199px
============================================================ */

@media (max-width: 1199px) {

	.tsc-numbers-hero {
		min-height: auto !important;
	}


	.tsc-numbers-hero__inner {
		min-height: auto !important;

		padding:
			80px
			48px
			72px !important;

		grid-template-columns:
			minmax(360px, .9fr)
			minmax(0, 1.1fr) !important;

		gap: 48px !important;
	}


	.tsc-numbers-hero__heading {
		font-size:
			clamp(46px, 5vw, 64px) !important;
	}


	.tsc-numbers-hero__text,
	.tsc-numbers-hero__intro {
		font-size: 17px !important;
	}


	.tsc-numbers-hero__stat {
		padding: 22px !important;
	}
}


/* ============================================================
26. TABLET PORTRAIT
<= 991px
============================================================ */

@media (max-width: 991px) {

	.tsc-numbers-hero__inner {
		padding:
			70px
			40px
			70px !important;

		grid-template-columns:
			1fr !important;

		gap: 55px !important;
	}


	.tsc-numbers-hero__content {
		width: 100% !important;

		max-width: 680px !important;
	}


	.tsc-numbers-hero__heading {
		max-width: 650px !important;

		font-size:
			clamp(48px, 7vw, 68px) !important;
	}


	.tsc-numbers-hero__text,
	.tsc-numbers-hero__intro {
		max-width: 620px !important;
	}


	.tsc-numbers-hero__stats {
		width: 100% !important;
	}
}


/* ============================================================
27. MOBILE / SMALL TABLET
<= 767.98px
============================================================ */

@media (max-width: 767.98px) {

	.tsc-numbers-hero {
		min-height: 0 !important;

		padding: 0 !important;
	}


	.tsc-numbers-hero__inner {
		width: 100% !important;

		min-height: auto !important;

		padding:
			56px
			24px
			56px !important;

		grid-template-columns:
			1fr !important;

		gap: 42px !important;
	}


	.tsc-numbers-hero__content {
		width: 100% !important;

		max-width: none !important;
	}


	.tsc-numbers-hero__kicker {
		font-size: 11px !important;
	}


	.tsc-numbers-hero__heading {
		width: 100% !important;

		max-width: none !important;

		margin:
			10px
			0
			20px
			0 !important;

		font-size:
			clamp(42px, 12vw, 58px) !important;

		line-height: 1 !important;
	}


	.tsc-numbers-hero__text,
	.tsc-numbers-hero__intro {
		width: 100% !important;

		max-width: none !important;

		margin-top: 20px !important;

		font-size: 17px !important;

		line-height: 1.5 !important;
	}


	.tsc-numbers-hero__actions {
		margin-top: 24px !important;
	}


	.tsc-numbers-hero__left-html {
		margin-top: 20px !important;

		font-size: 10px !important;
	}


	.tsc-numbers-hero__stats {
		width: 100% !important;

		grid-template-columns:
			1fr !important;

		gap: 14px !important;
	}


	.tsc-numbers-hero__stat:first-child,
	.tsc-numbers-hero__stat--1,
	.tsc-numbers-hero__stat--2,
	.tsc-numbers-hero__stat--3 {
		grid-column: auto !important;
	}


	.tsc-numbers-hero__stat {
		width: 100% !important;

		min-height: 145px !important;

		padding:
			24px
			22px !important;
	}


	.tsc-numbers-hero__stat-value {
		font-size:
			clamp(38px, 12vw, 52px) !important;
	}


	.tsc-numbers-hero::after {
		right: -150px !important;

		bottom: -150px !important;

		width: 300px !important;

		height: 300px !important;

		border-width: 55px !important;
	}
}


/* ============================================================
28. VERY SMALL MOBILE
<= 374.98px
============================================================ */

@media (max-width: 374.98px) {

	.tsc-numbers-hero__inner {
		padding:
			48px
			18px
			48px !important;
	}


	.tsc-numbers-hero__heading {
		font-size: 2.35rem !important;
	}


	.tsc-numbers-hero__text,
	.tsc-numbers-hero__intro {
		font-size: 16px !important;
	}


	.tsc-numbers-hero__stat {
		padding: 20px !important;

		border-radius: 14px !important;
	}


	.tsc-numbers-hero__button {
		padding:
			11px
			18px !important;

		font-size: 12px !important;
	}
}




  
  
  
  
/* =========================================================
   TSC NUMBERS - SEGMENTED BAR
   Custom Gender / Citizenship Visualization
   ========================================================= */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-bar {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 250px !important;
  overflow: visible !important;
  visibility: visible !important;
  box-sizing: border-box !important;
}


/* SEGMENTED BAR TRACK */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-track {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: none !important;
  margin: 25px 0 30px 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #e7e7e7 !important;
  box-sizing: border-box !important;
}


/* INDIVIDUAL BAR SEGMENTS */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-segment {
  display: block !important;
  position: relative !important;
  height: 46px !important;
  min-height: 46px !important;
  flex-shrink: 0 !important;
}


/* LEGEND */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-legend {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 150px !important;
  overflow: visible !important;
}


/* EACH LEGEND ROW */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-item {
  display: grid !important;
  position: relative !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  column-gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}


/* COLOR SQUARE */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-key {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  margin-top: 4px !important;
  border-radius: 2px !important;
}


/* LABEL / COUNT WRAPPER */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-info {
  display: block !important;
  position: relative !important;
  min-width: 0 !important;
}


/* LABEL */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-label {
  display: block !important;
  color: #333333 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}


/* STUDENT COUNT */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-count {
  display: block !important;
  margin-top: 4px !important;
  color: #555555 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}


/* PERCENTAGE */

.tsc-numbers-card[data-card-type="segmented-bar"] .tsc-segmented-percent {
  display: block !important;
  color: #13233b !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: right !important;
  white-space: nowrap !important;
}


/* =========================================================
   SEGMENT COLORS
   ========================================================= */

.tsc-numbers-card[data-card-type="segmented-bar"]
.tsc-segmented-segment:nth-child(1),
.tsc-numbers-card[data-card-type="segmented-bar"]
.tsc-segmented-item:nth-child(1) .tsc-segmented-key {
  background: #005296 !important;
}

.tsc-numbers-card[data-card-type="segmented-bar"]
.tsc-segmented-segment:nth-child(2),
.tsc-numbers-card[data-card-type="segmented-bar"]
.tsc-segmented-item:nth-child(2) .tsc-segmented-key {
  background: #4f9fc7 !important;
}

.tsc-numbers-card[data-card-type="segmented-bar"]
.tsc-segmented-segment:nth-child(3),
.tsc-numbers-card[data-card-type="segmented-bar"]
.tsc-segmented-item:nth-child(3) .tsc-segmented-key {
  background: #e5b611 !important;
}

.tsc-numbers-card[data-card-type="segmented-bar"]
.tsc-segmented-segment:nth-child(4),
.tsc-numbers-card[data-card-type="segmented-bar"]
.tsc-segmented-item:nth-child(4) .tsc-segmented-key {
  background: #78909c !important;
}
  
/* =========================================================
   SEGMENTED BAR - SHOW DATA SOURCE CONTAINER
   ========================================================= */

.tsc-numbers-card[data-card-type="segmented-bar"]
.tsc-numbers-card__data-source {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}
  

/* =========================================================
HIDE TSC NUMBERS DATA SOURCE TABLES
Keep tables in DOM for JavaScript, but do not display them
========================================================= */

.tsc-numbers-data-table {
	display: none !important;
}
  
  
/* =========================================================
TOGGLE HORIZONTAL BAR
========================================================= */

.tsc-toggle-horizontal-bar {
	width: 100%;
	position: relative;
}

.tsc-toggle-horizontal-bar[hidden] {
	display: none !important;
}


/* HEADER / CONTROLS */

.tsc-toggle-horizontal-bar__controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0 0 28px 0;
}

.tsc-toggle-horizontal-bar__button {
	appearance: none;
	border: 1px solid rgba(0, 82, 150, 0.18);
	background: #ffffff;
	color: #0b2948;
	padding: 12px 22px;
	min-height: 46px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition:
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease;
}

.tsc-toggle-horizontal-bar__button:first-child {
	border-radius: 9px 0 0 9px;
}

.tsc-toggle-horizontal-bar__button:last-child {
	border-radius: 0 9px 9px 0;
}

.tsc-toggle-horizontal-bar__button.is-active {
	background: #005296;
	border-color: #005296;
	color: #ffffff;
}

.tsc-toggle-horizontal-bar__button:focus-visible {
	outline: 3px solid #E5B611;
	outline-offset: 3px;
}


/* TITLE */

.tsc-toggle-horizontal-bar__title {
	color: #0b2948;
	margin: 0 0 24px 0;
}


/* CHART */

.tsc-toggle-horizontal-bar__chart {
	width: 100%;
}


/* INDIVIDUAL ROW */

.tsc-toggle-horizontal-bar__row {
	display: grid;
	grid-template-columns: minmax(190px, 260px) 1fr;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.tsc-toggle-horizontal-bar__label {
	color: #0b2948;
	font-weight: 700;
	line-height: 1.25;
}


/* BAR TRACK */

.tsc-toggle-horizontal-bar__track {
	width: 100%;
	height: 44px;
	background: rgba(0, 82, 150, 0.08);
	border-radius: 0 8px 8px 0;
	overflow: hidden;
}


/* ACTUAL BAR */

.tsc-toggle-horizontal-bar__bar {
	height: 100%;
	min-width: 1px;
  	max-width: 100%
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: linear-gradient(
		90deg,
		#003e7e 0%,
		#005296 100%
	);
	border-radius: 0 8px 8px 0;
	transition: width .35s ease;
  
  	position: relative;
}


/* VALUE INSIDE BAR */

.tsc-toggle-horizontal-bar__value {
	/*color: #ffffff;
	font-weight: 800;
	padding: 0 12px;
	white-space: nowrap;*/
  
  	position: absolute;
  	right: 12px;
  	top: 50%;
  	transform: translateY(-50%);
  	color: #ffffff;
  	font-weight: 800;
  	white-space: nowrap;
}

/* =========================================
TOGGLE HORIZONTAL BAR - FOOTNOTE
========================================= */

.tsc-toggle-horizontal-bar__footnote {
	margin-top: 22px;
	font-size: 1.3rem;
	line-height: 1.5;
	color: #525a61;
}

.tsc-toggle-horizontal-bar__footnote p {
	margin: 0;
}

.tsc-toggle-horizontal-bar__footnote[hidden] {
	display: none !important;
}

.tsc-toggle-horizontal-bar__footnote-sources {
	display: none !important;
}
  

/* MOBILE */

@media (max-width: 767px) {

	.tsc-toggle-horizontal-bar__controls {
		justify-content: stretch;
	}

	.tsc-toggle-horizontal-bar__button {
		flex: 1 1 50%;
	}

	.tsc-toggle-horizontal-bar__row {
		grid-template-columns: 1fr;
		gap: 8px;
		margin-bottom: 22px;
	}

	.tsc-toggle-horizontal-bar__track {
		height: 42px;
	}

}
/* =========================================================
DONUT CHART SIZE
========================================================= */

.tsc-card-type--donut-chart .tsc-numbers-card__chart {
	width: 100% !important;
	height: 300px !important;
	min-height: 0 !important;
	max-height: 300px !important;

	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.tsc-card-type--donut-chart .tsc-numbers-card__chart canvas {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 300px !important;
}


/* ============================================================
   TSC BY THE NUMBERS - BOTTOM BAR
   ============================================================ */

.tsc-numbers-closing-bar {
	width: 100% !important;
	margin: 0 !important;
	padding: 28px 40px !important;
	box-sizing: border-box !important;
	background: #005296 !important;
	color: #ffffff !important;
}

.tsc-numbers-closing-bar__inner {
	width: 100% !important;
	max-width: 1600px !important;
	margin: 0 auto !important;

	display: grid !important;
	grid-template-columns: 1fr 1.5fr 1fr !important;
	align-items: center !important;
	gap: 30px !important;
}


/* LEFT
============================================================ */

.tsc-numbers-closing-bar__left {
	text-align: left !important;
	color: #ffffff !important;
}

.tsc-numbers-closing-bar__left strong {
	display: block !important;
	margin: 0 0 5px 0 !important;

	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

.tsc-numbers-closing-bar__left span {
	display: block !important;

	color: rgba(255,255,255,.85) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}


/* CENTER
============================================================ */

.tsc-numbers-closing-bar__center {
	color: rgba(255,255,255,.85) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	text-align: center !important;
}


/* RIGHT / BACK TO TOP
============================================================ */

.tsc-numbers-closing-bar__right {
	text-align: right !important;
}

.tsc-numbers-closing-bar__right a {
	display: inline-block !important;

	color: #E5B611 !important;
	font-size: 14px !important;
	font-weight: 700 !important;

	text-decoration: none !important;

	transition:
		color .2s ease,
		transform .2s ease !important;
}

.tsc-numbers-closing-bar__right a:hover,
.tsc-numbers-closing-bar__right a:focus {
	color: #ffffff !important;
	text-decoration: underline !important;
	transform: translateY(-2px) !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 991.98px) {

	.tsc-numbers-closing-bar {
		padding: 25px 24px !important;
	}

	.tsc-numbers-closing-bar__inner {
		grid-template-columns: 1fr auto !important;
		gap: 18px 30px !important;
	}

	.tsc-numbers-closing-bar__center {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		text-align: left !important;
	}

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 575.98px) {

	.tsc-numbers-closing-bar {
		padding: 24px 18px !important;
	}

	.tsc-numbers-closing-bar__inner {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 14px !important;
	}

	.tsc-numbers-closing-bar__center {
		text-align: left !important;
	}

	.tsc-numbers-closing-bar__right {
		width: 100% !important;
		text-align: left !important;
	}

}


/* ============================================================
   SMOOTH BACK-TO-TOP
   ============================================================ */

html {
	scroll-behavior: smooth;
}