/**
 * Primary Color
 *
 * Choose a value that works well with white foreground text.
 * Used for links, headers, buttons and the content row color
 * section, as well as other core elements.
 *
 * Default: #1E40AF
 */
.text-color-primary
{
	color: #1E40AF !important;
}

a,table tr .highlight,table.table-layout-product-comparison tr.product-header td p.product-price,button,.button,.icon-feature,.icon-feature-large,.icon-feature-inline,.product-box .product-price,.product-slider > ul li:last-of-type .price .value,.product-configurator .configurator-order .configurator-total .value,.tab-group > ul li,.tab-group .tab-item .tab-item-title,#video-overlay-icon,#nav-overlay.nav-overlay-light nav .nav-primary > li a:not(.button),#nav-overlay.nav-overlay-gray nav .nav-primary > li a:not(.button),#nav-overlay.nav-overlay-dark nav .nav-primary > li a:not(.button),#nav-overlay-open.nav-overlay-light,#nav-overlay-close.nav-overlay-light,#nav-overlay-open.nav-overlay-gray,#nav-overlay-close.nav-overlay-gray,#nav-overlay-open.nav-overlay-dark,#nav-overlay-close.nav-overlay-dark,#content > .content-row .content-slider > ul li.active,#content > .content-row.content-row-color ul.list-style-nav li a:not(.button),#content > .content-row.content-row-color table a:not(.button),#content > .content-row.content-row-color pre a:not(.button),#content > .content-row.content-row-color .pre-code a:not(.button),#content > .content-row.content-row-color .tags li a:not(.button),#content > .content-row.content-row-color .feature-box a:not(.button),#content > .content-row.content-row-color .product-box a:not(.button),#content > .content-row.content-row-color .product-slider a:not(.button),#content > .content-row.content-row-color .product-configurator a:not(.button),#content > .content-row.content-row-color .network-map ul li span.label-top-left,#content > .content-row.content-row-color .network-map ul li span.label-top-right,#content > .content-row.content-row-color .network-map ul li span.label-bottom-left,#content > .content-row.content-row-color .network-map ul li span.label-bottom-right,#content > .content-row.content-row-color .testimonial .testimonial-content a:not(.button),#content > .content-row.content-row-color .blog-comment-group .blog-comment-content a:not(.button)
{
	color: #1E40AF;
}

body.preload::before,table caption,button.button-primary,.button.button-primary,ul.tags li a,.product-box .product-popular,.product-slider .slider .range,.product-configurator .slider .range,.network-map ul li,.network-map ul li span.label-top-left,.network-map ul li span.label-top-right,.network-map ul li span.label-bottom-left,.network-map ul li span.label-bottom-right,.network-map ul li span.label-top-left::before,.network-map ul li span.label-top-right::before,.network-map ul li span.label-bottom-left::before,.network-map ul li span.label-bottom-right::before,.tab-group.tab-group-switch-style > ul li.active,.gallery.gallery-slider .gallery-previous:hover,.gallery.gallery-slider .gallery-next:hover,.video-overlay.video-overlay-has-icon:hover #video-overlay-icon,#nav-overlay-background,#header,#content > .content-row .content-slider > ul li.active:empty,#content > .content-row.content-row-color,#content > .content-row.content-row-color.content-row-split-left::after,#content > .content-row.content-row-color.content-row-split-right::after,#content > .content-row.content-row-color .content-box,#content > .content-row.content-row-color .tab-group .tab-item .tab-item-title,#content > .content-row.content-row-color .tab-group:not(.tab-group-switch-style) > ul li,#content > .content-row.content-row-color .tab-group:not(.tab-group-switch-style) > ul li::after,#content > .content-row.content-row-color .tab-group:not(.tab-group-switch-style) .tab-item .tab-item-inner,.footer-color
{
	background-color: #1E40AF;
}

input:not(.no-custom-style):focus,select:not(.no-custom-style):focus,textarea:not(.no-custom-style):focus,form .checkbox-style.focus,form .radio-style.focus,form .select-style input.focus,.product-box.product-box-popular,.product-slider .slider .range .handle,.product-configurator .slider .range .handle,.pagination > li.active a
{
	border-color: #1E40AF;
}

/**
 * Secondary Color
 *
 * Choose a value that works well with dark foreground text
 * and complements your primary color. Used for buttons and
 * various secondary elements.
 *
 * Default: #ffcc33
 */
.text-color-secondary
{
	color: #1E40AF !important;
}
.content-row-color .text-color-secondary
{
	color: rgba(255,255,255,0.95) !important;
}

#notification p a,#content > .content-row.content-row-color a:not(.button),#content > .content-row.content-row-color .icon-feature,#content > .content-row.content-row-color .icon-feature-large,#content > .content-row.content-row-color .icon-feature-inline,#content > .content-row.content-row-color .content-slider > ul li.active,#content > .content-row.content-row-color .tab-group .tab-item .tab-item-title,#content > .content-row.content-row-color .tab-group:not(.tab-group-switch-style) > ul li
{
	color: rgba(255,255,255,0.95);
}

mark
{
	background-color: rgba(255,255,255,0.2);
}
/* Secondary buttons: no yellow; outline style, smaller size */
button.button-secondary,
.button.button-secondary
{
	background-color: transparent;
	border: 2px solid #1E40AF;
	color: #1E40AF;
	padding: 10px 18px;
	font-size: 13px;
}
button.button-secondary:hover,
.button.button-secondary:hover
{
	background-color: #1E40AF;
	color: #fff;
}
/* On blue areas, secondary = white outline */
#header .button-secondary,
.content-row-color .button-secondary
{
	border-color: rgba(255,255,255,0.9);
	color: #fff;
}
#header .button-secondary:hover,
.content-row-color .button-secondary:hover
{
	background-color: rgba(255,255,255,0.2);
	color: #fff;
}
/* All buttons slightly smaller */
button.button-primary,
.button.button-primary
{
	padding: 10px 18px;
	font-size: 13px;
}

/* Accent CTA (yellow) for high-intent actions only */
button.button-accent,
.button.button-accent
{
	background-color: #ffcc33;
	border: 2px solid #ffcc33;
	color: #1E40AF;
}

button.button-accent:hover,
.button.button-accent:hover
{
	background-color: #f2c100;
	border-color: #f2c100;
	color: #1E40AF;
}

#content > .content-row.content-row-color .pagination > li.active a
{
	border-color: rgba(255,255,255,0.9);
}

/**
 * Header Background
 *
 * The header uses the primary color by default but can be
 * changed to a different color or gradient if desired.
 *
 * Default: #1E40AF
 */
#header,#nav-overlay-background
{
}

/**
 * Notification Background
 *
 * Choose a value that works well combined with your color
 * scheme and white foreground text. The custom styles for
 * success, error and warning classes are unaffected.
 *
 * Default: #00629a
 */
/* Notification: alert-style bar with close X, polite partner invite */
#notification
{
	position: relative;
	background-color: #1E40AF;
	padding: 56px 24px 12px;
	box-sizing: border-box;
}

#notification .container
{
	position: relative;
	background-color: #1E40AF;
	border-radius: 12px;
	height: 54px;
	min-height: 54px;
	max-height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

#notification p
{
	margin: 0 44px 0 24px;
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	line-height: 54px;
	text-align: center;
}

#notification p a
{
	color: #fff;
	font-family: Montserrat, sans-serif;
	text-decoration: none;
	white-space: normal;
}

#notification p a.notification-partner-link
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

#notification p a .notification-link-text
{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

#notification p a .notification-link-text::after
{
	content: none;
}

#notification p a .notification-link-arrow
{
	display: inline-block;
	margin-left: 8px;
	font-size: 1em;
	line-height: 1;
	font-weight: 700;
	color: #ffcc33;
	text-decoration: none;
	vertical-align: baseline;
}

#notification p a .notification-link-arrow::before
{
	content: "›";
}

#notification p a:hover
{
	color: rgba(255, 255, 255, 0.9);
}

#notification p a.text-margin-left
{
	margin-left: 1em;
}

/* Close X in top-right like an alert */
#notification .container #notification-dismiss
{
	top: 12px;
	right: 12px;
	margin-top: 0;
	width: 28px;
	height: 28px;
	font-size: 22px;
	line-height: 28px;
	color: rgba(255, 255, 255, 0.8);
	border-radius: 6px;
	transition: color 0.2s, background-color 0.2s;
}

#notification .container #notification-dismiss:hover
{
	color: #fff;
	background-color: rgba(255, 255, 255, 0.15);
}

#cookie-consent-banner
{
	background-color: rgba(255, 255, 255, 0.95);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 14px 0;
}

#cookie-consent-banner .container
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

#cookie-consent-banner p
{
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #1E40AF;
}

#cookie-consent-banner p a
{
	color: #1E40AF;
	text-decoration: underline;
}

#cookie-consent-banner .button
{
	white-space: nowrap;
	margin: 0;
}

@media (max-width: 768px)
{
	#notification
	{
		padding: 56px 16px 12px;
	}

	#notification .container
	{
		height: auto;
		min-height: 54px;
		max-height: none;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 10px 40px 10px 14px;
	}

	#notification p
	{
		margin: 0;
		line-height: 1.55;
		text-align: left;
	}

	#notification p a.notification-partner-link
	{
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-left: 0;
		margin-top: 8px;
	}

	#notification .container #notification-dismiss
	{
		top: 10px;
		right: 8px;
	}
}

@media (max-width: 360px)
{
	#notification p a .notification-link-arrow
	{
		margin-left: 6px;
	}
}

/**
 * Content Row Background
 *
 * This section uses the primary color by default but can be
 * changed to a different color or gradient if desired.
 *
 * Default: #1E40AF
 */
#content > .content-row.content-row-color,
#content > .content-row.content-row-color.content-row-split-left::after,
#content > .content-row.content-row-color.content-row-split-right::after
{
	background-color: #1E40AF;
}

/* Header logo: larger size, white on primary blue background */
#header .logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
#header .logo img {
	height: 44px;
	width: auto;
	max-width: none;
}
#header .logo-tagline {
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.95);
	line-height: 1.2;
}

/**
 * Footer Background
 *
 * The footer uses the primary color by default but can be
 * changed to a different color or gradient if desired. Make
 * sure to add the custom class to the body element.
 *
 * Default: #1E40AF
 */
 .footer-color
 {
 }

/* Main page hero image */
.hero-image-wrap {
	display: block;
	margin: 40px auto;
	max-width: 720px;
	border: 1px solid #1E40AF;
}
.hero-image-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}
.hero-blueprint-hidden {
	display: none !important;
}

.error-page-image
{
	max-width: 200px;
	height: auto;
}

/* Hero slider (vanilla JS) */
.hero-slider-wrap {
	min-height: 280px;
}
.hero-slider {
	position: relative;
	min-height: 280px;
}
.hero-slider__slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}
.hero-slider__slide.current {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}
.hero-slider__slide .container {
	margin: 0;
}
.hero-slider__nav {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hero-slider__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.35);
	cursor: pointer;
	transition: background 0.2s;
}
.hero-slider__dot:hover {
	background: rgba(255,255,255,0.6);
}
.hero-slider__dot.current {
	background: #fff;
}

/* Unified feature-set card polish */
#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box {
	max-width: 860px;
	margin: 0 auto;
	padding: 36px 0;
}

#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box .product-header,
#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box .product-features {
	padding-left: 40px;
	padding-right: 40px;
}

#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box .product-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	text-align: left;
}

#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box .product-features ul:last-of-type:not(:first-of-type) {
	margin-top: 0 !important;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box .product-features li {
	position: relative;
	padding-left: 24px;
	margin: 0 0 10px;
	line-height: 1.5;
}

#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box .product-features li::before {
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 2px;
	font-size: 12px;
	color: #1E40AF;
}

@media (max-width: 768px) {
	#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box .product-header,
	#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box .product-features {
		padding-left: 28px;
		padding-right: 28px;
	}

	#content > .content-row.content-row-gray .column-row.align-center-top > .column-66 .product-box .product-features {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}