html {
	font-size: 14px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

.bg-gray-lightest {
	background-color: #f8f9fa !important;
}

.cursor-pointer {
	cursor: pointer;
}

.top-color {
	border-top: 2px solid rgba(56, 92, 180, 1) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-check {
}

html {
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
	text-align: start;
}

/* ===================================================================
   3D WEALTH BRAND THEME - BOOTSTRAP 5.3 OVERRIDES
   =================================================================== */
:root {
	/* ===== PRIMARY BRAND COLOR: #4580AD (Blue) ===== */
	--bs-primary: #4580AD;
	--bs-primary-rgb: 69, 128, 173;
	--primary-color: #4580AD;
	/* ===== SECONDARY BRAND COLOR: #A0C3E5 (Light Blue) ===== */
	--bs-secondary: #A0C3E5;
	--bs-secondary-rgb: 160, 195, 229;
	--secondary-color: #A0C3E5;
	/* Primary Variations */
	--bs-primary-bg-subtle: #d4e4f1;
	--bs-primary-border-subtle: #a8c9df;
	--bs-primary-text-emphasis: #2f5977;
	/* Secondary Variations */
	--bs-secondary-bg-subtle: #e8f1f8;
	--bs-secondary-border-subtle: #c4d9ec;
	--bs-secondary-text-emphasis: #6fa0cc;
	/*primary navy*/
	--bs-primary-navy-rgb: 26, 42, 76;
	--bs-primary-navy: #1A2A4C;
	/* Link Colors */
	--bs-link-color: #4580AD;
	--bs-link-color-rgb: 69, 128, 173;
	--bs-link-hover-color: #3a6d94;
	--bs-link-hover-color-rgb: 58, 109, 148;
	/* Focus Ring (for accessibility) */
	--bs-focus-ring-width: 0.25rem;
	--bs-focus-ring-opacity: 0.25;
	--bs-focus-ring-color: rgba(69, 128, 173, 0.25);
	/*Present Colors*/
	--present-color: #4559AD;
	--present-rgb: 69, 89, 173;
	/*Future Colors*/
	--future-color: #364C1A;
	--future-rgb: 64, 76, 24;
	/* 3D Wealth Dimension Colors */
	--dimension-foundational: #EAAD55;
	--dimension-foundational-rgb: 234, 173, 85;
	--dimension-intellectual: #801423;
	--dimension-intellectual-rgb: 128, 20, 35;
	--dimension-financial: #578662;
	--dimension-financial-rgb: 87, 134, 98;
	/* Standard Transitions */
	--transition-fast: all 0.2s ease;
	--transition-smooth: all 0.3s ease;
	--transition-progress: width 1s ease-out;
	/* ===== BODY & TEXT COLORS ===== */
	--bs-body-color: #212529;
	--bs-body-color-rgb: 33, 37, 41;
	--bs-body-bg: #ffffff;
	--bs-body-bg-rgb: 255, 255, 255;
	--bs-emphasis-color: #000000;
	--bs-emphasis-color-rgb: 0, 0, 0;
	--bs-secondary-color: #6c757d;
	--bs-secondary-color-rgb: 108, 117, 125;
	--bs-secondary-bg: #e9ecef;
	--bs-secondary-bg-rgb: 233, 236, 239;
	--bs-tertiary-color: rgba(33, 37, 41, 0.5);
	--bs-tertiary-color-rgb: 33, 37, 41;
	--bs-tertiary-bg: #f8f9fa;
	--bs-tertiary-bg-rgb: 248, 249, 250;
	/* ===== BORDER COLORS ===== */
	--bs-border-color: #dee2e6;
	--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
	/* ===== HEADING COLORS ===== */
	--bs-heading-color: #212529;
	/* ===== CODE COLORS ===== */
	--bs-code-color: #d63384;
	--bs-highlight-bg: #fff3cd;
	/* ===== FORM COLORS ===== */
	--bs-form-valid-color: #198754;
	--bs-form-valid-border-color: #198754;
	--bs-form-invalid-color: #dc3545;
	--bs-form-invalid-border-color: #dc3545;
	--bs-success: #198754;
	--bs-success-rgb: 25, 135, 84;
	--success-color: #38A169;
	--text-muted: #718096;
}

/* ===================================================================
   BUTTON COMPONENT OVERRIDES - PRIMARY
   =================================================================== */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #4580AD;
	--bs-btn-border-color: #4580AD;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #3a6d94;
	--bs-btn-hover-border-color: #356687;
	--bs-btn-focus-shadow-rgb: 69, 128, 173;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #356687;
	--bs-btn-active-border-color: #2f5977;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #4580AD;
	--bs-btn-disabled-border-color: #4580AD;
}

/* ===================================================================
   BUTTON COMPONENT OVERRIDES - OUTLINE PRIMARY
   =================================================================== */
.btn-outline-primary {
	--bs-btn-color: #4580AD;
	--bs-btn-border-color: #4580AD;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #4580AD;
	--bs-btn-hover-border-color: #4580AD;
	--bs-btn-focus-shadow-rgb: 69, 128, 173;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #4580AD;
	--bs-btn-active-border-color: #4580AD;
	--bs-btn-disabled-color: #4580AD;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #4580AD;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(69, 128, 173, 0.3);
}

.btn-primary:active {
	transform: translateY(0);
}

/* ===================================================================
   LINK COLORS
   =================================================================== */
.link-primary {
	color: #4580AD !important;
	text-decoration-color: #4580AD !important;
}

	.link-primary:hover,
	.link-primary:focus {
		color: #3a6d94 !important;
		text-decoration-color: #3a6d94 !important;
	}

/* ===================================================================
   TEXT UTILITIES
   =================================================================== */
.text-primary {
	--bs-text-opacity: 1;
	color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.text-primary-emphasis {
	color: #2f5977 !important;
}

.text-secondary {
	--bs-text-opacity: 1;
	color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

.text-secondary-emphasis {
	color: #6fa0cc !important;
}

.text-primary-navy {
	color: rgb(var(--bs-primary-navy-rgb));
}
/* ===================================================================
   BACKGROUND UTILITIES
   =================================================================== */
.bg-primary {
	--bs-bg-opacity: 1;
	background-color: rgba(69, 128, 173, var(--bs-bg-opacity)) !important;
}

.bg-primary-subtle {
	background-color: #d4e4f1 !important;
}

.bg-secondary {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary-subtle {
	background-color: #e8f1f8 !important;
}

.bg-secondary-rgba {
	background-color: rgb(var(--bs-secondary-color-rgb),.5) !important;
}

.bg-primary-navy {
	background-color: var(--bs-primary-navy) !important;
}

.bg-muted {
	background-color: var(--text-muted) !important;
}
/* ===================================================================
   BORDER UTILITIES
   =================================================================== */
.border-primary {
	--bs-border-opacity: 1;
	border-color: rgba(69, 128, 173, var(--bs-border-opacity)) !important;
}

.border-primary-subtle {
	border-color: #a8c9df !important;
}

.border-secondary {
	--bs-border-opacity: 1;
	border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}

.border-secondary-subtle {
	border-color: #c4d9ec !important;
}

.border-2px {
	border-width: 2px;
}

/* ===================================================================
   ALERT COMPONENTS
   =================================================================== */
.alert-primary {
	--bs-alert-color: #2f5977;
	--bs-alert-bg: #d4e4f1;
	--bs-alert-border-color: #a8c9df;
	--bs-alert-link-color: #264860;
}

.alert-secondary {
	--bs-alert-color: #6fa0cc;
	--bs-alert-bg: #e8f1f8;
	--bs-alert-border-color: #c4d9ec;
	--bs-alert-link-color: #5a85a8;
}

/* ===================================================================
   BADGE COMPONENTS
   =================================================================== */
.badge.bg-primary {
	background-color: #4580AD !important;
}

.badge.text-bg-primary {
	color: #fff !important;
	background-color: #4580AD !important;
}

.badge.bg-secondary {
	background-color: #A0C3E5 !important;
	color: #000 !important;
}

.badge.text-bg-secondary {
	color: #000 !important;
	background-color: #A0C3E5 !important;
}

/* ===================================================================
   LIST GROUP COMPONENTS
   =================================================================== */
.list-group-item-primary {
	--bs-list-group-color: #2f5977;
	--bs-list-group-bg: #d4e4f1;
	--bs-list-group-border-color: #a8c9df;
	--bs-list-group-action-hover-color: #2f5977;
	--bs-list-group-action-hover-bg: #c4d9ec;
	--bs-list-group-action-active-color: #fff;
	--bs-list-group-action-active-bg: #4580AD;
	--bs-list-group-active-color: #fff;
	--bs-list-group-active-bg: #4580AD;
	--bs-list-group-active-border-color: #4580AD;
}

.list-group-item-secondary {
	--bs-list-group-color: #6fa0cc;
	--bs-list-group-bg: #e8f1f8;
	--bs-list-group-border-color: #c4d9ec;
	--bs-list-group-action-hover-color: #6fa0cc;
	--bs-list-group-action-hover-bg: #d4e4f1;
	--bs-list-group-action-active-color: #000;
	--bs-list-group-action-active-bg: #A0C3E5;
	--bs-list-group-active-color: #000;
	--bs-list-group-active-bg: #A0C3E5;
	--bs-list-group-active-border-color: #A0C3E5;
}

/* ===================================================================
   TABLE COMPONENTS
   =================================================================== */
.table-primary {
	--bs-table-color: #000;
	--bs-table-bg: #d4e4f1;
	--bs-table-border-color: #bfccd9;
	--bs-table-striped-bg: #c9ddeb;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #bfccd9;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #c4d9ec;
	--bs-table-hover-color: #000;
}

.table-secondary {
	--bs-table-color: #000;
	--bs-table-bg: #e8f1f8;
	--bs-table-border-color: #d1dfe9;
	--bs-table-striped-bg: #dce8f2;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #d1dfe9;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #d7e5f0;
	--bs-table-hover-color: #000;
}

/* ===================================================================
   PROGRESS BAR COMPONENTS
   =================================================================== */
.progress-bar {
	background-color: #4580AD;
}

	.progress-bar.bg-primary {
		background-color: #4580AD !important;
	}

	.progress-bar.bg-secondary {
		background-color: #A0C3E5 !important;
	}

	.progress-bar.foundational {
		background-color: var(--dimension-foundational);
	}

	.progress-bar.intellectual {
		background-color: var(--dimension-intellectual);
	}

	.progress-bar.financial {
		background-color: var(--dimension-financial);
	}

/* ===================================================================
   PAGINATION COMPONENTS
   =================================================================== */
.pagination {
	--bs-pagination-color: #4580AD;
	--bs-pagination-hover-color: #3a6d94;
	--bs-pagination-focus-color: #3a6d94;
	--bs-pagination-active-bg: #4580AD;
	--bs-pagination-active-border-color: #4580AD;
}

.table-primary {
	--bs-table-bg: #d4e4f1;
	--bs-table-striped-bg: #c9ddeb;
	--bs-table-hover-bg: #c4d9ec;
}

.levelup-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--bs-primary);
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.levelup-subtitle {
	font-size: 1.25rem;
	color: var(--bs-primary);
	margin-bottom: .5rem;
}

.levelup-resource img {
	width: 70px;
	height: 75px;
}

.levelup-resource p {
	line-height: 1.4;
}

.levelup-header {
	font-size: 1.15em !important;
}

.levelup-printbutton {
	line-height: .75rem;
	margin: 0 0 0 .5rem !important;
}

html {
	font-size: 16px;
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	white-space: nowrap;
	line-height: 60px;
}

.thumbnail-container {
	max-height: 300px;
}
/* Card Styles */
.card {
	border: none;
	border-radius: 10px;
}

.card-header {
	border-radius: 10px 10px 0 0 !important;
	padding: 20px;
}

	.card-header.bg-primary.text-white h1,
	.card-header.bg-primary.text-white h2,
	.card-header.bg-primary.text-white h3,
	.card-header.bg-primary.text-white h4,
	.card-header.bg-primary.text-white h5,
	.card-header.bg-primary.text-white h6,
	.card-header.bg-secondary.text-white h1,
	.card-header.bg-secondary.text-white h2,
	.card-header.bg-secondary.text-white h3,
	.card-header.bg-secondary.text-white h4,
	.card-header.bg-secondary.text-white h5,
	.card-header.bg-secondary.text-white h6 {
		--bs-text-opacity: 1;
		color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
	}
/* Form Styles */
.form-label {
	color: #2D3748;
	font-size: 14px;
}

.form-control, .form-select {
	border: 2px solid var(--bs-border-color);
	border-radius: 6px;
	padding: 10px 15px;
	font-size: 15px;
}

	.form-control:focus, .form-select:focus {
		border-color: var(--bs-primary);
		box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
	}

textarea.form-control {
	resize: vertical;
}

/* Button Styles */
.btn {
	border-radius: 6px;
	padding: 10px 24px;
	font-weight: 600;
	transition: var(--transition-fast);
}

.btn-lg {
	padding: 12px 32px;
	font-size: 18px;
}

/* Primary button with custom hover effects */
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
}

.btn-primary:active {
	transform: translateY(0);
}

/* Success button styles */
.btn-success {
	background-color: var(--success-color);
	border-color: var(--success-color);
}

	.btn-success:hover {
		background-color: #2F855A;
		border-color: #2F855A;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(56, 161, 105, 0.3);
	}

/* Alert info styles*/
.btn-alert-secondary {
	background-color: #e8f1f8;
	border-color: #6fa0cc;
}

	.btn-alert-secondary:hover,
	.btn-alert-secondary:focus {
		background-color: var(--bs-primary-bg-subtle);
		border-color: var(--bs-primary-border-subtle);
		color: var(--bs-primary-text-emphasis);
	}
/* Alert Styles */
.alert-light {
	background-color: #F7FAFC;
	border-color: var(--bs-border-color);
}

/* Canva Template Links */
.canva-templates {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.canva-template-link {
	flex: 1;
	min-width: 150px;
	text-align: center;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--bs-primary);
	border-radius: 4px;
	font-weight: 600;
	transition: var(--transition-smooth);
	text-decoration: none;
	color: var(--bs-primary);
}

	.canva-template-link:hover {
		background-color: var(--bs-primary);
		color: white;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.3);
	}

.category-card.foundational,
.border-foundational {
	border-color: var(--dimension-foundational);
}

.category-card.intellectual,
.border-intellectual {
	border-color: var(--dimension-intellectual);
}

.category-card.financial,
.border-financial {
	border-color: var(--dimension-financial);
}
/* ===================================================================
   NAVBAR CUSTOMIZATION
   Migrated from _Layout.cshtml.css
   =================================================================== */

a.navbar-brand {
	white-space: normal;
	text-align: center;
	word-break: break-all;
}


/* ===================================================================
   DIMENSION UTILITY CLASSES
   Shared across tools for consistent 3D dimension theming
   Uses CSS variables defined in :root above
   =================================================================== */

/* Background Colors - Solid */
.bg-dimension-foundational {
	background-color: var(--dimension-foundational) !important;
	color: white !important;
}

.bg-dimension-intellectual {
	background-color: var(--dimension-intellectual) !important;
	color: white !important;
}

.bg-dimension-financial {
	background-color: var(--dimension-financial) !important;
	color: white !important;
}

/* Background Colors - Subtle (for cards, highlights) */
.bg-dimension-foundational-subtle {
	background-color: rgba(var(--dimension-foundational-rgb), 0.1) !important;
	color: var(--dimension-foundational) !important;
}

.bg-dimension-intellectual-subtle {
	background-color: rgba(var(--dimension-intellectual-rgb), 0.1) !important;
	color: var(--dimension-intellectual) !important;
}

.bg-dimension-financial-subtle {
	background-color: rgba(var(--dimension-financial-rgb), 0.1) !important;
	color: var(--dimension-financial) !important;
}

/* Background Gradients (for headers, hero sections) */
.bg-gradient-foundational {
	background: linear-gradient(135deg, #2d8659 0%, #246d47 100%) !important;
	color: white !important;
}

.bg-gradient-intellectual {
	background: linear-gradient(135deg, #2c9fc9 0%, #2380a1 100%) !important;
	color: white !important;
}

.bg-gradient-financial {
	background: linear-gradient(135deg, #d4a017 0%, #b38613 100%) !important;
	color: white !important;
}

/* Text Colors */
.text-dimension-foundational {
	color: var(--dimension-foundational) !important;
}

.text-dimension-intellectual {
	color: var(--dimension-intellectual) !important;
}

.text-dimension-financial {
	color: var(--dimension-financial) !important;
}

/* Border Colors */
.border-dimension-foundational {
	border-color: var(--dimension-foundational) !important;
}

.border-dimension-intellectual {
	border-color: var(--dimension-intellectual) !important;
}

.border-dimension-financial {
	border-color: var(--dimension-financial) !important;
}

/* Border Left Accent (commonly used pattern) */
.border-start-dimension-foundational {
	border-left: 4px solid var(--dimension-foundational) !important;
}

.border-start-dimension-intellectual {
	border-left: 4px solid var(--dimension-intellectual) !important;
}

.border-start-dimension-financial {
	border-left: 4px solid var(--dimension-financial) !important;
}

/* ===================================================================
   DIMENSION BADGE
   Standardized badge styling for dimension indicators
   =================================================================== */

.dimension-badge {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	border-radius: 0.375rem;
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

	.dimension-badge.foundational {
		background-color: var(--dimension-foundational);
		color: white;
	}

	.dimension-badge.intellectual {
		background-color: var(--dimension-intellectual);
		color: white;
	}

	.dimension-badge.financial {
		background-color: var(--dimension-financial);
		color: white;
	}

.hover-lift {
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

	.hover-lift:hover {
		transform: translateY(-5px);
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	}

/* ===================================================================
   COMING SOON - Landing page styles
   =================================================================== */
.coming-soon-thumbnail {
	max-width: 300px;
}

.coming-soon-back-btn {
	background-color: var(--bs-primary-navy);
	border-color: var(--bs-primary-navy);
	color: #fff;
}

	.coming-soon-back-btn:hover,
	.coming-soon-back-btn:focus {
		background-color: #243660;
		border-color: #243660;
		color: #fff;
	}

/* ===================================================================
   TOOL PREVIEW - Shared landing page styles
   =================================================================== */
.tool-preview-thumbnail {
	max-width: 400px;
}