/*<meta conditions="General.Import" />*/

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

/*==Home Page General Styles==*/

body
{
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--text-color);
}

.body-container
{
	background-color: #FFFFFF;
}

/* Disable top menu for home page */

/*nav.tab-bar
{
	display: none !important;
}*/

/* Disable left menu for home page */

nav.sidenav-wrapper
{
	display: none !important;
}

.content
{
	padding-left: 0 !important;
	/* No left padding on content for home page */
}

p
{
	color: var(--text-color);
	margin: 0 0 1.333em 0;
	font-family: var(--font-body);
}

.center
{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	float: none !important;
	text-align: center;
}

.off-canvas-content .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

.search-filter-content
{
	line-height: 0.8em;
	border-radius: 0 0 15px 15px;
}

.search-filter:hover
{
	Opacity: 0.7;
}

/*==Responsive Header Styles==*/

#contentBody > .responsive-header
{
	background-color: transparent;
}

/*==Home Page Top Banner Section==*/
/* See also contentHeader and related styles in fixes.css for top black bar and its content */

.Header
{
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
	text-align: left;
	position: relative;
	top: 0;
	height: 470px;
	padding: 0 0 60px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--header-gradient-background);
	background-position: right top, center top;
	background-repeat: no-repeat;
	background-size: contain, auto;
}

.HeaderLogo
{
	text-align: left;
}

.HeaderLogo img
{
	height: 24px !important;
	width: auto !important;
	display: block;
}

/* Doesn't match docs.keyfactor.com so has to go.
.HeaderLogo a:hover
{
	opacity: 0.95; 
} */

/* Hover opacity allows logo to turn color on hover - see also fixes CSS for main page logo topic-lemur-logo */

.HeaderInfo
{
	padding-top: 0;
	margin-top: 175px;
	height: auto;
	display: flex;
	flex-direction: column;
	max-width: 1000px;
	justify-content: center;
}

.HeaderInfoTitle
{
	padding-right: 20px;
	padding-left: 20px;
	text-align: center;
}

.HeaderInfoSearch
{
	padding: 20px 20px 0 20px;
	text-align: center;
	min-width: 700px;
}

span.HeaderTitle-Portal,
span.HeaderTitle-Home
{
	text-align: center;
	height: auto;
	font-family: var(--font-h1);
	font-weight: var(--font-weight-thin);
	color: var(--header-text);
}

span.HeaderTitle-Portal
{
	font-size: 60px;
	line-height: 75px;
}

span.HeaderTitle-Home
{
	font-size: 50px;
	line-height: 65px;
}

/* Glass purple area button pill on home page */

.HeaderButtons
{
	position: relative;
	width: 980px;
	max-width: calc(100vw - 2rem);
	min-height: 72px;
	margin: 45px auto 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	padding: 0.4rem 1.95rem;
	border-radius: 999px;
	border: 1px solid rgba(232, 233, 255, 0.55);
	/* Mist */
	background-color: rgba(45, 47, 143, 0.35);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transform: scale(1);
	transform-origin: center center;
	transition: transform 0.3s cubic-bezier(0.05, 0.7, 0.1, 1), box-shadow 0.3s cubic-bezier(0.05, 0.7, 0.1, 1), border-color 0.3s cubic-bezier(0.05, 0.7, 0.1, 1);
}

.HeaderButtons::before
{
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	background: linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.28) 0%,
			rgba(255, 255, 255, 0.10) 28%,
			rgba(255, 255, 255, 0.03) 55%,
			rgba(10, 11, 46, 0.10) 100%
		);
}

.HeaderButtons:hover,
.HeaderButtons:focus-within
{
	transform: scale(1.03);
	border-color: rgba(232, 233, 255, 0.85);
	/* Mist */
}

.HeaderButtons > div
{
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	max-width: 260px;
}

.HeaderButtons .cta1,
.HeaderButtons .cta1:link,
.HeaderButtons .cta1:visited,
.HeaderButtons .cta2,
.HeaderButtons .cta2:link,
.HeaderButtons .cta2:visited,
.HeaderButtons .cta3,
.HeaderButtons .cta3:link,
.HeaderButtons .cta3:visited
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0.15rem .5rem;
	border-radius: 999px;
	background: transparent;
	color: var(--header-buttons-item-text);
	outline: none;
	text-align: center;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-semibold);
	mc-disable-glossary-terms: true;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.HeaderButtons .cta1:hover,
.HeaderButtons .cta1:focus-visible,
.HeaderButtons .cta2:hover,
.HeaderButtons .cta2:focus-visible,
.HeaderButtons .cta3:hover,
.HeaderButtons .cta3:focus-visible
{
	color: var(--header-buttons-item-text-hover);
	background: var(--header-buttons-item-bg-hover);
	outline: none;
}

.HeaderButtons .cta2,
.HeaderButtons .cta3
{
	position: relative;
}

/* cta3 has JavaScript associated to toggle OTHER in HomeButtonsandVersionMenu.js that's not currently in use */
/* cta1 = doc help, cta2 = select version, cta3 = was toggle core / other versions, now static link to compatibility matrix */

a.cta2,
a.cta3
{
	color: var(--header-text);
}

a.cta2:link,
a.cta2:visited,
a.cta3:link,
a.cta3:visited
{
	text-decoration: none;
	color: var(--header-text);
}

.HeaderButtons .HTML,
.HTML:link,
.HTML:hover,
.HTML:visited
{
	/* This is here to make the content of the home toggles toggle, but no CSS is needed. */
}

.HTML-tiles
{
	/* This is here to make the content of the home toggles toggle, but no CSS is needed. */
}

.HeaderButtons .DH,
.HeaderButtons .DA,
.HeaderButtons .DT
/* Button in the middle */
/* Button at the far right */
/* Button on the left */
{
	text-align: center;
	padding-top: 10px;
	transition: background-color 0.3s, color 0.3s;
	border-radius: 50px;
	height: 42.37px;
	font-style: normal;
	font-size: 1.2rem;
	line-height: 1.2rem;
	color: var(--header-text);
}

/* Comment out transparent buttons DA and DH and add DH/DA to DT code for all solid buttons */
/* Outline button in the middle (DH) and far right (DA) */

/*
div.HeaderButtons .DH,
div.HeaderButtons .DA 
{
	text-align: center;
	padding-top: 8px;
	transition: background-color 0.3s, color 0.3s;
	border: 2px solid #1a1a1a;
	border-radius: 50px;
	height: 42.37px;
	font-style: normal;
	font-size: 1.2rem;
	line-height: 1.2rem;
	color: var(--text-color);
	background-color: transparent;
}*/

div.HeaderButtons .DH:hover,
div.HeaderButtons .DA:hover,
div.HeaderButtons .DT:hover
{
	/*opacity: 0.7;
	color: #ffffff;*/
	transition: background-color 0.3s, border-color 0.3s;
}

/* Comment out transparent buttons DA and DH and add DH/DA to DT code for all solid buttons */

/*div.home-button-bar .DA:hover
{
	opacity: 0.7;
	transition: background-color 0.3s, border-color 0.3s;
}

div.home-button-bar .DH:hover
{
	opacity: 1.0; 
	transition: background-color 0.3s, border-color 0.3s;
}*/

/* This opacity difference is so that the dropdown menu below the button won't be transparent. */

.cta2-dropdn
{
	position: relative;
	display: inline-block;
	border: none;
	cursor: pointer;
}

/* Dropdown button on middle (DH) button */

.cta2-dropdn.is-open .DH
{
	background-color: var(--color-indigo);
	color: var(--header-text);
}

.cta2-dropdn.is-open #dropdown-button-version
{
	display: block;
}

/* Product version selector on the home page */

#dropdown-button-version
{
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--dropdown-glass-background-home);
	box-shadow: var(--dropdown-glass-shadow);
	min-width: 225px;
	z-index: 2;
	list-style-type: none;
	padding: 8px;
	margin: 8px 0 0 0;
	text-align: left;
	border: 1px solid rgba(232, 233, 255, 0.85);
	border-radius: 18px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Dropdown content */

#dropdown-button-version li
{
	padding: 10px 12px;
	margin: 0 0 3px 0;
	border-radius: 12px;
	text-decoration: none;
	color: var(--home-ver-menu-text);
	font-family: var(--home-ver-menu-text-family);
	font-size: var(--home-ver-menu-text-size);
	line-height: var(--home-ver-menu-line-height);
	font-weight: var(--home-ver-menu-weight);
	background-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
	cursor: pointer;
	position: relative;
	/* Added for two level menus */
	display: flex;
	/* Use flexbox for alignment */
	justify-content: space-between;
	/* Space between text and arrow */
	align-items: center;
	/* Center items vertically */
}

/* Style for the dropdown items */

#dropdown-button-version li:hover
{
	text-decoration: none;
	background-color: var(--home-ver-menu-bkgd-hover);
	border-radius: 12px;
}

/* Style for non-clickable (static) items */

#dropdown-button-version .static-item
{
	cursor: default;
	/* Default cursor instead of pointer */
}

/* Remove hover effects for non-clickable items */

#dropdown-button-version .static-item:hover
{
	background-color: transparent;
	/* No background change on hover */
	color: var(--home-ver-menu-text-hover);
	/* Ensure the color doesn't change on hover */
}

/* Sub menu to version dropdown */

.sub-level
{
	display: none;
	/* Hide submenus initially */
	position: absolute;
	left: 100%;
	/* Position the submenus to the right */
	top: 0;
	background: var(--dropdown-glass-background-home);
	box-shadow: var(--dropdown-glass-shadow);
	min-width: 225px;
	list-style-type: none;
	padding: 17px 1px 13px 17px;
	margin: -12px 0 0 -2px;
	border: 1px solid rgba(232, 233, 255, 0.85);
	border-radius: 18px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 2;
	text-align: left;
}

.sub-level li
{
	padding: 10px 12px;
	margin: 0 0 3px 0;
	border-radius: 12px;
	font-family: var(--home-ver-menu-text-family);
	font-size: var(--home-ver-menu-text-size);
	line-height: var(--home-ver-menu-line-height);
	text-decoration: none;
	color: var(--home-ver-menu-text);
	cursor: pointer;
	background-color: transparent;
	display: flex;
	/* Use flexbox for alignment */
	justify-content: space-between;
	/* Space between text and arrow */
	align-items: center;
	/* Center items vertically */
}

.sub-level li:hover
{
	text-decoration: none;
	background-color: var(--home-ver-menu-bkgd-hover);
	border-radius: 12px;
}

.arrow::after
{
	content: "\25B6";
	/* Unicode character for right arrow */
	display: inline-block;
}

.down-arrow::after
{
	content: "\25BC";
	/* Unicode character for down arrow */
	display: inline-block;
}

/* Styles for items with submenus */

.has-submenu::after
{
	content: " \25B6";
	/* Unicode character for arrow */
	display: inline-block;
	padding-right: 5px;
	color: var(--home-ver-menu-expander);
	font-size: var(--right-ver-menu-expander-size);
}

/* Rotate the arrow when hovering over the submenu item */

.has-submenu:hover::after
{
	content: "\25BC";
	/* Unicode character for down arrow */
	transform: rotate(0deg);
	/* Ensure the arrow is not rotated */
}

.hidden
{
	display: none;
}

.toast-message
{
	position: fixed;
	top: 85px;
	left: 50%;
	transform: translateX(-50%);
	padding: 15px 20px;
	background-color: var(--primary-bright);
	color: var(--white-text);
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	z-index: 9999;
	transition: opacity 0.3s ease-in-out;
}

/*==Home Tiles section==*/

.home-tiles
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 2.5%;
	margin-bottom: 1%;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
}

.home-titles
{
	max-width: calc((333px * 3) + (1rem * 2));
	margin: 2rem auto 0.75rem auto;
	padding: 0;
	text-align: left;
}

.home-titles h2
{
	margin: 0 0 0 -15px;
	font-family: var(--home-tiles-h2-font);
	font-size: var(--home-tiles-h2-font-size);
	font-weight: var(--home-tiles-h2-weight);
	line-height: var(--home-tiles-h2-line-height);
	color: var(--home-tiles-h2-color);
}

div.home-tiles > div:nth-child(1),
div.home-tiles > div:nth-child(2),
div.home-tiles > div:nth-child(3)
{
	flex: 0 0 333px;
}

div.home-tiles > div.html,
div.home-tiles > div.portal
{
	box-sizing: border-box;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	overflow: hidden;
	border: 1px solid var(--home-tiles-border);
	background-color: var(--home-tiles-background);
	min-width: 333px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}

div.home-tiles > div.html
{
	padding-bottom: 1em;
}

div.home-tiles > div.html:hover,
div.home-tiles > div.portal:hover
{
	background-color: var(--home-tiles-hover-background);
	border-color: var(--home-tiles-hover-border);
}

div.home-tiles > div.html > a.tile-link,
div.home-tiles > div.portal > a.tile-link
{
	display: block;
	padding: 1rem;
}

/* Make whole tile clickable when <a> is outside <p> */
/*=Elements for text contained within each home-tile=*/

p.tile-image
{
	text-align: center;
	margin: 0;
	padding: 2rem .5rem 0 .5rem;
}

p.tile-image img
{
	height: clamp(70px, 6vw, 85px) !important;
	width: auto !important;
}

div.home-tiles a
{
	text-decoration: none;
	color: inherit;
	/* so link color matches tile text */
	cursor: pointer;
	/* feels clickable */
	transition: color .2s, background-color .2s, box-shadow .2s;
}

p.tile-title-line1
{
	text-align: center;
	color: var(--home-tiles-titles-color);
	padding: 2rem .5rem 0 .5rem;
	font-family: var(--home-tiles-titles-font-title);
	font-weight: var(--home-tiles-titles-weight-title);
	font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem);
	line-height: 1.2;
}

p.tile-title-line2
{
	text-align: center;
	color: var(--home-tiles-titles-color);
	font-family: var(--home-tiles-titles-font-text);
	font-weight: var(--home-tiles-titles-weight-text);
	padding: .5rem;
	font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.2rem);
	line-height: 1.35;
}

p.tile-title-version
{
	text-align: center;
	color: var(--home-tiles-titles-color);
	font-family: var(--home-tiles-titles-font-text);
	font-wieght: var(--home-tiles-titles-weight-text);
	margin: 0;
	padding: .5rem;
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	line-height: 1.2;
}

/* Below arrows for external links not currently used */
/* Arrow indicator */

a.external-home > p.tile-title-html
{
	position: relative;
	/* positioning context for the tooltip/icon */
	text-decoration: none;
}

a.external-home > p.tile-title-html::after
{
	content: "\2197";
	margin: 0 .25em 0 .25em;
	font-size: .9em;
	opacity: .6;
}

a.external-home:hover > p.tile-title-html::after,
a.external-home:focus-visible > p.tile-title-html::after
{
	opacity: 1;
}

/* tooltip bubble lives on the <p> and reads the <p>'s data-tooltip */

a.external-home > p.tile-title-html::before
{
	content: attr(data-tooltip);
	position: absolute;
	left: 50%;
	top: .35rem;
	/* stay inside the tile to avoid clipping */
	transform: translate(-50%, -4px);
	background: #333;
	color: #fff;
	padding: .25em .5em;
	border-radius: .25rem;
	font-size: .75rem;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 2;
}

/* reveal on hover/focus of the <a> */

a.external-home:hover > p.tile-title-html::before,
a.external-home:focus-visible > p.tile-title-html::before
{
	opacity: 1;
	transform: translate(-50%, 0);
}

/*===========================================================================================================================================================
Styles after this point are styles that are for specific mediums. If any additional styles are added to this template they will be listed after mediums.
[@media tablet] declares styles that will apply when the screen is in tablet view
[@media mobile] declares styles that will apply when the screen is in mobile view
===========================================================================================================================================================*/

@media only screen and (max-width: 1260px)
{
	.home-titles
	{
		max-width: calc((333px * 2) + 2rem);
	}

	/* Override size from fixes.css */

	.HeaderMenuParent
	{
		flex: 0 0 auto;
		min-width: max-content;
	}
}

@media only screen and (max-width: 1024px)
{
	/* Let the hamburger appear, but keep the utility links if they fit. */

	.HeaderMenuParent
	{
		display: flex;
		flex: 0 0 auto;
		min-width: max-content;
		margin-left: auto;
		margin-right: 3rem;
	}

	nav.title-bar .menu-icon
	{
		padding-top: 20px;
	}
}

@media only screen and (max-width: 915px)
{
	.HeaderButtons
	{
		justify-content: center;
		gap: 18px;
		flex-wrap: wrap;
	}

	.HeaderInfo
	{
		margin-top: 130px;
	}

	span.HeaderTitle-Home
	{
		font-size: 35px;
		line-height: 50px;
	}

	span.HeaderTitle-Portal
	{
		font-size: 60px;
		line-height: 120px;
	}

	.home-titles h2
	{
		margin: 0;
		font-size: 1.6rem;
		text-align: center;
	}
}

@media only screen and (max-width: 750px)
{
	.HeaderMenuParent
	{
		display: none;
	}

	.home-tiles
	{
		flex-flow: row wrap;
	}

	.home-tiles > div:nth-child(1),
	.home-tiles > div:nth-child(2),
	.home-tiles > div:nth-child(3)
	{
		width: 70%;
		max-width: 70%;
		flex: 0 0 70%;
	}

	.HeaderInfoSearch
	{
		min-width: 500px;
	}

	.HeaderButtons
	{
		width: 680px;
		max-width: calc(100vw - 8rem);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0.35rem 2rem;
		padding: 0.8rem 1rem;
		min-height: 0;
		border-radius: 999px;
	}

	.HeaderButtons > div
	{
		flex: 0 1 auto;
		width: auto;
		max-width: none;
		min-width: max-content;
	}

	.HeaderButtons .cta1,
	.HeaderButtons .cta2,
	.HeaderButtons .cta3
	{
		width: auto;
		min-width: max-content;
		min-height: 44px;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		white-space: nowrap;
		font-size: var(--font-size-body);
	}
}

@media only screen and (max-width: 700px)
{
	span.HeaderTitle-Home
	{
		font-size: 30px;
		line-height: 45px;
	}
}

@media only screen and (max-width: 775px)
{
	/* In fixes.css contentHeader wraps searchHeader to the next line so needs to be taller; not here. */

	div.contentHeader
	{
		min-height: 80px;
		height: 80px;
	}
}

@media only screen and (max-width: 670px)
{
	.home-tiles
	{
		flex-flow: row wrap;
	}

	.home-tiles > div:nth-child(1),
	.home-tiles > div:nth-child(2),
	.home-tiles > div:nth-child(3)
	{
		width: 60%;
		max-width: 60%;
		flex: 0 0 60%;
	}

	.HeaderButtons
	{
		width: 680px;
		max-width: calc(100vw - 8rem);
		margin-top: 2rem;
		padding: 0.8rem 1rem;
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
		border-radius: 40px;
	}

	.HeaderButtons > div
	{
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	.HeaderButtons .cta1,
	.HeaderButtons .cta2,
	.HeaderButtons .cta3
	{
		width: 100%;
		min-height: 44px;
		font-size: var(--font-size-body);
	}

	.HeaderInfoSearch
	{
		min-width: 470px;
	}

	/*.search-bar._Skins_SearchPortalHome_2026.mc-component .search-field,
	.search-bar._Skins_SearchPortalHome_2026.mc-component .search-filter,
	.search-bar._Skins_SearchPortalHome_2026.mc-component .search-submit {
		height: 3em;
	}*/

	.search-bar._Skins_SearchPortalHome_2026.mc-component
	{
		height: 3em;
	}

	.HeaderInfo
	{
		margin-top: 95px;
	}

	span.HeaderTitle-Home
	{
		font-size: 28px;
		line-height: 30px;
	}
}

@media only screen and (max-width: 485px)
{
	.HeaderInfoSearch
	{
		min-width: 300px;
	}

	span.HeaderTitle-Home
	{
		font-size: 24px;
		line-height: 30px;
	}

	span.HeaderTitle-Portal
	{
		font-size: 40px;
		line-height: 120px;
	}
}