/*<meta />*/

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

@font-face 
{
	font-family: Brockmann;
	src: url('../Fonts/Brockmann-Regular-webfont.ttf');
	src: url('../Fonts/Brockmann-SemiBold-webfont.ttf');
	src: url('../Fonts/Brockmann-Medium-webfont.ttf');
}

html,
body
{
	font-size: 100%;
}

body
{
	font-family: Brockmann, -apple-system, sans-serif;
}

h1
{
	font: Brockmann-SemiBold;
	font-size: 24px;
	line-height: 24px;
}

h2
{
	font: Brockmann-Medium;
	font-size: 19px;
	line-height: 19px;
	margin-block-start: 1.6em;
}

h3
{
	font-weight: bold;
	font-size: 18px;
	line-height: 18px;
}

h4
{
	font-weight: bold;
	font-size: 16px;
	line-height: 16px;
}

h5
{
	font-size: 16px;
	line-height: 16px;
}

h6
{
	font-size: 16px;
	line-height: 16px;
}

p
{
	font-size: 16px;
	line-height: 18px;
	font-weight: normal;
	margin-top: 8px;
}

ol,
ul,
dl
{
	font-size: 18px;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 20px;
}

img,
iframe
{
	border: none;
	max-width: 100%;
}

a,
a:visited
{
	color: #0066FF;
	transition: color 0.1s ease;
}

a:hover
{
	color: #003077;
}

.sidenav-wrapper ul.sidenav li a:hover
{
	background-color: transparent;
	color: #848F98;
}

.hub-dropdown li a:hover
{
	background-color: rgb(61, 61, 61);
}

.hub-dropdown a:hover
{
	color: #ffffff;
	text-decoration: none;
}

.lang-wrapper .select-language-drop-down a:hover
{
	background-color: #f5f5f5;
	color: #000;
}

MadCap|expandingHead
{
	font-style: italic;
	font-weight: normal;
	cursor: hand;
	text-decoration: none;
	color: #006600;
}

MadCap|expandingBody
{
	color: #777777;
	font-style: italic;
}

MadCap|dropDownHotspot
{
	cursor: hand;
	font-style: italic;
	text-decoration: none;
	color: #006600;
}

/* IMPORT FROM OLD WP STYLESHEET */

.wp-block-genesis-blocks-gb-column
{
	margin: 16px 0 24px;
	padding: 0.5em 1em;
}

.gb-block-layout-column-block-layout-column-inner h6
{
	font-size: 1.2em;
	font-weight: 500;
}

.info-box.wp-block-genesis-blocks-gb-column,
.info-box.wp-block-genesis-blocks-gb-columns,
.info-box.wp-block-genesis-blocks-gb-column-column
{
	background-color: #e6e6ff;
	border-left: 5px solid #9966ff;
}

.warning-box.wp-block-genesis-blocks-gb-column,
.warning-box.wp-block-genesis-blocks-gb-columns,
.warning-box.wp-block-genesis-blocks-gb-column
{
	background-color: #fff1d2;
	border-left: 5px solid #ffcc33;
}

.tip-box.wp-block-genesis-blocks-gb-column,
.tip-box.wp-block-genesis-blocks-gb-columns,
.tip-box.wp-block-genesis-blocks-gb-column
{
	background-color: #deffe9;
	border-left: 5px solid #00cc99;
}

.info-box .gb-block-layout-column-inner,
.tip-box .gb-block-layout-column-inner,
.warning-box .gb-block-layout-column-inner
{
	background: inherit;
}

div.gb-font-size-18.gb-block-notice[class*="wp-block-genesis"] p
{
	font-size: 1em;
	padding: 0;
}

.gb-block-notice .gb-notice-title p
{
	padding: 0;
}

.wp-block-genesis-blocks-gb-notice.info-box,
.wp-block-atomic-blocks-gb-notice.note-box
{
	background-color: #999999 !important;
}

.info-box .gb-notice-text,
.note-box .gb-notice-text
{
	border-color: #999999 !important;
}

.wp-block-genesis-blocks-gb-notice.warning-box
{
	background-color: #ffcc33 !important;
}

.warning-box .gb-notice-text
{
	border-color: #ffcc33 !important;
}

.wp-block-genesis-blocks-gb-notice.tip-box
{
	background-color: #66cc99 !important;
}

.tip-box .gb-notice-text
{
	border-color: #66cc99 !important;
}

/* CUSTOM STYLING */
/* GENEREL */

.off-canvas-wrapper
{
	min-height: 100vh;
	min-height: 100dvh;
	overflow: auto;
}

.off-canvas-content
{
	max-height: none;
	box-shadow: none;
}

.main-section
{
	overflow-y: visible;
}

ol > li,
ul > li,
dl > li
{
	margin: 0 0 8px;
}

/* HEADER */

.body-container
{
	padding: 16px 40px 40px;
	overflow: visible;
}

MadCap|footnote
{
	font-style: italic;
}

MadCap|breadcrumbsProxy
{
	border-bottom-color: transparent;
}

li
{
	font-size: 16px;
	font-style: normal;
}

pre
{
	font-size: 14px;
}

@media screen and (max-width: 800px)
{
	.body-container
	{
		padding: 16px 8px 40px;
	}
}

.off-canvas-wrapper-inner .title-bar-container
{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

nav.title-bar
{
	border-bottom: 1px solid #dde7ee;
	background-color: white;
	padding: 10px 0;
}

/* SIDENAV */

.sidenav-layout
{
	max-height: none;
}

.sidenav-wrapper
{
	background-color: #f5f8fa;
	padding-bottom: 24px;
	overflow: visible;
}

.sidenav-wrapper ul.sidenav li a
{
	color: #333;
	border-color: #dde7ee;
}

.sidenav-container > ul > li > a
{
	font-weight: 600;
}

ul.sidenav li.is-accordion-submenu-parent > a span.submenu-toggle-container span.submenu-toggle
{
	border-top-color: #666;
}

ul.sidenav li.is-accordion-submenu-parent > a span.submenu-toggle-container:hover span.submenu-toggle
{
	border-top-color: #848F98;
}

ul.sidenav ul > li > a
{
	margin-left: 0.5em;
}

ul.sidenav ul ul > li > a
{
	margin-left: 2em;
}

ul.sidenav ul ul ul > li > a
{
	margin-left: 3.5em;
}

ul.sidenav ul ul ul ul > li > a
{
	margin-left: 5em;
}

/* MAIN CONTENT */

#mc-main-content
{
	max-width: 1200px;
	margin: 0 auto;
}

.backlink-container
{
	display: none;
}

.manual-title
{
	font-size: 2.5rem;
	text-align: center;
}

.is-layout-flow
{
	margin-top: 30px;
}

/* General Layout Overrides for Flare */

.central-account-wrapper
{
	display: none !important;
}

.nav-search-wrapper
{
	order: unset;
}

.title-bar-layout
{
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 0 20px;
	position: relative;
}

.title-bar-layout .logo-wrapper
{
	order: unset;
	min-height: 40px;
}

.title-bar-layout .logo-wrapper .logo
{
	background-size: contain;
	width: 215px;
	height: 40px;
}

/* Hide the old top navigation text links if they exist */

.navigation-wrapper
{
	display: none !important;
}

/* Center the Search Bar */

.nav-search-wrapper
{
	flex-grow: 1;
	max-width: 600px;
}

/* Modify Flare Search Inputs to look softer (optional polish) */

.search-field
{
	border-radius: 4px !important;
	background-color: #f4f4f4 !important;
	border: 1px solid #e0e0e0 !important;
}

/* --- Custom Right Section --- */

.custom-header-right
{
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
	/* Context for dropdown */
}

.lang-wrapper
{
	visibility: hidden;
}

.header-btn
{
	background: none;
	border: 1px solid #e0e0e0;
	border-radius: 12.5px;
	cursor: pointer;
	padding: 8px 16px;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #333;
	transition: background 0.2s;
}

.header-btn:hover
{
	background: #f9f9f9;
}

.header-btn.icon-only
{
	padding: 8px;
	border: none;
}

.header-btn.icon-only:hover
{
	background: #eee;
	border-radius: 50%;
}

.lang-wrapper .header-btn svg
{
	fill: black;
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}

.lang-wrapper .header-btn.active svg
{
	transform: rotate(0deg);
}

/* --- Product Switcher (Logo Area) --- */

.product-switcher-wrapper
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* --- Dropdowns --- */

.custom-dropdown-menu
{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 280px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 1000;
	margin-top: 10px;
	padding: 10px 0;
	text-align: left;
}

.custom-dropdown-menu.active
{
	display: block;
}

.dropdown-section-title
{
	font-size: 11px;
	text-transform: uppercase;
	color: #999;
	padding: 8px 20px 4px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.dropdown-item
{
	display: block;
	padding: 8px 20px;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	cursor: pointer;
}

.dropdown-item:hover
{
	background-color: #f5f5f5;
	color: #000;
}

/* Specific positioning for right-side apps menu */

#apps-dropdown
{
	right: 0;
	left: auto;
	width: 200px;
}

.imgfloatleft
{
	float: left;
	padding-right: 20px;
}

/* Base alert paragraph */

p.tip,
p.note,
p.warning,
p.grey,
p.error
{
	border-radius: 16px;
	line-height: 18px;
	overflow: hidden;
	padding: 15px 60px;
	/* hack to load the required icon */
	background-image: url('../Images/Icons/info.svg');
	background-position: -9999px -9999px;
	/* off-screen */
	background-repeat: no-repeat;
	background-size: 0 0;
}

/* Base pill style shared by all alert types */

p.tip,
p.note,
p.warning,
p.error,
p.grey
{
	border-radius: 16px;
	line-height: 18px;
	overflow: hidden;
	padding: 15px 60px;
	position: relative;
	/* icon as mask so it takes currentColor */
	--icon-size: 18px;
	--icon-left: 18px;
}

p.tip::before,
p.note::before,
p.warning::before,
p.error::before,
p.grey::before
{
	content: "";
	position: absolute;
	left: var(--icon-left);
	top: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	transform: translateY(-50%);
	/* Use a single monochrome SVG as mask; it will be filled with currentColor */
	-webkit-mask: url('../Images/Icons/info.svg') no-repeat center / contain;
	mask: url('../Images/Icons/info.svg') no-repeat center / contain;
	background-color: currentColor;
	/* actual visible color */
}

/* Colors (text/icon share the same color via currentColor) */

p.tip
{
	color: #16A15E;
	/* green */
	background-color: #E8FDEE;
	/* light green bg */
}

p.note
{
	color: #1677FF;
	/* blue */
	background-color: #DBEAFF;
	/* light blue bg */
}

p.warning
{
	color: #A58304;
	/* yellow/brown */
	background-color: #FBF1D6;
	/* light yellow bg */
}

/* Additional variants requested */

p.error
{
	color: #D92D20;
	/* red */
	background-color: #FEE4E2;
	/* light red bg */
}

p.grey
{
	color: #6B7280;
	/* grey */
	background-color: #F3F4F6;
	/* light grey bg */
}

/* --- Apps Icon Button --- */

.header-btn.icon-only
{
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	transition: background 0.2s;
}

.header-btn.icon-only:hover,
.header-btn.icon-only.active
{
	background-color: black;
	color: #1890ff;
	/* KeyShot Blue */
	border-color: white;
	box-shadow: 0 0 0 2px #1890ff;
}

.header-btn.icon-only:hover svg,
.header-btn.icon-only.active svg
{
	fill: white;
}

.header-btn.icon-only svg
{
	width: 26px;
}

/* --- The Hub Dropdown Container --- */

.hub-dropdown
{
	display: none;
	/* Hidden by default */
	position: absolute;
	top: calc(100% + 20px);
	right: 0;
	width: 215px;
	background-color: black;
	color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	padding: 16px;
	z-index: 1000;
	font-family: sans-serif;
}

.hub-dropdown.active
{
	display: block;
}

/* --- Dropdown Header (Go to...) --- */

.hub-dropdown > div:first-child
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #333;
	padding-bottom: 12px;
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 700;
}

.hub-dropdown li a
{
	padding: 8px !important;
	border-radius: 12px;
}

.hub-dropdown ul span a
{
	padding: 0 !important;
}

.hub-dropdown > div:first-child span:first-child
{
	color: #ffffff;
}

.hub-dropdown > div:first-child a
{
	color: #ffffff;
	text-decoration: underline;
	font-weight: 600;
}

/* --- Dropdown List --- */

.hub-dropdown ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.hub-dropdown li
{
	margin-bottom: 8px;
}

.hub-dropdown li:last-child
{
	margin-bottom: 0;
}

.hub-dropdown a
{
	display: block;
	color: #e0e0e0;
	text-decoration: none;
	font-size: 16px;
	padding: 8px 0;
	transition: color 0.2s;
}

/* --- Product Switcher Wrapper --- */

.product-switcher-wrapper
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* --- Toggle Button --- */

.product-toggle-btn
{
	background: #CED4DA;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	padding: 7px 5px;
	color: white;
	transition: background 0.2s;
	border-radius: 4px;
}

.product-toggle-btn:hover
{
	background-color: black;
}

.product-toggle-btn.active
{
	background: black;
}

/* Rotating the chevron when active */

.product-toggle-btn svg
{
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}

.product-toggle-btn.active svg
{
	transform: rotate(0deg);
}

/* --- Dropdown Menu Container --- */

.product-dropdown-menu
{
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: 260px;
	background: #ffffff;
	border: 1px solid #e1e1e1;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	padding: 12px 0;
	z-index: 1000;
	text-align: left;
}

.product-dropdown-menu.active
{
	display: block;
}

/* --- Menu Sections --- */

.product-menu-section-title
{
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: #999;
	/* Light gray text for headers like KEYSHOT STUDIO */
	padding: 8px 20px 4px;
	letter-spacing: 0.5px;
}

.product-menu-item
{
	display: block;
	padding: 8px 20px;
	color: black !important;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.1s;
}

.product-menu-item:hover
{
	background-color: #f5f5f5;
	color: #000;
}

/* --- 1. Hide Original Flare Language Elements --- */
/* Use visibility:hidden + absolute so it takes no space but is technically 'there' for JS to click */

.body-container .select-language-button
{
	visibility: hidden !important;
	position: absolute !important;
	top: -9999px !important;
	opacity: 0 !important;
}

.body-container .select-language-drop-down
{
	display: none !important;
}

/* Hide the original dropdown container initially so it doesn't pop up in the wrong place */

.body-container .select-language-drop-down
{
	display: none !important;
}

/* --- 2. Styling the Hijacked Dropdown (Once moved) --- */
/* We force the moved element to behave like our custom dropdowns */

.lang-wrapper .select-language-drop-down
{
	display: none !important;
	/* Default hidden */
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 180px;
	background: #ffffff;
	border: 1px solid #e1e1e1;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	padding: 8px 0;
	z-index: 1000;
	text-align: left;
}

/* Active state for the moved dropdown */

.lang-wrapper .select-language-drop-down.active
{
	display: block !important;
}

/* Styling the links inside Flare's generated list */

.lang-wrapper .select-language-drop-down ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.lang-wrapper .select-language-drop-down li
{
	margin: 0;
}

.lang-wrapper .select-language-drop-down a
{
	display: block;
	padding: 8px 20px;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	transition: background 0.2s;
}

.search-submit-wrapper
{
	right: unset;
	font-size: 14px;
	top: 7px !important;
	left: 7px;
	width: 27px;
	height: 27px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.search-submit
{
	width: 14px !important;
	height: 14px !important;
	background-size: contain !important;
}

.search-bar .search-field
{
	color: black;
	padding: 10px 0 10px 35px;
	font-size: 14px;
	height: 40px;
	border-radius: 12px !important;
	background-color: #F5F8FA !important;
}

@media only screen and (max-width: 1279px)
{
	nav.title-bar .menu-icon
	{
		top: 24%;
		right: -11px;
	}

	nav.title-bar .menu-icon span
	{
		filter: brightness(0) saturate(100%);
	}

	.nav-search-wrapper
	{
		max-width: unset;
	}

	.custom-header-right
	{
		position: absolute;
		top: 1px;
		right: 61px;
	}
}

p.tip
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	color: #16A15E;
	background-color: #E8FDEE;
	background-image: url('../Images/Icons/tip.svg');
	background-size: 18px 18px;
	background-position: 18px center;
	background-repeat: no-repeat;
	border-radius: 16px;
	line-height: 18px;
	overflow: hidden;
	padding: 15px 60px;
}

p.note
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	color: #0066FF;
	background-color: #DBEAFF;
	background-image: url(../Images/Icons/info.svg);
	background-size: 18px 18px;
	background-position: 18px center;
	background-repeat: no-repeat;
	border-radius: 16px;
	line-height: 18px;
	overflow: hidden;
	padding: 15px 60px;
}

p.warning
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	color: #A58304;
	background-color: #FBF1D6;
	background-image: url('../Images/Icons/warning.svg');
	background-size: 18px 18px;
	background-position: 18px center;
	background-repeat: no-repeat;
	border-radius: 16px;
	line-height: 18px;
	overflow: hidden;
	padding: 15px 60px;
}

@media screen and (max-width: 450px)
{
	.title-bar-layout .logo-wrapper .logo
	{
		width: 174px;
		height: 33px;
	}

	.custom-header-right
	{
		gap: 10px;
	}
}