/**
 * ProNet Hosting brand colour scheme
 *
 * Primary:    #402534
 * Secondaries: #6F4769, #966491, #57354E
 */

/**
 * 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: #0098ef
 */
.text-color-primary
{
	color: #402534 !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: #402534;
}

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: #402534;
}

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: #402534;
}

/**
 * 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: #c88fbe !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: #d9a9d1;
}

mark,button.button-secondary,.button.button-secondary
{
	background-color: #7f4f78;
	color: #ffffff;
}

#content > .content-row.content-row-color .pagination > li.active a
{
	border-color: #c88fbe;
}

button.button-secondary:hover,.button.button-secondary:hover
{
	background-color: #57354E;
	color: #ffffff;
}

/**
 * Header Background
 *
 * The header uses the primary color by default but can be
 * changed to a different color or gradient if desired.
 *
 * Default: #0098ef
 */
#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
{
	background-color: #57354E;
}

/**
 * Content Row Background
 *
 * This section uses the primary color by default but can be
 * changed to a different color or gradient if desired.
 *
 * Default: #0098ef
 */
#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: #402534;
	background-image: linear-gradient(135deg, #402534 0%, #57354E 100%);
}

/**
 * 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: #0098ef
 */
.footer-color
 {
	background-color: #2b1a24;
 }

/**
 * Modernisation and accessibility polish
 */
:root
{
	--pronethosting-primary: #402534;
	--pronethosting-primary-strong: #2b1a24;
	--pronethosting-accent: #7f4f78;
	--pronethosting-accent-light: #c88fbe;
	--pronethosting-text: #3b4656;
	--pronethosting-muted: #5f6d80;
	--pronethosting-surface: #ffffff;
	--pronethosting-surface-soft: #f6f7fa;
	--pronethosting-border: #dfe4ec;
	--pronethosting-focus: #1a73e8;
}

body
{
	color: var(--pronethosting-text);
	line-height: 1.65;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
#nav-overlay-open:focus-visible,
#nav-overlay-close:focus-visible,
.content-slider > ul li:focus-visible
{
	outline: 3px solid var(--pronethosting-focus);
	outline-offset: 3px;
	border-radius: 6px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible)
{
	outline: none;
}

.sr-only
{
	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;
}

.form-row-hidden
{
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

#header.header-light
{
	background-color: rgba(255, 255, 255, 0.98);
}

#header.header-shadow-scroll.active
{
	box-shadow: 0 10px 30px rgba(43, 26, 36, 0.12);
}

#header .logo img,
#nav-overlay .logo img
{
	max-width: 280px;
	height: auto;
}

#header nav .nav-primary > li > a:not(.button),
#header nav .nav-secondary > li > a
{
	border-radius: 6px;
}

#header nav .nav-primary > li:focus-within > ul
{
	display: block;
	animation: nav-primary-down 0.2s;
}

#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
{
	color: #ffffff;
	background-color: var(--pronethosting-primary);
	background-image: radial-gradient(circle at 20% 0%, rgba(200, 143, 190, 0.2), transparent 32%), linear-gradient(135deg, var(--pronethosting-primary-strong) 0%, var(--pronethosting-primary) 52%, #57354e 100%);
}

#content > .content-row.content-row-clouds::before,
#content > .content-row.content-row-clouds::after
{
	display: none;
}

#content > .content-row .content-slider .content-slider-inner .slide
{
	padding: 92px 0;
}

#content > .content-row .content-header.content-header-uppercase h1,
#content > .content-row .content-header.content-header-uppercase h2,
#content > .content-row .content-header.content-header-uppercase h3,
#content > .content-row .content-header.content-header-uppercase h4,
#content > .content-row .content-header.content-header-uppercase h5
{
	text-transform: none;
	letter-spacing: 0;
}

#content > .content-row .content-header.content-header-large h1
{
	font-size: 56px;
	line-height: 1.08;
}

#content > .content-row.content-row-color .content-header mark
{
	background-color: rgba(255, 255, 255, 0.16);
	color: #ffffff;
	border-radius: 8px;
	padding: 0 0.16em 0.06em;
}

#content > .content-row.content-row-color .content-header p
{
	color: rgba(255, 255, 255, 0.92);
}

#content > .content-row.content-row-color .text-color-secondary
{
	color: #f0c8e8 !important;
}

#content > .content-row .content-slider > ul
{
	bottom: 34px;
}

#content > .content-row .content-slider > ul li
{
	border-radius: 999px;
}

#content > .content-row.content-row-color .content-slider > ul li:not(.active)
{
	color: #e6d5e2;
}

#content > .content-row.content-row-gray
{
	background-color: var(--pronethosting-surface-soft);
}

.feature-box .feature-header,
.feature-box .feature-content,
.product-box,
.testimonial .testimonial-content,
#content > .content-row .content-box,
pre,
.pre-code,
table
{
	border-radius: 8px;
}

.product-box,
.feature-box .feature-content,
.testimonial .testimonial-content,
#content > .content-row .content-box
{
	border-color: var(--pronethosting-border);
	box-shadow: 0 16px 40px rgba(43, 26, 36, 0.08);
}

.feature-box .feature-header
{
	background: transparent;
}

.column-row.align-center-bottom
{
	align-items: stretch;
}

.column-row.align-center:has(> [class*="column-"] .icon-feature),
.column-row.align-center:has(> [class*="column-"] .icon-feature-large)
{
	align-items: stretch;
}

.column-row.align-center:has(> [class*="column-"] .icon-feature) > [class*="column-"],
.column-row.align-center:has(> [class*="column-"] .icon-feature-large) > [class*="column-"]
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.column-row.align-center-bottom > .column-20,
.column-row.align-center-bottom > .column-25,
.column-row.align-center-bottom > .column-30,
.column-row.align-center-bottom > .column-33,
.column-row.align-center-bottom > .column-40,
.column-row.align-center-bottom > .column-50,
.column-row.align-center-bottom > .column-60,
.column-row.align-center-bottom > .column-66,
.column-row.align-center-bottom > .column-70,
.column-row.align-center-bottom > .column-75,
.column-row.align-center-bottom > .column-80,
.column-row.align-center-bottom > .column-flex
{
	display: flex;
	flex-direction: column;
}

.column-row.align-center-bottom.text-align-center > [class*="column-"] > .icon-feature:first-child,
.column-row.align-center-bottom.text-align-center > [class*="column-"] > .icon-feature-large:first-child
{
	align-self: center;
	flex: 0 0 auto;
}

.column-row.align-center-bottom.text-align-center > [class*="column-"] > h3,
.column-row.align-center-bottom.text-align-center > [class*="column-"] > h4
{
	width: 100%;
}

.column-row.align-center-bottom.text-align-center > [class*="column-"] > p:last-child
{
	width: 100%;
}

.feature-box,
.product-box,
.testimonial
{
	height: 100%;
	box-sizing: border-box;
}

.feature-box,
.product-box
{
	display: flex;
	flex-direction: column;
}

.feature-box > p:last-child,
.product-box .product-order
{
	margin-top: auto;
}

.column-row:has(.product-box-popular) .product-box
{
	padding-top: 84px;
}

.column-row:has(.product-box-popular) .product-box.product-box-popular
{
	margin-top: 0;
	border-top: 2px solid var(--pronethosting-accent);
}

.column-row:has(.product-box-popular) .product-box .product-popular
{
	top: 0;
}

.testimonial
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.icon-feature
{
	height: 52px;
	line-height: 52px;
	font-size: 52px;
}

.icon-feature-large
{
	height: 112px;
	line-height: 112px;
	font-size: 112px;
	text-shadow: 5px 5px 0 rgba(74, 86, 105, 0.08);
}

.feature-box .feature-header .icon-feature,
.feature-box .feature-header .icon-feature-large
{
	padding: 24px 0;
}

.feature-box .feature-header:has(.icon-feature-large)
{
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-box .feature-header img,
.feature-box .feature-header video,
.feature-box .feature-header iframe,
.video-overlay.video-overlay-has-icon > img
{
	max-height: 360px;
	object-fit: cover;
}

.gallery:not(.gallery-slider) ul li img
{
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

button,
.button
{
	border-radius: 6px;
}

.testimonial .testimonial-author small,
blockquote footer,
.product-box .product-header p,
.product-box .product-features ul:last-of-type:not(:first-of-type),
table thead tr th,
table.table-layout-product-comparison tr:not(.product-feature-group) td:first-of-type,
.blog-article .blog-article-header ul li
{
	color: var(--pronethosting-muted) !important;
}

.footer-color #footer
{
	color: rgba(255, 255, 255, 0.82);
}

.footer-color #footer .footer-secondary:not(:first-child)
{
	border-color: rgba(255, 255, 255, 0.24);
}

/**
 * Accessibility: the template's default #a0abbc gray text colour fails
 * WCAG AA contrast (2.3:1) against white/light backgrounds. Darken it
 * to pass AA (4.5:1+) everywhere it's used - testimonials, captions,
 * secondary pricing lists, disclaimers, etc.
 */
.text-color-gray,
.product-box .product-header p,
.testimonial .testimonial-author small,
.product-box .product-features ul:last-of-type:not(:first-of-type),
table thead tr th,
table.table-layout-product-comparison tr:not(.product-feature-group) td:first-of-type,
.blog-article .blog-article-header ul li
{
	color: #566376 !important;
}

#header.header-light nav .nav-secondary li a,
#header.header-gray nav .nav-secondary li a
{
	color: #566376;
}

/**
 * Misc brand touch-ups
 */
.product-box.product-box-popular .product-popular,
.product-box .product-popular
{
	background-color: #7f4f78;
}

@media (max-width: 768px), (max-height: 640px)
{
	body
	{
		padding-top: 78px;
	}

	#header,
	#nav-overlay
	{
		padding: 14px 0;
	}

	#nav-overlay-open,
	#nav-overlay-close
	{
		width: 38px;
		height: 38px;
		font-size: 20px;
		line-height: 38px;
		text-align: center;
		border: 2px solid var(--pronethosting-border);
		border-radius: 8px;
	}

	#content > .content-row .content-slider .content-slider-inner .slide
	{
		padding: 56px 0 82px;
	}

	.icon-feature
	{
		height: 36px;
		line-height: 36px;
		font-size: 36px;
	}

	.icon-feature-large
	{
		height: 64px;
		line-height: 64px;
		font-size: 64px;
		text-shadow: 3px 3px 0 rgba(74, 86, 105, 0.08);
	}

	.feature-box .feature-header .icon-feature,
	.feature-box .feature-header .icon-feature-large
	{
		padding: 18px 0;
	}

	.feature-box .feature-header:has(.icon-feature-large)
	{
		min-height: 100px;
	}

	#content > .content-row .content-header.content-header-large h1
	{
		font-size: 34px;
		line-height: 1.18;
	}

	#content > .content-row .content-header.content-header-large p
	{
		font-size: 17px;
		line-height: 1.7;
	}

	#content > .content-row .content-slider > ul
	{
		bottom: 28px;
	}

	#content > .content-row .content-slider > ul li
	{
		width: 13px;
		height: 13px;
		margin: 0 8px;
	}
}

@media (max-width: 480px)
{
	.container,
	.container.container-full-width,
	#content > .content-row .content-slider .content-slider-inner .slide > .container
	{
		margin-left: 22px;
		margin-right: 22px;
	}

	#content > .content-row
	{
		padding: 38px 0;
	}

	#content > .content-row .column-row
	{
		row-gap: 8px;
	}

	button,
	.button
	{
		max-width: 100%;
		white-space: normal;
	}

	.icon-feature
	{
		height: 32px;
		line-height: 32px;
		font-size: 32px;
	}

	.icon-feature-large
	{
		height: 56px;
		line-height: 56px;
		font-size: 56px;
		text-shadow: 2px 2px 0 rgba(74, 86, 105, 0.08);
	}

	.feature-box .feature-header .icon-feature,
	.feature-box .feature-header .icon-feature-large
	{
		padding: 16px 0;
	}

	.feature-box .feature-header:has(.icon-feature-large)
	{
		min-height: 88px;
	}

	#header .logo,
	#nav-overlay .logo
	{
		max-width: calc(100% - 74px);
	}

	#header .logo img,
	#nav-overlay .logo img
	{
		max-width: 224px;
	}
}