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

/*Flash of Style*/
/* Set menus to be initially hidden, to prevent FOUC (flash of unstyled content). The menus can initially appear unformatted before all scripts have run, which was evident in Chrome browser especially. So we hide the menus in the CSS, and then make them visible in the script (do not use the display property to do this!), after they have been manipulated. */
.top-nav-list
{
	visibility: hidden;
}

.docs-nav-list
{
	visibility: hidden;
}

:focus {
	outline: none;
	/* remove search box outline */
}

MadCap|xref.invisible {
	mc-format: ;
	display: none;
	/* Hide elements that we need to link to the output*/
}

/* TOP NAVIGATION */

.top-nav-container {
	width: 100vw;
	z-index: 100;
	border-bottom: 1px solid var(--border);
	font-weight: var(--font-weight-semibold);
}

.top-nav-container ul {
	padding: 0 2em;
	margin: 0;
}

/* logo community search top navigation */

.top-nav-list {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 2em;
	margin: 0 2em;
}

.logo {
	width: 160px;
	margin-right: auto;
	cursor: pointer;
}

.logo-dark {
  display: none;
}

[data-theme="dark"] .logo-light {
  display: none;
}

[data-theme="dark"] .logo-dark {
  display: inline-block;
}

.top-nav-links-container {
	display: flex;
	gap: 1em;
}

.top-nav-links {
	list-style: none;
	font-family: var(--font-sans);
	position: relative;
	cursor: pointer;
	padding: 2em 0;
	margin: 0px;
}

.top-nav-links a {
	color: var(--link-menu);
}

.top-nav-links:hover a {
	color: var(--link-menu-hover);
	text-decoration: none;
}

.top-nav-links::after { /* text decoration for community links*/
	content: "";
	width: 0;
	height: 0.1em;
	border-radius: 0.2rem;
	position: absolute;
	left: 0.1em;
	bottom: 0.5em;
	background-color: var(--link-menu-hover); 
	transition: width 200ms ease-in;
}

.top-nav-links:hover::after,
.top-nav-links:focus::after {
	width: 100%;
}

.top-nav-links:hover ul,
.top-nav-links:focus ul {
	opacity: 1;
	visibility: visible;
}

.top-nav-links-drop {
	position: absolute;
	top: 6em;
	left: -1.6em;
	box-shadow: 0 0 10px #E0E0E0;
	background-color: #ffffff;
	border-radius: 0.2em;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out;
	z-index: 2;
}

.top-nav-links-drop li {
	list-style: none;
	padding: 0 3.2em 0 1.6em;
	border-radius: 0.2em;
	margin: 1em 0;
	white-space: nowrap;
}

/*.top-nav-links-drop li:hover a {
	color: ;
}*/

#theme-toggle { /* light/dark mode toggle */
  position: relative;      /* required: anchors the absolutely-positioned icons */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0;              /* prevents default button padding from pushing icons off-center */
}

#theme-toggle:hover {
  background: rgba(128, 128, 128, 0.15);
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;       /* half of height, centers it */
  margin-left: -11px;      /* half of width, centers it */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.icon-sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.icon-moon {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

[data-theme="dark"] .icon-sun {
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
}

[data-theme="dark"] .icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* docs top navigation */

.docs-nav-container
{
	width: 100vw;
	border-bottom: var(--smokey-black-700);
}

.docs-nav-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
	margin: 0 2em;
}

/* a.active linked to docs-nav-active.js to highlight which docs site user is on */
.docs-nav-list a.active { 
    color: var(--link-active);
}

.docs-nav-list a::after { 
  content: "";
  width: 0;
  height: 0.1em;
  border-radius: 0.2rem;
  position: absolute;
  left: 0.1em;
  bottom: 0.5em;
  background-color: var(--link-menu-hover);
  transition: width 200ms ease-in;
}

.docs-nav-list a.active::after {
  width: 100%;
  background-color: var(--link-active);
}

.docs-nav-links-container {
	display: flex;
	gap: 1em;
}

.docs-nav-links {
	list-style: none;
	position: relative;
	cursor: pointer;
	margin: 0em;
	padding: 1em 0;
}

.docs-nav-links a {
	color: var(--link-menu);
}

.docs-nav-links:hover a {
  color: var(--link-menu-hover);
  text-decoration: none;
}

.docs-nav-links:hover a::after {
  width: 100%;
}

/* Hover effect for active link */

.docs-nav-links:hover a.active {
  color: var(--vermilion);
}

/* .docs-nav-links:hover a.active::after {
  background-color: var(--link-menu-hover);
} 
*/

/*Top Nav Containing search bar should only show for mobile and tablet below Flare added slide out menu */
/*Madcap Search bar styles determined by TopSideNavSearchBar skin*/

.top-nav-container-small
{
	display: none;
}

/* federated-search-box */

.federated-search-box-root
{
	position: relative;
}

.federated-search-box-input
{
	height: 2em;
	width: 100%;
	border: solid 1px var(--linen-white);
	border-top-left-radius: 0.4em;
	border-top-right-radius: 0.4em;
	border-bottom-right-radius: 0.4em;
	border-bottom-left-radius: 0.4em;
	color: var(--text); /* search input color */
	background-color: var(--bg-secondary);
	font-family: var(--body-font);
	font-size: var(--font-size-b1);
	padding-left: 10px;
}

.federated-search-box-input::placeholder { /* placeholder text color */
  color: var(--text); /* search input color */
}

.federated-search-box-input-adornment
{
	position: absolute;
	top: 1px;
	right: 1px;
	width: 36px;
	border-top-right-radius: 0.4em;
	border-bottom-right-radius: 0.4em;
	text-align: center;
	padding: 4px 6px 2px 0px;
}

.federated-search-box-input-adornment > svg
{
	cursor: pointer;
}

/* SIDE NAVIGATION */

/* use if side navigation font needs to be different than body font
ul.sidenav li > a { 
	font-family: ;
}*/

.sidenav-wrapper ul ul.is-accordion-submenu {
}

.submenu-toggle-container {
	width: 16px !important;
	height: 16px !important;
	background: var(--icon-right-url);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.is-accordion-submenu-parent > a[aria-expanded='true'] > .submenu-toggle-container {
	background: var(--icon-down-url);
}

.submenu-toggle-container .submenu-toggle,
.submenu-toggle-container .invisible-label {
	display: none !important;
}

/* Additional menu item levels that can't be edited in TopSideNavSearchBar skin */
ul.sidenav ul ul ul ul ul > li > a {
   margin-left: 5rem;
}

ul.sidenav ul ul ul ul ul ul > li > a {
   margin-left: 6rem;
}

.sidenav li:has(a.selected) > a {
  color: var(--link-active);
}

/* BODY */ 

b {
	font-weight: var(--font-weight-semibold);
}

body {
	background: var(--bg);
}

.body-container
{
	padding: 20px 100px 0 100px;
}

/* LAYOUT */

.topic-container
{
	display: flex;
	gap: 100px;
}

.body-proxy
{
	max-width: 70%;
}

.menu-proxy
{
	max-width: 25%;
    position: sticky;
    top: 0; /* This hooks to the top of .body-container, not the browser window */
	height: 100%;
    z-index: 99;
	min-width: 200px;
    max-height: calc(500px); /* 100% viewport height minus some padding */
    overflow-y: auto;
    overflow-x: hidden; /* Prevents accidental horizontal layout shifts */
    align-self: start;
}

/* ON THIS PAGE SIDE MENU PROXY */
/* styles controlled by Flare Skin: Menu.flskn */

/* BY DEFAULT - HIDE H1 ON SIDE MENU PROXY - commenting this out for now because some pages only have H1 which leads to an empty looking side menu
.menu-proxy .sticky-menu > ul > li:first-child {
	display: none;
}
*/

/* BY DEFAULT - HIDE LEVEL 3+ ON SIDE MENU PROXY*/

.menu-proxy ul > ul ul,
.menu-proxy ul > li > ul ul
{
	display: none;
}

.menu-proxy > ul > li > a
{ 
	text-transform: uppercase;
}

/* FOOTER */

.footer-wrapper {
	margin: 50px 0 0 0;
	border-top: 1px solid var(--border);
}

.footer-wrapper ul {
	list-style: none;
}

.footer-links-container {
	display: flex;
}

.footer-column {
	flex: 1 1;
}

.footer-column p {
	text-transform: uppercase;
}

.footer-links-container ul {
	padding: 0px;
}

.footer-social {
	display: flex;
	align-items: center;
}

.footer-social p {
	flex: 0 0 50%;
}

.footer-social ul {
	flex: 0 0 50%;
	display: flex;
	justify-content: flex-end;
}

.footer-social li.social {
	font-size: 1.4em;
	flex: 0 0 5%;
}

.footer-social li.social a {
	color: var(--text);
	display: inline-flex;
	width: 40px;
  	height: 40px;
  	align-items: center;
 	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
}

.footer-social li.social a:hover {
	text-decoration: none;
	opacity: var(--hover-icon);
}

/* ONE TRUST COOKIES BANNER */
#onetrust-banner-sdk.otFlat {
	background-color: var(--white) !important;
	font-family: inherit !important;
}

#onetrust-banner-sdk #onetrust-policy-text,
#onetrust-banner-sdk #onetrust-policy-text a {
	color: var(--smokey-black) !important;
}

#onetrust-banner-sdk #onetrust-accept-btn-handler,
#onetrust-banner-sdk #onetrust-reject-all-handler {
	background-color: var(--smokey-black) !important;
	border-color: var(--smokey-black) !important;
	color: var(--white) !important;
	border-radius: 4px !important;
}

#onetrust-banner-sdk #onetrust-accept-btn-handler:hover,
#onetrust-banner-sdk #onetrust-reject-all-handler:hover {
	opacity: var(--hover-icon) !important;
}

#onetrust-banner-sdk #onetrust-pc-btn-handler {
	background-color: var(--white) !important;
	color: var(--smokey-black) !important;
	border-color: var(--smokey-black) !important;
}

#onetrust-banner-sdk #onetrust-pc-btn-handler:hover {
	background-color: var(--smokey-black) !important;
	color: var(--white) !important;
	opacity: 100;
	
}

/* MEDIA QUERIES*/
@media all and (max-width: 480px)
{
	.top-nav-container
	{
		display: none;
	}

	.top-nav-container-small
	{
		display: block;
	}

	.landing-page-container
	{
		flex-direction: column;
	}

	.text-box-container
	{
		flex-direction: column;
	}

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

	.body-proxy
	{
		max-width: 100%;
	}

	.menu-proxy
	{
		display: none;
	}

	.footer-links-container
	{
		display: none;
	}

	.title-bar .menu-icon span
	{
		background: url("https://images.ctfassets.net/lbgy40h4xfb7/3ZGvqDURHruV5aJgBlK5Hm/fa2f7596601173a5b2d447e8a1848bbd/menu-hamburger.svg");
		background-position: center;
		background-repeat: no-repeat;
	}
}

@media all and (max-width: 1280px)
{
	.top-nav-container
	{
		display: none;
	}

	.top-nav-container-small
	{
		display: block;
	}

	.landing-page-container
	{
		flex-direction: column;
	}

	.text-box-container
	{
		flex-direction: column;
	}

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

	.body-proxy
	{
		max-width: 100%;
	}

	.menu-proxy
	{
		display: none;
	}

	.footer-links-container
	{
		display: none;
	}

	.title-bar .menu-icon span
	{
		background: url("https://images.ctfassets.net/lbgy40h4xfb7/3ZGvqDURHruV5aJgBlK5Hm/fa2f7596601173a5b2d447e8a1848bbd/menu-hamburger.svg");
		background-position: center;
		background-repeat: no-repeat;
	}
}

@media all and (max-width: 1550px)
{
	.body-container
	{
		padding: 20px 50px 0 50px;
	}

	.topic-container
	{
		gap: 50px;
	}

	.text-box-container
	{
		gap: 50px;
	}

	.text-box
	{
		flex: 0 1 calc(50% - 50px);
	}

	.link-container
	{
		gap: 0 50px;
	}

	.link-box
	{
		flex: 0 1 calc(50% - 50px);
	}

	.landing-page-container a
	{
		flex: 0 1 calc(50% - 50px);
		margin: 10px 30px 10px 0px;
	}
}

/* SCROLLBAR */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--smokey-black-100) transparent;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--smokey-black-100);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Dark mode override, if the thumb/track needs different contrast */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: var(--smokey-black-500); /* lighter variant for visibility on dark bg */
}

html[data-theme="dark"] {
  scrollbar-color: var(--smokey-black-500) transparent;
}