/* Velox Component: Velox Typography */
/* =========================================================
   Velox Responsive Heading Scale
   Override-safe for Velox Component Manager
   ========================================================= */

.velox-component--velox-typography h1{
	font-size: clamp(74px, 5.2vw, 68px) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.035em !important;
}

.velox-component--velox-typography h2{
	font-size: clamp(32px, 3.5vw, 46px) !important;
	line-height: 1.10 !important;
	letter-spacing: -0.03em !important;
}

.velox-component--velox-typography h3{
	font-size: clamp(24px, 2.4vw, 32px) !important;
	line-height: 1.18 !important;
	letter-spacing: -0.02em !important;
}

.velox-component--velox-typography h4{
	font-size: clamp(20px, 1.8vw, 24px) !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
}



.velox-component--velox-typography .vx-hero-title{
	font-size: clamp(74px, 5.2vw, 68px) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.035em !important;
}

/* Velox Component: Plugin Pages Styles */
/* =========================================================
   Velox Plugin Metadata
   ========================================================= */

.velox-component--plugin-pages-styles .vx-plugin-meta{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;

	gap: 24px 44px;

	width: 100%;
}

.velox-component--plugin-pages-styles .vx-plugin-meta__item{
	display: flex;
	flex-direction: column;

	gap: 4px;
}

.velox-component--plugin-pages-styles .vx-plugin-meta__item span{
	color: #667085;

	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;

	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.velox-component--plugin-pages-styles .vx-plugin-meta__item strong{
	color: #1f2a3a;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}


/* Mobile */

@media (max-width: 600px) {

	.velox-component--plugin-pages-styles .vx-plugin-meta{
		gap: 18px 28px;
	}

	.velox-component--plugin-pages-styles .vx-plugin-meta__item strong{
		font-size: 13px;
	}

}

/* Velox Component: Approach 4 Boxes Horizontal */
/* =========================================================
   Velox Approach — Process Steps
   ========================================================= */

.velox-component--approach-4-boxes-horizontal .vx-approach-process{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 20px;

	width: 100%;
}


/* Individual card */

.velox-component--approach-4-boxes-horizontal .vx-approach-step{
	position: relative;

	min-height: 175px;

	padding: 26px 24px;

	border: 1px solid rgba(16,24,40,.06);
	border-radius: 17px;

	background: rgba(255,255,255,.82);

	box-sizing: border-box;
}


/* Step number */

.velox-component--approach-4-boxes-horizontal .vx-approach-step__num{
	margin-bottom: 10px;

	color: #f04405;

	font-size: 12px;
	font-weight: 800;
	line-height: 1;

	letter-spacing: .06em;
}


/* Heading */

.velox-component--approach-4-boxes-horizontal .vx-approach-step h3{
	margin: 0;

	color: #101828;

	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: -0.025em;
}


/* Description */

.velox-component--approach-4-boxes-horizontal .vx-approach-step p{
	margin: 10px 0 0;

	color: #475467;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
}


/* =========================================================
   Connector arrows
   ========================================================= */

.velox-component--approach-4-boxes-horizontal .vx-approach-step:not(:last-child)::after{
	content: "→";

	position: absolute;

	top: 50%;
	right: -17px;

	z-index: 3;

	width: 30px;
	height: 30px;

	display: grid;
	place-items: center;

	transform: translateY(-50%);

	border: 1px solid #e4e7ec;
	border-radius: 50%;

	background: #ffffff;

	color: #98a2b3;

	font-size: 14px;
	font-weight: 500;

	box-shadow:
		0 2px 6px rgba(16,24,40,.05);
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1000px) {

	.velox-component--approach-4-boxes-horizontal .vx-approach-process{
		grid-template-columns: repeat(2, 1fr);
	}

	.velox-component--approach-4-boxes-horizontal .vx-approach-step:not(:last-child)::after{
		display: none;
	}

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

	.velox-component--approach-4-boxes-horizontal .vx-approach-process{
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.velox-component--approach-4-boxes-horizontal .vx-approach-step{
		min-height: auto;

		padding: 22px 20px;
	}

	.velox-component--approach-4-boxes-horizontal .vx-approach-step h3{
		font-size: 18px;
	}

	.velox-component--approach-4-boxes-horizontal .vx-approach-step p{
		font-size: 13px;
	}

}

/* Velox Component: Map Locator Home Visual */
/* =========================================================
   Velox Map Locator
   Homepage Product Card Visual
   Decorative only
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-visual{
	width: 100%;

	padding: 28px;

	background:
		linear-gradient(
			135deg,
			#e7ede7 0%,
			#e4ecee 54%,
			#efe9df 100%
		);

	box-sizing: border-box;

	container-type: inline-size;
}


/* =========================================================
   WINDOW
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-window{
	width: 100%;

	overflow: hidden;

	border: 1px solid rgba(16,24,40,.10);
	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 12px 30px rgba(16,24,40,.08);
}


/* Top bar */

.velox-component--map-locator-home-visual .vx-vml-topbar{
	height: 32px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 0 12px;

	background: #071522;
}


.velox-component--map-locator-home-visual .vx-vml-topbar > span{
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: rgba(255,255,255,.62);
}


.velox-component--map-locator-home-visual .vx-vml-topbar small{
	margin-left: 8px;

	color: rgba(255,255,255,.65);

	font-size: 8px;
}


/* =========================================================
   INTERFACE
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-interface{
	display: grid;

	grid-template-columns: 34% 66%;

	height: 220px;
}



/* =========================================================
   SIDEBAR
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-sidebar{
	padding: 14px;

	border-right: 1px solid #e4e7ec;

	background: #ffffff;
}


.velox-component--map-locator-home-visual .vx-vml-sidebar-head{
	margin-bottom: 10px;
}


.velox-component--map-locator-home-visual .vx-vml-sidebar-head strong{
	color: #101828;

	font-size: 9px;
}


.velox-component--map-locator-home-visual .vx-vml-search{
	height: 30px;

	margin-bottom: 10px;

	border: 1px solid #dfe3e8;
	border-radius: 6px;

	background: #f8fafb;
}


.velox-component--map-locator-home-visual .vx-vml-location{
	display: flex;

	gap: 8px;

	padding: 11px 0;

	border-top: 1px solid #edf0f3;
}


.velox-component--map-locator-home-visual .vx-vml-location i{
	width: 7px;
	height: 7px;

	flex: 0 0 7px;

	margin-top: 4px;

	border-radius: 50%;
}


.velox-component--map-locator-home-visual .vx-vml-location i.green{ background: #35a86d; }
.velox-component--map-locator-home-visual .vx-vml-location i.blue{ background: #3477d2; }
.velox-component--map-locator-home-visual .vx-vml-location i.orange{ background: #f04405; }


.velox-component--map-locator-home-visual .vx-vml-location b, .velox-component--map-locator-home-visual .vx-vml-location small{
	display: block;
}


.velox-component--map-locator-home-visual .vx-vml-location b{
	color: #101828;

	font-size: 8px;
	font-weight: 800;
}


.velox-component--map-locator-home-visual .vx-vml-location small{
	margin-top: 2px;

	color: #98a2b3;

	font-size: 5.5px;
}



/* =========================================================
   MAP
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-map{
	position: relative;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#dcebea 0%,
			#dde8d8 58%,
			#eee5d1 100%
		);
}


.velox-component--map-locator-home-visual .vx-vml-water{
	position: absolute;

	right: 0;
	top: 0;

	width: 70px;
	height: 62px;

	background: #d7eaf4;

	clip-path: polygon(45% 0,100% 0,100% 100%,0 100%);
}


.velox-component--map-locator-home-visual .vx-vml-park{
	position: absolute;

	left: 24px;
	top: 34px;

	width: 84px;
	height: 62px;

	background: #d7e8cf;

	transform: rotate(-8deg);
}


.velox-component--map-locator-home-visual .vx-vml-street{
	position: absolute;

	border-radius: 999px;

	background: rgba(255,255,255,.88);
}


.velox-component--map-locator-home-visual .street-h-1{
	left: 0;
	top: 54px;

	width: 100%;
	height: 6px;
}

.velox-component--map-locator-home-visual .street-h-2{
	left: 12px;
	top: 130px;

	width: 84%;
	height: 6px;
}

.velox-component--map-locator-home-visual .street-v-1{
	left: 92px;
	top: 0;

	width: 6px;
	height: 100%;
}

.velox-component--map-locator-home-visual .street-v-2{
	left: 168px;
	top: 0;

	width: 6px;
	height: 100%;
}

.velox-component--map-locator-home-visual .street-v-3{
	left: 244px;
	top: 0;

	width: 6px;
	height: 100%;
}


.velox-component--map-locator-home-visual .vx-vml-road{
	position: absolute;

	height: 13px;

	border: 2px solid rgba(222,174,92,.48);
	border-radius: 999px;

	background: #f4d286;
}


.velox-component--map-locator-home-visual .road-a{
	left: -18px;
	top: 88px;

	width: 260px;

	transform: rotate(18deg);
}

.velox-component--map-locator-home-visual .road-b{
	left: 82px;
	top: 120px;

	width: 180px;

	transform: rotate(-19deg);
}


.velox-component--map-locator-home-visual .vx-vml-block{
	position: absolute;

	border: 2px solid #d4d1c8;
	border-radius: 6px;

	background: #e2dfd8;
}


.velox-component--map-locator-home-visual .block-1{ left: 120px; top: 24px; width: 45px; height: 33px; }
.velox-component--map-locator-home-visual .block-2{ left: 186px; top: 26px; width: 52px; height: 37px; }
.velox-component--map-locator-home-visual .block-3{ left: 122px; top: 78px; width: 40px; height: 35px; }
.velox-component--map-locator-home-visual .block-4{ left: 184px; top: 82px; width: 56px; height: 38px; }
.velox-component--map-locator-home-visual .block-5{ left: 150px; top: 145px; width: 48px; height: 34px; }
.velox-component--map-locator-home-visual .block-6{ left: 218px; top: 146px; width: 46px; height: 34px; }


.velox-component--map-locator-home-visual .vx-vml-label{
	position: absolute;

	z-index: 2;

	color: #6d777b;

	white-space: nowrap;
}


.velox-component--map-locator-home-visual .label-park{
	left: 34px;
	top: 56px;

	font-size: 10px;
	font-weight: 700;
}

.velox-component--map-locator-home-visual .label-market{
	left: 28px;
	top: 116px;

	font-size: 8px;
}


/* Markers */

.velox-component--map-locator-home-visual .vx-vml-marker{
	position: absolute;

	z-index: 5;

	width: 16px;
	height: 16px;

	border: 3px solid #ffffff;
	border-radius: 50% 50% 50% 0;

	transform: rotate(-45deg);

	box-shadow: 0 3px 8px rgba(16,24,40,.15);
}


.velox-component--map-locator-home-visual .vx-vml-marker::after{
	content: "";

	position: absolute;

	left: 4px;
	top: 4px;

	width: 3px;
	height: 3px;

	border-radius: 50%;

	background: #ffffff;
}


.velox-component--map-locator-home-visual .vx-vml-marker.orange{ background: #f04405; }
.velox-component--map-locator-home-visual .vx-vml-marker.blue{ background: #3477d2; }
.velox-component--map-locator-home-visual .vx-vml-marker.green{ background: #35a86d; }
.velox-component--map-locator-home-visual .vx-vml-marker.amber{ background: #d99636; }

.velox-component--map-locator-home-visual .marker-1{ left: 38%; top: 56%; }
.velox-component--map-locator-home-visual .marker-2{ left: 72%; top: 35%; }
.velox-component--map-locator-home-visual .marker-3{ left: 54%; top: 72%; }
.velox-component--map-locator-home-visual .marker-4{ left: 84%; top: 62%; }


/* =========================================================
   FLOATING MINI PANEL
   ========================================================= */

.velox-component--map-locator-home-visual .vx-vml-mini-panel{
	position: absolute;

	right: 12px;
	bottom: 14px;

	width: 108px;

	padding: 10px;

	border: 1px solid rgba(16,24,40,.08);
	border-radius: 10px;

	background: rgba(255,255,255,.96);

	box-shadow:
		0 8px 18px rgba(16,24,40,.08);
}


.velox-component--map-locator-home-visual .vx-vml-mini-panel__title{
	margin-bottom: 8px;

	color: #101828;

	font-size: 7px;
	font-weight: 800;
}


.velox-component--map-locator-home-visual .vx-vml-mini-line{
	height: 8px;

	margin-bottom: 6px;

	border-radius: 4px;

	background: #eef1f4;
}

.velox-component--map-locator-home-visual .vx-vml-mini-line.short{
	width: 72%;
}


.velox-component--map-locator-home-visual .vx-vml-mini-toggle{
	position: relative;

	width: 24px;
	height: 13px;

	margin-top: 4px;
	margin-left: auto;

	border-radius: 20px;

	background: #f04405;
}


.velox-component--map-locator-home-visual .vx-vml-mini-toggle span{
	position: absolute;

	right: 2px;
	top: 2px;

	width: 9px;
	height: 9px;

	border-radius: 50%;

	background: #ffffff;
}



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

@container (max-width: 500px) {

	.velox-component--map-locator-home-visual .vx-vml-visual{
		padding: 22px;
	}

	.velox-component--map-locator-home-visual .vx-vml-interface{
		height: 205px;
	}

}


@container (max-width: 400px) {

	.velox-component--map-locator-home-visual .vx-vml-visual{
		padding: 18px;
	}

	.velox-component--map-locator-home-visual .vx-vml-interface{
		height: 185px;
	}

	.velox-component--map-locator-home-visual .vx-vml-sidebar{
		padding: 11px;
	}

}

/* Velox Component: Featured Image Home Visual */
/* =========================================================
   Velox Featured Image for Elementor
   Homepage Product Card Visual
   Decorative only
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-visual{
	width: 100%;

	padding: 28px;

	background:
		linear-gradient(
			135deg,
			#eee8df 0%,
			#e7ecea 52%,
			#e4edef 100%
		);

	box-sizing: border-box;

	container-type: inline-size;
}


/* =========================================================
   WINDOW
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-window{
	width: 100%;

	overflow: hidden;

	border: 1px solid rgba(16,24,40,.10);
	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 12px 30px rgba(16,24,40,.08);
}


/* Browser bar */

.velox-component--featured-image-home-visual .vx-vfi-topbar{
	height: 32px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 0 12px;

	background: #071522;
}


.velox-component--featured-image-home-visual .vx-vfi-topbar > span{
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: rgba(255,255,255,.62);
}


.velox-component--featured-image-home-visual .vx-vfi-topbar small{
	margin-left: 8px;

	color: rgba(255,255,255,.65);

	font-size: 8px;
}


/* =========================================================
   INTERFACE
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-interface{
	display: grid;

	grid-template-columns: 38% 62%;

	height: 220px;
}



/* =========================================================
   ELEMENTOR-STYLE SIDEBAR
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-sidebar{
	padding: 14px;

	border-right: 1px solid #e4e7ec;

	background: #ffffff;

	box-sizing: border-box;
}


.velox-component--featured-image-home-visual .vx-vfi-panel-title{
	display: flex;
	align-items: center;

	gap: 8px;

	margin-bottom: 11px;
}


.velox-component--featured-image-home-visual .vx-vfi-icon{
	width: 25px;
	height: 25px;

	display: grid;
	place-items: center;

	flex: 0 0 25px;

	border-radius: 6px;

	background: #f04405;

	color: #ffffff;

	font-size: 13px;
	font-weight: 800;
}


.velox-component--featured-image-home-visual .vx-vfi-panel-title strong, .velox-component--featured-image-home-visual .vx-vfi-panel-title small{
	display: block;
}


.velox-component--featured-image-home-visual .vx-vfi-panel-title strong{
	color: #101828;

	font-size: 8px;
	font-weight: 800;
}


.velox-component--featured-image-home-visual .vx-vfi-panel-title small{
	margin-top: 1px;

	color: #98a2b3;

	font-size: 5px;
}



/* Tabs */

.velox-component--featured-image-home-visual .vx-vfi-tabs{
	display: flex;
	justify-content: space-between;

	margin-bottom: 11px;
	padding-bottom: 8px;

	border-bottom: 1px solid #e4e7ec;

	color: #667085;

	font-size: 6px;
}


.velox-component--featured-image-home-visual .vx-vfi-tabs span.active{
	color: #f04405;

	font-weight: 700;
}


/* Labels */

.velox-component--featured-image-home-visual .vx-vfi-sidebar label{
	display: block;

	margin: 7px 0 4px;

	color: #667085;

	font-size: 5.5px;
}


/* Fake fields */

.velox-component--featured-image-home-visual .vx-vfi-field{
	height: 27px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0 8px;

	border: 1px solid #e4e7ec;
	border-radius: 5px;

	background: #ffffff;

	color: #475467;

	font-size: 6px;

	box-sizing: border-box;
}


.velox-component--featured-image-home-visual .vx-vfi-field em{
	color: #98a2b3;

	font-style: normal;
}


/* Toggle row */

.velox-component--featured-image-home-visual .vx-vfi-setting-row{
	min-height: 27px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	color: #475467;

	font-size: 6px;
}


.velox-component--featured-image-home-visual .vx-vfi-toggle{
	position: relative;

	width: 23px;
	height: 13px;

	flex: 0 0 23px;

	border-radius: 20px;

	background: #d0d5dd;
}


.velox-component--featured-image-home-visual .vx-vfi-toggle::after{
	content: "";

	position: absolute;

	left: 2px;
	top: 2px;

	width: 9px;
	height: 9px;

	border-radius: 50%;

	background: #ffffff;
}


.velox-component--featured-image-home-visual .vx-vfi-toggle.on{
	background: #f04405;
}


.velox-component--featured-image-home-visual .vx-vfi-toggle.on::after{
	left: 12px;
}



/* =========================================================
   PREVIEW CANVAS
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-preview{
	position: relative;

	padding: 17px;

	background:
		linear-gradient(
			145deg,
			#eef1ef 0%,
			#e6eceb 50%,
			#e5edf0 100%
		);

	box-sizing: border-box;
}


.velox-component--featured-image-home-visual .vx-vfi-canvas-label{
	position: absolute;

	top: 9px;
	right: 11px;

	color: #98a2b3;

	font-size: 5px;
	font-weight: 600;
}


/* Fake page */

.velox-component--featured-image-home-visual .vx-vfi-page{
	position: absolute;

	left: 21px;
	right: 21px;
	top: 27px;
	bottom: 20px;

	overflow: hidden;

	border: 1px solid rgba(16,24,40,.07);
	border-radius: 10px;

	background: #ffffff;

	box-shadow:
		0 7px 18px rgba(16,24,40,.06);
}


/* Featured image */

.velox-component--featured-image-home-visual .vx-vfi-image{
	position: relative;

	height: 68%;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			#d8dfe3 0%,
			#c5d0d6 48%,
			#abb9c1 100%
		);
}


/* Decorative abstract image shapes */

.velox-component--featured-image-home-visual .vx-vfi-image-shape{
	position: absolute;
}


.velox-component--featured-image-home-visual .vx-vfi-image-shape.shape-1{
	left: -8%;
	bottom: -28%;

	width: 72%;
	height: 90%;

	background: #8ea1ad;

	transform: rotate(-18deg);
}


.velox-component--featured-image-home-visual .vx-vfi-image-shape.shape-2{
	right: -12%;
	top: 12%;

	width: 66%;
	height: 76%;

	background: #586d7d;

	transform: rotate(-18deg);
}


.velox-component--featured-image-home-visual .vx-vfi-image-shape.shape-3{
	right: -10%;
	bottom: -45%;

	width: 74%;
	height: 80%;

	background: #ac916d;

	transform: rotate(-18deg);
}


/* Fake content underneath */

.velox-component--featured-image-home-visual .vx-vfi-content{
	padding: 10px 12px;
}


.velox-component--featured-image-home-visual .vx-vfi-line{
	height: 6px;

	margin-bottom: 7px;

	border-radius: 4px;

	background: #e9edf1;
}


.velox-component--featured-image-home-visual .vx-vfi-line-title{
	width: 65%;
	height: 8px;

	background: #d9dfe5;
}


.velox-component--featured-image-home-visual .vx-vfi-line.short{
	width: 46%;
}



/* =========================================================
   DYNAMIC SOURCE CHIP
   ========================================================= */

.velox-component--featured-image-home-visual .vx-vfi-dynamic-chip{
	position: absolute;

	right: 9px;
	bottom: 10px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 6px 8px;

	border: 1px solid rgba(16,24,40,.07);
	border-radius: 7px;

	background: rgba(255,255,255,.96);

	box-shadow:
		0 5px 12px rgba(16,24,40,.06);
}


.velox-component--featured-image-home-visual .vx-vfi-dynamic-dot{
	width: 8px;
	height: 8px;

	flex: 0 0 8px;

	border-radius: 50%;

	background: #35a86d;
}


.velox-component--featured-image-home-visual .vx-vfi-dynamic-chip strong, .velox-component--featured-image-home-visual .vx-vfi-dynamic-chip small{
	display: block;
}


.velox-component--featured-image-home-visual .vx-vfi-dynamic-chip strong{
	color: #101828;

	font-size: 5.5px;
}


.velox-component--featured-image-home-visual .vx-vfi-dynamic-chip small{
	margin-top: 1px;

	color: #98a2b3;

	font-size: 4.5px;
}



/* =========================================================
   RESPONSIVE
   Preserve visual composition
   ========================================================= */

@container (max-width: 500px) {

	.velox-component--featured-image-home-visual .vx-vfi-visual{
		padding: 22px;
	}

	.velox-component--featured-image-home-visual .vx-vfi-interface{
		height: 205px;
	}

}


@container (max-width: 400px) {

	.velox-component--featured-image-home-visual .vx-vfi-visual{
		padding: 18px;
	}

	.velox-component--featured-image-home-visual .vx-vfi-interface{
		height: 185px;
	}

	.velox-component--featured-image-home-visual .vx-vfi-sidebar{
		padding: 11px;
	}

	.velox-component--featured-image-home-visual .vx-vfi-preview{
		padding: 12px;
	}

}

/* Velox Component: Table & Chart Builder Home Visual */
/* =========================================================
   Velox Table & Chart Builder
   Homepage Product Card Visual
   Decorative only
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-visual{
	width: 100%;

	padding: 28px;

	background:
		linear-gradient(
			135deg,
			#e7ece8 0%,
			#e3ebed 55%,
			#eee8df 100%
		);

	box-sizing: border-box;

	container-type: inline-size;
}


/* =========================================================
   APPLICATION WINDOW
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-window{
	width: 100%;

	overflow: hidden;

	border: 1px solid rgba(16,24,40,.10);
	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 12px 30px rgba(16,24,40,.08);
}


/* Browser bar */

.velox-component--table-chart-builder-home-visual .vx-tcb-topbar{
	height: 32px;

	display: flex;
	align-items: center;

	gap: 6px;

	padding: 0 12px;

	background: #071522;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-topbar > span{
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: rgba(255,255,255,.62);
}


.velox-component--table-chart-builder-home-visual .vx-tcb-topbar small{
	margin-left: 8px;

	color: rgba(255,255,255,.65);

	font-size: 8px;
}


/* =========================================================
   INTERFACE
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-interface{
	display: grid;

	grid-template-columns: 32% 68%;

	height: 220px;
}



/* =========================================================
   BUILDER SIDEBAR
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-sidebar{
	padding: 14px;

	border-right: 1px solid #e4e7ec;

	background: #ffffff;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-sidebar-title{
	margin-bottom: 11px;

	color: #101828;

	font-size: 9px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-field{
	min-height: 34px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 6px;

	margin-bottom: 8px;
	padding: 6px 8px;

	border: 1px solid #e4e7ec;
	border-radius: 6px;

	background: #ffffff;

	box-sizing: border-box;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-field span{
	color: #667085;

	font-size: 6px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-field b{
	color: #344054;

	font-size: 6px;
	font-weight: 600;

	text-align: right;
}


/* Fake toggle */

.velox-component--table-chart-builder-home-visual .vx-tcb-toggle{
	position: relative;

	width: 22px;
	height: 12px;

	flex: 0 0 22px;

	border-radius: 20px;

	background: #f04405;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-toggle::after{
	content: "";

	position: absolute;

	right: 2px;
	top: 2px;

	width: 8px;
	height: 8px;

	border-radius: 50%;

	background: #ffffff;
}



/* =========================================================
   CANVAS
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-canvas{
	position: relative;

	padding: 15px;

	background:
		linear-gradient(
			145deg,
			#f4f6f8 0%,
			#eef2f2 100%
		);

	box-sizing: border-box;
}



/* =========================================================
   DATA TABLE
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-table{
	position: absolute;

	left: 15px;
	top: 15px;

	width: 48%;

	overflow: hidden;

	border: 1px solid #e0e4e9;
	border-radius: 8px;

	background: #ffffff;

	box-shadow:
		0 5px 14px rgba(16,24,40,.05);
}


.velox-component--table-chart-builder-home-visual .vx-tcb-table-row{
	display: grid;

	grid-template-columns: 1.2fr .8fr 1fr;

	min-height: 24px;

	align-items: center;

	border-top: 1px solid #eef0f3;

	color: #667085;

	font-size: 6px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-table-row:first-child{
	border-top: 0;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-table-row span{
	padding: 0 7px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-table-head{
	background: #f7f8fa;

	color: #344054;

	font-weight: 700;
}



/* =========================================================
   CHART
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-chart{
	position: absolute;

	right: 15px;
	bottom: 18px;

	width: 66%;
	height: 112px;

	overflow: hidden;

	border: 1px solid #e0e4e9;
	border-radius: 9px;

	background: #ffffff;

	box-shadow:
		0 7px 18px rgba(16,24,40,.06);
}


/* Chart horizontal grid */

.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid{
	position: absolute;

	inset: 12px 12px 23px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i{
	position: absolute;

	left: 0;
	right: 0;

	height: 1px;

	background: #eef0f3;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i:nth-child(1){
	top: 0;
}

.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i:nth-child(2){
	top: 33%;
}

.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i:nth-child(3){
	top: 66%;
}

.velox-component--table-chart-builder-home-visual .vx-tcb-chart-grid i:nth-child(4){
	bottom: 0;
}


/* Bars */

.velox-component--table-chart-builder-home-visual .vx-tcb-bars{
	position: absolute;

	left: 18px;
	right: 14px;
	top: 14px;
	bottom: 9px;

	display: flex;
	align-items: flex-end;
	justify-content: space-around;

	gap: 8px;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-bar-wrap{
	position: relative;

	width: 13%;
	height: 78px;

	display: flex;
	align-items: flex-end;
	justify-content: center;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-bar-wrap > span{
	width: 100%;

	min-height: 10px;

	border-radius: 4px 4px 2px 2px;

	background:
		linear-gradient(
			180deg,
			#f26a33,
			#f04405
		);

	box-shadow:
		0 2px 5px rgba(240,68,5,.12);
}


.velox-component--table-chart-builder-home-visual .vx-tcb-bar-wrap small{
	position: absolute;

	left: 50%;
	bottom: -11px;

	transform: translateX(-50%);

	color: #98a2b3;

	font-size: 5px;
}



/* =========================================================
   RESPONSIVE STATUS CHIP
   ========================================================= */

.velox-component--table-chart-builder-home-visual .vx-tcb-status{
	position: absolute;

	right: 14px;
	top: 13px;

	display: flex;
	align-items: center;

	gap: 5px;

	padding: 5px 7px;

	border-radius: 6px;

	background: #edf8f1;

	color: #42735a;

	font-size: 5px;
	font-weight: 600;
}


.velox-component--table-chart-builder-home-visual .vx-tcb-status > span{
	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: #35a86d;
}



/* =========================================================
   RESPONSIVE
   Preserve composition — simply scale internal details
   ========================================================= */

@container (max-width: 500px) {

	.velox-component--table-chart-builder-home-visual .vx-tcb-visual{
		padding: 22px;
	}

	.velox-component--table-chart-builder-home-visual .vx-tcb-interface{
		height: 205px;
	}

}


@container (max-width: 400px) {

	.velox-component--table-chart-builder-home-visual .vx-tcb-visual{
		padding: 18px;
	}

	.velox-component--table-chart-builder-home-visual .vx-tcb-interface{
		height: 185px;
	}

	.velox-component--table-chart-builder-home-visual .vx-tcb-sidebar{
		padding: 11px;
	}

	.velox-component--table-chart-builder-home-visual .vx-tcb-canvas{
		padding: 11px;
	}

}

/* Velox Component: Velox Home Documentation */
/* =========================================================
   Velox Documentation Visual
   Decorative only — non-functional
   ========================================================= */

.velox-component--velox-home-documentation .vx-docs-visual{
	width: 100%;

	padding: 20px;

	border: 1px solid #dfe3e8;
	border-radius: 22px;

	background: rgba(255,255,255,.88);

	box-shadow:
		0 16px 38px rgba(16,24,40,.05);

	box-sizing: border-box;
}


/* Search field */

.velox-component--velox-home-documentation .vx-docs-visual__search{
	height: 52px;

	display: flex;
	align-items: center;

	gap: 12px;

	padding: 0 16px;

	border: 1px solid #d9dee6;
	border-radius: 10px;

	background: #ffffff;

	color: #98a2b3;

	font-size: 14px;

	box-sizing: border-box;
}


.velox-component--velox-home-documentation .vx-docs-visual__search-icon{
	color: #7d8ca0;

	font-size: 17px;
	line-height: 1;
}


/* Documentation grid */

.velox-component--velox-home-documentation .vx-docs-visual__grid{
	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 10px;

	margin-top: 16px;
}


/* Individual documentation item */

.velox-component--velox-home-documentation .vx-docs-visual__item{
	min-height: 47px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 14px;

	padding: 11px 14px;

	border-radius: 9px;

	background: #f6f7f8;

	color: #101828;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;

	box-sizing: border-box;
}


.velox-component--velox-home-documentation .vx-docs-visual__item span:last-child{
	color: #344054;

	font-size: 15px;
	font-weight: 500;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 700px) {

	.velox-component--velox-home-documentation .vx-docs-visual{
		padding: 16px;
	}

	.velox-component--velox-home-documentation .vx-docs-visual__search{
		height: 48px;
	}

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 520px) {

	.velox-component--velox-home-documentation .vx-docs-visual{
		padding: 14px;

		border-radius: 18px;
	}

	.velox-component--velox-home-documentation .vx-docs-visual__grid{
		grid-template-columns: 1fr;
	}

	.velox-component--velox-home-documentation .vx-docs-visual__search{
		height: 46px;

		padding: 0 13px;

		font-size: 12px;
	}

	.velox-component--velox-home-documentation .vx-docs-visual__item{
		min-height: 44px;

		padding: 10px 12px;

		font-size: 12px;
	}

}