/*<meta conditions="g_topics.global" />*/

/* CLARIVATE CSS */

@font-face 
{
	font-family: "bodyFont";
	src: local("RegularClarivate-RegularWEB"), url("../fonts/RegularClarivate-RegularWEB.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face 
{
	font-family: "headerFont";
	src: local("RegularClarivate-SemiBoldWEB"), url("../fonts/RegularClarivate-SemiBoldWEB.woff") format("woff"), url("../fonts/RegularClarivate-SemiBoldWEB.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
}

/* ===============================================
   1. CSS VARIABLES
   =============================================== */

:root
{
	/* colors */
	--purple: #5e33bf;
	--warm-purple: #b175e1;
	--pastel-purple: #faf5ff;
	--primary: #5e33bf;
	--secondary: #b175e1;
	--success: #93ff9e;
	--info: #0dcaf0;
	--warning: #f0fe4f;
	--danger: #ed5564;
	--light: #f2f2f2;
	--dark: #202124;
	--black: #000000;
	--off-black: #202124;
	--dark-gray: #5f6368;
	--medium-gray: #babcbe;
	--regular-gray: #dfe1e2;
	--light-gray: #f2f2f2;
	--white: #ffffff;
	--note: var(--dark-gray);
	--note-bg: var(--pastel-purple);
	--important: var(--dark-gray);
	--important-bg: var(--success);
	--warning-bg: var(--warning);
	--danger-bg: var(--light);
	/* links */
	--link-color: #5e33bf;
	--link-decoration: underline;
	--link-hover-color: #4b2999;
	--link-hover: #4b2999;
	--code-color: #d63384;
	--body-color: #2a2b2d;
	--body-color-rgb: 42, 43, 45;
	--secondary-color: rgba(42, 43, 45, 0.75);
	--secondary-bg: #e9ecef;
	--tertiary-color: rgba(42, 43, 45, 0.5);
	--tertiary-bg: #f8f9fa;
	--highlight-color: #2a2b2d;
	/* fonts */
	--font-semi: "headerFont", "Clarivate Semibold", "Avenier Next LT Pro", sans-serif;
	--font-regular: "bodyFont", "Clarivate Regular", Arial, sans-serif;
	--font-monospace: Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--body-font-size: 1rem;
	--body-line-height: 1.5;
	--h1-font-size: 3rem;
	--h2-font-size: 2.5rem;
	--h3-font-size: 2rem;
	--h4-font-size: 1.5rem;
	--h5-font-size: 1.25rem;
	/*borders */
	--border: var(--border-width) var(--border-style) var(--border-color);
	--border-link: var(--border-width) var(--border-style) var(--link-color);
	--border: var(--border-width) var(--border-style) var(--link-hover-color);
	--border-width: 1px;
	--border-style: solid;
	--border-color: #dee2e6;
	--border-color-translucent: rgba(0, 0, 0, 0.175);
	--border-radius: 0.375rem;
	--border-radius-sm: 0.25rem;
	--border-radius-lg: 0.5rem;
	--border-radius-xl: 1rem;
	--border-radius-xxl: 2rem;
	--border-radius-2xl: var(--border-radius-xxl);
	--border-radius-pill: 50rem;
	/*box shadow */
	--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	--box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	--box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
	--box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
	/* Card component */
	--card-gap: 1rem;
	--card-padding: 1rem;
	--card-width: 250px;
	/* ideal card width */
	--card-min: 120px;
	--card-max: 360px;
	--color-bg: #fff;
	--color-text: #222;
	--color-primary: #6a2fbf;
	/* purple title */
	--link-color: #6a2fbf;
	--link-hover: #5a20b0;
	--card-border: 1px solid var(--link-color);
	--card-radius: 0;
	--card-shadow: 0 6px 18px rgba(22, 22, 60, 0.06);
	--transition-fast: 200ms ease;
	/* screen width */
	--screen-width: 100vw;
	--screen-max-width: 1400px;
	/* image widths */
	--img-xs: 100px;
	--img-sm: 200px;
	--img-med: 500px;
	--img-lg: 800px;
	--img-xl: 1000px;
	--img-icon: 1.5rem;
}

/* ===============================================
   2. BASE / RESET
   =============================================== */

.row.outer-row.sidenav-layout
{
	padding: 0;
}

body
{
	font-family: var(--font-regular);
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
	scroll-behavior: smooth;
	margin-top:-10px;
}

/* ===============================================
   3. LAYOUT & ARCHITECTURE
   =============================================== */

html.portal nav.sidenav-wrapper
{
	display: none;
}

#mc-main-content
{
	margin: 0 auto 0 20px;
	max-width: var(--screen-max-width);
}

.body-container
{
	padding: 0;
}

.sidenav-container
{
	padding-top: 10px;
}

/* Sidemenu */


ul.sidenav li
{
	border-bottom: 1px solid var(--light-gray);
	padding-right: 0;
}

/* mini-toc  */

div.MCMiniTocBox_0.miniToc.nocontent
{
	border: none;
}

a.MiniTOC1:link
{
	color: var(--purple);
	font-weight: normal;
}

/* last updated text */

.last-updated
{
	text-align: right;
	padding: 20px 50px 0 0;
}

/* ===============================================
   4. HERO / INTRODUCTION
   =============================================== */

div.pastel-purple
{
	background: var(--warm-purple);
	padding: 80px;
	text-align: center;
}

div.pastel-purple h1
{
	font-size: 40px;
}

a.button-lg
{
	border: 1px solid var(--link-color);
	padding: 30px;
	margin: 120px 0 0 0;
	border-radius: 4px;
	font-family: var(--font-semi);
}

a.button-lg:hover
{
	background-color: var(--link-hover);
	text-decoration: none;
	color: white;
}

ul.off-canvas-list a
{
	background-color: none true;
	text-decoration: none;
}

ul.off-canvas-list a:hover
{
	background-color: var(--pastel-purple) true;
	text-decoration: none;
}

a.MCBreadcrumbsLink:hover
{
	text-decoration: none;
}

/* ===============================================
   6. TYPOGRAPHY
   =============================================== */

/* Headings */

h1
{
	margin: 0;
	font-family: var(--font-semi);
	font-size: var(--h1-font-size);
	line-height: 110%;
	color: var(--purple);
	width: 100%;
	padding-bottom: 20px;
}

h2,
h3,
h4,
h5
{
	font-family: var(--font-semi);
	font-weight: 600;
	color: black;
	margin: 20px 0 0;
}

h2
{
	font-size: var(--h2-font-size);
	line-height: 120%;
	/* text-align: left; */
	/* margin: 1.5rem auto; */
	/* max-width: var(--screen-max-width); */
}

h3
{
	font-size: var(--h3-font-size);
	line-height: 110%;
}

h4
{
	font-size: var(--h4-font-size);
	line-height: 130%;
}

h5
{
	font-size: var(--h5-font-size);
	line-height: 130%;
}

/* Paragraphs */

p
{
	font-family: var(--font-regular);
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
	margin: 0 0 12px;
}

p.lead
{
	font-family: var(--font-semi);
	font-size: 24px;
	font-weight: 600;
}

p.label
{
	font-size: 14px;
}

p.stories
{
	font-size: 12px;
}

.ToDo
{
	font-family: var(--font-semi);
	border-bottom: 1px solid var(--dark-gray);
	margin: 20px 0 10px;
}

/* figure caption */

p.FigureCaption
{
	color: var(--off-black);
	padding-top: 0;
	position: relative;
	top: -6px;
	margin-block-start: 0;
	font-size: 90%;
}

/* table caption */

caption
{
	text-align: left;
	font-size: 90%;
	color: var(--off-black);
	padding-top: 0;
	position: relative;
	top: 0;
	margin-block-start: 0;
}

/* ==== SPANS ===============================  */

strong
{
	font-family: var(--font-semi);
	font-weight: 600;
}

.ScreenElement
{
	font-family: var(--font-semi);
}

.EnteredText
{
	font-family: var(--font-monospace);
}

/* Links */

a,
xref,
:link
{
	color: var(--link-color);
	text-decoration: none;
}

a:hover,
xref:hover,
:link:hover
{
	color: var(--link-hover);
	text-decoration: underline;
}

/* -----------------  Lists  ---------------  */

li
{
	padding-left: 10px;
}

ol,
ul
{
	padding-inline-start: 24px;
}

/* ------------  Notes, Info, and Warnings ------------------- */
div.Permissions {
    position: relative;
    margin: 1em 0;
    overflow: auto;
    padding: 1em;
    border-top: 1px solid var(--purple);
    border-bottom: 1px solid var(--purple);
}

div.Permissions.Permissions {
    padding-left: 8em;
}

div.Permissions.VideoRN{
    border: none;
}


div.Permissions::before {
    color: var(--purple);
    position: absolute;
    left: .1em;
}

div.Permissions.Permissions::before {
    content: "Permissions:";
    text-transform: uppercase;
    font-family: var(--font-semi);
    top: 1em;
}

div.Permissions .BodyText,div.Permissions p,div.Permissions ul,div.Video .BodyText,div.Video p,div.Video ul,div.VideoRN .BodyText,div.VideoRN p,div.VideoRN ul,div.eLearning .BodyText,div.eLearning p,div.eLearning ul {
    margin: 0;
}

svg
{
	color: purple;
}

.note,
p.note,
div.note,
p.Note,
div.Note,
div.disclaimer
{
	border: 1px solid var(--note);
	padding: 10px 10px 10px 40px;
	background-color: var(--note-bg);
	position: relative;
	background-image: url("../Images/Global/Icons/note.svg");
	background-position-x: 5px;
	background-position-y: 5px;
	background-repeat: no-repeat;
	background-size: 30px;
	min-height: 40px;
	margin-bottom: 20px;
}

.important,
p.important,
div.important,
p.Important,
div.Important
{
	font-family: var(--font-semi);
	border: 2px solid var(--important);
	padding: 10px 10px 10px 40px;
	background-color: var(--important-bg);
	position: relative;
	background-image: url("../Images/Global/Icons/important.svg");
	background-position-x: 5px;
	background-position-y: 5px;
	background-repeat: no-repeat;
	background-size: 30px;
	min-height: 40px;
	margin-bottom: 20px;
}

.warning,
p.warning,
div.warning,
p.Warning,
div.Warning
{
	font-family: var(--font-semi);
	border: 2px solid var(--dark-gray);
	padding: 10px 10px 10px 40px;
	background-color: var(--warning-bg);
	position: relative;
	background-image: url("../Images/Global/Icons/warning.svg");
	background-position-x: 5px;
	background-position-y: 5px;
	background-repeat: no-repeat;
	background-size: 30px;
	min-height: 40px;
	margin-bottom: 20px;
}

.Video,
.video
{
	position: relative;
	background-image: url("../Images/Global/Icons/video.svg");
	background-position-x: 0px;
	background-position-y: 0px;
	background-repeat: no-repeat;
	background-size: 30px;
	min-height: 50px;
	padding-left: 40px;
	padding-top: 5px;
	font-family: var(--font-semi);
}

div.disclaimer
{
	background-image: none;
	background-color: var(--pastel-purple);
	border-color: var(--warm-purple);
}

div.disclaimer:before
{
	content: 'Disclaimer';
	font-family: var(--font-semi);
	font-size: 125%;
}

.author_note {
	border: var(--border);
	padding: 10px 10px 10px 40px;
	background-color: yellow;
	position: relative;
	min-height: 40px;
	margin-bottom: 20px;
	display:none;
}

.author_note:before {
content:'AUTHOR NOTE';
font-family:var(--font-semi);
display:block;
}

/*.embed-video,
iframe.youtube-player_0
{
	width: 500px;
	height: 306px;
}*/

/* ===============================================
   Tables 
=============================================== */

table
{
	border: 1px solid var(--off-black);
	padding: 0px;
	border-collapse: collapse;
}

thead tr
{
	background: var(--off-black);
	color: white;
}

tbody td
{
	padding: 5px 10px;
	border: 1px solid var(--dark-gray);
}

tbody tr:nth-child(even)
{
	background-color: var(--light-gray);
}

tbody tr:nth-child(odd)
{
	background-color: #fff;
}

/* ==============================sticky topic menus ===================*/

/* Sticky menu container (drawer style on mobile) 

.topic-subheads
{
	position: fixed;
	top: 230px;
	right: 0;
	width: 250px;
	height: auto;
	overflow-y: auto;
	background: #f9f9f9;
	border-left: 1px solid #ccc;
	padding: 15px;
	z-index: 1001;
	box-shadow: -2px 0 6px rgba(0, 0, 0, 0.15);
	transform: translateX(100%);
	transition: transform 0.4s ease;
}

.topic-subheads.open
{
	transform: translateX(0);
}

.topic-subheads h3
{
	margin-top: 0;
	font-size: 16px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 5px;
	color: var(--primary);
}

.topic-subheads ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.topic-subheads li
{
	margin: 6px 0;
}

.topic-subheads a
{
	text-decoration: none;
	color: var(--link-color);
	font-size: 14px;
}

.topic-subheads a:hover
{
	color: var(--link-hover);
	text-decoration: underline;
}

.topic-subheads a.active
{
	color: var(--link-hover);
	font-weight: bold;
}

.topic-subheads li.h3-link
{
	margin-left: 15px;
	font-size: 13px;
}

/* Toggle button 

.toggle-menu
{
	position: fixed;
	top: 10px;
	right: 10px;
	background: var(--link-color);
	color: white;
	border: none;
	padding: 8px 12px;
	font-size: 14px;
	cursor: pointer;
	z-index: 1100;
	border-radius: 4px;
}

/* Overlay 

.overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 1000;
}

.overlay.visible
{
	opacity: 1;
	pointer-events: auto;
}
*/

nav#toc-menu
{
	display: none;
}

button.toggle-menu
{
	display: none;
}

/* Back to Top button */

.back-to-top
{
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: var(--link-color);
	color: white;
	border: none;
	padding: 10px 15px;
	font-size: 14px;
	cursor: pointer;
	border-radius: 4px;
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease;
	z-index: 1200;
}

.back-to-top.visible
{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	background-color: var(--link-color);
}

section
{
	margin: 60px 0;
}

.code
{
	font-family: var(--font-monospace);
}

/* ===============================================
   6.1 Images 
=============================================== */

img
{
	height: auto;
	width: auto;
	max-width: var(--screen-max-width);
}

img.hero
{
	max-width: 100vw;
}

img.icon
{
	height: var(--img-icon);
	padding: 0 3px;
	border: none;
}

img.xs
{
	width: 100%;
	max-width: var(--img-xs);
}

img.sm
{
	width: 100%;
	max-width: var(--img-sm);
}

img.med
{
	width: 100%;
	max-width: var(--img-med);
}

img.lg
{
	width: 100%;
	max-width: var(--img-lg);
}

img.xl
{
	width: 100%;
	max-width: var(--img-xl);
}

.ImageBorder
{
	border: 1px solid var(--dark-gray);
	padding: 5px;
	margin: 20px 0;
}

/* ==========================================================================
   Card components
   ========================================================================== */

article.card *
{
	max-width: 100%;
}

img.card-image
{
	padding: 0;
	margin: 0;
}

/* ---------------------------
   Reset / base
   --------------------------- */

.card-group,
.card-container
{
	margin: 0 0 var(--card-gap) 0;
	padding: 0;
	list-style: none;
	border: none;
}

/* Generic .card base (used for all card types) */

.card
{
	box-sizing: border-box;
	position: relative;
	background: var(--color-bg);
	color: var(--color-text);
	overflow: hidden;
}

/* ---------------------------
   Card layout (container)
   If flex is available prefer flexbox.
   --------------------------- */

.card-container
{
	display: block;
	gap: var(--card-gap);
	margin: 0px auto 40px;
	align-items: start;
	padding: 0;
	border: none;
	list-style: none;
	width: 100%;
}

div#cards
{
	padding: 0;
	margin: 20px auto;
	max-width: var(--screen-width);
}

/* Prefer flexbox when supported (keeps your earlier behavior) */
/* Non-flex / non-grid fallback spacing for .card when used outside .card-container */

.card
{
	padding: var(--card-padding);
	min-width: var(--card-width);
	max-width: 100%;
	border: 1px solid var(--primary);
	vertical-align: top;
}

.card-content
{
	padding: 0;
	width: 90%;
	margin: 0 auto 20px;
	text-align: center;
}

/*div#cards article.card
{
	padding: 0;
	flex: 1 20%;
	width: 20%;
	max-width: 240px;
}
*/

article.card .card-media
{
	padding: 0;
}

.card-footer a.btn-learn
{
	padding: 10px 20px;
}

div.card-icon > p.card-description
{
	margin: 20px auto;
}

.card-header img
{
	display: inline-block;
	width: auto;
	height: 50px;
	/* enable if using images */
	object-fit: contain;
	margin-right: 10px;
}

/* Title styles (shared) */

p.card-title,
p.title
{
	font-family: var(--font-semi);
	font-size: 1.5rem;
	color: var(--color-primary);
	margin: 0;
	line-height: 1.2;
}

div.card-icon p.card-title
{
	text-align: left;
}

/* Smaller card title variant */

div.card p.card-title
{
	font-size: 1.2rem;
	text-align: center;
	margin: 20px auto;
	width: 100%;
	font-family: var(--font-semi);
	padding: 0;
	color: var(--primary);
	max-width: 90%;
}

/* Description text */

p.card-description,
p.card-desc,
div.card .card-desc
{
	color: #000;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.card-footer
{
	padding: 0;
	margin: 0 auto 20px;
	width: 130px;
}

/* ---------------------------
   Lists within cards
   --------------------------- */

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

.card ul li
{
	margin-bottom: 0.5em;
}

.card ul li:last-child
{
	margin-bottom: 0;
}

/* Links inside lists */

.card ul li a
{
	color: var(--link-color);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.card ul li a:hover,
.card ul li a:focus
{
	color: var(--link-hover);
	text-decoration: underline;
}

/* ---------------------------
   Button / CTA
   White background, purple border and text; hover flips to purple background + white text
   --------------------------- */

a.button-medium,
.btn-learn
{
	display: inline-block;
	padding: 6px 10px;
	color: var(--link-color);
	font-family: var(--font-semi);
	text-decoration: none;
	border: 1px solid var(--link-color);
	background: #fff;
	cursor: pointer;
	margin: 0 auto;
}

a.button-medium:hover,
a.button-medium:focus,
.btn-learn:hover,
.btn-learn:focus
{
	background-color: var(--link-color);
	color: #fff;
	text-decoration: none;
	outline: none;
}

/* iframes */

.training-container
{
	display: block;
	width: 100%;
}

.training-container .left,
.training-container .right
{
	display: block;
	width: 100%;
	margin-bottom: 40px;
}

/* Make the iframe visible and not collapsed */

.training-container .left iframe
{
	display: block;
	width: 100%;
	min-height: 300px;
	/* important for Flare XML editor */
	overflow-y: hidden !important;
    margin: -10px 0 0;
}

/* Duration text width */

div.left p
{
	max-width: 500px;
}

/* Right column */

.right
{
	width: 30%;
	/* min-width: 400px; */
	border: var(--border);
	padding: 20px;
}

/* Definition list: use flex for two-column pairs */

/* ===========================
   XML Editor fallback styles
   (stacked definition list)
   =========================== */

dl.training
{
	display: block;
	/* stacked layout */
	margin-top: 0;
	width: 100%;
}

dl.training dt,
dl.training dt > p
{
	display: block;
	width: 100%;
	margin: 0 0 0.25rem 0;
	font-family: var(--font-semi, inherit);
}

dl.training dd
{
	display: block;
	width: 100%;
	margin: 0 0 1rem 0;
}

/* training dropdowns for courses - fallback (stacking blocks) */

.training-layout
{
	display: block;
	width: 100%;
}

.training-layout .left-col,
.training-layout .left,
.training-layout .right,
.training-layout .right-col
{
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 1rem;
}

/* preserve right column visual styling for all environments */

.training-layout .right-col
{
	border: var(--border);
	padding: 10px 20px;
}

/* keep images within the column */

.training-layout img
{
	max-width: 100%;
}

details
{
	margin-bottom: 20px;
}

summary
{
	color: var(--purple);
	font-family: var(--font-semi);
	padding: 10px 0;
	display: block;
}

p.button-row
{
	text-align: center;
	margin: 0px auto;
}

p.button-row a
{
	padding: 0px 5px;
	margin: 5px;
	display: inline-block;
	border: var(--border);
	font-family: var(--font-semi);
}

p.button-row a:hover
{
	text-decoration: none;
	background-color: var(--pastel-purple);
}

/* ===========================  COURSE  =========================== */

div.course-container
{
	display: block;
}

div.course-container .second
{
	position: unset;
	margin-top: 20px;
}

ul.course
{
	border-left: 8px solid var(--primary);
	margin: 0 auto 50px auto;
	position: relative;
	padding: 0 50px;
	list-style: none;
	text-align: left;
	font-weight: 100;
	max-width: 100%;
}

.course .module
{
	margin: 0 0 50px;
	position: relative;
	border: 1px solid var(--primary);
	border-radius: var(--border-radius-lg);
	padding: 20px;
	color: black;
}

.course .module:last-of-type
{
	padding-bottom: 0;
	margin-bottom: 0;
}

.course .module:before,
.course .module:after
{
	position: absolute;
	display: block;
	top: 0;
}

.course .module .details
{
	position: relative;
	font-family: var(--font-semi);
	color: var(--dark-gray);
}

.course .module:after
{
	box-shadow: 0 0 0 4px var(--primary);
	left: -69px;
	background: var(--pastel-purple);
	border-radius: 50%;
	height: 24px;
	width: 24px;
	content: "";
	top: 40px;
}

.module p.title
{
	font-family: var(--font-semi);
	font-size: 1.75rem;
	margin: 15px 0 0;
	color: var(--off-black);
}

.module p
{
	/* padding: 0 0 6px 0; */
	margin: 0;
	padding-top: 6px;
}

.module a.video
{
	border-color: transparent;
	font-family: var(--font-semi);
	height: 20px;
	margin: 7px 0 0 0;
	border: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.3s ease;
}

.module a.video:hover
{
	text-decoration: none;
	border-color: var(--link-hover);
	color: var(--link-hover);
	transition: border-color 0.3s ease;
}

span.MCDropDownHead.dropDownHead
{
	padding: 9px 0 0 18px;
}

div.MCDropDownBody
{
	margin-left: 44px;
	margin-top: 12px;
}

a.MCDropDownHotSpot.dropDownHotspot.MCDropDownHotSpot_.MCHotSpotImage
{
	font-size: 1rem;
	font-family: var(--font-semi);
	position: relative;
	background-image: none;
}

img.MCDropDown_Image_Icon
{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border: inset 6px;
	border-color: var(--warm-purple) transparent transparent;
	border-top-style: solid;
	border-bottom-width: 0;
	margin: 0 12px 0 0;
	position: relative;
	top: 14px;
	left: -20px;
	background-image: none;
}

div.MCDropDown_Open img.MCDropDown_Image_Icon
{
	transform: rotate(180deg);
}

/* ======================================================
Hide these styles from the web display 
=========================================================*/

hr.mt-export-separator,
.hide,
.hidden,
div.comment,
pre.script,
.mt-style-conditional,
pre.script-css,
p.mt-script-comment,
.mt-comment-content,
ul.knowledge_header_horizon_list
{
	display: none;
}

/* ======================================================
Hide these styles from the Madcap Style Picker 
=========================================================*/

#mc-main-content,
.back-to-top,
.back-to-top.visible,
.body-container,
.card-icon,
.card-media,
.embed-video,
.EnteredText,
.ImageBorder,
.is-accordion-submenu-parent,
.left,
.module,
.off-canvas-accordion,
.right,
.row.outer-row.sidenav-layout,
.ScreenElement,
.second,
.sidenav-container,
.sidenav-wrapper,
.Video,
address,
article.card,
div#cards,
div.card-icon,
div.MCDropDown_Open,
div.MCDropDownBody,
div.pastel-purple,
fieldset,
h6,
html.concept,
html.portal,
html.reterence,
html.task,
html.topic,
MadCap.Highlighted:helpControlMenultem,
MadCap.concept:relationshipsHeading,
MadCap.reference:relationshipsHeading,
MadCap.task:relationshipsHeading,
MadCap:slide Thumbnail.active,
nav.sidenav-wrapper,
ul.off-canvas-list,
ul.sidenav,
MadCap,
MadCap.concept,
MadCap.Highlighted,
MadCap.reference,
MadCap.task,
ScreenElement,
.second,
html.reference,
html.topic,
p.stories,
span.boolean,
span.state,
Thumbnail.active,
.sr-only
{
	mc-hidden: hidden;
}

/* Screen Readers */

.sr-only
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ====================== Flexbox Enhancement ================================= */

@supports (display: flex) {

	/* --------------------------------------------------------------------------
	   1. HEADER
	   -------------------------------------------------------------------------- */

	header {
		display: flex;
		flex-direction: column;
		background: #fff;
		border-bottom: 1px solid #ddd;
		position: relative; /* anchor for mega-menus */
		z-index: 1000;
		height: 100%;
	}

	/* Eyebrow bar */
	div.eyebrow-black {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		align-content: center;
		height: 50px;
		padding: 0 5% 0 20px;
		background-color: black;
		color: white;
	}

	div.eyebrow-black div.logo {
		flex: auto;
	}

	div.eyebrow-black img {
		height: 50px;
		width: auto;
	}

	div.eyebrow-black div.eyebrow-menu {
		display: flex;
		flex: auto;
		justify-content: flex-end;
		text-align: right;
	}

	ul.sidenav li a,
	ul.sidenav li > ul li a,
	ul.sidenav ul li > ul li a,
	.off-canvas-accordion .is-accordion-submenu-parent > a
	{
		font-family: var(--font-regular);
		padding-right: 2.25rem;
		color: var(--black);
		background-color: none;
	}
	
	ul.sidenav li a:hover,
	ul.sidenav li > ul li a:hover,
	ul.sidenav ul li > ul li a:hover,
	.off-canvas-accordion .is-accordion-submenu-parent > a:hover
	{
		background: var(--pastel-purple);
		text-decoration: none;
	}


	/* --------------------------------------------------------------------------
	   2. PRODUCT EXPERIENCE
	   -------------------------------------------------------------------------- */

	img.logo {
		height: 24px;
		width: auto;
		margin: 0;
		padding: 0 20px 0 0;
		position: relative;
		top: 2px;
	}

	.product-experience {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100vw;
		padding: 20px 20px 20px 40px;
		line-height: 90%;
		font-size: 3rem;
		justify-content: space-between;
		align-items: flex-start;
		align-content: flex-start;
	}

	span.display {
		color: var(--purple);
		padding-right: 20px;
		font-family: var(--font-semi);
		display: inline-block;
	}

	span.experience {
		font-family: var(--font-regular);
		font-weight: 100;
		letter-spacing: -2px;
		display: inline-block;
	}

	/* --------------------------------------------------------------------------
	   3. BREADCRUMBS
	   -------------------------------------------------------------------------- */

	span.MCBreadcrumbsPrefix {
		display: none;
	}

	.MCBreadcrumbsBox_0.breadcrumbs {
		border: none;
		margin: 0;
		padding: 5px 20px 5px 40px;
		line-height: 1.2;
		border-bottom-color: var(--medium-gray);
	}

	span.MCBreadcrumbsSelf {
		font-family: var(--font-semi);
	}

	.breadcrumbs:before {
		content: "Home >";
		position: relative;
	}

	/* --------------------------------------------------------------------------
	   5. MAIN NAVIGATION + MEGA MENU
	   -------------------------------------------------------------------------- */

	nav#main-menu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		padding-right: 20px;
		position: relative;
	}

	nav .title {
		width: fit-content;
		padding-left: 30px;
		color: var(--dark-gray);
		font-size: 24px;
		position: relative;
		margin-top: -40px;
	}

	/* Hamburger button */
	.nav-toggle {
		display: none;
		background: none;
		border: none;
		font-size: 2rem;
		padding: 1rem;
		cursor: pointer;
	}

	/* Menu list */
	.main-nav .menu {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		height: 40px;
		align-items: center;
		justify-content: center;
	}

	.main-nav .menu > li > a {
		display: block;
		margin: 28px 20px 4px;
		text-decoration: none;
		font-size: 18px;
		font-family: var(--font-semi);
	}

	/* Active / hover */
	.main-nav .menu > li.has-mega:hover > a,
	.main-nav .menu > li.has-mega.open > a {
		background: var(--pastel-purple);
		color: var(--link-hover);
	}

	/* Mega-menu overlay */
	.mega-menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100vw;
		background: #fff;
		border: 1px solid var(--medium-gray);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		z-index: 999;
		opacity: 0;
		transform: translateY(10px);
		pointer-events: none;
		transition: opacity 0.3s ease, transform 0.3s ease;
		transition-delay: 0.2s;
	}

	.main-nav .menu > li.has-mega:hover .mega-menu {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		transition-delay: 0s;
	}

	/* Mega-menu inner container */
	.mega-menu .mega-container {
		max-width: var(--max-width);
		margin: 0 auto;
		padding: 2rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem 3rem;
	}

	/* Mega columns */
	.mega-column {
		flex: 1;
		min-width: 200px;
		margin-bottom: 1rem;
	}

	.mega-container.center .mega-column {
		text-align: center;
	}

	.mega-column .mega-column-head {
		font-family: var(--font-semi);
		font-size: 18px;
		color: var(--warm-purple);
		margin-bottom: 0.5rem;
	}

	.mega-column .mega-column-head:not(:first-child) {
		padding-top: 20px;
	}

	.mega-column > ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.mega-column ul li {
		padding-left: 10px;
		line-height: var(--body-line-height);
	}

	.mega-column ul li a:hover {
		text-decoration: underline;
		color: white;
	}

	/* Collapsible third-level lists */
	.mega-column ul li.has-sub {
		margin-bottom: 0.5rem;
	}

	.mega-column ul li.has-sub > span {
		cursor: pointer;
		display: inline-block;
		padding-bottom: 4px;
		font-size: 16px;
	}

	.mega-column ul li.has-sub > span::after {
		content: " ▲";
		font-size: 0.8em;
		color: var(--link-color);
	}

	.mega-column ul li.has-sub.open > span::after {
		content: " ▼";
		color: var(--link-hover-color);
	}

	.mega-column ul li.has-sub > ul {
		display: none;
		margin-left: 1rem;
		padding-left: 0;
		list-style: none;
	}

	.mega-column ul li.has-sub.open > ul {
		display: block;
	}

	.title-bar .menu-icon span {
		background-color: var(--link-color);
	}

	/* --------------------------------------------------------------------------
	   6. FOOTER
	   -------------------------------------------------------------------------- */

	footer {
		position: relative;
		bottom: 0;
	}

	div.footer {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		padding: 0 50px 0 40px;
		height: 50px;
		background: var(--black);
		color: white;
	}

	.footer a,
	footer a:hover {
		color: white;
	}

	.footer .copyright {
		flex: 0 0 20%;
	}

	.footer .legal {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-end;
		gap: 20px;
		flex: 1 0 auto;
		text-align: right;
		align-items: center;
	}

	/* --------------------------------------------------------------------------
	   7. CARD GROUPS
	   -------------------------------------------------------------------------- */

	div.card-group {
		display: flex;
		flex-flow: row wrap;
		gap: var(--card-gap);
		align-items: flex-start;
		width: 100%;
		padding: 50px;
		background-color: var(--pastel-purple);
	}

	div.card-group .card {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		align-self: stretch;
		flex: 1 1 auto;
		margin: 0;
		padding: 10px;
		min-width: 200px;
		min-height: 100px;
		justify-content: center;
		font-family: var(--font-semi);
		font-size: 3rem;
		background-color: white;
		border: 1px solid var(--link-color);
	}

	/* Shared card behavior */
	.card {
		flex: 1 1 250px;
		min-width: var(--card-min);
		max-width: var(--card-max);
		margin: 0;
		padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	div.card p.card-title {
		flex: 0 0 auto;
	}

	.card ul {
		flex: 1 1 auto;
	}

	/* --------------------------------------------------------------------------
	   8. COURSE LAYOUT
	   -------------------------------------------------------------------------- */

	div.course-container {
		display: flex;
		flex-direction: row;
		column-gap: 50px;
		align-items: flex-start;
	}

	.course-container .first {
		flex: 0 35%;
		margin-top: 20px;
	}

	.course-container .second {
		flex: 1 60%;
	}

	a.video {
		position: absolute;
		right: 10px;
		top: 0;
	}

	.course .module .details {
		position: absolute;
		right: 145px;
		top: 4px;
		text-align: right;
	}

	/* --------------------------------------------------------------------------
	   9. TRAINING LAYOUT
	   -------------------------------------------------------------------------- */

	.training-layout {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 2rem;
		width: 100%;
	}

	.training-layout .left-col,
	.training-layout .right-col {
		flex: 1 1 auto;
		width: 45%;
		max-width: 50%;
		margin-bottom: 0;
		box-sizing: border-box;
	}

	/* training embedded video  */
	/* Container */
	
	.training-container
	{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: space-between;
		align-items: flex-start;
		margin: 40px 0;
		padding: 0;
		gap: 2rem;
	}
	
	.training-video-embed
	{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: flex-start;
		justify-content: space-between;
		align-items: flex-start;
		gap: 2rem;
	}



	.card-container {
		display: flex;
		flex-wrap: wrap;
		gap: var(--card-gap);
		justify-content: center;
		align-items: stretch;
	}

	div.content-box p
	{
		text-align: left;
	}
	
	/* Left column */
	
	.left, .training-container .left
	{
        flex: 1 65%;
        max-width: 65%;
        margin-bottom: 40px;
        width: 65%;
   	}
	
	/* Make iframe/video fluid inside its max-width box */
	
	.left iframe,
	.left video
	{
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	
	.training-container .right {flex:auto; width:30%;}


	
/* ============================================================
	Definition list
   ============================================================ */

    dl.training {
        display: flex;
        flex-wrap: wrap;
        margin-top: 0;
        width: 100%;
        flex-direction: row;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: baseline;
    }

    dl.training dt,
    dl.training dt > p {
        flex: 20%;
        min-width: 150px;
        margin-right: 40px;
        font-family: var(--font-semi, inherit);
    }

    dl.training dd {
        flex: 75%;
        margin: 0;
    }
	
	/* ---------------------------
   Card variants and subcomponents
   --------------------------- */
	
	/* Icon-style card (bordered tile with internal padding) */
	
	.card-icon
	{
		border: var(--card-border);
		padding: 1rem;
		transition: background-color var(--transition-fast);
		max-width: 300px;
		/* When flex is active, .card-icon can be treated as a flex child */
		flex: 1 1 250px;
	}
	
	/* Card header: image/icon + title */
	
	.card-header
	{
		display: flex;
		align-items: center;
		/* margin-bottom: 0.5rem; */
		width: 100%;
	}
	
	

/* -----------------------------------------------------------
   SEARCH FIELD + BUTTON
----------------------------------------------------------- */

.flare-search .addsearch-searchfield-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flare-search form.addsearch-searchfield {
    min-width: 700px;
}

.flare-search .search-field-wrapper {
    width: 100%;
    margin: 15px 0;
    display: block;
    height: 2.5em;
}

.flare-search .addsearch-searchfield input[type=search].icon,
.flare-search input.icon.addsearch {
    background: none;
    width: 100%;
    max-width: 100%;
    border-radius: 4px 0 0 4px;
    height: 2.5rem;
    border: 2px solid var(--warm-purple);
    color: #696969;
    font-size: 1rem;
    padding: 6px !important;
    background-color: #ffffff;
    margin: 0;
	outline: none;
}

.flare-search input.icon.addsearch:hover {
    border-color: var(--purple);
}

.flare-search .addsearch-searchfield button {
    border: 2px solid var(--warm-purple);
    border-radius: 0 4px 4px 0;
    width: 57px;
    height: 2.5rem;
    padding: 0;
    display: block;
    background-color: var(--warm-purple);
    background-image: url("../Images/Global/Icons/search.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20px;
    color: transparent;
}

.flare-search .addsearch-searchfield button:hover {
    background-color: var(--purple);
    border-color: var(--purple);
}

	.flare-search h2.adds-hit-title {
    font-size: 1.25rem;
    color: var(--purple);
}

.flare-search .adds-highlight {
    color: var(--black);
	font-weight:normal;
	font-family: var(--font-regular);
}

	.adds-suggestions-main-wrapper {
    border: 1px solid var(--medium-gray);
    padding: 0 20px 10px;
    box-shadow: var(--box-shadow);
}

/* -----------------------------------------------------------
   AUTOCOMPLETE DROPDOWN — FIXED + ANIMATED
----------------------------------------------------------- */

/* Positioning container */
.flare-search .addsearch-autocomplete {
    position: absolute;
    max-width: 800px;
    min-width: 300px;
    width: 100%;
    font-size: 90%;
    left: calc(50% - 400px);
    padding: 0;
    z-index: 9999;
	text-align: left;
}

/* Hide results wrapper by default */
.flare-search .addsearch-autocomplete .adds-hits-main-wrapper {
    display: none !important;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    border: 1px solid var(--medium-gray);
    padding: 0px 20px 10px;
    background: white;
    box-shadow: var(--box-shadow);
    border-radius: 4px;
}

/* Show when JS adds .has-results */
.flare-search .addsearch-autocomplete .adds-hits-main-wrapper.has-results {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

/* Optional: hide "Show all results" until real hits exist */
.flare-search .addsearch-autocomplete .showAllBtn {
    display: none;
}

.flare-search .addsearch-autocomplete .adds-hits-main-wrapper.has-results .showAllBtn {
    display: block;
}
.showAllBtn button {

    padding: 8px 16px;
    background: var(--purple);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    margin:20px 0 10px;
    
}

.showAllBtn button:hover {
  background: var(--link-hover);
}
	
/* Production layout adjustments */
.header-block {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

div.header-block .product-experience {
    width: auto;
}

div.header-block form.addsearch-searchfield {
    min-width: 400px;
    margin-right: 50px;
}

div.header-block .flare-search .addsearch-autocomplete {
    right: 50px;
    left: initial;
}

/* ============================================================
	Mega Menu
   ============================================================ */

	/* --- Base menu layout --- */
	.top-menu {
	    position: relative;
	    width: 100%;
	    /* float: right; */
	    /* text-align: right; */
	}
	
	/* Ensure the UL stays inline with the trigger buttons */
	.megamenu {
	    list-style: none;
	    margin: 0;
	    padding: 10px 0 10px;
	    display: flex;
	    gap: 1rem;
	    float: right;
	}
	
	/* --- Mega panel styling --- */
	.mega-panel {
	    position: absolute;
	    top: 100%; /* places panel directly below the buttons */
	    left: 0;
	    width: 100%; /* spans visible width */
	    background: #000; /* black background */
	    color: #fff;
	    padding: 2rem 1.5rem;
	    z-index: 999; /* overlays page content */
	    box-sizing: border-box;
	}
	
	/* buttons */
	button.menu-trigger {
	  position: relative;
	  border: none;
	  background-color: transparent;
	  font-family: var(--font-semi);
	  font-size: 100%;
	  cursor: pointer;
	}
	
	/* Triangle pointer (hidden by default) */
	button.menu-trigger::after {
	  content: "";
	  position: absolute;
	  left: 50%;
	  top: 100%; /* directly below the button */
	  transform: translateX(-50%);
	  width: 0;
	  height: 0;
	
	  /* Triangle pointing down */
	  border-left: 18px solid transparent;
	  border-right: 18px solid transparent;
	  border-bottom: 18px solid #000; 
	
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity 0.2s ease;
	}

	/* When the menu is open, show the triangle */
	button.menu-trigger[aria-expanded="true"]::after {
	  opacity: 1;
	}

	
	button.hamburger {
	    display: none;
	}
	
	/* Container inside the panel */
	.mega-container {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 2rem;
	    max-width: 1200px;
	    margin: 0 auto;
	}
	
	/* Columns */
	.mega-column {
	    flex: 1 1 200px;
	}
	
	/* Headings */
	.mega-head {
	    color: var(--warm-purple);
	    margin-bottom: 0.5rem;
	    font-size: 1.2rem;
	}
	
	/* Links */
	.mega-column a {
	    color: #fff; /* white text */
	    text-decoration: none;
		padding:0; 
		line-height:1.3;
		font-size:90%;
	}
	
	.mega-column a:hover,
	.mega-column a:focus {
	    text-decoration: underline;
	}


} 

/* ============================================================
   Responsive Adjustments (≤ 1279px)
   ============================================================ */

@media only screen and (max-width: 1279px)
{
	/* Root variable adjustments */

	:root
	{
		--screen-max-width: 100%;
		--h1-font-size: 3rem;
		--h2-font-size: 2.25rem;
		--h3-font-size: 1.75rem;
		--h4-font-size: 1.25rem;
		--h5-font-size: 1rem;
	}

	/* Layout adjustments */

	#mc-main-content
	{
		margin: 0;
		padding: 20px;
	}

	.middle.title-bar-section.outer-row.clearfix
	{
		padding-left: 0;
	}

	/* Menu icon */

	.title-bar .menu-icon span
	{
		background-color: var(--link-color);
		/* final intended color */
		height: 40px;
		width: 40px;
	}

	nav.title-bar button.menu-icon
	{
		left: 5px;
		top: 25px;
	}

	/* Header adjustments */

	.title-bar-container.sticky-container
	{
		min-height: 53px !important;
		background-color: black;
	}

	.eyebrow-black
	{
		padding-left: 0;
		height: fit-content;
	}

	/* Product experience */

	.product-experience
	{
		font-size: 2rem;
		padding: 10px 20px 5px;
	}

	span.display
	{
		padding-right: 10px;
	}

	/* Off‑canvas menu */

	ul.off-canvas-list li a
	{
		color: var(--link-color);
		background-color: transparent;
		border: none;
		padding: 5px;
	}

	ul.off-canvas-list li a:selected
	{
		color: var(--link-hover);
		background-color: transparent;
	}

	ul.off-canvas-accordion.vertical.menu.off-canvas-list
	{
		color: black;
		background-color: transparent;
	}

	ul.off-canvas-list ul > li > a
	{
		margin-left: 1em;
		color: var(--black);
	}

	ul.off-canvas-list ul > li > a:hover
	{
		color: var(--link-color);
		background: transparent;
	}

	/* Hover states for all nested levels */

	ul.off-canvas-list li a:hover,
	ul.off-canvas-list ul > li > a:hover,
	ul.off-canvas-list ul ul > li > a:hover,
	ul.off-canvas-list ul ul ul > li > a:hover,
	ul.off-canvas-list ul ul ul ul > li > a:hover,
	ul.off-canvas-list li.js-drilldown-back > a:hover
	{
		background-color: white;
	}

	/* Cards */

	.card
	{
		max-width: 320px;
	}
}

/* ============================================================
   Responsive adjustments (≤ 950)
   ============================================================ */

@media (max-width: 950px)
{
	nav .title
	{
		margin-top: -20px;
	}
}

/* ============================================================
   Responsive adjustments (≤ 768px)
   ============================================================ */

@media (max-width: 768px)
{
	/* Typography & layout variables */

	:root
	{
		--screen-max-width: 90vw;
		--h1-font-size: 2rem;
		--h2-font-size: 1.5rem;
		--h3-font-size: 1.25rem;
		--h4-font-size: 1rem;
		--h5-font-size: 1rem;
	}

	/* Utility / hide elements */

	.toggle-menu,
	.script-css,
	.script,
	.mt-script-comment,
	.hide,
	.overlay
	{
		display: none;
	}
	
	.home-hero {
    height: auto;
    max-height: 100%;
	}

	div.footer {
    flex-flow: wrap;
    height: auto;
	}
	
	.footer .legal {
	    gap: 10px;
	    flex: auto;
	    text-align: left;
	    justify-content: flex-start;
	}
	
	.footer .copyright {
	    flex: auto;
	}
	
	div.header-block .flare-search .addsearch-autocomplete {
	    right: auto;
	    left: auto;
	}
		
	.flare-search .addsearch-autocomplete {
    max-width: calc( 100% - 20px);
    left: 0;
    margin: 10px;
	}
	
	div.flare-search {
	    width: 100%;
	}

	div.flare-search form.addsearch-searchfield {
	    min-width: 100%;
	    padding:0 20px;
	    width: 100%;
	    margin: 0 10px;
	}
	
	ul.home-card-icons {
	    margin: 0 10px;
	}

	ul.home-card-icons li {
    min-width: 120px;
    height: 100px;
	}
	
	div.carousel-wrapper {
	    max-width: 100%;
	    padding:5px;
	}
	

	div.disclaimer {
    margin: 0 10px;
	}




	/* Topic subheads */

	nav.topic-subheads
	{
		top: 45px;
	}

	/* Course layout */

	.course-container
	{
		flex-flow: column wrap;
	}

	.course-container .first,
	.course-container .second
	{
		flex: 100%;
	}

	ul.course
	{
		border-left: none;
		margin-left: 0;
		padding: 0;
	}

	ul.course li.module
	{
		display: flex;
		flex-flow: row wrap;
	}

	p.title
	{
		flex: 1 0 100%;
	}

	p.details
	{
		flex: 1 1 auto;
	}

	/* Off‑canvas wrapper */

	.foundation-wrap.off-canvas-wrapper
	{
		overflow: auto;
	}

	/* Navigation */

	.nav-toggle
	{
		display: none;
	}

	nav#main-menu
	{
		display: none;
		background: #fff;
		width: 100%;
	}

	.main-nav.open
	{
		display: block;
	}

	.main-nav .menu
	{
		flex-direction: column;
	}

	.main-nav .menu > li > a
	{
		padding: 0.75rem 1rem;
		border-bottom: 1px solid #eee;
	}

	.mega-container
	{
		flex-direction: column;
	}

	/* Mega menu (mobile behavior) */

	.mega-menu
	{
		position: static;
		width: 100%;
		box-shadow: none;
		padding: 1rem;
		display: none;
		opacity: 0;
		transform: translateY(-10px);
		pointer-events: none;
		transition: opacity 0.3s ease, transform 0.3s ease;
		transition-delay: 0.2s;
	}

	.main-nav.open .has-mega.open .mega-menu
	{
		display: block;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		transition-delay: 0s;
	}

	.mega-menu .mega-container
	{
		flex-direction: column;
		padding: 1rem;
	}

	.mega-column
	{
		min-width: 100%;
		margin-bottom: 1.5rem;
	}

	/* Cards */

	.card
	{
		display: block;
		width: 100%;
		max-width: 100%;
		margin: calc(var(--card-gap) / 2) 0;
		padding: var(--card-padding);
	}

	.card-header
	{
		flex-direction: row;
		gap: 0.5rem;
	}

	#cards
	{
		max-width: 100%;
		margin: 0 auto;
		width: 100%;
		padding: 0;
	}

	article.card
	{
		padding: 0;
		margin: calc(var(--card-gap) / 2) auto;
		max-width: var(--card-max);
		width: auto;
	}

	.card-media
	{
		padding: 0;
		width: 100%;
	}

	a.btn-learn
	{
		padding: 10px 20px;
		margin: 0 auto;
	}

	.card-footer
	{
		padding: 0 0 20px;
	}

	/* Training layout */

	.training-container
	{
		flex-direction: column;
		gap: 0;
		width: 100%;
		margin: 0;
	}

	.left
	{
		width: 100%;
		flex: 100%;
		max-width: 100%;
		padding: 10px;
	}

	.right
	{
		min-width: 100%;
	}

	dl.training
	{
		display: block;
	}

	dl.training dt
	{
		display: block;
		width: auto;
		margin-right: 0;
		margin-top: 0.5rem;
		font-weight: 600;
	}

	dl.training dd
	{
		display: block;
		max-width: 100%;
		margin-left: 0;
	}
	
	div.left, div.training-container div.left {
    flex: 1 auto;
    max-width: 100%;
    width: 100%;
    margin-bottom: 0;
	}
}


html, body {
  height: 100%;
}

.off-canvas-wrapper-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.off-canvas-content.inner-wrap {
  flex: 1; /* This pushes the footer down */
  display: flex;
  flex-direction: column;
}

.off-canvas-wrapper-inner .main-section {
  flex: 1; /* This allows the main content to grow */
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto; /* Footer sits at bottom when content is short */
  position:initial;
  bottom: revert;
}

.foundation-wrap.off-canvas-wrapper {
    height: auto;
    width: 100vw;
}

.body-container {
    padding: 0;
    height: auto;
    flex: 1;
	width: 100vw;
}